/* Content component vocabulary used inside module/calculator/drug pages */

/* ── PAGE HEADER ── built by js/router.js from content/meta.json (category,
   title, subtitle, CRIT badge) above every module, calculator and the drug
   reference. The module's own HTML is not touched. */
.view-hd { display: flex; flex-direction: column; gap: 6px; margin: 2px 0 18px; }
.view-kicker { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text3); }
.view-title { font-size: 30px; font-weight: 800; line-height: 1.1; letter-spacing: -1px; color: var(--text); text-wrap: balance; }
.view-sub { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; line-height: 1.45; color: var(--text2); }

/* ── CARDS ── */
.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}
.card-header {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
}
.card-ico {
  width: 34px; height: 34px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; flex-shrink: 0;
}
.ico-red    { background: var(--red-bg);  box-shadow: inset 0 0 0 1px var(--red-bd); }
.ico-amber  { background: var(--amb-bg);  box-shadow: inset 0 0 0 1px var(--amb-bd); }
.ico-green  { background: var(--grn-bg);  box-shadow: inset 0 0 0 1px var(--grn-bd); }
.ico-blue   { background: var(--blue-bg); box-shadow: inset 0 0 0 1px var(--blue-bd); }
.ico-purple { background: var(--pur-bg);  box-shadow: inset 0 0 0 1px var(--pur-bd); }
.ico-gray   { background: var(--bg3);     box-shadow: inset 0 0 0 1px var(--border); }

.card-header-text { flex: 1; min-width: 0; }
.card-title { font-size: 14.5px; font-weight: 700; letter-spacing: -.2px; line-height: 1.35; }
.card-sub   { font-size: 12.5px; color: var(--text3); margin-top: 2px; line-height: 1.4; }
.card-body  { padding: 16px; }
.card-body + .card-body { border-top: 1px solid var(--border); }

/* ── TABS ── pills; the active one is inverted (text color as ground) */
.tabs {
  display: flex; gap: 6px;
  margin-bottom: 16px;
  max-width: 100%;
  flex-wrap: wrap;
}
.tab {
  padding: 7px 13px;
  font-size: 12.5px; font-weight: 500; line-height: 1.35;
  color: var(--text2);
  background: var(--glass);
  border: 1px solid var(--glass-bd);
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
  user-select: none;
}
@media (hover: hover) { .tab:hover { color: var(--text); border-color: var(--border2); } }
.tab.on {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
  font-weight: 600;
}
/* Second-level tabs (inside a pane): coral tint, so the two levels read apart */
.tab-pane .tab.on { background: var(--coral-bg); border-color: var(--coral-bd); color: var(--coral); }
.tab-pane { display: none; animation: fadein .15s ease; }
.tab-pane.on { display: block; }

/* ── CALLOUTS ── */
.cl {
  border-radius: var(--r-lg);
  padding: 14px;
  display: flex; gap: 12px;
  font-size: 14px; line-height: 1.55;
  border: 1px solid;
  margin-bottom: 12px;
}
.cl-ico { font-size: 16px; line-height: 1.4; flex-shrink: 0; }
.cl-body { flex: 1; min-width: 0; }
.cl-title { font-weight: 700; display: block; margin-bottom: 4px; font-size: 12px; line-height: 1.45; letter-spacing: .03em; text-transform: uppercase; }
.cl-r   { background: var(--red-bg);  border-color: var(--red-bd);  color: var(--red); }
.cl-r .cl-body, .cl-r .cl-body p, .cl-r .cl-body li { color: var(--text); }
.cl-a   { background: var(--amb-bg);  border-color: var(--amb-bd);  color: var(--amber); }
.cl-a .cl-body, .cl-a .cl-body p, .cl-a .cl-body li { color: var(--text); }
.cl-g   { background: var(--grn-bg);  border-color: var(--grn-bd);  color: var(--green); }
.cl-g .cl-body, .cl-g .cl-body p, .cl-g .cl-body li { color: var(--text); }
.cl-b   { background: var(--blue-bg); border-color: var(--blue-bd); color: var(--acc); }
.cl-b .cl-body, .cl-b .cl-body p, .cl-b .cl-body li { color: var(--text); }
.cl-p   { background: var(--pur-bg);  border-color: var(--pur-bd);  color: var(--purple); }
.cl-p .cl-body, .cl-p .cl-body p, .cl-p .cl-body li { color: var(--text); }
.cl-gray{ background: var(--bg3);     border-color: var(--border);  color: var(--text2); }
/* The title carries the callout's color (the body stays in text color) */
.cl-r .cl-title { color: var(--red); }
.cl-a .cl-title { color: var(--amber); }
.cl-g .cl-title { color: var(--green); }
.cl-b .cl-title { color: var(--acc); }
.cl-p .cl-title { color: var(--purple); }
.cl-gray .cl-title { color: var(--text2); }

/* ── ALGORITHM STEPS ── */
.algo { display: flex; flex-direction: column; gap: 0; }
.step {
  display: flex; gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.step:first-child { padding-top: 2px; }
.step:last-child { border-bottom: none; padding-bottom: 2px; }
.step-n {
  min-width: 28px; height: 28px;
  padding: 0 6px; /* times like "5–20'" turn the circle into a pill */
  border-radius: var(--r-pill);
  background: var(--glass);
  border: 1px solid var(--border2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  color: var(--text2); flex-shrink: 0;
}
.step-n.crit { background: var(--red-bg); border-color: var(--red-bd); color: var(--red); }
.step-c { flex: 1; min-width: 0; }
.step-title { font-weight: 700; color: var(--text); font-size: 14px; line-height: 1.35; margin: 4px 0; }
.step-body { font-size: 13.5px; color: var(--text2); line-height: 1.7; }

/* ── DRUG CHIPS ── */
.drug {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--mono); font-size: 11.5px; font-weight: 600; line-height: 1.6;
  background: var(--blue-bg); color: var(--chip);
  border: 1px solid var(--blue-bd);
  padding: 0 8px; border-radius: var(--r-pill);
  white-space: nowrap;
}
.drug-r { background: var(--red-bg); color: var(--red); border-color: var(--red-bd); }
.drug-g { background: var(--grn-bg); color: var(--green); border-color: var(--grn-bd); }
.drug-a { background: var(--amb-bg); color: var(--amber); border-color: var(--amb-bd); }
.dose { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--amber); white-space: normal; word-break: break-word; line-height: 1.5; display: inline; }

/* ── TABLES ── */
.tbl-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--border); background: var(--bg2); margin-bottom: 12px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.45; }
.tbl th {
  text-align: left; vertical-align: bottom; padding: 9px 12px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text3); background: var(--bg3);
  border-bottom: 1px solid var(--border);
}
.tbl td { padding: 10px 12px; border-bottom: 1px solid var(--border); color: var(--text2); vertical-align: top; }
.tbl tr:last-child td { border-bottom: none; }
@media (hover: hover) { .tbl tr:hover td { background: var(--bg3); } }
.tbl-name { font-family: var(--mono); font-weight: 700; color: var(--text); font-size: 12px; }
.tbl-dose { font-family: var(--mono); font-weight: 600; color: var(--acc); font-size: 12px; }
.tbl-note { font-size: 12px; color: var(--text3); }

/* ── DECISION BOXES ── */
.dec-wrap { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 8px 0; }
.dec-box {
  background: var(--bg3); border: 1px solid var(--border2);
  border-radius: 12px; padding: 10px 18px;
  font-size: 13.5px; font-weight: 600; color: var(--text);
  text-align: center; max-width: 380px; width: 100%;
}
.dec-arr { color: var(--text3); font-size: 20px; line-height: 1; }
.dec-split { display: flex; gap: 10px; width: 100%; max-width: 500px; }
.dec-yes { background: var(--grn-bg); border: 1px solid var(--grn-bd); color: var(--green); border-radius: 12px; padding: 9px 14px; font-size: 13px; font-weight: 600; flex: 1; text-align: center; }
.dec-no  { background: var(--red-bg); border: 1px solid var(--red-bd);  color: var(--red);   border-radius: 12px; padding: 9px 14px; font-size: 13px; font-weight: 600; flex: 1; text-align: center; }

/* ── TAGS ── */
.tag { display: inline-flex; align-items: center; font-family: var(--mono); font-size: 10.5px; font-weight: 700; line-height: 1.6; padding: 0 8px; border-radius: var(--r-pill); white-space: nowrap; }
.t-r { background: var(--red-bg); color: var(--red); }
.t-a { background: var(--amb-bg); color: var(--amber); }
.t-g { background: var(--grn-bg); color: var(--green); }
.t-b { background: var(--blue-bg); color: var(--acc); }
.t-p { background: var(--pur-bg); color: var(--purple); }
.t-gray { background: var(--bg3); color: var(--text2); }

/* ── SECTION HEADERS ── */
.sec-hd {
  display: flex; align-items: center; gap: 10px;
  margin: 20px 0 10px;
}
.sec-hd:first-child { margin-top: 0; }
.sec-hd-lbl { font-size: 11px; font-weight: 700; color: var(--text3); letter-spacing: .08em; text-transform: uppercase; line-height: 1.45; min-width: 0; }
.sec-hd-line { flex: 1; min-width: 16px; height: 1px; background: var(--border); }

/* ── GRID ── */
.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.g3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.stack { display: flex; flex-direction: column; gap: 12px; }

/* ══ HOME (portada) ══ content/home.html + js/home.js. Lives on the bordó
   ground painted by #shell.is-home (layout.css); its colors are the --hero-*
   tokens, so the light theme only swaps tokens. */
.home { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; padding: 4px 0 32px; color: var(--hero-fg); }

.home-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.home-kicker { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--hero-fg2); }
.home-title { font-size: 36px; font-weight: 800; line-height: 1.1; letter-spacing: -1.5px; color: var(--hero-fg); text-wrap: balance; }
.home-title em { font-style: normal; color: var(--hero-acc); }
.home-desc { max-width: 30em; margin-top: 2px; font-size: 13.5px; line-height: 1.7; color: var(--hero-fg2); text-wrap: pretty; }

.home-sec { display: flex; flex-direction: column; gap: 10px; }
.home-h2 { font-size: 16px; font-weight: 700; letter-spacing: -.2px; line-height: 1.3; color: var(--hero-fg); }

/* Four critical shortcuts */
.home-crit { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.home-tile {
  min-height: 84px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 12px 6px;
  border-radius: 18px;
  border: 1px solid var(--hero-tile-bd);
  background: var(--hero-glass);
  color: var(--hero-fg); text-decoration: none; text-align: center;
  transition: border-color var(--t), background var(--t);
}
[data-theme="light"] .home-tile { box-shadow: 0 1px 2px rgba(80,30,30,.05), 0 8px 20px -10px rgba(120,40,30,.18); }
.home-tile svg { width: 24px; height: 24px; margin-bottom: 4px; fill: none; stroke: var(--hero-acc); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.home-tile-name { font-size: 12.5px; font-weight: 700; line-height: 1.25; }
.home-tile-sub { font-size: 11px; line-height: 1.3; color: var(--hero-fg2); }
@media (hover: hover) { .home-tile:hover { border-color: var(--hero-acc); } }
.home-tile:focus-visible { outline: 2px solid var(--hero-acc); outline-offset: 2px; }

/* Search card */
.home-search {
  border-radius: 24px;
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
  border: 1px solid rgba(255,255,255,.14);
  background: var(--hero-card);
  color: #fff;
}
[data-theme="light"] .home-search { border-color: rgba(255,255,255,.4); box-shadow: 0 18px 36px -18px rgba(169,44,39,.55); }
.home-pill {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255,255,255,.26);
  background: rgba(255,255,255,.13);
  font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1.3;
  color: #fff;
}
.home-pill svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linejoin: round; }
.home-q { font-size: 26px; font-weight: 800; letter-spacing: -.8px; line-height: 1.15; color: #fff; text-wrap: balance; }
.home-field {
  display: flex; align-items: center; gap: 10px;
  min-height: 50px;
  padding: 0 6px 0 16px;
  border-radius: var(--r-pill);
  border: 1px solid var(--hero-field-bd);
  background: var(--hero-field);
  transition: border-color var(--t), box-shadow var(--t);
}
.home-field:focus-within { border-color: rgba(255,255,255,.8); box-shadow: 0 0 0 3px rgba(255,255,255,.25); }
.home-field svg { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: var(--hero-field-ico); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
#home-q { flex: 1; min-width: 0; background: none; border: 0; color: var(--hero-field-fg); font-size: 16px; padding: 13px 0; }
#home-q::placeholder { color: var(--hero-field-ph); }
#home-q::-webkit-search-cancel-button, #home-q::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.home-clear { width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.home-clear[hidden] { display: none; }
@media (hover: hover) { .home-clear:hover { background: rgba(255,255,255,.12); } }
[data-theme="light"] .home-clear:hover { background: rgba(42,26,29,.06); }

/* Results: modules only, with the «No te olvides» line */
.home-list { background: var(--hero-glass); border: 1px solid var(--hero-glass-bd); border-radius: 18px; overflow: hidden; }
[data-theme="light"] .home-list { box-shadow: 0 1px 2px rgba(80,30,30,.04), 0 12px 28px -18px rgba(120,40,30,.25); }
.home-item + .home-item { border-top: 1px solid var(--hero-glass-bd); }
.home-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-decoration: none; color: inherit; transition: background var(--t); }
@media (hover: hover) { .home-row:hover { background: var(--hero-glass); } }
.home-row:focus-visible { outline: 2px solid var(--hero-acc); outline-offset: -2px; }
.home-ico { font-size: 20px; width: 26px; text-align: center; flex-shrink: 0; }
.home-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.home-name { font-size: 15px; font-weight: 600; color: var(--hero-fg); line-height: 1.3; }
.home-cat { font-size: 12.5px; color: var(--hero-fg2); line-height: 1.35; }
.home-why { color: var(--hero-why); }
.home-arr { color: var(--hero-fg2); }
.home-nt { margin: -6px 14px 12px 52px; font-size: 12.5px; line-height: 1.5; color: var(--hero-fg2); }
.home-nt b { color: var(--red); font-weight: 700; margin-right: 4px; }
.home-nt a { color: var(--hero-fg); text-decoration: underline; text-decoration-color: var(--red-bd); text-underline-offset: 3px; }
.home-nt a:hover { text-decoration-color: var(--red); }
.home-sep { color: var(--hero-fg2); }
.home-empty { padding: 16px; border: 1px dashed var(--hero-glass-bd); border-radius: 18px; color: var(--hero-fg2); font-size: 13.5px; }

/* Stats */
.home-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.home-stat {
  min-height: 100px;
  padding: 12px;
  border-radius: 18px;
  border: 1px solid var(--hero-glass-bd);
  background: var(--hero-glass);
  display: flex; flex-direction: column; justify-content: flex-start; gap: 14px;
}
.home-stat svg { width: 20px; height: 20px; fill: none; stroke: var(--hero-fg2); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.home-stat-n { font-family: var(--mono); font-size: 22px; font-weight: 700; line-height: 1; color: var(--hero-fg); }
.home-stat-l { font-size: 12px; line-height: 1.3; color: var(--hero-fg2); margin-top: 4px; }

/* Legal notice: same text as always */
.home-aviso { border-radius: 16px; padding: 12px 14px; border: 1px solid var(--amb-bd); background: var(--amb-bg); }
.home-aviso-t { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hero-aviso); margin-bottom: 5px; }
.home-aviso-b { font-size: 11.5px; line-height: 1.55; color: var(--hero-fg2); }
.home-aviso-b strong { color: var(--hero-fg); font-weight: 600; }

/* Author credit, small, at the end */
.home-credit { margin-top: -2px; text-align: center; font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em; color: var(--hero-fg2); }

/* ── CALCULATORS ── */
.calc-grid { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.calc-opt {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 14px;
  background: var(--glass); border: 1px solid var(--glass-bd);
  border-radius: 14px; cursor: pointer;
  transition: border-color var(--t), background var(--t); user-select: none;
}
@media (hover: hover) { .calc-opt:hover { border-color: var(--border2); } }
.calc-opt:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }
.calc-opt.sel { background: var(--blue-bg); border-color: var(--acc); }
.calc-opt-chk {
  width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid var(--border2); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t), border-color var(--t);
}
.calc-opt.sel .calc-opt-chk { border-color: var(--acc); background: var(--acc); }
.calc-opt.sel .calc-opt-chk::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #fff; }
.calc-opt-lbl { flex: 1; min-width: 0; font-size: 14px; line-height: 1.4; color: var(--text2); }
.calc-opt.sel .calc-opt-lbl { color: var(--text); font-weight: 500; }
.calc-opt-pts { font-family: var(--mono); font-weight: 700; font-size: 13px; color: var(--text3); }
.calc-opt.sel .calc-opt-pts { color: var(--chip); }
.calc-result {
  background: var(--bg2); border: 1px solid var(--border);
  border-radius: var(--r-xl); padding: 18px;
  margin-top: 16px;
  transition: background .25s ease, border-color .25s ease;
}
.calc-result.show-r { border-color: var(--red-bd); background: var(--red-bg); }
.calc-result.show-a { border-color: var(--amb-bd); background: var(--amb-bg); }
.calc-result.show-g { border-color: var(--grn-bd); background: var(--grn-bg); }
.calc-result.show-n { border-color: var(--border2); background: var(--bg3); } /* severity 'neutral': no verdict color */
.calc-result.show-r .cr-label { color: var(--red); }
.calc-result.show-a .cr-label { color: var(--amber); }
.calc-result.show-g .cr-label { color: var(--green); }
.calc-result.is-pending .cr-label { color: var(--text3); } /* "requireAll": not every item answered yet */
.cr-score { font-family: var(--mono); font-size: 44px; font-weight: 700; color: var(--text); line-height: 1; margin-bottom: 8px; }
.cr-score:empty { display: none; }
.cr-label { font-size: 16px; font-weight: 700; line-height: 1.3; margin-bottom: 4px; }
.cr-detail { font-size: 14px; color: var(--text); line-height: 1.5; }
/* A standalone calculator sits on the page, without a card frame */
.view > .calc-card { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.view > .calc-card > .card-body { padding: 0; }
/* Free-input calculator (sodio) */
.calc-inputs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.calc-input-row { display: flex; flex-direction: column; gap: 6px; }
.calc-input-row label { font-size: 12px; font-weight: 600; color: var(--text2); letter-spacing: .02em; }
.calc-input-row input, .calc-input-row select {
  width: 100%; height: 44px;
  background: var(--glass); border: 1px solid var(--glass-bd); border-radius: 12px;
  color: var(--text); padding: 0 12px; font-size: 16px; font-variant-numeric: tabular-nums;
  transition: border-color var(--t);
}
.calc-input-row input:focus, .calc-input-row select:focus { border-color: var(--acc); }
.calc-run {
  width: 100%; padding: 12px; margin-top: 12px;
  background: var(--acc); color: #fff; border: none;
  border-radius: var(--r-pill); font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background var(--t);
}
.calc-run:hover { background: var(--acc2); }
.inp {
  width: 100%; background: var(--glass); border: 1px solid var(--glass-bd);
  border-radius: 12px; color: var(--text); padding: 10px 12px;
  font-size: 14px; transition: border-color var(--t);
}
.inp:focus { border-color: var(--acc); }
.inp::placeholder { color: var(--text3); }
.lbl { display: block; font-size: 12px; font-weight: 600; color: var(--text2); margin-bottom: 6px; letter-spacing: .02em; }
.field { margin-bottom: 12px; }
/* Select control. Scoped to <select>: .sel is also the "selected" state of
   .calc-opt and .s-item, which used to inherit this box (and jumped 2px). */
select.sel {
  width: 100%; background: var(--glass); border: 1px solid var(--glass-bd);
  border-radius: 12px; color: var(--text); padding: 10px 12px;
  font-size: 14px; cursor: pointer; appearance: none;
  transition: border-color var(--t);
}
select.sel:focus { border-color: var(--acc); }

/* ── UTILITY ── */
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
ul.bullets { padding-left: 18px; }
ul.bullets li { margin-bottom: 6px; font-size: 13.5px; color: var(--text2); line-height: 1.6; }
ul.bullets li::marker { color: var(--text3); }
.cl-r ul.bullets li::marker { color: var(--red); }
.cl-a ul.bullets li::marker { color: var(--amber); }
.cl-b ul.bullets li::marker { color: var(--acc); }
.cl-g ul.bullets li::marker { color: var(--green); }
ul.bullets li strong { color: var(--text); }
.mono { font-family: var(--mono); }
.bold { font-weight: 700; }
.text2 { color: var(--text2); }
.text3 { color: var(--text3); }
.red { color: var(--red); }
.green { color: var(--green); }
.amber { color: var(--amber); }
.acc { color: var(--acc); }
.mapa-wrap { display: flex; flex-direction: column; gap: 12px; }
.svg-grid { width: 100%; max-width: 360px; margin: 0 auto; }
.q-cell { fill: var(--bg3); stroke: var(--border2); stroke-width: 1.5; cursor: pointer; transition: fill var(--t); }
.q-cell:hover { fill: var(--surface); }
.q-cell.active { fill: var(--blue-bg); stroke: var(--acc); stroke-width: 2; }
.q-label { font-size: 11px; font-weight: 700; fill: var(--text2); text-anchor: middle; pointer-events: none; text-transform: uppercase; letter-spacing: .04em; }
.q-label.active { fill: var(--acc); }
.q-organ { font-size: 9px; fill: var(--text3); text-anchor: middle; pointer-events: none; }
.result-empty { text-align: center; color: var(--text3); font-size: 13px; padding: 24px 12px; border: 1px dashed var(--border2); border-radius: 14px; }
.result-zone { display: none; }
.result-zone.on { display: block; }
.zone-title { font-size: 18px; font-weight: 800; color: var(--text); margin-bottom: 2px; }
.zone-organs { font-size: 11px; color: var(--text3); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; }
.prob-label { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; margin: 12px 0 6px; }
.prob-label.alta { color: var(--red); }
.prob-label.media { color: var(--amber); }
.prob-label.baja { color: var(--text3); }
.dx-item { padding: 8px 10px; background: var(--bg3); border-radius: 10px; margin-bottom: 4px; border-left: 2px solid transparent; }
.dx-item.alta { border-left-color: var(--red); }
.dx-item.media { border-left-color: var(--amber); }
.dx-item.baja { border-left-color: var(--border2); }
.dx-name { font-weight: 700; font-size: 13px; color: var(--text); }
.dx-clave { font-size: 12px; color: var(--text2); line-height: 1.45; }
.signo-item { padding: 10px 0; border-bottom: 1px solid var(--border); }
.signo-item:last-child { border-bottom: none; }
.signo-name { font-weight: 700; font-size: 14px; color: var(--text); margin-bottom: 3px; }
.signo-tech { font-size: 13px; color: var(--text2); margin-bottom: 2px; line-height: 1.45; }
.signo-dx { font-size: 11px; color: var(--acc); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }

/* ── CROSS-MODULE LINKS ──
   Inline link from a module's text to another module:
   <a class="xref" href="#id" onclick="navId('id');return false">…</a>
   (href keeps it a real, focusable link; navId() is the house navigation). */
.xref {
  color: var(--acc); font-weight: 600;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
}
@media (hover: hover) { .xref:hover { text-decoration-thickness: 2px; } }
.xref:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: 2px; }

/* ── MODULE SOURCE LINE ── small muted "Fuente(s): …" at the end of a module */
.src-line { margin: 22px 0 16px; font-size: 11px; line-height: 1.5; color: var(--text2); } /* bottom margin clears the fixed copyright strip */

/* ══ MÓDULO: POLITRAUMA ══ */
/* content/modules/politrauma.html. Tab 1: sticky x-A-B-C-D-E jump bar
   (ptGo() in js/legacy-bridge.js) + vertical rail with one big lettered
   circle per step, ending in a "¿Estable?" fork. Tab 2: AMPLE (same circles,
   neutral) + head-to-toe two-column list. Every color comes from tokens.css
   so light and dark both work; nothing animates. */
.pt { --pt-dot: 48px; --pt-gap: 12px; --pt-bar: 68px; }
@media (min-width: 769px) { .pt { --pt-dot: 56px; --pt-gap: 14px; } }

/* Urgency color carried by each letter: x–C red, D–E amber, AMPLE neutral */
.pt-red     { --pt-c: var(--red);   --pt-tint: var(--red-bg); --pt-bd: var(--red-bd); }
.pt-amb     { --pt-c: var(--amber); --pt-tint: var(--amb-bg); --pt-bd: var(--amb-bd); }
.pt-neutral { --pt-c: var(--text);  --pt-tint: var(--bg3);    --pt-bd: var(--border2); }

.pt-vh {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* Aviso inicial (reuses .cl .cl-r) */
.pt-aviso .cl-body p + p { margin-top: 3px; }

/* Sober notes: "Qué cambió en ATLS 11", "Cuándo empezarla" */
.pt-note {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border2);
  border-radius: var(--r);
  padding: 9px 12px;
  margin-bottom: 18px;
  font-size: 12.5px; line-height: 1.55; color: var(--text2);
}
.pt-note p + p { margin-top: 3px; }
.pt-note strong { color: var(--text); }

/* ── Jump bar: sticky at the top of #screen (the scroll container) while
   tab 1 is on screen. 6 × 44px targets fit in the 356px content box of a
   380px phone (12px .view padding each side). --pt-bar = its height + air,
   used as the steps' scroll-margin-top. */
.pt-jump {
  position: sticky; top: 0; z-index: 3;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  padding: 6px 0;
  margin-bottom: 14px;
}
.pt-jump-in { display: flex; justify-content: space-between; gap: 4px; max-width: 360px; }
.pt-jump-btn {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 800; line-height: 1;
  color: var(--pt-c);
  background: var(--pt-tint);
  border: 1.5px solid var(--pt-bd);
}
/* Hover ring only where hover is real: on touch, :hover sticks after a tap
   and would read as a "current step" marker on the wrong letter. */
@media (hover: hover) { .pt-jump-btn:hover { border-color: var(--pt-c); } }
.pt-jump-btn:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; }

/* ── Rail: a 2px line through the centre of the circles column; each item
   draws its own segment (::before) so the line runs unbroken from x down to
   "¿Estable?", where .pt-fork takes over. */
.pt-rail { list-style: none; margin: 0; padding: 0; }
.pt-rail > li {
  position: relative;
  padding-left: calc(var(--pt-dot) + var(--pt-gap));
  padding-bottom: 26px;
}
.pt-rail > li::before {
  content: '';
  position: absolute; top: 0; bottom: 0;
  left: calc(var(--pt-dot) / 2 - 1px);
  width: 2px;
  background: var(--text3); /* ≥3:1 on --bg in both themes: the rail carries meaning */
}
.pt-rail > li:first-child::before { top: calc(var(--pt-dot) / 2); }

.pt-step { scroll-margin-top: var(--pt-bar); }
.pt-step-hd {
  display: flex; align-items: center; gap: var(--pt-gap);
  margin: 0 0 6px calc(-1 * (var(--pt-dot) + var(--pt-gap)));
  min-height: var(--pt-dot);
  font-size: 16px; font-weight: 700; line-height: 1.3; letter-spacing: -.2px;
  color: var(--text);
}
.pt-step-hd:focus { outline: none; }
.pt-step-hd:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: var(--r); }

/* The big letter — the largest type on the screen. Opaque base (--bg) under
   the tint so the rail line doesn't show through the circle. */
.pt-letter {
  position: relative; /* paints above the rail line */
  flex: 0 0 var(--pt-dot);
  width: var(--pt-dot); height: var(--pt-dot);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: calc(var(--pt-dot) * .62); font-weight: 800; line-height: 1;
  color: var(--pt-c);
  background: linear-gradient(var(--pt-tint), var(--pt-tint)), var(--bg);
  border: 2px solid var(--pt-bd);
}
/* Lowercase x: optical nudge so it sits as centred as the capitals */
.pt-lc { padding-bottom: .1em; }

/* Step blocks, always Evaluá → Hacé → Si encontrás (labels in sentence case) */
.pt-blk { margin-top: 10px; }
.pt-blk-lbl { font-size: 12px; font-weight: 700; color: var(--text2); margin-bottom: 3px; }
.pt-lines { list-style: none; margin: 0; padding: 0; }
.pt-lines li {
  position: relative;
  padding-left: 13px; margin-bottom: 4px;
  font-size: 13.5px; line-height: 1.5; color: var(--text);
}
.pt-lines li::before {
  content: '';
  position: absolute; left: 1px; top: .6em;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--text3);
}

/* "Si encontrás": the only block with a faint red ground; one row per
   hallazgo → acción */
.pt-si { background: var(--red-bg); border-radius: var(--r); padding: 8px 12px 4px; }
.pt-si .pt-blk-lbl { color: var(--red); margin-bottom: 0; }
.pt-rows { list-style: none; margin: 0; padding: 0; }
.pt-rows li { padding: 6px 0; font-size: 13.5px; line-height: 1.5; color: var(--text); }
.pt-rows li + li { border-top: 1px solid var(--red-bd); }

/* Letterless rail nodes (adjuntos, Reevaluá, ¿Estable?): small marker on
   the line, vertically centred on the item's first line (--pt-node-y). */
.pt-node::after {
  content: '';
  position: absolute;
  left: calc(var(--pt-dot) / 2 - 7px);
  top: var(--pt-node-y, 3px);
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--text3);
}

.pt-adj { --pt-node-y: 16px; }
.pt-adj details { border: 1px solid var(--border); border-radius: var(--r); background: var(--bg2); }
.pt-adj summary {
  list-style: none; cursor: pointer;
  min-height: 44px; padding: 0 12px;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 13.5px; font-weight: 600; color: var(--text);
}
.pt-adj summary::-webkit-details-marker { display: none; }
/* Glyph is decorative: '/ ""' keeps it out of the accessible name (the
   open/closed state is already announced); the plain value is the fallback. */
.pt-adj summary::after { content: '▸'; content: '▸' / ''; font-size: 12px; color: var(--text3); }
.pt-adj details[open] summary::after { content: '▾'; content: '▾' / ''; }
.pt-adj summary:focus-visible { outline: 2px solid var(--acc); outline-offset: 2px; border-radius: var(--r); }
.pt-adj ul { list-style: none; margin: 0; padding: 0 12px 6px; }
.pt-adj li {
  padding: 5px 0;
  border-top: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.5; color: var(--text2);
}
.pt-adj li strong { color: var(--text); }

.pt-reeval { font-size: 13.5px; line-height: 1.5; color: var(--text); }
.pt-rail > .pt-reeval { padding-bottom: 22px; }

.pt-q { --pt-node-y: 3px; }
.pt-rail > .pt-q { padding-bottom: 12px; }
.pt-q p { font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--text); }
.pt-q::after { border-radius: 2px; transform: rotate(45deg); border-color: var(--text2); }

/* ── Fork of "¿Estable?": the rail comes down, turns right along a
   horizontal bar and drops one arrow into each outcome box. Stays two
   columns at every width so it always reads as a decision. */
.pt-fork {
  --pt-fgap: 10px;
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--pt-fgap);
  align-items: start;
  padding-top: 30px;
  max-width: 560px;
}
.pt-fork::before {
  content: '';
  position: absolute; top: 0; height: 16px;
  left: calc(var(--pt-dot) / 2 - 1px);
  right: calc(25% - var(--pt-fgap) / 4 - 1px); /* ends over the right box's centre */
  border-left: 2px solid var(--text3);
  border-bottom: 2px solid var(--text3);
  border-bottom-left-radius: 8px;
}
.pt-branch {
  position: relative;
  background: var(--bg2);
  border: 1.5px solid var(--border2);
  border-radius: var(--r);
  padding: 9px 11px;
  font-size: 13px; line-height: 1.45; color: var(--text);
}
.pt-branch::before { /* stem from the bar down to the box */
  content: '';
  position: absolute; top: -16.5px; left: calc(50% - 1px);
  width: 2px; height: 9px;
  background: var(--text3);
}
.pt-branch::after { /* arrowhead */
  content: '';
  position: absolute; top: -7.5px; left: calc(50% - 5px);
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 6px solid var(--text3);
}
.pt-branch-hd { display: block; font-weight: 700; font-size: 13.5px; margin-bottom: 3px; }
.pt-no  { border-color: var(--red-bd); }
.pt-no .pt-branch-hd  { color: var(--red); }
.pt-yes { border-color: var(--grn-bd); }
.pt-yes .pt-branch-hd { color: var(--green); }

/* ── Tab 2 ── */
.pt-h2 { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--text); margin: 22px 0 10px; }

/* AMPLE: 5 big neutral circles in a row, then each letter's text. When the
   module is wide enough, each text sits directly under its letter. */
.pt-ample { container-type: inline-size; }
.pt-ample-row {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 8px;
  justify-items: center;
  margin-bottom: 8px;
}
.pt-ample-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 8px; }
.pt-ample-list li {
  padding: 6px 0;
  border-top: 1px solid var(--border);
  font-size: 13.5px; line-height: 1.5; color: var(--text);
}
.pt-ample-k { font-weight: 800; }
.pt-ample-n { font-weight: 600; }
.pt-ample-d { display: block; font-size: 13px; color: var(--text2); }
@container (min-width: 600px) {
  .pt-ample-row { justify-items: start; }
  .pt-ample-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pt-ample-list li { border-top: 0; padding: 0; }
}

/* Head-to-toe: two columns, light row separators only, no outer border */
.pt-exam { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.5; }
.pt-exam th, .pt-exam td {
  text-align: left; vertical-align: top;
  padding: 7px 0;
  border-top: 1px solid var(--border);
}
.pt-exam thead th { border-top: 0; padding-top: 0; font-size: 11.5px; font-weight: 600; color: var(--text2); }
.pt-exam tbody th { width: 8.5em; padding-right: 12px; font-weight: 700; color: var(--text); }
.pt-exam td { color: var(--text2); }
@media (min-width: 769px) { .pt-exam tbody th { width: 11em; } }

.pt-tec {
  margin-top: 16px; padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 13px; color: var(--text2);
}
.pt-src { margin: 22px 0 16px; font-size: 11px; color: var(--text2); } /* bottom margin clears the fixed copyright strip */

/* Windows contrast themes: the rail, stems and dots are background-drawn
   (forced to Canvas, so they vanish) and the arrowhead's transparent side
   borders get painted (a solid box). Redraw them in the theme's text color. */
@media (forced-colors: active) {
  .pt-rail > li::before, .pt-branch::before, .pt-lines li::before { forced-color-adjust: none; background: CanvasText; }
  .pt-branch::after { forced-color-adjust: none; border-top-color: CanvasText; }
}

/* ══ MÓDULO: TEC ══ */
/* content/modules/tec.html. Tab 1: GCS table, neuroprotection, herniation
   signs (red callout), discharge. Tab 2: the Canadian CT Head Rule checklist
   (calc-tac-craneo on the shared calculator engine, mounted in the tab via
   data-calculator by js/router.js), then New Orleans as a static list.
   Built on house components (.tabs, .tbl, .cl, ul.bullets, .calc-*); this
   block only adds sentence-case headings, notes and spacing. Tokens only,
   so light and dark both work; nothing animates. */
.tec-h2 { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--text); margin: 22px 0 10px; }
.tec .tab-pane > .tec-h2:first-child { margin-top: 0; }

.tec-pt { margin-bottom: 14px; }

/* Sober notes: GCS por componentes, "A quién se aplica", Nueva Orleans intro, closing caveat */
.tec-note {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border2);
  border-radius: var(--r);
  padding: 9px 12px;
  margin: 10px 0 14px;
  font-size: 13px; line-height: 1.55; color: var(--text2);
}
.tec-note p + p { margin-top: 3px; }
.tec-note strong { color: var(--text); }
.tec-final { margin-top: 18px; }

/* A sentence that is its own idea gets its own line */
.tec-line { display: block; }

/* GCS table: house .tbl, headers in sentence case, severity as row header */
.tbl.tec-gcs th { text-transform: none; letter-spacing: 0; font-size: 11.5px; }
.tbl.tec-gcs tbody th {
  background: none; vertical-align: top;
  padding: 10px 13px;
  font-size: 13px; font-weight: 700; color: var(--text);
}
.tbl.tec-gcs tbody tr:last-child th { border-bottom: none; }
.tbl.tec-gcs tbody tr:hover th { background: var(--bg3); }
.tec-gcs-n { white-space: nowrap; font-family: var(--mono); color: var(--text); }
@media (max-width: 768px) { .tbl.tec-gcs tbody th { padding: 9px 10px; font-size: 12px; } }

/* Signos de herniación: trigger, then one action per line */
.tec-hern { margin: 18px 0; }
.tec-cl-hd { font-size: 14px; font-weight: 700; line-height: 1.3; color: var(--red); margin-bottom: 4px; }
.tec-then { padding-left: 14px; }

/* Checklist: the engine's group headings are uppercase one-liners; here
   they are sentence case and may wrap (long labels at 380px). */
.tec-calc .sec-hd-lbl {
  font-size: 13px; font-weight: 700; color: var(--text);
  text-transform: none; letter-spacing: 0; white-space: normal;
}

/* Nueva Orleans: short items, two columns when there is room */
@media (min-width: 769px) {
  .tec-no { columns: 2; column-gap: 32px; }
  .tec-no li { break-inside: avoid; }
}

/* ══ MÓDULO: SEPSIS ══ */
/* qSOFA, rendered by js/calculators/engine.js inside the module's own card:
   no second card frame, sentence-case criteria, No / Sí side by side. */
.sep-qsofa > .card { background: none; border: 0; border-radius: 0; box-shadow: none; margin: 0; }
.sep-qsofa > .card > .card-body { padding: 0; }
.sep-qsofa .sec-hd-lbl {
  font-size: 13px; font-weight: 700; color: var(--text);
  text-transform: none; letter-spacing: 0; white-space: normal;
}
.sep-qsofa .calc-grid { flex-direction: row; }
.sep-qsofa .calc-opt { flex: 1; }

/* ══ MÓDULO: PANCREATITIS ══ */
/* BISAP (js/calculators/bisap.js): one row per criterion whose point lights
   up when met; SIRS counts 2 of 4 below its row. The author's layout, with
   theme colours instead of fixed ones. */
.bisap-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.bisap-row:last-child { border-bottom: 0; }
.bisap-row label { display: flex; align-items: center; gap: 10px; cursor: pointer; flex: 1; line-height: 1.35; }
.bisap-row input[type=checkbox] { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--red); }
.bisap-lt { font-weight: 700; min-width: 1.2em; color: var(--red); }
.bisap-sub { font-size: .82em; opacity: .7; display: block; }
.bisap-num { display: flex; gap: 6px; align-items: center; }
.bisap-num input, .bisap-num select { font: inherit; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border2); background: transparent; color: inherit; width: 84px; }
.bisap-num select { width: auto; }
.bisap-pt { font-weight: 700; min-width: 2.2em; text-align: right; opacity: .35; }
.bisap-pt.on { opacity: 1; color: var(--red); }
.bisap-sirs { margin: 4px 0 4px 30px; padding: 6px 10px; border-left: 2px solid var(--border2); }
.bisap-sirs label { display: flex; align-items: center; gap: 10px; font-size: .9em; padding: 4px 0; cursor: pointer; } /* one criterion per line */
.bisap-sirs input[type=checkbox] { width: 20px; height: 20px; flex-shrink: 0; accent-color: var(--red); }
.bisap-out { margin-top: 14px; padding: 14px; border-radius: 10px; border: 2px solid var(--border2); text-align: center; }
.bisap-out.lo { border-color: var(--green); }
.bisap-out.hi { border-color: var(--red); }
.bisap-score { font-size: 2.6em; font-weight: 800; line-height: 1; }
.bisap-risk { font-weight: 700; margin-top: 4px; }
.bisap-note { margin-top: 10px; padding: 8px 10px; border-radius: 6px; background: var(--bg3); font-size: .85em; text-align: left; word-break: break-word; }
.bisap-btns { display: flex; gap: 8px; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.bisap-btns button { font: inherit; padding: 7px 14px; border-radius: 6px; border: 1px solid var(--border2); background: transparent; color: inherit; cursor: pointer; }

/* ══ MÓDULO: RCP INTERACTIVA ══ */
/* js/rcp/ui.js (view type "rcp"). Resuscitation mode: high contrast, large
   type and large targets (usable with gloves), minimal navigation, no
   animation. Everything secondary stays small so it never competes with the
   clock and the current action. Tokens only, so light and dark both work. */
.rcp { max-width: 720px; margin: 0 auto; padding: 12px 0 96px; } /* bottom: clears the fixed copyright strip and scroll button */
.rcp-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.rcp-top-actions { display: flex; gap: 8px; }
.rcp-profile { display: inline-block; font-size: 12px; font-weight: 600; color: var(--text2); border: 1px solid var(--border2); border-radius: 999px; padding: 3px 10px; }

.rcp-start { display: flex; flex-direction: column; align-items: stretch; gap: 14px; padding-top: 12px; }
.rcp-start .rcp-profile { align-self: flex-start; }
.rcp-title { font-size: 20px; font-weight: 800; line-height: 1.25; color: var(--text); margin: 4px 0; }
.rcp-h2 { font-size: 16px; font-weight: 700; color: var(--text); margin: 18px 0 8px; }
.rcp-disclaimer { font-size: 13px; color: var(--text2); margin: 0; }
.rcp-resume-info { font-size: 16px; color: var(--text2); margin: 0; }
.rcp-resume-info b { color: var(--text); font-family: var(--mono); }

.rcp-prompt { font-size: clamp(20px, 5.6vw, 26px); font-weight: 800; line-height: 1.25; padding: 14px 16px; border-radius: var(--r-lg); border: 2px solid; margin: 8px 0; }
.rcp-prompt.is-red { border-color: var(--red); background: var(--red-bg); color: var(--text); }
.rcp-prompt.is-amber { border-color: var(--amber); background: var(--amb-bg); color: var(--text); }
.rcp-prompt.is-blue { border-color: var(--acc); background: var(--blue-bg); color: var(--text); }
.rcp-prompt.is-green { border-color: var(--green); background: var(--grn-bg); color: var(--text); }
.rcp-sub { font-size: 13px; line-height: 1.45; color: var(--text2); margin: 6px 0; }
.rcp-reminders { font-size: 14px; line-height: 1.5; color: var(--text2); margin: 8px 0; }
.rcp-box { display: inline-block; font-size: 11px; font-weight: 700; color: var(--text); background: var(--bg3); border: 1px solid var(--border2); border-radius: 6px; padding: 1px 7px; margin-right: 4px; }
.rcp-ind { display: flex; align-items: center; justify-content: space-between; gap: 10px; border: 2px solid var(--amber); background: var(--amb-bg); border-radius: var(--r); padding: 8px 10px; margin: 8px 0; }
.rcp-ind-text { font-size: 17px; font-weight: 800; color: var(--text); }
.rcp-warn { font-size: 13px; color: var(--text); border-left: 3px solid var(--red); background: var(--red-bg); padding: 8px 10px; border-radius: var(--r); margin: 10px 0; }

/* Buttons: big targets, solid colours, no motion */
.rcp-btn { display: inline-flex; align-items: center; justify-content: center; text-align: center; min-height: 56px; padding: 10px 14px; border-radius: var(--r-lg); border: 2px solid var(--border2); background: var(--bg3); color: var(--text); font-size: 17px; font-weight: 700; line-height: 1.2; }
.rcp-btn:focus-visible { outline: 3px solid var(--acc); outline-offset: 2px; }
.rcp-small { min-height: 44px; padding: 6px 14px; font-size: 15px; }
.rcp-big { min-height: 72px; font-size: 19px; }
.rcp-huge { min-height: 96px; font-size: clamp(20px, 5.8vw, 26px); font-weight: 800; }
/* Text in the page background colour: dark on the dark theme's light accents, light on the light theme's dark ones. */
.rcp-primary { background: var(--acc); border-color: var(--acc); color: var(--bg); }
.rcp-danger { background: var(--red); border-color: var(--red); color: var(--bg); }
.rcp-ok { background: var(--green); border-color: var(--green); color: var(--bg); }
.rcp-info { background: var(--blue-bg); border-color: var(--acc); color: var(--text); }
.rcp-ghost { background: transparent; }
.rcp-link { background: none; border: none; color: var(--acc); text-decoration: underline; font-size: 15px; padding: 10px 0; text-align: left; min-height: 44px; }
.rcp-link-danger { color: var(--red); }
.rcp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.rcp-stack { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; }
.rcp-ref { font-size: 13px; line-height: 1.45; color: var(--text2); margin: 4px 0 0; padding-left: 18px; }

/* Top card: total duration, ROSC and Finalizar always in reach */
.rcp-topcard { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 8px 12px; margin-bottom: 8px; }
.rcp-total { display: flex; flex-direction: column; }
.rcp-total-label { font-size: 12px; color: var(--text2); }
.rcp-total-time { font-family: var(--mono); font-size: clamp(30px, 9vw, 40px); font-weight: 800; line-height: 1.05; color: var(--text); }

/* Ring clocks: compressions (current cycle) and the interval drug. The SVG
   draws only the ring; the numbers are HTML on top. The ring colour carries
   the state (blue running, amber pre-alert / pause, red due or overdue,
   green drug window open); the text always says it too. */
.rcp-ringcard { display: grid; grid-template-columns: minmax(0, 1fr) minmax(112px, 38%); gap: 10px; align-items: center; background: var(--bg2); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px; margin: 10px 0; }
.rcp-ring { position: relative; width: 100%; max-width: 220px; aspect-ratio: 1; justify-self: center; }
.rcp-ring-svg { display: block; width: 100%; height: 100%; }
.rcp-ring-track { fill: none; stroke: var(--bg3); stroke-width: 9; }
.rcp-ring-bar { fill: none; stroke: var(--acc); stroke-width: 9; stroke-linecap: round; }
.rcp-ring-tick { stroke: var(--text2); stroke-width: 2.5; stroke-linecap: round; }
.rcp-ring.is-amber .rcp-ring-bar { stroke: var(--amber); }
.rcp-ring.is-red .rcp-ring-bar { stroke: var(--red); }
.rcp-ring.is-green .rcp-ring-bar { stroke: var(--green); }
.rcp-ring.is-none .rcp-ring-bar { stroke: transparent; }
.rcp-ring-center { position: absolute; inset: 14%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 2px; }
.rcp-ring-label { font-size: 12px; color: var(--text2); }
.rcp-ring-big { font-family: var(--mono); font-size: clamp(28px, 9vw, 42px); font-weight: 800; line-height: 1; color: var(--text); }
.rcp-ring.is-red .rcp-ring-big { color: var(--red); }
.rcp-ring-sub { font-size: 12px; line-height: 1.25; color: var(--text2); }
.rcp-ringside { display: flex; flex-direction: column; gap: 8px; }
.rcp-ringside .rcp-btn { min-height: 52px; font-size: 16px; padding: 8px 10px; }
.rcp-counters { display: flex; justify-content: space-around; gap: 6px; text-align: center; }
.rcp-counters span { display: flex; flex-direction: column; }
.rcp-counters small { font-size: 11px; color: var(--text2); }
.rcp-counters b { font-family: var(--mono); font-size: 28px; line-height: 1.1; color: var(--text); }
.rcp-ring-ind { grid-column: 1 / -1; margin: 0; font-size: 17px; font-weight: 800; text-align: center; color: var(--text); border: 2px solid var(--amber); background: var(--amb-bg); border-radius: var(--r); padding: 8px; }
.rcp-warn-btn { background: var(--amber); border-color: var(--amber); color: var(--bg); }
.rcp-ring-extra { font-size: 12px; font-weight: 700; color: var(--text2); }
.rcp-pauses { font-size: 11px; line-height: 1.35; color: var(--text2); text-align: center; margin: 0; }

/* RCE (ROSC) button and the named event buttons */
.rcp-rce { display: flex; flex-direction: column; width: 100%; margin: 12px 0; letter-spacing: .04em; }
.rcp-rce small { font-size: 14px; font-weight: 700; letter-spacing: 0; margin-top: 2px; }
.rcp-events { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 10px 0; }
.rcp-hint { border-color: var(--amber); background: var(--amb-bg); }
.rcp-done { font-size: 15px; font-weight: 700; color: var(--text); margin: 8px 0; }
.rcp-causes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.rcp-check { min-height: 52px; font-size: 15px; flex-direction: column; align-items: flex-start; justify-content: center; text-align: left; overflow-wrap: break-word; hyphens: auto; }
.rcp-check.is-on { border-color: var(--green); background: var(--grn-bg); opacity: 1; }
.rcp-check small { font-family: var(--mono); font-size: 12px; font-weight: 600; color: var(--text2); }
.rcp-toggle { justify-content: flex-start; gap: 12px; width: 100%; text-align: left; }
.rcp-toggle-label { flex: 1; }
.rcp-voice { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 10px; }
.rcp-voice .rcp-sub { flex: 1 1 200px; margin: 0; }
.rcp-toggle-state { font-size: 14px; font-weight: 600; color: var(--text2); }
.rcp-switch { position: relative; flex: none; width: 52px; height: 30px; border-radius: 999px; background: var(--bg); border: 2px solid var(--border2); }
.rcp-switch-knob { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: var(--text2); }
.rcp-toggle[aria-checked="true"] { border-color: var(--acc); }
.rcp-toggle[aria-checked="true"] .rcp-toggle-state { color: var(--text); }
.rcp-toggle[aria-checked="true"] .rcp-switch { background: var(--acc); border-color: var(--acc); }
.rcp-toggle[aria-checked="true"] .rcp-switch-knob { left: 25px; background: var(--bg); }
.rcp-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Live log and the confirmation toast */
.rcp-recent { border-top: 1px solid var(--border); margin-top: 12px; }
.rcp-recent-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--text); }
.rcp-recent-list li.is-voided { text-decoration: line-through; color: var(--text2); }
.rcp-recent-list .rcp-chrono-time { font-size: 13px; margin-right: 6px; }
.rcp-toast { position: fixed; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 400; max-width: min(92vw, 560px); background: var(--bg2); color: var(--text); border: 2px solid var(--green); border-radius: var(--r-lg); padding: 10px 16px; font-size: 15px; font-weight: 700; box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }

/* Summary, chronology and note */
.rcp-summary { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: 15px; margin: 0; }
.rcp-summary dt { color: var(--text2); }
.rcp-summary dd { margin: 0; font-weight: 700; color: var(--text); }
.rcp-reserved { border: 2px dashed var(--border2); border-radius: var(--r); padding: 4px 12px 10px; margin: 14px 0; color: var(--text2); font-size: 14px; }
.rcp-chrono { list-style: none; padding: 0; margin: 0; }
.rcp-chrono li { display: grid; grid-template-columns: auto auto 1fr auto; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.rcp-chrono-time, .rcp-chrono-off { font-family: var(--mono); color: var(--text2); }
.rcp-chrono-text { color: var(--text); }
.rcp-chrono li.is-voided .rcp-chrono-text { text-decoration: line-through; color: var(--text2); }
.rcp-edited { font-style: normal; font-size: 11px; font-weight: 700; color: var(--text); background: var(--amb-bg); border: 1px solid var(--amb-bd); border-radius: 4px; padding: 0 5px; }
.rcp-note { width: 100%; box-sizing: border-box; font: 14px/1.5 var(--font); color: var(--text); background: var(--bg2); border: 1px solid var(--border2); border-radius: var(--r); padding: 10px; }

/* Panels over the main area */
.rcp-sheet { position: fixed; inset: 0; z-index: 300; background: rgba(0, 0, 0, .6); display: flex; align-items: flex-end; justify-content: center; }
.rcp-sheet-panel { width: 100%; max-width: 720px; max-height: 90vh; overflow-y: auto; box-sizing: border-box; background: var(--bg2); border-top: 2px solid var(--border2); border-radius: var(--r-xl) var(--r-xl) 0 0; padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px)); }
.rcp-sheet-panel .rcp-h2:first-child { margin-top: 4px; }
.rcp-close { width: 100%; margin-top: 12px; }
.rcp-list { list-style: none; padding: 0; margin: 0; }
.rcp-list > li { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 15px; color: var(--text); }
.rcp-med-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rcp-med-info { font-size: 13px; color: var(--text2); margin-top: 4px; }
.rcp-form { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.rcp-form label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; color: var(--text2); }
.rcp-form input:not([type="radio"]):not([type="checkbox"]), .rcp-form select { min-height: 48px; font-size: 18px; color: var(--text); background: var(--bg); border: 1px solid var(--border2); border-radius: var(--r); padding: 6px 10px; }
.rcp-form .rcp-radio { flex-direction: row; align-items: center; gap: 10px; min-height: 44px; font-size: 16px; color: var(--text); }
.rcp-radio input { width: 22px; height: 22px; }

/* Entry point from the PCR / RCP module */
.rcp-open-btn { display: block; width: 100%; min-height: 56px; margin: 0 0 14px; border-radius: var(--r-lg); border: 2px solid var(--red); background: var(--red-bg); color: var(--text); font-size: 17px; font-weight: 800; }