/* ============================================================
   QUIÉN PUEDE CAMBIAR QUÉ — capa 3 (componente).

   Habla sólo con la capa 2 (/shared/alias.css). Ni un hex, ni una duración
   literal, ni un primitivo: `node scripts/ui/drift-tokens.mjs` lo cuenta.

   La decisión de forma: la tabla es el contenido, así que ocupa el ancho y se
   desplaza SOLA dentro de su caja —— la página nunca se desplaza en horizontal,
   ni a 390 px. La primera columna se queda pegada porque una marca sin el
   nombre del cambio al lado no significa nada.
   ============================================================ */

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:var(--weight-body) var(--type-meta)/var(--lh-meta) var(--font-ui);
}

.sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}

a{color:var(--accent)}

:focus-visible{outline:none;box-shadow:var(--focus-ring)}

/* ——— cabecera ——— */

.cabecera{
  display:flex;gap:var(--gap-md);flex-wrap:wrap;
  align-items:flex-start;justify-content:space-between;
  padding:var(--gap-md);
  border-bottom:1px solid var(--border);
}
.cabecera-texto{max-width:62ch}
h1{
  margin:0;
  font:var(--weight-strong) var(--type-entry)/var(--lh-entry) var(--font-ui);
  letter-spacing:.01em;
}
.sub{margin:6px 0 0;color:var(--muted)}
.cabecera-acciones{display:flex;gap:var(--gap-sm);align-items:center;flex-wrap:wrap}
/* Todo lo que es TEXTO va con `--muted` y no con `--muted-soft`: el segundo da
   3,33:1 sobre el papel y axe lo tumba (7 nodos la primera vez que miró). El
   suave se queda para lo que es decorativo y lleva `aria-hidden`. */
.sello{color:var(--muted);font-size:var(--type-micro)}

.boton,button,select,input[type="search"]{
  font:inherit;
  min-height:44px;
  padding:8px 14px;
  border-radius:var(--r-sm);
  border:1px solid var(--border-hi);
  background:var(--surface2);
  color:var(--text);
  transition:var(--motion-color);
}
.boton{display:inline-flex;align-items:center;text-decoration:none}
.boton:hover,button:hover{background:var(--surface3);border-color:var(--accent)}
button{cursor:pointer}

/* ——— aviso: el único texto cuando no hay mapa que enseñar ——— */

.aviso{
  margin:var(--gap-md);
  padding:14px 16px;
  border:1px solid var(--border);
  border-left:3px solid var(--accent);
  border-radius:var(--r);
  background:var(--surface2);
  color:var(--text);
  max-width:70ch;
}
.aviso[hidden]{display:none}
.aviso.malo{border-left-color:var(--danger)}
.aviso a{font-weight:var(--weight-mid)}

main{padding:0 var(--gap-md) var(--gap-lg)}

/* ——— resumen ——— */

.resumen{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:var(--gap-sm);
  margin:var(--gap-md) 0;
}
.cifra{
  border:1px solid var(--border);
  border-radius:var(--r);
  background:var(--surface);
  padding:16px;
}
.cifra-mal{border-color:var(--danger);background:var(--danger-dim)}
.cifra-num{
  display:block;
  font:var(--weight-strong) var(--type-title)/var(--lh-title) var(--font-num);
  font-variant-numeric:tabular-nums;
}
.cifra-eti{
  margin:2px 0 6px;
  font:var(--weight-mid) var(--type-meta)/var(--lh-meta) var(--font-ui);
}
.cifra-pie{margin:0;color:var(--muted);font-size:var(--type-micro);line-height:var(--lh-micro)}
.cifra code{font-family:var(--font-num);font-size:var(--type-micro)}

/* ——— filtros ——— */

.controles{
  display:flex;flex-wrap:wrap;gap:var(--gap-sm);
  align-items:flex-start;
  padding:14px;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:var(--surface2);
}
.campo{display:flex;flex-direction:column;gap:4px;min-width:190px}
.campo-ancho{flex:1 1 260px}
.campo label{font-size:var(--type-micro);color:var(--muted);font-weight:var(--weight-mid)}
.campo-casilla label{
  display:flex;align-items:center;gap:8px;
  min-height:44px;color:var(--text);font-size:var(--type-meta);
}
.campo-casilla input{width:22px;height:22px;accent-color:var(--accent)}
.campo-boton{justify-content:flex-end;min-width:0}
.pista{margin:0;color:var(--muted);font-size:var(--type-micro);max-width:34ch}
.campo-casilla .pista{max-width:40ch}

.cuenta{margin:var(--gap-sm) 0;color:var(--muted);font-size:var(--type-micro)}

/* ——— la tabla ——— */

/* La caja se desplaza en los DOS ejes: en horizontal porque la tabla mide
   2.249 px, y en vertical para que la cabecera pegada se quede quieta sobre las
   67 filas en vez de irse con la página. */
.tabla-caja{
  overflow:auto;
  max-height:76vh;
  -webkit-overflow-scrolling:touch;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:var(--surface);
  overscroll-behavior:contain;
}
.tabla{border-collapse:separate;border-spacing:0;width:100%;position:relative}
.tabla th,.tabla td{
  padding:10px 12px;
  border-bottom:1px solid var(--border);
  text-align:left;
  vertical-align:middle;
}
.tabla thead th{
  position:sticky;top:0;z-index:2;
  background:var(--surface2);
  color:var(--muted);
  font-size:var(--type-micro);
  font-weight:var(--weight-mid);
  text-transform:uppercase;
  letter-spacing:.06em;
  white-space:nowrap;
}
/* Columna estrecha y cabecera que PARTE en dos o tres líneas: el ancho de la
   tabla lo manda el rótulo, no el dato. Con los rótulos largos y sin partir, la
   tabla medía 2.249 px y a 1440 se quedaban fuera las cuatro columnas donde
   están casi todas las escaladas. */
.tabla thead th.col-actor{
  text-align:center;white-space:normal;
  width:88px;min-width:88px;
  padding-left:6px;padding-right:6px;
  letter-spacing:.02em;
  vertical-align:bottom;
}
/* «Quién debería» parte en dos líneas por lo mismo: 141 px de rótulo para una
   pastilla de 70. */
.tabla thead th.col-rol{white-space:normal;vertical-align:bottom}
.col-cambio{
  position:sticky;left:0;z-index:1;
  background:var(--surface);
  min-width:232px;max-width:320px;
  border-right:1px solid var(--border);
}
.tabla thead th.col-cambio{z-index:3;background:var(--surface2)}
.tabla tbody tr:hover .col-cambio{background:var(--surface2)}
.tabla tbody tr:hover td{background:var(--surface2)}
.titulo-cambio{display:block;font-weight:var(--weight-mid)}
.nota-cambio{display:block;margin-top:2px;color:var(--muted);font-size:var(--type-micro)}
.col-rol,.col-rastro{white-space:nowrap}
.col-rol{width:96px}
.col-rastro{width:88px;text-align:center}
.rol{
  display:inline-block;padding:2px 10px;border-radius:var(--r-pill);
  background:var(--accent-dim);color:var(--accent);
  font-size:var(--type-micro);font-weight:var(--weight-mid);
}

/* Las celdas. La marca nunca depende sólo del color: cada una lleva su glifo,
   y el lector de pantalla lee la palabra entera. */
/* `position:relative` no es decoración: dentro de cada celda hay un texto sólo
   para el lector de pantalla, que va `position:absolute`. Sin un ancestro
   posicionado su bloque contenedor es el documento entero, y esos 670 textos
   estiraban el ancho de desplazamiento de la página a 1.985 px —— sin que
   ningún elemento visible se saliera. */
.celda{text-align:center;width:64px;position:relative;padding-left:6px;padding-right:6px}
.marca{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:30px;height:30px;padding:0 6px;
  border-radius:var(--r-sm);
  font-family:var(--font-num);
  font-weight:var(--weight-mid);
  border:1px solid transparent;
}
.m-pasa{background:var(--success-dim);color:var(--success);border-color:var(--success)}
.m-niega{color:var(--muted-soft)}
.m-mudo{background:var(--danger);color:var(--on-state);border-color:var(--danger)}
.m-error{background:var(--warn-dim);color:var(--warn);border-color:var(--warn)}
.m-filtra{background:var(--surface3);color:var(--text);border-color:var(--border-hi)}
.m-esc,.m-rastro{background:var(--surface3);color:var(--text);border-color:var(--border-hi)}

/* Escalada: la marca se envuelve en un marco propio y lleva triángulo. Se ve
   sin leer la fila entera, que es lo que se pide de un hallazgo. */
.celda.escalada{background:var(--danger-dim)}
.celda.escalada .marca{border-color:var(--danger);box-shadow:inset 0 0 0 1px var(--danger)}
.senal{
  display:inline-block;margin-left:4px;
  font-family:var(--font-num);font-size:var(--type-micro);
  color:var(--danger);
}
.senal-rastro{color:var(--warn)}

.rastro-si{color:var(--success);font-weight:var(--weight-mid)}
.rastro-no{color:var(--danger);font-weight:var(--weight-strong)}
.rastro-nada{color:var(--muted)}

.fila-muerta .col-cambio{border-left:3px solid var(--warn)}

.vacio{margin:var(--gap-md) 0;color:var(--muted)}

/* ——— leyenda ——— */

.leyenda{
  margin-top:var(--gap-lg);
  padding:16px;
  border:1px solid var(--border);
  border-radius:var(--r);
  background:var(--surface2);
}
.leyenda h2{margin:0 0 10px;font:var(--weight-mid) var(--type-meta)/var(--lh-meta) var(--font-ui)}
.leyenda ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.leyenda li{display:flex;align-items:center;gap:10px;color:var(--muted)}
.leyenda strong{color:var(--text)}
.leyenda .pie{margin:14px 0 0;color:var(--muted);font-size:var(--type-micro)}
.leyenda code{font-family:var(--font-num)}

@media (max-width:640px){
  /* En el teléfono las cuatro cifras no pueden comerse la primera pantalla
     entera: el resumen se aprieta para que la tabla empiece antes. */
  .cifra{padding:12px}
  .cifra-num{font-size:var(--type-entry);line-height:var(--lh-entry)}
  .resumen{margin:var(--gap-sm) 0}
  .cabecera{padding:var(--gap-sm)}
  main{padding:0 var(--gap-sm) var(--gap-md)}
  .aviso{margin:var(--gap-sm)}
  .campo,.campo-ancho{min-width:100%;flex:1 1 100%}
  .col-cambio{min-width:168px;max-width:200px}
  /* Con un actor elegido queda su columna sola: ver el comentario de
     `oculta()` en permisos.js. */
  .oculta-movil{display:none}
}

/* Quien pide menos movimiento no recibe ninguno. */
@media (prefers-reduced-motion:reduce){
  *{transition:none}
}