/******************
    Vanilla theme — landing publica INIE
    Paleta: #00395D | #005f9e | #51A3DB | #FFC83E
    UTI-INIE 2026-07-09
*/

:root {
    --inie-azul-oscuro: #00395D;
    --inie-azul-medio:  #005f9e;
    --inie-azul-claro:  #51A3DB;
    --inie-amarillo:    #FFC83E;
    --inie-gris-fondo:  #f0f4f8;
}

/* ============================================================
   FONDO GENERAL
   ============================================================ */
body.vanilla {
    background: var(--inie-gris-fondo) !important;
    min-height: 100vh;
}

/* ============================================================
   HERO — jumbotron con logo INIE sobre fondo azul
   ============================================================ */
#surveys-list-jumbotron {
    background: linear-gradient(135deg, var(--inie-azul-oscuro) 0%, var(--inie-azul-medio) 100%) !important;
    padding: 45px 30px 30px 30px !important;
    border-radius: 12px !important;
    border-bottom: 5px solid var(--inie-amarillo) !important;
    margin: 30px auto 40px auto !important;
    max-width: 1140px !important;
    box-shadow: 0 6px 24px rgba(0, 57, 93, 0.18) !important;
    text-align: center;
}

#surveys-list-jumbotron img {
    max-width: 100% !important;
    max-height: 140px !important;
    height: auto !important;
    filter: none !important;
}

#surveys-list-jumbotron span.text-center {
    display: block !important;
    color: #ffffff !important;
    font-size: 1.25rem !important;
    font-weight: 300 !important;
    margin-top: 18px !important;
    letter-spacing: 0.04em !important;
}

/* ============================================================
   CONTENEDOR PRINCIPAL — encuadrado
   ============================================================ */
#surveys-list-container {
    max-width: 1140px !important;
    margin: 0 auto !important;
    padding: 0 20px 40px 20px !important;
}

/* ============================================================
   ENCABEZADO "The following surveys are available"
   ============================================================ */
.surveylistrowdiva .h3,
#surveys-list-container .h3 {
    color: var(--inie-azul-oscuro) !important;
    font-weight: 700 !important;
    border-left: 4px solid var(--inie-amarillo) !important;
    padding-left: 14px !important;
    margin: 20px 0 20px 0 !important;
    font-size: 1.4rem !important;
    line-height: 1.3 !important;
}

/* ============================================================
   BOTONES DE ENCUESTAS (cada encuesta pública)
   ============================================================ */
#surveys-list-container .btn.btn-primary {
    background-color: var(--inie-azul-medio) !important;
    border: 2px solid var(--inie-azul-medio) !important;
    color: #ffffff !important;
    padding: 14px 20px !important;
    text-align: left !important;
    border-radius: 8px !important;
    margin-bottom: 14px !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 2px 6px rgba(0, 57, 93, 0.10);
    white-space: normal !important;
}

#surveys-list-container .btn.btn-primary:hover,
#surveys-list-container .btn.btn-primary:focus {
    background-color: var(--inie-amarillo) !important;
    color: var(--inie-azul-oscuro) !important;
    border-color: var(--inie-amarillo) !important;
    box-shadow: 0 4px 10px rgba(255, 200, 62, 0.30);
    transform: translateY(-1px);
}

/* Cuando no hay encuestas: al menos el ul mantiene padding coherente */
ul.list-unstyled {
    padding-left: 0 !important;
}

/* ============================================================
   TEXTO DE CONTACTO — caja amarilla suave
   ============================================================ */
.surveylistrowdivc,
#surveys-list-container > .col-12 > .row:last-of-type > .col-12 {
    background: #fff8e1 !important;
    border-left: 4px solid var(--inie-amarillo) !important;
    padding: 16px 20px !important;
    margin-top: 30px !important;
    border-radius: 6px !important;
    color: #5a4200 !important;
    font-size: 0.95rem !important;
}

.surveylistrowdivc a,
#surveys-list-container > .col-12 > .row:last-of-type > .col-12 a {
    color: var(--inie-azul-medio) !important;
    font-weight: 600 !important;
}

/* ============================================================
   LANGUAGE CHANGER — derecha, discreto
   ============================================================ */
#surveylist-language-changer {
    text-align: right !important;
    margin: 5px 0 15px 0 !important;
}

/* ============================================================
   FOOTER LIMESURVEY — ocultar
   ============================================================ */
#surveyListFooter {
    display: none !important;
}

/* ============================================================
   ESTADO VACIO — cuando no hay encuestas publicas activas
   Usa CSS :has() (Chrome/Firefox/Safari modernos)
   ============================================================ */

/* Ocultar el heading "Los siguientes formularios..." si la lista esta vacia */
body.vanilla:has(ul.list-unstyled:not(:has(> li))) .survey-list-heading {
    display: none !important;
}

/* Icono decorativo — pseudo-elemento ::before */
ul.list-unstyled:not(:has(> li))::before {
    content: "\1F4CB ";
    display: block;
    font-size: 3rem;
    line-height: 1;
    text-align: center;
    margin-top: 30px;
    padding-top: 15px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border: 1px solid #cfd8e3;
    border-bottom: none;
    border-left: 4px solid var(--inie-amarillo);
    border-radius: 12px 12px 0 0;
    color: var(--inie-azul-medio);
    box-shadow: 0 2px 12px rgba(0, 57, 93, 0.06);
    margin: 20px 0 0 0;
}

/* Mensaje — pseudo-elemento ::after */
ul.list-unstyled:not(:has(> li))::after {
    content: "En este momento no hay encuestas abiertas al público.\A\A Si recibió un enlace directo, úselo para acceder al formulario correspondiente.";
    white-space: pre-line;
    display: block;
    padding: 20px 35px 45px 35px;
    background: linear-gradient(180deg, #f8fbff 0%, #f0f4f8 100%);
    border: 1px solid #cfd8e3;
    border-top: none;
    border-left: 4px solid var(--inie-amarillo);
    border-radius: 0 0 12px 12px;
    color: var(--inie-azul-oscuro);
    font-weight: 500;
    font-size: 1.05rem;
    line-height: 1.7;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0, 57, 93, 0.06);
    margin: 0 0 30px 0;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 767px) {
    #surveys-list-jumbotron {
        padding: 25px 15px !important;
        margin: 15px 10px 25px 10px !important;
    }
    #surveys-list-jumbotron img {
        max-height: 90px !important;
    }
    #surveys-list-container {
        padding: 0 10px 30px 10px !important;
    }
}