/* ═══ Tema claro / oscuro — compartido por TODA la web ═══ El modo claro es el de siempre (sus variables viven en cada página / en ensayos.css). Aquí va SOLO la variante oscura (se activa con data-tema="oscuro" en ), el botón que alterna y la transición suave. Una sola fuente para todo el sitio: un retoque de tema se hace aquí. */ :root { color-scheme: light; } :root[data-tema="oscuro"] { color-scheme: dark; --bg: #0d0d0d; /* negro casi puro, no #000 (menos duro a la vista) */ --ink: #f2f2f2; /* antes negro → ahora casi blanco */ --texto: #dcdcdc; /* cuerpo (más claro: mejor contraste, sin ser blanco puro) */ --texto-tenue: #b8b8b8; /* secundario: subtítulo .asunto + letra pequeña legal del formulario (los bullets usan --texto) */ --muted: #9a9a9a; /* etiquetas y navegación (menú, icono tema, flecha, firma): legible en oscuro */ --pie: #7a7a7a; /* pie de página y placeholder: el tono más discreto, pero legible en oscuro */ --border: #262626; /* líneas finas */ } /* Transición suave al cambiar de tema (sutil; principio de fluidez). Se excluyen los enlaces con hover propio para no pisar su animación. */ body, p, h1, h2, h3, hr, footer, .asunto, .firma, .cuerpo p, ul.items li, ul.lista-ensayos .titulo, ul.lista-ensayos .fecha, .relacionados, .back, .updated, .pd, input[type="email"] { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* ── Botón del selector (discreto, sin caja; principio de sutileza) ── */ .tema-toggle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; margin: 0; background: none; border: none; cursor: pointer; color: var(--muted); line-height: 0; transition: color 0.2s ease; -webkit-appearance: none; appearance: none; } .tema-toggle:hover { color: var(--ink); } .tema-toggle svg { display: block; } /* En claro se ve la luna (pulsar → oscuro); en oscuro, el sol (pulsar → claro). */ .tema-toggle .i-sol { display: none; } :root[data-tema="oscuro"] .tema-toggle .i-luna { display: none; } :root[data-tema="oscuro"] .tema-toggle .i-sol { display: block; }