/* ===========================================================================
   Plataforma Clínica — Servicio de Medicina del Estrés
   ===========================================================================
   Construido sobre `docs/diseno/plantilla-base.html` y `docs/diseno/guia-diseno.md`. Todo el color sale de
   variables en :root; ningún componente escribe un hex.

   Para cambiar la identidad entera: los valores del bloque PALETA, y sus
   equivalentes en los DOS bloques de modo oscuro.

   Los tres estados del tema (guía §3) están contemplados, pero la aplicación
   fija `data-theme="light"` en <html> (ver templates/base.html): se ve igual en
   toda máquina. Los tokens oscuros de abajo quedan listos y sin usar; cambiar
   ese atributo a "dark" los activa.
   =========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════
   1. PALETA  ←  ESTO ES LO ÚNICO QUE NECESITÁS TOCAR
   ═══════════════════════════════════════════════════════════════════════
   Regla del neutro: no uses gris puro (#888). Inclinalo levemente hacia el
   acento. Abajo los neutros tienen un sesgo frío verde-azulado; si tu acento
   fuera cálido, inclinalos hacia el cálido. Un gris "elegido" se nota.
*/
:root{
  /* --- MODO CLARO --- */
  --bg:#E7EAE9;          /* fondo de la página        */
  --surface:#F7F9F8;     /* fondo de tarjetas y tablas */
  --surface-2:#DFE4E3;   /* encabezados de tabla, zonas hundidas */
  --ink:#13181A;         /* texto principal            */
  --ink-2:#3A4447;       /* texto secundario / párrafos */
  --muted:#5E6A6B;       /* etiquetas, metadatos       */
  --line:#C4CCCB;        /* bordes suaves              */
  --line-strong:#9AA5A4; /* bordes estructurales       */

  --accent:#1F5C68;      /* EL acento: petróleo, la esfera de un tensiómetro */
  --alert:#A8332A;       /* semántico: peligro         */
  --ok:#2F6B45;          /* semántico: correcto        */

  /* Colores de categoría. NO decoran: codifican la escala de reactor del
     psicoescáner. Un paciente hiperreactivo se ve rojo porque ESTÁ
     clasificado como hiperreactivo. Ver DECISIONES.md, D-020. */
  --cat-calmo:#2F7F55;        /* Calmo               */
  --cat-leve:#8A8420;         /* Tenso leve          */
  --cat-moderado:#B5741C;     /* Tenso moderado      */
  --cat-hiper:#A8332A;        /* Tenso hiperreactivo */

  /* --- TIPOGRAFÍA --- */
  --display:"Barlow Condensed", "Arial Narrow", sans-serif;
  --body:"Barlow", "Helvetica Neue", Arial, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* --- ESCALA DE ESPACIADO --- (usá solo estos, no números sueltos) */
  --s1:6px; --s2:12px; --s3:18px; --s4:26px; --s5:40px; --s6:56px;
  --radius:0px;          /* 0 = técnico/sobrio · 4px = suave · 12px = amable */
  --maxw:1060px;
}

/* ── MODO OSCURO (1/2): sistema operativo en oscuro ──
   El guard :not([data-theme="light"]) hace que una elección explícita de
   modo claro le gane al sistema. Acá SOLO se redefinen tokens, nunca
   componentes: si escribís un color adentro de este bloque que no exista
   afuera, la página se rompe para quien tenga el tema sin marcar. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#121617; --surface:#1A1F21; --surface-2:#232A2C;
    --ink:#EAEEED; --ink-2:#C2CBCA; --muted:#8E9A99;
    --line:#2E3739; --line-strong:#475254;
    --accent:#63AEBD; --alert:#E0705F; --ok:#63B686;
    --cat-calmo:#5CB585; --cat-leve:#CDB44A;
    --cat-moderado:#DCA34A; --cat-hiper:#E0705F;
  }
}
/* ── MODO OSCURO (2/2): elección explícita del usuario ──
   Mismos valores. Se repiten a propósito para que el toggle gane
   en las dos direcciones. */
:root[data-theme="dark"]{
  --bg:#121617; --surface:#1A1F21; --surface-2:#232A2C;
  --ink:#EAEEED; --ink-2:#C2CBCA; --muted:#8E9A99;
  --line:#2E3739; --line-strong:#475254;
  --accent:#63AEBD; --alert:#E0705F; --ok:#63B686;
  --cat-calmo:#5CB585; --cat-leve:#CDB44A;
  --cat-moderado:#DCA34A; --cat-hiper:#E0705F;
}

/* ═══════════════════════════════════════════════════════════════════════
   2. BASE
   ═══════════════════════════════════════════════════════════════════════ */
*{box-sizing:border-box}
body{
  background:var(--bg);          /* explícito, nunca transparente */
  color:var(--ink);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  margin:0;
  padding:0 20px var(--s6);
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:var(--maxw);margin:0 auto}

/* Enlaces de contenido.
   Sin esta regla el navegador usa su azul y su violeta de "visitado", que es
   justo lo que no queremos en un listado de pacientes: el color de visitado
   delata a simple vista qué historias abrió quien usó esta máquina. El visitado
   se iguala al normal a propósito.
   La navegación (.nav a) y los botones (.btn) se pintan aparte, más abajo. */
a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:var(--line-strong)}
a:visited{color:var(--accent)}
a:hover{text-decoration-color:var(--accent)}
/* En la tabla el apellido es el dato, no un enlace decorado: se subraya recién
   al pasar por encima, para que la columna se lea como una columna. */
td a{color:var(--ink);font-weight:600;text-decoration:none}
td a:visited{color:var(--ink)}
td a:hover{color:var(--accent);text-decoration:underline;text-underline-offset:3px}

/* Foco visible: obligatorio para navegación por teclado */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}

/* ═══════════════════════════════════════════════════════════════════════
   3. TIPOGRAFÍA
   ═══════════════════════════════════════════════════════════════════════ */
h1{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(40px,7vw,68px);  /* fluido: sin media queries de tamaño */
  line-height:.95;
  letter-spacing:-.01em;
  text-transform:uppercase;
  margin:0;
  text-wrap:balance;               /* evita títulos con una palabra huérfana */
}
h1 span{display:block;color:var(--accent)}

h2{
  font-family:var(--display);
  text-transform:uppercase;
  font-weight:600;
  font-size:clamp(24px,3.4vw,32px);
  margin:0;
  line-height:1.05;
}
h3{
  font-family:var(--display);
  text-transform:uppercase;
  font-weight:600;
  font-size:18px;
  letter-spacing:.04em;
  margin:0 0 var(--s1);
}
p{margin:0 0 var(--s2)}

/* Etiqueta pequeña en mono + mayúsculas + tracking.
   Es el recurso que más "diseño" aporta por línea de CSS escrita. */
.eyebrow{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin:0 0 10px;
}
.lede{
  font-size:18px;
  color:var(--ink-2);
  max-width:62ch;              /* ancho de lectura cómodo */
  margin:var(--s4) 0 0;
}
.lede em{font-style:italic;color:var(--ink)}

/* ═══════════════════════════════════════════════════════════════════════
   4. COMPONENTES
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 4.1 Cabecera con ficha técnica al costado ── */
.masthead{
  border-bottom:3px solid var(--ink);
  padding:var(--s6) 0 var(--s3);
  display:flex; flex-wrap:wrap;
  align-items:flex-end; justify-content:space-between;
  gap:var(--s4);
}
.plate{
  font-family:var(--mono);
  font-size:12px; line-height:1.9;
  color:var(--ink-2);
  border-left:1px solid var(--line-strong);
  padding-left:16px;
  font-variant-numeric:tabular-nums;   /* dígitos alineados en columna */
}
/* Cada fila es etiqueta ↔ valor. Sin esto el <b> y el <span> quedan pegados y
   se lee "SistemaHistoria clínica": el navegador no inventa un espacio que el
   HTML no tiene. */
.plate > div{display:flex;justify-content:space-between;gap:var(--s3)}
.plate b{color:var(--muted);font-weight:500;flex:0 0 auto}
.plate span{text-align:right}

/* ── 4.2 Título de sección con numeración ──
   Numerá SOLO si el orden significa algo. Si es una lista de temas
   independientes, el número miente y se nota. */
.block{margin-top:var(--s6)}
.block-head{
  display:flex; align-items:baseline; gap:14px;
  border-bottom:1px solid var(--line-strong);
  padding-bottom:8px;
  margin-bottom:var(--s4);
}
.block-head .num{
  font-family:var(--mono); font-size:12px;
  color:var(--muted); letter-spacing:.1em;
}

/* ── 4.3 Grilla de celdas pegadas (sin tarjetas flotantes) ──
   Borde compartido en vez de sombras: se lee como una tabla de
   instrumentos, no como un dashboard genérico. */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  border-top:1px solid var(--line);
  border-left:1px solid var(--line);
}
.grid > div{
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
  padding:var(--s3) var(--s3) 20px;
  background:var(--surface);
}
.grid .k{
  font-family:var(--mono); font-size:11px;
  color:var(--accent); letter-spacing:.12em;
  display:block; margin-bottom:10px;
}
.grid p{margin:0;font-size:14.5px;color:var(--ink-2)}

/* ── 4.4 Tabla ──
   El contenedor con overflow-x propio evita que la página entera
   se desplace de costado en el celular. */
.scroll{overflow-x:auto;border:1px solid var(--line-strong);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:760px;font-size:14.5px}
thead th{
  font-family:var(--display); text-transform:uppercase;
  letter-spacing:.06em; font-size:14px; font-weight:600;
  text-align:left; padding:11px 14px;
  background:var(--surface-2);
  border-bottom:2px solid var(--line-strong);
  white-space:nowrap;
}
tbody td{padding:13px 14px;border-bottom:1px solid var(--line);vertical-align:top;color:var(--ink-2)}
tbody tr:last-child td{border-bottom:none}
td.name{color:var(--ink);font-weight:600;white-space:nowrap}
/* Cuadradito de color: hereda --sw del propio <td>, así una sola clase
   sirve para todas las categorías. */
td.name i{
  display:inline-block; width:9px; height:9px;
  margin-right:9px; background:var(--sw,var(--accent));
  vertical-align:middle;
}
.num-cell{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13.5px;white-space:nowrap}

/* ── 4.5 Ficha de entrada (borde superior de color por categoría) ── */
.entry{
  border-top:2px solid var(--sw,var(--accent));
  border-bottom:1px solid var(--line);
  border-left:1px solid var(--line);
  border-right:1px solid var(--line);
  border-radius:var(--radius);
  background:var(--surface);
  padding:22px 24px 26px;
  margin-top:22px;
}
.entry-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:12px 18px;margin-bottom:var(--s3)}
.entry-head h3{
  font-size:26px; font-weight:700; margin:0;
  letter-spacing:.01em; color:var(--sw,var(--accent));
}
.tag{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.1em; text-transform:uppercase;
  color:var(--muted); border:1px solid var(--line-strong);
  padding:3px 8px; white-space:nowrap;
}
.tag.hot{color:var(--alert);border-color:var(--alert)}

/* Dos columnas: relato a la izquierda, datos duros a la derecha */
.entry-body{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:32px}
@media (max-width:760px){.entry-body{grid-template-columns:1fr;gap:var(--s4)}}

/* ── 4.6 Pasos numerados ── */
.steps{counter-reset:s;list-style:none;margin:0;padding:0}
.steps li{
  counter-increment:s; position:relative;
  padding-left:34px; margin-bottom:12px;
  font-size:15px; color:var(--ink-2);
}
.steps li::before{
  content:counter(s,decimal-leading-zero);   /* 01, 02, 03… */
  position:absolute; left:0; top:1px;
  font-family:var(--mono); font-size:12px;
  color:var(--sw,var(--accent)); font-weight:600;
}
.steps li b{color:var(--ink);font-weight:600}

/* ── 4.7 Lista de especificaciones (etiqueta ↔ valor) ── */
.spec{margin:0;font-size:14px}
.spec div{
  display:flex; justify-content:space-between; gap:14px;
  padding:8px 0; border-bottom:1px dotted var(--line-strong);
}
.spec div:first-child{border-top:1px solid var(--line-strong)}
.spec dt{
  font-family:var(--mono); font-size:11px;
  letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); flex:0 0 auto;
}
.spec dd{margin:0;text-align:right;color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}

/* ── 4.8 Aviso ──
   Línea superior + etiqueta, en vez de tarjeta redondeada con barrita
   lateral (ese patrón está muy visto). */
.warn{margin-top:var(--s3);border-top:1px solid var(--alert);padding-top:10px}
.warn p{margin:0;font-size:14px;color:var(--ink-2)}
.warn .lbl{
  font-family:var(--mono); font-size:10.5px;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--alert); display:block; margin-bottom:4px; font-weight:600;
}

/* ── 4.9 Bloque destacado ── */
.callout{border:2px solid var(--accent);border-radius:var(--radius);padding:24px 26px;background:var(--surface)}
.callout h3{font-size:22px;color:var(--accent);font-weight:700;margin:0 0 10px}
.callout ul{margin:0;padding-left:20px;color:var(--ink-2)}
.callout li{margin-bottom:7px}
.callout li b{color:var(--ink)}

/* ── 4.10 Lista de ítems con filete lateral ── */
.kit{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;list-style:none;padding:0;margin:0}
.kit li{border-left:2px solid var(--line-strong);padding:2px 0 2px 14px;font-size:14.5px;color:var(--ink-2)}
.kit li b{
  display:block; color:var(--ink);
  font-family:var(--display); text-transform:uppercase;
  font-size:16px; letter-spacing:.03em; font-weight:600;
}

/* ── 4.11 Pie ── */
footer{
  margin-top:var(--s6);
  border-top:1px solid var(--line-strong);
  padding-top:16px;
  font-family:var(--mono); font-size:11.5px; line-height:1.9;
  color:var(--muted);
}

/* ═══════════════════════════════════════════════════════════════════════
   8. AGREGADOS DE ESTA APLICACIÓN
   Lo que la plantilla no traía. Mismas reglas: sólo tokens, sin hex sueltos.
   ═══════════════════════════════════════════════════════════════════════ */

/* --- Navegación ------------------------------------------------------- */
.nav{
  border-bottom:1px solid var(--line-strong);
  background:var(--surface);
  margin:0 -20px var(--s5);
  padding:0 20px;
}
.nav-inner{
  max-width:var(--maxw);margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3);
  min-height:56px;
}
.nav .marca, .nav .marca:visited{
  font-family:var(--display);font-weight:700;text-transform:uppercase;
  letter-spacing:.02em;font-size:19px;color:var(--ink);text-decoration:none;
}
.nav a, .nav a:visited{color:var(--ink-2);text-decoration:none;font-size:14.5px}
.nav a:hover{color:var(--accent)}
.nav a[aria-current="page"]{color:var(--accent);font-weight:600}
.nav .derecha{margin-left:auto;display:flex;align-items:center;gap:var(--s3)}
.nav .quien{
  font-family:var(--mono);font-size:12px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.1em;
}

/* --- Botones ---------------------------------------------------------- */
/* Ojo con el `:visited` de acá arriba.
   `a:visited` pesa (0,1,1) —una pseudoclase cuenta como clase— y `.btn` pesa
   (0,1,0). O sea que el `:visited` le gana al botón: apenas alguien visitaba el
   enlace, el texto tomaba el color del acento y quedaba del mismo color que el
   fondo del botón. Un botón sólido, sin una letra visible, y sólo para quien ya
   había entrado una vez.
   Por eso cada variante repite su color en `:visited`. */
.btn, .btn:visited{
  font-family:var(--body);font-size:14.5px;font-weight:600;
  padding:9px 18px;border-radius:var(--radius);cursor:pointer;
  border:1px solid var(--accent);background:var(--accent);color:var(--bg);
  text-decoration:none;display:inline-block;line-height:1.3;
}
.btn:hover{filter:brightness(1.12)}
.btn.secundario, .btn.secundario:visited{background:transparent;color:var(--accent)}
.btn.discreto, .btn.discreto:visited{
  background:transparent;color:var(--ink-2);border-color:var(--line-strong);
}
.btn.discreto:hover{color:var(--accent);border-color:var(--accent);filter:none}
.acciones{display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center}

/* --- Formularios ------------------------------------------------------ */
.campo{display:grid;gap:5px;margin-bottom:var(--s3)}
.campo label{
  font-family:var(--mono);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted);
}
.campo input, .campo select, .campo textarea{
  font-family:var(--body);font-size:15px;
  background:var(--bg);color:var(--ink);
  border:1px solid var(--line-strong);border-radius:var(--radius);
  padding:9px 11px;width:100%;
}
.campo input:focus-visible, .campo select:focus-visible{
  outline:2px solid var(--accent);outline-offset:1px;
}
.buscador{display:flex;gap:var(--s2);align-items:flex-end;margin-bottom:var(--s4)}
.buscador .campo{margin:0;flex:1;max-width:420px}

/* --- Clasificación clínica -------------------------------------------- */
/* El color codifica la escala de reactor, no decora. Ver DECISIONES.md D-020. */
.clasif{
  font-family:var(--mono);font-size:11.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;
  border-top:2px solid var(--line-strong);padding-top:4px;display:inline-block;
}
/* Los nombres salen de `slugify` sobre el texto que ve el usuario:
   "Tenso leve" -> "tenso-leve". Tienen que coincidir exactamente. */
.clasif.calmo,               .clasif.muy-bueno{border-color:var(--cat-calmo);color:var(--cat-calmo)}
.clasif.tenso-leve,          .clasif.bueno    {border-color:var(--cat-leve);color:var(--cat-leve)}
.clasif.tenso-moderado,      .clasif.regular  {border-color:var(--cat-moderado);color:var(--cat-moderado)}
.clasif.tenso-hiperreactivo, .clasif.malo     {border-color:var(--cat-hiper);color:var(--cat-hiper)}
/* "Incompleto" y "Sin test" no son clasificaciones: son su ausencia. Van en
   neutro para que no compitan visualmente con las que sí informan algo. */
.clasif.sin-dato,
.clasif.incompleto,
.clasif.sin-test{color:var(--muted)}

/* --- Utilidades ------------------------------------------------------- */
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.vacio{
  border:1px dashed var(--line-strong);padding:var(--s5) var(--s4);
  text-align:center;color:var(--muted);font-size:15px;
}
.paginacion{
  display:flex;gap:var(--s3);align-items:center;justify-content:center;
  margin-top:var(--s4);font-family:var(--mono);font-size:13px;color:var(--muted);
}
.mensajes{margin-bottom:var(--s4);padding:0;list-style:none}
.mensajes li{
  border-top:2px solid var(--ok);padding:8px 0;font-size:14.5px;color:var(--ink-2);
}
.mensajes li.error{border-color:var(--alert)}

/* Los 50 ítems del ICV: dos columnas cuando entra, una cuando no. */
.items{display:grid;gap:var(--s2)}
/* La tercera columna crece con el control: las opciones del Jenkins son frases,
   y en 110px la respuesta elegida se leía cortada («No puedo»). */
.item-fila{
  display:grid;grid-template-columns:44px minmax(0,1fr) minmax(110px,auto);
  gap:var(--s3);align-items:center;
  border-bottom:1px solid var(--line);padding:7px 0;
}
.item-fila .n{
  font-family:var(--mono);font-size:12.5px;color:var(--muted);
  font-variant-numeric:tabular-nums;
}
.item-fila .t{font-size:14.5px;color:var(--ink-2)}
.item-fila select, .item-fila input, .tabla-carga input{
  font-family:var(--mono);font-size:14px;
  background:var(--bg);color:var(--ink);
  border:1px solid var(--line-strong);border-radius:var(--radius);padding:6px 8px;
}
.item-fila select{max-width:24rem}
/* La planilla del psicoescáner (D-049): una fila por toma, una columna por
   valor. Más angosta que la tabla general, que pide 760px para los listados. */
.tabla-carga table{min-width:420px}
.tabla-carga tbody td{padding:6px 14px;vertical-align:middle}
.tabla-carga input{width:96px;font-variant-numeric:tabular-nums}
@media (max-width:620px){
  .item-fila{grid-template-columns:34px minmax(0,1fr);row-gap:6px}
  .item-fila select, .item-fila input{grid-column:2}
  .entry-body{grid-template-columns:1fr!important}
}

/* ═══════════════════════════════════════════════════════════════════════
   9. MODO TOMA — el paciente responde en una tablet
   ═══════════════════════════════════════════════════════════════════════
   Otro usuario y otro contexto: no es el profesional leyendo una tabla de
   datos, es un paciente de 70 años que quizás nunca usó una tablet, con el
   dedo y a un brazo de distancia. Por eso todo crece y todo lo que no es la
   pregunta desaparece.

   La referencia es la pantalla del sistema anterior, que el servicio viene
   usando hace 13 años y los pacientes ya conocen: una pregunta, los diez
   valores en fila, y "No aplica" aparte. Se respeta esa forma a propósito.

   El mínimo de 44 px de lado para un objetivo táctil es la pauta WCAG 2.5.5;
   acá los botones son de 72, que es lo que pide un dedo sin apuntar. */

body.kiosco{padding-bottom:var(--s4)}
.wrap-toma{max-width:1100px;margin:0 auto}

.toma{
  min-height:100vh;
  display:flex;flex-direction:column;justify-content:center;
  gap:var(--s5);padding:var(--s4) 0;
}

/* ── Progreso ── */
.toma-progreso{display:flex;align-items:center;gap:var(--s3)}
.toma-cuenta{
  font-family:var(--mono);font-size:15px;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.toma-cuenta i{font-style:normal;opacity:.6}
.barra{flex:1;height:6px;background:var(--surface-2);border:1px solid var(--line)}
.barra-llena{height:100%;background:var(--accent)}

/* ── La pregunta ── */
.toma-pregunta{
  font-size:clamp(24px,3.4vw,38px);
  line-height:1.25;color:var(--ink);
  margin:0;text-wrap:balance;
}

/* Los extremos de la escala. Sin esto un 1-10 no dice hacia dónde crece. */
.toma-anclas{
  display:flex;justify-content:space-between;gap:var(--s4);
  font-size:clamp(15px,1.7vw,19px);color:var(--ink-2);
  border-top:1px solid var(--line);padding-top:var(--s2);
}
.toma-anclas span:last-child{text-align:right}
/* El punto medio, cuando tiene nombre (dos ítems del ICV). Con `space-between`
   y tres hijos queda solo en el centro, que es donde está el 5 de la escala. */
.toma-anclas .media{text-align:center}

/* ── Los valores ── */
.toma-valores{
  display:grid;grid-template-columns:repeat(10,1fr);gap:10px;margin:0;
}
.toma-valores .v{
  font-family:var(--mono);font-size:clamp(20px,2.4vw,28px);font-weight:500;
  min-height:72px;cursor:pointer;
  background:var(--surface);color:var(--ink);
  border:2px solid var(--line-strong);border-radius:var(--radius);
}
.toma-valores .v:hover{border-color:var(--accent);color:var(--accent)}
.toma-valores .v.elegido{background:var(--accent);border-color:var(--accent);color:var(--surface)}

/* ── Opciones de texto (Jenkins) ──
   Una escala 0-10 entra en una fila de diez cuadrados. Las opciones del Jenkins
   son frases de hasta cien caracteres —«Menos frecuentemente que el trabajo de
   la mayoría de las demás personas»— y en un cuadrado no entran: van una debajo
   de otra, a lo ancho, y con alineación a la izquierda para que se lean como
   texto y no como etiqueta. */
.toma-opciones{display:flex;flex-direction:column;gap:12px;margin:0}
.toma-opciones .v{
  font-family:var(--body);font-size:clamp(17px,1.9vw,22px);font-weight:500;
  line-height:1.35;text-align:left;
  min-height:72px;padding:var(--s3) var(--s4);cursor:pointer;
  background:var(--surface);color:var(--ink);
  border:2px solid var(--line-strong);border-radius:var(--radius);
}
.toma-opciones .v:hover{border-color:var(--accent);color:var(--accent)}
.toma-opciones .v.elegido{background:var(--accent);border-color:var(--accent);color:var(--surface)}

/* ── Pie: "no aplica" y volver ── */
.toma-pie{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.no-aplica{
  font-family:var(--body);font-size:clamp(16px,1.8vw,20px);font-weight:600;
  min-height:64px;padding:0 var(--s4);cursor:pointer;
  background:transparent;color:var(--ok);
  border:2px solid var(--ok);border-radius:var(--radius);
}
.no-aplica:hover{background:var(--ok);color:var(--surface)}
.no-aplica.elegido{background:var(--ok);color:var(--surface)}
.toma-atras, .toma-atras:visited{
  font-size:18px;color:var(--muted);text-decoration:none;
  min-height:44px;display:flex;align-items:center;
}
.toma-atras:hover{color:var(--accent)}

/* ── Avanzar ──
   Tocar una opción la marca y no avanza: avanzar lo decide el paciente (D-054).
   «Siguiente» va a la derecha, donde termina la lectura, y del tamaño de un
   dedo; «Anterior» queda chico a la izquierda, como hasta ahora. */
.toma-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);flex-wrap:wrap}
.toma-nav form{margin:0}
.btn.toma-siguiente, .btn.toma-siguiente:visited{
  font-size:clamp(18px,2vw,22px);min-height:64px;padding:0 var(--s5);
  display:inline-flex;align-items:center;
}

/* ── La consigna ──
   La primera pantalla de cada test. Es texto para leer, así que va en columna
   angosta y con letra grande, no a lo ancho de la tablet. */
.toma-consigna{
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  gap:var(--s4);max-width:760px;margin:0 auto;
}
.toma-consigna-texto{font-size:clamp(20px,2.6vw,28px);line-height:1.45;color:var(--ink)}
.toma-consigna-texto p{margin:0 0 var(--s3)}

/* En una tablet vertical diez columnas dejan botones de 30 px: se parten en
   dos filas de cinco, que siguen siendo del ancho de un dedo. */
@media (max-width:900px){
  .toma-valores{grid-template-columns:repeat(5,1fr)}
}

/* ── Pantalla final ── */
.toma-fin{
  min-height:100vh;display:flex;flex-direction:column;justify-content:center;
  gap:var(--s3);max-width:520px;margin:0 auto;text-align:center;
}
.toma-gracias{font-size:clamp(18px,2.2vw,24px);color:var(--ink-2);line-height:1.5}
.toma-salida{
  margin-top:var(--s6);border-top:1px solid var(--line);padding-top:var(--s4);
  text-align:left;
}
.toma-salida .lbl-salida{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 var(--s2);
}
.toma-salida .err-salida{color:var(--alert);font-size:14px;margin:0 0 var(--s2)}

/* ═══════════════════════════════════════════════════════════════════════
   10. FORMULARIOS DE CARGA Y ADMINISTRACIÓN
   ═══════════════════════════════════════════════════════════════════════
   La historia clínica tiene treinta y pico de campos. En una sola columna es
   una pantalla de scroll interminable; en grilla, y agrupada por tema, se
   completa mirando de a bloques. */

.campos-grilla{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:0 var(--s4);
  align-items:start;
}
/* Los antecedentes son una lista de sí/no: la casilla al lado del nombre y no
   debajo. Misma marcación que los roles — un <label> que envuelve las dos cosas —
   así hay una sola regla para las dos pantallas. */
.campo-check{margin-bottom:var(--s2)}

.campo textarea{min-height:80px;resize:vertical}
.campo .ayuda{
  font-size:12.5px;color:var(--muted);margin:2px 0 0;line-height:1.4;
}
.campo .err-campo{
  font-size:12.5px;color:var(--alert);margin:3px 0 0;font-weight:500;
}
.campo input[aria-invalid="true"]{border-color:var(--alert)}

/* Casillas de verificación.
   La marcación la escribe la plantilla, no el widget de Django: cada opción es
   un <label> que envuelve su casilla y su texto. Antes se dependía de `:has()`
   sobre la estructura que generaba Django, y la casilla terminaba arriba con el
   nombre debajo en mayúsculas — el rótulo del campo se comía la opción. */
.campo input[type="checkbox"]{
  width:18px;height:18px;margin:0;accent-color:var(--accent);flex:0 0 auto;
}
/* El rótulo del grupo se ve como cualquier etiqueta de campo. */
.campo .rotulo{
  font-family:var(--mono);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.12em;color:var(--muted);
}
.campo .opciones{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.campo .opciones label,
.campo-check label{
  display:flex;align-items:center;gap:10px;cursor:pointer;
  /* Sin esto hereda el mono en mayúsculas del rótulo de campo. */
  font-family:var(--body);font-size:14.5px;font-weight:400;
  text-transform:none;letter-spacing:0;color:var(--ink);
}

/* ═══════════════════════════════════════════════════════════════════════
   11. GRÁFICOS
   ═══════════════════════════════════════════════════════════════════════
   El SVG lo dibuja el servidor (core/graficos.py). Los colores llegan como
   `var(--...)`, así que el gráfico cambia con la identidad igual que todo lo
   demás y no hay un solo hex en el dibujo. */

.grafico-caja{
  border:1px solid var(--line);background:var(--surface);
  padding:var(--s3);overflow-x:auto;
}
.grafico{display:block;min-width:520px}
.g-etiqueta{
  font-family:var(--mono);font-size:11.5px;fill:var(--muted);
}
.g-valor{
  font-family:var(--mono);font-size:12px;fill:var(--ink);
  font-variant-numeric:tabular-nums;
}
.g-eje{stroke:var(--line-strong);stroke-width:1}

.numeros{margin-top:var(--s2)}
.numeros summary{
  font-family:var(--mono);font-size:11.5px;text-transform:uppercase;
  letter-spacing:.1em;color:var(--accent);cursor:pointer;padding:6px 0;
}
.numeros summary:hover{color:var(--ink)}

/* Los filtros de estadísticas: la lista de bloques arriba, y debajo las fechas
   y los botones. Van juntos en un solo formulario para que exportar salga
   siempre con lo mismo que se está mirando. */
.filtros-estadisticas{
  border:1px solid var(--line);background:var(--surface);
  padding:var(--s3);margin-bottom:var(--s5);
}
.opciones-fila{
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  margin-top:6px;
}