:root { --bg:#f6f8f8; --surface:#fff; --ink:#17302d; --muted:#546a66; --line:#dde6e4; --brand:#176c8a; --soft:#e2eff4; --warn:#fff4d6;
  --display:"Bricolage Grotesque","Avenir Next","Segoe UI",sans-serif; --body:"Source Sans 3","Segoe UI",-apple-system,sans-serif; color-scheme:light; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg:#0f1a19; --surface:#162422; --ink:#e4efed; --muted:#9db3af; --line:#26403c; --brand:#5cc6d6; --soft:#173a44; --warn:#3a3218; color-scheme:dark; } }
:root[data-theme="dark"] { --bg:#0f1a19; --surface:#162422; --ink:#e4efed; --muted:#9db3af; --line:#26403c; --brand:#5cc6d6; --soft:#173a44; --warn:#3a3218; color-scheme:dark; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font:18px/1.65 var(--body); }
a { color:var(--brand); }
.top { border-bottom:1px solid var(--line); }
.top div, main, footer div { max-width:760px; margin:0 auto; padding-inline:20px; }
.top div { padding-block:14px; }
.logo { display:inline-flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); font:700 1.3rem/1 var(--display); }
.logo img { width:30px; height:30px; } .logo em { font-style:normal; color:var(--brand); }
main { padding-block:44px 64px; }
h1 { font:700 clamp(2rem,5vw,2.8rem)/1.12 var(--display); margin:0 0 8px; text-wrap:balance; }
h2 { font:700 1.3rem/1.25 var(--display); margin:36px 0 10px; }
.meta { color:var(--muted); margin:0 0 24px; }
p, li { max-width:68ch; } ul, ol { padding-left:1.3em; } li { margin-bottom:6px; }
mark { background:var(--warn); color:inherit; padding:0 4px; border-radius:4px; }
.tabla { overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
table { border-collapse:collapse; width:100%; min-width:520px; font-size:.95rem; }
th, td { text-align:left; vertical-align:top; padding:12px 14px; border-top:1px solid var(--line); }
th { background:var(--soft); border-top:0; }
.clave { background:var(--soft); border-radius:14px; padding:16px 20px; }
footer { border-top:1px solid var(--line); padding-block:24px; color:var(--muted); font-size:.95rem; }
footer div { display:flex; gap:18px; flex-wrap:wrap; }
.firmas { border:1px solid var(--line); border-radius:12px; padding:8px 18px; background:var(--surface); margin:18px 0; }
@media print { .top, footer, .meta { display:none; } body { background:#fff; color:#000; font-size:13px; } main { padding:0; } h2 { margin-top:16px; } }