/* =========================================================
   APACIGUA
   Trivia cívica
   Diseño específico del juego
   ========================================================= */


/* =========================================================
   PRESENTACIÓN
   ========================================================= */

.trivia-presentacion {

    width: 100%;

    max-width: 850px;

    margin:
        0
        auto
        32px;

    text-align: center;

}


.trivia-presentacion h1 {

    margin-bottom: 8px;

    font-size: 32px;

    font-weight: 500;

    color: var(--color-principal);

}


.trivia-presentacion p {

    max-width: 650px;

    margin:
        0
        auto;

    font-size: 16px;

    color: var(--color-texto-suave);

}


/* =========================================================
   PANEL PRINCIPAL
   ========================================================= */

.trivia-panel {

    width: 100%;

    max-width: 820px;

    margin:
        0
        auto;

    padding:
        32px;

    background:
        var(--color-superficie);

    border:
        1px solid
        var(--color-borde);

    border-radius: 16px;

    box-shadow:
        var(--sombra-suave);

}


/* =========================================================
   NIVEL
   ========================================================= */

.trivia-nivel {

    margin-bottom: 24px;

    padding-bottom: 15px;

    border-bottom:
        1px solid
        var(--color-borde);

    color:
        var(--color-principal);

    font-size: 15px;

    font-weight: 600;

    text-align: center;

}


/* =========================================================
   PREGUNTA
   ========================================================= */

.trivia-pregunta-bloque {

    margin-bottom: 25px;

    text-align: center;

}


.trivia-pregunta {

    max-width: 700px;

    margin:
        0
        auto;

    color:
        var(--color-texto);

    font-size: 21px;

    font-weight: 600;

    line-height: 1.45;

}


/* =========================================================
   OPCIONES
   ========================================================= */

.trivia-opciones {

    width: 100%;

    max-width: 650px;

    margin:
        0
        auto;

    display: grid;

    gap: 12px;

}


.trivia-opcion {

    width: 100%;

    min-height: 54px;

    padding:
        13px
        18px;

    border:
        1px solid
        var(--color-borde);

    border-radius: 10px;

    background:
        #f8faf9;

    color:
        var(--color-texto);

    font-family: inherit;

    font-size: 15px;

    font-weight: 500;

    line-height: 1.4;

    text-align: left;

    cursor: pointer;

    transition:
        transform .16s ease,
        border-color .16s ease,
        background-color .16s ease,
        box-shadow .16s ease;

}


.trivia-opcion:hover:not(:disabled) {

    transform:
        translateY(-1px);

    border-color:
        var(--color-principal);

    background:
        #ffffff;

    box-shadow:
        0 4px 12px
        rgba(35, 55, 45, 0.07);

}


.trivia-opcion:disabled {

    cursor: default;

}


/* =========================================================
   RESPUESTA CORRECTA
   ========================================================= */

.trivia-opcion-correcta {

    background:
        #e8f5ee !important;

    border-color:
        #3f9278 !important;

    color:
        #245d49 !important;

}


/* =========================================================
   RESPUESTA INCORRECTA
   ========================================================= */

.trivia-opcion-incorrecta {

    background:
        #fbecea !important;

    border-color:
        #c86d62 !important;

    color:
        #843d36 !important;

}


/* =========================================================
   EXPLICACIÓN
   ========================================================= */

.trivia-resultado {

    width: 100%;

    max-width: 650px;

    margin:
        22px
        auto
        0;

    padding:
        18px
        20px;

    border-radius: 10px;

    background:
        #f3f7f5;

    border-left:
        4px solid
        var(--color-principal);

    color:
        var(--color-texto);

    font-size: 15px;

    line-height: 1.6;

}


.trivia-resultado strong {

    color:
        var(--color-principal);

}


.trivia-resultado p {

    margin:
        7px
        0
        0;

}


/* =========================================================
   BOTÓN SIGUIENTE
   ========================================================= */

.trivia-siguiente {

    width: 100%;

    max-width: 650px;

    min-height: 50px;

    margin:
        20px
        auto
        0;

    display: block;

    padding:
        12px
        20px;

    border: 0;

    border-radius: 10px;

    background:
        var(--color-principal);

    color:
        #ffffff;

    font-family: inherit;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background-color .18s ease,
        transform .18s ease;

}


.trivia-siguiente:hover {

    background:
        var(--color-principal-hover);

    transform:
        translateY(-1px);

}


/* =========================================================
   IMPORTANTE
   Respeta correctamente el atributo hidden
   ========================================================= */

.trivia-resultado[hidden],
.trivia-siguiente[hidden],
.trivia-panel[hidden] {

    display: none !important;

}


/* =========================================================
   RESULTADO FINAL
   ========================================================= */

.trivia-final {

    text-align: center;

}


.trivia-final h2 {

    margin-bottom: 12px;

    color:
        var(--color-principal);

    font-size: 28px;

    font-weight: 500;

}


.trivia-final p {

    max-width: 620px;

    margin:
        0
        auto
        14px;

    color:
        var(--color-texto-suave);

}


/* =========================================================
   RECONOCIMIENTO
   ========================================================= */

.trivia-reconocimiento {

    width: 100%;

    max-width: 340px;

    height: auto;

    margin:
        25px
        auto
        20px;

    border-radius: 12px;

    box-shadow:
        0 8px 25px
        rgba(30, 50, 40, 0.10);

}


/* =========================================================
   BOTONES DEL RESULTADO FINAL
   ========================================================= */

.trivia-final .boton {

    margin:
        8px
        6px;

}


.trivia-mensaje-final {

    margin-top:
        22px !important;

    font-weight: 600;

    color:
        var(--color-principal) !important;

}


/* =========================================================
   TABLET Y MÓVIL
   ========================================================= */

@media (max-width: 700px) {


    .trivia-presentacion {

        margin-bottom: 25px;

    }


    .trivia-presentacion h1 {

        font-size: 27px;

    }


    .trivia-presentacion p {

        font-size: 15px;

    }


    .trivia-panel {

        padding:
            24px
            18px;

        border-radius: 13px;

    }


    .trivia-nivel {

        margin-bottom: 20px;

    }


    .trivia-pregunta {

        font-size: 19px;

    }


    .trivia-opcion {

        min-height: 52px;

        padding:
            12px
            15px;

    }


    .trivia-resultado {

        padding:
            16px;

    }


    .trivia-final h2 {

        font-size: 25px;

    }


    .trivia-reconocimiento {

        max-width: 300px;

    }


    .trivia-final .boton {

        width: 100%;

        margin:
            6px
            0;

    }

}