/* =========================================================
   KENZO Academia — examen oficial interactivo
   Usa los colores de marca definidos en style.css
   ========================================================= */

.eo-intro{ max-width: 96rem; margin: 0 auto; text-align: left; }
.eo-aviso{
    max-width: 96rem;
    margin: 0 auto 3rem;
    padding: 1.6rem 2rem;
    border-radius: 1.2rem;
    background-color: var(--colorClaro);
    font-size: 1.45rem;
    line-height: 1.6;
    text-align: left;
}
.eo-aviso a{ text-decoration: underline; font-weight: 700; }

/* ---------- Pestañas de las partes ---------- */
.eo-pestanas{
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 3rem;
}
.eo-pestana{
    padding: 1.4rem 2.4rem;
    border: .2rem solid var(--colorPrimario);
    border-radius: 1.2rem;
    background: var(--blanco);
    color: var(--colorPrimario);
    font: inherit;
    font-size: 1.6rem;
    font-weight: 800;
    cursor: pointer;
    transition: background-color var(--transicion), color var(--transicion);
}
.eo-pestana small{ display: block; font-size: 1.25rem; font-weight: 600; opacity: .8; }
.eo-pestana[aria-selected="true"]{ background-color: var(--colorPrimario); color: var(--colorClaro); }

/* ---------- Panel de inicio ---------- */
.eo-inicio{
    max-width: 72rem;
    margin: 0 auto 4rem;
    padding: 3.2rem;
    border-radius: var(--radio);
    background-color: var(--blanco);
    border-top: .6rem solid var(--colorSecundario);
    box-shadow: var(--sombraFuerte);
    text-align: center;
}
.eo-inicio h3{ font-size: 2.4rem; font-weight: 800; margin-bottom: 1rem; }
.eo-inicio__datos{ list-style: none; padding: 0; margin: 0 0 2.4rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem 2.4rem; font-size: 1.5rem; }
.eo-inicio__datos strong{ color: var(--colorSecundario); }
.eo-modos{ display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; margin-bottom: 1.6rem; }
.eo-modo{
    padding: 2rem 1.6rem;
    border: .2rem solid var(--colorClaro);
    border-radius: 1.4rem;
    background: var(--blanco);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color var(--transicion), transform var(--transicion), box-shadow var(--transicion);
}
.eo-modo:hover{ border-color: var(--colorPrimario); transform: translateY(-.3rem); box-shadow: var(--sombra); }
.eo-modo strong{ display: block; font-size: 1.8rem; color: var(--colorPrimario); margin-bottom: .4rem; }
.eo-modo span{ font-size: 1.4rem; color: var(--verdeSuave); }
.eo-modo--examen strong::before{ content: "⏱ "; }
.eo-modo--practica strong::before{ content: "✎ "; }
.eo-continuar{ font-size: 1.4rem; }
.eo-continuar button{ background: none; border: none; color: var(--colorSecundario); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }

/* ---------- Barra fija durante el examen ---------- */
.eo-barra{
    position: sticky;
    top: var(--alturaCabecera);
    z-index: 50;
    display: flex;
    align-items: center;
    gap: 1.6rem;
    flex-wrap: wrap;
    max-width: 96rem;
    margin: 0 auto 2.4rem;
    padding: 1.2rem 1.6rem;
    border-radius: 1.4rem;
    background-color: var(--colorPrimario);
    color: var(--colorClaro);
    box-shadow: var(--sombraFuerte);
}
.eo-barra__reloj{ font-size: 2.2rem; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 10rem; }
.eo-barra__reloj.urgente{ color: #FF8A8A; }
.eo-barra__progreso{ flex: 1; min-width: 14rem; font-size: 1.4rem; }
.eo-barra__pista{ height: .6rem; border-radius: 1rem; background: rgba(236,235,243,.25); margin-top: .5rem; overflow: hidden; }
.eo-barra__relleno{ height: 100%; width: 0; background: var(--colorSecundario); transition: width .3s; }
.eo-barra .boton{ padding: 1rem 2rem; font-size: 1.4rem; margin: 0; }
.eo-barra__modo{ font-size: 1.2rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1rem; opacity: .8; }

/* ---------- Mapa de preguntas ---------- */
.eo-mapa{
    max-width: 96rem;
    margin: 0 auto 3rem;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3.6rem, 1fr));
    gap: .5rem;
}
.eo-mapa a{
    display: grid;
    place-items: center;
    height: 3.6rem;
    border-radius: .8rem;
    border: .15rem solid var(--colorClaro);
    font-size: 1.3rem;
    font-weight: 700;
    background: var(--blanco);
}
.eo-mapa a.respondida{ background-color: var(--colorPrimario); border-color: var(--colorPrimario); color: var(--colorClaro); }
.eo-mapa a.ok{ background-color: #2E7D4F; border-color: #2E7D4F; color: #fff; }
.eo-mapa a.ko{ background-color: var(--colorSecundario); border-color: var(--colorSecundario); color: #fff; }

/* ---------- Preguntas ---------- */
.eo-lista{ max-width: 96rem; margin: 0 auto; text-align: left; list-style: none; padding: 0; }
.eo-pregunta{
    position: relative;
    padding: 2.4rem 2.4rem 2rem;
    margin-bottom: 1.4rem;
    border-radius: 1.6rem;
    background-color: var(--blanco);
    border: .2rem solid var(--colorClaro);
    scroll-margin-top: calc(var(--alturaCabecera) + 9rem);
}
.eo-pregunta__cab{ display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: .8rem; }
.eo-num{ font-size: 1.3rem; font-weight: 800; color: var(--colorSecundario); text-transform: uppercase; letter-spacing: .08rem; }
.eo-bloque{ font-size: 1.2rem; padding: .2rem 1rem; border-radius: 2rem; background: var(--colorClaro); }
.eo-enunciado{ font-weight: 700; font-size: 1.7rem; line-height: 1.5; margin-bottom: 1.4rem; }
.eo-opciones{ display: grid; gap: .7rem; }
.eo-opciones label{
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    padding: 1.1rem 1.4rem;
    border: .2rem solid var(--colorClaro);
    border-radius: 1.1rem;
    cursor: pointer;
    font-size: 1.55rem;
    line-height: 1.5;
    transition: border-color .2s, background-color .2s;
}
.eo-opciones label:hover{ border-color: var(--verdeSuave); }
.eo-opciones input{ margin-top: .35rem; width: 1.9rem; height: 1.9rem; flex-shrink: 0; accent-color: var(--colorPrimario); }
.eo-opciones label:has(input:checked){ border-color: var(--colorPrimario); background-color: rgba(37,70,79,.06); }
.eo-opciones .letra{ font-weight: 800; }
.eo-opciones label.es-correcta{ border-color: #2E7D4F !important; background-color: #E9F6EE !important; }
.eo-opciones label.es-error{ border-color: var(--colorSecundario) !important; background-color: #FFECEC !important; }
.eo-pregunta.acierto{ border-color: #2E7D4F; }
.eo-pregunta.fallo{ border-color: var(--colorSecundario); }
.eo-pregunta.bloqueada label{ cursor: default; }
.eo-limpiar{ margin-top: .8rem; background: none; border: none; padding: 0; font: inherit; font-size: 1.3rem; color: var(--verdeSuave); text-decoration: underline; cursor: pointer; }
.eo-pregunta.bloqueada .eo-limpiar{ display: none; }
.eo-oficial{ margin-top: 1rem; font-size: 1.4rem; font-weight: 700; color: #2E7D4F; }

.eo-reserva{ max-width: 96rem; margin: 4rem auto 2rem; padding: 1.6rem 2rem; border-radius: 1.2rem; background: #FFF3C4; text-align: left; font-size: 1.45rem; }

/* ---------- Supuestos ---------- */
.eo-supuesto{ max-width: 96rem; margin: 0 auto 4rem; text-align: left; }
.eo-supuesto__caso{
    padding: 2.4rem 2.8rem;
    margin-bottom: 1.6rem;
    border-radius: 1.6rem;
    background-color: var(--colorClaro);
    border-left: .6rem solid var(--colorPrimario);
}
.eo-supuesto__caso h3{ font-size: 2.2rem; font-weight: 800; margin-bottom: 1.2rem; }
.eo-supuesto__caso p{ font-size: 1.55rem; line-height: 1.7; margin-bottom: 1rem; }
.eo-contexto{ font-size: 1.5rem; line-height: 1.7; padding: 1.4rem 1.8rem; margin-bottom: 1.4rem; border-radius: 1.2rem; background: var(--colorClaro); }

/* ---------- Resultados ---------- */
.eo-resultado{
    max-width: 96rem;
    margin: 0 auto 4rem;
    padding: 3.6rem 3rem;
    border-radius: var(--radio);
    background-color: var(--colorPrimario);
    color: var(--colorClaro);
    text-align: center;
    box-shadow: var(--sombraFuerte);
}
.eo-resultado__etiqueta{ font-size: 1.3rem; font-weight: 700; text-transform: uppercase; letter-spacing: .2rem; opacity: .8; }
.eo-resultado__nota{ font-size: 7.2rem; font-weight: 800; line-height: 1; margin: .8rem 0; }
.eo-resultado__nota small{ font-size: 2rem; opacity: .7; }
.eo-resultado__datos{ list-style: none; padding: 0; margin: 0 0 2rem; display: flex; justify-content: center; flex-wrap: wrap; gap: 1rem 2.4rem; font-size: 1.6rem; }
.eo-resultado__datos strong{ font-size: 2.2rem; }
.eo-resultado__datos .ok strong{ color: #8FE0AE; }
.eo-resultado__datos .ko strong{ color: #FF8A8A; }
.eo-resultado__corte{ max-width: 64rem; margin: 0 auto 2.4rem; font-size: 1.55rem; line-height: 1.6; }
.eo-bloques{ max-width: 64rem; margin: 0 auto 2.8rem; text-align: left; display: grid; gap: 1.2rem; }
.eo-bloques__fila{ font-size: 1.4rem; }
.eo-bloques__fila div{ display: flex; justify-content: space-between; margin-bottom: .4rem; }
.eo-bloques__barra{ height: .8rem; border-radius: 1rem; background: rgba(236,235,243,.2); overflow: hidden; }
.eo-bloques__barra span{ display: block; height: 100%; background: #8FE0AE; }
.eo-resultado__acciones{ display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center; }
.eo-resultado__acciones .boton{ margin: 0; }
.eo-oculta{ display: none !important; }

@media (max-width: 600px){
    .eo-inicio{ padding: 2.4rem 1.6rem; }
    .eo-modos{ grid-template-columns: 1fr; }
    .eo-barra{ gap: 1rem; padding: 1rem 1.2rem; top: var(--alturaCabecera); }
    .eo-barra__reloj{ font-size: 1.8rem; min-width: 0; }
    .eo-barra__modo{ display: none; }
    .eo-barra__progreso{ order: 3; flex-basis: 100%; font-size: 1.25rem; }
    .eo-barra .boton{ margin-left: auto; padding: .8rem 1.4rem; font-size: 1.2rem; }
    .eo-pregunta{ padding: 1.8rem 1.4rem 1.6rem; }
    .eo-enunciado{ font-size: 1.6rem; }
    .eo-opciones label{ font-size: 1.45rem; padding: 1rem 1.1rem; gap: .9rem; }
    .eo-supuesto__caso{ padding: 1.8rem 1.6rem; }
    .eo-resultado{ padding: 2.8rem 1.6rem; }
    .eo-resultado__nota{ font-size: 5.6rem; }
}

/* Datos clave de la convocatoria en la cabecera */
.eo-claves{ list-style: none; padding: 0; margin: 2.4rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; }
.eo-claves li{ padding: 1rem 1.6rem; border-radius: 1rem; background-color: rgba(255, 255, 255, .08); border: .1rem solid rgba(236, 235, 243, .25); color: var(--colorClaro); }
.eo-claves span{ display: block; font-size: 1.15rem; text-transform: uppercase; letter-spacing: .08rem; opacity: .8; }
.eo-claves strong{ font-size: 2rem; font-weight: 800; color: var(--blanco); }
.eo-claves .eo-claves--corte{ background-color: var(--colorSecundario); border-color: var(--colorSecundario); }
.eo-claves .eo-claves--corte span{ opacity: .95; }
@media (max-width: 600px){ .eo-claves{ display: grid; grid-template-columns: 1fr 1fr; } .eo-claves strong{ font-size: 1.7rem; } }
.eo-claves__nota{ margin: 1.4rem auto 0; max-width: 64rem; font-size: 1.45rem; color: var(--colorClaro); opacity: .9; }
/* Tablas de datos dentro de una pregunta (p. ej., retribuciones) */
.eo-anexo{ border-collapse: collapse; margin: 0 0 1.6rem; font-size: 1.45rem; background-color: var(--colorClaro); border-radius: 1rem; overflow: hidden; }
.eo-anexo td{ padding: .6rem 1.2rem; border-bottom: .1rem solid rgba(37, 70, 79, .12); }
.eo-anexo td:nth-child(even){ font-weight: 800; text-align: right; padding-right: 2rem; }
@media (max-width: 600px){ .eo-anexo{ font-size: 1.25rem; } .eo-anexo td{ padding: .5rem .6rem; } }
.eo-nota-kenzo{ display: block; margin-top: .4rem; font-weight: 600; color: var(--colorSecundario); }