/* Importar tipografía moderna */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
}

body {
    /* Fondo Turquesa Institucional */
    background-color: #239ba7;

    /* Burbujas sólidas y trazos distribuidos en las 4 esquinas */
    background-image:
        /* 1. ESQUINA SUPERIOR IZQUIERDA */
        /* Sólido Azul Marino */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%23213542' d='M45,-60C58,-51,67,-36,69,-20C71,-4,66,13,58,28C50,43,39,56,24,63C9,70,-10,71,-27,65C-44,59,-59,46,-67,29C-75,12,-76,-9,-69,-27C-62,-45,-47,-60,-30,-67C-13,-74,6,-73,24,-68Z' transform='translate(40 40)' /%3E%3C/svg%3E"),
        /* Contorno Verde Lima */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='none' stroke='%23C5E059' stroke-width='4' d='M40,-55C52,-45,60,-30,62,-15C64,-1,58,13,50,25C42,37,32,47,18,53C4,59,-14,61,-30,55C-46,49,-60,35,-66,18C-72,1,-70,-19,-61,-35C-52,-51,-36,-63,-20,-68C-4,-73,12,-71,28,-65Z' transform='translate(60 60)' /%3E%3C/svg%3E"),

        /* 2. ESQUINA SUPERIOR DERECHA */
        /* Sólido Verde Lima */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%23C5E059' d='M38,-51C49,-41,58,-28,61,-13C64,2,61,19,53,33C45,47,32,58,16,64C0,70,-19,71,-35,64C-51,57,-64,42,-70,25C-76,8,-70,-11,-60,-26C-50,-41,-36,-52,-21,-59C-6,-66,10,-69,25,-64Z' transform='translate(150 40)' /%3E%3C/svg%3E"),
        /* Contorno Azul Marino Ligero */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='none' stroke='%2315232d' stroke-width='4' d='M47,-58C60,-47,70,-31,71,-15C72,1,64,17,55,32C46,47,36,61,21,68C6,75,-14,75,-31,68C-48,61,-62,47,-69,30C-76,13,-76,-7,-69,-24C-62,-41,-48,-55,-32,-63C-16,-71,2,-73,19,-68Z' transform='translate(170 80)' /%3E%3C/svg%3E"),

        /* 3. ESQUINA INFERIOR IZQUIERDA */
        /* Sólido Verde Lima */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%23C5E059' d='M42,-55C54,-45,64,-31,67,-15C70,1,66,19,57,33C48,47,34,57,18,63C2,69,-16,71,-32,65C-48,59,-62,45,-68,28C-74,11,-72,-9,-63,-25C-54,-41,-38,-53,-22,-60C-6,-67,10,-69,26,-65Z' transform='translate(20 100)' /%3E%3C/svg%3E"),
        /* Contorno Azul */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='none' stroke='%23213542' stroke-width='4' d='M35,-48C46,-39,55,-27,58,-13C61,1,58,17,50,30C42,43,29,53,13,58C-3,63,-21,63,-35,56C-49,49,-59,35,-65,19C-71,3,-69,-15,-60,-30C-51,-45,-35,-57,-18,-62C-1,-67,16,-65,29,-59Z' transform='translate(40 120)' /%3E%3C/svg%3E"),

        /* 4. ESQUINA INFERIOR DERECHA */
        /* Sólido Azul Marino */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='%23213542' d='M44,-58C57,-48,68,-33,70,-17C72,-1,65,16,56,31C47,46,36,59,21,66C6,73,-13,74,-30,67C-47,60,-61,45,-68,28C-75,11,-75,-8,-68,-25C-61,-42,-47,-57,-31,-64C-15,-71,3,-70,20,-66Z' transform='translate(160 160)' /%3E%3C/svg%3E"),
        /* Contorno Verde Lima */
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Cpath fill='none' stroke='%23C5E059' stroke-width='4' d='M38,-50C49,-40,58,-27,61,-12C64,3,61,20,52,34C43,48,28,59,12,64C-4,69,-21,68,-36,60C-51,52,-64,37,-70,20C-76,3,-75,-16,-66,-31C-57,-46,-40,-57,-23,-63C-6,-69,11,-70,25,-63Z' transform='translate(140 140)' /%3E%3C/svg%3E");

    background-repeat: no-repeat;

    /* Ubicación exacta en las 4 esquinas */
    background-position:
        top -50px left -50px,
        /* Arriba Izquierda Sólido */
        top -20px left -20px,
        /* Arriba Izquierda Línea */
        top -60px right -60px,
        /* Arriba Derecha Sólido */
        top -30px right -30px,
        /* Arriba Derecha Línea */
        bottom -70px left -60px,
        /* Abajo Izquierda Sólido */
        bottom -40px left -30px,
        /* Abajo Izquierda Línea */
        bottom -60px right -50px,
        /* Abajo Derecha Sólido */
        bottom -30px right -30px;
    /* Abajo Derecha Línea */

    background-size: 320px, 300px, 340px, 310px, 350px, 320px, 330px, 300px;

    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    position: relative;
    overflow-x: hidden;
}

/* Ocultar pseudoelementos viejos */
body::before,
body::after {
    display: none !important;
}

/* --- Tarjeta Principal / Formulario --- */
.container {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 780px;
    background: #ffffff;
    border-radius: 24px;
    padding: 45px 40px;
    box-shadow: 0 20px 40px rgba(33, 53, 66, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.hidden {
    display: none !important;
}

/* --- Logo con letras blancas --- */
/*
  Crea una capsula/cabecera oscura dentro de la tarjeta blanca 
  para que las letras blancas de tu logo resalten impecablemente.
*/
.logo {
    width: 220px;
    height: auto;
    display: block;
    margin: 0 auto 25px auto;
    background-color: #213542;
    /* Azul marino oscuro para alto contraste */
    padding: 14px 24px;
    border-radius: 16px;
    box-shadow: 0 6px 16px rgba(33, 53, 66, 0.15);
}

/* --- Tipografía y Encabezados --- */
h1 {
    text-align: center;
    color: #213542;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.3;
}

h2 {
    color: #213542;
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 20px;
}

p {
    text-align: center;
    color: #52636c;
    margin-bottom: 30px;
    font-size: 16px;
    line-height: 1.6;
}

/* --- Botones Generales y Estilo Base --- */
button,
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border: none;
    padding: 14px 24px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

/* Botón Iniciar / Siguiente */
#start,
#next {
    background: #239ba7;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(35, 155, 167, 0.3);
}

#start {
    width: 100%;
    font-size: 17px;
    padding: 16px;
}

#start:hover,
#next:hover {
    background: #1b7e88;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(35, 155, 167, 0.4);
}

/* Botón Anterior */
#previous {
    background: #f1f5f9;
    color: #52636c;
}

#previous:hover:not(:disabled) {
    background: #e2e8f0;
    color: #213542;
}

#previous:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Botones con clase .btn creados por JavaScript */
.btn {
    background: #213542;
    color: #ffffff;
}

.btn:hover {
    background: #15232d;
    transform: translateY(-2px);
}

#restart {
    background: #c5e059;
    color: #213542;
    width: 100%;
    font-size: 16px;
}

#restart:hover {
    background: #b2cc4d;
    transform: translateY(-2px);
}

/* --- Quiz & Barra de Progreso --- */
.top {
    margin-bottom: 25px;
}

#counter {
    font-weight: 700;
    color: #239ba7;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.progress {
    height: 10px;
    background: #eaf3f5;
    border-radius: 20px;
    overflow: hidden;
}

#progressBar {
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, #239ba7, #c5e059);
    border-radius: 20px;
    transition: width 0.4s ease;
}

/* --- Opciones de Respuesta --- */
#answers {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 20px 0;
}

.answer {
    padding: 16px 20px;
    border: 2px solid #eaf3f5;
    background: #f8fafc;
    border-radius: 14px;
    cursor: pointer;
    font-weight: 500;
    color: #213542;
    transition: all 0.2s ease;
}

.answer:hover {
    border-color: #239ba7;
    background: #f0f9fa;
    transform: translateX(4px);
}

.answer.selected {
    border-color: #239ba7;
    background: #e6f5f7;
    color: #239ba7;
    font-weight: 700;
    box-shadow: 0 4px 10px rgba(35, 155, 167, 0.1);
}

/* --- Tarjetas de Resultados y Módulos Extra --- */
.card {
    background: #f0f9fa;
    padding: 24px;
    margin: 20px 0;
    border-radius: 16px;
    border-left: 6px solid #239ba7;
}

.buttons {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    gap: 15px;
}

/* Ajustes Responsive */
@media (max-width: 600px) {
    .container {
        padding: 25px 20px;
        border-radius: 18px;
    }

    h1 {
        font-size: 22px;
    }
}

/* ==========================================================
   ESTILOS MEJORADOS PARA LA PANTALLA DE RESULTADOS
   ========================================================== */

/* Tarjeta Principal Sugerida (Hero) */
.result-hero-card {
    background: linear-gradient(135deg, #ffffff 0%, #f4fbfb 100%);
    border: 2px solid #239ba7;
    border-radius: 18px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 10px 25px rgba(35, 155, 167, 0.12);
}

.result-hero-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.badge-tag {
    background: #e6f5f7;
    color: #239ba7;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}

.result-title {
    color: #213542;
    font-size: 24px;
    font-weight: 700;
    margin-top: 6px;
    margin-bottom: 0;
    text-align: left;
}

.score-circle {
    background: #213542;
    color: #ffffff;
    min-width: 75px;
    height: 75px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(33, 53, 66, 0.2);
    border: 3px solid #c5e059;
}

.score-circle span {
    font-size: 20px;
    font-weight: 700;
    line-height: 1;
}

.score-circle small {
    font-size: 9px;
    text-transform: uppercase;
    opacity: 0.8;
    margin-top: 2px;
}

.result-description {
    text-align: left !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #425460 !important;
    margin-bottom: 0 !important;
}

/* Grid para Áreas Secundarias y Barras */
.results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 25px;
}

/* Tarjeta Info Secundaria y Margen */
.subcard-info {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.subcard-item {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.subcard-label {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.subcard-value {
    color: #213542;
    font-size: 16px;
    font-weight: 700;
}

.subcard-value-sm {
    color: #52636c;
    font-size: 14px;
    font-weight: 500;
}

.subcard-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 15px 0;
}

/* Tarjeta Barras de Desglose */
.bars-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 20px;
    text-align: left;
}

.bars-card h3 {
    font-size: 15px;
    color: #213542;
    font-weight: 700;
    margin-bottom: 15px;
}

.bar-item {
    margin-bottom: 12px;
}

.bar-item:last-child {
    margin-bottom: 0;
}

.bar-info {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #213542;
    margin-bottom: 4px;
}

.bar-track {
    background: #e2e8f0;
    height: 12px;
    border-radius: 10px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #239ba7, #c5e059);
    border-radius: 10px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Ajustes de Responsividad para Laptops/Móviles pequeños */
@media (max-width: 768px) {
    .results-grid {
        grid-template-columns: 1fr;
        /* Cambia a 1 sola columna */
    }

    .container {
        padding: 30px 20px;
    }

    .result-hero-header {
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    .score-circle {
        align-self: flex-start;
        min-width: 65px;
        height: 65px;
    }
}

/* ==========================================================
   ESTILOS Y RESPONSIVIDAD EXCLUSIVOS DE LA SECCIÓN RESULTADOS
   ========================================================== */

/* Tarjeta Principal Sugerida (Hero) */
#results .result-hero-card {
    background: linear-gradient(135deg, #ffffff 0%, #f4fbfb 100%);
    border: 2px solid #239ba7;
    border-radius: 18px;
    padding: 22px;
    margin-bottom: 20px;
    box-shadow: 0 10px 25px rgba(35, 155, 167, 0.12);
}

#results .result-hero-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 12px;
}

#results .badge-tag {
    background: #e6f5f7;
    color: #239ba7;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 4px 10px;
    border-radius: 20px;
    letter-spacing: 0.5px;
}

#results .result-title {
    color: #213542;
    font-size: 22px;
    font-weight: 700;
    margin-top: 6px;
    margin-bottom: 0;
    text-align: left;
}

#results .score-circle {
    background: #213542;
    color: #ffffff;
    min-width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 12px rgba(33, 53, 66, 0.2);
    border: 3px solid #c5e059;
}

#results .score-circle span {
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
}

#results .score-circle small {
    font-size: 8px;
    text-transform: uppercase;
    opacity: 0.85;
    margin-top: 2px;
}

#results .result-description {
    text-align: left !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #425460 !important;
    margin-bottom: 0 !important;
}

/* Grid para Áreas Secundarias y Barras */
#results .results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-bottom: 25px;
}

/* Tarjeta Info Secundaria y Margen */
#results .subcard-info {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#results .subcard-item {
    display: flex;
    flex-direction: column;
    text-align: left;
}

#results .subcard-label {
    font-size: 12px;
    color: #64748b;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 4px;
}

#results .subcard-value {
    color: #213542;
    font-size: 15px;
    font-weight: 700;
}

#results .subcard-value-sm {
    color: #52636c;
    font-size: 13px;
    font-weight: 500;
}

#results .subcard-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 12px 0;
}

/* Tarjeta Barras de Desglose */
#results .bars-card {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    padding: 18px;
    text-align: left;
}

#results .bars-card h3 {
    font-size: 14px;
    color: #213542;
    font-weight: 700;
    margin-bottom: 12px;
}

#results .bar-item {
    margin-bottom: 10px;
}

#results .bar-item:last-child {
    margin-bottom: 0;
}

#results .bar-info {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    color: #213542;
    margin-bottom: 4px;
}

#results .bar-track {
    background: #e2e8f0;
    height: 10px;
    border-radius: 10px;
    overflow: hidden;
}

#results .bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #239ba7, #c5e059);
    border-radius: 10px;
    transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- RESPONSIVIDAD EXCLUSIVA DE RESULTADOS PARA TELÉFONOS --- */
@media (max-width: 600px) {
    #results .results-grid {
        grid-template-columns: 1fr;
        /* Pasa de 2 columnas a 1 sola columna en celular */
        gap: 12px;
    }

    #results .result-hero-card {
        padding: 16px 14px;
    }

    #results .result-hero-header {
        align-items: center;
    }

    #results .result-title {
        font-size: 18px;
    }

    #results .score-circle {
        min-width: 58px;
        height: 58px;
    }

    #results .score-circle span {
        font-size: 15px;
    }

    #results .result-description {
        font-size: 13.5px !important;
    }

    #results .subcard-info,
    #results .bars-card {
        padding: 14px 12px;
    }
}


/* --- Footer Institucional y Leyenda de Voluntariado --- */
.app-footer {
    margin-top: 35px;
    padding-top: 18px;
    border-top: 1px solid #eaf3f5;
    text-align: center;
}

.app-footer p {
    font-size: 11.5px !important;
    color: #82929c !important;
    line-height: 1.5 !important;
    margin-bottom: 0 !important;
}

.app-footer strong {
    color: #52636c;
    font-weight: 600;
}

/* Ajuste sutil para móviles */
@media (max-width: 600px) {
    .app-footer {
        margin-top: 25px;
        padding-top: 14px;
    }

    .app-footer p {
        font-size: 10.5px !important;
    }
}




/* ==========================================================
   PERSONALIZACIÓN DE LA BARRA DE DESPLAZAMIENTO (SCROLLBAR)
   ========================================================== */

/* Estilo estándar moderno (Firefox y navegadores recientes) */
html {
    scrollbar-color: #239ba7 #1b2a35;
    /* Barra azul/turquesa y fondo oscuro */
    scrollbar-width: thin;
}

/* Estilo personalizado Webkit (Chrome, Edge, Safari, Opera) */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

/* Fondo del carril de desplazamiento */
::-webkit-scrollbar-track {
    background: #1b2a35;
}

/* La barra/botón que se desplaza */
::-webkit-scrollbar-thumb {
    background: #239ba7;
    border-radius: 8px;
    border: 2px solid #1b2a35;
    /* Crea un margen suave */
}

/* Al pasar el cursor sobre la barra */
::-webkit-scrollbar-thumb:hover {
    background: #1c7f88;
}




/* --- Footer Institucional Base --- */
.app-footer {
    margin-top: 30px;
    padding-top: 15px;
    border-top: 1px solid #eaf3f5;
    text-align: center;
}

.app-footer p {
    font-size: 11.5px !important;
    color: #82929c !important;
    line-height: 1.4 !important;
    margin-bottom: 0 !important;
}

.app-footer strong {
    color: #52636c;
    font-weight: 600;
}

/* --- RESPONSIVIDAD ULTRA COMPACTA PARA TELÉFONOS --- */
@media (max-width: 600px) {
    .app-footer {
        margin-top: 16px;      /* Reduce el espacio con los botones superiores */
        padding-top: 10px;     /* Reduce la altura de la línea divisoria */
        border-top-color: #f0f4f6;
    }

    .app-footer p {
        font-size: 9.5px !important;  /* Texto pequeño para no ocupar espacio */
        line-height: 1.3 !important;   /* Interlineado ajustado */
        opacity: 0.85;                /* Tono suave para no distraer */
    }
}