:root{
  --bg:#f1f4f7; --surface:#ffffff; --ink:#10253a; --muted:#53657a; --line:#cfd8e1;
  --blue:#0b5a8f; --on-blue:#ffffff; --yellow:#fecb00; --on-yellow:#10253a;
  --code-bg:#0f2133; --code-ink:#d7e6f5; --code-dim:#7f98b0;
  --bad:#b3261e; --good:#1c7a4a; --field:#f7f9fb;
  --sans:"IBM Plex Sans","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0b1520; --surface:#122233; --ink:#e6eef6; --muted:#93a6ba; --line:#223548;
    --blue:#6db3e8; --on-blue:#0b1520; --code-bg:#0a1520; --field:#0e1b29;
    --bad:#ff8a80; --good:#5fd195; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0b1520; --surface:#122233; --ink:#e6eef6; --muted:#93a6ba; --line:#223548;
  --blue:#6db3e8; --on-blue:#0b1520; --code-bg:#0a1520; --field:#0e1b29;
  --bad:#ff8a80; --good:#5fd195; color-scheme:dark;
}
html{scroll-padding-top:env(safe-area-inset-top,0px);scroll-behavior:smooth}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:18px 0;border-bottom:1px solid var(--line)}
.brand{font-weight:600;font-size:18px;text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:10px}
.brand i{display:inline-block;width:14px;height:14px;background:var(--yellow);box-shadow:-5px 5px 0 var(--blue)}
nav a{color:var(--muted);text-decoration:none;font-size:15px;margin-left:18px}
nav a:hover{color:var(--ink);text-decoration:underline}
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:40px;align-items:center;padding:44px 0 36px}
h1{font-size:clamp(32px,5.4vw,52px);line-height:1.06;margin:0 0 16px;letter-spacing:-.02em;font-weight:600}
.lead{font-size:19px;color:var(--muted);margin:0;max-width:46ch}
.figure{display:grid;gap:0;border-radius:12px;overflow:auto;border:1px solid var(--line);background:var(--surface)}
.figure pre{margin:0;padding:14px 16px;background:var(--code-bg);color:var(--code-ink);font:13.5px/1.55 var(--mono);overflow:auto}
.figure pre b{font-weight:400;color:var(--yellow)}
.figure pre s{text-decoration:none;color:var(--code-dim)}
.figure table{width:100%;border-collapse:collapse;font-size:14px}
.figure th,.figure td{padding:6px 12px;border-top:1px solid var(--line);text-align:left}
.figure th{color:var(--muted);font-weight:600;background:var(--field)}
.figure td.n,.figure th.n{text-align:right;font-variant-numeric:tabular-nums}
.figure figcaption{padding:8px 12px;font-size:13px;color:var(--muted);border-top:1px solid var(--line)}
.tool{background:var(--surface);border:1px solid var(--line);border-radius:14px;margin-bottom:44px;overflow:hidden}
[role=tablist]{display:flex;border-bottom:1px solid var(--line);background:var(--field)}
[role=tab]{flex:1;font:inherit;font-weight:600;font-size:16px;padding:15px 12px;border:0;background:transparent;color:var(--muted);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-1px}
[role=tab][aria-selected="true"]{color:var(--ink);background:var(--surface);border-bottom-color:var(--yellow)}
.panel{padding:24px}
.panel[hidden]{display:none}
.drop{display:block;border:2px dashed var(--line);border-radius:12px;padding:30px 18px;text-align:center;cursor:pointer;background:var(--field)}
.drop.over{border-color:var(--blue)}
.drop strong{display:block;font-size:18px}
.drop span{color:var(--muted);font-size:15px}
.drop input{position:absolute;opacity:0;width:1px;height:1px}
.drop:focus-within{outline:3px solid var(--blue);outline-offset:2px}
.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:0 0 16px}
.fields label,.enc label{display:grid;gap:4px;font-size:14px;font-weight:600}
input[type=text],input[type=date],select{font:inherit;font-size:16px;color:var(--ink);background:var(--field);border:1px solid var(--line);border-radius:8px;padding:9px 10px;width:100%}
.enc{margin:14px 0 0;max-width:260px}
.row{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.btn{font:inherit;font-weight:600;font-size:15px;border-radius:9px;padding:10px 18px;cursor:pointer;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.btn.primary{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.status{margin:16px 0 0;font-size:15px}
.status.bad{color:var(--bad)} .status.good{color:var(--good)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:16px 0 0}
.stats div{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--field)}
.stats dt{font-size:13px;color:var(--muted)}
.stats dd{margin:0;font-weight:600;font-size:18px;word-break:break-word}
ul.issues{margin:12px 0 0;padding-left:20px;color:var(--bad);font-size:15px}
.scroll{overflow:auto;margin-top:16px;border:1px solid var(--line);border-radius:10px;max-height:340px}
.scroll table{border-collapse:collapse;width:100%;font-size:14px}
.scroll th,.scroll td{padding:6px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
.scroll th{position:sticky;top:0;background:var(--field);font-weight:600}
.scroll td.n{text-align:right;font-variant-numeric:tabular-nums}
pre.out{margin:16px 0 0;padding:12px 14px;background:var(--code-bg);color:var(--code-ink);font:13px/1.5 var(--mono);border-radius:10px;overflow:auto;max-height:260px}
.note{font-size:14px;color:var(--muted);margin:12px 0 0}
main section.copy{padding:6px 0 30px;max-width:780px}
h2{font-size:clamp(24px,3.4vw,32px);line-height:1.15;margin:0 0 12px;letter-spacing:-.01em;font-weight:600}
.copy p{margin:0 0 14px}
.copy ol{padding-left:22px;margin:0 0 14px;display:grid;gap:6px}
.cols{width:100%;border-collapse:collapse;font-size:15.5px;margin:6px 0 14px}
.cols th,.cols td{border-top:1px solid var(--line);padding:9px 10px;text-align:left;vertical-align:top}
.cols th{width:30%;font-weight:600}
details{border-top:1px solid var(--line);padding:14px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:600}
details p{margin:8px 0 0;color:var(--muted)}
footer{border-top:1px solid var(--line);padding:22px 0 40px;color:var(--muted);font-size:14px}
.sr{position:absolute;left:-9999px}
@media (max-width:820px){.hero{grid-template-columns:1fr;gap:26px;padding-top:30px}nav a{margin-left:12px}}

/* ---- sitio multipágina ---- */
.top nav{display:flex;flex-wrap:wrap;gap:4px 0}
nav a[aria-current="page"]{color:var(--ink);font-weight:600;text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px;text-underline-offset:5px}
.crumbs{font-size:14px;color:var(--muted);padding:14px 0 0}
.crumbs a{color:var(--muted)}
.hero.single{grid-template-columns:1fr;padding:26px 0 24px}
.hero.single .lead{max-width:62ch}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:16px;margin:0 0 44px}
.card{display:block;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;border-top:4px solid var(--yellow)}
.card:hover{border-color:var(--blue);border-top-color:var(--yellow)}
.card h2{margin:0 0 8px;font-size:24px}
.card p{margin:0 0 12px;color:var(--muted)}
.card span{font-weight:600;color:var(--blue)}
.copy h3{font-size:19px;margin:22px 0 8px}
.copy ul{padding-left:22px;margin:0 0 14px;display:grid;gap:6px}
.copy a,.lead a,footer a{color:var(--blue)}
.cols td code,.cols th code,.copy p code,.copy li code{font:14px var(--mono);background:var(--field);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
pre.ex{margin:6px 0 18px;padding:14px 16px;background:var(--code-bg);color:var(--code-ink);font:13.5px/1.6 var(--mono);border-radius:10px;overflow:auto}
pre.ex i{font-style:normal;color:var(--code-dim)}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin:6px 0 30px}
.cta a{display:inline-block;text-decoration:none;font-weight:600;padding:11px 18px;border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.cta a.primary{background:var(--blue);border-color:var(--blue);color:var(--on-blue)}
.foot-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 12px}
.updated{color:var(--muted);font-size:14px}

.notice{margin:-26px 0 40px;max-width:780px;font-size:15px;color:var(--muted)}

.hide{display:none!important}
.panel .step{font-size:17px;font-weight:600;margin:22px 0 10px}
.panel .step:first-of-type{margin-top:14px}

.vlist{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:10px}
.vlist li{border-left:4px solid var(--line);padding:2px 0 2px 12px}
.vlist li.e{border-color:var(--bad)} .vlist li.w{border-color:var(--yellow)} .vlist li.i{border-color:var(--blue)}
.vlist strong{display:block;font-weight:600;font-size:15px}
.vlist li.e strong{color:var(--bad)}
.vlist p{margin:2px 0 0;color:var(--muted);font-size:15px}

.skip{position:absolute;left:-9999px;top:8px;background:var(--yellow);color:var(--on-yellow);padding:10px 16px;border-radius:8px;font-weight:600;text-decoration:none;z-index:10}
.skip:focus{left:12px}
main:focus{outline:none}

.tw{overflow-x:auto;margin:6px 0 14px;-webkit-overflow-scrolling:touch}
.tw .cols{margin:0}
.tw .cols.wide{min-width:520px}
.cols td,.cols th{overflow-wrap:anywhere}

/* objetivos táctiles de al menos 44 px */
.top nav a{display:inline-block;padding:12px 8px;margin-left:2px}
.brand{padding:10px 0}
.foot-links a{display:inline-block;padding:11px 2px}
.crumbs a{display:inline-block;padding:11px 2px}
.btn{min-height:44px}
details summary{padding:10px 0}
.lang button{min-height:36px}

.cols.grid th,.cols.grid td{width:auto;white-space:nowrap}
.cols.grid tr:first-child th{background:var(--field);border-top:0}

/* páginas legales y guías */
.meta{color:var(--muted);font-size:14px;margin:12px 0 0}
.foot-legal{margin-top:2px}
.owner{line-height:1.7}
.guides{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:14px}
.guides li{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--surface)}
.guides li a{font-weight:600}
.guides li p{margin:4px 0 0;color:var(--muted)}
.cols.policy{min-width:640px}
.cols.policy th,.cols.policy td{white-space:normal;vertical-align:top;width:auto}
.cols.policy tr:first-child th{background:var(--field)}

.ext{align-items:flex-end}
.ext label{flex:0 1 220px;min-width:170px;margin:0}