:root{
  --paper:#f7f5ef; --surface:#ffffff; --surface-2:#f1eee5; --surface-3:#eae6da;
  --ink:#12242a; --muted:#5b6e73; --faint:#8b9a9e;
  --line:#ddd8cb; --line-soft:#e9e5da;
  --petrol:#0f4c5c; --petrol-deep:#0a3540; --teal:#2a9d8f; --amber:#d9902b; --clay:#b0563f;
  --on-petrol:#eaf3f2;
  --chip-bg:#e5f4f1; --chip-fg:#1a6b60;
  --warn-bg:#fdf3e0; --warn-fg:#8a5a12; --warn-line:#e9c78a;
  --r:12px;
  --shadow:0 1px 2px rgba(15,76,92,.05), 0 8px 24px -14px rgba(15,76,92,.25);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0a1d23; --surface:#0f2a32; --surface-2:#0d242b; --surface-3:#143038;
    --ink:#e7efee; --muted:#9db3b7; --faint:#6e878d;
    --line:#1d3d47; --line-soft:#173037;
    --petrol:#7fc4c9; --petrol-deep:#a8dbdd; --teal:#4bbfae; --amber:#e9ac52; --clay:#d5745a;
    --chip-bg:#123a37; --chip-fg:#6fd2c1;
    --warn-bg:#372a12; --warn-fg:#e9b767; --warn-line:#6b5320;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 26px -16px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"]{
  --paper:#0a1d23; --surface:#0f2a32; --surface-2:#0d242b; --surface-3:#143038;
  --ink:#e7efee; --muted:#9db3b7; --faint:#6e878d;
  --line:#1d3d47; --line-soft:#173037;
  --petrol:#7fc4c9; --petrol-deep:#a8dbdd; --teal:#4bbfae; --amber:#e9ac52; --clay:#d5745a;
  --chip-bg:#123a37; --chip-fg:#6fd2c1;
  --warn-bg:#372a12; --warn-fg:#e9b767; --warn-line:#6b5320;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 10px 26px -16px rgba(0,0,0,.7);
}

*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:Archivo,"IBM Plex Sans",sans-serif;margin:0;line-height:1.15;
  letter-spacing:-.018em;text-wrap:balance}
p{margin:0}
a{color:var(--petrol);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--teal);outline-offset:2px;border-radius:6px}
.mono{font-family:"IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums}
.wrap{max-width:860px;margin:0 auto;padding:0 20px}

/* ---------- barra superior ---------- */
header.top{position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--paper) 92%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;
  height:60px;max-width:1120px;margin:0 auto;padding:0 20px}
.brand{display:flex;align-items:center;gap:10px;font-family:Archivo,sans-serif;font-weight:700;
  font-size:1.06rem;color:var(--petrol-deep);text-decoration:none;letter-spacing:-.02em}
.brand .dot{width:31px;height:31px;border-radius:9px;display:grid;place-items:center;
  font-size:16px;background:linear-gradient(135deg,var(--teal),var(--petrol));color:#fff}
.top-in nav{display:flex;gap:16px;font-size:.9rem;flex-wrap:wrap}
.top-in nav a{color:var(--muted);text-decoration:none}
.top-in nav a:hover{color:var(--petrol);text-decoration:underline}

/* ---------- miga de pan ---------- */
.miga{font-size:.82rem;color:var(--faint);padding:22px 0 0;
  display:flex;gap:7px;flex-wrap:wrap;align-items:baseline}
.miga a{color:var(--muted);text-decoration:none}
.miga a:hover{text-decoration:underline}
.miga span[aria-hidden]{color:var(--line)}

/* ---------- encabezado de ficha ---------- */
.hd{padding:14px 0 30px;border-bottom:1px solid var(--line);margin-bottom:30px}
.eyebrow{font-family:"IBM Plex Mono",monospace;font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);margin-bottom:11px}
h1{font-size:clamp(1.65rem,4.2vw,2.35rem);font-weight:700}
.hd .sirve{margin-top:15px;font-size:1.06rem;color:var(--muted);max-width:62ch}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.chip{background:var(--chip-bg);color:var(--chip-fg);border-radius:999px;
  padding:3px 11px;font-size:.79rem;text-decoration:none;white-space:nowrap}
a.chip:hover{filter:brightness(.94)}
.chip.n{background:var(--surface-2);color:var(--muted)}

/* ---------- aviso ---------- */
.aviso{background:var(--warn-bg);color:var(--warn-fg);border:1px solid var(--warn-line);
  border-radius:var(--r);padding:13px 16px;font-size:.9rem;margin-bottom:26px}

/* ---------- campos ---------- */
dl{margin:0;display:flex;flex-direction:column;gap:1px;
  background:var(--line-soft);border:1px solid var(--line-soft);
  border-radius:var(--r);overflow:hidden}
.fld{background:var(--surface);padding:15px 18px}
dt{font-family:"IBM Plex Mono",monospace;font-size:.68rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--faint);margin-bottom:5px}
dd{margin:0;font-size:.97rem}

/* ---------- bloque de laboratorios ---------- */
.labs{margin-top:38px}
.labs h2{font-size:1.3rem}
.labs .sub{color:var(--muted);font-size:.92rem;margin-top:9px;max-width:62ch}
.labs .nota{color:var(--faint);font-size:.85rem;margin-top:10px;max-width:62ch}
.lista{display:flex;flex-direction:column;gap:8px;margin-top:20px}
.lab{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 16px;display:flex;flex-direction:column;gap:5px;box-shadow:var(--shadow)}
.lab .nm{font-weight:600;font-size:1rem}
.lab .nm a{text-decoration:none}
.lab .nm a:hover{text-decoration:underline}
.lab .loc{font-size:.86rem;color:var(--muted)}
.lab .cont{font-size:.86rem;display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:2px}
.vf{background:var(--chip-bg);color:var(--chip-fg);border-radius:999px;
  padding:2px 9px;font-size:.72rem;font-weight:500;white-space:nowrap}
.mas{margin-top:14px;font-size:.9rem;color:var(--muted)}

/* ---------- relacionadas ---------- */
.rel{margin-top:38px;padding-top:26px;border-top:1px solid var(--line)}
.rel h2{font-size:1.15rem;margin-bottom:14px}
.rel ul{margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:2px 22px}
.rel li{padding:5px 0;font-size:.93rem;border-bottom:1px solid var(--line-soft)}
.rel a{text-decoration:none}
.rel a:hover{text-decoration:underline}

/* ---------- indice A-Z ---------- */
.az{display:flex;flex-wrap:wrap;gap:5px;margin:22px 0 30px}
.az a{background:var(--surface-2);border:1px solid var(--line);border-radius:7px;
  padding:4px 10px;font-family:"IBM Plex Mono",monospace;font-size:.8rem;
  text-decoration:none;color:var(--petrol)}
.az a:hover{background:var(--chip-bg)}
.grupo{margin-top:34px;scroll-margin-top:76px}
.grupo h2{font-family:"IBM Plex Mono",monospace;font-size:1rem;color:var(--faint);
  border-bottom:1px solid var(--line);padding-bottom:7px;margin-bottom:12px;letter-spacing:.06em}
.grupo ul{margin:0;padding:0;list-style:none;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:1px 22px}
.grupo li{padding:5px 0;font-size:.93rem;border-bottom:1px solid var(--line-soft)}
.grupo li .det{color:var(--faint);font-size:.83rem}
.grupo a{text-decoration:none}
.grupo a:hover{text-decoration:underline}

/* ---------- pie ---------- */
footer{margin-top:64px;padding:30px 0 54px;border-top:1px solid var(--line);
  color:var(--faint);font-size:.85rem}
footer a{color:var(--muted)}
footer p+p{margin-top:8px}

/* ---------- origen de la norma y lema ---------- */
.origen-norma{display:inline-block;margin-left:8px;font-size:.72rem;
  padding:1px 8px;border-radius:999px;background:var(--surface-2);color:var(--muted);
  vertical-align:middle;white-space:nowrap}
.origen-norma.int{background:var(--chip-bg);color:var(--chip-fg)}
.lema-barra{border-bottom:1px solid var(--line);background:var(--surface-2)}
.lema-in{max-width:1120px;margin:0 auto;padding:7px 20px;font-size:.82rem;
  font-style:italic;color:var(--muted);letter-spacing:.01em}
.lema-pie{font-style:italic;color:var(--muted);font-size:.95rem}

/* ---------- ¿dónde lo compro? y datos que faltan ---------- */
.dt-compra{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.compro{border:1px solid var(--line);border-radius:999px;padding:1px 9px;
  font-size:.68rem;letter-spacing:0;text-transform:none;color:var(--muted);
  text-decoration:none;white-space:nowrap;flex:none}
.compro:hover{background:var(--chip-bg);color:var(--chip-fg);border-color:var(--chip-fg)}
.faltan{background:var(--surface-2);border-radius:10px;padding:14px 16px;margin-top:16px;
  font-size:.87rem;color:var(--muted)}
.faltan b{color:var(--ink)}