/* Layout: tool-first app, a live hospital wristband (pulsera de recién nacido) as hero, three tabs below */
:root{
  --bg:#F2F5F3; --surface:#FFFFFF; --ink:#16302A; --muted:#5B6E68; --line:#D7E0DC;
  --accent:#D63F72; --accent-soft:#FBE3EC; --teal:#2C7A6B; --teal-soft:#DDEFEA;
  --warn:#B7791F; --warn-soft:#FCF0D9; --bad:#C2412D; --bad-soft:#FBE4DF;
  --band:#E9F1FF; --band-ink:#21375E;
  --f-display:"Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --f-body:"Atkinson Hyperlegible", system-ui, -apple-system, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0F1A17; --surface:#16241F; --ink:#E6EFEB; --muted:#9DB0A9; --line:#2A3B35;
  --accent:#F06A97; --accent-soft:#3A1E2A; --teal:#5FC0AC; --teal-soft:#183A33;
  --warn:#E7B04F; --warn-soft:#3A2E17; --bad:#F07C66; --bad-soft:#3D211C;
  --band:#1E2B45; --band-ink:#C9D8F5; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0F1A17; --surface:#16241F; --ink:#E6EFEB; --muted:#9DB0A9; --line:#2A3B35;
  --accent:#F06A97; --accent-soft:#3A1E2A; --teal:#5FC0AC; --teal-soft:#183A33;
  --warn:#E7B04F; --warn-soft:#3A2E17; --bad:#F07C66; --bad-soft:#3D211C;
  --band:#1E2B45; --band-ink:#C9D8F5; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:16px;line-height:1.55}
.wrap{max-width:960px;margin:0 auto;padding-inline:16px;padding-block:20px 48px}
h1,h2,h3{font-family:var(--f-display);text-wrap:balance;margin:0;line-height:1.1}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.brand{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.logo{font-family:var(--f-display);font-weight:800;font-size:1.6rem;letter-spacing:-.02em}
.logo span{color:var(--accent)}
.tagline{color:var(--muted);font-size:.95rem}
.hero{margin-top:22px;display:grid;gap:10px}
.hero h1{font-size:clamp(1.9rem,5vw,3rem);font-weight:800;letter-spacing:-.03em;max-width:20ch}
.hero p{margin:0;color:var(--muted);max-width:58ch}

/* wristband */
.band{position:relative;margin:22px 0 6px;background:var(--band);color:var(--band-ink);border-radius:999px;
  padding:14px 26px 14px 64px;display:flex;align-items:center;gap:14px;min-height:74px;overflow:hidden;
  border:1px dashed color-mix(in srgb,var(--band-ink) 30%,transparent)}
.band::before,.band::after{content:"";position:absolute;top:50%;width:14px;height:14px;border-radius:50%;
  background:var(--bg);transform:translateY(-50%);border:1px solid color-mix(in srgb,var(--band-ink) 25%,transparent)}
.band::before{left:20px}.band::after{right:-4px;opacity:0}
.band .rn{font-family:var(--f-mono);font-weight:700;font-size:.75rem;letter-spacing:.12em;
  border:1.5px solid currentColor;border-radius:6px;padding:2px 6px;flex:none}
.band .bname{font-family:var(--f-mono);font-weight:700;font-size:clamp(.95rem,3.2vw,1.35rem);
  text-transform:uppercase;letter-spacing:.04em;min-width:0;overflow-wrap:anywhere}
.band .bmeta{margin-left:auto;font-family:var(--f-mono);font-size:.72rem;opacity:.75;text-align:right;flex:none}
@media (max-width:560px){.band{border-radius:22px;flex-wrap:wrap;padding-left:52px}.band .bmeta{margin-left:0;text-align:left}}

/* tabs */
.tabs{display:flex;gap:6px;margin-top:22px;border-bottom:1px solid var(--line);overflow-x:auto}
.tab{background:none;border:0;padding:12px 14px;font-weight:700;color:var(--muted);cursor:pointer;
  border-bottom:3px solid transparent;white-space:nowrap}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent)}
.panel{padding-top:24px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px}
.grid2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px}
@media (max-width:760px){.grid2{grid-template-columns:1fr}}
label{display:block;font-size:.8rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:6px}
.field{display:grid;gap:0;align-content:start}
.fields{display:grid;gap:14px;align-content:start}
input[type=text],select{width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--bg)}
.hint{font-size:.85rem;color:var(--muted);margin:4px 0 0}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;
  padding:11px 18px;font-weight:700;cursor:pointer;background:var(--accent);color:#fff}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.teal{background:var(--teal);color:#fff}
.btn:active{transform:translateY(1px)}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* score */
.score{display:flex;align-items:center;gap:18px}
.dial{--p:0;width:96px;height:96px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:conic-gradient(var(--teal) calc(var(--p)*1%),var(--line) 0)}
.dial b{width:76px;height:76px;border-radius:50%;background:var(--surface);display:grid;place-items:center;
  font-family:var(--f-display);font-size:1.9rem;font-variant-numeric:tabular-nums}
.verdict{font-family:var(--f-display);font-weight:700;font-size:1.3rem}
.checks{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.checks li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;padding:12px;border-radius:12px;background:var(--bg)}
.pill{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:3px 9px;border-radius:999px;white-space:nowrap}
.ok{background:var(--teal-soft);color:var(--teal)}.warn{background:var(--warn-soft);color:var(--warn)}.bad{background:var(--bad-soft);color:var(--bad)}.info{background:var(--accent-soft);color:var(--accent)}
.checks strong{display:block}
.checks span.d{color:var(--muted);font-size:.93rem}

/* swipe */
.deckwrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:20px}
@media (max-width:760px){.deckwrap{grid-template-columns:1fr}}
.deck{position:relative;height:380px;touch-action:pan-y}
.scard{position:absolute;inset:0;background:var(--surface);border:1px solid var(--line);border-radius:22px;
  padding:26px;display:flex;flex-direction:column;gap:12px;cursor:grab;user-select:none;
  box-shadow:0 10px 30px -18px rgba(0,0,0,.35);transition:transform .25s ease}
.scard.drag{transition:none;cursor:grabbing}
.scard .nm{font-family:var(--f-display);font-weight:800;font-size:clamp(2.4rem,7vw,3.4rem);letter-spacing:-.03em;line-height:1}
.scard .mean{font-size:1.15rem}
.scard .meta{color:var(--muted);font-size:.9rem}
.stamp{position:absolute;top:22px;right:22px;font-family:var(--f-mono);font-weight:700;border:3px solid;padding:4px 10px;border-radius:8px;opacity:0;transform:rotate(8deg)}
.stamp.yes{color:var(--teal)}.stamp.no{color:var(--bad);left:22px;right:auto;transform:rotate(-8deg)}
.under{margin-top:auto;display:flex;gap:8px;flex-wrap:wrap}
.chip{font-size:.8rem;padding:4px 10px;border-radius:999px;background:var(--bg);border:1px solid var(--line)}
.swbtns{display:flex;justify-content:center;gap:18px;margin-top:16px}
.round{width:62px;height:62px;border-radius:50%;border:1px solid var(--line);background:var(--surface);font-size:1.5rem;cursor:pointer;display:grid;place-items:center}
.round.yes{color:var(--accent)}.round.no{color:var(--muted)}
.empty{display:grid;place-items:center;text-align:center;height:100%;border:2px dashed var(--line);border-radius:22px;padding:24px;color:var(--muted)}
.code{font-family:var(--f-mono);font-size:.85rem;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px;overflow-wrap:anywhere;user-select:all}
.namelist{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.namelist .chip{background:var(--surface)}
.match .chip{background:var(--accent-soft);color:var(--accent);border-color:transparent;font-weight:700}
.sec{display:grid;gap:10px}
.sec + .sec{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.sec h3{font-size:1.05rem}

/* explore */
.filters{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:10px}
@media (max-width:760px){.filters{grid-template-columns:1fr 1fr}.filters .field:first-child{grid-column:1/-1}}
.ngrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-top:16px}
.ncard{text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px;cursor:pointer;display:grid;gap:4px}
.ncard:hover{border-color:var(--accent)}
.ncard .t{font-family:var(--f-display);font-weight:700;font-size:1.25rem;display:flex;justify-content:space-between;gap:8px}
.ncard .s{font-size:.88rem;color:var(--muted)}
.sx{font-family:var(--f-mono);font-size:.7rem;font-weight:700;padding:2px 6px;border-radius:6px;align-self:center}
.sx.f{background:var(--accent-soft);color:var(--accent)}.sx.m{background:var(--teal-soft);color:var(--teal)}.sx.u{background:var(--warn-soft);color:var(--warn)}
.count{color:var(--muted);font-size:.9rem;margin-top:12px}
.ad{margin-top:22px;border:1px dashed var(--line);border-radius:14px;padding:16px;text-align:center;color:var(--muted);font-size:.88rem}
.ad b{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:4px}

/* modal */
.modal{position:fixed;inset:0;background:rgba(10,20,17,.55);display:grid;place-items:center;padding:16px;z-index:20}
.sheet{background:var(--surface);border-radius:20px;max-width:520px;width:100%;padding:24px;display:grid;gap:14px;max-height:90vh;overflow:auto}
.sheet h2{font-size:2.4rem;font-weight:800;letter-spacing:-.03em}
.kv{display:grid;grid-template-columns:110px 1fr;gap:6px 12px;font-size:.95rem}
.kv dt{color:var(--muted);font-weight:700}.kv dd{margin:0}

/* share card */
.sharecard{border-radius:18px;padding:22px;background:linear-gradient(160deg,var(--accent-soft),var(--teal-soft));display:grid;gap:8px}
.sharecard .small{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sharecard .big{font-family:var(--f-display);font-weight:800;font-size:1.7rem;line-height:1.1}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 16px;border-radius:999px;font-weight:700;z-index:30}
.pages{margin-top:28px}
.pages h3{font-size:1.05rem;margin-bottom:10px}
.pages ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pages a{display:inline-block;font-size:.88rem;padding:4px 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);color:var(--ink);text-decoration:none}
.pages a:hover{border-color:var(--accent)}
footer{margin-top:40px;color:var(--muted);font-size:.85rem;border-top:1px solid var(--line);padding-top:16px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---- Solo páginas de nombre ---- */
a{color:inherit}
.logo{text-decoration:none;color:inherit}
.crumbs{margin-top:18px;font-size:.88rem;color:var(--muted)}
.crumbs a{color:var(--muted)}
.cta{margin-top:18px}
.cta .btn{text-decoration:none}
.btn.ghost{color:var(--ink)}
.stack{display:grid;gap:18px;margin-top:22px}
.card h2{font-size:1.35rem}
.card p{margin:0}
.kv{margin:0}
.notas{margin:0;padding-left:20px;display:grid;gap:6px}
.fig{margin:0;display:grid;gap:8px}
.fig + .fig{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.chart{width:100%;height:auto;display:block}
.chart rect{fill:var(--teal)}
.chart .axis{stroke:var(--line);stroke-width:1}
.chart text{fill:var(--muted);font-family:var(--f-mono);font-size:11px}
details summary{cursor:pointer;color:var(--muted);font-size:.9rem}
table{border-collapse:collapse;width:100%;max-width:420px;margin-top:8px;font-size:.9rem;font-variant-numeric:tabular-nums}
th,td{text-align:left;padding:4px 10px;border-bottom:1px solid var(--line)}
.rel{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rel li{display:grid;grid-template-columns:minmax(110px,max-content) 1fr;gap:4px 14px;align-items:baseline}
.rel a{font-family:var(--f-display);font-weight:700;font-size:1.15rem}
.rel span{color:var(--muted);font-size:.93rem}
@media (max-width:560px){.rel li{grid-template-columns:1fr}}
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.tags a{display:inline-block;padding:5px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);text-decoration:none;font-family:var(--f-display);font-weight:700;font-size:1rem}
.tags a:hover,.tags a:focus-visible{border-color:var(--ink)}