/* ============================================================
   catto.ar — Estetica "Hoja de datos en papel" (A6, septiembre 2026)
   Se carga DESPUES de base.css, tema.css o ing.css y pisa su paleta
   oscura: fondo gris papel calido en vez de blanco puro (para leer
   mucho rato sin encandilar), texto grafito, bandas en carbon, un rojo
   sobrio, IBM Plex. La cabecera y el cielo con Orion de la portada
   siguen oscuros, como antes.
   Todo lo que esta dibujado para fondo oscuro -laboratorios en canvas,
   esquemas SVG, bloques de codigo- queda como pantalla oscura de
   instrumento, enmarcada en carbon dentro de la hoja.
   Texto casi negro y peso 450 (IBM Plex variable): pedido de Diego para
   leer mas comodo sobre el gris.
   Prueba de las alternativas: /pruebas/esteticas-temas/ (sin publicar).
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=IBM+Plex+Mono:wght@400;500;600&display=swap");
:root{
  --bg:#e7e5df; --panel:#f1efea; --panel2:#e2dfd8; --line:#cdc9bf;
  --txt:#1b1d21; --muted:#3d4249; --soft:#62676e;
  --accent:#ad2436; --accent2:#8f1d2c;
  --ok:#2f6f41; --warn:#8a5a10; --hot:#ad2436; --violet:#5a4596;
  --link:#1f5a94; --carbon:#2a2e34; --pantalla:#0f141a;
  --r:3px; --shadow:none;
}
body{background:var(--bg);background-attachment:scroll;font-family:"IBM Plex Sans","Segoe UI",sans-serif;color:var(--txt);font-weight:450}
a{color:var(--link)}
::-webkit-scrollbar-thumb{background:#b3aea3}

/* ====================== cabecera y cielo (oscuros) ====================== */
header.site,.hero{
  --bg:#0d1117; --panel:#161b22; --panel2:#1c2230; --line:#2a3140;
  --txt:#e6edf3; --muted:#9aa7b4; --soft:#7d8a99;
  --accent:#e8686c; --accent2:#c9474c; --link:#86b8f0;
}
header.site{background-color:#12161c;backdrop-filter:none;border-bottom:2px solid #c9474c;color:var(--txt)}
header.site a{color:var(--txt)}
.brand .logo{background:#c9474c;border-radius:5px}
.brand .dom{color:#e8686c}
.fecha-hoja-mes{background:#c9474c}
.hero{background:radial-gradient(1200px 600px at 80% -10%, #1b2740 0%, #0d1117 55%);color:var(--txt);
  border-bottom:3px solid var(--carbon)}
.hero h1{color:#e6edf3}
.hero h1 .accent{color:#e8686c}
.hero p.quote{border-left-color:#c9474c}
.hero a{color:#86b8f0}
.cifras{border:1px solid #2e3844;border-radius:4px;background:rgba(13,17,23,.6);overflow:hidden;
  align-items:stretch;gap:0 26px;padding-right:14px}
.cf{padding:8px 0}
.cf-et{align-self:stretch;display:flex;align-items:center;padding:0 12px;background:#0a0e12;
  color:#9aa7b4 !important;font-family:"IBM Plex Mono",monospace;border-right:1px solid #2e3844}
.cf b{font-family:"IBM Plex Mono",monospace;color:#e6edf3}
@media (max-width:560px){ .cifras{padding:0 12px 0 0} .cf-et{padding:6px 12px;border-right:0;border-bottom:1px solid #2e3844} .cf{padding:6px 0 6px 12px} }

/* ====================== paginas con base.css ====================== */
h2.tit-sec{background:var(--panel2);border-left:5px solid var(--accent);padding:8px 14px;border-radius:0 3px 3px 0;
  font-size:16px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--txt)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:3px;box-shadow:none}
.card.link:hover{transform:none;border-color:var(--accent);box-shadow:0 0 0 1px var(--accent)}
.card .meta .badge{background:var(--panel2);border:1px solid var(--line);border-radius:2px;
  font-family:"IBM Plex Mono",monospace;color:var(--muted)}
.card .go{color:var(--accent)}
.anio{background:var(--panel);border:1px solid #b9b5ab;border-radius:3px;box-shadow:none;padding:0 0 8px;overflow:hidden}
.a-head{background:var(--carbon);margin:0 0 6px;padding:10px 14px;align-items:center;border-bottom:0}
.a-head *{color:#eceae4 !important}
.a-n{font-family:"IBM Plex Mono",monospace}
.m-item,.m-fila{padding-left:14px;padding-right:14px}
.m-fila:hover{background:var(--panel2)}
.m-c{font-family:"IBM Plex Mono",monospace}
.m-ejes{border-left:2px solid var(--accent)}
.m-ejes a{color:var(--link)}
.m-ejes a:hover{background:rgba(173,36,54,.07)}
.buscaTema{border-radius:3px}
.seguir{background:var(--panel);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:3px;box-shadow:none}
.ad{border-radius:3px}
footer.site{background:var(--panel2);border-top:3px solid var(--carbon);color:var(--muted)}
footer.site .credits{color:var(--soft)}

/* ====================== paginas de tema (tema.css / ing.css) ====================== */
body > .starfield{display:none}
.tbar{background:#12161c;border-bottom:2px solid #c9474c;backdrop-filter:none}
.tbar .brand{color:#e6edf3}
.tbar .up{color:#9aa7b4}
.tbar .sep{color:#3a4452}
.tbar .brand .logo{background:#c9474c;border-radius:4px}
.tbar .anio{background:transparent;color:#e6edf3;border:1px solid #3a4452;border-radius:3px;font-family:"IBM Plex Mono",monospace}
.doc{font-size:16.5px;line-height:1.7}
.doc p,.doc ul,.doc ol{max-width:72ch}
.toc .tl{color:var(--txt);font-weight:700}
.toc ol{border-left:1px solid var(--line)}
.toc li a{color:var(--muted)}
.toc li a.on{color:var(--accent);border-left-color:var(--accent)}
.crumb{font-family:"IBM Plex Mono",monospace;text-transform:uppercase;font-size:11.5px;letter-spacing:.5px}
.doc h1{font-weight:700;letter-spacing:-.3px;border-bottom:1px solid var(--line);padding-bottom:12px;color:var(--txt)}
.lead{color:var(--muted)}
.chip{border-radius:2px;background:var(--panel);border-color:var(--line);font-family:"IBM Plex Mono",monospace;color:var(--muted)}
.chip.hi{background:var(--accent);border-color:var(--accent);color:#f3f0ea}
.doc h2{background:var(--panel2);margin:0 0 10px;padding:7px 12px;font-size:17px;font-weight:700;
  text-transform:uppercase;letter-spacing:.4px;border-left:4px solid var(--accent)}
.doc h2 .n{color:var(--accent);font-family:"IBM Plex Mono",monospace;font-size:14px;opacity:1}
.doc h2 .n::after{content:"."}
.doc strong,.doc b{color:#101215}
.doc em{color:inherit}
.box{border-radius:2px;background:var(--panel) !important;border:1px solid var(--line)}
.box.key{border-left:4px solid var(--link)}.box.key .bt{color:var(--link)}
.box.ojo{border-left:4px solid var(--warn)}.box.ojo .bt{color:var(--warn)}
.box.peligro{border-left:4px solid var(--hot);background:#efe4e2 !important}.box.peligro .bt{color:var(--hot)}
.box.lab{border-left:4px solid var(--ok)}.box.lab .bt{color:var(--ok)}
.box.ejem{border-left:4px solid var(--violet)}.box.ejem .bt{color:var(--violet)}
.box .bt{font-family:"IBM Plex Mono",monospace}
.form{background:var(--panel);border-radius:2px;border:1px solid var(--line);border-top:2px solid var(--carbon)}
.form .katex,.form math{color:#1b1d21 !important}
.form .cap{color:var(--muted)}
.doc p .katex,.doc li .katex,.doc td .katex,.q .katex{color:#1b1d21 !important}
.doc p math,.doc li math,.doc td math,details.q .a math{color:#1b1d21}
code{background:var(--panel2);color:#6a2230;border-color:var(--line)}
.tw{border-radius:2px;border:1px solid #b9b5ab;background:var(--panel)}
table.tab thead th{background:var(--carbon);color:#eceae4;letter-spacing:.3px}
table.tab tbody tr:nth-child(even){background:rgba(0,0,0,.025)}
table.tab tbody tr:hover{background:rgba(173,36,54,.06)}
table.tab .v0{color:var(--soft)}
a.ref{color:var(--link);border-bottom-color:rgba(31,90,148,.45)}
a.ref:hover{background:rgba(31,90,148,.08)}
.pub{background:var(--panel);border-radius:3px}
.pub .pn{color:var(--txt)}
details.q{border-radius:2px;background:var(--panel)}
details.q summary::before{border-radius:2px;background:var(--carbon);color:#eceae4;border:0}
details.q[open] summary::before{color:#9fe0b0}
.nav2 a{border-radius:3px;background:var(--panel)}
.tfoot{color:var(--soft)}

/* pantallas oscuras: esquemas SVG, bloques de codigo y laboratorios, que
   estan dibujados para fondo oscuro */
figure{background:var(--pantalla);border:6px solid var(--carbon);border-radius:6px}
figure figcaption{color:#aab4bf}
.doc figure figcaption b,.doc figure figcaption strong,figure figcaption b{color:#dfe5eb}
.doc svg.svg-t{background:var(--pantalla);border-radius:4px}
figure svg.svg-t{background:transparent}
pre.code{background:var(--pantalla);border:6px solid var(--carbon);border-left:6px solid var(--carbon);border-radius:6px}
.lw{background:var(--panel2);border:1px solid #b9b5ab;border-radius:3px}
.lw .lt{color:var(--txt);font-family:"IBM Plex Mono",monospace}
.lw select,.lw input[type=text],.lw input[type=number]{background:var(--panel);color:var(--txt);border-radius:2px;border-color:#aaa59a}
.lw input[type=range]{accent-color:var(--accent)}
.lw canvas{border:6px solid var(--carbon) !important;border-radius:6px !important}
.lw button{background:var(--panel);color:var(--txt);border-color:#aaa59a;border-radius:2px}
.lw button.pri,.lw button.on{background:var(--carbon);color:#eceae4;border-color:var(--carbon)}
.datos{background:var(--panel);border-radius:2px;font-family:"IBM Plex Mono",monospace;font-size:12.5px}
.datos b{color:#15171a}
.lw .nota b{color:#15171a}
.libros li{border-radius:2px;background:var(--panel);border-left:4px solid var(--carbon)}
.libros .au,.libros .ti{color:var(--txt)}

/* componentes de los laboratorios de Informatica I (celdas de memoria,
   bits, registros, codigo paso a paso, fases, traza): en ing.css tienen
   fondos oscuros fijos y texto heredado */
.celda,.bit{background:var(--panel);color:var(--txt)}
.celda .dir,.bit small{color:var(--soft)}
.celda.act{background:rgba(31,90,148,.12);border-color:var(--link)}
.celda.lee{background:rgba(47,111,65,.12);border-color:var(--ok)}
.celda.esc{background:rgba(138,90,16,.14);border-color:var(--warn)}
.bit.uno{background:rgba(31,90,148,.16);border-color:var(--link);color:#15171a}
.bit.signo.uno{background:rgba(173,36,54,.14);border-color:var(--accent)}
.reg.cambio{background:rgba(138,90,16,.16)}
.fase.on{background:var(--carbon);border-color:var(--carbon);color:#eceae4}
.traza tr.ult td{background:rgba(31,90,148,.12);color:#15171a}
.codigo{background:var(--pantalla);color:#d5dce4;border:6px solid var(--carbon)}
.codigo div.act{background:rgba(134,184,240,.16);border-left-color:#86b8f0}
.lw .caja{background:var(--panel)}

/* ====================== mapas de temas ====================== */
header.top{
  --bg:#0d1117; --panel:#161b22; --panel2:#1c2230; --line:#2a3140;
  --txt:#e6edf3; --muted:#9aa7b4; --soft:#7d8a99; --accent:#e8686c; --accent2:#c9474c;
  background:#12161c !important;border-bottom:2px solid #c9474c;color:var(--txt);backdrop-filter:none}
header.top a{color:#86b8f0}
.stat{border-radius:3px}
.stat b{font-family:"IBM Plex Mono",monospace}
.tabs,.search,.ycol,.subj,.tcard,.timeline,.matrix-scroll{border-radius:3px}
.tab.active{background:var(--carbon);border-color:var(--carbon);color:#eceae4}
.yhead{border-bottom:2px solid var(--carbon)}
.yhead .yn{font-family:"IBM Plex Mono",monospace}
table.mx thead th.yrgrp{background:var(--carbon);color:#eceae4}
a.tlink .tgo{color:var(--accent);background:rgba(173,36,54,.08);border-color:rgba(173,36,54,.35)}
a.tlink:hover .tgo{background:var(--accent);border-color:var(--accent);color:#f3f0ea}

/* un elemento de grilla no se achica por debajo de su contenido: un bloque de
   codigo adentro de .g2 ensanchaba la pagina en el telefono (lenguaje-c) */
.g2 > *,.g3 > *{min-width:0}
.doc .form{font-size:16px}