:root{color-scheme:dark;--bg:#05070D;--t1:#E8F1FF;--t2:#A9B8CC;--cy:#22D3EE;--line:rgba(232,241,255,.14);--disp:'Space Grotesk','Segoe UI',system-ui,sans-serif;--body:'IBM Plex Sans','Segoe UI',system-ui,sans-serif}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--t1);font-family:'IBM Plex Sans','Segoe UI',system-ui,sans-serif;font-size:18px;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
h1,h2,h3{font-family:'Space Grotesk','Segoe UI',system-ui,sans-serif;color:var(--t1);font-weight:600;line-height:1.15}
h1{font-size:clamp(2.1rem,4.6vw,3.2rem);letter-spacing:-.02em;line-height:1.08;margin:.5em 0 .6em}
h2{font-size:clamp(1.35rem,2.6vw,1.8rem);letter-spacing:-.01em;margin:2.4em 0 .6em;padding-top:.9em;border-top:1px solid var(--line)}
h3{font-size:1.15rem;margin:1.6em 0 .4em}
p{margin:.8em 0}
ul,ol{padding-left:1.3em}
li+li{margin-top:.35em}
a{color:var(--cy);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid #22D3EE;outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:12px;top:-100px;z-index:10;background:var(--cy);color:#05070D;padding:10px 16px;border-radius:8px;font-weight:600;text-decoration:none}
.skip:focus{top:12px}
.top{border-bottom:1px solid var(--line)}
.top .in{max-width:1100px;margin:0 auto;padding:14px 20px;display:flex;align-items:center}
.top img{display:block;height:44px;width:auto}
main{max-width:70ch;margin:0 auto;padding:24px 20px 56px}
code{font-family:ui-monospace,Consolas,monospace;font-size:.9em;color:var(--t1);background:rgba(232,241,255,.08);padding:.1em .35em;border-radius:4px;overflow-wrap:anywhere}
.pend{background:#E9A23B;color:#0A1F3D;padding:0 .3em;border-radius:3px;font-weight:600}
.draft{border:1px solid rgba(233,162,59,.7);border-radius:8px;padding:12px 16px;color:var(--t2);font-size:16px;margin:0 0 1.2em}
.fecha{margin-top:3em;color:var(--t2)}
.tbl{overflow-x:auto;margin:1.2em 0;border:1px solid var(--line);border-radius:8px}
table{width:100%;border-collapse:collapse;font-size:15px;line-height:1.5}
caption{caption-side:top;text-align:left;color:var(--t2);padding:12px 12px 8px;font-size:15px}
th,td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
th{color:var(--t1);font-family:'Space Grotesk','Segoe UI',system-ui,sans-serif;font-weight:600;background:rgba(232,241,255,.04)}
td{color:var(--t2)}
tr:last-child td{border-bottom:0}
footer{border-top:1px solid var(--line);color:var(--t2);font-size:16px}
footer .in{max-width:70ch;margin:0 auto;padding:24px 20px 40px}
footer ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;margin:0 0 16px}
footer a[aria-current="page"]{color:var(--t1);text-decoration:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* ---------- modo claro: se activa con html[data-theme="light"] (predeterminado); sin ese atributo manda :root (oscuro) ---------- */
html[data-theme="light"]{color-scheme:light;--bg:#F4F8FC;--t1:#0B1220;--t2:#3B4A5E;--cy:#0E7490;--line:rgba(11,18,32,.18);--surf:#FFFFFF;--surf2:#E8EFF7}
html[data-theme="light"] ::selection{background:rgba(14,116,144,.22);color:var(--t1)}
html[data-theme="light"] :focus-visible{outline:3px solid #0E7490;outline-offset:3px}
html[data-theme="light"] .skip{background:#0E7490;color:#FFFFFF}
html[data-theme="light"] code{color:var(--t1);background:rgba(11,18,32,.06)}
html[data-theme="light"] .draft{background:var(--surf)}
html[data-theme="light"] .tbl{background:var(--surf)}
html[data-theme="light"] th{background:var(--surf2)}
.top .logo-l{display:none}
html[data-theme="light"] .top .logo-d{display:none}
html[data-theme="light"] .top .logo-l{display:block}
.alert{border-left:4px solid var(--cy);background:rgba(34,211,238,.07);padding:14px 18px;border-radius:0 8px 8px 0;margin:1.2em 0}
.alert strong{color:var(--t1)}
html[data-theme="light"] .alert{background:rgba(14,116,144,.07)}
