/* ========================================================================== Modo oscuro por inversión de color (equivalente al modo "filtro" de Dark Reader) Se activa poniendo data-theme="dark" en ; el toggle vive en theme.js y la preferencia se guarda en la cookie `dark_mode`, que los layouts leen en el servidor para renderizar el atributo sin parpadeo al cargar. ========================================================================== */ html[data-theme="dark"] { /* Inversión PARCIAL para un tono gris tipo Dark Reader: con invert(0.9) el blanco cae a #1a1a1a y el negro sube a #e6e6e6, en lugar de los extremos puros que da invert(1). hue-rotate(180deg) regresa cada color a su matiz original, por eso el naranja institucional sigue naranja. saturate(1.3) devuelve la viveza que la inversión parcial le roba a los colores saturados; no afecta a los grises (saturación cero). Perillas de ajuste: bajar 0.9 aclara el fondo y suaviza el texto (recalcular el contrast() de los medios como 1/(2a-1)); subir 1.3 intensifica los acentos (recalcular el saturate() de los medios como su inverso 1/s). IMPORTANTE: el filtro va en (elemento raíz) y NO en . Un filter en cualquier otro elemento lo convierte en containing block de sus descendientes position:fixed, y navbars/botones flotantes se van con el scroll (pasó en la landing). El elemento raíz está exento de esa regla por especificación. */ filter: invert(0.9) hue-rotate(180deg) saturate(1.3); /* Fondo casi blanco A PROPÓSITO: el filtro del raíz también procesa el lienzo (overscroll incluido), así que esto se muestra como el gris oscuro #1e1e1e del tema */ background-color: #fafafa; /* Scrollbars y controles nativos en variante oscura (las scrollbars son chrome del navegador y no pasan por el filtro) */ color-scheme: dark; } html[data-theme="dark"] body { /* Color base explícito: con color-scheme dark, el texto SIN color autorado hereda el blanco por defecto del navegador y la inversión lo vuelve negro invisible (ej. card-title/text-muted en vistas sin Bootstrap). Este gris oscuro se muestra como blanco suave. */ color: #111827; } /* Fotos, logos y videos se re-invierten para conservar sus colores reales. El contrast(1.25) pre-compensa la pérdida de contraste de la inversión parcial del body (1/(2*0.9-1) = 1.25) y el saturate(0.77) neutraliza el saturate(1.3) del body (1/1.3 = 0.77). Los canvas/SVG de gráficas NO se re-invierten: así sus etiquetas quedan legibles sobre el fondo oscuro. Usa la clase .no-invert para excluir cualquier otro elemento de la inversión. */ html[data-theme="dark"] body img, html[data-theme="dark"] body video, html[data-theme="dark"] body iframe, html[data-theme="dark"] body .theme-switch, html[data-theme="dark"] body .no-invert { filter: contrast(1.25) invert(1) hue-rotate(180deg) saturate(0.77); } /* -------------------------------------------------------------------------- Refuerzo de tintas pálidas: en colores casi blancos la diferencia entre canales RGB es mínima y el filtro lineal la conserva tal cual, por lo que los fondos *-50 de Tailwind quedan gris casi neutro en oscuro. Aquí se autoran versiones más saturadas SOLO para modo oscuro; como el filtro conserva el matiz, en pantalla se ven como tonos oscuros cálidos tipo Dark Reader. En modo claro no aplican. -------------------------------------------------------------------------- */ html[data-theme="dark"] body .bg-orange-50 { background-color: #ffe3c2 !important; } html[data-theme="dark"] body .bg-amber-50 { background-color: #fdedc4 !important; } html[data-theme="dark"] body .bg-yellow-50 { background-color: #fdf3c9 !important; } html[data-theme="dark"] body .bg-blue-50 { background-color: #d8e6fc !important; } html[data-theme="dark"] body .bg-indigo-50 { background-color: #dbe2fd !important; } html[data-theme="dark"] body .bg-red-50 { background-color: #fcd9d9 !important; } html[data-theme="dark"] body .bg-green-50 { background-color: #d3f5dd !important; } html[data-theme="dark"] body .bg-purple-50 { background-color: #ecdcfd !important; } /* Degradados de cabeceras de cards (patrón bg-gradient-to-r from-X-50 to-white). El final se deja en blanco (= gris neutro tras el filtro) para respetar el alcance del diseño original: la calidez solo al inicio del degradado. */ html[data-theme="dark"] body .bg-gradient-to-r.from-orange-50 { background-image: linear-gradient(to right, #ffe3c2, #ffffff) !important; } html[data-theme="dark"] body .bg-gradient-to-r.from-blue-50 { background-image: linear-gradient(to right, #d8e6fc, #ffffff) !important; } html[data-theme="dark"] body .bg-gradient-to-r.from-purple-50 { background-image: linear-gradient(to right, #ecdcfd, #ffffff) !important; } /* Impresión siempre en claro */ @media print { html[data-theme="dark"] { background-color: #fff; filter: none; } html[data-theme="dark"] body, html[data-theme="dark"] body img, html[data-theme="dark"] body video, html[data-theme="dark"] body iframe, html[data-theme="dark"] body .theme-switch, html[data-theme="dark"] body .no-invert { filter: none; } }