/* Fisiología diagrams (website/physio/): the figure card, its controls and the colour tokens. Every colour that carries
   meaning has a light and a dark value and appears in the figure's legend. The site tokens (--ink, --line…) come from
   /assets/site.css. */
:root {
  --px-main: #0E7490; --px-base: #94A3B8; --px-soft: #E1F6F9;
  --px-lv: #C2185B; --px-ao: #B45309; --px-la: #6D28D9; --px-vol: #1D4ED8; --px-ecg: #0D1A1F; --px-sound: #475569;
  --px-out: #C2410C; --px-in: #1D4ED8; --px-net: #0F766E;
  --px-na: #B45309; --px-k: #6D28D9; --px-ca: #15803D; --px-cl: #0E7490; --px-h2o: #1D4ED8;
  --px-plus: #15803D; --px-minus: #BE123C; --px-up: #BE123C; --px-down: #1D4ED8;
  --px-s1: #0E7490; --px-s2: #15803D; --px-s3: #B45309; --px-s4: #C2185B; --px-s5: #6D28D9; --px-s6: #1D4ED8;
  --px-band: rgba(14, 116, 144, .07); --px-band2: rgba(194, 24, 91, .07); --px-cortex: #FBF3E6; --px-medulla: #F6E4E4;
}
@media (prefers-color-scheme: dark) {
  :root {
    --px-main: #5DDDEC; --px-base: #64748B; --px-soft: #0E2A30;
    --px-lv: #F48FB1; --px-ao: #FCD08A; --px-la: #C4B5FD; --px-vol: #93B4FB; --px-ecg: #E6F0F2; --px-sound: #CBD5E1;
    --px-out: #FDBA74; --px-in: #93B4FB; --px-net: #7EE0D3;
    --px-na: #FCD08A; --px-k: #C4B5FD; --px-ca: #9BE3AE; --px-cl: #5DDDEC; --px-h2o: #93B4FB;
    --px-plus: #9BE3AE; --px-minus: #FDA4B8; --px-up: #FDA4B8; --px-down: #93B4FB;
    --px-s1: #5DDDEC; --px-s2: #9BE3AE; --px-s3: #FCD08A; --px-s4: #F48FB1; --px-s5: #C4B5FD; --px-s6: #93B4FB;
    --px-band: rgba(93, 221, 236, .08); --px-band2: rgba(244, 143, 177, .09); --px-cortex: #2A2214; --px-medulla: #2E1A1C;
  }
}
.px-fig { margin: 20px 0 28px; padding: 14px 12px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow); }
.px-fig > h3 { margin: 0 4px 8px; font: 700 1.06rem/1.3 var(--f-display); }
.px-svg { display: block; width: 100%; height: auto; max-width: 640px; margin: 0 auto; font-family: var(--f-body); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.px-svg text { fill: var(--ink); }
.px-grid { stroke: var(--line); stroke-width: 1; }
.px-axis { stroke: var(--muted); stroke-width: 1.4; }
.px-tick { font-size: 11px; fill: var(--muted) !important; }
.px-alabel { font-size: 12px; font-weight: 600; fill: var(--muted) !important; }
.px-tag { font-size: 12px; font-weight: 700; paint-order: stroke; stroke: var(--surface); stroke-width: 4px; stroke-linejoin: round; }
.px-tag.sm { font-size: 11px; font-weight: 600; }
.px-tag.muted { fill: var(--muted) !important; }
.px-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.px-line.thin { stroke-width: 2; }
.px-line.dash { stroke-dasharray: 6 5; stroke-width: 2; }
.px-hit { fill: transparent; }
.px-tap { cursor: pointer; outline: none; }
.px-tap:focus-visible .px-hit { stroke: var(--cyan); stroke-width: 2; }
.px-tap.on .px-hit { fill: var(--px-soft); }
@media (hover: hover) { .px-tap:hover .px-hit { fill: var(--px-soft); } }
/* the controls, readout, info and legend under the figure */
.px-ctl { display: grid; gap: 10px; margin: 12px 4px 4px; }
.px-ctl[hidden] { display: none; }
.px-range { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; }
.px-range label { font-weight: 600; font-size: .95rem; }
.px-range output { font: 600 .9rem var(--f-mono); color: var(--cyan-ink); }
.px-range input { grid-column: 1 / -1; width: 100%; height: 44px; margin: 0; accent-color: var(--px-main); }
.px-seg { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; }
.px-seg legend { width: 100%; margin: 0 0 4px; font-weight: 600; font-size: .95rem; }
.px-seg button { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--bg); color: var(--ink); font: 600 .92rem var(--f-body); cursor: pointer; }
.px-seg button[aria-pressed="true"] { border-color: var(--px-main); background: var(--px-soft); color: var(--ink); box-shadow: inset 0 0 0 1px var(--px-main); }
.px-read { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 4px 0; font-size: .95rem; }
.px-kv b { font-weight: 600; color: var(--muted); }
.px-info { margin: 10px 4px 0; padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line); font-size: .95rem; line-height: 1.5; min-height: 3em; }
.px-info h4 { margin: 0 0 4px; font-size: 1rem; }
.px-info p { margin: 0 0 6px; } .px-info ul { margin: 4px 0 0; padding-left: 1.2em; } .px-info li { margin: 2px 0; }
.px-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 4px 0; padding: 0; list-style: none; font-size: .88rem; color: var(--muted); }
.px-legend li { display: inline-flex; align-items: center; gap: 6px; }
.px-sw { width: 22px; height: 12px; flex: 0 0 22px; }
.px-cap { margin: 10px 4px 0; font-size: .86rem; line-height: 1.45; color: var(--muted); }
.px-hint { color: var(--muted); }
@media (prefers-reduced-motion: no-preference) { .px-svg .px-anim { transition: d .25s ease; } }