/* =========================================================
   ESTÁNDAR DE FICHA — bloques de dato duro
   Nacen del feedback sobre nefrologia/erc («cuadros, esquemas,
   algoritmos; que se vea el gold standard»). Son genéricos a
   propósito: el objetivo es replicarlos en las 144 fichas.
   ========================================================= */

/* ---------- escala de gravedad ordinal ----------
   NO son colores nuevos: son alias de los cuatro de marca, que ya
   pasaron el trabajo de contraste de las tandas 5.x. Verde → ámbar →
   naranja → rojo. Cambiar la paleta acá la cambia en todo el sitio. */
:root{
  --sev1:var(--accent);  --sev1-soft:var(--accent-soft);  --sev1-ink:var(--accent-ink);
  --sev2:var(--pearl);   --sev2-soft:var(--pearl-soft);   --sev2-ink:var(--pearl-ink);
  --sev3:var(--tangelo); --sev3-soft:var(--tangelo-soft); --sev3-ink:var(--tangelo-ink);
  --sev4:var(--crit);    --sev4-soft:var(--crit-soft);    --sev4-ink:var(--crit-ink);
}

/* ---------- MAPA DE CALOR (matriz de riesgo bidimensional) ----------
   KDIGO (FG × albuminuria), Child-Pugh, riesgo CV: cualquier tabla
   donde el cruce de dos ejes da una categoría de riesgo.

   REGLA DURA: el color nunca va solo. Cada celda lleva su rótulo de
   riesgo Y el dato numérico (en KDIGO, los controles por año), porque
   ~8 % de los varones no distingue verde de rojo y porque el color no
   sobrevive a una fotocopia. */
table.heatmap{table-layout:fixed;}
table.heatmap thead th{text-align:center;line-height:1.3;}
table.heatmap thead th:first-child{text-align:left;width:23%;}
table.heatmap tbody td{text-align:center;padding:9px 8px;vertical-align:middle;}
table.heatmap tbody td:first-child{text-align:left;padding-left:14px;}
/* el zebrado y el hover de las tablas normales pisarían los colores de riesgo */
table.heatmap tbody tr:nth-child(even){background:transparent;}
table.heatmap tbody tr:hover{background:transparent;}
table.heatmap tbody tr:hover td.sev-1,
table.heatmap tbody tr:hover td.sev-2,
table.heatmap tbody tr:hover td.sev-3,
table.heatmap tbody tr:hover td.sev-4{filter:brightness(1.04);}
/* cabecera de fila: el eje vertical (los estadios G) */
/* Variante «explica»: el heatmap nació como grilla de valores cortos (KDIGO,
   Ranson, Atlanta) y por eso centra todas las celdas. Pero varias fichas lo
   usan con una columna final de explicación, y la prosa centrada no le deja
   al ojo un margen izquierdo al que volver en cada renglón: se lee peor
   cuanto más larga es la frase.
   Las celdas PINTADAS siguen centradas —ahí va el dato corto, el rótulo de
   riesgo— y solo se alinean a la izquierda las que no llevan color, que son
   justamente las de texto. Se marca tabla por tabla en vez de cambiar la
   regla general para no tocar las grillas que sí quieren todo centrado. */
table.heatmap.explica tbody td:not(:first-child):not([class*="sev-"]){
  text-align:left;}

table.heatmap .ax{background:var(--surface-2);}
table.heatmap .ax b{display:block;font-family:var(--mono);font-size:var(--fs-card);
  color:var(--ink);line-height:1.2;}
table.heatmap .ax span{display:block;font-size:var(--fs-micro);color:var(--muted);
  font-family:var(--sans);margin-top:2px;}

/* la celda de riesgo: rótulo arriba, dato duro abajo */
.hm-lbl{display:block;font-family:var(--sans);font-size:var(--fs-micro);
  font-weight:600;text-transform:uppercase;letter-spacing:.05em;line-height:1.25;}
.hm-n{display:block;font-family:var(--mono);font-size:var(--fs-meta);
  color:var(--ink);margin-top:3px;opacity:.85;}

td.sev-1{background:var(--sev1-soft);box-shadow:inset 0 0 0 1px var(--sev1);}
td.sev-2{background:var(--sev2-soft);box-shadow:inset 0 0 0 1px var(--sev2);}
td.sev-3{background:var(--sev3-soft);box-shadow:inset 0 0 0 1px var(--sev3);}
td.sev-4{background:var(--sev4-soft);box-shadow:inset 0 0 0 1px var(--sev4);}
td.sev-1 .hm-lbl{color:var(--sev1-ink);}
td.sev-2 .hm-lbl{color:var(--sev2-ink);}
td.sev-3 .hm-lbl{color:var(--sev3-ink);}
td.sev-4 .hm-lbl{color:var(--sev4-ink);}

/* leyenda: obligatoria, es la que traduce el color a palabras */
.hm-key{list-style:none;display:flex;flex-wrap:wrap;gap:6px 16px;
  margin:-14px 0 22px;padding:0;font-family:var(--sans);
  font-size:var(--fs-tag);color:var(--muted);}
.hm-key li{display:flex;align-items:center;gap:7px;}
.hm-key i{width:13px;height:13px;border-radius:4px;flex:none;font-style:normal;}
.hm-key .k1{background:var(--sev1-soft);box-shadow:inset 0 0 0 1px var(--sev1);}
.hm-key .k2{background:var(--sev2-soft);box-shadow:inset 0 0 0 1px var(--sev2);}
.hm-key .k3{background:var(--sev3-soft);box-shadow:inset 0 0 0 1px var(--sev3);}
.hm-key .k4{background:var(--sev4-soft);box-shadow:inset 0 0 0 1px var(--sev4);}

@media(max-width:620px){
  table.heatmap{font-size:var(--fs-meta);}
  table.heatmap tbody td{padding:7px 3px;}
  /* el eje vertical cede ancho: lo que importa leer son las casillas de riesgo */
  table.heatmap thead th:first-child{width:19%;}
  /* «Muy alto» y «4+x/ano» partian en dos lineas en la columna mas angosta */
  .hm-lbl{letter-spacing:.02em;white-space:nowrap;}
  .hm-n{font-size:var(--fs-micro);white-space:nowrap;}
}

/* ---------- PATRÓN DE ORO ----------
   El reclamo era «no queda claro el GOLD STANDARD». La respuesta honesta
   casi nunca es un solo estudio: es un par —el patrón de oro teórico y lo
   que de verdad se pide en la guardia— más el motivo de la brecha. El
   componente obliga a dar los tres, así que no se puede nombrar un gold
   standard sin decir qué se usa en su lugar. */
.gold{border:1px solid var(--line);border-left:4px solid var(--pearl);
  border-radius:var(--r-md);background:var(--surface);
  box-shadow:var(--shadow-2);margin:22px 0;overflow:hidden;}
.gold > h4{font-family:var(--sans);font-size:var(--fs-tag);font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;color:var(--pearl-ink);
  padding:12px 18px 11px;background:var(--pearl-soft);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:9px;}
.gold > h4::before{content:"";width:15px;height:15px;flex:none;border-radius:50%;
  background:var(--pearl);
  box-shadow:inset 0 0 0 2px var(--surface),0 0 0 1px var(--pearl);}

.gold-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1.15fr);
  border-top:1px solid var(--line);}
.gold-row:first-of-type{border-top:none;}
.gold-row > div{padding:12px 16px;font-size:var(--fs-card);line-height:1.5;
  font-family:var(--read);border-left:1px solid var(--line);}
.gold-row > div:first-child{border-left:none;}
/* rótulo de columna: se repite en cada fila para que en móvil, ya apilado,
   se siga sabiendo cuál es cuál sin volver al encabezado */
.gold-row .rot{display:block;font-family:var(--sans);font-size:var(--fs-micro);
  font-weight:600;text-transform:uppercase;letter-spacing:.07em;
  color:var(--faint);margin-bottom:4px;}
.gold-q{background:var(--surface-2);}
.gold-q b{color:var(--ink);}
.gold-std{background:color-mix(in srgb,var(--pearl-soft) 55%,transparent);}
.gold-std .rot{color:var(--pearl-ink);}
.gold-std b{color:var(--pearl-ink);}
.gold-real .rot{color:var(--accent-ink);}
.gold-real b{color:var(--accent-ink);}
/* la brecha entre el patrón de oro y la práctica: por qué no se usa el ideal */
.gold-why{grid-column:1/-1;border-left:none;border-top:1px dashed var(--line-strong);
  background:var(--bg);font-size:var(--fs-meta);color:var(--muted);font-style:italic;}
.gold-why b{font-style:normal;color:var(--ink);}

@media(max-width:780px){
  .gold-row{grid-template-columns:1fr;}
  .gold-row > div{border-left:none;border-top:1px solid var(--line);}
  .gold-row > div:first-child{border-top:none;}
}

/* ---------- CASCADA FISIOPATOLÓGICA ----------
   Reemplaza el párrafo con flechitas. Se lee de arriba hacia abajo: cada
   eslabón es un hecho, y el desenlace clínico se pinta con la escala de
   gravedad. Soporta ramas (.casc-split) para las cascadas que se abren.

   CSS y no SVG: van a usarlo decenas de fichas y un SVG con coordenadas a
   mano no sobrevive a la primera corrección de contenido. */
.casc{border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--surface);box-shadow:var(--shadow-2);
  padding:18px 20px 20px;margin:20px 0;}
.casc > h4{font-family:var(--sans);font-size:var(--fs-tag);font-weight:600;
  text-transform:uppercase;letter-spacing:.08em;color:var(--accent-ink);
  margin-bottom:3px;display:flex;align-items:center;gap:8px;}
.casc > h4::before{content:"⇣";font-family:var(--mono);font-size:13px;}
.casc > .casc-sub{font-size:var(--fs-meta);color:var(--muted);
  font-style:italic;margin:0 0 15px;font-family:var(--read);}

.casc-chain{list-style:none;padding:0;margin:0;}
/* el eslabón. La línea que baja al siguiente se dibuja con ::after para que
   el último no la tenga y la cadena cierre sola. */
.casc-step{position:relative;padding:0 0 0 26px;margin-bottom:11px;}
.casc-step::before{content:"";position:absolute;left:4px;top:7px;
  width:9px;height:9px;border-radius:50%;
  background:var(--surface);box-shadow:0 0 0 2px var(--accent);}
.casc-step::after{content:"";position:absolute;left:8px;top:20px;bottom:-11px;
  width:1px;background:var(--line-strong);}
.casc-step:last-child::after{display:none;}
.casc-step > b{color:var(--ink);font-weight:600;}
.casc-step{font-size:var(--fs-card);line-height:1.55;font-family:var(--read);}
/* el «por qué» del eslabón, en chico y aparte: es lo que se olvida */
.casc-step .why{display:block;font-size:var(--fs-meta);color:var(--muted);
  margin-top:2px;}

/* desenlace clínico: cierra una rama y se pinta por gravedad */
.casc-end{position:relative;padding:10px 14px;margin:0 0 11px 26px;
  border-radius:var(--r-md);border:1px solid var(--line);border-left-width:3px;
  background:var(--bg);font-size:var(--fs-card);line-height:1.5;
  font-family:var(--read);}
.casc-end .rot{display:block;font-family:var(--sans);font-size:var(--fs-micro);
  font-weight:600;text-transform:uppercase;letter-spacing:.07em;margin-bottom:3px;}
.casc-end.s2{border-left-color:var(--sev2);background:var(--sev2-soft);}
.casc-end.s2 .rot{color:var(--sev2-ink);}
.casc-end.s3{border-left-color:var(--sev3);background:var(--sev3-soft);}
.casc-end.s3 .rot{color:var(--sev3-ink);}
.casc-end.s4{border-left-color:var(--sev4);background:var(--sev4-soft);}
.casc-end.s4 .rot{color:var(--sev4-ink);}
.casc-end b{color:var(--ink);}

/* rama: la cascada se abre en dos o más brazos que corren en paralelo */
.casc-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
  gap:10px;margin:0 0 11px 26px;}
.casc-split > div{border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--bg);padding:10px 13px;font-size:var(--fs-card);
  line-height:1.5;font-family:var(--read);}
.casc-split > div .rot{display:block;font-family:var(--sans);font-size:var(--fs-micro);
  font-weight:600;text-transform:uppercase;letter-spacing:.07em;
  color:var(--accent-ink);margin-bottom:3px;}

/* la palanca terapéutica: dónde se interviene esta cascada */
.casc-fix{margin-top:14px;border-top:1px solid var(--line);padding-top:12px;
  font-size:var(--fs-card);line-height:1.5;font-family:var(--read);}
.casc-fix::before{content:"⚕";font-family:var(--mono);color:var(--accent-ink);
  margin-right:7px;font-weight:700;}
.casc-fix b{color:var(--accent-ink);}

@media(max-width:620px){
  .casc{padding:15px 14px 16px;}
  .casc-end,.casc-split{margin-left:20px;}
}

/* ---------- CUADRO DE ETIOLOGÍA ----------
   Reemplaza la lista ordenada «tirada». Tres columnas fijas: qué es, cómo
   se sospecha (la pista clínica que la delata) y con qué se confirma. El
   orden de la tabla ES el orden de frecuencia, y el número lo dice. */
table.causas{table-layout:fixed;}
table.causas thead th:first-child{width:26%;}
table.causas thead th:nth-child(2){width:37%;}
table.causas tbody td{vertical-align:top;}
table.causas tbody td:first-child{padding-left:12px;}
/* el orden de frecuencia, como dato y no como viñeta decorativa */
.cz-n{display:inline-flex;align-items:center;justify-content:center;
  width:21px;height:21px;flex:none;border-radius:50%;margin-right:8px;
  background:var(--accent);color:#fff;
  font-family:var(--mono);font-size:var(--fs-micro);font-weight:500;
  vertical-align:1px;}
.cz-nom{display:inline;font-weight:600;color:var(--ink);}
/* dato duro de frecuencia: va aparte, en mono, para que salte a la vista */
.cz-pct{display:block;margin:4px 0 0 29px;font-family:var(--mono);
  font-size:var(--fs-meta);color:var(--accent-ink);font-weight:600;}
table.causas .pista{font-family:var(--read);}
table.causas .pista b{color:var(--ink);}
@media(max-width:780px){
  table.causas{table-layout:auto;}
  table.causas thead th:first-child,
  table.causas thead th:nth-child(2){width:auto;}
}

/* =========================================================
   CARGA DE FICHAS — barra de progreso y aviso de fallo
   Las fichas llegan por fetch (app.js → traerFicha). Casi siempre entran antes
   de los 200 ms que tarda en aparecer la barra: esto es para la primera visita
   con red lenta, y para que un fallo no termine en pantalla muda.
   ========================================================= */
body[data-cargando]::before{
  content:'';
  position:fixed; inset:0 0 auto 0; height:3px; z-index:120;
  background:linear-gradient(90deg,transparent,var(--accent),transparent);
  background-size:40% 100%; background-repeat:no-repeat;
  animation:pgi-cargando 1s linear infinite;
}
@keyframes pgi-cargando{
  from{background-position:-40% 0;}
  to{background-position:140% 0;}
}

.pgi-error{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  z-index:130; max-width:min(520px,calc(100vw - 32px));
  padding:12px 16px; border-radius:var(--r-md);
  background:var(--crit-soft); color:var(--crit-ink);
  border:1px solid var(--crit); box-shadow:var(--shadow-3);
  font:500 var(--fs-card)/1.45 var(--sans);
}
.pgi-error[hidden]{display:none;}
.pgi-error-retry{
  padding:0; border:0; background:none; color:inherit; font:inherit;
  text-decoration:underline; text-underline-offset:2px; cursor:pointer;
}

@media(prefers-reduced-motion:reduce){
  body[data-cargando]::before{animation:none; background:var(--accent);}
}
/* =========================================================
   COLOR POR MÓDULO
   Cada módulo tiene su color y estaba escrito a mano en 280
   style="background:#hex" repartidos por el HTML: uno por link del rail, uno
   por eyebrow de ficha, uno por tarjeta de la home, más los que app.js
   inyectaba en los resultados del buscador. Un color hardcodeado no responde
   al tema, así que además quedaban clavados en modo oscuro.

   El mapeo color→módulo era 1:1 sin excepciones, así que esto no pierde
   información: son los mismos valores, ahora en un solo lugar. Cambiar el
   color de un módulo pasa a ser una línea; darles una variante propia para
   el modo oscuro, otra.
   ========================================================= */
:root{
  --mod-semiologia:#6C86A8;
  --mod-cardiologia:#CF8A78;
  --mod-neumonologia:#3E9CA8;
  --mod-gastroenterologia:#C0873E;
  --mod-nefrologia:#9B5B7D;
  --mod-endocrinologia:#5E9072;
  --mod-neurologia:#6659B0;
  --mod-reumatologia:#BC4A57;
  --mod-salud-mental:#4C6E8D;
  --mod-toxicologia:#7E9B34;
  --mod-traumatologia:#5E6B7A;
  /* Cirugia es la app hermana (cirugia.html), pero su punto aparece en el
     rail de esta y en los resultados del buscador */
  --mod-cirugia:#3F8E8C;
}

.rail-group[data-mod="semiologia"] .dot,
.spec-group[data-mod="semiologia"] .sc-dot,
.view[data-view^="semiologia/"] .dot,
.r-dot[data-mod="semiologia"]{background:var(--mod-semiologia);}
.rail-group[data-mod="cardiologia"] .dot,
.spec-group[data-mod="cardiologia"] .sc-dot,
.view[data-view^="cardiologia/"] .dot,
.r-dot[data-mod="cardiologia"]{background:var(--mod-cardiologia);}
.rail-group[data-mod="neumonologia"] .dot,
.spec-group[data-mod="neumonologia"] .sc-dot,
.view[data-view^="neumonologia/"] .dot,
.r-dot[data-mod="neumonologia"]{background:var(--mod-neumonologia);}
.rail-group[data-mod="gastroenterologia"] .dot,
.spec-group[data-mod="gastroenterologia"] .sc-dot,
.view[data-view^="gastroenterologia/"] .dot,
.r-dot[data-mod="gastroenterologia"]{background:var(--mod-gastroenterologia);}
.rail-group[data-mod="nefrologia"] .dot,
.spec-group[data-mod="nefrologia"] .sc-dot,
.view[data-view^="nefrologia/"] .dot,
.r-dot[data-mod="nefrologia"]{background:var(--mod-nefrologia);}
.rail-group[data-mod="endocrinologia"] .dot,
.spec-group[data-mod="endocrinologia"] .sc-dot,
.view[data-view^="endocrinologia/"] .dot,
.r-dot[data-mod="endocrinologia"]{background:var(--mod-endocrinologia);}
.rail-group[data-mod="neurologia"] .dot,
.spec-group[data-mod="neurologia"] .sc-dot,
.view[data-view^="neurologia/"] .dot,
.r-dot[data-mod="neurologia"]{background:var(--mod-neurologia);}
.rail-group[data-mod="reumatologia"] .dot,
.spec-group[data-mod="reumatologia"] .sc-dot,
.view[data-view^="reumatologia/"] .dot,
.r-dot[data-mod="reumatologia"]{background:var(--mod-reumatologia);}
.rail-group[data-mod="salud-mental"] .dot,
.spec-group[data-mod="salud-mental"] .sc-dot,
.view[data-view^="salud-mental/"] .dot,
.r-dot[data-mod="salud-mental"]{background:var(--mod-salud-mental);}
.rail-group[data-mod="toxicologia"] .dot,
.spec-group[data-mod="toxicologia"] .sc-dot,
.view[data-view^="toxicologia/"] .dot,
.r-dot[data-mod="toxicologia"]{background:var(--mod-toxicologia);}
.rail-group[data-mod="traumatologia"] .dot,
.spec-group[data-mod="traumatologia"] .sc-dot,
.view[data-view^="traumatologia/"] .dot,
.r-dot[data-mod="traumatologia"]{background:var(--mod-traumatologia);}
.rail-ext .dot,
.r-dot[data-mod="cirugia"]{background:var(--mod-cirugia);}

/* =========================================================
   COLOR POR BLOQUE QUIRÚRGICO
   Lo mismo que arriba, para la app hermana. Cirugía no divide en
   módulos sino en bloques (Esófago, Vía biliar, Cabeza y cuello…) y su
   color estaba escrito a mano en 75 style="background:#hex": uno por
   link del rail, uno por tarjeta de la portada y uno por eyebrow de
   ficha. Quedaron afuera de la pasada que hizo esto mismo para Interna.

   El problema no era sólo la repetición: un hex inline no responde al
   tema, así que los nueve colores estaban clavados igual en claro que en
   oscuro. Ahora son tokens, y darle a un bloque su variante oscura es
   una línea acá adentro en vez de una pasada por 29 archivos.

   El punto lleva data-mod sobre sí mismo, no sobre un ancestro como en
   Interna: en Cirugía el mismo punto aparece en el rail, en la portada y
   dentro de la ficha —tres contenedores distintos—, y colgarlo del
   elemento hace que una sola regla cubra los tres casos.
   ========================================================= */
:root{
  --cx-fundamentos:#2F7D6B;   /* Fundamentos */
  --cx-vascular:#4A6FA5;   /* Vascular */
  --cx-abdomen:#B4552F;   /* Abdomen y trauma */
  --cx-biliar:#8A6A3B;   /* Vía biliar */
  --cx-esofago:#1F7A8C;   /* Esófago */
  --cx-cuello:#7A5EA8;   /* Cabeza y cuello */
  --cx-endocrino:#C08A2E;   /* Endocrino-tumoral */
  --cx-piel:#A8546E;   /* Piel */
  --cx-metabolica:#5E8C3F;   /* Metabólica */
  /* el link de vuelta a Interna, en el rail de Cirugía */
  --mod-interna:#F57710;
}

.dot[data-mod="fundamentos"],
.sc-dot[data-mod="fundamentos"],
.r-dot[data-mod="fundamentos"]{background:var(--cx-fundamentos);}
.dot[data-mod="vascular"],
.sc-dot[data-mod="vascular"],
.r-dot[data-mod="vascular"]{background:var(--cx-vascular);}
.dot[data-mod="abdomen"],
.sc-dot[data-mod="abdomen"],
.r-dot[data-mod="abdomen"]{background:var(--cx-abdomen);}
.dot[data-mod="biliar"],
.sc-dot[data-mod="biliar"],
.r-dot[data-mod="biliar"]{background:var(--cx-biliar);}
.dot[data-mod="esofago"],
.sc-dot[data-mod="esofago"],
.r-dot[data-mod="esofago"]{background:var(--cx-esofago);}
.dot[data-mod="cuello"],
.sc-dot[data-mod="cuello"],
.r-dot[data-mod="cuello"]{background:var(--cx-cuello);}
.dot[data-mod="endocrino"],
.sc-dot[data-mod="endocrino"],
.r-dot[data-mod="endocrino"]{background:var(--cx-endocrino);}
.dot[data-mod="piel"],
.sc-dot[data-mod="piel"],
.r-dot[data-mod="piel"]{background:var(--cx-piel);}
.dot[data-mod="metabolica"],
.sc-dot[data-mod="metabolica"],
.r-dot[data-mod="metabolica"]{background:var(--cx-metabolica);}
/* va después de `.rail-ext .dot` de arriba, que si no lo pisa por empate
   de especificidad y pinta de verde el enlace a Interna */
.dot[data-mod="interna"],
.r-dot[data-mod="interna"]{background:var(--mod-interna);}

/* =========================================================
   COLOR POR MÓDULO — variantes para el tema oscuro

   El fondo de tarjeta en oscuro es #352419. Contra él, nueve de los
   veintidós colores quedaban por debajo de 3:1 y el punto —8 px en el rail—
   se perdía: Neurología daba 2,55.

   NO es un incumplimiento de WCAG: el nombre del módulo está escrito al lado
   del punto en los tres lugares donde aparece (rail, portada, eyebrow), así
   que el color es redundante y 1.4.11 no aplica. Es legibilidad, no norma.

   Sólo se mueve la LUMINOSIDAD; tono y saturación quedan intactos. Es el
   mismo color del módulo, aclarado para su fondo — no un color nuevo.

   El tema claro NO se toca. Ahí los que quedan bajos son naranjas y tostados
   saturados: poca diferencia de luminancia pero mucha de croma, así que se
   ven bien, y ensombrecerlos apagaría la calidez que es la identidad del
   sitio. La luminancia sola subestima qué tan visible es un color saturado.
   ========================================================= */
html[data-theme="dark"]{
  --mod-neurologia:#7D72BC;   /* Neurología: #6659B0, 2,55:1 -> 3,5:1 */
  --mod-traumatologia:#6D7D8E;/* Traumatología: #5E6B7A, 2,72:1 -> 3,5:1 */
  --mod-salud-mental:#577FA2; /* Salud mental: #4C6E8D, 2,77:1 -> 3,5:1 */
  --mod-nefrologia:#A66889;   /* Nefrología: #9B5B7D, 2,95:1 -> 3,5:1 */
  --cx-cuello:#8870B1;        /* Cabeza y cuello: #7A5EA8, 2,82:1 -> 3,5:1 */
  --cx-vascular:#577DB4;      /* Vascular: #4A6FA5, 2,90:1 -> 3,5:1 */
  --cx-piel:#B1647C;          /* Piel: #A8546E, 2,93:1 -> 3,5:1 */
  --cx-biliar:#997541;        /* Vía biliar: #8A6A3B, 2,97:1 -> 3,5:1 */
  --cx-esofago:#22879A;       /* Esófago: #1F7A8C, 2,98:1 -> 3,5:1 */
}

/* =========================================================
   MANIOBRA SEMIOLÓGICA — .mnb

   El agujero que vino a tapar: 90 de las 163 fichas (55%) no describían
   una sola maniobra, y las mismas 90 no citaban Argente nunca. Las fichas
   NOMBRABAN la semiología sin DARLA — «se palpa por detrás pidiendo que
   trague» era toda la palpación tiroidea del sitio.

   El bloque obliga a la estructura completa: qué busca, cómo se para el
   paciente y el médico, la técnica paso a paso, cuándo es positivo, qué
   cambia en la conducta, cuánto rinde y dónde están las trampas. Si un
   campo queda vacío se nota, que es justamente lo que se quería.

   `.mnb-media` queda reservado para el video de la maniobra: hoy aloja un
   SVG o nada, y el día que entren los clips grabados no hay que rehacer
   el bloque ni la grilla.
   ========================================================= */
.maniobras{
  display:grid;
  grid-template-columns:1fr;
  gap:14px;
  margin:16px 0;
}
.mnb{
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
  overflow:hidden;
  box-shadow:var(--shadow-1);
}
.mnb-head{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  background:var(--surface-2);
  border-bottom:1px solid var(--line);
}
.mnb-head h4{
  margin:0;
  font-family:var(--display);
  font-size:var(--fs-card);
  line-height:1.25;
  color:var(--ink);
}
.mnb-busca{
  margin:3px 0 0;
  font-size:var(--fs-meta);
  color:var(--muted);
}
/* la etiqueta dice de qué tiempo del examen es la maniobra: sin esto,
   una lista larga se lee como una bolsa de epónimos sueltos */
.mnb-tag{
  margin-left:auto;
  flex:none;
  font-size:var(--fs-tag);
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:var(--r-xs);
  border:1px solid var(--line-strong);
  color:var(--muted);
  background:var(--bg);
}
.mnb-tag[data-t="palpacion"]{color:var(--accent);border-color:var(--accent);}
.mnb-tag[data-t="percusion"]{color:var(--tangelo);border-color:var(--tangelo);}
.mnb-tag[data-t="auscultacion"]{color:var(--crit);border-color:var(--crit);}
.mnb-tag[data-t="inspeccion"]{color:var(--mnemo);border-color:var(--mnemo);}

.mnb-media{
  margin:0;
  border-bottom:1px solid var(--line);
  background:var(--bg);
  text-align:center;
}
.mnb-media svg,
.mnb-media img,
.mnb-media video{max-width:100%;height:auto;display:block;margin:0 auto;}
.mnb-media figcaption{
  font-size:var(--fs-micro);
  color:var(--muted);
  padding:6px 10px;
}

.mnb-body{margin:0;padding:12px 14px;}
.mnb-body dt{
  font-size:var(--fs-tag);
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:10px;
}
.mnb-body dt:first-child{margin-top:0;}
.mnb-body dd{
  margin:3px 0 0;
  font-size:var(--fs-body);
  line-height:1.55;
  color:var(--ink);
}
.mnb-body dd ol{margin:4px 0 0;padding-left:1.15em;}
.mnb-body dd ol li{margin:3px 0;}
/* «Positivo si» es lo que se busca al lado de la cama: se marca para que
   el ojo lo encuentre sin leer la tarjeta entera */
.mnb-body dd.mnb-pos{
  border-left:3px solid var(--accent);
  padding-left:9px;
}
.mnb-rend{
  font-family:var(--mono);
  font-size:var(--fs-meta);
}
.mnb .cite{margin:10px 14px 12px;}

/* Dato dudoso por OCR en las maniobras del dossier de semiología: se marca con
   `.verify`, que YA EXISTÍA en css/08-cirugia.css («flag: dato a verificar
   contra libro») — reusar esa clase en vez de definir una nueva evitó un
   duplicado. Una primera versión de este bloque redefinía `.verify` acá y,
   como 09 pisa a 08 en la cascada, rompía el pastillero con bandera de la
   regla original dejando sólo su ::before "⚑" huérfano flotando antes del
   texto. No hace falta nada acá: ver css/08-cirugia.css:159. */