/* Datario — design system. Tinta #1E3A8A + timbre #DC2626 (los colores del logo). Mobile-first, breakpoints 640/960. Claro y oscuro por tokens: NINGÚN color se usa fuera de una custom property (regla R12 del plan). El tema: el sistema manda por defecto, y el selector de la barra lo fuerza estampando data-theme en (tema.js; un script inline del lo aplica antes de pintar). Por eso el bloque de tokens oscuros aparece DOS veces —el @media y el [data-theme=dark]—: CSS no deja unirlos, y resolverlo por JS rompería el modo oscuro con el JS apagado. Si tocas un valor, tócalo en ambos. Lo que NO sigue al tema, a propósito: el bloque de código y el pie. Sus tokens (--codigo-*, --pie-*) están solo en :root, y esa ausencia en el bloque oscuro ES la documentación de la decisión. */ /* ── Fuente ──────────────────────────────────────────────────────────────── */ @font-face { font-family: "Inter"; src: url("/static/fonts/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } /* ── Tokens (claro) ──────────────────────────────────────────────────────── */ :root { --ink: #1e3a8a; /* tinta: acciones, links, marca */ --ink-deep: #16306e; /* hover de la tinta */ --ink-btn: #1e3a8a; /* fondo de botón (en oscuro se separa del link) */ --ink-tint: #eef2fb; /* fondos suaves de tinta */ --ink-tint-2: #e3eaf8; --stamp: #dc2626; /* timbre: el acento — usar poco */ --stamp-tint: #fef2f2; --text: #0f172a; --text-2: #475569; --border: #e2e8f0; --bg: #f8fafc; --surface: #ffffff; --ok: #15803d; --ok-tint: #f0fdf4; --warn: #b45309; --warn-tint: #fffbeb; --codigo-bg: #0f1b3d; /* bloque de código: tinta-noche en AMBOS modos */ --codigo-fg: #dbe4f8; /* El pie es una banda de tinta-noche en AMBOS temas (por eso estos tokens no se redefinen abajo): ancla la página y separa el cierre legal del contenido. Sobre ese fondo el enlace blanco funciona siempre. */ /* Coloreado de los ejemplos de código. Sobre --codigo-bg en ambos temas, por eso tampoco se redefinen abajo. */ --cod-cmd: #7dd3fc; --cod-flag: #c4b5fd; --cod-str: #86efac; --cod-url: #fcd34d; --cod-punct: #94a3b8; --pie-bg: #0f1b3d; --pie-text: #a3b3d6; --pie-link: #ffffff; --pie-borde: #26365f; --logo-ink: #1e3a8a; --logo-stamp: #dc2626; --logo-counter: #ffffff; --r-lg: 12px; --r-md: 8px; --r-pill: 999px; --shadow-1: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-2: 0 1px 2px rgba(15, 23, 42, 0.06), 0 10px 28px -14px rgba(30, 58, 138, 0.18); --foco: var(--ink); } /* ── Tokens (oscuro): azul noche de la familia tinta, jamás gris genérico ── Se aplica en dos casos y por eso el bloque está DOS veces: cuando lo pide el sistema y el usuario no forzó claro, y cuando el usuario forzó oscuro con el selector de la barra. CSS no deja unir un @media con un selector en una sola regla; si tocas un valor acá, tócalo también en el bloque [data-theme=dark] de más abajo. Se prefiere esta repetición a resolver el tema por JS: así el modo oscuro del sistema sigue funcionando con el JS apagado. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ink: #9db6f5; --ink-deep: #bcccf8; --ink-btn: #3b5fc4; --ink-tint: #16213b; --ink-tint-2: #1b2a4a; --stamp: #ef4444; --stamp-tint: #2a1620; --text: #e7ecf6; --text-2: #9faec8; --border: #24304b; --bg: #0b1220; --surface: #111a2e; --ok: #4ade80; --ok-tint: #10241c; --warn: #fbbf24; --warn-tint: #2a2210; --codigo-fg: #c9d6f2; --logo-ink: #a9c0f7; --logo-counter: #0b1220; --shadow-1: none; --shadow-2: none; --foco: #9db6f5; } } /* Gemelo del bloque de arriba, para cuando el usuario fuerza el oscuro. */ :root[data-theme="dark"] { --ink: #9db6f5; --ink-deep: #bcccf8; --ink-btn: #3b5fc4; --ink-tint: #16213b; --ink-tint-2: #1b2a4a; --stamp: #ef4444; --stamp-tint: #2a1620; --text: #e7ecf6; --text-2: #9faec8; --border: #24304b; --bg: #0b1220; --surface: #111a2e; --ok: #4ade80; --ok-tint: #10241c; --warn: #fbbf24; --warn-tint: #2a2210; --codigo-fg: #c9d6f2; --logo-ink: #a9c0f7; --logo-counter: #0b1220; --shadow-1: none; --shadow-2: none; --foco: #9db6f5; } /* Los ejemplos de la API se leen como en un editor: qué es comando, qué es dato y qué es la URL. Marcado a mano en la plantilla — son dos bloques de contenido fijo, y un resaltador en JS sería maquinaria para nada. */ .c-cmd { color: var(--cod-cmd); } .c-flag { color: var(--cod-flag); } .c-str { color: var(--cod-str); } .c-url { color: var(--cod-url); } .c-punct { color: var(--cod-punct); } /* La marca en dos variantes: elegía por el tema del SISTEMA y se quedaba con el logo equivocado cuando el usuario forzaba el otro desde el selector. Conmutarlas por CSS sí respeta el forzado. */ .logo--oscuro { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .logo--claro { display: none; } :root:not([data-theme="light"]) .logo--oscuro { display: initial; } } :root[data-theme="dark"] .logo--claro { display: none; } :root[data-theme="dark"] .logo--oscuro { display: initial; } /* Que los controles nativos (scrollbars, selects) sigan el tema elegido. */ :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; } /* ── Base ────────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font: 16px/1.6 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; color: var(--text); background: var(--bg); min-height: 100vh; display: flex; flex-direction: column; } h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2rem); line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 0.6em; } h2 { font-size: 1.1rem; letter-spacing: -0.01em; margin: 2em 0 0.7em; } p { margin: 0.4em 0 0.9em; } a { color: var(--ink); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } ::selection { background: var(--ink-tint-2); } img, svg { max-width: 100%; } /* ── Accesibilidad ───────────────────────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; border-radius: 2px; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--surface); color: var(--ink); padding: 10px 16px; border-radius: var(--r-md); box-shadow: var(--shadow-2); z-index: 99; } .skip-link:focus-visible { left: 12px; top: 12px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* ── Layout: header ──────────────────────────────────────────────────────── */ .topbar { position: sticky; top: 0; z-index: 50; background: var(--surface); border-bottom: 1px solid var(--border); } .topbar__linea { max-width: 1080px; margin: 0 auto; padding: 0 20px; min-height: 60px; display: flex; align-items: center; gap: 20px; } .marca { display: inline-flex; align-items: center; flex-shrink: 0; } .marca svg { height: 30px; width: auto; display: block; } .marca:hover { text-decoration: none; } .topbar nav { display: flex; align-items: center; gap: 4px; margin-left: auto; } /* Ítems de altura completa: TODA la superficie del botón es clickeable */ .topbar nav form.inline { display: contents; } .topbar nav a, .topbar nav .link { display: inline-flex; align-items: center; min-height: 60px; color: var(--text-2); font-size: 0.95rem; font-weight: 500; padding: 0 12px; border-radius: 0; border-bottom: 2px solid transparent; } .topbar nav a:hover { color: var(--text); text-decoration: none; background: var(--ink-tint); } /* el estado activo lleva la línea de fecha del timbre, al ras de la barra */ .topbar nav a.activa { color: var(--text); border-bottom: 2px dotted var(--stamp); } .topbar nav .cta-nav { color: #fff; background: var(--ink-btn); border-bottom: none; min-height: 0; align-self: center; padding: 9px 16px; border-radius: var(--r-md); margin-left: 8px; } .topbar nav .cta-nav:hover { background: var(--ink-deep); color: #fff; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .topbar nav .cta-nav:hover { background: #4b6fd4; } } :root[data-theme="dark"] .topbar nav .cta-nav:hover { background: #4b6fd4; } /* Selector de tema: mismo tamaño y borde que la hamburguesa, y en la misma punta derecha. Va fuera de