/* Siade Whales Docs — siadewhales.com/docs
   Hereda los tokens de articles/base.css: mismo negro, misma familia tipográfica. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#08090B; --panel:#101114; --panel2:#15171B;
  --tx:#F4F2ED; --dim:#9A988F; --dim2:#6E6C66;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --gold:#E3C788; --blue:#86A9DE;
  --sidebar:272px; --toc:212px; --head:64px;
  --ease:cubic-bezier(.32,.72,0,1);
}
html{-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font-family:Inter,system-ui,sans-serif;font-size:15px;line-height:1.7;min-height:100vh}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.07);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.14)}
::-webkit-scrollbar-track{background:transparent}

/* ── Cabecera ── */
header{position:fixed;top:0;left:0;right:0;z-index:40;height:var(--head);
  background:rgba(8,9,11,.72);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);display:flex;align-items:center;gap:18px;padding:0 22px}
header .brand{display:flex;align-items:center;gap:11px;flex:none}
header .brand img{height:30px;width:auto}
header .brand span{font-size:13px;color:var(--dim2);border-left:1px solid var(--line2);padding-left:11px}
.srch{margin-left:auto;position:relative;width:min(380px,42vw)}
.srch input{width:100%;height:36px;background:rgba(255,255,255,.035);border:1px solid var(--line);
  border-radius:9px;padding:0 36px 0 34px;color:var(--tx);font:inherit;font-size:13.5px;outline:none;transition:.16s}
.srch input:focus{border-color:var(--line2);background:rgba(255,255,255,.06)}
.srch input::placeholder{color:var(--dim2)}
.srch .ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--dim2);pointer-events:none;display:flex}
.srch kbd{position:absolute;right:9px;top:50%;transform:translateY(-50%);font:inherit;font-size:10.5px;
  color:var(--dim2);border:1px solid var(--line);border-radius:5px;padding:2px 5px;pointer-events:none}
.openapp{flex:none;font-size:13px;color:var(--tx);border:1px solid var(--line2);border-radius:9px;
  padding:8px 15px;transition:.18s;white-space:nowrap}
.openapp:hover{background:rgba(255,255,255,.06)}
.burger{display:none;flex:none;width:34px;height:34px;border:1px solid var(--line);border-radius:9px;
  background:none;color:var(--tx);align-items:center;justify-content:center;cursor:pointer}

/* ── Resultados de búsqueda ── */
.sres{position:absolute;top:calc(100% + 8px);left:0;right:0;background:var(--panel2);
  border:1px solid var(--line2);border-radius:13px;padding:6px;max-height:62vh;overflow-y:auto;
  box-shadow:0 24px 60px -18px rgba(0,0,0,.85);display:none}
.sres.on{display:block}
.sres a{display:block;padding:9px 11px;border-radius:9px}
.sres a:hover,.sres a.sel{background:rgba(255,255,255,.06)}
.sres .t{font-size:13.5px;color:var(--tx)}
.sres .c{font-size:12px;color:var(--dim2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sres .none{padding:16px 12px;font-size:13px;color:var(--dim2);text-align:center}

/* ── Rejilla ── */
.shell{position:relative;z-index:1;padding-top:var(--head)}
nav.side{position:fixed;top:var(--head);bottom:0;left:0;width:var(--sidebar);overflow-y:auto;
  border-right:1px solid var(--line);padding:22px 0 60px}
nav.side .grp{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim2);
  padding:18px 24px 7px;font-weight:500}
nav.side .grp:first-child{padding-top:4px}
nav.side a{display:block;padding:6px 24px;font-size:14px;color:var(--dim);
  border-left:2px solid transparent;transition:.14s}
nav.side a:hover{color:var(--tx);background:rgba(255,255,255,.025)}
nav.side a.on{color:var(--tx);border-left-color:var(--gold);background:rgba(227,199,136,.055)}

main{margin-left:var(--sidebar);margin-right:var(--toc);padding:52px 56px 120px;max-width:820px}
aside.toc{position:fixed;top:var(--head);right:0;width:var(--toc);bottom:0;overflow-y:auto;padding:52px 22px 60px}
aside.toc .h{font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--dim2);margin-bottom:12px}
aside.toc a{display:block;font-size:12.5px;color:var(--dim2);padding:5px 0;line-height:1.4;transition:.14s}
aside.toc a:hover{color:var(--tx)}
aside.toc a.on{color:var(--gold)}
aside.toc a.h3{padding-left:12px}

/* ── Contenido ── */
main h1{font-size:32px;font-weight:650;line-height:1.2;letter-spacing:-.021em;color:#fff;margin-bottom:12px}
/* Páginas sin subtítulo (lede: no): el texto no se pega al título. */
main h1 + :not(.lede){margin-top:30px}
main .lede{font-size:16.5px;line-height:1.62;color:var(--dim);margin-bottom:36px}
main h2{font-size:20px;font-weight:600;letter-spacing:-.014em;color:#fff;
  margin:42px 0 12px;padding-top:2px;scroll-margin-top:84px}
main h3{font-size:15.5px;font-weight:600;letter-spacing:-.008em;color:var(--tx);margin:28px 0 8px;scroll-margin-top:84px}
main p{margin:0 0 16px;color:#D8D5CE}
main strong{color:#fff;font-weight:550}
main ul,main ol{margin:0 0 18px;padding-left:22px}
main li{margin-bottom:8px;color:#D8D5CE}
main li::marker{color:var(--dim2)}
main a.lnk{color:var(--tx);border-bottom:1px solid var(--line2);transition:.15s}
main a.lnk:hover{border-color:var(--gold);color:#fff}
main code{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:.88em;
  background:rgba(255,255,255,.06);border:1px solid var(--line);border-radius:5px;padding:1px 5px;color:#E8E5DE}
main pre{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 18px;
  overflow-x:auto;margin:0 0 20px}
main pre code{background:none;border:none;padding:0;font-size:13px;line-height:1.6}
main blockquote{border-left:2px solid var(--line2);padding:2px 0 2px 18px;margin:0 0 20px;
  color:var(--tx);font-size:15.5px;line-height:1.65}
main blockquote p{color:inherit;margin:0}
main table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:14.5px}
main th{text-align:left;font-weight:500;color:var(--dim2);font-size:12.5px;padding:0 14px 9px 0;
  border-bottom:1px solid var(--line)}
main td{padding:13px 14px 13px 0;border-bottom:1px solid rgba(255,255,255,.05);color:#D8D5CE;vertical-align:top}
main tr:last-child td{border-bottom:none}
main td:first-child{color:#fff;font-weight:500;padding-right:22px}
main hr{border:none;border-top:1px solid var(--line);margin:38px 0}
main img{border-radius:13px;border:1px solid var(--line);margin:8px 0 22px}

/* Avisos */
.note{border:1px solid var(--line);border-left:2px solid var(--blue);background:rgba(134,169,222,.05);
  border-radius:0 11px 11px 0;padding:14px 18px;margin:0 0 22px}
.note.warn{border-left-color:var(--gold);background:rgba(227,199,136,.05)}
.note p:last-child{margin-bottom:0}
.note .nt{font-size:12.5px;color:var(--dim2);margin-bottom:5px}

/* Pie de página */
.pgfoot{display:flex;gap:14px;margin-top:64px;padding-top:26px;border-top:1px solid var(--line)}
.pgfoot a{flex:1;border:1px solid var(--line);border-radius:13px;padding:15px 18px;transition:.18s}
.pgfoot a:hover{border-color:var(--line2);background:rgba(255,255,255,.025)}
.pgfoot .d{font-size:11.5px;color:var(--dim2);margin-bottom:4px}
.pgfoot .t{font-size:14.5px;color:var(--tx)}
.pgfoot a.next{text-align:right}

/* Portada */
.hub{max-width:900px}
.hub .cards{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
.hub .card{border:1px solid var(--line);border-radius:15px;padding:20px 22px;transition:.18s}
.hub .card:hover{border-color:var(--line2);background:rgba(255,255,255,.025);transform:translateY(-2px)}
.hub .card .t{font-size:15px;color:#fff;margin-bottom:5px;font-weight:600;letter-spacing:-.008em}
.hub .card .d{font-size:13.5px;color:var(--dim);line-height:1.55}

@media(max-width:1180px){
  aside.toc{display:none}
  main{margin-right:0;padding:48px 40px 110px}
}
@media(max-width:900px){
  .burger{display:flex}
  nav.side{transform:translateX(-100%);transition:transform .26s var(--ease);background:var(--bg);z-index:35;width:290px}
  nav.side.on{transform:none}
  main{margin-left:0;padding:36px 22px 90px}
  .srch{width:auto;flex:1}
  .openapp{display:none}
  .hub .cards{grid-template-columns:1fr}
  .pgfoot{flex-direction:column}
}