/* ---------- figura clínica anotada ---------- */
.fig-wrap{margin:22px 0 8px;}
/* Imagen suelta de figura. El estilo estaba repetido inline en 21 imágenes,
   con border-radius:10px a mano — fuera de la escala. Acá va una sola vez y
   cada figura conserva su ancho propio con --fig-w.
   El selector `>` es a propósito: las imágenes de .fig-annotated tienen su
   propio tratamiento y no deben recibir este. */
.fig-wrap > img{display:block;width:100%;height:auto;max-width:var(--fig-w,100%);
  border-radius:var(--r-sm);border:1px solid var(--line);box-shadow:var(--shadow-1);}
/* Caja centrada para un diagrama suelto. Estaba repetida inline en las 7
   fichas de salud mental, y con dos tokens que NO existen —var(--sub) y
   var(--card-bg)—: un var() sin fallback a un token inexistente invalida la
   propiedad, asi que esas cajas venian sin fondo en los dos temas. Aca usa
   --surface, que es el token real de superficie de tarjeta.
   El margen unifica los 20px y 24px que convivian: la diferencia de 4px no
   la decidio nadie, salio de escribir lo mismo dos veces. */
.fig-caja{margin:22px 0;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:20px;text-align:center;}
.fig-row{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start;}
.fig-annotated{position:relative;flex:0 0 auto;width:340px;max-width:100%;}
.fig-annotated img{display:block;width:100%;height:auto;
  border-radius:var(--r-sm);border:1px solid var(--line);box-shadow:var(--shadow-1);}
.fig-overlay{position:absolute;inset:0;width:100%;height:100%;
  pointer-events:none;overflow:visible;}
.fig-overlay .ring{fill:none;stroke:var(--accent);stroke-width:5;
  stroke-dasharray:13 9;opacity:.95;}
.fig-legend{flex:1 1 220px;min-width:200px;align-self:stretch;
  background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--accent);border-radius:var(--r-sm);padding:14px 16px;}
.fig-legend .lg-tag{display:inline-flex;align-items:center;gap:8px;
  font-size:var(--fs-tag);text-transform:uppercase;letter-spacing:.06em;
  color:var(--accent-ink);font-weight:700;margin-bottom:7px;}
.fig-legend .lg-tag::before{content:"";width:13px;height:13px;flex:0 0 auto;
  border-radius:50%;border:2.5px dashed var(--accent);}
.fig-legend p{font-size:var(--fs-meta);color:var(--muted);line-height:1.52;margin:0;}
.fig-legend p+p{margin-top:8px;}
/* flex-basis sólo actúa en las figuras que además son .fig-row (ahí la
   figure es el contenedor flex y el epígrafe debe ocupar una fila entera) */
.fig-wrap figcaption{flex-basis:100%;font-size:var(--fs-tag);color:var(--muted);
  margin-top:11px;line-height:1.55;font-style:italic;}
.fig-wrap figcaption a{color:var(--muted);text-decoration:underline;}

/* ---------- atlas radiográfico: figuras Rx con pines numerados ---------- */
/* (todo scopeado en .fig-rx para no alterar las figuras histológicas previas) */
.fig-rx .fig-annotated{background:var(--rx-negatoscopio);border-radius:var(--r-sm);}
.fig-rx .fig-annotated img{border-color:var(--rx-marco);}
.fig-rx.grayfx .fig-annotated img{filter:grayscale(1) contrast(1.06) brightness(1.02);}
.fig-rx .ring{stroke-width:6;filter:drop-shadow(0 0 2px rgba(0,0,0,.9));}
.fig-rx .ring.crit{stroke:var(--rx-clave);}
.fig-rx .ring.hot{stroke:var(--rx-dato);}
.fig-rx .lead{fill:none;stroke:var(--rx-dato);stroke-width:5;stroke-linecap:round;
  filter:drop-shadow(0 0 2px rgba(0,0,0,.9));}
.fig-rx .lead.crit{stroke:var(--rx-clave);}
.fig-rx .fig-annotated .rxpin{position:absolute;transform:translate(-50%,-50%);z-index:4;
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font:700 12px/1 var(--sans);color:var(--rx-tinta);background:var(--rx-dato);
  border:2px solid var(--rx-negatoscopio);box-shadow:0 1px 3px rgba(0,0,0,.6);}
.fig-rx .fig-annotated .rxpin.crit{background:var(--rx-clave);color:#fff;border-color:var(--rx-clave-borde);}
.fig-rx .fig-annotated .rxpin.info{background:var(--rx-info);color:var(--rx-tinta);}
.fig-rx .fig-legend{border-left-color:var(--rx-dato);}
.fig-rx .fig-legend .rxkey{list-style:none;padding:0;margin:7px 0 0;display:grid;gap:7px;}
.fig-rx .fig-legend .rxkey li{position:relative;padding-left:26px;font-size:12.8px;
  color:var(--muted);line-height:1.5;}
.fig-rx .fig-legend .rxkey b{color:var(--ink);}
.fig-rx .fig-legend .rxkey .kn{position:absolute;left:0;top:1px;width:18px;height:18px;
  border-radius:50%;display:grid;place-items:center;font:700 11px/1 var(--sans);
  color:var(--rx-tinta);background:var(--rx-dato);}
.fig-rx .fig-legend .rxkey .kn.crit{background:var(--rx-clave);color:#fff;}
.fig-rx .fig-legend .rxkey .kn.info{background:var(--rx-info);}

/* ---------- láminas anotadas: pines clicables y panel que explica ---------- */
/* Hermano de .fig-rx, pero al revés: allá el número es una etiqueta fija que
   el ojo tiene que cruzar contra una lista; acá es un botón y el panel se
   repinta con lo que se tocó. Los textos viven en el HTML de la ficha (en la
   .lam-src, oculta), no en el JS: las fichas son archivos independientes y el
   contenido tiene que viajar con ellas.
   Los pines se posicionan en % sobre .fig-annotated —que ya es relative—
   porque la columna cambia de ancho con el viewport; en px se despegarían
   de la estructura que señalan. */
.fig-lam .lampin{position:absolute;transform:translate(-50%,-50%);z-index:4;
  width:25px;height:25px;border-radius:50%;display:grid;place-items:center;
  font:700 12px/1 var(--sans);color:var(--accent-ink);background:var(--surface);
  border:2px solid var(--accent);padding:0;cursor:pointer;
  box-shadow:0 1px 4px rgba(0,0,0,.38);
  transition:transform .13s ease, background .13s ease, color .13s ease;}
.fig-lam .lampin:hover{transform:translate(-50%,-50%) scale(1.16);}
.fig-lam .lampin[aria-pressed="true"]{background:var(--accent);color:var(--bg);
  transform:translate(-50%,-50%) scale(1.2);}
.fig-lam .lam-info h4{font-family:var(--serif);font-size:1rem;font-weight:600;
  color:var(--ink);margin:0 0 5px;}
.fig-lam .lam-info .lam-hint{font-style:italic;color:var(--faint);}
/* La lista fuente sólo existe para que el contenido viaje en el HTML de la
   ficha; el buscador la indexa igual, que es un efecto deseado. */
.fig-lam .lam-src{display:none;}

/* ---------- ilustraciones de Servier: PNG con transparencia ---------- */
/* Vienen recortadas contra nada, y el trazo es marrón oscuro sobre rellenos
   pastel: sobre el fondo oscuro del tema nocturno el contorno desaparece y
   quedan manchas flotando. Se les da una hoja de papel propia, igual en los
   dos temas, que es además como se ven en el original. El padding evita que
   el dibujo toque el borde de la tarjeta. */
.fig-servier .fig-annotated img{background:var(--rx-papel);padding:12px;}

/* sub-fichas de hallazgo dentro del atlas */
.atlas-find{margin:24px 0 0;padding-top:18px;border-top:1px dashed var(--line);}
.atlas-find:first-of-type{border-top:none;}
.atlas-find > h3{font-family:var(--serif);font-size:1.18rem;font-weight:600;color:var(--ink);
  margin:0 0 6px;display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;}
.atlas-find > h3 .fx-n{font-family:var(--mono);font-size:.72rem;color:var(--accent-ink);
  background:var(--accent-soft);padding:2px 8px;border-radius:var(--r-pill);letter-spacing:.02em;}
.atlas-find > h3 .fx-tag{font-family:var(--sans);font-size:.62rem;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;color:var(--crit-ink);
  background:var(--crit-soft);padding:2px 7px;border-radius:var(--r-pill);}

/* ---------- fichas de facies con rótulo al lado (semiología) ---------- */
.sem-figlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));
  gap:12px;margin:14px 0 6px;}
.sem-figitem{display:flex;gap:14px;align-items:center;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:10px;box-shadow:var(--shadow-1);}
.sem-figitem img{width:118px;height:118px;object-fit:cover;border-radius:var(--r-sm);
  flex:0 0 auto;background:var(--pearl);}
.sem-figitem .cap{flex:1;min-width:0;}
.sem-figitem .cap b{display:block;color:var(--accent-ink);font-size:var(--fs-card);margin-bottom:4px;}
.sem-figitem .cap span{display:block;font-size:var(--fs-tag);color:var(--muted);line-height:1.5;}
.sem-gallery-note{font-size:12px;color:var(--muted);font-style:italic;margin:4px 0 0;}

/* ---------- listas jerarquizadas (rank) ---------- */
ol.rank{padding-left:22px;margin:8px 0 16px;}
ol.rank li{margin-bottom:7px;font-size:var(--fs-card);padding-left:4px;}

/* ---------- comparador ST/PR y maniobras: alinear el panel arriba ---------- */
.stpr .infop,.mnv .infop{justify-content:flex-start;}

/* ---------- maniobras auscultatorias ---------- */
.mnv-cols{display:flex;gap:16px;margin-top:8px;flex-wrap:wrap;}
.mnv-up,.mnv-down{flex:1 1 150px;min-width:140px;}
.mnv-lbl{display:block;font-family:var(--mono);font-size:11px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;margin-bottom:5px;}
.mnv-up .mnv-lbl{color:var(--accent-ink);}
.mnv-down .mnv-lbl{color:var(--crit-ink);}
.mnv-cols ul{list-style:none;padding:0;margin:0;}
.mnv-cols li{font-size:13px;color:var(--ink);padding:3px 0 3px 15px;
  position:relative;line-height:1.42;}
.mnv-up li::before{content:"▲";position:absolute;left:0;top:5px;font-size:8px;color:var(--accent);}
.mnv-down li::before{content:"▼";position:absolute;left:0;top:5px;font-size:8px;color:var(--crit);}

/* ---------- calculadora / checklist clínico ---------- */
.calc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:16px 18px;margin:18px 0 22px;box-shadow:var(--shadow-1);}
.calc-head{margin-bottom:12px;}
.calc-title{display:block;font-family:var(--serif);font-size:1.05rem;
  font-weight:600;color:var(--ink);}
.calc-sub{font-size:12px;color:var(--muted);}
.calc-grid{display:flex;flex-direction:column;gap:6px;}
.calc-col{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--faint);font-weight:600;margin-top:8px;}
.chk{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--ink);
  cursor:pointer;padding:3px 5px;border-radius:var(--r-xs);transition:background .12s;}
.chk:hover{background:var(--surface-2);}
.chk input{margin-top:3px;accent-color:var(--accent);cursor:pointer;flex:none;}
.calc-out{margin-top:14px;padding:12px 14px;border-radius:var(--r-sm);font-size:13.5px;
  line-height:1.55;border-left:3px solid;}
.calc-out.risk-low{background:var(--accent-soft);border-color:var(--accent);}
.calc-out.risk-high{background:var(--crit-soft);border-color:var(--crit);}
.calc-verdict{display:block;font-weight:700;font-size:var(--fs-tag);text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:4px;}
.calc-out.risk-low .calc-verdict{color:var(--accent-ink);}
.calc-out.risk-high .calc-verdict{color:var(--crit-ink);}

/* ---------- auscultador pulmonar ---------- */
.torso-bg{fill:var(--surface);stroke:var(--line-strong);stroke-width:1.5;}
.scapula{fill:none;stroke:var(--faint);stroke-width:1.3;stroke-dasharray:3 3;}
.spine{stroke:var(--faint);stroke-width:1.2;stroke-dasharray:2 4;}
.lung-pt circle{fill:var(--surface-2);stroke:var(--accent);stroke-width:2;
  cursor:pointer;transition:fill .15s,stroke .15s,filter .15s;}
.lung-pt text{fill:var(--accent-ink);font-family:var(--mono);font-size:11px;
  font-weight:600;pointer-events:none;}
.lung-pt:hover circle,.lung-pt.active circle{fill:var(--accent);stroke:var(--accent-ink);
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 72%,transparent));}
.lung-pt:hover text,.lung-pt.active text{fill:#fff;}
.lung-pt:focus-visible{outline:none;}
.lung-pt:focus-visible circle{stroke:var(--tangelo);stroke-width:3.2;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--tangelo) 70%,transparent));}
.ausc-wave{display:block;width:100%;height:54px;margin:10px 0;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface-2);}
.ausc-play{background:var(--accent);color:#fff;border:1px solid var(--accent);
  border-radius:var(--r-sm);padding:8px 18px;font-size:13.5px;font-family:var(--sans);
  font-weight:500;cursor:pointer;transition:filter .14s;}
.ausc-play:hover{filter:brightness(1.06);}
.ausc-play:focus-visible{outline:2px solid var(--tangelo);outline-offset:2px;}
.ausc-mode{margin-left:10px;font-family:var(--mono);font-size:11px;color:var(--faint);}
#auscInfo{justify-content:flex-start;}

/* ---------- paginación entre fichas ---------- */
.ficha-nav{display:flex;gap:14px;margin:44px 0 8px;align-items:stretch;}
.fn-link{flex:1 1 0;min-width:0;display:flex;flex-direction:column;gap:3px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px 16px;text-decoration:none;
  transition:box-shadow .16s,transform .14s,border-color .16s;
  box-shadow:var(--shadow-1);}
a.fn-link:hover{box-shadow:var(--shadow-2);transform:translateY(-2px);border-color:var(--accent);}
a.fn-link:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px;}
.fn-next{align-items:flex-end;text-align:right;}
.fn-dir{font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--accent-ink);font-weight:600;}
.fn-name{font-family:var(--serif);font-size:14px;font-weight:600;
  color:var(--ink);line-height:1.2;}
.fn-empty{visibility:hidden;border:none;background:none;box-shadow:none;pointer-events:none;}

/* ---------- foco del ancla / aire al aterrizar ---------- */
.views{scroll-padding-top:calc(var(--appbar-h) + 10px);}
h1,h2,h3{scroll-margin-top:20px;}

/* ---------- affordance de elementos clicables (diagramas) ---------- */
.foco circle,.valv circle{transition:fill .15s,stroke .15s,filter .15s;}
.foco:hover circle,.foco:focus-visible circle,
.valv:hover circle,.valv:focus-visible circle{
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--accent) 75%,transparent));}
.foco:focus-visible,.valv:focus-visible,.ez:focus-visible{outline:none;}
.foco:focus-visible circle,.valv:focus-visible circle{
  stroke:var(--tangelo);stroke-width:3.2;
  filter:drop-shadow(0 0 6px color-mix(in srgb,var(--tangelo) 70%,transparent));}
.ez:focus-visible{fill:color-mix(in srgb,var(--tangelo) 18%,transparent);
  stroke:var(--tangelo);stroke-width:1.6;}

/* aviso de tabla deslizable: oculto por defecto, sólo se muestra en móvil
   cuando app.js marca la tabla como .scrollable */
.tbl-hint{display:none;font-size:var(--fs-micro);color:var(--faint);
  margin:-18px 0 20px;font-style:italic;}


/* ---------- punto de leyenda y fondo de lámina ---------- */
/* El punto que ata cada renglón de una leyenda con su zona en la figura.
   Estaba escrito inline seis veces con las mismas seis declaraciones, y el
   color repetido a mano del <g> del SVG de al lado. */
.lg-dot{display:inline-block;width:11px;height:11px;border-radius:50%;
  margin-right:7px;vertical-align:middle;}
.lg-dot[data-dep="subepitelial"]{background:var(--dep-subepitelial);}
.lg-dot[data-dep="intramembranoso"]{background:var(--dep-intramembranoso);}
.lg-dot[data-dep="subendotelial"]{background:var(--dep-subendotelial);}
.lg-dot[data-dep="mesangial"]{background:var(--dep-mesangial);}

/* Pin del atlas radiográfico citado dentro de un párrafo, para explicar la
   convención antes de que aparezcan las placas. Mismo aspecto que .rxpin,
   pero en el flujo del texto en vez de posicionado sobre la imagen. */
.rxpin-eg{display:inline-grid;place-items:center;width:18px;height:18px;
  border-radius:50%;font:700 11px/1 var(--sans);vertical-align:middle;
  color:var(--rx-tinta);background:var(--rx-dato);}
.rxpin-eg.crit{background:var(--rx-clave);color:#fff;}

/* Lámina con fondo transparente que necesita papel blanco detrás. Blanco y no
   un token de tema a propósito: el trazo es tinta oscura, y sobre el papel
   oscuro del modo noche la figura desaparece. Iba inline en tres fichas. */
.fig-blanco{background:#fff;}

/* ---------- .rx-viva: el marcador lo enciende el texto, no vive sobre la imagen ----------
   Pedido del usuario (28-ago-2026), y tiene dos razones buenas. La primera es la
   que él dio: en una Rx o una ecografía el pin se apoya JUSTO sobre el hallazgo,
   así que el marcador tapa lo único que la imagen tiene para mostrar.

   La segunda apareció al discutirlo y pesa más: un pin permanente REGALA LA
   RESPUESTA. Con el marcador oculto, se lee «sombra acústica posterior», hay que
   buscarla en la imagen y recién después se confirma. Es recuerdo activo en vez
   de reconocimiento — que es para lo que sirve estudiar con imágenes.

   Una sola encendida por vez, y queda encendida hasta que se la vuelve a tocar:
   si se encienden todas, se vuelve al problema de origen.

   Convive con `.fig-rx` a secas: sin la clase `rx-viva` la figura sigue
   comportándose como antes (anillos y pines siempre visibles). */
/* El pin NO se borra: se apaga. En la mayoria de las figuras el pin es el UNICO
   marcador que hay —de 30 pines solo 13 tienen anillo—, asi que esconderlo dejaria
   la palabra sin nada que encender. Y ya estan colocados con precision sobre cada
   hallazgo: reusarlos evita inventar coordenadas sobre placas ajenas. */
.fig-rx.rx-viva .rxpin{opacity:0;pointer-events:none;transition:opacity .18s ease;}
.fig-rx.rx-viva .rxpin.viva{opacity:1;}
.fig-rx.rx-viva .ring,
.fig-rx.rx-viva .lead{opacity:0;transition:opacity .18s ease;}
.fig-rx.rx-viva .ring.viva,
.fig-rx.rx-viva .lead.viva{opacity:1;}
/* sin el número al costado, el renglón no necesita la sangría que lo alojaba */
.fig-rx.rx-viva .fig-legend .rxkey li{padding-left:0;}

/* El botón es la palabra clave del renglón, no un control aparte: hereda la
   tipografía del texto y sólo se distingue por el punteado —el mismo recurso
   que ya usa .sigla para los tooltips, así el gesto se aprende una vez. */
.rxk{font:inherit;color:var(--ink);font-weight:700;background:none;border:0;padding:0;
  cursor:pointer;text-decoration:underline dotted;text-underline-offset:3px;
  text-decoration-color:var(--rx-dato);text-decoration-thickness:2px;}
.rxk:hover{color:var(--accent-ink);}
.rxk[aria-pressed="true"]{color:var(--rx-tinta);background:var(--rx-dato);
  border-radius:var(--r-xs);padding:0 5px;margin:0 -2px;text-decoration:none;}
.rxk:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px;border-radius:3px;}
/* El renglon del hallazgo clave conserva su codigo de color: antes lo llevaba el
   numerito rojo del costado, que ya no esta. */
.rxk.crit{text-decoration-color:var(--rx-clave);}
.rxk.crit[aria-pressed="true"]{background:var(--rx-clave);color:#fff;}
.rxk.info{text-decoration-color:var(--rx-info);}
.rxk.info[aria-pressed="true"]{background:var(--rx-info);color:var(--rx-tinta);}