/* ========================================================================== * tema.css — Modo claro / oscuro para toda la aplicación * El modo oscuro se aplica con un filtro sobre para cubrir también los * muchos estilos en línea del proyecto. Los medios y elementos marcados con * [data-no-invert] se re-invierten para verse con sus colores reales. * ========================================================================== */ html.tema-oscuro { filter: invert(0.92) hue-rotate(180deg); background: #101216 !important; } html.tema-oscuro img, html.tema-oscuro video, html.tema-oscuro iframe, html.tema-oscuro embed, html.tema-oscuro svg image, html.tema-oscuro [data-no-invert] { filter: invert(1) hue-rotate(180deg); } /* Botón flotante para alternar el tema (presente en todas las páginas) */ #tema-toggle { position: fixed; right: 14px; bottom: 14px; z-index: 9999; width: 48px; height: 48px; border-radius: 50%; border: none; cursor: pointer; font-size: 22px; line-height: 1; background: #1A1A1A; color: #fff; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25); transition: transform 0.15s, box-shadow 0.15s; } #tema-toggle:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.35); }