/* =========================================================
   CIRROSIS · HIPERTENSIÓN PORTAL — componentes de la ficha
   ========================================================= */
/* escalera de valores GPVH (termómetro) */
.hpx-ladder{display:flex;flex-direction:column;gap:6px;margin:14px 0 20px;}
.hpx-step{display:flex;align-items:center;gap:13px;background:var(--surface);
  border:1px solid var(--line);border-left:5px solid var(--line-strong);
  border-radius:var(--r-sm);padding:9px 14px;}
.hpx-step .lv{font-family:var(--mono);font-size:14px;font-weight:600;
  color:var(--ink);flex:0 0 92px;}
.hpx-step .tx{font-size:13.5px;color:var(--muted);line-height:1.45;}
.hpx-step .tx b{color:var(--ink);}
.hpx-step.s-normal{border-left-color:var(--mnemo);}
.hpx-step.s-sub{border-left-color:var(--pearl);}
.hpx-step.s-hpcs{border-left-color:var(--tangelo);background:var(--tangelo-soft);}
.hpx-step.s-bleed{border-left-color:var(--crit);background:var(--crit-soft);}
.hpx-step.s-bleed .lv{color:var(--crit-ink);}

/* Ley de Ohm */
.hpx-ohm{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px 16px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-md);padding:18px 20px;margin:14px 0 10px;text-align:center;}
.hpx-ohm .term{font-family:var(--serif);font-size:1.06rem;font-weight:600;line-height:1.25;}
.hpx-ohm .term small{display:block;font-family:var(--sans);font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;color:var(--faint);margin-top:2px;}
.hpx-ohm .op{font-family:var(--mono);font-size:1.35rem;color:var(--faint);}
.hpx-ohm .t-r{color:var(--crit-ink);}
.hpx-ohm .t-f{color:var(--accent-ink);}

/* contraste dos territorios (hígado vs esplácnico) */
.hpx-vs{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0 12px;}
@media(max-width:560px){.hpx-vs{grid-template-columns:1fr;}}
.hpx-col{background:var(--surface);border:1px solid var(--line);
  border-top:4px solid var(--accent);border-radius:var(--r-md);padding:14px 16px;}
.hpx-col.res{border-top-color:var(--crit);}
.hpx-col h4{font-family:var(--serif);font-size:1.02rem;font-weight:600;margin-bottom:1px;color:var(--ink);}
.hpx-col .terr{font-size:11px;text-transform:uppercase;letter-spacing:.06em;font-weight:700;margin-bottom:9px;}
.hpx-col.res .terr{color:var(--crit-ink);}
.hpx-col.dil .terr{color:var(--accent-ink);}
.hpx-col ul{margin:0;padding-left:17px;}
.hpx-col li{font-size:13px;margin-bottom:5px;color:var(--ink);line-height:1.45;}

/* historia natural (Baveno VII) */
.hpx-grad{height:9px;border-radius:var(--r-xs);margin:8px 0 4px;
  background:linear-gradient(90deg,var(--mnemo),var(--pearl),var(--tangelo),var(--crit));}
.hpx-grad-lbl{display:flex;justify-content:space-between;font-size:11px;
  color:var(--faint);margin:0 2px 16px;}
.hpx-hist{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 6px;}
.hpx-ph{flex:1;min-width:150px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:11px 13px;}
.hpx-ph .st{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.05em;color:var(--accent-ink);font-weight:600;margin-bottom:5px;}
.hpx-ph.dec{border-color:var(--crit);}
.hpx-ph.dec .st{color:var(--crit-ink);}
.hpx-ph p{font-size:var(--fs-tag);color:var(--muted);margin:0;line-height:1.45;}
.hpx-ph b{color:var(--ink);}

/* cabeza de medusa (SVG nativo) */
.cm-skin{fill:var(--surface-2);stroke:var(--line-strong);stroke-width:2;}
.cm-vein{fill:none;stroke:var(--accent-ink);stroke-width:2.6;stroke-linecap:round;opacity:.85;}
.cm-vein.thick{stroke-width:3.4;}
.cm-umbi{fill:var(--ink);}
.cm-umbi-ring{fill:none;stroke:var(--muted);stroke-width:1.6;opacity:.6;}
.cm-lbl{font-family:var(--sans);font-size:12px;font-weight:600;fill:var(--muted);}

/* ============ Mapa arterial del ACV (interactivo) ============ */
.acv-wrap{display:grid;grid-template-columns:1.05fr 1fr;gap:16px;margin:16px 0 8px;align-items:start;}
@media(max-width:860px){.acv-wrap{grid-template-columns:1fr;}}
.acv-col{display:flex;flex-direction:column;gap:12px;}
.acv-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:12px 12px 8px;box-shadow:var(--shadow-2);}
.acv-card h4{margin:0 0 4px;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;}
.acv-svg{width:100%;height:auto;display:block;}

.art{cursor:pointer;outline:none;}
.art .hit{stroke:transparent;stroke-width:18;fill:none;stroke-linecap:round;}
.art .vessel{stroke:var(--acv-vaso);stroke-width:5;fill:none;stroke-linecap:round;transition:stroke .15s,stroke-width .15s;}
.art .clot{fill:var(--acv-trombo);opacity:0;transition:opacity .15s;}
.art:hover .vessel,.art:focus .vessel{stroke:var(--accent-ink);stroke-width:7;}
.art.occluded .vessel{stroke:var(--crit);stroke-width:8;stroke-dasharray:3 5;}
.art.occluded .clot{opacity:1;}
.art-lbl{font-size:9.5px;fill:var(--muted);font-weight:600;pointer-events:none;}
.brain-base{fill:var(--surface-2);stroke:var(--line-strong);stroke-width:1.5;opacity:.6;}

.terr{fill:var(--surface-2);stroke:var(--line-strong);stroke-width:1;opacity:.5;transition:fill .2s,opacity .2s;}
.terr.on{fill:var(--crit-soft);stroke:var(--crit);stroke-width:2.2;opacity:1;}
.terr-lbl{font-size:9px;fill:var(--faint);pointer-events:none;font-weight:600;}
.brain-lat{fill:none;stroke:var(--line-strong);stroke-width:1.5;}

.bodyreg{fill:var(--surface-2);stroke:var(--line-strong);stroke-width:1;transition:fill .25s;}
.bodyreg.on{fill:var(--crit);stroke:var(--crit-ink);}
.body-mid{stroke:var(--line-strong);stroke-width:1;stroke-dasharray:3 4;opacity:.7;}
.body-side{font-size:9.5px;fill:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em;}

.acv-panel{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--crit);border-radius:var(--r-lg);padding:14px 16px;box-shadow:var(--shadow-2);min-height:130px;}
.acv-panel .ph{font-family:var(--serif);font-size:1.05rem;font-weight:600;color:var(--ink);margin:0 0 2px;line-height:1.25;}
.acv-panel .pmeta{font-size:12px;color:var(--muted);margin:0 0 8px;}
.acv-lado{font-size:13px;font-weight:700;color:var(--crit-ink);margin:0 0 8px;}
.acv-cl{margin:0;padding-left:18px;}
.acv-cl li{font-size:13.5px;line-height:1.5;margin-bottom:5px;color:var(--ink);}
.acv-hint{font-size:13px;color:var(--muted);font-style:italic;margin:0;}
.acv-reset{margin-top:10px;font-size:12px;padding:5px 12px;border:1px solid var(--line-strong);border-radius:var(--r-sm);background:var(--surface-2);color:var(--muted);cursor:pointer;}
.acv-reset:hover{color:var(--ink);border-color:var(--muted);}

/* ============ hidrodinámica de la IC (widget de cardiología) ============ */
/* Todo va bajo .hidro: el widget trae su propia paleta de vasos (--h-*) y
   hereda del proyecto el resto de los tokens. */
.hidro{
  --h-art:#c8323c; --h-art-2:#efa3a8; --h-art-osc:#8e1e26;
  --h-ven:#2f6ba4; --h-ven-2:#9dc0dd; --h-ven-osc:#1b3f66;
  --h-tejido:#efe7dc; --h-tejido-l:#f7f1e8; --h-borde:#cfc3b2;
  --h-cong:#6b4590; --h-term:#c98a1e;
  --h-mio:#e2a19c; --h-mio-borde:#9c4a4c; --h-cav-art:#b3303b; --h-cav-ven:#2f64a0;
  --h-pulm:#e6ebef; --h-pulm-2:#d3dce4; --h-rot-cam:#ffffff; }
html[data-theme="dark"] .hidro{
  --h-art:#e2545e; --h-art-2:#7d2a31; --h-art-osc:#f08b93;
  --h-ven:#4d90cf; --h-ven-2:#24466b; --h-ven-osc:#8cc0ee;
  --h-tejido:#232936; --h-tejido-l:#1c212b; --h-borde:#39424f;
  --h-cong:#a586c9; --h-term:#e0a83c;
  --h-mio:#8a4d52; --h-mio-borde:#c07c82; --h-cav-art:#7c2029; --h-cav-ven:#1f4670;
  --h-pulm:#2a313b; --h-pulm-2:#232a33; --h-rot-cam:#ffffff; }
.hidro .mando{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 12px}
.hidro .paso{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:4px;box-shadow:var(--shadow-1);gap:2px;flex-wrap:wrap}
.hidro .paso button{border:0;background:transparent;padding:7px 13px;border-radius:var(--r-md);font-size:13.5px;
  font-weight:600;color:var(--muted);transition:background .18s,color .18s;white-space:nowrap}
.hidro .paso button:hover{background:var(--h-tejido)}
.hidro .paso button[aria-pressed="true"]{background:var(--ink);color:var(--surface)}
.hidro .paso button .n{opacity:.55;font-variant-numeric:tabular-nums;margin-right:6px}
.hidro .mani{display:flex;gap:6px;flex-wrap:wrap}
.hidro .mani button{border:1px solid var(--line);background:var(--surface);border-radius:var(--r-pill);padding:7px 13px;
  font-size:12.5px;font-weight:600;box-shadow:var(--shadow-1);transition:.18s}
.hidro .mani button:hover{border-color:var(--muted)}
.hidro .mani button[aria-pressed="true"]{background:var(--h-cong);border-color:var(--h-cong);color:#fff}
/* Adentro de una ficha la columna de lectura es mucho más angosta que la página
   suelta de donde salió el widget, y una media query mide el viewport, no el
   contenedor: a 1400px de pantalla el dibujo igual quedaba en 310px. La container
   query mide lo que corresponde — el ancho real disponible. */
.hidro{container-type:inline-size}
.hidro .cols{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
@container (min-width:920px){
  .hidro .cols{grid-template-columns:minmax(0,1fr) 360px}
}
.hidro .lienzo{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);padding:6px;position:relative;overflow:hidden}
.hidro svg#mapa{display:block;width:100%;height:auto}
.hidro .silueta{fill:var(--h-tejido-l);stroke:var(--h-borde);stroke-width:1.4}
.hidro .organo{fill:var(--h-tejido);stroke:var(--h-borde);stroke-width:1.4;transition:stroke .35s,stroke-width .35s}
.hidro .organo.foco{stroke:var(--h-cong);stroke-width:3}
.hidro .o-pulm{fill:var(--h-pulm);stroke:var(--h-pulm-2);stroke-width:1.6}
.hidro .o-hig{fill:#e0cfbc}
.hidro .o-int{fill:#eadcc6}
.hidro .o-rin{fill:#d9c7b4}
html[data-theme="dark"] .hidro .o-pulm{fill:var(--h-pulm)}
.hidro .traquea{fill:var(--h-tejido);stroke:var(--h-borde);stroke-width:1.2}
.hidro .diafragma{fill:none;stroke:var(--h-borde);stroke-width:1.6}
.hidro .bronquio{fill:none;stroke:var(--h-borde);stroke-width:1.4;stroke-linecap:round;opacity:.7;pointer-events:none}
.hidro .fisura{fill:none;stroke:var(--h-borde);stroke-width:1;stroke-dasharray:3 3;pointer-events:none}
html[data-theme="dark"] .hidro .o-hig{fill:#3a3029}
html[data-theme="dark"] .hidro .o-int{fill:#332c22}
html[data-theme="dark"] .hidro .o-rin{fill:#3d332a}
.hidro .agua-ven{fill:var(--h-ven);opacity:.40}
.hidro .agua-cong{fill:var(--h-cong);opacity:.42}
.hidro .tubo{fill:none;stroke-linecap:round;stroke-linejoin:round}
.hidro .t-art{stroke:var(--h-art-2)}
.hidro .t-ven{stroke:var(--h-ven-2)}
.hidro .casing{fill:none;stroke:var(--surface);stroke-linecap:round;stroke-linejoin:round;opacity:.92}
.hidro .flecha{fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.hidro .f-art{stroke:var(--h-art-osc)}
.hidro .f-ven{stroke:var(--h-ven-osc)}
html[data-theme="dark"] .hidro .f-art{stroke:#1a1013}
html[data-theme="dark"] .hidro .f-ven{stroke:#0d1720}
.hidro .brillo{fill:none;stroke-linecap:round;stroke-linejoin:round;pointer-events:none;opacity:.55}
.hidro .b-art{stroke:#fff}
.hidro .b-ven{stroke:#fff}
html[data-theme="dark"] .hidro .brillo{opacity:.30}
html[data-theme="dark"] .hidro .b-art{stroke:var(--h-art-osc)}
html[data-theme="dark"] .hidro .b-ven{stroke:var(--h-ven-osc)}
.hidro .gota{pointer-events:none}
.hidro .tubo, .hidro .brillo, .hidro .casing, .hidro .flecha, .hidro .gota{transition:opacity .35s}
.hidro .apagado{opacity:.10!important}
.hidro .casing.apagado{opacity:.35!important}
.hidro .tubo.via{filter:drop-shadow(0 0 5px var(--h-cong))}
.hidro .g-art{fill:var(--h-art)}
.hidro .g-ven{fill:var(--h-ven)}
.hidro .mio{fill:var(--h-mio);stroke:var(--h-mio-borde);stroke-width:1.2;stroke-linejoin:round}
.hidro .cav{stroke:none}
.hidro .cav.c-art{fill:var(--h-cav-art)}
.hidro .cav.c-ven{fill:var(--h-cav-ven)}
.hidro .valva{fill:none;stroke:#fbf3e8;stroke-width:2.2;stroke-linecap:round}
.hidro .rot-camara{font-size:10px;font-weight:800;fill:var(--h-rot-cam);letter-spacing:.04em;pointer-events:none}
.hidro .corazon{filter:drop-shadow(0 2px 3px rgba(60,30,30,.18))}
.hidro .yug-vaina{fill:var(--h-tejido);stroke:var(--h-borde);stroke-width:1.1}
.hidro .yug-columna{fill:var(--h-ven);fill-opacity:.8}
.hidro .rot{font-size:11.5px;fill:var(--muted);font-weight:600}
.hidro .rot-org{font-size:12.5px;fill:var(--muted);font-weight:700}
.hidro .rot-min{font-size:10.5px;fill:var(--muted);font-weight:600;opacity:.85}
.hidro .rot-vaso{font-size:10px;fill:var(--muted);font-weight:700;letter-spacing:.01em;
  paint-order:stroke fill;stroke:var(--surface);stroke-width:3.2;stroke-linejoin:round}
.hidro .guia{stroke:var(--h-borde);stroke-width:1;stroke-dasharray:2 3;fill:none}
.hidro .pin{cursor:pointer}
.hidro .organo.foco{filter:drop-shadow(0 0 7px var(--h-cong))}
.hidro .pin circle{fill:var(--surface);stroke:var(--h-cong);stroke-width:2;transition:fill .2s;
  animation:hidroPinLatir 2.8s ease-in-out infinite}
@keyframes hidroPinLatir{0%,100%{stroke-opacity:1}50%{stroke-opacity:.42}}
@media(prefers-reduced-motion:reduce){
  .hidro svg *{animation:none!important;transition:none!important}
}
.hidro .pin text{font-size:10.5px;font-weight:800;fill:var(--h-cong);text-anchor:middle;pointer-events:none}
.hidro .pin:hover circle, .hidro .pin.on circle{fill:var(--h-cong)}
.hidro .pin:hover text, .hidro .pin.on text{fill:#fff}
.hidro .regla{stroke:var(--muted);stroke-width:1;opacity:.5}
.hidro .regla-txt{font-size:9.5px;fill:var(--muted);font-weight:600}
.hidro-presenter-bar{display:none}
.hidro .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-1);padding:16px 17px 18px}
.hidro .panel h2{margin:0;font-size:18.5px;letter-spacing:-.01em}
.hidro .panel .tag{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin-bottom:5px}
.hidro .panel .lead{font-size:13.5px;color:var(--muted);margin:5px 0 12px}
.hidro .prosa{font-size:14px;margin:0}
.hidro .prosa p{margin:0 0 9px}
.hidro .prosa b{color:var(--ink)}
.hidro .numeros{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:0 0 13px}
.hidro .num{background:var(--h-tejido-l);border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 6px;text-align:center}
.hidro .num .k{font-size:9.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);font-weight:700}
.hidro .num .v{font-size:17px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.25}
.hidro .num .u{font-size:9.5px;color:var(--muted)}
.hidro .num.alto{border-color:var(--crit)}
.hidro .num.alto .v{color:var(--crit)}
.hidro .num.bajo{border-color:var(--h-ven)}
.hidro .num.bajo .v{color:var(--h-ven)}
.hidro h3.sec{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);
  margin:14px 0 8px;padding-top:11px;border-top:1px solid var(--line)}
.hidro .chips{display:flex;flex-wrap:wrap;gap:6px}
.hidro .chips button{border:1px solid var(--line);background:var(--h-tejido-l);border-radius:var(--r-pill);
  padding:5px 11px;font-size:12.5px;font-weight:600;transition:.16s}
.hidro .chips button:hover{border-color:var(--h-cong);color:var(--h-cong)}
.hidro .chips button[aria-pressed="true"]{background:var(--h-cong);border-color:var(--h-cong);color:#fff}
.hidro .detalle{margin-top:11px;background:var(--h-tejido-l);border:1px solid var(--line);
  border-left:3px solid var(--h-cong);border-radius:var(--r-sm);padding:11px 12px;font-size:13.5px}
.hidro .detalle h4{margin:0 0 5px;font-size:14.5px}
.hidro .detalle p{margin:0 0 7px}
.hidro .detalle p:last-child{margin:0}
.hidro .detalle .via{font-size:12px;color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}
.hidro .vacio{color:var(--muted);font-size:13px;font-style:italic;margin:11px 0 0}
.hidro .cite{font-size:11.5px;color:var(--muted);margin:14px 0 0;padding-top:10px;border-top:1px solid var(--line)}
.hidro .aviso{margin-top:10px;font-size:12px;color:var(--muted);background:var(--h-tejido-l);
  border:1px dashed var(--line);border-radius:var(--r-sm);padding:9px 10px}
.hidro .leyenda{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--muted);
  padding:8px 10px 3px;align-items:center}
.hidro .leyenda i{width:22px;height:6px;border-radius:3px;display:inline-block;vertical-align:middle;margin-right:5px}

/* bloque de entrada desde la ficha de IC crónica hacia la herramienta */
.hidro-entrada{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:18px;align-items:center;
  background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--h-cong);
  border-radius:var(--r-lg);padding:16px 18px;margin:18px 0 14px}
@media(max-width:640px){.hidro-entrada{grid-template-columns:1fr}}
.hidro-entrada h3{margin:0 0 7px;font-family:var(--serif);font-size:1.05rem;color:var(--ink)}
.hidro-entrada p{margin:0 0 8px;font-size:13.5px;color:var(--muted);line-height:1.5}
.hidro-entrada p b{color:var(--ink)}
.hidro-entrada p:last-child{margin:0}
.hidro-entrada-fig{width:100%;height:auto;display:block;max-height:250px}
.hidro-cta{display:inline-block;font-weight:700;font-size:13.5px;color:var(--h-cong);
  text-decoration:none;border-bottom:1px solid transparent;transition:border-color .18s}
.hidro-cta:hover{border-bottom-color:var(--h-cong)}

/* órganos propios del mapa de hipertensión portal */
.o-bazo{fill:#d8c2c6} .o-est{fill:#e7d3c8} .o-eso{fill:#e4d6cc} .o-cer{fill:#d9cfe2}
.hidro .o-cer.cong{fill:var(--h-cong)}
html[data-theme="dark"] .o-bazo{fill:#3a2c30}
html[data-theme="dark"] .o-est{fill:#382e28}
html[data-theme="dark"] .o-eso{fill:#332b26}
html[data-theme="dark"] .o-cer{fill:#332b3e}
/* variante apilada: para el mapa portal, que es apaisado y no entra en una columna angosta */
.hidro-entrada.apilada{grid-template-columns:1fr}
.hidro-entrada.apilada .hidro-entrada-fig{max-height:300px;margin-top:4px}

/* ============ simulador de localización lesional (neuroeje) ============ */
/* Comparte el contenedor .hidro con los simuladores hidrodinámicos, así que
   hereda paleta, panel y controles. Lo propio es el esquema y el déficit. */
.hidro .lz-pieza{fill:var(--h-tejido);stroke:var(--h-borde);stroke-width:1.4}
.hidro .n-cort{fill:#e6ddcf} .hidro .n-cap{fill:#dcd0be}
.hidro .n-tronco{fill:#e2d8c8} .hidro .n-medula{fill:#e8e0d2} .hidro .n-musc{fill:#e0cdc4}
html[data-theme="dark"] .hidro .n-cort{fill:#2e2a24}
html[data-theme="dark"] .hidro .n-cap{fill:#332e27}
html[data-theme="dark"] .hidro .n-tronco{fill:#2b2721}
html[data-theme="dark"] .hidro .n-medula{fill:#302b24}
html[data-theme="dark"] .hidro .n-musc{fill:#382c28}
.hidro .lz-cauda{fill:none;stroke:var(--h-borde);stroke-width:2;stroke-linecap:round}
.hidro .lz-nivel{stroke:var(--h-borde);stroke-width:1;stroke-dasharray:3 3;opacity:.7}
.hidro .lz-via{fill:none;stroke-width:5.5;stroke-linecap:round;stroke-linejoin:round;
  opacity:.55;transition:opacity .3s,stroke-width .3s}
.hidro .lz-via.cortada{opacity:1;stroke-width:7}
.hidro .lz-imp{pointer-events:none}
.hidro .lz-marca-aro{fill:var(--crit);fill-opacity:.14;stroke:var(--crit);stroke-width:2.4;
  stroke-dasharray:6 4}
.hidro .lz-marca-fig{fill:none;stroke:var(--crit);stroke-width:3;stroke-linecap:round}
.hidro .lz-deficit{margin:2px 0 10px}
.hidro .lz-fila{display:flex;align-items:center;gap:9px;padding:6px 0;
  border-bottom:1px solid var(--line);font-size:13.5px}
.hidro .lz-fila:last-child{border-bottom:0}
.hidro .lz-fila i{width:12px;height:12px;border-radius:var(--r-pill);flex:0 0 12px}
.hidro .lz-fila.otro i{background:var(--muted);opacity:.45}
.hidro .lz-mod{flex:1;color:var(--ink)}
.hidro .lz-lado{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;
  padding:3px 8px;border-radius:var(--r-pill);white-space:nowrap}
.hidro .lz-lado.ipsi{background:var(--h-ven-2);color:var(--h-ven-osc)}
.hidro .lz-lado.contra{background:var(--h-art-2);color:var(--h-art-osc)}
.hidro .lz-lado.bil,.hidro .lz-lado.bilateral{background:var(--h-tejido);color:var(--muted)}
.hidro .lz-sitios button{font-size:13px}

/* el sujeto: el déficit pintado sobre el cuerpo, una capa por modalidad.
   multiply hace que donde se superponen salga la mezcla —rojo y azul dan
   violeta, azul y ámbar dan verde, las tres dan marrón— así que la
   combinación de déficits se lee como un color, sin leyenda que memorizar. */
.hidro .lz-sujeto{isolation:isolate}
.hidro .lz-piel{fill:var(--h-tejido);stroke:var(--h-borde);stroke-width:1.4}
.hidro .lz-pint{opacity:0;mix-blend-mode:multiply;transition:opacity .35s;pointer-events:none}
.hidro .lz-pint.on{opacity:.62}
html[data-theme="dark"] .hidro .lz-pint{mix-blend-mode:screen}
html[data-theme="dark"] .hidro .lz-pint.on{opacity:.5}
.hidro .lz-media{stroke:var(--h-borde);stroke-width:1;stroke-dasharray:4 4;opacity:.6}

/* Ficha Semiol�gica Modal */
.ficha-modal {
  display: none;
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  z-index: 9999;
  align-items: center;
  justify-content: center;
}
.ficha-modal.active {
  display: flex;
}
.ficha-modal-overlay {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(2px);
}
.ficha-modal-content {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 1.5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  z-index: 1;
}
.ficha-modal-close {
  position: absolute;
  top: 10px; right: 10px;
  background: none; border: none;
  font-size: 1.5rem;
  cursor: pointer;
  color: var(--text-sec);
}
.ficha-modal-close:hover {
  color: var(--text);
}
button.ficha-trigger {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  background-color: #fdf8eb;
  border: 1px solid #e8e0cc;
  border-radius: var(--r-md);
  padding: 16px 20px;
  margin: 8px 0; /* Reducido para que no queden tan separados */
  /* La tarjeta es crema en los dos temas: el texto va oscuro fijo, si no en
     oscuro --text sale claro sobre crema y no se lee. */
  color: #3d3222;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 600;
  box-shadow: 0 4px 6px rgba(0,0,0,0.06);
  transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
  cursor: pointer;
}

button.ficha-trigger::after {
  content: '';
  position: absolute;
  top: -1px; left: -1px; right: -1px; bottom: -1px;
  border: 2px solid var(--tangelo);
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}

button.ficha-trigger:hover::after,
button.ficha-trigger:focus-visible::after {
  opacity: 1;
  animation: drawBorder 0.5s forwards;
}

@keyframes drawBorder {
  0%   { clip-path: polygon(0 0, 0 0, 0 0, 0 0, 0 0); }
  25%  { clip-path: polygon(0 0, 100% 0, 100% 0, 100% 0, 100% 0); }
  50%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%); }
  75%  { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 100%); }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0); }
}

button.ficha-trigger:hover,
button.ficha-trigger:focus-visible {
  outline: none;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.08);
  color: #3d3222;
  text-decoration: none;
}
button.ficha-trigger::before {
  content: '✦ ';
  margin-right: 6px;
}