/* ============ Matebase · tokens, reset y tipografía ============ */
:root{
  --bg:#f6f5f1; --bg-alt:#fffdf9; --panel:#ffffff; --panel-2:#f2f1ec;
  --ink:#20242c; --ink-soft:#535a67; --ink-faint:#666f7e;
  --line:#dedbd2; --line-soft:#eae7de;
  --accent:#3f5bd9; --accent-soft:#e5e9fb; --accent-ink:#2a3f9e;
  --ok:#0d7a54; --ok-soft:#e0f4ec;
  --warn:#9c5b0c; --warn-soft:#fbeed9;
  --bad:#c0392b; --bad-soft:#fbe6e3;
  --demo:#0d7c9b; --demo-soft:#dff2f7;
  --use:#a3248c; --use-soft:#f9e3f4;
  --on-accent:#ffffff;
  --tip:#fbe98a; --tip-line:#e6d15f; --tip-ink:#55503a; --tip-strong:#2e2a18;
  --shadow:0 1px 2px rgba(20,25,40,.06),0 8px 24px rgba(20,25,40,.06);
  --glow:rgba(63,91,217,.30);
  --radius:14px;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"Segoe UI",Inter,system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --mono:"Cascadia Mono",Consolas,"SF Mono",Menlo,monospace;
  --plot-bg:#ffffff; --plot-grid:#e8e5dc; --plot-grid2:#f2f0e9;
  --plot-axis:#7b818e; --plot-ink:#3c424e;
  --c1:#3f5bd9; --c2:#d1495b; --c3:#0f8a5f; --c4:#b4690e; --c5:#7a4fbf; --c6:#0d7c9b;
  /* Bloque 15, maquinas y lenguajes: violeta. Los tonos libres eran pocos
     -el acento ya es azul, graficos es magenta, cripto cobre e IA verde- y
     este es el que mas se separa de los cuatro. */
  --maq:#6b3fa0; --maq-soft:#efe4fb; --maq-ink:#54307e; --maq-on:#ffffff;
  /* Bloque 16, programación gráfica: magenta de demoscene. Ya no es solo
     matemáticas, y tiene que notarse antes de leer una palabra. */
  --gfx:#a81b86; --gfx-soft:#fae3f4; --gfx-ink:#7c1364; --gfx-on:#ffffff;
  /* Bloque de sintesis de sonido: laton de instrumento de viento. Un
     dorado oscuro, que no se confunde ni con el cobre de cripto ni con el
     ambar de los avisos. */
  --son:#8a6300; --son-soft:#faf0cc; --son-ink:#664900; --son-on:#ffffff;
  /* Bloque de criptografia: cobre de lacre y de llave antigua. */
  --cr:#a3521c; --cr-soft:#f8e6da; --cr-ink:#7a3a10; --cr-on:#ffffff;
  /* Bloques de inteligencia artificial: verde de fosforo, el de las
     pantallas en las que se escribio todo esto. Los dos bloques comparten
     piel, porque son dos mitades de lo mismo. */
  --ia:#0f7361; --ia-soft:#ddf0eb; --ia-ink:#0a5548; --ia-on:#ffffff;
  /* Coloreado del codigo GLSL. Ocho papeles, un color cada uno, y los tres
     temas los redefinen enteros. Todos pasan 4,5:1 sobre el fondo del editor
     y sobre el de los recuadros de codigo de los enunciados: se comprueba en
     tests.html, porque un coloreado bonito que no se lee no sirve. */
  --cod-com:#4d6a44; --cod-key:#a81b7f; --cod-typ:#0a6a8c; --cod-num:#7038b8;
  --cod-fun:#0b7550; --cod-uni:#9a5307; --cod-pre:#5a6270; --cod-pun:#59606e;
  --cod-sel:rgba(168,27,134,.20);
}
html[data-theme="dark"]{
  --bg:#14161b; --bg-alt:#191c22; --panel:#1d2027; --panel-2:#22262e;
  --ink:#e6e8ee; --ink-soft:#aeb4c1; --ink-faint:#838997;
  --line:#2e333d; --line-soft:#262a33;
  --accent:#7b93ff; --accent-soft:#232a48; --accent-ink:#a8b8ff;
  --ok:#4bd39b; --ok-soft:#16332a;
  --warn:#e5a44b; --warn-soft:#33291a;
  --bad:#f0776a; --bad-soft:#361f1d;
  --demo:#4cc4e0; --demo-soft:#13303a;
  --use:#e58fd8; --use-soft:#33203a;
  --on-accent:#14161b;
  --tip:#423c26; --tip-line:#5d5433; --tip-ink:#ded7bd; --tip-strong:#f6f1de;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px rgba(0,0,0,.28);
  --glow:rgba(123,147,255,.34);
  --plot-bg:#191c22; --plot-grid:#2b303a; --plot-grid2:#22262e;
  --plot-axis:#8d95a5; --plot-ink:#c9cfdb;
  --c1:#7b93ff; --c2:#ff8b93; --c3:#4bd39b; --c4:#e5a44b; --c5:#b795f5; --c6:#4cc4e0;
  --maq:#c4a2ff; --maq-soft:#2b2140; --maq-ink:#d8c2ff; --maq-on:#170f24;
  --gfx:#ff79d3; --gfx-soft:#3a1b33; --gfx-ink:#ffa8e2; --gfx-on:#1b0f18;
  --son:#f2c55a; --son-soft:#3b3014; --son-ink:#ffd97e; --son-on:#1d1708;
  --cr:#f0a070; --cr-soft:#3a2418; --cr-ink:#ffc39c; --cr-on:#1b120c;
  --ia:#5fd7bd; --ia-soft:#13332e; --ia-ink:#8fe8d3; --ia-on:#0c1a17;
  --cod-com:#8b93a3; --cod-key:#ff79d3; --cod-typ:#6fd3e8; --cod-num:#c4a2ff;
  --cod-fun:#7fdba4; --cod-uni:#f0b45e; --cod-pre:#9aa2b2; --cod-pun:#aab2c0;
  --cod-sel:rgba(255,121,211,.26);
}
/* Monokai de contraste suave: los colores característicos de Monokai pero
   desaturados y con el texto por debajo del blanco puro, para cansar menos
   la vista en sesiones largas. */
html[data-theme="monokai"]{
  --bg:#272822; --bg-alt:#2c2d26; --panel:#31322b; --panel-2:#3a3b33;
  --ink:#dcdacf; --ink-soft:#a9a89c; --ink-faint:#9e9b8b;
  --line:#41423a; --line-soft:#36372f;
  --accent:#7cc7d4; --accent-soft:#2c3b3f; --accent-ink:#9adae6;
  --ok:#9cbf4a; --ok-soft:#2f3823;
  --warn:#d99a4a; --warn-soft:#3b3123;
  --bad:#dd788c; --bad-soft:#3b292d;
  --demo:#7cc7d4; --demo-soft:#2c3b3f;
  --use:#cf7fc0; --use-soft:#382a36;
  --on-accent:#272822;
  --tip:#4f4926; --tip-line:#6b6234; --tip-ink:#e0d9b8; --tip-strong:#f2ecd2;
  --shadow:0 1px 2px rgba(0,0,0,.28),0 10px 28px rgba(0,0,0,.22);
  --glow:rgba(124,199,212,.32);
  --plot-bg:#2b2c25; --plot-grid:#3d3e35; --plot-grid2:#343529;
  --plot-axis:#8a887c; --plot-ink:#c7c5ba;
  --c1:#7cc7d4; --c2:#d96a80; --c3:#9cbf4a; --c4:#d99a4a; --c5:#a68fd4; --c6:#d6cd7a;
  --maq:#c9a6f0; --maq-soft:#352c42; --maq-ink:#dcc2f7; --maq-on:#221a2b;
  --gfx:#e08bd0; --gfx-soft:#3b2c39; --gfx-ink:#f0abe0; --gfx-on:#241a22;
  --son:#e3c366; --son-soft:#3b3624; --son-ink:#f2da94; --son-on:#262117;
  --cr:#e6a06e; --cr-soft:#3c2f27; --cr-ink:#f2c39f; --cr-on:#241c17;
  /* Verde primavera, no el cian del acento de monokai: si no, la piel de
     los bloques de IA se confundiria con los enlaces. */
  --ia:#6fd7ae; --ia-soft:#2b3a35; --ia-ink:#9ce8c9; --ia-on:#241f1c;
  /* Monokai reconocible -rosa, cian, verde, violeta- pero subido de
     luminosidad hasta pasar el contraste. El gris de los comentarios del
     Monokai original se queda en 3:1 y aqui no vale. */
  --cod-com:#aaa691; --cod-key:#ff85a8; --cod-typ:#7fd6e8; --cod-num:#c0a6ff;
  --cod-fun:#b6d95c; --cod-uni:#e8c46a; --cod-pre:#e0a45c; --cod-pun:#bab8aa;
  --cod-sel:rgba(255,133,168,.26);
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;height:100%}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:1.0312rem; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{line-height:1.25; margin:0; font-weight:650; letter-spacing:-.01em}
p{margin:0 0 1em}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
ul,ol{margin:0 0 1em; padding-left:1.35em}
li{margin:.3em 0}
code,kbd{font-family:var(--mono); font-size:.88em; background:var(--panel-2);
  padding:.12em .38em; border-radius:5px; border:1px solid var(--line-soft)}
strong{font-weight:660}
button{font:inherit; color:inherit}
::selection{background:var(--accent-soft)}
:focus-visible{outline:2.5px solid var(--accent); outline-offset:2px; border-radius:4px}
/* scrollbars */
*::-webkit-scrollbar{width:11px;height:11px}
*::-webkit-scrollbar-thumb{background:var(--line);border-radius:8px;border:3px solid transparent;background-clip:content-box}
*::-webkit-scrollbar-thumb:hover{background:var(--ink-faint);background-clip:content-box}
*::-webkit-scrollbar-track{background:transparent}