/* * SYN 360 — Toggle tema claro/oscuro * Estrategia: variables CSS propias + overrides de utilidades Tailwind. * El tema activo es dark-first (navy). En claro invertimos fondos/textos. * La preferencia se guarda en localStorage y se aplica en . * * v2 (2026-09-13): añadida regla "paraguas" [class*=] para cubrir TODAS las * utilidades oscuras de Tailwind de una vez + fix del banner Verifactu y de * los botones/enlaces oscuros (bg-slate-900/800). Paleta claro = azul marca. */ /* ===== TEMA OSCURO (por defecto, valores actuales) ===== */ :root, html[data-theme="dark"] { --syn-bg-primary: #060e1a; --syn-bg-secondary: #0b172a; --syn-bg-card: rgba(15, 29, 54, 0.75); --syn-text-primary: #f1f5f9; --syn-text-muted: #94a3b8; --syn-border: rgba(255, 255, 255, 0.08); --syn-header-bg: rgba(11, 23, 42, 0.9); color-scheme: dark; } /* ===== TEMA CLARO ===== */ html[data-theme="light"] { --syn-bg-primary: #f8fafc; --syn-bg-secondary: #ffffff; --syn-bg-card: rgba(255, 255, 255, 0.9); --syn-text-primary: #0f172a; --syn-text-muted: #475569; --syn-border: rgba(15, 23, 42, 0.12); --syn-header-bg: rgba(255, 255, 255, 0.9); color-scheme: light; } /* ===== Aplicar variables a la base ===== */ html[data-theme="light"] body, html[data-theme="light"] .wp-site-blocks { background-color: var(--syn-bg-primary) !important; color: var(--syn-text-primary) !important; } html[data-theme="light"] body.glow-hero, html[data-theme="light"] .glow-hero { background-color: var(--syn-bg-primary) !important; background-image: radial-gradient( circle at 50% 15%, rgba(249, 115, 22, 0.08), rgba(30, 58, 138, 0.08) 45%, transparent 75% ) !important; } /* ============================================================================ * PARAGUAS: fondos oscuros de Tailwind → claros (modo claro) * Usa [class*=] con el PREFIJO para cubrir también variantes con opacidad * (bg-slate-900/90, bg-slate-950, etc.). Es lo que cubre TODAS las zonas * oscuras de golpe (barra stats, Nube Privada, cómo funciona, SYN Bot, etc.). * ========================================================================== */ html[data-theme="light"] [class*="bg-slate-9"], html[data-theme="light"] [class*="bg-gray-9"], html[data-theme="light"] [class*="bg-brand-navy"], html[data-theme="light"] [class*="bg-brand-dark"] { background-color: #eef2f7 !important; } html[data-theme="light"] [class*="bg-slate-8"], html[data-theme="light"] [class*="bg-gray-8"], html[data-theme="light"] [class*="bg-slate-7"], html[data-theme="light"] [class*="bg-gray-7"] { background-color: #f1f5f9 !important; } /* Tarjetas/paneles con clase propia */ html[data-theme="light"] .glow-card { background: var(--syn-bg-card) !important; border: 1px solid var(--syn-border) !important; } /* ============================================================================ * TEXTOS CLAROS → OSCUROS (modo claro) * ========================================================================== */ html[data-theme="light"] [class*="text-white"], html[data-theme="light"] [class*="text-slate-50"], html[data-theme="light"] [class*="text-slate-100"], html[data-theme="light"] [class*="text-slate-200"], html[data-theme="light"] [class*="text-gray-100"], html[data-theme="light"] [class*="text-gray-200"] { color: var(--syn-text-primary) !important; } html[data-theme="light"] [class*="text-slate-300"], html[data-theme="light"] [class*="text-slate-400"], html[data-theme="light"] [class*="text-gray-300"], html[data-theme="light"] [class*="text-gray-400"] { color: var(--syn-text-muted) !important; } /* Acentos de marca legibles en claro */ html[data-theme="light"] [class*="text-orange-400"], html[data-theme="light"] [class*="text-orange-500"] { color: #ea580c !important; } html[data-theme="light"] [class*="text-emerald-400"] { color: #059669 !important; } /* Enlaces heredan color de texto por defecto */ html[data-theme="light"] a { color: inherit; } /* ============================================================================ * BORDES * ========================================================================== */ html[data-theme="light"] [class*="border-white"], html[data-theme="light"] [class*="border-slate"] { border-color: var(--syn-border) !important; } /* ============================================================================ * BOTONES / ENLACES OSCUROS (hero y similares) * Selector con elemento para ganar a Tailwind CDN. * ========================================================================== */ html[data-theme="light"] a[class*="bg-slate-9"], html[data-theme="light"] a[class*="bg-slate-8"], html[data-theme="light"] button[class*="bg-slate-9"], html[data-theme="light"] button[class*="bg-slate-8"] { background-color: #eef2f7 !important; color: var(--syn-text-primary) !important; border-color: var(--syn-border) !important; } html[data-theme="light"] a[class*="bg-slate-9"]:hover, html[data-theme="light"] a[class*="bg-slate-8"]:hover, html[data-theme="light"] button[class*="bg-slate-9"]:hover, html[data-theme="light"] button[class*="bg-slate-8"]:hover { background-color: #dbe5f1 !important; } /* Los botones de marca (naranja) mantienen texto blanco */ html[data-theme="light"] .orange-badge, html[data-theme="light"] [class*="bg-orange-500"], html[data-theme="light"] [class*="bg-orange-600"] { color: #ffffff !important; } /* ============================================================================ * HEADER STICKY * ========================================================================== */ html[data-theme="light"] header.syn360-sticky, html[data-theme="light"] header { background-color: var(--syn-header-bg) !important; border-bottom-color: var(--syn-border) !important; } html[data-theme="light"] header.syn360-sticky a, html[data-theme="light"] header.syn360-sticky button { color: var(--syn-text-primary) !important; } /* ============================================================================ * BANNER SUPERIOR (Verifactu) — paleta AZUL MARCA en modo claro * ========================================================================== */ html[data-theme="light"] [class*="from-brand-navy"], html[data-theme="light"] [class*="via-orange-950"] { background-image: none !important; background-color: #eaf4ff !important; border-bottom-color: rgba(0, 149, 255, 0.25) !important; color: #1e3a8a !important; } /* Todos los hijos del banner en azul marino */ html[data-theme="light"] [class*="from-brand-navy"] span, html[data-theme="light"] [class*="from-brand-navy"] strong, html[data-theme="light"] [class*="from-brand-navy"] a { color: #1e3a8a !important; } /* Texto destacado (Verifactu & Ley Antifraude) en azul marca */ html[data-theme="light"] [class*="from-brand-navy"] strong { color: #0095ff !important; } /* Enlace "Solicitar Auditoría Gratis" como píldora azul marca */ html[data-theme="light"] [class*="from-brand-navy"] a[href*="contacto"] { color: #ffffff !important; background-color: #0095ff !important; } html[data-theme="light"] [class*="from-brand-navy"] a[href*="contacto"]:hover { background-color: #0077cc !important; color: #ffffff !important; } /* Bullet verde visible en claro */ html[data-theme="light"] [class*="from-brand-navy"] .bg-emerald-400 { background-color: #10b981 !important; } /* ============================================================================ * FOOTER * ========================================================================== */ html[data-theme="light"] footer, html[data-theme="light"] footer [class*="bg-"] { background-color: #f1f5f9 !important; color: var(--syn-text-muted) !important; border-color: var(--syn-border) !important; } /* ============================================================================ * FORMULARIOS / INPUTS * ========================================================================== */ html[data-theme="light"] input, html[data-theme="light"] textarea, html[data-theme="light"] select { background-color: #ffffff !important; color: var(--syn-text-primary) !important; border-color: var(--syn-border) !important; } html[data-theme="light"] input::placeholder, html[data-theme="light"] textarea::placeholder { color: #94a3b8 !important; } /* ============================================================================ * TABLAS * ========================================================================== */ html[data-theme="light"] table, html[data-theme="light"] thead, html[data-theme="light"] tbody, html[data-theme="light"] tr, html[data-theme="light"] td, html[data-theme="light"] th { background-color: transparent !important; color: var(--syn-text-primary) !important; border-color: var(--syn-border) !important; } /* ============================================================================ * BOTÓN DEL TOGGLE (flotante, arriba a la derecha) * ========================================================================== */ .syn360-theme-toggle { position: fixed; top: 96px; right: 20px; z-index: 9999; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 9999px; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(15, 29, 54, 0.85); color: #f1f5f9; cursor: pointer; backdrop-filter: blur(10px); box-shadow: 0 6px 20px -4px rgba(0, 0, 0, 0.4); transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease; flex: 0 0 auto; } html[data-theme="light"] .syn360-theme-toggle { background: rgba(255, 255, 255, 0.9); color: #0f172a; border-color: rgba(15, 23, 42, 0.15); } @media screen and (max-width: 782px) { .syn360-theme-toggle { top: 84px; right: 12px; width: 40px; height: 40px; } } .syn360-theme-toggle:hover { background: rgba(249, 115, 22, 0.15); border-color: rgba(249, 115, 22, 0.5); transform: translateY(-1px); } .syn360-theme-toggle i { font-size: 15px; line-height: 1; } /* Evita el flash al cambiar de tema */ html.syn360-theme-transition, html.syn360-theme-transition * { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease !important; } /* ============================================================================ * DEGRADADOS OSCUROS (banners CTA) → claros en modo claro * Tailwind genera los degradados con background-image + from/via/to, * así que la regla paraguas de background-color NO los pilla. * ========================================================================== */ html[data-theme="light"] [class*="from-blue-9"], html[data-theme="light"] [class*="from-slate-9"], html[data-theme="light"] [class*="from-gray-9"], html[data-theme="light"] [class*="from-brand-navy"] { background-image: none !important; background-color: #eaf4ff !important; border-color: rgba(0, 149, 255, 0.3) !important; color: #1e3a8a !important; } /* Asegura legibilidad de los hijos del banner CTA en claro */ html[data-theme="light"] [class*="from-blue-9"] h2, html[data-theme="light"] [class*="from-blue-9"] p, html[data-theme="light"] [class*="from-blue-9"] span, html[data-theme="light"] [class*="from-slate-9"] h2, html[data-theme="light"] [class*="from-slate-9"] p, html[data-theme="light"] [class*="from-slate-9"] span { color: #1e3a8a !important; } /* Los textos secundarios un poco más suaves */ html[data-theme="light"] [class*="from-blue-9"] [class*="text-slate-3"], html[data-theme="light"] [class*="from-blue-9"] [class*="text-slate-4"], html[data-theme="light"] [class*="from-slate-9"] [class*="text-slate-3"], html[data-theme="light"] [class*="from-slate-9"] [class*="text-slate-4"] { color: #475569 !important; } /* Las pastillas internas con bg-white/5 → fondo claro sutil */ html[data-theme="light"] [class*="from-blue-9"] [class*="bg-white/"], html[data-theme="light"] [class*="from-slate-9"] [class*="bg-white/"] { background-color: rgba(255, 255, 255, 0.7) !important; border-color: rgba(15, 23, 42, 0.1) !important; } /* El badge azul superior del CTA se mantiene legible */ html[data-theme="light"] [class*="from-blue-9"] [class*="text-blue-400"], html[data-theme="light"] [class*="from-slate-9"] [class*="text-blue-400"] { color: #0077cc !important; } /* ============================================================================ * WOOCOMMERCE / GUTENBERG (carrito, checkout, contacto) en modo claro * Estas páginas NO usan el HTML del rediseño; usan bloques nativos con * presets de color y estilos propios de WooCommerce. Forzamos fondo claro * y texto oscuro en las áreas de contenido. * ========================================================================== */ /* --- Contenedores generales de la página --- */ html[data-theme="light"] .wp-block-group.has-background, html[data-theme="light"] .wp-block-cover, html[data-theme="light"] .wp-block-column.has-background, html[data-theme="light"] .entry-content, html[data-theme="light"] .wp-site-blocks { background-color: var(--syn-bg-primary) !important; color: var(--syn-text-primary) !important; } /* --- Bloques WooCommerce (carrito / checkout) --- */ html[data-theme="light"] .wc-block-components-sidebar, html[data-theme="light"] .wc-block-cart, html[data-theme="light"] .wc-block-cart-items, html[data-theme="light"] .wc-block-cart-item, html[data-theme="light"] .wc-block-components-order-summary, html[data-theme="light"] .wc-block-components-totals-item, html[data-theme="light"] .wc-block-components-product-name, html[data-theme="light"] .wc-block-cart__submit-container, html[data-theme="light"] .wc-block-components-panel, html[data-theme="light"] .wc-block-components-title, html[data-theme="light"] .wc-block-components-totals-footer-item { background-color: #ffffff !important; color: var(--syn-text-primary) !important; } /* Filas y celdas del carrito con fondo claro y separadores suaves */ html[data-theme="light"] .wc-block-cart-items__row, html[data-theme="light"] .wc-block-cart-items__row td, html[data-theme="light"] .wc-block-cart-items__header { background-color: #ffffff !important; color: var(--syn-text-primary) !important; border-color: var(--syn-border) !important; } /* Textos secundarios del carrito */ html[data-theme="light"] .wc-block-components-product-price, html[data-theme="light"] .wc-block-components-totals-item__label, html[data-theme="light"] .wc-block-components-totals-item__value, html[data-theme="light"] .wc-block-cart-item__quantity, html[data-theme="light"] .wc-block-cart-item__total { color: var(--syn-text-primary) !important; } /* --- Bloques Gutenberg con preset oscuro de fondo (contacto, etc.) --- */ html[data-theme="light"] [class*="has-background-background-color"], html[data-theme="light"] [class*="has-dark-background-color"], html[data-theme="light"] [class*="has-black-background-color"], html[data-theme="light"] [class*="has-navy-background-color"] { background-color: #ffffff !important; color: var(--syn-text-primary) !important; } /* Textos con preset claro sobre esos fondos → oscuros */ html[data-theme="light"] [class*="has-background-background-color"] [class*="has-text-color"], html[data-theme="light"] [class*="has-dark-background-color"] [class*="has-text-color"], html[data-theme="light"] [class*="has-black-background-color"] [class*="has-text-color"] { color: var(--syn-text-primary) !important; } /* --- Campos y botones en carrito / contacto --- */ html[data-theme="light"] .wc-block-components-text-input input, html[data-theme="light"] .wc-block-components-select, html[data-theme="light"] .wp-block-search__input, html[data-theme="light"] .wp-block-post-comments-form input, html[data-theme="light"] .wp-block-post-comments-form textarea { background-color: #ffffff !important; color: var(--syn-text-primary) !important; border-color: var(--syn-border) !important; } /* Botón principal del carrito (Finalizar compra) — mantener legible */ html[data-theme="light"] .wc-block-components-button, html[data-theme="light"] .wp-block-button__link { color: #ffffff !important; } /* ============================================================================ * TEXTO CON DEGRADADO (.text-gradient) — legible en modo claro * La clase .text-gradient usa background-clip:text + color transparente; * en claro el degradado queda invisible. Forzamos color sólido legible. * ========================================================================== */ html[data-theme="light"] .text-gradient { background: none !important; background-image: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: #0095ff !important; color: #0095ff !important; } /* Títulos de contenido (Gutenberg) en modo claro: color + negrita */ html[data-theme="light"] .wp-block-heading, html[data-theme="light"] .entry-content h1, html[data-theme="light"] .entry-content h2, html[data-theme="light"] .entry-content h3, html[data-theme="light"] .entry-content h4 { color: #0f1b2d !important; font-weight: 800 !important; } html body.page-id-121 main#wp--skip-link--target , html body.page-id-123 main#wp--skip-link--target { padding-top: 0 !important; padding-bottom: 0 !important; } html body.page-id-121 main#wp--skip-link--target > div > div:first-child , html body.page-id-123 main#wp--skip-link--target > div > div:first-child { display: none !important; } /* ========================================================================== MODO OSCURO global: corrige divs con colores claros hardcodeados Aplica a todo el sitio cuando el tema está en oscuro. ========================================================================== */ /* --- FONDOS claros -> oscuro --- */ html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-slate-50, html[data-theme="dark"] .bg-slate-50\/50, html[data-theme="dark"] .bg-blue-50, html[data-theme="dark"] .bg-emerald-50, html[data-theme="dark"] .bg-emerald-50\/40, html[data-theme="dark"] .bg-orange-50, html[data-theme="dark"] .bg-teal-50, html[data-theme="dark"] .bg-purple-50, html[data-theme="dark"] .bg-indigo-50, html[data-theme="dark"] .bg-emerald-100, html[data-theme="dark"] .bg-blue-100, html[data-theme="dark"] .bg-orange-100, html[data-theme="dark"] .bg-amber-100, html[data-theme="dark"] .bg-cyan-100, html[data-theme="dark"] .bg-sky-100, html[data-theme="dark"] .bg-lime-100, html[data-theme="dark"] .bg-rose-100 { background-color: #0f1d36 !important; } /* --- GRADIENTES claros -> oscuro --- */ html[data-theme="dark"] .gradient-blue-subtle { background: linear-gradient(180deg, #0f1d36 0%, #0b172a 100%) !important; } html[data-theme="dark"] .wordpress-shortcode-container { background-color: #0f1d36 !important; border-color: #1e293b !important; } /* --- TEXTOS oscuros -> claros --- */ html[data-theme="dark"] .text-slate-900, html[data-theme="dark"] .text-slate-800, html[data-theme="dark"] .text-slate-700 { color: #f1f5f9 !important; } html[data-theme="dark"] .text-slate-600, html[data-theme="dark"] .text-slate-500 { color: #94a3b8 !important; } html[data-theme="dark"] .text-emerald-600, html[data-theme="dark"] .text-emerald-700, html[data-theme="dark"] .text-emerald-800, html[data-theme="dark"] .text-blue-600, html[data-theme="dark"] .text-purple-600, html[data-theme="dark"] .text-rose-600, html[data-theme="dark"] .text-teal-600, html[data-theme="dark"] .text-indigo-600, html[data-theme="dark"] .text-amber-600, html[data-theme="dark"] .text-cyan-600, html[data-theme="dark"] .text-sky-600, html[data-theme="dark"] .text-lime-600 { color: #e2e8f0 !important; } /* --- BORDES claros -> oscuro --- */ html[data-theme="dark"] .border-slate-100, html[data-theme="dark"] .border-slate-200, html[data-theme="dark"] .border-slate-200\/80, html[data-theme="dark"] .divide-slate-200 > * + * { border-color: #1e293b !important; } /* ===== SYN360 · Tarjeta de planes centrada y estrecha + botón legible en modo claro ===== */ /* La tarjeta de planes (shortcode) no ocupa todo el ancho: la centramos y limitamos */ .syn360-planes-wrap, .elementor-widget-shortcode .grid{ max-width: 520px !important; margin-left: auto !important; margin-right: auto !important; } /* Si el shortcode envuelve en un grid de 1 columna, que no estire */ .elementor-widget-shortcode .grid.grid-cols-1{ grid-template-columns: minmax(0, 520px) !important; justify-content: center !important; } /* ===== BOTÓN "Contratar Plan" legible en MODO CLARO ===== */ /* El botón del shortcode usa clases oscuras; forzamos contraste en claro */ html[data-theme="light"] .elementor-widget-shortcode a[class*="bg-white/10"], html[data-theme="light"] .elementor-widget-shortcode a[class*="bg-white\/10"], html[data-theme="light"] .elementor-widget-shortcode a[href*="/product/"]{ background-color: #1E50C2 !important; /* azul de marca */ color: #FFFFFF !important; /* texto blanco legible */ border: 1px solid #1E50C2 !important; } html[data-theme="light"] .elementor-widget-shortcode a[href*="/product/"]:hover{ background-color: #003366 !important; } /* El botón naranja "Opción Más Elegida" ya es legible; aseguramos su texto */ html[data-theme="light"] .elementor-widget-shortcode a[class*="orange-badge"]{ color:#FFFFFF !important; } /* La TARJETA oscura: en modo claro, si el texto interno no se lee, forzamos fondo oscuro */ html[data-theme="light"] .elementor-widget-shortcode .glow-card{ color:#FFFFFF !important; }