/* custom font */
@import url(fonts.googleapis.com);

/* basic reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Asegura que padding/border no sumen al ancho/alto total */
}

html, body {
    min-height: 100vh; /* Cubre la altura visible del viewport */
    margin: 0;
    padding: 0;
    /* overscroll-behavior-y: contain; <-- Opcional si el problema persistía */
}

body {
    font-family: montserrat, arial, verdana;
    /* Estilos de fondo con degradado y franja dorada */
    background-image:
        linear-gradient(to right, #FFC72C, #FFD700, #FFC72C),
        radial-gradient(circle, rgba(0,28,87,1) 0%, rgba(0,0,0,1) 100%);
    background-position: center center, center center;
    background-size: 100% 35px, cover;
    background-repeat: no-repeat;
    background-attachment: fixed; /* Fija el fondo al viewport */
    
    /* Si usas flexbox para centrar todo el body, descomenta esto */
    /* display: flex; */
    /* justify-content: center; */
    /* align-items: center; */
    /* overflow-y: auto; */
}

/* Estilos del Header y Logo (Escritorio) */
.main-header {
    position: relative;
}

.logo-escudo {
    position: fixed; /* Fija el logo a la ventana del navegador */
    width: 80px;   
    top: 20px;
    left: 20px;
    height: auto;
    z-index: 1000;
}

/* Estilos del Contenedor principal y Formulario (Escritorio) */
.content-wrapper {
     padding-top: 50px; /* Margen superior para el formulario si el logo fijo se superpone */
}

#msform {
	width: 400px;
	margin: auto; /* Centrado horizontal */
	text-align: center;
	position: relative;
}

#msform fieldset {
	background: white;
	border: 0 none;
	border-radius: 3px;
	box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4);
	padding: 20px 30px;
	box-sizing: border-box;
	width: 80%;
	margin: 0 10%;
	position: relative;
}

/* Hide all except first fieldset */
#msform fieldset:not(:first-of-type) {
	display: none;
}

/* Inputs, Textareas, Selects y Labels (Escritorio) */
#msform input, #msform textarea , #msform select {
	padding: 15px;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin-bottom: 10px;
	width: 100%;
	box-sizing: border-box;
	font-family: montserrat;
	color: #2C3E50;
	font-size: 13px;
    /* Estilos para unificar selects en todos los navegadores (opcional) */
    -webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none;
    background-position: right .7em top 50%, 0 0;
    background-size: .65em auto, 100%;
    padding-right: 25px; 
}

#msform label {
    font-size: 13px;
    margin-bottom: 5px;
    margin-top: 10px;
}

/* Botones (Escritorio) */
#msform .action-button {
	width: 100px;
	background: #27AE60;
	font-weight: bold;
	color: white;
	border: 0 none;
	border-radius: 1px;
	cursor: pointer;
	padding: 10px;
	margin: 10px 5px;
    text-decoration: none;
    font-size: 14px;
}
#msform .action-button:hover, #msform .action-button:focus {
	box-shadow: 0 0 0 2px white, 0 0 0 3px #27AE60;
}

/* Boton final "Comenzar otra citacion" (Escritorio) */
.submit.action-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
    display: block;
    width: auto;
    padding: 10px 20px;
}

/* Headings */
.fs-title {
	font-size: 15px;
	text-transform: uppercase;
	color: #2C3E50;
	margin-bottom: 10px;
}
.fs-subtitle {
	font-weight: normal;
	font-size: 13px;
	color: #666;
	margin-bottom: 20px;
}

/* Progressbar (Escritorio) */
#progressbar {
	margin-bottom: 30px;
	overflow: hidden;
	counter-reset: step;
}
#progressbar li {
	list-style-type: none;
	color: white;
	text-transform: uppercase;
	font-size: 9px;
	width: 33.33%;
	float: left;
	position: relative;
}
#progressbar li:before {
	content: counter(step);
	counter-increment: step;
	width: 20px;
	line-height: 20px;
	display: block;
	font-size: 10px;
	color: #333;
	background: white;
	border-radius: 3px;
	margin: 0 auto 5px auto;
}
/* Progressbar connectors */
#progressbar li:after {
	content: '';
	width: 100%;
	height: 2px;
	background: white;
	position: absolute;
	left: -50%;
	top: 9px;
	z-index: -1; /* put it behind the numbers */
}
#progressbar li:first-child:after {
	content: none; 
}
/* marking active/completed steps green */
#progressbar li.active:before,  #progressbar li.active:after{
	background: #27AE60;
	color: white;
}


/* ========================================================= */
/* MEDIA QUERIES - ESTILOS MÓVILES (max-width: 480px) */
/* ========================================================= */
@media screen and (max-width: 480px) {
    /* Logo Móvil */
    .logo-escudo {
        width: 50px; 
        top: 10px;   
        left: 10px;  
    }

    /* Formulario Móvil */
    #msform {
        width: 90%; 
        margin: 0 auto; 
        padding: 15px; 
    }

    /* Títulos Móviles */
    .fs-title {
        font-size: 13px;
    }
    .fs-subtitle {
        font-size: 11px;
    }

    /* Inputs, Selects, Textareas Móviles */
    #msform input, #msform textarea, #msform select {
        font-size: 14px; 
        padding: 12px; 
        margin-bottom: 8px; 
    }
    
    /* Labels Móviles */
    #msform label {
        font-size: 14px; 
        margin-bottom: 4px; 
        margin-top: 10px; 
    }

    /* Botones Atrás/Siguiente Móviles */
    #msform .action-button {
        font-size: 12px; 
        padding: 8px 10px; 
        width: 48%; 
        display: inline-block;
    }
    #msform .action-button[name="previous"] {
        margin-right: 2%;
    }

    /* Boton final "Comenzar otra citacion" Móvil */
    .submit.action-button {
        padding: 8px 15px; 
        font-size: 12px;
        bottom: 10px; 
        right: 10px;  
    }
    
    /* Progressbar Móvil (apilado verticalmente) */
    #progressbar {
        padding: 0;
        margin-bottom: 20px;
    }
    #progressbar li {
        width: 100%;
        float: none;
        margin-bottom: 10px;
        font-size: 10px;
        line-height: normal;
    }
    #progressbar li:after {
        content: none; /* Oculta conectores */
    }
    #progressbar li:before {
        display: inline-block;
        margin: 0 10px 0 0;
        vertical-align: middle;
    }
}

/* ========================================================= */
/* MEDIA QUERIES - ESTILOS TABLETAS (min-width: 481px y max-width: 768px) */
/* ========================================================= */
@media screen and (min-width: 481px) and (max-width: 768px) {
    /* Logo Tabletas */
    .logo-escudo {
        width: 65px; 
        top: 15px;
        left: 15px;
    }
}