/* dcr.ar/edubots — Inteligencia Artificial & Aprendizaje Activo
Un solo archivo, sin dependencias externas: la CSP del sitio es estricta y
Cloudflare cachea los estáticos 4 h (por eso el ?v= en el ). */
:root {
--fondo: #FAF8F4;
--papel: #FFFFFF;
--tinta: #191B20;
--tinta-2: #5B6170;
--tinta-3: #8A909E;
--linea: #E5E0D6;
--linea-2: #F0ECE4;
--acento: #0E6E62;
--acento-2: #E7F2F0;
--calido: #C0602B;
--calido-2: #FBEEE4;
--acero: #2F5A86;
--acero-2: #E6EDF5;
--ciruela: #6B4A86;
--ciruela-2: #F0EAF6;
--gris: #61656F;
--gris-2: #EEEFF1;
/* Sólo para advertencias: el aviso de entrada. El resto del sitio no usa
rojo, así que cuando aparece se lee como lo que es. */
--rojo: #B3261E;
--rojo-2: #FDEDEB;
--sombra: 0 1px 2px rgba(25,27,32,.05), 0 8px 24px -12px rgba(25,27,32,.14);
--sombra-alta:0 2px 4px rgba(25,27,32,.06), 0 20px 48px -20px rgba(25,27,32,.24);
--radio: 14px;
--serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
--sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--ancho: 1140px;
}
/* El tema claro es el predeterminado y no se sigue la preferencia del sistema:
el sitio se usa proyectado y compartido en el aula, y muchos celulares vienen
con el modo oscuro puesto de fábrica, así que la mitad del curso abría una
pantalla distinta de la del proyector. El oscuro sale sólo si se pide con el
botón del menú, y entonces queda guardado en localStorage. */
:root[data-tema="oscuro"] {
--fondo: #101216; --papel: #191C22; --tinta: #ECE9E2;
--tinta-2: #A2A8B4; --tinta-3:#767C89; --linea: #2A2E38;
--linea-2: #21252D;
--acento: #4FC0AE; --acento-2:#153732;
--calido: #E0894F; --calido-2:#3A2417;
--acero: #7FAEDC; --acero-2: #17263A;
--ciruela: #BB9BDC; --ciruela-2:#251C33;
--gris: #9CA2AE; --gris-2: #22262E;
--rojo: #F08379; --rojo-2: #3A1B18;
--sombra: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
--sombra-alta: 0 2px 4px rgba(0,0,0,.4), 0 20px 48px -20px rgba(0,0,0,.7);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0; background: var(--fondo); color: var(--tinta);
font: 400 17px/1.65 var(--sans);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--acento); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px; border-radius: 4px; }
.contenedor { max-width: var(--ancho); margin: 0 auto; padding: 0 24px; }
.angosto { max-width: 760px; }
/* ── Encabezado ─────────────────────────────────────────────────────────────
Escritorio: la marca a la izquierda y las secciones a la derecha.
Celular: las secciones se pliegan detrás del botón «Menú» y bajan como un
panel, con el título completo de cada grupo en vez del rótulo corto.
El plegado depende de la clase `js` que pone el