/* Estilos generales (Fondo y fuente) */
body {
    background-color: #f7f7f7;
    font-family: 'Inter', sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ESTILOS PARA LA CABECERA SUPERIOR NEGRA */
.top-header {
    background-color: #333333; 
    color: white;
    padding: 10px 0;
    display: flex;
    justify-content: center; 
}

.custom-header-width {
    width: 98%; 
    max-width: 1500px;
    display: flex;
    justify-content: space-between; 
    align-items: center;
}

.logo-personal-flow {
    height: 18px; 
    vertical-align: middle;
}

.header-right .header-text-secure {
    color: #ffffff; 
    font-size: 14px;
}
.header-right .header-text-secure .fa-lock {
    margin-right: 5px;
}

/* ESTILO PARA EL TÍTULO DE PÁGINA */
.main-page-title {
    text-align: center;
    color: #000000; 
    font-weight: 700;
    margin-top: 20px;
    margin-bottom: 0px; 
}

/* Estilo para la caja del formulario de ingreso de datos */
.panel-body {
    background-color: #ffffff; 
    border: 1px solid #dee2e6; 
    border-radius: 8px; 
    box-shadow: 0 4px 12px rgba(0,0,0,.05); 
    padding: 30px !important; 
}

/* AJUSTE CLAVE: Para que los inputs y SELECTS tengan la altura correcta */
.form-control {
    height: 40px; 
    padding: 8px 12px !important; 
    border: 1px solid #ccc;
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    /* Para el select */
    -webkit-appearance: none; 
    -moz-appearance: none;
    appearance: none;
}

.line-help-text {
    text-align: center; 
    color: #6c757d; 
    font-size: 14px; 
    margin-top: 5px;
    margin-bottom: 10px; 
}

/* Estilo para el botón "Siguiente" */
.btn-default {
    background-color: #a0a0a0; 
    color: white; 
    border-color: #a0a0a0; 
    box-shadow: 0 2px 4px rgba(0,0,0,.15);
    transition: background-color 0.2s, box-shadow 0.2s;
    padding: 8px 30px; 
    font-weight: 500;
}

.btn-default:hover {
    background-color: #8c8c8c;
    border-color: #8c8c8c;
}

/* ESTILOS DE ACORDEÓN (Preguntas Frecuentes) */
.panel-default > .panel-heading {
    background-color: #ffffff;
    border-color: #dee2e6;
}
.panel-title a {
    color: #000000;
    font-weight: 500;
    display: block;
    padding: 10px 15px;
    margin: -10px -15px; 
}
.panel-title a .pull-right {
    transition: transform 0.3s;
}

/* ========================================================= */
/* AJUSTES DE ESPACIADO VERTICAL (index.html) */
/* ========================================================= */

.home {
    /* CLAVE: Reducido para acercar el título al banner */
    padding-top: 30px !important; 
    padding-bottom: 50px !important; 
    margin-top: 0 !important; 
}

/* Reducido para acercar los campos y el botón */
.form-group {
    margin-bottom: 15px !important; 
}

/* Reducido para acercar el banner al formulario */
.home > .row:first-of-type {
    margin-bottom: 30px !important; 
}

/* Reducido para acercar el botón al campo */
.botonera {
    margin-top: 20px !important;
}


/* ========================================================= */
/* ESTILOS PARA EL FOOTER INFERIOR */
/* ========================================================= */

.main-page-footer {
    background-color: #333; 
    color: #ccc; 
    padding: 15px 0; 
    font-size: 13px;
    width: 100%;
    margin-top: auto !important; 
}

.main-page-footer .container-fluid {
    display: flex;
    justify-content: space-between; 
    align-items: center;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 15px;
    padding-right: 15px;
}

@media (max-width: 767px) {
    .main-page-footer .container-fluid {
        flex-direction: column;
        text-align: center;
    }
    .main-page-footer .footer-left {
        margin-bottom: 5px; 
    }
}

/* ========================================================= */
/* ESTILOS PARA EL BANNER PROMOCIONAL (Final) */
/* ========================================================= */
.banner-promocional {
    margin-bottom: 0px; 
    /* CLAVE: Aumentado el ancho máximo para hacerlo más grande */
    max-width: 1200px; 
    margin-left: auto;
    margin-right: auto;
    border-radius: 8px; 
    overflow: hidden; 
    /* CLAVE: Sombra más pronunciada para un look más profesional */
    box-shadow: 0 8px 20px rgba(0,0,0,.15); 
}

.banner-promocional img {
    display: block;
    width: 100%;
    height: auto;
}

/* Ajuste para móviles */
@media (max-width: 767px) {
    .banner-promocional {
        margin-left: 15px; 
        margin-right: 15px;
        max-width: calc(100% - 30px);
    }
}