/* ===========================================================================
   SISTEMA VISUAL — "Lamina de cabina"
   El mundo del arcade tal como sale de fabrica: acrilico blanco, serigrafia
   de tinta negra, cuatro tintas planas de calcomania, tramas de semitono y
   botones con extrusion real. Nada de penumbra de salon oscuro.
   =========================================================================== */

/* --- Tipografias autoalojadas (OFL) ------------------------------------- */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(../fonts/archivo-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(../fonts/archivo-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Bungee';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/bungee-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Bungee';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/bungee-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* --- Fichas -------------------------------------------------------------- */
:root{
  --paper:#FFFFFF;
  --panel:#F5F2EA;
  --panel-2:#EDE9DE;
  --ink:#10101C;
  --ink-2:#44445F;
  --ink-3:#7A7A93;
  --linea:#10101C;

  --coin:#FF2E4D;     --coin-borde:#B3001C;   /* rojo de boton    */
  --laser:#1B5CFF;    --laser-borde:#0032B0;  /* azul de gabinete */
  --power:#FFC814;    --power-borde:#C08A00;  /* amarillo marquesina */
  --life:#00B865;     --life-borde:#007240;   --life-ink:#0A6E42;
  --boss:#7B2FF7;     --boss-borde:#4A0FA8;   /* violeta del panel docente */

  --r-chico:6px; --r:12px; --r-grande:20px;
  --keyline:3px;

  --sombra-1:0 2px 6px -2px rgba(16,16,28,.16), 0 8px 24px -12px rgba(16,16,28,.20);
  --sombra-2:0 4px 10px -3px rgba(16,16,28,.18), 0 18px 42px -18px rgba(16,16,28,.28);
  --sombra-alta:0 10px 22px -8px rgba(16,16,28,.26), 0 34px 70px -28px rgba(16,16,28,.34);

  /* Curva de salida exponencial: todo llega rapido y se posa. */
  --sale:cubic-bezier(.16,1,.3,1);
  --entra:cubic-bezier(.65,0,.35,1);
}

/* --- Reinicio ------------------------------------------------------------ */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:clamp(16px,.95rem + .25vw,18px); line-height:1.55;
  font-variant-numeric:tabular-nums; -webkit-font-smoothing:antialiased;
  min-height:100dvh;
}
img,svg{display:block;max-width:100%;}
/* Tamano base de todo icono. Las reglas de cada pieza lo ajustan despues.
   inline-block para que un icono dentro de un parrafo no parta la linea. */
.ico{width:1.15em;height:1.15em;flex:none;display:inline-block;vertical-align:-.19em;}
button,input,textarea,select{font:inherit;color:inherit;}
h1,h2,h3,h4,p,figure{margin:0;}
ul,ol{margin:0;padding:0;list-style:none;}
a{color:var(--laser);text-underline-offset:.22em;text-decoration-thickness:2px;}
a:hover{color:var(--coin);}

/* --- Superficies del navegador ------------------------------------------ */
::selection{background:var(--power);color:var(--ink);}
:focus-visible{outline:3px solid var(--laser);outline-offset:3px;border-radius:4px;}
*{scrollbar-width:thin;scrollbar-color:var(--ink-3) var(--panel);}
::-webkit-scrollbar{width:12px;height:12px;}
::-webkit-scrollbar-track{background:var(--panel);}
::-webkit-scrollbar-thumb{background:var(--ink-3);border:3px solid var(--panel);border-radius:99px;}
::-webkit-scrollbar-thumb:hover{background:var(--ink-2);}
input,textarea{caret-color:var(--coin);}

/* --- Materiales ---------------------------------------------------------- */
/* Trama de semitono: el grano de la serigrafia. */
.trama{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  background-image:radial-gradient(circle at center, rgba(16,16,28,.14) 1.1px, transparent 1.2px);
  background-size:14px 14px;
  -webkit-mask-image:radial-gradient(ellipse 110% 85% at 50% 0%, #000 12%, transparent 72%);
          mask-image:radial-gradient(ellipse 110% 85% at 50% 0%, #000 12%, transparent 72%);
  opacity:.55;
}
/* Bandas de chevron: el vinilo lateral de la cabina. */
.chevrones{
  position:fixed;z-index:0;pointer-events:none;width:min(30vw,340px);aspect-ratio:1;
  background:repeating-linear-gradient(135deg,
    var(--tinta,var(--laser)) 0 14px, transparent 14px 34px);
  opacity:.10;
}
.chevrones--izq{left:-90px;top:14vh;transform:rotate(-8deg);--tinta:var(--laser);}
.chevrones--der{right:-90px;bottom:8vh;transform:rotate(6deg);--tinta:var(--coin);}

/* --- Tipografia ---------------------------------------------------------- */
.marquesina{
  font-family:'Bungee',sans-serif;font-weight:400;line-height:.94;
  letter-spacing:-.015em;text-transform:uppercase;text-wrap:balance;
}
.rotulo{
  font-family:'Bungee',sans-serif;font-size:.68rem;letter-spacing:.06em;
  text-transform:uppercase;line-height:1;
}
.cifra{font-variant-numeric:tabular-nums;letter-spacing:.01em;}

/* ===========================================================================
   Botones — extrusion real de plastico de cabina.
   El borde inferior es el canto del boton; la sombra suave es su oclusion.
   Al presionar, el boton baja y el canto desaparece.
   =========================================================================== */
.btn{
  --relleno:var(--panel); --canto:var(--ink-3); --texto:var(--ink);
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  padding:.82em 1.5em;border:var(--keyline) solid var(--linea);border-radius:var(--r);
  background:var(--relleno);color:var(--texto);
  font-family:'Bungee',sans-serif;font-size:.86rem;letter-spacing:.02em;text-transform:uppercase;
  cursor:pointer;user-select:none;text-decoration:none;
  box-shadow:0 5px 0 var(--canto), 0 9px 16px -7px rgba(16,16,28,.4);
  transition:transform .13s var(--sale), box-shadow .13s var(--sale), filter .16s var(--sale);
}
.btn:hover:not(:disabled){transform:translateY(-1px);filter:saturate(1.08) brightness(1.03);
  box-shadow:0 6px 0 var(--canto), 0 13px 22px -8px rgba(16,16,28,.44);}
.btn:active:not(:disabled){transform:translateY(5px);box-shadow:0 0 0 var(--canto), 0 3px 7px -3px rgba(16,16,28,.4);}
.btn:disabled{opacity:.42;cursor:not-allowed;box-shadow:0 5px 0 var(--canto);}
.btn--coin {--relleno:var(--coin); --canto:var(--coin-borde);}
.btn--laser{--relleno:var(--laser);--canto:var(--laser-borde);--texto:#fff;}
.btn--power{--relleno:var(--power);--canto:var(--power-borde);}
.btn--life {--relleno:var(--life); --canto:var(--life-borde);}
.btn--boss {--relleno:var(--boss); --canto:var(--boss-borde);--texto:#fff;}
.btn--fantasma{--relleno:var(--paper);--canto:var(--ink-3);}
.btn--grande{padding:1.05em 2em;font-size:1rem;}
.btn--chico{padding:.55em .95em;font-size:.72rem;border-width:2px;box-shadow:0 3px 0 var(--canto);}
.btn--chico:active:not(:disabled){transform:translateY(3px);}
.btn .ico{width:1.15em;height:1.15em;flex:none;}

/* --- Placas y chips ------------------------------------------------------ */
.placa{
  background:var(--paper);border:var(--keyline) solid var(--linea);border-radius:var(--r-grande);
  box-shadow:var(--sombra-2);
}
.chip{
  display:inline-flex;align-items:center;gap:.4em;padding:.36em .8em;
  border:2px solid var(--linea);border-radius:99px;background:var(--panel);
  font-family:'Bungee',sans-serif;font-size:.64rem;letter-spacing:.05em;text-transform:uppercase;
  white-space:nowrap;
}
.chip--coin{background:var(--coin);}   .chip--power{background:var(--power);}
.chip--life{background:var(--life);}   .chip--laser{background:var(--laser);color:#fff;}
.chip--boss{background:var(--boss);color:#fff;}

/* Esquinas cortadas: el bisel del gabinete. */
.bisel{
  clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px);
}

/* ===========================================================================
   Pantalla del examen
   =========================================================================== */
.escena{position:relative;z-index:1;min-height:100dvh;display:flex;flex-direction:column;}

/* --- Marquesina superior: el cabezal iluminado de la cabina -------------- */
.cabezal{
  position:sticky;top:0;z-index:30;
  background:var(--paper);border-bottom:var(--keyline) solid var(--linea);
  box-shadow:0 3px 0 rgba(16,16,28,.07), 0 10px 26px -18px rgba(16,16,28,.5);
}
.cabezal__fila{
  max-width:1180px;margin:0 auto;padding:.7rem clamp(1rem,3vw,2rem);
  display:flex;align-items:center;gap:clamp(.7rem,2vw,1.4rem);
}
.jugador{display:flex;align-items:center;gap:.6rem;min-width:0;}
.jugador__ficha{
  width:38px;height:38px;flex:none;border:var(--keyline) solid var(--linea);border-radius:50%;
  background:var(--power);display:grid;place-items:center;
  box-shadow:inset 0 -4px 0 rgba(16,16,28,.18);
}
.jugador__ficha .ico{width:20px;height:20px;}
.jugador__datos{min-width:0;display:block;}
/* display:block, si no el max-width no aplica y el nombre pasa por debajo
   de los contadores en lugar de cortarse. */
.jugador__rol{
  display:block;font-family:'Bungee',sans-serif;font-size:.56rem;
  letter-spacing:.1em;color:var(--ink-2);
}
.jugador__nombre{
  display:block;font-weight:800;font-size:.95rem;line-height:1.15;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:min(40vw,280px);
}
.marcadores{margin-left:auto;display:flex;align-items:center;gap:.55rem;}
/* Contador de siete segmentos, en placa oscura como el display real. */
.contador{
  display:flex;flex-direction:column;align-items:center;gap:.1rem;
  padding:.36rem .7rem;border:var(--keyline) solid var(--linea);border-radius:var(--r-chico);
  background:var(--ink);color:var(--power);min-width:76px;
}
.contador__valor{font-family:'Bungee',sans-serif;font-size:1.02rem;line-height:1;font-variant-numeric:tabular-nums;}
.contador__rotulo{font-family:'Bungee',sans-serif;font-size:.5rem;letter-spacing:.09em;color:#fff;opacity:.72;}
.contador--vida{color:var(--life);}

/* --- El riel: avance tarjeta por tarjeta -------------------------------- */
.riel{
  max-width:1180px;margin:0 auto;padding:0 clamp(1rem,3vw,2rem) .7rem;
  display:flex;align-items:center;gap:3px;
}
.riel__muesca{
  flex:1 1 0;height:9px;min-width:3px;border-radius:99px;background:var(--panel-2);
  border:1.5px solid rgba(16,16,28,.22);
  transition:background .3s var(--sale), transform .3s var(--sale), border-color .3s var(--sale);
}
.riel__muesca.contestada{background:var(--life);border-color:var(--life-borde);}
.riel__muesca.actual{
  background:var(--coin);border-color:var(--coin-borde);transform:scaleY(2.1);
  box-shadow:0 0 0 2px var(--paper), 0 2px 6px rgba(255,46,77,.5);
}

/* --- Zona de juego ------------------------------------------------------- */
.tablero{
  flex:1;display:flex;align-items:flex-start;justify-content:center;
  padding:clamp(1.2rem,3.5vw,2.6rem) clamp(1rem,3vw,2rem) 7.5rem;
  perspective:1400px;
}
.pista{width:100%;max-width:820px;position:relative;}

/* --- La tarjeta: cartucho de la maquina --------------------------------- */
.tarjeta{
  background:var(--paper);border:var(--keyline) solid var(--linea);border-radius:var(--r-grande);
  box-shadow:var(--sombra-alta);
  padding:clamp(1.3rem,3.4vw,2.3rem);
  transform-origin:50% 60%;
}
/* Banda de color por seccion, en el borde superior del cartucho. */
.tarjeta::before{
  content:'';display:block;height:10px;margin:calc(-1 * clamp(1.3rem,3.4vw,2.3rem)) calc(-1 * clamp(1.3rem,3.4vw,2.3rem)) clamp(1.1rem,2.6vw,1.6rem);
  border-radius:14px 14px 0 0;border-bottom:var(--keyline) solid var(--linea);
  background:repeating-linear-gradient(90deg,var(--tinta,var(--laser)) 0 26px, color-mix(in srgb,var(--tinta,var(--laser)) 68%, #000) 26px 32px);
}
.tarjeta[data-tipo="vf"]   {--tinta:var(--life);}
.tarjeta[data-tipo="mc"]   {--tinta:var(--laser);}
.tarjeta[data-tipo="assoc"]{--tinta:var(--power);}
.tarjeta[data-tipo="short"]{--tinta:var(--coin);}

.tarjeta__cabeza{display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;margin-bottom:1.1rem;}
.tarjeta__num{
  font-family:'Bungee',sans-serif;font-size:.78rem;color:var(--ink-2);margin-left:auto;
}
.tarjeta__pregunta{
  font-size:clamp(1.22rem,1.02rem + .95vw,1.72rem);font-weight:700;line-height:1.3;
  letter-spacing:-.018em;text-wrap:pretty;max-width:34ch;
}
.tarjeta__ayuda{margin-top:.55rem;color:var(--ink-2);font-size:.88rem;max-width:62ch;}
.tarjeta__ayuda .ico{width:1.05em;height:1.05em;color:var(--laser);margin-right:.15em;}

/* Animacion de cambio de cartucho: el unico momento coreografiado. */
@keyframes entra-der{
  from{opacity:0;transform:translate3d(72px,10px,-90px) rotateY(-9deg) scale(.95);filter:blur(5px);}
  to  {opacity:1;transform:none;filter:blur(0);}
}
@keyframes entra-izq{
  from{opacity:0;transform:translate3d(-72px,10px,-90px) rotateY(9deg) scale(.95);filter:blur(5px);}
  to  {opacity:1;transform:none;filter:blur(0);}
}
@keyframes sale-izq{
  from{opacity:1;transform:none;filter:blur(0);}
  to  {opacity:0;transform:translate3d(-58px,-6px,-70px) rotateY(7deg) scale(.96);filter:blur(4px);}
}
@keyframes sale-der{
  from{opacity:1;transform:none;filter:blur(0);}
  to  {opacity:0;transform:translate3d(58px,-6px,-70px) rotateY(-7deg) scale(.96);filter:blur(4px);}
}
.tarjeta.va-adelante{animation:entra-der .44s var(--sale) both;}
.tarjeta.va-atras   {animation:entra-izq .44s var(--sale) both;}
.tarjeta.fuera-adelante{animation:sale-izq .2s var(--entra) both;}
.tarjeta.fuera-atras   {animation:sale-der .2s var(--entra) both;}

/* --- Opciones: placas de boton ------------------------------------------ */
.opciones{display:grid;gap:.7rem;margin-top:1.3rem;}
.opciones--par{grid-template-columns:repeat(2,1fr);}
@media (max-width:560px){.opciones--par{grid-template-columns:1fr;}}

.opcion{
  --relleno:var(--paper);--canto:var(--ink-3);
  position:relative;display:flex;align-items:center;gap:.85rem;width:100%;text-align:left;
  padding:1rem 1.1rem;border:var(--keyline) solid var(--linea);border-radius:var(--r);
  background:var(--relleno);cursor:pointer;
  box-shadow:0 4px 0 var(--canto), 0 8px 16px -8px rgba(16,16,28,.32);
  transition:transform .15s var(--sale), box-shadow .15s var(--sale), background .15s var(--sale);
}
.opcion:hover{transform:translateY(-2px);box-shadow:0 6px 0 var(--canto), 0 14px 24px -10px rgba(16,16,28,.36);}
.opcion:active{transform:translateY(4px);box-shadow:0 0 0 var(--canto);}
.opcion__letra{
  flex:none;width:34px;height:34px;border:2px solid var(--linea);border-radius:8px;
  display:grid;place-items:center;background:var(--panel);
  font-family:'Bungee',sans-serif;font-size:.84rem;
}
.opcion__texto{flex:1;font-weight:500;line-height:1.4;}
.opcion .ico{width:26px;height:26px;flex:none;}

.opcion[aria-pressed="true"]{--relleno:var(--tinta-op,var(--power));--canto:var(--canto-op,var(--power-borde));}
.opcion[aria-pressed="true"] .opcion__letra{background:var(--paper);}
.opcion[aria-pressed="true"] .opcion__texto{font-weight:700;}
.opcion--si{--tinta-op:var(--life); --canto-op:var(--life-borde);}
.opcion--no{--tinta-op:var(--coin); --canto-op:var(--coin-borde);}
.opcion--vf{justify-content:center;flex-direction:column;gap:.5rem;padding:1.6rem 1rem;text-align:center;}
.opcion--vf .opcion__texto{flex:0;font-family:'Bungee',sans-serif;font-size:1.05rem;}
.opcion--vf .ico{width:40px;height:40px;}

/* Pulso corto al fijar una respuesta. */
@keyframes fija{0%{transform:scale(1);}38%{transform:scale(1.035);}100%{transform:scale(1);}}
.opcion.se-fija{animation:fija .32s var(--sale);}

/* ===========================================================================
   Asociativas: sockets y fichas arrastrables
   =========================================================================== */
.enlace{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem;margin-top:1.2rem;}
@media (max-width:760px){.enlace{grid-template-columns:1fr;}}
.enlace__titulo{
  font-family:'Bungee',sans-serif;font-size:.6rem;letter-spacing:.08em;color:var(--ink-2);
  margin-bottom:.55rem;
}
.enlace__lista{display:flex;flex-direction:column;gap:.6rem;}

.socket{
  display:flex;align-items:stretch;gap:0;border:var(--keyline) solid var(--linea);
  border-radius:var(--r);background:var(--paper);overflow:hidden;text-align:left;
  box-shadow:0 3px 0 var(--ink-3);
  transition:box-shadow .18s var(--sale), transform .18s var(--sale);
}
.socket__termino{
  flex:1;padding:.8rem .9rem;font-weight:700;font-size:.95rem;line-height:1.3;
  display:flex;align-items:center;
}
.socket__ranura{
  flex:none;width:76px;border-left:var(--keyline) dashed var(--ink-3);
  background:repeating-linear-gradient(45deg,var(--panel) 0 7px,var(--panel-2) 7px 14px);
  display:grid;place-items:center;
  font-family:'Bungee',sans-serif;font-size:1.15rem;color:var(--ink-3);
}
.socket.llena .socket__ranura{
  background:var(--power);color:var(--ink);border-left-style:solid;border-left-color:var(--linea);
}
.socket.objetivo{transform:translateY(-2px);box-shadow:0 0 0 4px var(--laser), 0 6px 0 var(--ink-3);}
.socket.recibe{animation:fija .34s var(--sale);}

.fichas{display:flex;flex-direction:column;gap:.6rem;}
.ficha{
  display:flex;align-items:center;gap:.7rem;padding:.7rem .8rem;text-align:left;width:100%;
  border:var(--keyline) solid var(--linea);border-radius:var(--r);background:var(--paper);
  cursor:grab;touch-action:none;
  box-shadow:0 4px 0 var(--ink-3), 0 8px 16px -9px rgba(16,16,28,.3);
  transition:transform .16s var(--sale), box-shadow .16s var(--sale), opacity .16s var(--sale);
}
.ficha:hover{transform:translateY(-2px) rotate(-.5deg);box-shadow:0 6px 0 var(--ink-3), 0 14px 24px -10px rgba(16,16,28,.34);}
.ficha__letra{
  flex:none;width:32px;height:32px;border:2px solid var(--linea);border-radius:8px;background:var(--power);
  display:grid;place-items:center;font-family:'Bungee',sans-serif;font-size:.8rem;
}
.ficha__texto{font-size:.9rem;line-height:1.35;}
.ficha.usada{opacity:.34;cursor:default;box-shadow:none;transform:none;}
.ficha.usada:hover{transform:none;}
.ficha.tomada{
  cursor:grabbing;box-shadow:0 0 0 4px var(--laser), 0 18px 34px -12px rgba(16,16,28,.5);
  transform:rotate(-1.5deg) scale(1.03);
}
.ficha.volando{position:fixed;z-index:999;pointer-events:none;width:var(--ancho);margin:0;}

/* ===========================================================================
   Respuesta corta
   =========================================================================== */
.libreta{position:relative;margin-top:1.2rem;}
.libreta textarea{
  width:100%;min-height:170px;resize:vertical;padding:1rem 1.1rem;
  border:var(--keyline) solid var(--linea);border-radius:var(--r);background:var(--panel);
  line-height:1.9;
  background-image:repeating-linear-gradient(transparent 0 calc(1.9em - 1px), rgba(16,16,28,.12) calc(1.9em - 1px) 1.9em);
  background-attachment:local;
  box-shadow:inset 0 3px 0 rgba(16,16,28,.07);
}
.libreta textarea::placeholder{color:var(--ink-3);}
.libreta textarea:focus{outline:none;border-color:var(--coin);box-shadow:inset 0 3px 0 rgba(16,16,28,.07), 0 0 0 4px rgba(255,46,77,.2);}
.libreta__pie{display:flex;justify-content:space-between;gap:1rem;margin-top:.5rem;font-size:.78rem;color:var(--ink-2);}

/* ===========================================================================
   Barra inferior de mando
   =========================================================================== */
.mando{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--paper);border-top:var(--keyline) solid var(--linea);
  box-shadow:0 -10px 30px -18px rgba(16,16,28,.5);
  padding-bottom:env(safe-area-inset-bottom);
}
.mando__fila{
  max-width:1180px;margin:0 auto;padding:.75rem clamp(1rem,3vw,2rem);
  display:flex;align-items:center;gap:.7rem;
}
.mando__centro{margin-inline:auto;display:flex;gap:.6rem;align-items:center;}
.mando__aviso{font-size:.76rem;color:var(--ink-2);text-align:center;line-height:1.3;}
@media (max-width:620px){
  /* El mando pasa a dos filas: MAPA arriba, ATRAS y SIGUIENTE abajo, que es
     donde alcanza el pulgar. El tablero abre espacio para no quedar debajo. */
  .mando__fila{flex-wrap:wrap;justify-content:space-between;gap:.55rem;}
  .mando__centro{order:-1;width:100%;margin:0;justify-content:center;}
  .btn{padding:.75em 1.15em;font-size:.76rem;}
  .tablero{padding-bottom:11rem;}
  .avisos{bottom:10rem;}
  .contador{min-width:64px;padding:.32rem .5rem;}
  .contador__valor{font-size:.9rem;}
  .cabezal__fila{gap:.5rem;}
}

/* ===========================================================================
   Mapa de tarjetas
   =========================================================================== */
.mapa{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:.5rem;margin-top:1.2rem;}
.mapa__celda{
  aspect-ratio:1;border:2px solid var(--linea);border-radius:var(--r-chico);background:var(--panel);
  font-family:'Bungee',sans-serif;font-size:.8rem;cursor:pointer;display:grid;place-items:center;
  box-shadow:0 3px 0 var(--ink-3);
  transition:transform .14s var(--sale), background .14s var(--sale);
}
.mapa__celda:hover{transform:translateY(-2px);}
.mapa__celda.lista{background:var(--life);}
.mapa__celda.parcial{background:var(--power);}
.mapa__celda.aqui{background:var(--coin);box-shadow:0 0 0 3px var(--ink), 0 3px 0 var(--coin-borde);}

/* ===========================================================================
   Dialogos de confirmacion
   =========================================================================== */
.velo{
  position:fixed;inset:0;z-index:90;display:grid;place-items:center;padding:1.2rem;
  background:rgba(16,16,28,.58);backdrop-filter:blur(3px);
  animation:vela .22s var(--sale) both;
}
@keyframes vela{from{opacity:0;}to{opacity:1;}}
.dialogo{
  width:min(520px,100%);background:var(--paper);border:var(--keyline) solid var(--linea);
  border-radius:var(--r-grande);padding:clamp(1.4rem,3vw,2.1rem);text-align:center;
  box-shadow:0 30px 70px -20px rgba(16,16,28,.6);
  animation:brinca .42s var(--sale) both;
}
@keyframes brinca{
  from{opacity:0;transform:translateY(26px) scale(.93);}
  to  {opacity:1;transform:none;}
}
.dialogo__icono{
  width:66px;height:66px;margin:0 auto 1rem;border:var(--keyline) solid var(--linea);border-radius:50%;
  display:grid;place-items:center;background:var(--power);box-shadow:inset 0 -5px 0 rgba(16,16,28,.16);
}
.dialogo__icono .ico{width:34px;height:34px;}
.dialogo__icono--alerta{background:var(--coin);}
.dialogo__titulo{font-family:'Bungee',sans-serif;font-size:clamp(1.15rem,1rem + .8vw,1.55rem);line-height:1.15;}
.dialogo__texto{margin-top:.75rem;color:var(--ink-2);text-wrap:pretty;}
.dialogo__resumen{
  margin:1.1rem 0;padding:.9rem;border:2px solid var(--linea);border-radius:var(--r);background:var(--panel);
  display:flex;justify-content:center;gap:1.6rem;flex-wrap:wrap;
}
.dialogo__dato{text-align:center;}
.dialogo__dato b{display:block;font-family:'Bungee',sans-serif;font-size:1.35rem;line-height:1.1;}
.dialogo__dato span{font-size:.7rem;color:var(--ink-2);text-transform:uppercase;letter-spacing:.05em;}
.dialogo__botones{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap;margin-top:1.2rem;}

/* ===========================================================================
   Aviso flotante (guardado, error de red)
   =========================================================================== */
.avisos{position:fixed;left:50%;bottom:6.2rem;z-index:80;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:.5rem;align-items:center;pointer-events:none;width:max-content;max-width:92vw;}
.aviso{
  display:flex;align-items:center;gap:.55rem;padding:.6rem 1rem;
  border:2px solid var(--linea);border-radius:99px;background:var(--ink);color:#fff;
  font-size:.82rem;box-shadow:var(--sombra-2);
  animation:sube .4s var(--sale) both;
}
@keyframes sube{from{opacity:0;transform:translateY(14px) scale(.94);}to{opacity:1;transform:none;}}
.aviso--mal{background:var(--coin);color:var(--ink);}
.aviso--bien{background:var(--life);color:var(--ink);}
.aviso .ico{width:18px;height:18px;}

/* ===========================================================================
   Portada, cierre y paginas auxiliares
   =========================================================================== */
.portada{
  position:relative;z-index:1;min-height:100dvh;display:grid;place-items:center;
  padding:clamp(1.4rem,4vw,3rem);
}
.portada__caja{width:min(560px,100%);text-align:center;}
.gabinete{
  background:var(--paper);border:var(--keyline) solid var(--linea);border-radius:26px;
  box-shadow:var(--sombra-alta);overflow:hidden;
}
.gabinete__cabezal{
  padding:1.5rem 1.4rem 1.3rem;border-bottom:var(--keyline) solid var(--linea);
  background:
    repeating-linear-gradient(90deg, rgba(16,16,28,.05) 0 3px, transparent 3px 9px),
    linear-gradient(170deg, var(--power) 0%, #FFD84A 52%, var(--power) 100%);
}
.gabinete__titulo{font-size:clamp(1.5rem,1.1rem + 2.1vw,2.35rem);}
.gabinete__sub{margin-top:.5rem;font-size:.82rem;font-weight:600;color:#5A4200;letter-spacing:.01em;}
.gabinete__cuerpo{padding:clamp(1.4rem,3.5vw,2.2rem);}

.campo{text-align:left;margin-bottom:1.1rem;}
.campo__rotulo{
  display:block;font-family:'Bungee',sans-serif;font-size:.62rem;letter-spacing:.07em;
  margin-bottom:.45rem;color:var(--ink-2);
}
.campo input,.campo select,.campo textarea{
  width:100%;padding:.85rem 1rem;border:var(--keyline) solid var(--linea);border-radius:var(--r);
  background:var(--panel);box-shadow:inset 0 3px 0 rgba(16,16,28,.07);
}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--laser);box-shadow:inset 0 3px 0 rgba(16,16,28,.07), 0 0 0 4px rgba(27,92,255,.22);
}
.campo--cedula input{
  font-family:'Bungee',sans-serif;font-size:1.3rem;letter-spacing:.14em;text-align:center;
}
.campo__nota{margin-top:.4rem;font-size:.76rem;color:var(--ink-2);}

.alerta{
  display:flex;align-items:flex-start;gap:.6rem;padding:.8rem 1rem;margin-bottom:1rem;
  border:2px solid var(--linea);border-radius:var(--r);background:var(--coin);
  font-size:.86rem;font-weight:600;text-align:left;
}
.alerta .ico{width:20px;height:20px;flex:none;margin-top:.1rem;}
.alerta--ok{background:var(--life);}
.alerta[hidden]{display:none;}

.reglas{
  margin:1.3rem 0 0;padding:1rem;border:2px solid var(--linea);border-radius:var(--r);
  background:var(--panel);text-align:left;
}
.reglas li{display:flex;gap:.65rem;align-items:flex-start;padding:.3rem 0;font-size:.86rem;line-height:1.45;}
.reglas .ico{width:19px;height:19px;flex:none;margin-top:.15rem;color:var(--laser);}

/* Marcador final */
.final{text-align:center;}
.final__sello{
  width:104px;height:104px;margin:0 auto 1.2rem;border:var(--keyline) solid var(--linea);border-radius:50%;
  display:grid;place-items:center;background:var(--life);
  box-shadow:inset 0 -7px 0 rgba(16,16,28,.16), var(--sombra-2);
  animation:sella .6s var(--sale) both;
}
@keyframes sella{
  0%{opacity:0;transform:scale(.4) rotate(-22deg);}
  60%{opacity:1;transform:scale(1.08) rotate(4deg);}
  100%{opacity:1;transform:none;}
}
.final__sello .ico{width:54px;height:54px;}

/* ===========================================================================
   Paneles de datos (progreso publico, monitor, administracion)
   =========================================================================== */
.hoja{position:relative;z-index:1;max-width:1240px;margin:0 auto;padding:clamp(1.2rem,3vw,2.2rem);}
.hoja--ancha{max-width:1500px;}

.encabezado{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  padding-bottom:1.1rem;margin-bottom:1.6rem;border-bottom:var(--keyline) solid var(--linea);
}
.encabezado__titulo{font-size:clamp(1.3rem,1rem + 1.5vw,2rem);}
.encabezado__sub{font-size:.84rem;color:var(--ink-2);margin-top:.3rem;}
.encabezado__acciones{margin-left:auto;display:flex;gap:.55rem;flex-wrap:wrap;}

.buscador{position:relative;flex:1;max-width:320px;}
.buscador input{
  width:100%;padding:.62rem 1rem .62rem 2.5rem;border:2px solid var(--linea);
  border-radius:99px;background:var(--paper);
}
.buscador input:focus{outline:none;border-color:var(--boss);box-shadow:0 0 0 4px rgba(123,47,247,.2);}
.buscador__lupa{
  position:absolute;left:.85rem;top:50%;transform:translateY(-50%);color:var(--ink-2);
  pointer-events:none;
}

/* En pantalla angosta el buscador se queda sin sitio entre el latido y el
   boton de orden: le damos la fila entera. */
@media (max-width:620px){
  .encabezado{gap:.6rem;}
  .buscador{max-width:none;flex:1 1 100%;}
  .encabezado__acciones{margin-left:0;}
}

.navpanel{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.5rem;}
.navpanel a{
  padding:.6rem 1.05rem;border:2px solid var(--linea);border-radius:99px;background:var(--paper);
  font-family:'Bungee',sans-serif;font-size:.68rem;letter-spacing:.04em;text-transform:uppercase;
  text-decoration:none;color:var(--ink);box-shadow:0 3px 0 var(--ink-3);
  transition:transform .14s var(--sale);
}
.navpanel a:hover{transform:translateY(-2px);color:var(--ink);}
.navpanel a[aria-current="page"]{background:var(--boss);color:#fff;box-shadow:0 3px 0 var(--boss-borde);}

/* Tablero de cifras */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:.9rem;margin-bottom:1.6rem;}
.cifra-caja{
  border:var(--keyline) solid var(--linea);border-radius:var(--r);padding:1rem 1.1rem;
  background:var(--paper);box-shadow:0 4px 0 var(--ink-3);
  display:flex;align-items:center;gap:.9rem;
}
.cifra-caja__ico{
  width:44px;height:44px;flex:none;border:2px solid var(--linea);border-radius:10px;
  display:grid;place-items:center;background:var(--tinta,var(--panel));
}
.cifra-caja__ico .ico{width:24px;height:24px;}
.cifra-caja__valor{display:block;font-family:'Bungee',sans-serif;font-size:1.7rem;line-height:1;}
.cifra-caja__rotulo{font-size:.72rem;color:var(--ink-2);text-transform:uppercase;letter-spacing:.05em;margin-top:.2rem;}
.cifra-caja--vida{--tinta:var(--life);} .cifra-caja--curso{--tinta:var(--power);}
.cifra-caja--espera{--tinta:var(--panel-2);} .cifra-caja--total{--tinta:var(--laser);}
.cifra-caja--total .cifra-caja__ico{color:#fff;}

/* Grafica de barras del avance */
.grafica{
  border:var(--keyline) solid var(--linea);border-radius:var(--r-grande);background:var(--paper);
  padding:clamp(1.1rem,2.5vw,1.7rem);box-shadow:var(--sombra-1);
}
.grafica__titulo{font-family:'Bungee',sans-serif;font-size:.74rem;letter-spacing:.05em;margin-bottom:1.2rem;}
.barras{display:flex;align-items:stretch;gap:clamp(.4rem,1.5vw,1rem);height:230px;padding-top:1.6rem;}
.barra{flex:1;display:flex;flex-direction:column;min-width:0;}
.barra__zona{position:relative;flex:1;display:flex;align-items:flex-end;}
/* La barra existe entera y se revela con clip-path: asi no se deforma la
   trama serigrafiada ni se recalcula el diseno en cada latido. */
.barra__tallo{
  width:100%;height:100%;border:var(--keyline) solid var(--linea);border-radius:8px 8px 0 0;
  border-bottom:none;background:var(--tinta,var(--laser));
  background-image:repeating-linear-gradient(0deg, rgba(255,255,255,.22) 0 5px, transparent 5px 14px);
  clip-path:inset(calc(100% - var(--alto,0px)) 0 0 0);
  transition:clip-path .55s var(--sale);
}
.barra__valor{
  position:absolute;left:50%;bottom:0;
  transform:translate(-50%, calc(-1 * var(--alto,0px) - .4rem));
  transition:transform .55s var(--sale);
  font-family:'Bungee',sans-serif;font-size:.9rem;
}
.barra__rotulo{
  margin-top:.5rem;font-size:.66rem;text-align:center;color:var(--ink-2);line-height:1.2;
  border-top:var(--keyline) solid var(--linea);padding-top:.4rem;
}
.barras .barra:nth-child(1) .barra__tallo{--tinta:var(--panel-2);}
.barras .barra:nth-child(2) .barra__tallo{--tinta:#FF8A5B;}
.barras .barra:nth-child(3) .barra__tallo{--tinta:var(--power);}
.barras .barra:nth-child(4) .barra__tallo{--tinta:#7FD13B;}
.barras .barra:nth-child(5) .barra__tallo{--tinta:var(--life);}
.barras .barra:nth-child(6) .barra__tallo{--tinta:var(--laser);}

/* Anillo de porcentaje global */
.anillo{display:flex;align-items:center;gap:1.3rem;flex-wrap:wrap;}
.anillo__grafico{position:relative;width:132px;height:132px;flex:none;}
.anillo__grafico svg{transform:rotate(-90deg);}
.anillo__pista{fill:none;stroke:var(--panel-2);stroke-width:14;}
.anillo__arco{fill:none;stroke:var(--life);stroke-width:14;stroke-linecap:round;
  transition:stroke-dashoffset .7s var(--sale);}
.anillo__cifra{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:'Bungee',sans-serif;font-size:1.5rem;
}

/* Tabla / lista de estudiantes */
.tabla{width:100%;border-collapse:separate;border-spacing:0;}
.tabla th{
  text-align:left;font-family:'Bungee',sans-serif;font-size:.6rem;letter-spacing:.06em;
  padding:.6rem .8rem;border-bottom:var(--keyline) solid var(--linea);color:var(--ink-2);
  position:sticky;top:0;background:var(--paper);z-index:2;
}
.tabla td{padding:.7rem .8rem;border-bottom:2px solid var(--panel-2);vertical-align:middle;}
.tabla tbody tr:hover td{background:var(--panel);}
.tabla__vacio{padding:3rem 1rem;text-align:center;color:var(--ink-2);}

.pista-avance{
  position:relative;height:16px;border:2px solid var(--linea);border-radius:99px;
  background:var(--panel-2);overflow:hidden;min-width:110px;
}
/* Igual que las barras: la pista se revela con clip-path, para que las
   franjas diagonales no se estiren al avanzar. */
.pista-avance__relleno{
  width:100%;height:100%;background:var(--tinta,var(--life));
  background-image:repeating-linear-gradient(115deg, rgba(255,255,255,.3) 0 7px, transparent 7px 16px);
  clip-path:inset(0 calc(100% - var(--p,0%)) 0 0);
  transition:clip-path .6s var(--sale);
}
.pista-avance--curso{--tinta:var(--power);}
.pista-avance--fin{--tinta:var(--life);}

.estado-pin{
  display:inline-flex;align-items:center;gap:.35rem;padding:.25rem .6rem;border:2px solid var(--linea);
  border-radius:99px;font-family:'Bungee',sans-serif;font-size:.55rem;letter-spacing:.04em;
  background:var(--panel);white-space:nowrap;
}
.estado-pin--curso{background:var(--power);}
.estado-pin--fin{background:var(--life);}
.estado-pin--rev{background:var(--laser);color:#fff;}
.estado-pin--sin{background:var(--panel-2);color:var(--ink-2);}
.estado-pin__punto{width:7px;height:7px;border-radius:50%;background:currentColor;}
.estado-pin--curso .estado-pin__punto{background:var(--coin);animation:late 1.5s ease-in-out infinite;}
@keyframes late{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.35;transform:scale(.72);}}

/* Muro de tarjetas del monitor */
.muro{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:.9rem;}
.pieza{
  border:var(--keyline) solid var(--linea);border-radius:var(--r);background:var(--paper);
  padding:.9rem 1rem;box-shadow:0 4px 0 var(--ink-3);cursor:pointer;text-align:left;width:100%;
  transition:transform .16s var(--sale), box-shadow .16s var(--sale);
}
.pieza:hover{transform:translateY(-3px);box-shadow:0 7px 0 var(--ink-3), 0 14px 26px -12px rgba(16,16,28,.3);}
.pieza__alto{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem;}
/* El nombre completo importa mas que la altura pareja: hasta dos lineas. */
.pieza__nombre{
  font-weight:800;font-size:.92rem;line-height:1.25;overflow:hidden;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
}
.pieza__cedula{font-size:.72rem;color:var(--ink-2);}
.pieza__pie{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-top:.5rem;font-size:.74rem;color:var(--ink-2);}
.pieza--quieto{border-style:dashed;opacity:.72;}

/* Panel lateral de detalle */
.cajon{
  position:fixed;top:0;right:0;bottom:0;z-index:95;width:min(620px,100%);
  background:var(--paper);border-left:var(--keyline) solid var(--linea);
  box-shadow:-24px 0 60px -30px rgba(16,16,28,.55);
  display:flex;flex-direction:column;
  animation:desliza .34s var(--sale) both;
}
@keyframes desliza{from{transform:translateX(100%);}to{transform:none;}}
.cajon__alto{
  padding:1.1rem 1.3rem;border-bottom:var(--keyline) solid var(--linea);
  display:flex;align-items:center;gap:.8rem;background:var(--panel);
}
.cajon__cuerpo{flex:1;overflow-y:auto;padding:1.3rem;}

.revision{border:2px solid var(--linea);border-radius:var(--r);padding:.9rem;margin-bottom:.8rem;background:var(--paper);}
.revision__pregunta{font-weight:700;font-size:.9rem;line-height:1.35;margin-bottom:.6rem;}
/* Keyline completo y tinta plana, como el resto de la lamina: la banda de
   color en un solo costado no pertenece a este mundo. */
.revision__bloque{
  padding:.6rem .75rem;border:2px solid var(--linea);border-radius:var(--r-chico);
  font-size:.86rem;line-height:1.45;margin-bottom:.5rem;
}
.revision__bloque--suya{background:var(--panel);}
.revision__bloque--modelo{background:#E4F6EB;}
.revision__bloque b{
  display:block;font-family:'Bungee',sans-serif;font-size:.55rem;letter-spacing:.06em;
  color:var(--ink-2);margin-bottom:.25rem;
}
.revision__bloque--modelo b{color:var(--life-ink);}
.revision__notas{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center;}

.vacio{
  text-align:center;padding:3.5rem 1.5rem;border:var(--keyline) dashed var(--ink-3);
  border-radius:var(--r-grande);background:var(--panel);
}
.vacio__ico{width:64px;height:64px;margin:0 auto 1rem;color:var(--ink-3);}
.vacio__titulo{font-family:'Bungee',sans-serif;font-size:1rem;margin-bottom:.5rem;}
.vacio p{color:var(--ink-2);font-size:.9rem;max-width:44ch;margin:0 auto;}

.latido{
  display:inline-flex;align-items:center;gap:.4rem;font-size:.72rem;color:var(--ink-2);
}
.latido__punto{width:8px;height:8px;border-radius:50%;background:var(--life);animation:late 1.6s ease-in-out infinite;}

.carga{display:grid;place-items:center;padding:4rem 1rem;}
.carga__disco{
  width:44px;height:44px;border:4px solid var(--panel-2);border-top-color:var(--coin);border-radius:50%;
  animation:gira .8s linear infinite;
}
@keyframes gira{to{transform:rotate(360deg);}}

.oculto{display:none !important;}
.solo-lectores{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* --- Quien prefiere menos movimiento ------------------------------------ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}

/* --- Impresion ----------------------------------------------------------- */
@media print{
  .trama,.chevrones,.mando,.navpanel,.encabezado__acciones{display:none !important;}
  body{background:#fff;}
  .placa,.grafica,.pieza{box-shadow:none;}
}