/* La aplicación (docs/32). Blanca, con aire, un solo acento. Todo desde tokens.css. */
@import url("tokens.css");

/* Inter, incluida en el proyecto (docs/32 §2): nada se sirve desde fuera. Fontsource, licencia OFL. */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fuentes/inter-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fuentes/inter-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fuentes/inter-latin-700-normal.woff2") format("woff2"); }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font-family: var(--fuente);
  font-size: var(--t-14); line-height: var(--interlineado); font-weight: var(--peso-normal); }
@media (max-width: 720px) { body { font-size: var(--t-16); } }
a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-weight: var(--peso-medio); line-height: 1.25; }
h1 { font-size: var(--t-24); }
h2 { font-size: var(--t-20); }
h3 { font-size: var(--t-16); }
p { margin: 0 0 var(--e-12); }
ul, ol { margin: 0 0 var(--e-12); padding-left: var(--e-24); }
li { margin-bottom: var(--e-4); }
strong { font-weight: var(--peso-medio); }
img { max-width: 100%; }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: var(--e-8); top: var(--e-8); background: var(--acento); color: var(--blanco); padding: var(--e-8) var(--e-16); z-index: 100; }

/* ── estructura de página (docs/32 §3) ─────────────────────────────── */
.barra-superior { position: sticky; top: 0; z-index: 20; height: var(--alto-barra); background: var(--fondo);
  border-bottom: var(--linea) solid var(--borde); display: flex; align-items: center; gap: var(--e-16);
  padding: 0 var(--e-24); }
.barra-superior .marca { display: inline-flex; align-items: center; gap: var(--e-12); color: var(--texto);
  font-size: var(--t-20); font-weight: var(--peso-medio); }
.barra-superior .marca img { width: auto; height: var(--e-32); display: block; }
/* El logo vertical de la pantalla de entrada (docs/39 §2). */
.logo-entrada { display: block; margin: 0 auto var(--e-24); height: auto; max-width: var(--ancho-logo-entrada); }
/* Para lo que tiene que leer un lector de pantalla y no debe verse. */
.oculto-visual { position: absolute; width: var(--un-pixel); height: var(--un-pixel); padding: 0;
  margin: var(--un-pixel-negativo); overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0; }
.barra-superior .derecha { margin-left: auto; display: flex; align-items: center; gap: var(--e-16); }
.chip-codigo { font-family: var(--fuente-mono); font-size: var(--t-12); color: var(--texto-2); white-space: nowrap;
  border: var(--linea) solid var(--borde); border-radius: var(--radio-16); padding: var(--e-4) var(--e-12); }
@media (max-width: 480px) { .chip-codigo { display: none; } }
.salir { background: none; border: 0; color: var(--acento); font: inherit; font-weight: var(--peso-medio);
  cursor: pointer; padding: var(--e-8); min-height: var(--alto-tocable); }
.abre-menu { display: none; background: none; border: 0; font-size: var(--t-24); color: var(--texto);
  cursor: pointer; padding: var(--e-8); min-height: var(--alto-tocable); min-width: var(--alto-tocable); }

.cuerpo { display: flex; min-height: calc(100vh - var(--alto-barra)); }
.menu-lateral { width: var(--ancho-menu); flex: 0 0 var(--ancho-menu); background: var(--fondo-2);
  border-right: var(--linea) solid var(--borde); padding: var(--e-16) var(--e-8); }
.menu-lateral a, .menu-lateral span.pronto { display: flex; align-items: center; gap: var(--e-12);
  padding: 0 var(--e-16); height: var(--alto-campo); border-radius: var(--radio-8); color: var(--texto);
  font-weight: var(--peso-medio); transition: background var(--transicion); }
.menu-lateral a:hover { background: var(--acento-suave); text-decoration: none; }
.menu-lateral a.activo { background: var(--acento-suave); color: var(--acento); }
.menu-lateral span.pronto { color: var(--texto-2); font-weight: var(--peso-normal); cursor: default; }
.menu-lateral .icono { width: var(--e-24); height: var(--e-24); flex: 0 0 var(--e-24); stroke: currentColor;
  fill: none; stroke-width: 1.5; }
.menu-lateral .aparte { margin: var(--e-16) var(--e-16) var(--e-8); font-size: var(--t-12);
  color: var(--texto-2); text-transform: uppercase; letter-spacing: var(--espaciado-letra); }
.contenido { flex: 1 1 auto; min-width: 0; padding: var(--e-24); }
.contenido > .dentro { max-width: var(--ancho-max); margin: 0 auto; }
@media (max-width: 900px) {
  .abre-menu { display: inline-flex; align-items: center; justify-content: center; }

  /* El menú va clavado a la pantalla, así que tiene que traer SU PROPIO alto y SU PROPIO
     scroll. Dos cosas que se aprendieron a base de intentos, el 2026-09-22, sobre un
     iPhone de verdad:
       · `bottom: 0` no vale. En Safari de iPhone el borde de abajo se calcula contra la
         ventana grande, la de antes de que aparezca la barra del navegador, así que el
         final del menú queda por debajo de lo que se ve y no hay forma de llegar.
       · `vh` tiene el mismo problema. `dvh` es el alto de lo que se ve AHORA, con la barra
         puesta, y se recalcula cuando aparece o desaparece. El `vh` de la línea anterior
         queda de red para el navegador que no entienda `dvh`.
     Y abajo se reserva sitio de sobra para que la última fila no nazca debajo de la barra
     de Safari, que se dibuja encima. */
  .menu-lateral { display: none; position: fixed; top: var(--alto-barra); left: 0; z-index: 30;
    height: calc(100vh - var(--alto-barra));
    height: calc(100dvh - var(--alto-barra));
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    padding-bottom: calc(var(--e-48) + var(--hueco-abajo));
    box-shadow: var(--sombra-alta); }
  .menu-lateral.abierto { display: block; }
  .contenido { padding: var(--e-16); }

  /* Con el menú abierto se queda quieto lo de DETRÁS, no el menú: si se bloquea el gesto
     en todas partes, el menú deja de deslizarse y parece roto otra vez. Por eso aquí no
     hay ni un `touch-action`. */
  body.menu-abierto { overflow: hidden; }

  /* Formación arranca plegada. Son dieciocho filas de submenú: desplegada de nacimiento,
     empuja Bóveda, Editor, Ventas, Auditoría y la Sala fuera de la pantalla. */
  .menu-lateral .submenu { display: none; }
  .interruptor:checked ~ .submenu { display: block; }
  .interruptor:checked ~ .fila-plegable .flecha { transform: rotate(180deg); }
}


/* ── componentes (docs/32 §4) ─────────────────────────────────────── */
.tarjeta { background: var(--superficie); box-shadow: var(--sombra); border-radius: var(--radio-8);
  padding: var(--e-24); }
@media (max-width: 720px) { .tarjeta { padding: var(--e-16); } }
.tarjeta > h2:first-child, .tarjeta > h1:first-child { margin-bottom: var(--e-16); }
a.tarjeta { display: block; color: inherit; transition: box-shadow var(--transicion); }
a.tarjeta:hover { box-shadow: var(--sombra-alta); text-decoration: none; }
.rejilla { display: grid; gap: var(--e-16); grid-template-columns: repeat(auto-fit, minmax(var(--ancho-tarjeta-min), 1fr)); }
.rejilla-2 { display: grid; gap: var(--e-16); grid-template-columns: 1fr 1fr; }
.rejilla-3 { display: grid; gap: var(--e-16); grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 720px) { .rejilla-2, .rejilla-3 { grid-template-columns: 1fr; } }
.apilado > * + * { margin-top: var(--e-16); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--e-8);
  height: var(--alto-boton); min-height: var(--alto-tocable); padding: 0 var(--e-24); border-radius: var(--radio-8);
  font: inherit; font-weight: var(--peso-medio); cursor: pointer; border: var(--linea) solid var(--borde);
  background: var(--superficie); color: var(--acento); transition: background var(--transicion); white-space: nowrap; }
.btn:hover { background: var(--acento-suave); text-decoration: none; }
.btn-primario { background: var(--acento); border-color: var(--acento); color: var(--blanco); }
.btn-primario:hover { background: var(--acento); box-shadow: var(--sombra); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.acciones { display: flex; gap: var(--e-12); flex-wrap: wrap; justify-content: flex-end; margin-top: var(--e-24); }
.acciones .izquierda { margin-right: auto; }

.chip { display: inline-flex; align-items: center; gap: var(--e-8); border-radius: var(--radio-16);
  padding: var(--e-4) var(--e-12); font-size: var(--t-12); font-weight: var(--peso-medio); }
.chip::before { content: ""; width: var(--e-8); height: var(--e-8); border-radius: var(--radio-redondo); background: currentColor; }
.chip-ok { background: var(--ok-suave); color: var(--ok); }
.chip-aviso { background: var(--aviso-suave); color: var(--aviso); }
.chip-alarma { background: var(--alarma-suave); color: var(--alarma); }
.chip-neutro { background: var(--fondo-2); color: var(--texto-2); }

.avance { height: var(--alto-avance); background: var(--borde); border-radius: var(--radio-redondo); overflow: hidden; }
.avance > i { display: block; height: 100%; background: var(--acento); border-radius: var(--radio-redondo);
  transition: width var(--transicion); }

.tabla { width: 100%; border-collapse: collapse; }
.tabla th { text-align: left; color: var(--texto-2); font-size: var(--t-12); font-weight: var(--peso-medio);
  text-transform: uppercase; letter-spacing: var(--espaciado-letra); padding: 0 var(--e-12); height: var(--alto-fila);
  border-bottom: var(--linea) solid var(--borde); }
.tabla td { padding: 0 var(--e-12); height: var(--alto-fila); border-bottom: var(--linea) solid var(--borde); }
.tabla .cifra { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-envuelta { overflow-x: auto; }

.campo { display: flex; flex-direction: column; gap: var(--e-4); margin-bottom: var(--e-16); }
.campo label { font-size: var(--t-12); color: var(--texto-2); }
.campo input, .campo select, .campo textarea { font: inherit; color: var(--texto); background: var(--superficie);
  border: var(--linea) solid var(--borde); border-radius: var(--radio-4); padding: var(--e-8) var(--e-12);
  min-height: var(--alto-campo); }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--acento); }
.campo.error input { border-color: var(--alarma); }
.campo .error-texto { color: var(--alarma); font-size: var(--t-12); }

.aviso-bloque { background: var(--acento-suave); border-left: var(--linea-gruesa) solid var(--acento);
  border-radius: var(--radio-4); padding: var(--e-12) var(--e-16); margin: 0 0 var(--e-16); }
.aviso-bloque.ojo { background: var(--aviso-suave); border-left-color: var(--aviso); }
.aviso-bloque.mal { background: var(--alarma-suave); border-left-color: var(--alarma); }
.aviso-bloque.bien { background: var(--ok-suave); border-left-color: var(--ok); }
.aviso-bloque p:last-child { margin-bottom: 0; }

.alarmas { display: flex; flex-wrap: wrap; gap: var(--e-8); margin-bottom: var(--e-16); }
.alarmas a.chip, .alarmas span.chip { font-size: var(--t-14); padding: var(--e-8) var(--e-16); }
.alarmas a.chip:hover { text-decoration: underline; }

.cifra-destacada { display: flex; flex-direction: column; gap: var(--e-4); }
.cifra-destacada strong { font-size: var(--t-32); font-weight: var(--peso-fuerte); line-height: 1.1;
  font-variant-numeric: tabular-nums; }
.cifra-destacada span { font-size: var(--t-12); color: var(--texto-2); }
.cifra-destacada .sube { color: var(--ok); }
.cifra-destacada .baja { color: var(--alarma); }

.suave { color: var(--texto-2); }
.pequeno { font-size: var(--t-12); }
.mono { font-family: var(--fuente-mono); }

/* reparto entre cuentas (barras) */
.reparto { display: flex; flex-direction: column; gap: var(--e-8); }
.barra-reparto { display: grid; grid-template-columns: minmax(0, 1fr) 3fr auto; align-items: center; gap: var(--e-12); }
.barra-reparto .nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-reparto .pista { height: var(--alto-barra-reparto); background: var(--borde); border-radius: var(--radio-redondo); overflow: hidden; }
.barra-reparto .pista i { display: block; height: 100%; background: var(--acento); border-radius: var(--radio-redondo); }
.barra-reparto .pct { color: var(--texto-2); font-variant-numeric: tabular-nums; }
.barra-reparto.roja .pista i { background: var(--alarma); }
.barra-reparto.roja .nombre, .barra-reparto.roja .pct { color: var(--alarma); font-weight: var(--peso-medio); }

/* lista de pendientes con contadores */
.pendientes { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--e-8) var(--e-24); }
.pendientes a { display: inline-flex; align-items: center; gap: var(--e-8); min-height: var(--alto-tocable); }
.pendientes strong { font-size: var(--t-20); font-weight: var(--peso-fuerte); }

/* ── formación (docs/32 §5, «Formación, módulo») ─────────────────── */
.modulo-cab { margin-bottom: var(--e-16); }
.modulo-cab .etiqueta { font-size: var(--t-12); color: var(--texto-2); text-transform: uppercase; letter-spacing: var(--espaciado-letra); }
.modulo-cab .meta { color: var(--texto-2); margin-top: var(--e-4); }
.modulo-cab .avance { margin-top: var(--e-12); }
.pestanas { display: flex; gap: var(--e-8); margin: var(--e-16) 0; border-bottom: var(--linea) solid var(--borde); }
.pestanas a { display: inline-flex; align-items: center; gap: var(--e-8); padding: var(--e-12) var(--e-16);
  color: var(--texto-2); font-weight: var(--peso-medio); border-bottom: var(--linea-gruesa) solid transparent;
  margin-bottom: calc(var(--linea) * -1); min-height: var(--alto-tocable); }
.pestanas a[aria-selected="true"] { color: var(--acento); border-bottom-color: var(--acento); }
.pestanas a[data-hecha="1"]::before { content: ""; width: var(--e-8); height: var(--e-8); border-radius: var(--radio-redondo); background: var(--ok); }
.pestanas a[aria-disabled="true"] { opacity: .5; pointer-events: none; }
.pestanas a:hover { text-decoration: none; }
.lectura { max-width: var(--ancho-lectura); }
.lectura h2 { font-size: var(--t-20); margin: 0 0 var(--e-16); }
.lectura h3 { margin: var(--e-24) 0 var(--e-8); }
.lectura p, .lectura li { font-size: var(--t-16); }
.lectura .clave { background: var(--acento-suave); border-left: var(--linea-gruesa) solid var(--acento);
  border-radius: var(--radio-4); padding: var(--e-12) var(--e-16); margin: 0 0 var(--e-16); font-size: var(--t-16); }
.lectura .aviso { background: var(--aviso-suave); border-left: var(--linea-gruesa) solid var(--aviso);
  border-radius: var(--radio-4); padding: var(--e-12) var(--e-16); margin: 0 0 var(--e-16); font-size: var(--t-16); }
.lectura .muestra { background: var(--fondo-2); border-radius: var(--radio-8); padding: var(--e-12) var(--e-16);
  margin: 0 0 var(--e-16); white-space: pre-line; }
.lectura .muestra-de { display: block; font-size: var(--t-12); color: var(--texto-2); text-transform: uppercase; letter-spacing: var(--espaciado-letra); }
.chat { display: flex; flex-direction: column; gap: var(--e-8); padding: var(--e-16); background: var(--fondo-2);
  border-radius: var(--radio-8); margin: 0 0 var(--e-16); }
.burbuja { max-width: 86%; padding: var(--e-8) var(--e-16); border-radius: var(--radio-16); line-height: 1.4; white-space: pre-line; overflow-wrap: anywhere; }
.burbuja-de { display: block; font-size: var(--t-12); font-weight: var(--peso-medio); text-transform: uppercase; letter-spacing: var(--espaciado-letra); opacity: .7; }
.burbuja-fan { align-self: flex-start; background: var(--superficie); box-shadow: var(--sombra); }
.burbuja-lola, .burbuja-vera { align-self: flex-end; background: var(--acento); color: var(--blanco); }
.burbuja-chatter { align-self: flex-end; background: var(--alarma-suave); border: var(--linea) dashed var(--alarma); }
.chat-nota { align-self: center; text-align: center; color: var(--texto-2); font-size: var(--t-12); margin: 0; }
.recorrido { display: grid; gap: var(--e-4); margin-top: var(--e-24); max-width: var(--ancho-lectura); }
.recorrido .paso { display: flex; gap: var(--e-12); align-items: baseline; padding: var(--e-8) var(--e-12);
  border-radius: var(--radio-8); color: var(--texto-2); min-height: var(--alto-tocable); }
.recorrido .paso:hover { background: var(--fondo-2); text-decoration: none; }
.recorrido .paso-n { font-size: var(--t-12); font-weight: var(--peso-medio); min-width: var(--e-24); }
.recorrido .paso.vista { color: var(--texto); }
.recorrido .paso.vista .paso-n { color: var(--ok); }
.recorrido .paso.actual { background: var(--acento-suave); color: var(--acento); font-weight: var(--peso-medio); }
.accion-final { background: var(--acento-suave); border-radius: var(--radio-8); padding: var(--e-24); }
.accion-final .etiqueta { font-size: var(--t-12); color: var(--acento); text-transform: uppercase; letter-spacing: var(--espaciado-letra); }
.accion-final h2 { margin: var(--e-4) 0 var(--e-8); }
.accion-final p { font-size: var(--t-16); }
.ejercicio .opciones { list-style: none; padding: 0; margin: 0 0 var(--e-16); display: grid; gap: var(--e-8); }
.ejercicio .opcion { width: 100%; text-align: left; font: inherit; font-size: var(--t-16); background: var(--superficie);
  border: var(--linea) solid var(--borde); border-radius: var(--radio-8); padding: var(--e-12) var(--e-16);
  cursor: pointer; display: flex; gap: var(--e-12); align-items: flex-start; min-height: var(--alto-campo); color: var(--texto); }
.ejercicio .opcion:hover { border-color: var(--acento); background: var(--acento-suave); }
.ejercicio .opcion-letra { flex: 0 0 var(--e-24); height: var(--e-24); border-radius: var(--radio-redondo);
  background: var(--fondo-2); font-size: var(--t-12); font-weight: var(--peso-medio); display: flex; align-items: center; justify-content: center; }
.ejercicio .opcion[disabled] { cursor: default; }
.ejercicio .opcion[data-resultado="ok"] { border-color: var(--ok); background: var(--ok-suave); }
.ejercicio .opcion[data-resultado="ok"] .opcion-letra { background: var(--ok); color: var(--blanco); }
.ejercicio .opcion[data-resultado="mal"] { border-color: var(--alarma); background: var(--alarma-suave); }
.ejercicio .opcion[data-resultado="mal"] .opcion-letra { background: var(--alarma); color: var(--blanco); }
.feedback { border-radius: var(--radio-8); padding: var(--e-12) var(--e-16); margin: 0 0 var(--e-16); }
.feedback-ok { background: var(--ok-suave); border-left: var(--linea-gruesa) solid var(--ok); }
.feedback-mal { background: var(--alarma-suave); border-left: var(--linea-gruesa) solid var(--alarma); }

/* ── entrada y páginas de una sola tarjeta (docs/32 §5) ─────────────── */
.entrada { max-width: var(--ancho-entrada); margin: var(--e-32) auto; }
.entrada h1 { margin-bottom: var(--e-16); }
.btn.ancho { width: 100%; margin-top: var(--e-8); }
.centrado { text-align: center; }

/* ── índice de formación y portal: tarjetas de módulo ─────────────── */
.tarjeta-modulo { display: flex; flex-direction: column; gap: var(--e-8); color: var(--texto); }
.tarjeta-modulo .etiqueta { font-size: var(--t-12); color: var(--texto-2); text-transform: uppercase; letter-spacing: var(--espaciado-letra); }
.tarjeta-modulo h2 { margin: 0; }
.tarjeta-modulo .pie-tarjeta { display: flex; justify-content: space-between; align-items: center; gap: var(--e-8); flex-wrap: wrap; margin-top: auto; }
.tarjeta-modulo.apagada { opacity: .6; }
.tarjeta-modulo.apagada[aria-disabled="true"] { pointer-events: none; }

/* ── lista de arranque (docs/32 §5) ─────────────────────────────── */
.lista-arranque { list-style: none; padding: 0; margin: var(--e-16) 0; display: grid; gap: var(--e-8); }
.lista-arranque li { display: flex; gap: var(--e-16); align-items: flex-start; background: var(--superficie); box-shadow: var(--sombra);
  border-radius: var(--radio-8); padding: var(--e-16); }
.lista-arranque .casilla { flex: 0 0 var(--e-24); width: var(--e-24); height: var(--e-24); border: var(--linea) solid var(--borde);
  border-radius: var(--radio-4); display: flex; align-items: center; justify-content: center; font-weight: var(--peso-fuerte); color: var(--blanco); }
.lista-arranque li.hecho .casilla { background: var(--ok); border-color: var(--ok); }
.lista-arranque li.hecho .titulo { color: var(--ok); }
.lista-arranque .titulo { margin: 0 0 var(--e-4); font-weight: var(--peso-medio); font-size: var(--t-16); }
.lista-arranque p:last-child { margin: 0; }

/* ── onboarding: el formulario de docs/12b, con campos de etiqueta encima ─────── */
.onb .field, .onb .limite { margin-bottom: var(--e-16); }
.onb label, .onb .limite-q, .onb .label-p { display: block; font-size: var(--t-12); color: var(--texto-2); margin-bottom: var(--e-4); }
.onb .limite-q, .onb .label-p { font-size: var(--t-14); color: var(--texto); font-weight: var(--peso-medio); }
.onb input[type="text"], .onb select, .onb textarea { width: 100%; font: inherit; color: var(--texto); background: var(--superficie);
  border: var(--linea) solid var(--borde); border-radius: var(--radio-4); padding: var(--e-8) var(--e-12); min-height: var(--alto-campo); }
.onb input:focus, .onb select:focus, .onb textarea:focus { outline: none; border-color: var(--acento); }
.onb .hint { color: var(--texto-2); font-size: var(--t-12); margin: var(--e-4) 0 0; }
.onb .lead { font-size: var(--t-16); }
.onb .sub-h { font-size: var(--t-12); color: var(--acento); text-transform: uppercase; letter-spacing: var(--espaciado-letra);
  margin: var(--e-24) 0 var(--e-8); padding-top: var(--e-16); border-top: var(--linea) solid var(--borde); }
.onb .obligatorio, .onb .opcional, .onb .segun { display: inline-block; font-size: var(--t-12); border-radius: var(--radio-16);
  padding: 0 var(--e-8); margin-left: var(--e-8); vertical-align: middle; text-transform: none; }
.onb .obligatorio { background: var(--acento-suave); color: var(--acento); }
.onb .opcional { background: var(--fondo-2); color: var(--texto-2); }
.onb .segun { background: var(--aviso-suave); color: var(--aviso); }
.onb .radios { display: flex; flex-wrap: wrap; gap: var(--e-8); }
.onb .radio { display: inline-flex; align-items: center; gap: var(--e-8); min-height: var(--alto-tocable); padding: 0 var(--e-16);
  border: var(--linea) solid var(--borde); border-radius: var(--radio-16); background: var(--superficie); cursor: pointer; font-size: var(--t-14); }
.onb .radio input { accent-color: var(--acento); }
.onb .radio:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }
.onb .checks { display: grid; gap: var(--e-8); }
.onb .check { display: flex; align-items: center; gap: var(--e-8); min-height: var(--alto-tocable); font-size: var(--t-14); color: var(--texto); }
.onb .check input { accent-color: var(--acento); width: var(--e-16); height: var(--e-16); }
.onb .destacado-check { background: var(--fondo-2); border-radius: var(--radio-8); padding: var(--e-12) var(--e-16); margin-bottom: var(--e-16); }
.onb .dato-box, .onb .privacy-box, .onb .limites-aviso { background: var(--fondo-2); border-radius: var(--radio-8); padding: var(--e-16); margin-bottom: var(--e-16); }
.onb .no-box { background: var(--acento-suave); border-left: var(--linea-gruesa) solid var(--acento); border-radius: var(--radio-4); padding: var(--e-16); margin-bottom: var(--e-16); }
.onb .no-titulo { font-weight: var(--peso-medio); }
.onb .aviso-guardado { background: var(--ok-suave); border-left: var(--linea-gruesa) solid var(--ok); border-radius: var(--radio-4); padding: var(--e-12) var(--e-16); margin-bottom: var(--e-16); }
.onb .field.falta input, .onb .field.falta select, .onb .field.falta textarea, .onb .limite.falta .limite-q { border-color: var(--alarma); color: var(--alarma); }
.onb .onb-error { color: var(--alarma); font-weight: var(--peso-medio); margin-top: var(--e-8); }
.onb .onb-contador { font-size: var(--t-12); color: var(--texto-2); margin-top: var(--e-4); }
.onb .onb-contador.corto { color: var(--alarma); }

/* ── examen, certificado ─────────────────────────────────────── */
.examen-grid { display: grid; grid-template-columns: 1fr; gap: var(--e-16); }
@media (min-width: 900px) { .examen-grid { grid-template-columns: minmax(0, 1fr) var(--ancho-menu); } }
.ficha-panel { max-height: 70vh; overflow: auto; font-size: var(--t-14); }
.certificado { text-align: center; padding: var(--e-48) var(--e-32); }
.cert-marca, .cert-pie { color: var(--texto-2); font-size: var(--t-12); text-transform: uppercase; letter-spacing: var(--espaciado-letra); }
.cert-alias { font-size: var(--t-24); font-weight: var(--peso-medio); font-family: var(--fuente-mono); }
.cert-nota { font-size: var(--t-32); font-weight: var(--peso-fuerte); color: var(--acento); }
.nota-grande { font-size: var(--t-32); font-weight: var(--peso-fuerte); margin: var(--e-8) 0 var(--e-16); }
.nota-grande[data-aprobado="1"] { color: var(--ok); }
.nota-grande[data-aprobado="0"] { color: var(--alarma); }
.fallos { list-style: none; margin: 0 0 var(--e-16); padding: 0; display: grid; gap: var(--e-8); }
.fallos li { border-left: var(--linea-gruesa) solid var(--alarma); background: var(--alarma-suave); border-radius: var(--radio-4); padding: var(--e-8) var(--e-16); }
.fallos .correcta { color: var(--ok); font-weight: var(--peso-medio); }
.test-progreso { display: flex; gap: var(--e-4); margin-bottom: var(--e-16); }
.test-progreso span { flex: 1; height: var(--alto-avance); background: var(--borde); border-radius: var(--radio-redondo); }
.test-progreso span[data-estado="hecha"], .test-progreso span[data-estado="actual"] { background: var(--acento); }
.texto-libre textarea { width: 100%; font: inherit; border: var(--linea) solid var(--borde); border-radius: var(--radio-4); padding: var(--e-12); min-height: var(--e-64); }
.texto-marcado { background: var(--fondo-2); border-radius: var(--radio-8); padding: var(--e-12) var(--e-16); white-space: pre-wrap; overflow-wrap: anywhere; }
.texto-marcado mark { background: var(--alarma-suave); color: var(--alarma); font-weight: var(--peso-medio); }
.marcas { list-style: none; padding: 0; margin: var(--e-12) 0; display: grid; gap: var(--e-8); }
.marca-mal { background: var(--alarma-suave); border-left: var(--linea-gruesa) solid var(--alarma); padding: var(--e-8) var(--e-12); border-radius: var(--radio-4); }
.marca-ok { background: var(--ok-suave); border-left: var(--linea-gruesa) solid var(--ok); padding: var(--e-8) var(--e-12); border-radius: var(--radio-4); }
.arbol-turno { font-size: var(--t-12); color: var(--texto-2); text-transform: uppercase; letter-spacing: var(--espaciado-letra); margin: 0 0 var(--e-8); }
.final { border-radius: var(--radio-8); padding: var(--e-16); margin-bottom: var(--e-16); }
.final-bueno { background: var(--ok-suave); }
.final-malo { background: var(--alarma-suave); }
.revision { list-style: none; padding: 0; margin: 0 0 var(--e-16); display: grid; gap: var(--e-8); }
.revision li { border-left: var(--linea-gruesa) solid var(--borde); padding: var(--e-8) var(--e-12); }
.revision li[data-bueno="1"] { border-color: var(--ok); }
.revision li[data-bueno="0"] { border-color: var(--alarma); }
.revision-turno, .revision-nota { font-size: var(--t-12); color: var(--texto-2); }
.opcion-mensajes { display: grid; gap: var(--e-4); }
.opcion-mensajes span { display: inline-block; background: var(--acento); color: var(--blanco); padding: var(--e-4) var(--e-12); border-radius: var(--radio-16); justify-self: start; }
.ej-titulo { margin-bottom: var(--e-8); }
.ej-enunciado { font-weight: var(--peso-medio); font-size: var(--t-16); }
.puntos-chip { display: inline-block; background: var(--acento-suave); color: var(--acento); font-size: var(--t-12); padding: 0 var(--e-8); border-radius: var(--radio-16); margin-left: var(--e-8); }
@media print { .barra-superior, .menu-lateral, .no-print { display: none !important; } }

/* ── panel: bloques apilados, formularios en fila, listas compactas ───────── */
.bloques { display: grid; gap: var(--e-16); }
.bloques > h2 { margin: var(--e-8) 0 0; }
.acciones.izquierda-todo { justify-content: flex-start; margin-top: 0; }
.acciones form { display: contents; }
.fila-campos { display: flex; flex-wrap: wrap; gap: var(--e-12) var(--e-16); align-items: flex-end; margin-bottom: var(--e-16); }
.fila-campos .campo { margin-bottom: 0; min-width: var(--ancho-tarjeta-min); flex: 1 1 auto; }
.fila-campos .campo.ancho { flex-basis: 100%; }
.fila-campos .btn, .fila-campos .chip, .fila-campos .suave { margin-bottom: var(--e-8); }
input.num { width: calc(var(--e-64) + var(--e-24)); font: inherit; color: var(--texto); border: var(--linea) solid var(--borde);
  border-radius: var(--radio-4); padding: var(--e-4) var(--e-8); min-height: var(--alto-campo); text-align: right; }
.tabla input { font: inherit; color: var(--texto); border: var(--linea) solid var(--borde); border-radius: var(--radio-4);
  padding: var(--e-4) var(--e-8); min-height: var(--alto-campo); max-width: 100%; }
.tabla input.incidencias { min-width: var(--ancho-tarjeta-min); }
.tabla tr.peligro td { background: var(--alarma-suave); }
.tabla .baja { color: var(--alarma); font-weight: var(--peso-medio); }
.btn-enlace { background: none; border: 0; padding: 0; font: inherit; color: var(--acento); cursor: pointer; text-decoration: underline; }
ul.compacta { margin: 0; padding-left: var(--e-16); display: grid; gap: var(--e-4); font-size: var(--t-14); }
dl.pares { display: grid; grid-template-columns: auto 1fr; gap: var(--e-4) var(--e-16); margin: 0 0 var(--e-16); font-size: var(--t-14); }
dl.pares dt { color: var(--texto-2); }
dl.pares dd { margin: 0; }
.tarjeta.limites { border-left: var(--linea-gruesa) solid var(--alarma); }
.texto-alarma { color: var(--alarma); font-weight: var(--peso-medio); }
.tarjeta h3 { margin: 0 0 var(--e-8); font-size: var(--t-14); color: var(--texto-2); text-transform: uppercase; letter-spacing: var(--espaciado-letra); }

/* ── captación ─────────────────────────────────────────────── */
.prospecto-cabecera { display: flex; justify-content: space-between; gap: var(--e-16); align-items: flex-start; flex-wrap: wrap; margin-bottom: var(--e-16); }
.prospecto-cabecera h2 { margin: 0 0 var(--e-4); }
.huecos { margin-bottom: var(--e-16); }
.huecos > div { background: var(--fondo-2); border-radius: var(--radio-8); padding: var(--e-12) var(--e-16); font-size: var(--t-14); }
.huecos > div > .suave { display: block; font-size: var(--t-12); text-transform: uppercase; letter-spacing: var(--espaciado-letra); margin-bottom: var(--e-8); }
.huecos p { margin: 0; }
.enriquecido p { margin: 0 0 var(--e-4); }
.enriquecido .suave { text-transform: none; letter-spacing: 0; display: inline; margin: 0 var(--e-4) 0 0; font-size: var(--t-14); }
.enriquecer .campo { margin-bottom: var(--e-8); }

/* ── copiloto: tres columnas en escritorio, apiladas en móvil ─────── */
.copiloto { display: grid; gap: var(--e-16); grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) minmax(0, 1.4fr); align-items: start; }
@media (max-width: 1000px) { .copiloto { grid-template-columns: 1fr; } }
.copiloto .columna.tarjeta > h2:first-child { margin-bottom: var(--e-8); }
.lista-fans { list-style: none; padding: 0; margin: 0 0 var(--e-16); display: grid; }
.lista-fans li { display: flex; justify-content: space-between; align-items: center; min-height: var(--alto-tocable); border-bottom: var(--linea) solid var(--borde); }
.cabecera-fan { margin-bottom: var(--e-16); }
.cabecera-fan h2 { margin-bottom: var(--e-4); }
.cabecera-fan p { margin: 0 0 var(--e-4); }
.hilo { max-height: calc(var(--e-64) * 5); overflow: auto; margin: var(--e-16) 0; }
.burbuja-ella { align-self: flex-end; background: var(--acento); color: var(--blanco); }
.chips { display: flex; flex-wrap: wrap; gap: var(--e-8); margin-bottom: var(--e-16); }
.chip-fase { font: inherit; font-size: var(--t-14); border: var(--linea) solid var(--borde); background: var(--superficie); color: var(--texto-2);
  border-radius: var(--radio-16); padding: var(--e-4) var(--e-12); min-height: var(--alto-tocable); cursor: pointer; }
.chip-fase.activa { background: var(--acento); border-color: var(--acento); color: var(--blanco); }
.sugerencia { background: var(--fondo-2); box-shadow: none; }
.sugerencia p { white-space: pre-line; }
.sugerencia textarea { width: 100%; font: inherit; border: var(--linea) solid var(--borde); border-radius: var(--radio-4); padding: var(--e-8); margin: var(--e-8) 0; }
.sugerencia .acciones { margin-top: var(--e-8); justify-content: flex-start; }
.riesgo h3 { color: var(--alarma); text-transform: none; letter-spacing: 0; font-size: var(--t-16); }
.riesgo ol { padding-left: var(--e-16); }
.cita { background: var(--superficie); border-left: var(--linea-gruesa) solid var(--acento); padding: var(--e-8) var(--e-12); border-radius: var(--radio-4); white-space: pre-line; }
.descartadas p { margin: 0; font-size: var(--t-12); }
.examen-principal { min-width: 0; }
.examen-panel { position: sticky; top: calc(var(--alto-barra) + var(--e-16)); }
.recorrido .paso-t { min-width: 0; overflow-wrap: anywhere; }
/* Un hijo de rejilla no puede empujar la página: la tabla se desplaza dentro de su tarjeta */
.bloques > *, .rejilla > *, .rejilla-2 > *, .rejilla-3 > *, .copiloto > * { min-width: 0; }

/* ── el submenú de Formación: se despliega al entrar en la sección ─────────── */
/* La fila de Formación cuando se puede plegar: se ve igual que un enlace, pero es una
   etiqueta de una casilla escondida. Sin JavaScript de por medio. */
.menu-lateral .fila-plegable { display: flex; align-items: center; gap: var(--e-12);
  padding: 0 var(--e-16); height: var(--alto-campo); border-radius: var(--radio-8); color: var(--texto);
  font-weight: var(--peso-medio); cursor: pointer; user-select: none; }
.menu-lateral .fila-plegable.activo { background: var(--acento-suave); color: var(--acento); }
.menu-lateral .fila-plegable .flecha { width: var(--e-16); height: var(--e-16); flex: 0 0 var(--e-16);
  margin-left: auto; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round;
  stroke-linejoin: round; transition: transform var(--transicion); }
.menu-lateral .submenu { margin: var(--e-4) 0 var(--e-8) var(--e-24); border-left: var(--linea) solid var(--borde); padding-left: var(--e-8); }
.menu-lateral .submenu a { min-height: var(--alto-tocable); font-size: var(--t-14); font-weight: var(--peso-normal); padding: var(--e-4) var(--e-12); }
.menu-lateral .submenu a.activo { font-weight: var(--peso-medio); }
.menu-lateral .submenu .icono { width: var(--e-16); height: var(--e-16); flex-basis: var(--e-16); }
.menu-lateral .submenu .aparte { margin: var(--e-12) var(--e-12) var(--e-4); }
/* ── la subida a la bóveda ─────────────────────────────────────── */
.subidas { list-style: none; padding: 0; margin: var(--e-16) 0 0; display: grid; gap: var(--e-12); }
.subida-fila { display: grid; gap: var(--e-4); }
.subida-fila .nombre { font-size: var(--t-14); overflow-wrap: anywhere; }
.subida-fila.hecha .avance i { background: var(--ok); }
.subida-fila.mal .avance i { background: var(--alarma); }
/* ── el editor: la tira de tramos verde / ámbar / rojo ─────────────── */
.tramos { display: flex; gap: var(--e-4); height: var(--e-16); margin: var(--e-12) 0; }
.tramo { display: block; border-radius: var(--radio-4); background: var(--borde); min-width: var(--e-4); }
.tramo.verde { background: var(--ok); }
.tramo.ambar { background: var(--aviso); }
.tramo.rojo { background: var(--alarma); }
/* ── la petición a medida en el copiloto ─────────────────── */
.peticion-caja { background: var(--fondo-2); border-radius: var(--radio-8); padding: var(--e-12) var(--e-16); margin-bottom: var(--e-16); }
.peticion-caja summary { cursor: pointer; font-weight: var(--peso-medio); }
.peticion-caja .fila-campos { margin-top: var(--e-12); }

/* ── la sala de agentes (docs/35): lo que rodea al lienzo sigue esta hoja; la paleta de píxeles es del lienzo ── */
.sala-cab { display: flex; flex-wrap: wrap; gap: var(--e-16); align-items: center; margin-bottom: var(--e-16); }
.sala-cab .cifra-sala { display: inline-flex; gap: var(--e-8); align-items: baseline; }
.sala-cab .cifra-sala strong { font-size: var(--t-24); }
.sala-marco { display: grid; grid-template-columns: minmax(0, 1fr) var(--ancho-menu); gap: var(--e-16); align-items: start; }
@media (max-width: 900px) { .sala-marco { grid-template-columns: 1fr; } }
.sala-lienzo-caja { position: relative; }
.sala-lienzo { width: 100%; image-rendering: pixelated; image-rendering: crisp-edges; border-radius: var(--radio-8); box-shadow: var(--sombra); background: var(--fondo-2); cursor: grab; display: block; touch-action: none; }
.sala-lienzo:active { cursor: grabbing; }
.sala-mandos { position: absolute; top: var(--e-8); left: var(--e-8); display: flex; gap: var(--e-4); }
.sala-mandos .btn { padding: var(--e-4) var(--e-12); }
.sala-lateral h2 { margin-top: 0; }
.sala-lateral .estado-grande { font-size: var(--t-14); }
.sala-lateral ul.ultimas { list-style: none; padding: 0; margin: var(--e-8) 0 0; font-size: var(--t-12); color: var(--texto-2); }
.sala-lateral ul.ultimas li { padding: var(--e-4) 0; border-top: var(--linea) solid var(--fondo-2); }
.sala-lateral ul.ultimas li b { color: var(--texto); font-weight: var(--peso-medio); }
.sala-leyenda { display: flex; flex-wrap: wrap; gap: var(--e-8) var(--e-16); font-size: var(--t-12); color: var(--texto-2); margin-top: var(--e-8); }
.sala-leyenda i { display: inline-block; width: var(--e-12); height: var(--e-12); border-radius: var(--radio-4); margin-right: var(--e-4); vertical-align: middle; }
.tabla th[data-orden] { cursor: pointer; user-select: none; }
.tabla th[data-orden]:hover { text-decoration: underline; }
.sala-acciones { display: flex; gap: var(--e-8); flex-wrap: wrap; margin-top: var(--e-16); }
.sala-aviso { margin-top: var(--e-8); font-size: var(--t-12); }

/* ── el director: la charla ── */
.charla { display: flex; flex-direction: column; gap: var(--e-8); max-height: var(--alto-charla); overflow-y: auto; padding: var(--e-8) 0; }
.charla .dicho { display: flex; }
.charla .dicho.mio { justify-content: flex-end; }
.charla .dicho span { max-width: 80%; padding: var(--e-8) var(--e-12); border-radius: var(--radio-8); background: var(--fondo-2); white-space: pre-wrap; }
.charla .dicho.mio span { background: var(--acento-suave); color: var(--acento); }