/* Hub — estética de plano técnico: papel azul, tinta marina, cuadrícula y un amarillo de señal para la acción. */
:root{
  --paper:#E9EFF5; --sheet:#F7F9FB; --ink:#16284A; --ink-2:#4A5B7A; --line:#B9C8DA; --grid:#D3DEEA;
  --blue:#2B6CB0; --signal:#F2C230; --signal-ink:#3A2C00; --bad:#B42318;
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --text:"Atkinson Hyperlegible",ui-sans-serif,system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme:dark){
  :root{--paper:#0F1B33;--sheet:#14223F;--ink:#E3EAF5;--ink-2:#A6B5CE;--line:#2E4470;--grid:#1B2C4F;--blue:#7DB4F0;--bad:#FF8A80}
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:1.0625rem/1.6 var(--text)}
a{color:var(--blue);text-underline-offset:.18em}
:focus-visible{outline:3px solid var(--signal);outline-offset:2px;border-radius:2px}
code{font-family:var(--mono);font-size:.88em;background:var(--grid);padding:.08em .32em;border-radius:3px}
pre{font:.88rem/1.55 var(--mono);background:var(--sheet);border:1px solid var(--line);padding:1rem 1.1rem;overflow:auto;border-radius:4px}
pre code{background:none;padding:0}
button{font:700 1rem/1 var(--text);cursor:pointer}

/* ---------- Login ---------- */
.is-login .login{min-height:100vh;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
.plate{position:relative;overflow:hidden;color:#E9F1FA;background:#1D4F8C;
  background-image:linear-gradient(rgba(255,255,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.09) 1px,transparent 1px),
                   linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:80px 80px,80px 80px,16px 16px,16px 16px;padding:clamp(2rem,5vw,4.5rem);display:flex;flex-direction:column;justify-content:space-between}
.plate-mark{font:800 clamp(6rem,17vw,13rem)/.8 var(--display);font-variation-settings:"wdth" 75;letter-spacing:0}
.plate-tag{font:700 clamp(1.5rem,2.6vw,2.1rem)/1.15 var(--display);margin:1.4rem 0 .7rem;max-width:22ch;text-wrap:balance}
.plate-host{font-size:1.05rem;line-height:1.5;opacity:.9;margin:0;max-width:30ch}
.plate-host span{font-family:var(--mono);font-size:.95em;background:rgba(255,255,255,.12);padding:.05em .35em;border-radius:3px;white-space:nowrap}
.plate-draw{width:min(100%,26rem);margin-top:auto;fill:none;stroke:#E9F1FA;stroke-width:1.4;opacity:.75}
.plate-draw circle{fill:var(--signal);stroke:none}
.login-panel{align-self:center;justify-self:center;width:min(100%,25rem);padding:2.5rem 1.5rem}
.login-panel h1{font:700 clamp(2rem,3.4vw,2.6rem)/1.08 var(--display);letter-spacing:-.02em;margin:0 0 .6rem}
.lede{color:var(--ink-2);margin:0 0 2rem}
.login-form{display:grid;gap:.4rem}
.login-form label{font-weight:700;margin-top:.7rem}
.login-form input{font:1.05rem/1.3 var(--text);color:var(--ink);background:var(--sheet);border:1.5px solid var(--line);border-radius:4px;padding:.75rem .85rem;width:100%}
.login-form input:focus{border-color:var(--blue)}
.login-form input[aria-describedby]{border-color:var(--bad)}
.login-form button{margin-top:1.4rem;background:var(--signal);color:var(--signal-ink);border:0;border-radius:4px;padding:.95rem 1rem}
.login-form button:hover{filter:brightness(.95)}
.form-error{color:var(--bad);margin:.6rem 0 0;font-weight:700}
.hint{color:var(--ink-2);font-size:.95rem;margin-top:1.8rem}
@media (max-width:760px){
  .is-login .login{grid-template-columns:1fr}
  .plate{min-height:13rem}.plate-draw{display:none}.plate-mark{font-size:6rem}
}

/* ---------- Página de usuario ---------- */
.bar{display:flex;align-items:center;gap:1.5rem;padding:.8rem clamp(1rem,4vw,2.5rem);border-bottom:1px solid var(--line);background:var(--sheet);position:sticky;top:0;z-index:2}
.bar-mark{font:800 1.6rem/1 var(--display);font-variation-settings:"wdth" 75;color:var(--ink);text-decoration:none;letter-spacing:-.03em}
.switch{display:flex;gap:.25rem}
.switch a{padding:.3rem .65rem;border-radius:3px;color:var(--ink-2);text-decoration:none}
.switch a[aria-current]{background:var(--ink);color:var(--sheet)}
.bar-out{margin-left:auto;display:flex;align-items:center;gap:.8rem;color:var(--ink-2)}
.bar-out button{background:none;border:1.5px solid var(--line);color:var(--ink);border-radius:4px;padding:.45rem .8rem;font-size:.92rem}

.page{max-width:72rem;margin:0 auto;padding:clamp(1.5rem,4vw,3rem) clamp(1rem,4vw,2.5rem) 5rem}
.hello{font:700 clamp(2.4rem,6vw,4.2rem)/1 var(--display);letter-spacing:-.03em;margin:.5rem 0 .4rem}
.hello-sub{color:var(--ink-2);margin:0 0 2.2rem;max-width:40rem}

/* La ficha: cajetín de plano con los recursos de la persona. */
.sheet{background:var(--sheet);border:2px solid var(--ink);position:relative;margin-bottom:3.5rem}
.sheet::before,.sheet::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--blue)}
.sheet::before{top:-9px;left:-9px;border-right:0;border-bottom:0}
.sheet::after{bottom:-9px;right:-9px;border-left:0;border-top:0}
.sheet-in{padding:1.4rem clamp(1rem,3vw,2rem) 1.6rem}
.sheet h2{font:700 1.35rem/1.2 var(--display);margin:0 0 1rem}
.sheet table{width:100%;border-collapse:collapse}
.sheet th,.sheet td{text-align:left;vertical-align:top;padding:.7rem .9rem .7rem 0;border-top:1px solid var(--line)}
.sheet thead{display:none}
.sheet td:first-child{width:11rem;font-weight:700;color:var(--ink-2)}
.sheet p{margin:1rem 0 0;color:var(--ink-2)}

.guide{display:grid;grid-template-columns:13rem minmax(0,1fr);gap:3rem;align-items:start}
.toc{position:sticky;top:5rem;font-size:.95rem}
.toc p{font-weight:700;margin:0 0 .6rem}
.toc ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.toc a{display:block;padding:.3rem 0 .3rem .9rem;color:var(--ink-2);text-decoration:none;margin-left:-2px;border-left:2px solid transparent}
.toc a:hover{color:var(--ink);border-left-color:var(--blue)}
.prose{max-width:46rem}
.prose h1{display:none}
.prose h2{font:700 1.65rem/1.15 var(--display);letter-spacing:-.015em;margin:3rem 0 .9rem;scroll-margin-top:5rem}
.prose h2:first-of-type{margin-top:0}
.prose blockquote{margin:0 0 2rem;padding:1rem 1.2rem;background:var(--sheet);border-left:4px solid var(--signal)}
.prose blockquote p{margin:.2rem 0}
.prose table{border-collapse:collapse;width:100%;display:block;overflow-x:auto;margin:1rem 0 1.5rem;font-size:.97rem}
.prose th,.prose td{text-align:left;vertical-align:top;padding:.55rem .8rem;border-bottom:1px solid var(--line)}
.prose th{border-bottom:2px solid var(--ink)}
.prose li{margin:.35rem 0}
.download{display:inline-block;margin-top:2.5rem;font-weight:700}
@media (max-width:900px){.guide{grid-template-columns:1fr}.toc{position:static}.sheet td:first-child{width:8rem}}

/* ---------- Avisos ---------- */
.notice{max-width:34rem;margin:18vh auto;padding:0 1.5rem}
.notice h1{font:700 2.2rem/1.1 var(--display);margin:0 0 .8rem}

@media (prefers-reduced-motion:no-preference){.login-form input,.toc a{transition:border-color .15s}}