/* ========================================================================== Dark Mode - Asesorías Fantasy (v2) Técnica de inversión universal: se invierten los colores de TODA la página (garantiza que ningún cuadro/widget se quede en blanco, sin depender de conocer las clases CSS del tema). Después se "revierte" la inversión en imágenes, vídeos y el propio botón para que se vean con sus colores reales. ========================================================================== */ html.dmaf-dark { background-color: #ffffff !important; filter: invert(1) hue-rotate(180deg); } /* IMPORTANTE: el filter del afecta visualmente a TODOS sus descendientes (no es algo que un hijo pueda "cancelar" poniendo filter:none, los filtros de CSS se combinan, no se anulan entre sí). Por eso, para que fotos/escudos/logos se vean con sus colores reales, necesitan SIEMPRE una segunda inversión propia que compense la del (doble inversión = colores normales). Se añade un pequeño extra de contraste/saturación porque, al aplicar dos filtros seguidos, el navegador redondea el color en cada paso y la imagen queda ligeramente "lavada"; este ajuste lo compensa sin tocar el diseño del bloque, solo el color final de la imagen. Se aplica en CSS puro, sin esperar a dark-mode.js, para que no haya flash al recargar. */ html.dmaf-dark img, html.dmaf-dark picture, html.dmaf-dark video, html.dmaf-dark iframe, html.dmaf-dark svg, html.dmaf-dark canvas, html.dmaf-dark embed, html.dmaf-dark object { filter: invert(1) hue-rotate(180deg) saturate(1.15) contrast(1.03); } /* Bloques con una foto puesta como fondo CSS (background-image), típico de tarjetas de artículos ("Dos Chollos", previas de jornada...) en constructores como Elementor: dark-mode.js los trata igual que un panel "ya oscuro" del tema (clase .dmaf-keep-dark, más abajo) y así quedan excluidos por completo de la inversión general -foto y texto-, tal cual estaban diseñados en origen. */ /* Caso poco común: media (o bloque con foto de fondo) dentro de un contenedor que el script detecta como YA oscuro de por sí (p. ej. un logo dentro de un menú con fondo oscuro propio del tema). Ahí ya recibe DOS inversiones de sus contenedores (la del + la del propio bloque .dmaf-keep-dark), así que no necesita ninguna inversión propia: dark-mode.js le añade esta clase para dejarlo sin filtro. */ html.dmaf-dark .dmaf-media-plain { filter: none; } /* Elementos que el script detecta como YA oscuros (p. ej. menú móvil con fondo oscuro de por sí), o bloques con foto de fondo que deben quedar tal cual el diseño original: se excluyen de la inversión general. Ver assets/dark-mode.js */ html.dmaf-dark .dmaf-keep-dark { filter: invert(1) hue-rotate(180deg); } /* Transición suave al cambiar de tema */ html { transition: filter 0.25s ease; } /* ========================================================================== Botón flotante de activación (se des-invierte para que SIEMPRE se vea igual, tanto en modo claro como oscuro, y no herede colores raros de la inversión general) ========================================================================== */ #dmaf-toggle-btn { position: fixed; right: 20px; bottom: 20px; z-index: 2147483647; width: 52px; height: 52px; border-radius: 50%; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; background-color: #1e1e1e; color: #ffffff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); font-size: 22px; line-height: 1; padding: 0; } html.dmaf-dark #dmaf-toggle-btn { filter: invert(1) hue-rotate(180deg); background-color: #ffcc4d; color: #121212; } #dmaf-toggle-btn:hover { transform: scale(1.06); } #dmaf-toggle-btn:focus-visible { outline: 3px solid #ffcc4d; outline-offset: 2px; } #dmaf-toggle-btn .dmaf-icon { position: absolute; transition: opacity 0.2s ease, transform 0.2s ease; } #dmaf-toggle-btn .dmaf-icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.6); } #dmaf-toggle-btn .dmaf-icon-moon { opacity: 1; transform: rotate(0) scale(1); } html.dmaf-dark #dmaf-toggle-btn .dmaf-icon-sun { opacity: 1; transform: rotate(0) scale(1); } html.dmaf-dark #dmaf-toggle-btn .dmaf-icon-moon { opacity: 0; transform: rotate(90deg) scale(0.6); } /* Botón alternativo insertado vía shortcode [dark_mode_toggle], p. ej. en el pie de página */ .dmaf-toggle-inline { cursor: pointer; background: transparent; border: 1px solid currentColor; border-radius: 4px; padding: 6px 14px; font: inherit; color: inherit; } html.dmaf-dark .dmaf-toggle-inline { filter: invert(1) hue-rotate(180deg); } @media (max-width: 480px) { #dmaf-toggle-btn { right: 14px; bottom: 14px; width: 46px; height: 46px; font-size: 19px; } }