/* Pantalla de evaluación. Sólo tokens: ningún color literal fuera de tokens.css. */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 var(--sans);
}

/* El salto al contenido vive con el resto de reglas de accesibilidad, al final de
 * esta hoja. Tenerlo aquí además duplicaba la definición y la de abajo ganaba por
 * orden de cascada: dos definiciones de lo mismo es cómo se cambia una y no la otra. */

/* Foco visible SIEMPRE. Quitarlo es el fallo de accesibilidad más común y más caro. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

.env { max-width: 1080px; margin: 0 auto; padding: 0 20px 72px; }

header.principal {
  background: var(--navy); color: var(--navy-ink);
  padding: 18px 0; margin-bottom: 24px;
}
/* `.env` lleva 72 px de relleno inferior para separar el contenido del pie. La cabecera
   reutiliza esa clase por el ancho y el centrado, y heredaba también ese hueco: una banda
   azul enorme y vacía bajo el título. Se anula aquí y sólo aquí. */
header.principal .env {
  display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center;
  padding-bottom: 0;
}
header.principal h1 { font-size: 1.15rem; margin: 0; font-weight: 620; }
header.principal .cod { font-family: var(--mono); opacity: .85; font-size: .9rem; }

/* Lo accionable, junto y a la derecha. Sin esto, al añadir el conmutador de rol el
   desplegable y su botón se separaban en dos líneas y parecían cosas distintas. */
header.principal .en-linea { margin-left: auto; display: flex; align-items: center; gap: 6px; }
header.principal .en-linea + .en-linea { margin-left: 0; }
header.principal select {
  padding: .3rem .5rem; font: inherit; font-size: .85rem; border-radius: var(--r);
  border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .1);
  color: var(--navy-ink); max-width: 14rem;
}
header.principal .btn-ghost {
  padding: .3rem .6rem; font-size: .85rem; color: var(--navy-ink);
  border-color: rgba(255, 255, 255, .35);
}
header.principal .btn-ghost:hover { background: rgba(255, 255, 255, .12); }

.aviso-dev {
  background: var(--warn-soft); color: var(--warn);
  border-bottom: 2px solid var(--warn);
  padding: 8px 0; font-size: .88rem; font-weight: 600;
}

/* Barra de cobertura: madurez y cobertura SIEMPRE juntas, nunca una sola cifra. */
.resumen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r-2); padding: 18px 20px; box-shadow: var(--shadow);
}
.resumen .et {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--ink-2); margin-bottom: 2px;
}
.resumen .val { font-size: 1.7rem; font-weight: 640; letter-spacing: -.02em; }
.resumen .val small { font-size: .85rem; font-weight: 400; color: var(--ink-2); }
.resumen .nota { grid-column: 1 / -1; margin: 4px 0 0; color: var(--ink-2); font-size: .9rem; }

.barra {
  height: 8px; border-radius: 99px; background: var(--nulo-soft);
  overflow: hidden; margin-top: 8px;
}
.barra > span { display: block; height: 100%; background: var(--accent); }

/* Navegación por función. Cada pestaña lleva su cobertura: se ve dónde queda trabajo
 * sin entrar en cada una. */
.funciones { margin: 22px 0 4px; }
.funciones ul { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.funciones a {
  display: flex; align-items: baseline; gap: 8px; text-decoration: none;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 8px 14px; color: var(--ink);
}
.funciones a:hover { background: var(--panel-2); border-color: var(--accent); }
.funciones a.actual {
  background: var(--accent-soft); border-color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.funciones .f-cod { font-family: var(--mono); font-weight: 680; }
.funciones .f-nom { font-size: .9rem; }
.funciones .f-cob { font-size: .82rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }

h2.fn {
  font-size: .8rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--ink-2); margin: 32px 0 10px;
  padding-bottom: 6px; border-bottom: 1px solid var(--line);
}

.control {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); margin-bottom: 10px; box-shadow: var(--shadow);
}
.control > summary {
  cursor: pointer; padding: 14px 18px; display: flex; gap: 12px;
  align-items: center; flex-wrap: wrap; list-style: none;
}
.control > summary::-webkit-details-marker { display: none; }
.control > summary::before {
  /* El alternativo vacio tras la barra evita que un lector anuncie
   * «triangulo pequeno apuntando a la derecha» antes de cada control. */
  content: "▸" / ""; color: var(--ink-3); font-size: .9rem; flex: none;
}
.control[open] > summary::before { content: "▾" / ""; }
.control > summary:hover { background: var(--panel-2); border-radius: var(--r); }

.cod-control { font-family: var(--mono); font-weight: 600; flex: none; }
.nombre { flex: 1 1 240px; }
.cuerpo { padding: 4px 18px 20px; border-top: 1px solid var(--line); }

/* Estado del control. «Pendiente» es neutro a propósito. */
.pin {
  font-size: .74rem; font-weight: 650; padding: 3px 9px; border-radius: 99px;
  border: 1px solid currentColor; flex: none;
}
.p-pend { color: var(--nulo); background: var(--nulo-soft); }
.p-ok   { color: var(--good); background: var(--good-soft); }
.p-med  { color: var(--warn); background: var(--warn-soft); }
.p-mal  { color: var(--crit); background: var(--crit-soft); }
.ig     { color: var(--ink-2); background: var(--bg-2); }

.ejes { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 22px; }
fieldset.eje { border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; margin: 0; }
fieldset.eje legend { font-weight: 640; padding: 0 6px; font-size: .95rem; }
fieldset.eje .obj {
  font-size: .8rem; color: var(--ink-2); font-weight: 400;
}

/* Los peldaños son etiquetas grandes y pulsables: el consultor lee el criterio y
 * marca, en vez de elegir un número suelto y decidir a ojo qué significa. */
.peldano { display: block; margin-bottom: 6px; }
.peldano input { position: absolute; opacity: 0; width: 0; height: 0; }
.peldano > span {
  display: block; padding: 9px 12px; border: 1px solid var(--line);
  border-radius: var(--r); cursor: pointer; font-size: .9rem;
}
.peldano > span .n {
  font-family: var(--mono); font-weight: 650; margin-right: 8px; color: var(--ink-2);
}
.peldano > span .t { color: var(--ink-2); display: block; margin-top: 3px; font-size: .86rem; }
.peldano input:checked + span {
  border-color: var(--accent); background: var(--accent-soft);
  box-shadow: inset 0 0 0 1px var(--accent);
}
.peldano input:focus-visible + span { outline: 3px solid var(--accent); outline-offset: 2px; }
.peldano.pendiente input:checked + span {
  border-color: var(--nulo); background: var(--nulo-soft); box-shadow: inset 0 0 0 1px var(--nulo);
}

.acciones { margin-top: 16px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
button.guardar {
  background: var(--accent); color: var(--accent-ink); border: 0;
  padding: 10px 20px; border-radius: var(--r); font: inherit; font-weight: 620; cursor: pointer;
}
button.guardar:hover { background: var(--accent-2); }
.ver { font-size: .82rem; color: var(--ink-3); font-family: var(--mono); }

.notas { margin-top: 14px; }
.notas label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 4px; }
.notas textarea {
  width: 100%; min-height: 62px; padding: 9px 11px; font: inherit; font-size: .92rem;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel-2); color: var(--ink); resize: vertical;
}
.notas .pista { font-size: .8rem; color: var(--ink-2); margin: 4px 0 0; }

.mensaje { padding: 12px 16px; border-radius: var(--r); margin-bottom: 18px; font-weight: 560; }
.m-ok { background: var(--good-soft); color: var(--good); border: 1px solid var(--good); }
.m-mal { background: var(--crit-soft); color: var(--crit); border: 1px solid var(--crit); }

/* Resultados */
.panel-r {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 20px; box-shadow: var(--shadow);
}
.nota-r { color: var(--ink-2); font-size: .92rem; margin: 12px 0 0; }
.tabla-desliza { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .94rem;
        background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--line); }
th { font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: 0; }
code { font-family: var(--mono); font-size: .9em; }

/* Tabla de registro: densa a propósito. Aquí no se lee criterio, se meten datos, y
 * cada píxel de alto de fila es una fila menos visible en pantalla. */
table.registro td { padding: 5px 8px; }
table.registro select {
  font: inherit; font-size: .88rem; padding: 4px 6px;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--panel-2); color: var(--ink); min-width: 15ch;
}
table.registro select:focus-visible { outline: 3px solid var(--accent); outline-offset: 1px; }
table.registro tbody tr:hover { background: var(--panel-2); }
table.registro code { font-weight: 600; }

/* Formulario de recomendación */
form.rec-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  padding: 18px 20px; box-shadow: var(--shadow); margin-bottom: 24px;
}
form.rec-form .campo { display: flex; flex-direction: column; }
form.rec-form label { font-size: .85rem; font-weight: 600; margin-bottom: 4px; }
form.rec-form input, form.rec-form textarea, form.rec-form select {
  font: inherit; padding: 8px 10px; border: 1px solid var(--line);
  border-radius: var(--r); background: var(--panel-2); color: var(--ink);
}
form.rec-form textarea { resize: vertical; }
form.rec-form .pista { font-size: .8rem; color: var(--ink-2); margin: 5px 0 0; }
form.rec-form .acciones { grid-column: 1 / -1; margin: 0; }
.pista { font-size: .82rem; color: var(--ink-2); }
button.borrar {
  font: inherit; font-size: .84rem; padding: 5px 12px; cursor: pointer;
  background: transparent; color: var(--crit);
  border: 1px solid var(--crit); border-radius: var(--r);
}
button.borrar:hover { background: var(--crit-soft); }

/* Radar. Colores por token: el gráfico se lee igual en claro y en oscuro. */
.radar-caja { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; }
svg.radar { width: 100%; max-width: 600px; height: auto; }
.rej-malla { fill: none; stroke: var(--line); stroke-width: 1; }
.rej-eje   { stroke: var(--line); stroke-width: 1; }
.rej-num   { fill: var(--ink-3); font-size: 11px; text-anchor: middle; font-family: var(--mono); }
.rej-et    { fill: var(--ink); font-size: 14px; font-weight: 650; text-anchor: middle; }
.rej-cob   { fill: var(--ink-2); font-size: 11px; text-anchor: middle; }
.rej-objetivo { fill: var(--nulo-soft); stroke: var(--nulo); stroke-width: 1.5;
                stroke-dasharray: 5 4; fill-opacity: .55; }
.rej-actual   { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 2.5;
                fill-opacity: .65; }
.rej-punto       { fill: var(--accent); }
/* Hueco = poca cobertura. Un punto solido afirmaria una confianza que no hay. */
.rej-punto-hueco { fill: var(--panel); stroke: var(--accent); stroke-width: 2.5;
                   stroke-dasharray: 3 2; }
ul.leyenda { list-style: none; margin: 0; padding: 0; font-size: .88rem; color: var(--ink-2); }
ul.leyenda li { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
ul.leyenda span { width: 18px; height: 12px; border-radius: 3px; flex: none; }
.leyenda .m-actual   { background: var(--accent-soft); border: 2px solid var(--accent); }
.leyenda .m-objetivo { background: var(--nulo-soft);   border: 2px dashed var(--nulo); }
.leyenda .m-hueco    { background: var(--panel);       border: 2px dashed var(--accent);
                       border-radius: 50%; width: 12px; }

/* Barras del reparto por clase */
.barras { display: flex; flex-direction: column; gap: 8px; }
.barra-fila { display: flex; align-items: center; gap: 12px; }
.b-et { width: 14ch; font-size: .9rem; }
.b-track { flex: 1; height: 14px; background: var(--nulo-soft); border-radius: 99px; overflow: hidden; }
.b-track > span { display: block; height: 100%; }
.b-num { width: 4ch; text-align: right; font-variant-numeric: tabular-nums; font-size: .9rem; }
.b-inm { background: var(--crit); } .b-pro { background: var(--warn); }
.b-pla { background: var(--accent); } .b-dif { background: var(--good); }
.b-sin { background: var(--nulo); }

form.capacidad {
  display: flex; gap: 12px; align-items: end; flex-wrap: wrap;
  margin: 0 0 16px; padding: 14px 16px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
}
form.capacidad label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: 4px; }
form.capacidad input[type=number] {
  padding: 8px 10px; font: inherit; width: 8ch;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--panel-2); color: var(--ink);
}

footer.pie {
  margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line);
  color: var(--ink-2); font-size: .86rem;
}

@media (prefers-reduced-motion: no-preference) {
  .control { transition: box-shadow .15s ease; }
}

/* ---------------------------------------------------- alta y ficha de control */

/* Formulario de alta. Ancho limitado a propósito: cada campo aquí es una decisión,
   no un trámite, y una línea de 200 caracteres se lee mal. */
.alta { max-width: 46rem; }
.campo {
  border: 1px solid var(--line); border-radius: var(--r); padding: 1rem 1.1rem;
  margin: 0 0 1.1rem; background: var(--panel);
}
.campo legend { font-weight: 600; padding: 0 .4rem; }
.campo input:not([type=radio]):not([type=hidden]), .campo select, .campo textarea {
  width: 100%; padding: .5rem .6rem; font: inherit; color: var(--ink);
  background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--r);
}
.campo textarea { resize: vertical; }
.ejes-min { display: flex; gap: 1rem; margin: .4rem 0 .8rem; }
.ejes-min label { display: flex; align-items: center; gap: .4rem; font-weight: 600; }
.ejes-min select { width: auto; }

/* Recorrido de controles. El ordinal es lo que más pesa visualmente en la barra:
   es lo que dice cuánto queda, que es la pregunta real al evaluar 106 controles. */
.paso {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  padding: .7rem .9rem; margin: 0 0 1rem;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--panel);
}
.paso .ord { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.paso .ord strong { color: var(--accent); }
.paso a { font-weight: 600; text-decoration: none; padding: .3rem .5rem; border-radius: var(--r); }
.paso a:hover { background: var(--panel-2); }
.paso .inerte { opacity: .35; padding: .3rem .5rem; }
.barra-paso { flex: 1 1 8rem; min-width: 6rem; }

.ficha-cab { margin: 0 0 1.2rem; }
.ficha-cab .ruta { color: var(--ink-2); font-size: .9rem; margin: 0 0 .2rem; }
.ficha-cab .ruta .sep { opacity: .5; margin: 0 .3rem; }
.ficha-cab .desc { margin: .2rem 0 .8rem; max-width: 60rem; }
.resumen-ficha { grid-template-columns: repeat(4, minmax(6rem, 1fr)); }
.resumen-ficha .cls { font-size: 1rem; }

/* Ejemplos oficiales del NIST. Estaban cargados desde el primer día y no se veían en
   ninguna pantalla. Van con su fuente a la vista: son catálogo, no una observación
   sobre este cliente. */
.ejemplos {
  border: 1px solid var(--line); border-left: 3px solid var(--accent);
  border-radius: var(--r); padding: .8rem 1rem; margin: 0 0 1.2rem; background: var(--panel);
}
.ejemplos summary { font-weight: 600; cursor: pointer; }
.ejemplos ul { margin: .7rem 0 .4rem; padding-left: 1.2rem; }
.ejemplos li { margin: 0 0 .6rem; }
.ejemplos .fuente { display: block; font-size: .8rem; color: var(--ink-2); margin-top: .2rem; }

.eje legend .obj select { width: auto; padding: .1rem .3rem; font: inherit; }
a.secundario {
  display: inline-block; padding: .45rem .8rem; border: 1px solid var(--line);
  border-radius: var(--r); text-decoration: none; font-weight: 600;
}
a.secundario:hover { background: var(--panel); }

/* ------------------------------------------------------------------- historial */

.filtros {
  display: flex; align-items: end; gap: .8rem; flex-wrap: wrap;
  padding: .7rem .9rem; margin: 0 0 1rem;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--panel);
}
.filtros label { display: flex; flex-direction: column; gap: .2rem; font-size: .85rem; color: var(--ink-2); }
.filtros select, .filtros input {
  padding: .4rem .5rem; font: inherit; color: var(--ink);
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r);
}

/* Separador por día. Sin esto, trescientas filas seguidas se leen como una mancha y
   se pierde lo único que ordena un historial: cuándo pasó cada cosa. */
tr.dia th {
  background: var(--panel-2); color: var(--ink-2);
  font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: .5rem .75rem;
}
td.hora { font-family: var(--mono); font-size: .85rem; color: var(--ink-2); white-space: nowrap; }

/* El botón de restaurar vive dentro de la celda: un formulario por fila, sin que la
   tabla se rompa en bloques. */
form.en-linea { display: inline; margin: 0; }
form.en-linea .btn-ghost { padding: .25rem .55rem; font-size: .8rem; }

/* --------------------------------------------------------------- pantalla de entrada */

/* El campo del correo es lo único que se teclea en toda la pantalla, así que ocupa
   como tal. Se limita el ancho porque un campo de 800 px invita a pensar que cabe algo
   más largo que un correo. */
.entrada-form { margin: 1.2rem 0 0; }
.entrada-form input {
  width: 100%; max-width: 26rem; padding: .6rem .7rem; font: inherit; color: var(--ink);
  background: var(--panel-2); border: 1px solid var(--line-2); border-radius: var(--r);
}
.entrada-form .pista { margin: .4rem 0 0; max-width: 34rem; }
.entrada-form .acciones { margin-top: 1rem; }

/* ------------------------------------------------------ pestañas de un análisis */

.pestanas { margin: 0 0 1.4rem; border-bottom: 2px solid var(--line); }
.pestanas ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: .15rem; align-items: flex-end;
}
.pestanas a, .pestanas .pendiente {
  display: block; padding: .55rem .9rem; font-size: .92rem;
  border: 1px solid transparent; border-bottom: none;
  border-radius: var(--r) var(--r) 0 0;
}
.pestanas a { color: var(--ink-2); text-decoration: none; }
.pestanas a:hover { background: var(--panel-2); color: var(--ink); }

/* La actual, marcada por DOS vías: fondo y borde. El color solo no vale —hay quien no
   lo distingue— y en una fila de siete la negrita sola se pierde. `aria-current` hace
   el resto para quien no ve la pantalla. */
.pestanas a.actual {
  background: var(--panel); color: var(--ink); font-weight: 640;
  border-color: var(--line); border-bottom: 2px solid var(--panel);
  margin-bottom: -2px;
}

/* Lo que aún no existe: se ve, no se pulsa y dice por qué. Esconderlo haría creer que
   se decidió no tenerlo; enseñarlo como enlace que falla sería peor. */
.pestanas .pendiente { color: var(--ink-3); cursor: default; font-style: italic; }
.pestanas .pendiente::after { content: " · pendiente"; font-size: .8em; font-style: normal; }

/* ------------------------------------------- trabajando dentro de un cliente (MSSP) */

/* Deliberadamente llamativa y pegada arriba. Esta pantalla es idéntica para el cliente
   y para el consultor que ha entrado en él, y quien lleva cinco cuentas necesita ver de
   un vistazo en cuál está puntuando: el error no se detecta hasta que alguien lee el
   informe, y para entonces ya se ha entregado. */
.banda-cliente {
  background: var(--acc-soft, var(--panel-2));
  border-bottom: 3px solid var(--acc, var(--line-2));
  padding: .5rem 0;
}
.banda-cliente .env {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; font-size: .9rem;
}

/* --------------------------------------------------- cabeceras que ordenan y páginas */

/* La cabecera entera es el objetivo del puntero, no sólo el texto: un enlace de 60 px
   dentro de una celda de 160 px hace fallar el clic y parece que la tabla no responde. */
th[aria-sort] { padding: 0; }
th[aria-sort] > a {
  display: block; padding: .55rem .75rem; color: inherit; text-decoration: none;
  font: inherit;
}
th[aria-sort] > a:hover { background: var(--panel-2); text-decoration: underline; }
/* La columna por la que se está ordenando, marcada además del signo: el color solo no
   vale —hay quien no lo distingue— y la flecha sola se pierde entre el texto. */
th[aria-sort="ascending"] > a, th[aria-sort="descending"] > a {
  background: var(--panel-2); font-weight: 640;
}

.paginacion {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  flex-wrap: wrap; margin: .8rem 0 0;
}
.paginacion .cuenta { margin: 0; color: var(--ink-2); font-size: .9rem; }
.paginacion .saltos { margin: 0; display: flex; gap: .4rem; align-items: center; }
.paginacion .pag {
  padding: .3rem .6rem; border: 1px solid var(--line-2); border-radius: var(--r);
  color: var(--ink); text-decoration: none; font-size: .85rem;
}
.paginacion .pag:hover { background: var(--panel-2); }
/* El salto imposible NO es un enlace: se ve que está ahí y el teclado no se detiene en
   él. Un enlace que no lleva a ninguna parte es peor que uno ausente. */
.paginacion .pag-no {
  padding: .3rem .6rem; border: 1px dashed var(--line-2); border-radius: var(--r);
  color: var(--ink-3); font-size: .85rem;
}
.paginacion .pag-actual { padding: 0 .5rem; color: var(--ink-2); font-size: .85rem; }

/* ------------------------------------------------- rejilla de análisis del cliente */

/* Los enlaces por fila, sin que la fila se parta en dos líneas cada vez que la
   ventana se estrecha un poco. */
td.acciones-fila { white-space: nowrap; }
td.acciones-fila .btn-ghost { padding: .25rem .55rem; font-size: .8rem; }
td.acciones-fila .btn-ghost + .btn-ghost { margin-left: .35rem; }

/* La rejilla vacía. La tabla se pinta igual —con sus cabeceras— para que la primera
   vez que alguien entra vea la herramienta y no un mensaje en su lugar. */
tr.vacia td {
  padding: 2rem 1rem; text-align: center; color: var(--ink-2);
  background: var(--panel-2);
}

/* El botón de crear cuando la licencia no deja. Se queda a la vista, apagado y con el
   motivo al lado: escondido obligaría a suponer, y la suposición habitual es que la
   herramienta se ha roto.

   El gris cumple 4.5:1 sobre el panel — un «deshabilitado» ilegible es peor que uno
   ausente, porque parece que hay algo escrito que no se puede leer. */
.btn.deshabilitado {
  background: var(--panel-2); color: var(--ink-3);
  border: 1px dashed var(--line-2); cursor: not-allowed;
}

/* ======================================================== accesibilidad · WCAG AA
 *
 * Destino: Administración Pública, ENS, sanidad y banca. En España eso significa
 * EN 301 549 por el Real Decreto 1112/2018, que exige AA. Lo de aquí no es pulido:
 * es requisito de contrato.
 */

/* Sólo para lectores de pantalla. NO se usa `display:none` ni `visibility:hidden`:
 * ambos lo retiran también del árbol de accesibilidad, con lo que el texto deja de
 * existir para quien lo necesita. La técnica del recorte de 1px lo mantiene ahí. */
.sr {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; white-space: nowrap;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

/* Enlace de salto. Oculto hasta que recibe el foco, y entonces VISIBLE de verdad:
 * un salto que sigue invisible al enfocarlo no sirve a quien navega con teclado y ve
 * la pantalla —que es el caso más común—, sólo a quien usa lector. */
.saltar {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  padding: .7rem 1.1rem; font-weight: 600;
  background: var(--accent); color: var(--accent-ink);
  border-radius: 0 0 var(--r) 0; text-decoration: none;
}
.saltar:focus {
  left: 0;
  outline: 3px solid var(--ink); outline-offset: -3px;
}

/* Objetivo del salto: sin esto el foco llega a <main> pero el navegador no desplaza,
 * y el usuario cree que no ha pasado nada. */
main:focus { outline: none; }
main:target { scroll-margin-top: 1rem; }

/* Área táctil mínima. En una tabla densa, los enlaces de acción quedan de 14 px de
 * alto y fallan el objetivo de 24×24 del SC 2.5.8. Se agrandan sin cambiar el diseño
 * usando relleno, no tamaño de letra. */
td a, td button, .paso a { min-height: 24px; display: inline-flex; align-items: center; }

/* Quien ha pedido menos animación no debería recibir transiciones al enfocar. El
 * sistema ya lo declara en general; aquí se cubren los componentes propios. */
@media (prefers-reduced-motion: reduce) {
  .barra span, .rej-punto, .rej-punto-hueco { transition: none !important; }
}

/* Modo de alto contraste de Windows. Los fondos de color desaparecen y los estados
 * quedarían indistinguibles; el borde los preserva porque el sistema lo respeta. */
@media (forced-colors: active) {
  .pin, .mensaje, .peldano { border: 1px solid; }
  .barra span { background: Highlight; }
  :focus-visible { outline: 3px solid Highlight; }
}

/* ------------------------------------------------------------ pagina de error
 *
 * Un error crudo y sin formato se lee como «esto se ha roto», y en una herramienta
 * que le dice a un hospital si sus copias de seguridad funcionan, eso cuesta la
 * confianza entera. La pagina de error tiene que parecerse al producto tanto como
 * cualquier otra.
 *
 * El codigo va grande y en gris, no en rojo: es un dato, no una alarma. Lo que
 * importa es el titulo y lo que se puede hacer, en ese orden.
 */
.fallo { max-width: 40rem; border-left: 3px solid var(--crit); }
.fallo-cod {
  font-family: var(--mono); font-size: 2.6rem; line-height: 1;
  color: var(--ink-3); margin: 0 0 .3rem;
}
.fallo-det {
  background: var(--panel-2); border: 1px solid var(--line);
  border-radius: var(--r); padding: .7rem .9rem; margin: .6rem 0;
}
/* La referencia se selecciona entera al hacer doble clic: se va a dictar por
   telefono o a pegar en un correo, y partirla a mano es donde se equivoca. */
.fallo-ref code {
  font-size: 1.1rem; letter-spacing: .08em; user-select: all;
  background: var(--panel-2); padding: .2rem .45rem; border-radius: var(--r);
}
.fallo .acciones { margin-top: 1.2rem; }

/* ------------------------------------------------------- confirmar un borrado
 *
 * El unico paso irreversible de la herramienta. Sin confirmacion, un clic mal dado
 * borra el trabajo de una entrevista con el cliente, y no hay historial de
 * recomendaciones del que recuperarlo.
 */
.confirmar {
  border: 1px solid var(--crit); border-radius: var(--r);
  background: var(--crit-soft); padding: .8rem 1rem; margin: .6rem 0;
}
.confirmar p { margin: 0 0 .6rem; }
.confirmar .acciones { margin: 0; display: flex; gap: .6rem; align-items: center; }