/* tokens: fuentes, paleta (dark/light), base y botones — lo que todo lo demás asume */
/* Misma dirección que docs.synsema.com: tinta sobre papel, una superfamilia (IBM Plex) en dos
   voces — la SERIF para lo que se lee (mensajes, hero), la MONO para estructura y maquinaria
   (header, sidebar, pasos, código, controles). El color se raciona: azul = link / dónde estás,
   rubric rojo = peligro y permisos (la única cosa que vale la pena ver desde lejos). */
@font-face{font-family:"Plex Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-serif-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Serif";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-serif-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/plex-serif-400i-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Serif";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/plex-serif-400i-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex Serif";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plex-serif-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Serif";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plex-serif-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-mono-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/plex-mono-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plex-mono-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Plex Mono";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/plex-mono-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

:root, :root[data-theme=dark] {
  --paper:#131412; --paper-2:#1b1c19; --paper-3:#212320;
  --ink:#e9e8df; --ink-2:#9b9c90; --ink-3:#848678;
  --rule:#2b2c27; --rule-2:#3c3d36;
  --accent:#8fb4dc; --accent-bg:#1b2836;
  --rubric:#d98670; --str:#a8bd84; --amber:#d9b26f; --ok:#8fc28f;
  --sel:#33465b; --term-blue:#4f86d1;
  --serif:"Plex Serif",Georgia,"Times New Roman",serif;
  --mono:"Plex Mono",ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;
  --r:3px; --side:280px;
}
:root[data-theme=light] {
  --paper:#fcfcfa; --paper-2:#f4f3ee; --paper-3:#ecebe3;
  --ink:#1a1b18; --ink-2:#56584f; --ink-3:#6a6c61;
  --rule:#e4e3da; --rule-2:#cfcec2;
  --accent:#21578c; --accent-bg:#e9eef4;
  --rubric:#99372a; --str:#4a6b3f; --amber:#8a6a1f; --ok:#3d7a3d;
  --sel:#cfe0f0; --term-blue:#21578c;
}

* { box-sizing:border-box; }
html, body { height:100%; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 14.5px/1.6 var(--serif); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
::selection { background:var(--sel); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:1px; }
button, select, textarea { font-family:inherit; }
.spacer { flex:1; }

/* botones: el primario es tinta sobre papel, el secundario solo borde */
button { font:600 10.5px/1 var(--mono); text-transform:uppercase; letter-spacing:.09em; color:var(--ink-2); background:none; border:1px solid var(--rule-2); border-radius:2px; padding:7px 12px; cursor:pointer; }
button:hover { color:var(--ink); border-color:var(--ink-3); }
button.primary { color:var(--paper); background:var(--ink); border-color:var(--ink); }
button.primary:hover { opacity:.85; color:var(--paper); }
button:disabled { opacity:.45; cursor:default; }

/* barras de scroll finas y del color del tema (las nativas de Windows son gruesas y grises) */
* { scrollbar-width:thin; scrollbar-color:var(--rule-2) transparent; }
*::-webkit-scrollbar { width:7px; height:7px; }
*::-webkit-scrollbar-track { background:transparent; }
*::-webkit-scrollbar-thumb { background:var(--rule-2); border-radius:4px; }
*::-webkit-scrollbar-thumb:hover { background:var(--ink-3); }