@charset "UTF-8";
/* ==========================================================================
   Global Test — estilos propios de plataforma.html (el prototipo)
   Requiere estilos.css cargado antes.
   ========================================================================== */

body{
  background:var(--gris);
  color:var(--texto);
  line-height:1.6;
}

.envoltura{max-width:1080px;margin:0 auto;padding:0 22px}

/* ---------- Barra superior ---------- */
.barra{background:var(--azul);padding:16px 0;position:sticky;top:0;z-index:50}
.barra-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.marca{gap:11px}
.marca img{height:30px}
.etiqueta-demo{
  background:rgba(255,123,2,.16);color:var(--naranja);
  padding:5px 13px;border-radius:9999px;font-size:.76rem;font-weight:600;
  letter-spacing:.04em;
}
.btn-salir{
  background:none;border:1px solid rgba(255,255,255,.25);color:rgba(255,255,255,.85);
  padding:8px 17px;border-radius:9999px;font-family:inherit;font-size:.85rem;
  cursor:pointer;transition:.2s;
}
.btn-salir:hover{border-color:var(--naranja);color:var(--naranja)}

/* ---------- Bloques ---------- */
.pantalla{display:none;padding:44px 0 70px}
.pantalla.activa{display:block}

.tarjeta{
  background:#fff;border:1px solid var(--borde);border-radius:24px;padding:34px;
}
.tarjeta + .tarjeta{margin-top:20px}

h1{font-size:clamp(1.6rem,3.6vw,2.3rem);font-weight:600;color:var(--azul);
   line-height:1.2;letter-spacing:-.02em;margin-bottom:12px}
h2{font-size:1.3rem;font-weight:600;color:var(--azul);margin-bottom:8px}
h3{font-size:1.05rem;font-weight:600;color:var(--azul);margin-bottom:6px}
.sub{color:#6B6F80;margin-bottom:28px;max-width:56ch}

/* ---------- Botones propios de la plataforma ----------
   La base .btn vive en estilos.css; aquí solo los ajustes de esta página. */
.btn{
  justify-content:center;
  padding:14px 28px;
  font-size:.98rem;
  font-family:inherit;
  transition:.2s;
}
.btn-oscuro{background:var(--azul);color:#fff}
.btn-oscuro:hover{background:var(--azul-2)}
.btn-borde{border-color:var(--borde);color:var(--azul);background:#fff}
.btn-borde:hover{border-color:var(--naranja);color:var(--naranja)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ---------- Selector de rol ---------- */
.roles{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
.rol{
  background:#fff;border:1px solid var(--borde);border-radius:24px;padding:36px 30px;
  cursor:pointer;transition:.2s;text-align:left;font-family:inherit;
}
.rol:hover{border-color:var(--naranja);transform:translateY(-3px)}
.rol-icono{
  width:52px;height:52px;border-radius:15px;background:var(--azul);
  display:flex;align-items:center;justify-content:center;margin-bottom:20px;
}
.rol-icono svg{width:26px;height:26px;stroke:var(--naranja);fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rol p{color:#6B6F80;font-size:.94rem}

/* ---------- Formularios ---------- */
.campo{margin-bottom:17px}
.campo label{display:block;font-size:.88rem;font-weight:500;color:var(--azul);margin-bottom:6px}
.campo input{
  width:100%;padding:13px 16px;border:1px solid var(--borde);border-radius:13px;
  font-family:inherit;font-size:.97rem;color:var(--texto);background:#fff;
}
.campo input:focus{outline:none;border-color:var(--naranja);box-shadow:0 0 0 3px rgba(255,123,2,.13)}
.pista{font-size:.82rem;color:#8A8FA3;margin-top:6px}
.error{color:var(--rojo);font-size:.88rem;margin-top:10px;display:none}
.error.visible{display:block}
.form-angosto{max-width:420px}

/* ---------- Meta semanal ---------- */
.meta{
  background:var(--azul);color:#fff;border-radius:24px;padding:32px 34px;
  position:relative;overflow:hidden;
}
.meta-arco{opacity:.5}
.meta-arco circle{stroke-width:11}
.meta-inner{position:relative;z-index:2}
.meta h2{color:#fff;margin-bottom:4px}
.meta .sub{color:rgba(255,255,255,.72);margin-bottom:24px}
.sesiones{display:flex;gap:11px;margin-bottom:26px;flex-wrap:wrap}
.punto{
  width:58px;height:58px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-weight:600;font-size:1.15rem;
  border:2px dashed rgba(255,255,255,.3);color:rgba(255,255,255,.45);
}
.punto.hecho{background:var(--naranja);border:2px solid var(--naranja);color:var(--azul)}
.meta-datos{display:flex;gap:38px;flex-wrap:wrap}
.dato .n{font-size:1.8rem;font-weight:700;color:var(--naranja);line-height:1}
.dato .t{font-size:.84rem;color:rgba(255,255,255,.7)}

/* ---------- Sesión de preguntas ---------- */
.progreso{height:7px;background:var(--borde);border-radius:9999px;overflow:hidden;margin-bottom:26px}
.progreso div{height:100%;background:var(--naranja);transition:width .3s;border-radius:9999px}
.cabecera-preg{display:flex;justify-content:space-between;align-items:center;
  flex-wrap:wrap;gap:12px;margin-bottom:20px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{
  background:var(--gris);color:var(--azul);padding:5px 13px;border-radius:9999px;
  font-size:.79rem;font-weight:500;
}
/* El nivel es un dato de la pregunta, no una acción ni el área: va en tinta.
   El naranja se reserva para lo que se puede pulsar. */
.chip-nivel{background:var(--tinta-050);color:var(--tinta-700)}
.enunciado{font-size:1.12rem;color:var(--azul);font-weight:500;
  line-height:1.55;margin-bottom:24px}

/* ---------- Contenido del banco dentro del enunciado ----------
   Un enunciado real no siempre es un parrafo: trae listas de definiciones,
   tablas de datos, formulas y a veces una imagen en la mitad. */
.enunciado p{margin:0 0 14px}
.enunciado p:last-child{margin-bottom:0}
.enunciado ul{margin:0 0 14px;padding-left:22px}
.enunciado li{margin-bottom:8px}
.enunciado b{font-weight:600}
.enunciado sub,.enunciado sup{font-size:.72em;font-weight:inherit}
.enunciado .formula{
  font-size:1.2rem;text-align:center;line-height:1.9;
  padding:16px;background:var(--gris);border-radius:12px;
}
.enunciado .formula-pie{font-size:.82rem;color:#6A7089;font-weight:400}

/* Las tablas del banco son tablas, nunca imagenes: asi se leen en un celular
   y salen nitidas al imprimir el simulacro. La envoltura .tabla la pone
   generar-banco-web.py y es la que permite rodar de lado en pantalla angosta. */
.enunciado .tabla{margin:0 0 16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.enunciado .tabla table{margin-bottom:0}
.enunciado table{
  width:100%;border-collapse:collapse;margin:0 0 16px;
  font-size:.92rem;font-weight:400;color:var(--texto);
}
.enunciado th,.enunciado td{
  border:1px solid var(--borde);padding:9px 12px;text-align:center;vertical-align:middle;
}
.enunciado th{background:var(--gris);color:var(--azul);font-weight:600}
.enunciado td:nth-child(2){text-align:left}
.enunciado figure{margin:0 0 16px;text-align:center}
.enunciado figure img{max-width:100%;height:auto;border-radius:10px}
/* Varias imagenes que hay que comparar entre si, una al lado de la otra */
.enunciado figure.fila{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.enunciado figure.fila img{flex:1 1 200px;max-width:260px}

/* Cuando las opciones son graficas y no texto */
.opcion img{max-width:100%;height:auto;border-radius:8px;display:block}
.opcion>span:last-child{min-width:0;flex:1}

/* ---------- Retroalimentacion por opcion ---------- */
.retro-op{
  margin:0 0 10px;padding:11px 14px;border-radius:10px;
  background:#fff;border-left:3px solid var(--borde);
}
/* El verde y el rojo son del semáforo del docente (cumplió / no cumplió).
   La corrección de una respuesta usa la escala de contenido: azul lo correcto,
   neutro lo que el estudiante marcó y estaba mal. Ver CLAUDE.md. */
.retro-op.ok{border-left-color:var(--tinta-700)}
.retro-op.mal{border-left-color:var(--neutro-borde)}
.retro-op b{color:var(--azul);font-weight:600}
.retro-claves{
  margin:14px 0 0;font-size:.9rem;color:#6A7089;
  padding-top:12px;border-top:1px solid var(--borde);
}
.retro-claves b{color:var(--azul);font-weight:600}

@media(max-width:560px){
  /* Una tabla de cuatro columnas no cabe en un celular. En vez de apretarla
     hasta que no se lea, se deja rodar de lado dentro de la tarjeta. */
  .enunciado table{font-size:.84rem;width:auto;min-width:100%}
  .enunciado th,.enunciado td{padding:7px 9px;white-space:nowrap}
  .enunciado td:nth-child(2){white-space:normal;min-width:180px}
  .enunciado figure.fila img{flex-basis:100%;max-width:100%}
}
.opciones{display:flex;flex-direction:column;gap:11px}
.opcion{
  display:flex;align-items:flex-start;gap:13px;padding:16px 19px;
  border:1px solid var(--borde);border-radius:16px;background:#fff;
  cursor:pointer;text-align:left;font-family:inherit;font-size:.99rem;
  color:var(--texto);transition:.15s;width:100%;line-height:1.5;
}
.opcion:hover:not(:disabled){border-color:var(--naranja);background:#FFFAF5}
.opcion:disabled{cursor:default}
.opcion .letra{
  flex-shrink:0;width:27px;height:27px;border-radius:50%;background:var(--gris);
  color:var(--azul);display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:.85rem;
}
/* El ✓ y el ✕ no son adorno: son lo que hace que la respuesta se entienda
   sin depender del color. El color solo no puede cargar el mensaje. */
.opcion.correcta,.opcion.incorrecta{position:relative}
.opcion.correcta::after,.opcion.incorrecta::after{
  flex-shrink:0;align-self:center;font-size:1.05rem;font-weight:700;line-height:1;
}
.opcion.correcta{border-color:var(--tinta-700);background:var(--tinta-050)}
.opcion.correcta .letra{background:var(--azul);color:#fff}
.opcion.correcta::after{content:'\2713';color:var(--tinta-700)}
.opcion.incorrecta{border-color:var(--neutro-borde);background:var(--gris)}
.opcion.incorrecta .letra{background:var(--neutro);color:#fff}
.opcion.incorrecta::after{content:'\2715';color:var(--neutro)}

.retro{
  margin-top:20px;padding:20px 22px;border-radius:16px;
  background:var(--gris);border-left:4px solid var(--naranja);display:none;
}
.retro.visible{display:block}
.retro strong{display:block;color:var(--azul);margin-bottom:5px;font-size:.97rem}
.retro p{font-size:.94rem}
.retro .btn{margin-top:16px}

/* ---------- Control de sesión ---------- */
.aviso-salida{
  background:#FEF1F1;border:1px solid #F5C2C4;border-radius:14px;
  padding:13px 17px;font-size:.89rem;color:#A82A2F;margin-bottom:18px;display:none;
}
.aviso-salida.visible{display:block}
.chip-alerta{background:#FEF1F1;color:#C7343A}
.chip-tiempo{background:#EEF1FB;color:#2C3E9E}

.senales{display:flex;flex-direction:column;gap:11px;margin-top:6px}
.senal{
  display:flex;align-items:flex-start;gap:12px;padding:14px 17px;
  border:1px solid var(--borde);border-radius:14px;background:#fff;font-size:.93rem;
}
.senal.ok{border-color:#BCEBD3;background:#F4FCF8}
.senal.mal{border-color:#F5C2C4;background:#FEF6F6}
.senal .ico{
  flex-shrink:0;width:22px;height:22px;border-radius:50%;display:flex;
  align-items:center;justify-content:center;font-size:.72rem;font-weight:700;color:#fff;
}
.senal.ok .ico{background:var(--verde)}
.senal.mal .ico{background:var(--rojo)}
.senal b{display:block;color:var(--azul);font-weight:600;margin-bottom:2px}
.senal span{color:#6B6F80}

.marca-alerta{
  display:inline-block;background:#FEF1F1;color:#C7343A;font-size:.78rem;
  font-weight:600;padding:3px 10px;border-radius:9999px;
}
.marca-ok{
  display:inline-block;background:#F0FAF5;color:#0A8A50;font-size:.78rem;
  font-weight:600;padding:3px 10px;border-radius:9999px;
}

/* ---------- Resultados ---------- */
.resumen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:16px;margin-bottom:28px}
.caja-dato{background:var(--gris);border-radius:18px;padding:22px;text-align:center}
.caja-dato .n{font-size:2.1rem;font-weight:700;color:var(--azul);line-height:1.1}
.caja-dato .n.naranja{color:var(--naranja)}
.caja-dato .t{font-size:.84rem;color:#6B6F80}

.barras{display:flex;flex-direction:column;gap:15px}
.barra-comp .fila{display:flex;justify-content:space-between;font-size:.9rem;margin-bottom:5px}
.barra-comp .fila b{color:var(--azul);font-weight:600}
.pista-barra{height:9px;background:var(--borde);border-radius:9999px;overflow:hidden}
.pista-barra div{height:100%;border-radius:9999px}

/* ---------- Tablero docente ---------- */
.tabla-envoltura{overflow-x:auto;margin:0 -34px;padding:0 34px}
table{width:100%;border-collapse:collapse;min-width:560px}
th{
  text-align:left;font-size:.79rem;text-transform:uppercase;letter-spacing:.07em;
  color:#8A8FA3;font-weight:600;padding:0 14px 13px;border-bottom:1px solid var(--borde);
}
td{padding:15px 14px;border-bottom:1px solid var(--borde);font-size:.95rem}
tr:last-child td{border-bottom:0}
.nombre-est{font-weight:500;color:var(--azul)}
.doc{font-size:.82rem;color:#8A8FA3}
.semaforo{display:inline-flex;align-items:center;gap:8px;font-weight:500;font-size:.9rem}
.luz{width:11px;height:11px;border-radius:50%;flex-shrink:0}
.luz.v{background:var(--verde)} .luz.a{background:var(--amarillo)} .luz.r{background:var(--rojo)}
.txt-v{color:#0A8A50} .txt-a{color:#B37400} .txt-r{color:#C7343A}

.filtros{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px}
.filtro{
  padding:8px 17px;border-radius:9999px;border:1px solid var(--borde);
  background:#fff;font-family:inherit;font-size:.87rem;color:var(--texto);cursor:pointer;
}
.filtro.activo{background:var(--azul);color:#fff;border-color:var(--azul)}

.aviso-proto{
  background:#FFF8EE;border:1px solid #FFD9A8;border-radius:16px;
  padding:17px 20px;font-size:.9rem;color:#8A5A00;margin-top:26px;
}
.aviso-proto b{color:#6B4500}

/* ---------- Configuración del docente ---------- */
.config-grupo{margin-bottom:22px}
.config-label{
  display:block;font-size:.88rem;font-weight:600;color:var(--azul);margin-bottom:11px;
}
.opciones-config{display:flex;gap:10px;flex-wrap:wrap}
.opcion-config{
  display:flex;flex-direction:column;align-items:center;gap:1px;min-width:94px;
  padding:11px 16px;border-radius:14px;border:1px solid var(--borde);background:#fff;
  font-family:inherit;cursor:pointer;transition:border-color .15s,background .15s;
}
.opcion-config b{font-size:1rem;font-weight:600;color:var(--azul)}
.opcion-config span{font-size:.78rem;color:#8A8FA3}
.opcion-config:hover{border-color:var(--naranja)}
.opcion-config.activo{background:var(--naranja);border-color:var(--naranja)}
.opcion-config.activo b,.opcion-config.activo span{color:#fff}

.config-previo{
  background:var(--gris);border-radius:14px;padding:14px 18px;
  font-size:.92rem;color:var(--texto);margin-top:4px;
}
.config-previo b{color:var(--azul);font-weight:600}
.config-previo i{color:#8A5A00;font-style:normal;font-weight:600}

.config-acciones{display:flex;gap:11px;flex-wrap:wrap;margin-top:20px}

.config-aviso{
  display:none;margin-top:16px;background:#F0FAF5;border:1px solid #BCEBD3;
  border-radius:14px;padding:13px 18px;font-size:.9rem;color:#0A8A50;
}
.config-aviso.visible{display:block}

/* ==========================================================================
   PERSONALIDAD DE ÁREA
   Los colores viven en estilos.css. Aquí solo se enchufan: poner
   data-area="cie" en un contenedor define --ac, --ac-sup y --ac-borde para
   todo lo que hay dentro, y los estilos de abajo se pintan solos.

   El color de área es un RÓTULO: viste el contexto (ícono, chip, banda,
   barra de progreso de la sesión). No viste acciones — los botones siguen
   naranja —, ni datos — las series siguen en la escala de tinta —, ni
   estados — el semáforo sigue siendo del tablero docente.
   ========================================================================== */
[data-area]{--ac:var(--azul);--ac-sup:var(--gris);--ac-borde:var(--borde)}
[data-area="lec"]{--ac:var(--area-lec);--ac-sup:var(--area-lec-sup);--ac-borde:var(--area-lec-borde)}
[data-area="mat"]{--ac:var(--area-mat);--ac-sup:var(--area-mat-sup);--ac-borde:var(--area-mat-borde)}
[data-area="soc"]{--ac:var(--area-soc);--ac-sup:var(--area-soc-sup);--ac-borde:var(--area-soc-borde)}
[data-area="cie"]{--ac:var(--area-cie);--ac-sup:var(--area-cie-sup);--ac-borde:var(--area-cie-borde)}
[data-area="ing"]{--ac:var(--area-ing);--ac-sup:var(--area-ing-sup);--ac-borde:var(--area-ing-borde)}

/* El ícono del área, en sus tres tamaños */
.ico-area{
  border-radius:12px;background:var(--ac-sup);border:1px solid var(--ac-borde);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  width:38px;height:38px;
}
.ico-area svg{
  width:21px;height:21px;stroke:var(--ac);fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;
}
.ico-area.chico{width:30px;height:30px;border-radius:9px}
.ico-area.chico svg{width:17px;height:17px}
.ico-area.grande{width:52px;height:52px;border-radius:16px}
.ico-area.grande svg{width:28px;height:28px}

/* ==========================================================================
   PANEL DEL ESTUDIANTE
   ========================================================================== */
.bloque{margin-top:26px}
.bloque-cab{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin-bottom:14px;
}
.bloque-cab .zona{
  font-size:.74rem;font-weight:600;letter-spacing:.08em;color:var(--tinta-400);
  text-transform:uppercase;
}
.bloque-cab .apunte{font-size:.82rem;color:#8A8FA3}

/* ---------- Zona 1 · dónde estás ---------- */
.puntaje{
  background:var(--azul);color:#fff;border-radius:24px;padding:32px 34px;
  position:relative;overflow:hidden;
}
.puntaje .meta-arco{opacity:.5}
.puntaje-inner{position:relative;z-index:2;display:flex;gap:44px;flex-wrap:wrap}
.puntaje-cifra{min-width:230px}
.puntaje-cifra .et{font-size:.86rem;color:rgba(255,255,255,.72);margin-bottom:2px}
.puntaje-cifra .n{font-size:3.9rem;font-weight:700;color:var(--naranja);line-height:1}
.puntaje-cifra .n small{font-size:1.4rem;font-weight:500;color:rgba(255,255,255,.5)}
.puntaje-cifra .pie{font-size:.8rem;color:rgba(255,255,255,.6);margin-top:10px;max-width:32ch}
.puntaje-areas{flex:1 1 360px;min-width:270px}
.puntaje-nota{
  flex:1 1 360px;min-width:270px;display:flex;align-items:center;
  color:rgba(255,255,255,.72);font-size:.92rem;line-height:1.6;
}
.pa-fila{display:flex;align-items:center;gap:12px;margin-bottom:9px;font-size:.87rem}
.pa-fila .nom{width:140px;flex-shrink:0;color:rgba(255,255,255,.85)}
.pa-fila .peso{
  width:32px;flex-shrink:0;text-align:center;font-size:.7rem;font-weight:600;
  color:rgba(255,255,255,.55);border:1px solid rgba(255,255,255,.2);border-radius:9999px;
}
.pa-fila .riel{flex:1;height:9px;background:rgba(255,255,255,.16);border-radius:9999px}
.pa-fila .riel i{display:block;height:9px;background:#fff;border-radius:9999px}
.pa-fila .val{width:32px;flex-shrink:0;text-align:right;font-weight:600;color:#fff}

/* ---------- Zona 2 · qué sigue ---------- */
.continuar{
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  background:#fff;border:1px solid var(--borde);border-radius:24px;padding:26px 30px;
  border-left:5px solid var(--ac,var(--naranja));
}
.continuar-txt{flex:1 1 320px;min-width:250px;display:flex;gap:16px;align-items:flex-start}
.continuar-txt .rotulo{
  font-size:.74rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ac,var(--naranja));margin-bottom:4px;
}
.continuar-txt h3{margin-bottom:3px;font-size:1.22rem}
.continuar-txt p{color:#6B6F80;font-size:.92rem}
.continuar-txt .apunte{display:block;font-size:.83rem;color:#8A8FA3;margin-top:9px;max-width:44ch}

/* ---------- Zona 3 · las cinco pruebas ---------- */
.areas{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:16px}
.area{
  background:#fff;border:1px solid var(--borde);border-radius:20px;padding:20px;
  text-align:left;font-family:inherit;cursor:pointer;transition:.2s;
  display:flex;flex-direction:column;gap:12px;
}
.area:hover{border-color:var(--ac);transform:translateY(-3px)}
.area.bloqueada{cursor:default;opacity:.7;background:#FBFBFD}
.area.bloqueada:hover{border-color:var(--borde);transform:none}
/* Un <button> no puede llevar <div> dentro, así que la tarjeta de área se
   arma con <span>: aquí se les devuelve el comportamiento de bloque. */
.area > span{display:block}
.area-nom{font-weight:600;color:var(--azul);font-size:.98rem;line-height:1.3}
.area-meta{font-size:.78rem;color:#8A8FA3}
.area-pie{font-size:.79rem;font-weight:600;color:var(--ac);margin-top:auto}
.area-pie.gris{color:#8A8FA3;font-weight:500}

.medidor{display:block}
.medidor + .medidor{margin-top:9px}
.medidor .et{
  display:flex;justify-content:space-between;font-size:.74rem;
  color:#6B6F80;margin-bottom:4px;
}
.medidor .et b{color:var(--tinta-900);font-weight:600}
.medidor .riel{display:block;height:7px;background:var(--gris);border-radius:9999px}
.medidor .riel i{display:block;height:7px;border-radius:9999px}
.medidor.cobertura .riel i{background:var(--tinta-400)}
.medidor.dominio .riel i{background:var(--tinta-700)}

/* ---------- Zona 4 · el mapa del examen ---------- */
.mapa-grupo{margin-bottom:18px}
.mapa-grupo:last-child{margin-bottom:0}
.mapa-grupo-cab{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.mapa-grupo-cab h3{margin:0;font-size:.95rem}
.mapa-grupo-cab span{font-size:.76rem;color:#8A8FA3}
.mapa-fila{display:grid;gap:7px;align-items:stretch}
.casilla{
  min-width:0;border-radius:14px;padding:12px 13px;border:1px solid var(--borde);
  background:#fff;font-size:.78rem;line-height:1.35;
  display:flex;flex-direction:column;gap:6px;
}
.casilla .cn{font-weight:500;hyphens:auto;-webkit-hyphens:auto}
.casilla .cp{font-size:.7rem;font-weight:600;opacity:.75}
.casilla .cx{font-size:.7rem;font-weight:600;margin-top:auto}
/* Tres pasos de claridad. Cada casilla lleva etiqueta visible: en una escala
   de un solo tono el color nunca puede cargar el mensaje solo. */
.casilla.c-sin{border-style:dashed;border-color:var(--neutro-borde);color:var(--neutro);background:#FCFCFD}
.casilla.c-curso{background:var(--ac-sup);border-color:var(--ac-borde);color:var(--ac)}
.casilla.c-dominada{background:var(--ac);border-color:var(--ac);color:#fff}
.casilla.c-dominada .cp{opacity:.85}

.leyenda{
  display:flex;gap:18px;flex-wrap:wrap;margin-top:18px;padding-top:15px;
  border-top:1px solid var(--borde);font-size:.79rem;color:#6B6F80;
}
.leyenda i{
  width:15px;height:15px;border-radius:5px;display:inline-block;
  vertical-align:-3px;margin-right:7px;border:1px solid var(--borde);
}
.leyenda .l-sin{background:#FCFCFD;border-style:dashed;border-color:var(--neutro-borde)}
.leyenda .l-cur{background:var(--tinta-050);border-color:var(--tinta-400)}
.leyenda .l-dom{background:var(--tinta-700);border-color:var(--tinta-700)}

/* ---------- Zona 5 · misión y logros ---------- */
.zona5{display:grid;grid-template-columns:1.1fr 1fr;gap:18px;align-items:start}
.insignias{display:flex;flex-direction:column;gap:11px}
.insignia{
  display:flex;align-items:center;gap:13px;padding:13px 15px;border-radius:15px;
  border:1px solid var(--borde);background:#fff;font-size:.85rem;
}
.insignia .ic{
  width:36px;height:36px;border-radius:11px;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;background:var(--tinta-050);
}
.insignia .ic svg{
  width:18px;height:18px;stroke:var(--tinta-700);fill:none;
  stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;
}
.insignia b{display:block;color:var(--azul);font-weight:600;font-size:.88rem}
.insignia span{color:#8A8FA3;font-size:.79rem}
.insignia.pendiente{background:#FCFCFD;border-style:dashed;border-color:var(--neutro-borde)}
.insignia.pendiente .ic{background:#fff}
.insignia.pendiente .ic svg{stroke:var(--neutro-borde)}
.insignia.pendiente b{color:var(--neutro)}

/* ==========================================================================
   DETALLE DE UN ÁREA
   ========================================================================== */
.volver{
  background:none;border:none;font-family:inherit;color:var(--tinta-400);
  font-size:.88rem;cursor:pointer;padding:0;margin-bottom:16px;
  display:inline-flex;align-items:center;gap:7px;
}
.volver:hover{color:var(--naranja)}
.volver svg{
  width:15px;height:15px;stroke:currentColor;fill:none;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;
}
.cab-detalle{display:flex;align-items:center;gap:16px;margin-bottom:6px}
.cab-detalle h1{margin-bottom:0;color:var(--ac)}

.comp-lista{display:flex;flex-direction:column;gap:12px}
.comp{border:1px solid var(--borde);border-radius:16px;padding:16px 18px;background:#fff}
.comp-cab{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:12px;flex-wrap:wrap;margin-bottom:9px;
}
.comp-cab .nom{font-weight:500;color:var(--azul);font-size:.95rem}
.comp-cab .peso{font-size:.76rem;color:#8A8FA3;white-space:nowrap}
.comp-riel{height:10px;background:var(--gris);border-radius:9999px;margin-bottom:9px}
.comp-riel i{display:block;height:10px;background:var(--tinta-700);border-radius:9999px}
.comp-pie{display:flex;gap:14px;flex-wrap:wrap;font-size:.79rem;color:#6B6F80;align-items:center}
.nivel-chip{
  font-size:.72rem;font-weight:600;padding:3px 10px;border-radius:9999px;
  background:var(--tinta-050);color:var(--tinta-700);
}
.nivel-chip.sin{background:#FCFCFD;color:var(--neutro);border:1px dashed var(--neutro-borde)}

.hist{display:flex;flex-direction:column;gap:10px}
.hist-fila{
  display:flex;align-items:center;gap:14px;padding:13px 17px;border-radius:15px;
  border:1px solid var(--borde);background:#fff;flex-wrap:wrap;
}
.hist-fila .ic{
  width:29px;height:29px;border-radius:9px;flex-shrink:0;display:flex;
  align-items:center;justify-content:center;font-size:.78rem;font-weight:700;
}
.hist-fila.valida .ic{background:var(--tinta-700);color:#fff}
.hist-fila.novalida .ic{background:var(--gris);color:var(--neutro)}
.hist-fila.nueva .ic{background:var(--ac-sup);color:var(--ac)}
.hist-fila .txt{flex:1 1 200px;min-width:170px}
.hist-fila .txt b{display:block;color:var(--azul);font-weight:600;font-size:.9rem}
.hist-fila .txt span{font-size:.79rem;color:#8A8FA3}
.hist-fila .btn{padding:9px 20px;font-size:.85rem;margin-left:auto}

/* ==========================================================================
   LA SESIÓN, VESTIDA DEL ÁREA
   ========================================================================== */
.cab-sesion{
  display:flex;align-items:center;gap:13px;background:var(--ac-sup);
  border:1px solid var(--ac-borde);border-radius:16px;padding:12px 16px;margin-bottom:18px;
}
.cab-sesion .ico-area{background:#fff}
.cab-sesion b{display:block;color:var(--ac);font-weight:600;font-size:.94rem}
.cab-sesion span{font-size:.82rem;color:#6B6F80}
/* La barra de progreso dice en qué prueba estás, así que va del color del área.
   El naranja se reserva para lo que se puede pulsar. */
.pantalla[data-area] .progreso div{background:var(--ac)}
.chip-area{background:var(--ac-sup);color:var(--ac)}
.retro{border-left-color:var(--ac,var(--naranja))}

/* ---------- RESPONSIVE ---------- */
@media(max-width:860px){
  .zona5{grid-template-columns:1fr}
}
@media(max-width:760px){
  .mapa-fila{grid-template-columns:1fr!important}
}
@media(max-width:720px){
  .roles{grid-template-columns:1fr}
  .tarjeta{padding:26px 22px}
  .tabla-envoltura{margin:0 -22px;padding:0 22px}
  .meta{padding:26px 24px}
  .btn{width:100%}
  .cabecera-preg .btn{width:auto}
  .puntaje,.continuar{padding:24px 22px}
  .puntaje-cifra .n{font-size:3.1rem}
  .pa-fila{flex-wrap:wrap}
  .pa-fila .nom{width:auto;flex:1 1 100%}
  .hist-fila .btn{margin-left:0;width:100%}
}