/* =====================================================================
   VALAD · Aplicación clínica
   Construida sobre tokens.css. Conserva los nombres de clase del HTML
   original (Crónicas MF) para que las calculadoras funcionen sin cambios.
   ===================================================================== */

/* ---------- Alias heredados (usados en estilos en línea del JS) ---------- */
:root{
  --paper:var(--bg);
  --accent-deep:var(--accent-strong);
  --good:var(--risk-low); --mid:#a86e00; --bad:var(--risk-vhigh);
  --azul:var(--accent); --azul-osc:var(--accent-strong); --verde:var(--risk-low); --amarillo:var(--risk-mod); --naranja:var(--risk-high);
  --rojo:var(--risk-vhigh); --rojo-osc:var(--risk-max); --gris:var(--surface-2); --borde:var(--line); --morado:var(--note-bd); --cian:var(--info-bd);
  --shadow:var(--shadow-2);
  --serif:var(--font-sans); --sans:var(--font-sans);
}
:root[data-theme="dark"]{ --mid:#e8b44a; }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]){ --mid:#e8b44a; } }

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--bar-h) + env(safe-area-inset-top,0px) + 16px); }
body{ font-size:var(--fs-base); min-height:100dvh; overscroll-behavior-y:none; }
a{ color:var(--accent-strong); text-underline-offset:3px; text-decoration-thickness:1px; }
b,strong{ font-weight:620; }
button{ -webkit-user-select:none; user-select:none; touch-action:manipulation; }

.nojs{ background:var(--danger-bd); color:#fff; padding:12px 18px; font-size:15px; }

/* =====================================================================
   Barra superior
   ===================================================================== */
.appbar{
  position:sticky; top:0; z-index:var(--z-bar);
  height:calc(var(--bar-h) + env(safe-area-inset-top,0px)); padding:env(safe-area-inset-top,0px) 16px 0;
  display:flex; align-items:center; gap:14px;
  background:color-mix(in srgb,var(--bg) 84%,transparent);
  backdrop-filter:saturate(1.5) blur(14px); -webkit-backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); flex:none; padding:6px 4px; border-radius:var(--r-sm); }
.brand svg{ width:26px; height:26px; color:var(--accent); flex:none; }
.brand-name{ font-weight:650; letter-spacing:.16em; font-size:14.5px; }
.brand-ctx{ font-size:var(--fs-xs); color:var(--muted); padding-left:12px; margin-left:2px; border-left:1px solid var(--line); line-height:1.2; }
.icon-btn{
  flex:none; width:40px; height:40px; border-radius:var(--r-sm); border:1px solid var(--line); background:var(--surface);
  color:var(--ink-2); display:grid; place-items:center; cursor:pointer;
  transition:background-color var(--d-fast) var(--ease-out), border-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out), transform var(--d-instant) var(--ease-out);
}
.icon-btn:active{ transform:scale(.96); }
.icon-btn svg{ width:18px; height:18px; }
.menu-btn{ display:grid; }
.bar-end{ margin-left:auto; display:flex; gap:6px; }
@media (hover:hover){ .icon-btn:hover{ border-color:var(--line-strong); color:var(--ink); background:var(--surface-2); } }

/* ---------- Franja del paciente ---------- */
.pt-strip{ display:flex; align-items:center; gap:6px; overflow-x:auto; scrollbar-width:none; min-width:0; flex:1; padding:2px 0; mask-image:linear-gradient(90deg,#000 92%,transparent); -webkit-mask-image:linear-gradient(90deg,#000 92%,transparent); }
.pt-strip::-webkit-scrollbar{ display:none; }
.pt-lbl{ font-size:var(--fs-xs); color:var(--muted); flex:none; margin-right:4px; }
.pt{ flex:none; display:inline-flex; gap:5px; align-items:baseline; font-size:12.5px; padding:4px 10px; border-radius:var(--r-sm); background:var(--surface); border:1px solid var(--line); color:var(--muted); white-space:nowrap; }
.pt b{ color:var(--ink); font-weight:560; font-family:var(--font-mono); font-size:12px; font-variant-numeric:tabular-nums; }
.pt.flag{ background:var(--accent-soft); border-color:transparent; color:var(--accent-strong); font-weight:600; }
a.pt-open{ flex:none; font-size:var(--fs-xs); color:var(--accent-strong); font-weight:600; text-decoration:none; padding:4px 8px; border-radius:var(--r-sm); }
a.pt-open:hover{ background:var(--accent-soft); }

/* =====================================================================
   Estructura
   ===================================================================== */
.shell{ display:grid; grid-template-columns:var(--nav-w) minmax(0,1fr); min-height:calc(100dvh - var(--bar-h)); }
#nav{
  position:sticky; top:calc(var(--bar-h) + env(safe-area-inset-top,0px)); align-self:start;
  height:calc(100dvh - var(--bar-h) - env(safe-area-inset-top,0px)); overflow-y:auto; overscroll-behavior:contain;
  background:var(--bg); border-right:1px solid var(--line); padding:14px 12px 28px;
  display:flex; flex-direction:column; gap:1px; scrollbar-width:thin; scrollbar-color:var(--line-strong) transparent; scroll-padding-top:72px;
}
.nav-search{ position:sticky; top:-14px; z-index:2; margin:-14px -12px 6px; padding:14px 12px 10px; background:var(--bg); }
.nav-search input{
  width:100%; height:40px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--surface); color:var(--ink);
  padding:0 40px 0 36px; font:inherit; font-size:14px; transition:border-color var(--d-fast), box-shadow var(--d-fast);
}
.nav-search input::placeholder{ color:var(--muted); }
.nav-search input:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); }
.nav-search svg{ position:absolute; left:24px; top:26px; width:16px; height:16px; color:var(--muted); pointer-events:none; }
.nav-search kbd{ position:absolute; right:22px; top:24px; font:500 11px/1 var(--font-mono); color:var(--muted); border:1px solid var(--line); border-radius:5px; padding:4px 6px; background:var(--bg); }
.nav-group{ font-size:var(--fs-xs); font-weight:600; color:var(--muted); padding:16px 12px 6px; letter-spacing:var(--track-label); }
#nav .chip{
  position:relative; display:flex; flex-direction:column; align-items:flex-start; width:100%; text-align:left; border:0; background:none; color:var(--ink);
  border-radius:var(--r-sm); padding:8px 12px; font:inherit; font-size:14px; font-weight:540; cursor:pointer; line-height:1.3;
  transition:background-color var(--d-fast) var(--ease-out), color var(--d-fast) var(--ease-out);
}
#nav .chip small{ font-size:12px; font-weight:400; color:var(--muted); margin-top:2px; }
#nav .chip::before{ content:""; position:absolute; left:0; top:9px; bottom:9px; width:2px; border-radius:2px; background:var(--accent); transform:scaleY(0); transition:transform var(--d-base) var(--ease-out); }
#nav .chip.on{ background:var(--surface); color:var(--accent-strong); box-shadow:var(--shadow-1); }
#nav .chip.on::before{ transform:scaleY(1); }
#nav .chip.on small{ color:var(--accent-strong); opacity:.8; }
#nav .chip:active{ transform:scale(.99); }
@media (hover:hover){ #nav .chip:not(.on):hover{ background:var(--surface-2); } }
#nav .chip[hidden], .nav-group[hidden]{ display:none; }
.nav-empty{ font-size:13px; color:var(--muted); padding:8px 12px; display:none; }
.nav-foot{ margin-top:auto; padding:18px 12px 0; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:10px; }
.nav-foot a{ font-size:var(--fs-xs); color:var(--muted); text-decoration:none; }
.nav-foot a:hover{ color:var(--accent-strong); }
#main{ min-width:0; padding:36px clamp(16px,3.4vw,52px) 88px; max-width:var(--content-max); width:100%; }
.scrim{ display:none; }

/* =====================================================================
   Tipografía de contenido
   ===================================================================== */
h1{ font-size:var(--fs-2xl); line-height:1.1; font-weight:640; letter-spacing:var(--track-head); color:var(--ink); margin:0 0 14px; text-wrap:balance; }
h2.sec{ font-size:var(--fs-lg); font-weight:620; letter-spacing:-.01em; color:var(--ink); padding:0 0 8px; border-bottom:1px solid var(--line); margin:40px 0 14px; text-wrap:balance; }
h3, h3.q{ font-size:15px; font-weight:620; color:var(--ink); margin:20px 0 6px; }
p, li{ font-size:14.5px; text-wrap:pretty; }
.mod{ display:none; }
.mod.on{ display:block; animation:modIn var(--d-slow) var(--ease-out) both; }
.mod > p, .mod > ul{ max-width:76ch; }
@keyframes modIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }

/* ---------- Metadatos del módulo (área, fuentes, revisión) ---------- */
.mod-meta{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:-4px 0 20px; font-size:var(--fs-xs); color:var(--muted); }
.mod-meta .area{ color:var(--accent-strong); font-weight:600; }
.mod-meta .srcs{ display:flex; flex-wrap:wrap; gap:6px; }
.mod-meta .s{ display:inline-flex; gap:6px; align-items:baseline; padding:3px 8px; border:1px solid var(--line); border-radius:var(--r-xs); background:var(--surface); color:var(--ink-2); }
.mod-meta .s i{ font-style:normal; font-family:var(--font-mono); font-size:11px; color:var(--muted); }
.mod-meta button{ border:0; background:none; color:var(--accent-strong); font:inherit; font-weight:600; cursor:pointer; padding:3px 4px; border-radius:var(--r-xs); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
.mod-meta .rev{ font-family:var(--font-mono); font-size:11px; }

/* =====================================================================
   Herramienta: título + tarjeta
   ===================================================================== */
h2.fig-title{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:16px; font-weight:620; line-height:1.35; color:var(--ink); letter-spacing:-.005em;
  background:var(--surface); border:1px solid var(--line); border-bottom:0; border-radius:var(--r-md) var(--r-md) 0 0; padding:16px 22px 14px; margin:30px 0 0;
  scroll-margin-top:calc(var(--bar-h) + 20px); text-wrap:balance;
}
h2.fig-title.inter{ background:var(--surface); }
.ft-kind{ font-size:11.5px; font-weight:600; color:var(--accent-strong); background:var(--accent-soft); padding:3px 8px; border-radius:var(--r-xs); letter-spacing:var(--track-label); }
.fig-wrap{ background:var(--surface); border:1px solid var(--line); border-top:1px solid var(--line); border-radius:0 0 var(--r-md) var(--r-md); padding:22px; overflow-x:auto; box-shadow:var(--shadow-2); margin-bottom:8px; }
h2.fig-title.inter + .fig-wrap{ box-shadow:var(--shadow-2); }
.fig-wrap:has(> .calc){ overflow:visible; }

/* ---------- Formulario ---------- */
.calc{ display:grid; grid-template-columns:minmax(270px,1fr) minmax(330px,1.25fr); gap:28px; align-items:start; }
.calc label{ display:block; font-size:12.5px; font-weight:560; color:var(--ink-2); margin:12px 0 5px; }
.calc input, .calc select{
  width:100%; height:42px; padding:0 12px; border:1px solid var(--line-strong); border-radius:var(--r-sm); background:var(--bg); color:var(--ink);
  font:inherit; font-size:15px; font-variant-numeric:tabular-nums; transition:border-color var(--d-fast) var(--ease-out), box-shadow var(--d-fast) var(--ease-out), background-color var(--d-fast);
}
.calc input:hover, .calc select:hover{ border-color:color-mix(in srgb,var(--line-strong) 60%,var(--ink-2)); }
.calc select{ padding-right:32px; appearance:none; -webkit-appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 17px) 18px, calc(100% - 12px) 18px; background-size:5px 5px; background-repeat:no-repeat; }
.calc input:focus, .calc select:focus{ outline:none; border-color:var(--accent); background-color:var(--surface); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent); }
.calc .inrow{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.inrow3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.calc h4{ margin:24px 0 2px; font-size:12.5px; font-weight:620; color:var(--muted); letter-spacing:var(--track-label); border-bottom:1px solid var(--line); padding-bottom:6px; }
.calc h4:first-child{ margin-top:0; }
.cks{ display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:4px 10px; margin-top:8px; }
.calc .cks label{
  display:flex; gap:10px; align-items:flex-start; font-weight:450; color:var(--ink); margin:0; font-size:13.5px; padding:8px 10px; border-radius:var(--r-sm); cursor:pointer; line-height:1.35;
  border:1px solid transparent; transition:background-color var(--d-fast) var(--ease-out), border-color var(--d-fast), color var(--d-fast);
}
.calc .cks label:has(input:checked){ background:var(--accent-soft); color:var(--accent-strong); border-color:color-mix(in srgb,var(--accent) 22%,transparent); }
@media (hover:hover){ .calc .cks label:hover{ background:var(--surface-2); } .calc .cks label:has(input:checked):hover{ background:var(--accent-soft); } }
.calc input[type=checkbox]{ width:17px; height:17px; flex:none; margin:1px 0 0; accent-color:var(--accent); }
.calc input[type=range]{ height:auto; border:0; padding:0; box-shadow:none; background:none; }

/* ---------- Panel de resultado ---------- */
.out{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:18px 20px 16px; font-size:14px; }
.calc > .out{
  position:sticky; top:calc(var(--bar-h) + env(safe-area-inset-top,0px) + 16px);
  max-height:calc(100dvh - var(--bar-h) - 36px); overflow:auto; overscroll-behavior:contain; scrollbar-width:thin;
  background:var(--bg); border-color:var(--line); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--surface) 60%,transparent);
}
.calc > .out::before{ content:"Resultado calculado"; display:flex; align-items:center; gap:8px; font-size:var(--fs-xs); font-weight:600; color:var(--accent-strong); margin-bottom:12px; letter-spacing:var(--track-label); }
.out h5{ margin:20px 0 6px; font-size:13.5px; font-weight:620; color:var(--ink); border-bottom:1px solid var(--line); padding-bottom:5px; }
.out h5:first-child{ margin-top:0; }
.out ul{ padding-left:18px; margin:6px 0; }
.out li{ font-size:13.8px; margin-bottom:6px; }
.out p{ font-size:14px; }
.kpi{ display:flex; gap:26px; flex-wrap:wrap; align-items:flex-end; margin-bottom:12px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.kpi > div{ min-width:96px; }
.big{ font-family:var(--font-sans); font-size:40px; font-weight:600; color:var(--ink); line-height:1; font-variant-numeric:tabular-nums lining-nums; letter-spacing:-.03em; }
.big.tick{ animation:tick var(--d-slow) var(--ease-out); }
@keyframes tick{ from{ opacity:.35; transform:translateY(4px); } to{ opacity:1; transform:none; } }
.hint{ font-size:12px; color:var(--muted); font-style:normal; }
.mini{ font-size:12px; color:var(--muted); }
.pill{ display:inline-block; padding:4px 11px; border-radius:var(--r-pill); font-weight:600; font-size:12.5px; margin:2px 4px 2px 0; letter-spacing:.005em; }
.ok{ color:var(--good); font-weight:650; } .warn{ color:var(--mid); font-weight:650; } .no{ color:var(--bad); font-weight:650; }

/* =====================================================================
   Tablas
   ===================================================================== */
.tw{ overflow-x:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; }
table{ border-collapse:separate; border-spacing:0; width:100%; margin:12px 0 22px; font-size:13.5px; }
caption{ caption-side:top; font-weight:620; text-align:left; color:var(--ink); margin-bottom:8px; font-size:14.5px; }
th, td{ border:0; border-bottom:1px solid var(--line); padding:9px 12px; text-align:left; vertical-align:top; }
th{ background:var(--surface-2); color:var(--ink-2); font-size:12px; font-weight:620; border-bottom:1px solid var(--line-strong); }
thead th:first-child, table tr:first-child th:first-child{ border-top-left-radius:var(--r-xs); }
thead th:last-child, table tr:first-child th:last-child{ border-top-right-radius:var(--r-xs); }
tbody tr{ transition:background-color var(--d-fast); }
@media (hover:hover){ tbody tr:hover td{ background:color-mix(in srgb,var(--surface-2) 70%,transparent); } }
table.dt td, table.dt th{ font-size:13px; }
table.dt td:first-child{ font-weight:620; color:var(--ink); min-width:150px; }
table.dt tr.dim td{ opacity:.5; }
td.efc{ min-width:170px; background:color-mix(in srgb,var(--ok-bg) 55%,transparent); }
.st{ display:inline-block; padding:2px 9px; border-radius:var(--r-pill); font-size:11.5px; font-weight:620; white-space:nowrap; }
.st-pref{ background:var(--risk-low); color:var(--risk-low-ink); }
.st-ok{ background:var(--ok-bg); color:var(--ok-tx); }
.st-prec{ background:var(--warn-bg); color:var(--warn-tx); box-shadow:inset 0 0 0 1px var(--warn-bd); }
.st-no{ background:var(--risk-vhigh); color:#fff; }
.st-esp{ background:var(--note-bg); color:var(--note-tx); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--note-bd) 45%,transparent); }

/* =====================================================================
   Recuadros
   ===================================================================== */
.note, .alert, .okbox, .ref, .asoc, .sync-note{ border-left:2px solid; border-radius:0 var(--r-sm) var(--r-sm) 0; padding:12px 16px; font-size:14px; margin:14px 0; max-width:none; }
.note{ background:var(--surface); border-color:var(--accent); color:var(--ink-2); box-shadow:inset 0 0 0 1px var(--line); }
.alert{ background:var(--danger-bg); border-color:var(--danger-bd); color:var(--danger-tx); }
.okbox{ background:var(--ok-bg); border-color:var(--ok-bd); color:var(--ok-tx); }
.ref{ background:var(--info-bg); border-color:var(--info-bd); color:var(--info-tx); }
.asoc, .sync-note{ background:var(--note-bg); border-color:var(--note-bd); color:var(--note-tx); }
.sync-note{ font-size:13px; }
.note b, .alert b, .okbox b, .ref b{ color:inherit; }
.note b{ color:var(--ink); }
.rec-card{ border:1px solid var(--line); border-radius:var(--r-md); padding:16px 20px; margin:14px 0; background:var(--surface); font-size:14px; }
.rec-card ul{ margin:8px 0 0; padding-left:18px; }
.gp{ font-size:13px; color:var(--ink-2); margin-top:8px; padding-left:14px; border-left:2px solid var(--line); }
.gp b{ color:var(--ink); }
.legend{ font-size:12.5px; color:var(--muted); margin-top:18px; border-top:1px solid var(--line); padding-top:12px; line-height:1.55; }
.src{ font-size:12px; color:var(--muted); }
.ev{ font-size:10.5px; font-weight:600; padding:1px 6px; border-radius:var(--r-xs); margin-right:3px; white-space:nowrap; font-family:var(--font-mono); letter-spacing:0; }
.ev-e{ background:var(--ok-bg); color:var(--ok-tx); }
.ev-i{ background:var(--info-bg); color:var(--info-tx); }
.ev-s{ background:var(--warn-bg); color:var(--warn-tx); }
.ev-n{ background:var(--danger-bg); color:var(--danger-tx); }
.g, .badge{ display:inline-block; padding:1px 8px; border-radius:var(--r-xs); font-size:11px; font-weight:620; background:var(--ink-2); color:var(--surface); margin-left:4px; white-space:nowrap; }

/* =====================================================================
   Subpestañas (control segmentado)
   ===================================================================== */
.subtabs{ display:inline-flex; flex-wrap:wrap; gap:3px; margin:8px 0 4px; padding:3px; background:var(--surface-3); border-radius:calc(var(--r-sm) + 3px); max-width:100%; }
.subtabs .chip{
  border:0; background:transparent; color:var(--ink-2); border-radius:var(--r-sm); padding:8px 14px; font:inherit; font-size:13.5px; font-weight:560; cursor:pointer; white-space:nowrap;
  transition:background-color var(--d-base) var(--ease-out), color var(--d-fast), box-shadow var(--d-base) var(--ease-out);
}
/* En pantallas muy angostas un rótulo largo se parte en dos líneas en vez de desbordar la página */
.subtabs .chip{ max-width:100%; }
@media (max-width:420px){ .subtabs .chip{ white-space:normal; text-align:left; } }
.subtabs .chip:active{ transform:scale(.98); }
.subtabs .chip.on{ background:var(--surface); color:var(--accent-strong); box-shadow:var(--shadow-1), 0 0 0 1px var(--line); }
@media (hover:hover){ .subtabs .chip:not(.on):hover{ color:var(--ink); } }
.sub{ display:none; }
.sub.on{ display:block; animation:modIn var(--d-base) var(--ease-out) both; }

/* =====================================================================
   ERC: mapa de calor y regla por TFG
   ===================================================================== */
.heat{ display:grid; grid-template-columns:150px repeat(3,1fr); gap:4px; min-width:620px; font-size:12.5px; }
.heat .hd{ background:var(--ink); color:var(--bg); text-align:center; padding:8px; border-radius:var(--r-xs); font-weight:600; }
.heat .rh{ background:var(--surface-2); padding:8px 10px; border-radius:var(--r-xs); font-weight:600; color:var(--ink); }
.heat .c{ border-radius:var(--r-xs); text-align:center; padding:11px 4px; font-weight:650; font-size:18px; font-family:var(--font-mono); cursor:pointer; transition:transform var(--d-fast) var(--ease-out), box-shadow var(--d-fast); border:0; box-shadow:inset 0 0 0 0 var(--ink); }
.heat .c:active{ transform:scale(.97); }
@media (hover:hover){ .heat .c:hover{ transform:scale(1.03); } }
.heat .c.sel{ box-shadow:inset 0 0 0 3px var(--ink), 0 0 0 2px var(--bg); }
.h-v{ background:var(--risk-low); color:var(--risk-low-ink); }
.h-a{ background:var(--risk-mod); color:var(--risk-mod-ink); }
.h-n{ background:var(--risk-high); color:var(--risk-high-ink); }
.h-r{ background:var(--risk-vhigh); color:var(--risk-vhigh-ink); }
.h-rr{ background:var(--risk-max); color:var(--risk-max-ink); }
#heatInfo{ margin-top:12px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm); padding:12px 16px; font-size:13.5px; min-height:48px; }
.slider-box{ background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm); padding:16px 18px; }
input[type=range]{ width:100%; accent-color:var(--accent); }
.dz{ display:inline-block; min-width:96px; text-align:center; padding:3px 9px; border-radius:var(--r-pill); font-size:11.5px; font-weight:620; color:#fff; }
.dz-ok{ background:var(--risk-low); } .dz-aj{ background:var(--risk-mod); color:var(--risk-mod-ink); } .dz-no{ background:var(--risk-vhigh); } .dz-na{ background:var(--risk-na); }
.scale-bar{ display:flex; height:10px; border-radius:var(--r-pill); overflow:hidden; margin:6px 0 2px; gap:2px; } .scale-bar div{ height:100%; }
.mark{ position:relative; height:10px; } .mark i{ position:absolute; top:-2px; border-left:6px solid transparent; border-right:6px solid transparent; border-bottom:9px solid var(--ink); transform:translateX(-6px); transition:left var(--d-base) var(--ease-out); }

/* =====================================================================
   Inicio de la app
   ===================================================================== */
.home-head{ display:grid; grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr); gap:28px 48px; align-items:end; padding:8px 0 30px; border-bottom:1px solid var(--line); }
.home-head h1{ font-size:var(--fs-3xl); line-height:1.02; letter-spacing:var(--track-display); margin:0 0 14px; max-width:16ch; }
.home-head p{ font-size:16px; color:var(--ink-2); max-width:54ch; margin:0 0 22px; }
.home-actions{ display:flex; flex-wrap:wrap; gap:10px; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; height:44px; padding:0 18px; border-radius:var(--r-sm); border:1px solid transparent;
  font:inherit; font-size:14.5px; font-weight:600; cursor:pointer; text-decoration:none; white-space:nowrap;
  transition:background-color var(--d-fast) var(--ease-out), border-color var(--d-fast), color var(--d-fast), transform var(--d-instant) var(--ease-out);
}
.btn:active{ transform:scale(.97); }
.btn svg{ width:18px; height:18px; }
.btn-primary{ background:var(--ink); color:var(--bg); }
.btn-ghost{ background:var(--surface); color:var(--ink); border-color:var(--line-strong); }
@media (hover:hover){ .btn-primary:hover{ background:var(--accent-strong); } .btn-ghost:hover{ border-color:var(--ink-2); } }
:root[data-theme="dark"] .btn-primary:hover{ background:var(--accent); color:var(--accent-ink); }
.home-stats{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); overflow:hidden; }
.home-stats div{ padding:16px 18px; }
.home-stats div + div{ border-left:1px solid var(--line); }
.home-stats b{ display:block; font-size:30px; font-weight:600; letter-spacing:-.03em; line-height:1; font-variant-numeric:tabular-nums; }
.home-stats span{ display:block; font-size:12.5px; color:var(--muted); margin-top:6px; }
.grp-t{ font-size:var(--fs-xs); font-weight:600; color:var(--muted); margin:34px 0 10px; letter-spacing:var(--track-label); display:flex; align-items:center; gap:12px; }
.grp-t::after{ content:""; flex:1; height:1px; background:var(--line); }
.home-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:10px; }
.hcard{
  display:flex; flex-direction:column; gap:5px; text-align:left; border:1px solid var(--line); border-radius:var(--r-md); padding:16px 18px 15px; background:var(--surface);
  cursor:pointer; font:inherit; color:var(--ink); width:100%;
  transition:border-color var(--d-fast) var(--ease-out), box-shadow var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
}
.hcard:active{ transform:scale(.985); }
@media (hover:hover){ .hcard:hover{ border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); box-shadow:var(--shadow-2); transform:translateY(-1px); } }
.hcard b{ font-size:15.5px; font-weight:620; color:var(--ink); letter-spacing:-.005em; }
.hcard span{ font-size:13.5px; color:var(--ink-2); line-height:1.45; }
.hcard em{ font-style:normal; font-size:12px; color:var(--accent-strong); margin-top:6px; font-family:var(--font-mono); letter-spacing:-.01em; }
.hwrap{ position:relative; display:flex; }
.hwrap .hcard{ flex:1; padding-right:48px; }
.fav{ position:absolute; top:9px; right:9px; width:36px; height:36px; border-radius:var(--r-sm); border:0; background:transparent; color:var(--muted); cursor:pointer; display:grid; place-items:center; transition:color var(--d-fast), background-color var(--d-fast), transform var(--d-base) var(--ease-spring); }
.fav:active{ transform:scale(.88); }
@media (hover:hover){ .fav:hover{ background:var(--surface-2); color:var(--accent-strong); } }
.fav svg{ width:18px; height:18px; fill:none; transition:fill var(--d-fast); }
.fav[aria-pressed="true"]{ color:var(--accent); }
.fav[aria-pressed="true"] svg{ fill:var(--accent); stroke:var(--accent); }
.home-how{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:12px; }
.home-how .rec-card{ margin:0; }
.home-how .rec-card:first-child{ grid-column:1 / -1; }

/* =====================================================================
   Ficha del paciente
   ===================================================================== */
.pt-layout{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,1fr); gap:24px; align-items:start; }
.pt-form{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:6px 22px 22px; box-shadow:var(--shadow-2); }
.pt-form .calc{ display:block; }
.pt-summary{ position:sticky; top:calc(var(--bar-h) + 16px); display:flex; flex-direction:column; gap:12px; }
.pt-card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:18px 20px; }
.pt-card h3{ margin:0 0 12px; font-size:var(--fs-xs); font-weight:600; color:var(--muted); letter-spacing:var(--track-label); }
.pt-derived{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.pt-derived .big{ font-size:34px; }
.pt-derived .hint{ margin-top:4px; }
.pt-derived .cat{ font-size:12.5px; color:var(--ink-2); margin-top:6px; }
.pt-use{ margin-top:8px; border:1px solid var(--line-strong); background:var(--bg); color:var(--accent-strong); font:inherit; font-size:12.5px; font-weight:600; padding:5px 10px; border-radius:var(--r-sm); cursor:pointer; }
.pt-use:hover{ border-color:var(--accent); }
.pt-tools{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.pt-tools li{ border-top:1px solid var(--line); }
.pt-tools li:first-child{ border-top:0; }
.pt-tools button{ width:100%; display:flex; align-items:center; justify-content:space-between; gap:12px; border:0; background:none; font:inherit; font-size:14px; color:var(--ink); padding:11px 2px; cursor:pointer; text-align:left; }
.pt-tools button span{ font-size:12px; color:var(--muted); }
.pt-tools button:hover{ color:var(--accent-strong); }
.pt-privacy{ font-size:12.5px; color:var(--muted); line-height:1.5; }

/* =====================================================================
   Referencias
   ===================================================================== */
details.refs{ margin:30px 0 6px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); scroll-margin-top:calc(var(--bar-h) + 20px); }
details.refs > summary{ cursor:pointer; padding:14px 20px; font-weight:600; font-size:14.5px; list-style:none; display:flex; align-items:center; gap:12px; border-radius:var(--r-md); }
details.refs > summary::-webkit-details-marker{ display:none; }
details.refs > summary::before{ content:""; width:7px; height:7px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:rotate(-45deg); transition:transform var(--d-base) var(--ease-out); flex:none; }
details.refs[open] > summary::before{ transform:rotate(45deg); }
details.refs[open] > ol{ animation:modIn var(--d-base) var(--ease-out) both; }
@media (hover:hover){ details.refs > summary:hover{ background:var(--surface-2); } }
details.refs > summary .n{ font-weight:400; color:var(--muted); font-size:13px; font-family:var(--font-mono); }
.refs ol{ margin:0; padding:4px 24px 18px 44px; }
.refs li{ font-size:13.5px; line-height:1.55; margin:0 0 10px; color:var(--ink-2); }
.refs li i{ color:var(--ink); }
.refs .use{ display:block; font-size:12.5px; color:var(--accent-strong); margin-top:2px; }
.refs .doi{ word-break:break-all; font-family:var(--font-mono); font-size:12px; }
.ref-legend{ font-size:13.5px; color:var(--muted); max-width:76ch; }
.chg li{ font-size:13.8px; margin-bottom:6px; }
.refs-plain{ padding-left:24px; max-width:90ch; }
.refs-plain li{ font-size:13.8px; line-height:1.55; margin-bottom:10px; color:var(--ink-2); }
.refs-plain li i{ color:var(--ink); }
.refs-plain .use{ display:block; font-size:12.5px; color:var(--accent-strong); margin-top:2px; }
.refs-plain .doi{ font-family:var(--font-mono); font-size:12px; }
.refs li, .refs-plain li, h2.sec{ overflow-wrap:anywhere; }

/* =====================================================================
   Pie, firma y autoría
   ===================================================================== */
.app-foot{ margin-top:56px; padding-top:18px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted); max-width:82ch; line-height:1.6; }
.app-foot p{ font-size:12.5px; margin:0 0 8px; }
.sig{ display:flex; flex-direction:column; gap:1px; }
.sig-name{ font-weight:600; color:var(--ink-2); font-size:13px; }
.sig-role{ font-size:12px; color:var(--muted); }
.byline{ margin:0 0 18px; font-size:14px; color:var(--muted); }

/* ---------- Menú lateral ocultable (escritorio) ---------- */
@media (min-width:961px){
  .shell{ transition:grid-template-columns var(--d-base) var(--ease-out); }
  body.nav-collapsed .shell{ grid-template-columns:0 minmax(0,1fr); }
  body.nav-collapsed #nav{ visibility:hidden; overflow:hidden; padding-left:0; padding-right:0; border-right:0; }
  body.nav-collapsed #main{ max-width:1400px; margin:0 auto; }
}

/* =====================================================================
   Herramientas de uso diario
   ===================================================================== */
.txt-btn{ width:auto; padding:0 12px; gap:7px; display:inline-flex; align-items:center; font:inherit; font-size:13.5px; font-weight:560; white-space:nowrap; }
.txt-btn svg{ width:17px; height:17px; flex:none; }
#modeBtn[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:var(--bg); }
.copy-btn{
  margin-left:auto; display:inline-flex; align-items:center; gap:6px; border:1px solid var(--line-strong); background:var(--bg); color:var(--ink-2);
  border-radius:var(--r-sm); padding:6px 11px; font:inherit; font-size:12.5px; font-weight:600; cursor:pointer;
  transition:border-color var(--d-fast), color var(--d-fast), background-color var(--d-fast), transform var(--d-instant) var(--ease-out);
}
.copy-btn:active{ transform:scale(.96); }
@media (hover:hover){ .copy-btn:hover{ border-color:var(--accent); color:var(--accent-strong); background:var(--accent-soft); } }
.copy-btn svg{ width:15px; height:15px; }
.toast{
  position:fixed; left:50%; bottom:calc(22px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%) translateY(16px) scale(.98); opacity:0; pointer-events:none; z-index:var(--z-toast);
  background:var(--ink); color:var(--bg); border-radius:var(--r-sm); padding:12px 16px; font-size:14px; box-shadow:var(--shadow-3);
  transition:opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out); display:flex; gap:14px; align-items:center; max-width:92vw;
}
.toast.show{ opacity:1; transform:translateX(-50%); pointer-events:auto; }
.toast button{ border:0; background:transparent; color:var(--accent-soft); font:inherit; font-weight:650; cursor:pointer; text-decoration:underline; padding:0; }
:root[data-theme="dark"] .toast button{ color:var(--accent-strong); }
.calc input.out-range{ border-color:var(--bad); box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 16%,transparent); }
.range-msg{ display:block; font-size:12px; color:var(--bad); margin-top:4px; font-weight:560; }

/* ---------- Atajo al resultado (móvil) ---------- */
.result-jump{
  position:fixed; right:16px; bottom:calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom,0px)); z-index:var(--z-sticky);
  display:none; align-items:center; gap:8px; height:44px; padding:0 16px 0 14px; border-radius:var(--r-pill); border:0;
  background:var(--ink); color:var(--bg); font:inherit; font-size:14px; font-weight:600; box-shadow:var(--shadow-3); cursor:pointer;
  opacity:0; transform:translateY(10px) scale(.96); transition:opacity var(--d-base) var(--ease-out), transform var(--d-base) var(--ease-out);
}
.result-jump svg{ width:16px; height:16px; }
.result-jump.show{ opacity:1; transform:none; }
.result-jump:active{ transform:scale(.96); }

/* ---------- Barra de pestañas (móvil) ---------- */
.tabbar{ display:none; }

/* =====================================================================
   Modo consulta: solo datos, resultado y dosis
   ===================================================================== */
body.modo-consulta .ev, body.modo-consulta .legend, body.modo-consulta details.refs, body.modo-consulta .sync-note,
body.modo-consulta .mod:not(#m-home):not(#m-fuentes):not(#m-paciente) > .note, body.modo-consulta .mod:not(#m-home):not(#m-fuentes):not(#m-paciente) > .rec-card,
body.modo-consulta .mod:not(#m-home):not(#m-fuentes):not(#m-paciente) > h2.sec, body.modo-consulta .mod:not(#m-home):not(#m-fuentes):not(#m-paciente) > h3,
body.modo-consulta .mod:not(#m-home):not(#m-fuentes):not(#m-paciente) > p, body.modo-consulta .mod:not(#m-home):not(#m-fuentes):not(#m-paciente) > ul,
body.modo-consulta .mod:not(#m-home):not(#m-fuentes):not(#m-paciente) > .gp, body.modo-consulta .mod:not(#m-home):not(#m-fuentes):not(#m-paciente) > .tw,
body.modo-consulta .sub > .note, body.modo-consulta .sub > .rec-card, body.modo-consulta .sub > h2.sec, body.modo-consulta .sub > p,
body.modo-consulta .calc > div:first-child > .hint{ display:none!important; }

/* =====================================================================
   Tableta y móvil
   ===================================================================== */
@media (max-width:1100px){
  .calc{ grid-template-columns:minmax(0,1fr); }
  .calc > *{ min-width:0; }
  .calc > .out{ position:static; max-height:none; overflow:visible; }
  .pt-layout{ grid-template-columns:1fr; }
  .pt-summary{ position:static; }
}
@media (max-width:960px){
  :root{ --bar-h:56px; }
  .menu-btn{ display:grid; }
  .shell{ grid-template-columns:1fr; }
  #nav{
    position:fixed; z-index:var(--z-sheet); top:0; left:0; bottom:0; height:auto; align-self:stretch; width:min(88vw,340px);
    transform:translateX(-104%); transition:transform var(--d-slow) var(--ease-out); box-shadow:var(--shadow-3); background:var(--bg);
    padding-top:calc(16px + env(safe-area-inset-top,0px)); padding-bottom:calc(30px + env(safe-area-inset-bottom,0px));
  }
  body.nav-open #nav{ transform:none; }
  .scrim{ display:block; position:fixed; inset:0; z-index:var(--z-scrim); background:rgba(6,14,13,.42); opacity:0; pointer-events:none; transition:opacity var(--d-base) var(--ease-out); }
  body.nav-open .scrim{ opacity:1; pointer-events:auto; }
  body.nav-open{ overflow:hidden; }
  .appbar{ flex-wrap:wrap; height:auto; min-height:calc(var(--bar-h) + env(safe-area-inset-top,0px)); padding:calc(8px + env(safe-area-inset-top,0px)) 12px 8px; gap:8px; row-gap:8px; }
  .brand-ctx{ display:none; }
  .pt-strip{ order:5; flex-basis:100%; }
  #main{ padding:22px 16px calc(var(--tabbar-h) + 40px + env(safe-area-inset-bottom,0px)); }
  h1{ font-size:27px; }
  .home-head{ grid-template-columns:1fr; padding-bottom:22px; }
  .home-head h1{ font-size:38px; }
  .home-how{ grid-template-columns:1fr; }
  .fig-wrap{ padding:16px; }
  h2.fig-title{ padding:14px 16px 12px; font-size:15.5px; }
  .calc input, .calc select{ height:48px; font-size:16px; }
  .calc .cks label{ padding:11px 10px; font-size:14.5px; }
  .cks{ grid-template-columns:1fr; }
  .inrow3{ grid-template-columns:1fr 1fr; }
  .heat{ grid-template-columns:92px repeat(3,1fr); min-width:0; font-size:11px; }
  .heat .c{ font-size:15px; padding:9px 2px; }
  .kpi{ gap:18px; } .big{ font-size:34px; }
  .pt-form{ padding:4px 16px 18px; }
  .nav-search kbd{ display:none; }

  .tabbar{
    display:grid; grid-template-columns:repeat(4,1fr); position:fixed; left:0; right:0; bottom:0; z-index:var(--z-tabbar);
    height:calc(var(--tabbar-h) + env(safe-area-inset-bottom,0px)); padding:0 6px env(safe-area-inset-bottom,0px);
    background:color-mix(in srgb,var(--bg) 88%,transparent); backdrop-filter:saturate(1.5) blur(16px); -webkit-backdrop-filter:saturate(1.5) blur(16px);
    border-top:1px solid var(--line);
  }
  .tabbar button{
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; border:0; background:none; color:var(--muted);
    font:inherit; font-size:11px; font-weight:560; cursor:pointer; border-radius:var(--r-sm); margin:6px 2px; transition:color var(--d-fast), background-color var(--d-fast);
  }
  .tabbar button svg{ width:22px; height:22px; transition:transform var(--d-base) var(--ease-spring); }
  .tabbar button:active svg{ transform:scale(.88); }
  .tabbar button.on, .tabbar button[aria-pressed="true"]{ color:var(--accent-strong); }
  .tabbar button.on{ background:var(--accent-soft); }
  .result-jump{ display:inline-flex; }
  .toast{ bottom:calc(var(--tabbar-h) + 14px + env(safe-area-inset-bottom,0px)); }
  .txt-btn .lbl{ display:none; }
  .txt-btn{ width:40px; padding:0; justify-content:center; }
  .print-btn{ display:none; }
  .copy-btn .lbl{ display:none; }
}
@media (max-width:420px){
  .home-stats b{ font-size:24px; }
  .home-stats div{ padding:14px 12px; }
  .bar-end{ gap:4px; }
}

/* =====================================================================
   Impresión
   ===================================================================== */
@media print{
  .appbar, #nav, .scrim, .nojs, .tabbar, .result-jump, .toast, .copy-btn, .fav, .mod-meta button, details.refs:not([open]){ display:none!important; }
  .shell{ display:block; } #main{ padding:0; max-width:none; }
  .calc{ grid-template-columns:1fr 1.3fr; } .calc > .out{ position:static; max-height:none; box-shadow:none; }
  .fig-wrap{ box-shadow:none!important; }
  .mod.on{ animation:none; }
  body{ background:#fff; color:#000; }
}
.pt-intro{ margin:-4px 0 22px; }
.pt-form .calc h4.first{ margin-top:18px; }
@media (max-width:960px){
  .mod-meta .srcs{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; width:100%; margin:0 -16px; padding:0 16px; width:calc(100% + 32px); mask-image:linear-gradient(90deg,#000 88%,transparent); -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); }
  .mod-meta .srcs::-webkit-scrollbar{ display:none; }
  .mod-meta .s{ white-space:nowrap; }
}

/* Bloque de tratamiento a todo el ancho (falla cardiaca) */
.tx-block{ margin-top:8px; }
.tx-block:empty{ display:none; }
.tx-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; align-items:start; }
.tx-col{ border:1px solid var(--line); border-radius:var(--r-md); padding:14px 16px; background:var(--bg); }
.tx-col h3{ margin:0 0 8px; font-size:14px; font-weight:620; color:var(--accent-strong); }
.tx-col ul{ margin:0; padding-left:18px; }
.tx-col li{ font-size:13.8px; margin-bottom:7px; line-height:1.5; }
.tx-spec{ background:var(--note-bg); border-color:transparent; }
.tx-spec h3{ color:var(--note-tx); }

/* Valores de ejemplo precargados (auditoría M2) */
.calc input.is-example{ border-style:dashed; color:var(--muted); background:var(--surface-2); }
.example-flag{ margin:0 0 12px; padding:8px 10px; border-radius:var(--r-sm); background:var(--warn-bg); color:var(--warn-tx); font-size:12.5px; font-weight:560; }

/* Fragilidad y fuentes en línea */
.src-tag{ font-size:12px; color:var(--muted); white-space:normal; }
.calc .fg-items{ grid-template-columns:1fr; }
.calc .fg-items label{ align-items:flex-start; line-height:1.45; }
.calc .fg-items label span{ flex:1; }
.h4-note{ font-weight:400; color:var(--muted); font-size:12px; margin-left:6px; }
.fg-cfs-link p{ margin:22px 0 0; font-size:12.5px; color:var(--muted); line-height:1.45; }
.fg-cfs-link a{ color:var(--accent-strong); }

.sig-team{ display:block; font-size:11.5px; color:var(--muted); margin-top:2px; line-height:1.4; }

/* =====================================================================
   Secciones plegables, información educativa resumida y bloque Tratamiento
   ===================================================================== */
.acc-head{ cursor:pointer; position:relative; }
.acc-head:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
h2.acc-head{ padding-right:44px; }
.acc-toggle{ position:absolute; right:6px; top:50%; transform:translateY(-50%); width:44px; height:44px; border:0; background:none; padding:0; cursor:pointer; color:var(--muted); display:grid; place-items:center; border-radius:var(--r-sm); }
.acc-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.acc-chev{ width:18px; height:18px; color:currentColor; transition:transform var(--d-base, .2s) var(--ease-out, ease); }
.acc-tx .acc-chev{ position:absolute; right:16px; top:50%; margin-top:-9px; }
.acc-head.acc-open .acc-chev{ transform:rotate(180deg); }
h2.acc-head:not(.acc-open){ border-bottom:1px solid var(--line); border-radius:var(--r-md); margin-bottom:10px; }
.acc-hidden{ display:none !important; }
.acc-tx{ display:flex; align-items:center; gap:10px; margin:16px 0 10px; padding:14px 48px 14px 18px; border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface); font-size:15px; font-weight:620; color:var(--ink); }
.acc-tx .ft-kind{ margin:0; }
.acc-tx.acc-open{ border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); }
@media (hover:hover){ .acc-head:hover .acc-toggle, .acc-head:hover .acc-chev{ color:var(--accent-strong); } .acc-tx:hover{ border-color:color-mix(in srgb,var(--accent) 35%,var(--line)); } }

.note-fold{ position:relative; max-height:6.4em; overflow:hidden; padding-bottom:34px !important; }
.note-fold::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:56px; background:linear-gradient(to bottom, transparent, var(--surface) 70%); pointer-events:none; }
.note-fold.is-open{ max-height:none; }
.note-fold.is-open::after{ display:none; }
.note-more{ position:absolute; left:16px; bottom:6px; z-index:1; border:0; background:none; padding:4px 0; font:600 13px/1.2 var(--font-sans, inherit); color:var(--accent-strong); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }

/* =====================================================================
   Free / Pro dentro de los resultados: familias visibles, fármaco y dosis en Pro
   ===================================================================== */
html[data-plan="free"] .rx, html[data-plan="free"] .rx-block{ display:none !important; }
html[data-plan="free"] li:has(> .rx-line), html[data-plan="free"] p:has(> .rx-line){ display:none !important; }
html[data-plan="free"] .out:has(.rx, .rx-line, .rx-block)::after{ content:"Fármaco concreto, dosis, titulación y ajustes: VALAD Pro"; display:block; margin-top:12px; padding:9px 12px; border-radius:var(--r-sm); background:var(--accent-soft); color:var(--accent-strong); font:600 12.5px/1.4 var(--font-mono, monospace); }
html[data-plan="free"] .mod div[id$="Drugs"]:not(.tx-host){ display:none !important; }
.tx-tablelock{ display:flex; align-items:center; gap:10px 14px; flex-wrap:wrap; margin:12px 0 4px; padding:14px 16px; border-radius:var(--r-md); background:var(--ink); color:var(--bg); }
.tx-tablelock p{ margin:0; flex:1 1 260px; font-size:14px; line-height:1.45; }
.tx-tablelock .pro-tag{ background:var(--bg); color:var(--ink); margin:0; }
.tx-tablelock .btn{ background:var(--bg); color:var(--ink); }
html[data-plan="pro"] .tx-tablelock{ display:none; }
.tx-drug dd{ overflow-wrap:anywhere; }
.vacio-oculto{ display:none !important; }
.out-empty{ margin:0; color:var(--muted); font-size:14px; line-height:1.5; }
.out.is-vacio{ display:flex; align-items:center; min-height:120px; }

/* Áreas táctiles de al menos 44 px en pantallas táctiles */
@media (pointer:coarse){
  .ws-open, .ws-src, .ws-toggle, .mx-add, .mx-dz, .pt-use{ min-height:44px; }
  .trace-btn, .copy-btn, .fav{ min-width:44px; min-height:44px; }
  .tx-ev{ padding-top:12px; padding-bottom:12px; }
  .ws-actions{ gap:8px; }
}