/*! * ACC Dark Mode — hoja de estilos claro/oscuro * ------------------------------------------------------------------ * Sitio : https://acc.climatech.com.pe (WordPress + Breakdance Zero) * Probado : Breakdance 2.0.0-beta.1 · TutorLMS 4.0.9 · TutorLMS Pro 4.0.9 · WooCommerce 11.1.2 * Autor : AC Consulting SAC * Versión : 1.0.0 * * CÓMO FUNCIONA * 1) El JS pone data-theme="light|dark" en (y opcionalmente la clase acc-swap). * 2) Toda la paleta se reescribe con variables CSS por lo que NO hay que * re-maquetar nada en Breakdance: se reescriben las variables que * Breakdance ya usa (--bde-*, --grey-*, escala de grises) y las de * TutorLMS (--tutor-*). * 3) Los colores sueltos (hardcodeados) de un elemento concreto se * resuelven con las "EXCEPCIONES POR ID" del final (sección 9). * * ÍNDICE * 1. Base y color-scheme * 2. Tokens propios ACC (--acc-*) * 3. Escala de grises de Breakdance (inversión del sistema de diseño) * 4. Tokens de Breakdance (marca, textos, formularios, WooCommerce) * 5. Inversión de la paleta global (opt-in: html.acc-swap) * 6. TutorLMS / TutorLMS Pro * 7. WooCommerce (refuerzos) * 8. Botón conmutador + utilidades * 9. Excepciones del sitio (por ID de elemento Breakdance) * 10. Detalles finales (scrollbar, selección, movimiento reducido) */ /* ================================================================== 1. BASE Y COLOR-SCHEME ================================================================== */ html { color-scheme: light; } html[data-theme="dark"] { color-scheme: dark; /* scrollbars, autofill, date-pickers, controles nativos */ background-color: #0b0f17; /* evita el "flash" blanco al hacer overscroll */ } /* Evita el parpadeo de transiciones durante la carga (lo quita el JS). */ html.acc-preload *, html.acc-preload *::before, html.acc-preload *::after { transition: none !important; animation-duration: 0s !important; } /* ================================================================== 2. TOKENS PROPIOS ACC ================================================================== */ :root, html[data-theme="light"] { --acc-surface-0: #ffffff; --acc-surface-1: #ffffff; --acc-surface-2: #f3f4f6; --acc-surface-3: #e5e7eb; --acc-border: #e5e7eb; --acc-text: #1a1a1a; --acc-text-muted: #6b7280; --acc-brand: #0425ec; --acc-brand-soft: rgba(4, 37, 236, 0.08); --acc-shadow: 0 6px 20px rgba(15, 23, 42, 0.12); } html[data-theme="dark"] { --acc-surface-0: #0b0f17; /* fondo de página */ --acc-surface-1: #141a24; /* tarjetas, modales, inputs */ --acc-surface-2: #1b2331; /* hover / nivel 2 */ --acc-surface-3: #232d3d; /* nivel 3, chips */ --acc-border: #28323f; --acc-text: #e6e9ef; --acc-text-muted: #9ba6b8; --acc-brand: #4c6fff; --acc-brand-soft: rgba(124, 151, 255, 0.14); --acc-shadow: 0 8px 26px rgba(0, 0, 0, 0.55); } /* ================================================================== 3. ESCALA DE GRISES DE BREAKDANCE ------------------------------------------------------------------ Breakdance construye CASI todo su sistema (fondos, bordes, textos de formularios, avisos, tablas de Woo, iconos SVG enmascarados...) a partir de estas dos escalas. Invertirlas voltea el sitio entero de forma coherente, incluidos los iconos de chevron/checkbox que usan --grey-900 como color de máscara. ================================================================== */ html[data-theme="dark"] { --white: #141a24; --grey-50: #0b0f17; --grey-100: #141a24; --grey-200: #1b2331; --grey-300: #28323f; --grey-400: #6b7688; --grey-450: #8a94a6; --grey-500: #9ba6b8; --grey-600: #b4bdcb; --grey-700: #cbd3de; --grey-800: #dfe4ec; --grey-900: #f2f4f8; --blue-500: #6f9bff; --blue-600: #8fb0ff; --emerald-100: #10301f; --emerald-700: #6ee7b7; --sky-100: #0d2b3a; --red-50: #2a1414; --red-500: #ff6b6b; --red-700: #ff8080; --indigo-50: #1b2331; --indigo-600: #8fa8ff; --indigo-700: #a5b8ff; } /* ================================================================== 4. TOKENS DE BREAKDANCE ------------------------------------------------------------------ Valores tomados de /wp-content/uploads/breakdance/css/global-settings.css del sitio. La especificidad de html[data-theme="dark"] (0,1,1) gana siempre sobre el :root (0,1,0) que emite Breakdance. ================================================================== */ html[data-theme="dark"] { /* Textos globales */ --bde-body-text-color: #e6e9ef; --bde-headings-color: #9cb8ff; /* Marca. En Breakdance la MISMA variable sirve como fondo de botón (con texto blanco encima) y como color de texto/enlace (sobre fondo oscuro). Ningún valor cumple AA en las dos direcciones, así que aquí se separan: · --bde-brand-primary-color ......... texto/bordes -> #4c6fff (4.59:1 sobre fondo) · --bde-button-primary-background ... fondo de botón -> #3f5df0 (5.20:1 con texto blanco) */ --bde-brand-primary-color: #4c6fff; --bde-brand-primary-color-hover: #7c97ff; --bde-button-primary-background-color: #3f5df0; --bde-button-primary-background-color-hover: #4c6fff; --bde-links-color: #9cb8ff; --bde-links-color-hover: #dde3ec; /* Formularios */ --bde-form-input-background-color: #141a24; --bde-form-input-focused-background-color: #1b2331; --bde-form-input-border-color: #28323f; --bde-form-input-placeholder-color: #8a94a6; --bde-form-label-required-color: #ff8080; /* WooCommerce (solo lo que no cuelga de la escala de grises) */ --bde-woo-base-text-on-primary-color: #ffffff; --bde-woo-sale-badge__background-color: #3f5df0; --bde-woo-buttons-and-links__text-link-color: #9cb8ff; --bde-woo-buttons-and-links__text-link-color-hover: #dde3ec; --bde-woo-buttons-and-links__disabled-button-color: #28323f; --bde-woo-buttons-and-links__disabled-button-text-color: #8a94a6; --bde-woo-base-paragraph-line-height: 1.4; } /* ================================================================== 5. INVERSIÓN DE LA PALETA GLOBAL (opt-in) ------------------------------------------------------------------ La clase `acc-swap` la añade el plugin en (constante ACC_DM_PALETTE_SWAP = true). Sirve para que los elementos de Breakdance que usan las Global Colors se inviertan solos: paleta 1 (blanco #FFF) -> superficie oscura paleta 2 (negro #000) -> texto claro paleta 3 (gris #C7C8CA) -> texto atenuado Si un bloque NO debe invertirse (hero sobre foto, footer oscuro, barra azul de marca...) añádele la clase acc-static o inclúyelo en la sección 9. Todo lo que cuelgue de ese elemento vuelve a los valores originales. ================================================================== */ html.acc-swap[data-theme="dark"] { --bde-palette-color-1-930b3e51-72b2-4ac0-b721-afd0121fbc91: #0b0f17; /* blanco -> oscuro */ --bde-palette-color-1-57efcf54-8b92-471e-8adf-f5ff5600f341: #f2f4f8; /* negro -> claro */ --bde-palette-color-1-30e9fec3-5cdd-41fe-8ac7-bb5d50327582: #9ba6b8; /* gris -> atenuado */ } /* ================================================================== 6. TUTORLMS / TUTORLMS PRO ------------------------------------------------------------------ CÓMO FUNCIONA TUTORLMS 4.0 (verificado en el código del plugin) --------------------------------------------------------------- Tutor trae DOS sistemas de color: a) SISTEMA NUEVO (dashboard y área de aprendizaje, solo usuarios logueados). Tutor pone en el atributo data-tutor-theme="light|dark|system" (+ data-tutor-vision / data-tutor-contrast / data-tutor-motion) desde classes/UserPreference.php, y define ~180 tokens en assets/css/tutor-core.min.css: :root,[data-tutor-theme=light] -> paleta clara [data-tutor-theme=dark] -> paleta oscura [data-tutor-theme=system] -> según prefers-color-scheme El conmutador del sitio ESCRIBE ESE MISMO ATRIBUTO (lo hace el JS: ACC_DM.syncTutor), así que Tutor usa su propia paleta oficial en el tema que elija el visitante. Estos bloques son el respaldo por si tutor-core.min.css no está cargado en la página. b) SISTEMA ANTIGUO (archivo de cursos, ficha de curso, widgets…): tokens `--tutor-color-*` emitidos en `tutor-frontend-inline-css` según Settings > Design > Color Theme (ese ajuste hoy está en "dark", pero sus CSS de tema solo se cargan en el dashboard, por eso el front público se ve claro). Los reescribimos aquí para que TODA la parte de Tutor siga al conmutador del sitio. Importante: `--tutor-color-white` NO se invierte, porque además de fondo de tarjetas es el color de texto de .tutor-badge y del knob del switch; sus usos como superficie se corrigen una por una más abajo. ================================================================== */ /* --- Claro: valores reales del sitio (Settings > Design en Light) --- */ html[data-theme="light"] { --tutor-color-primary: #3e64de; --tutor-color-primary-rgb: 62, 100, 222; --tutor-color-primary-hover: #2b49ca; --tutor-color-primary-hover-rgb: 43, 73, 202; --tutor-body-color: #212327; --tutor-body-color-rgb: 33, 35, 39; --tutor-border-color: #e3e5eb; --tutor-border-color-rgb: 227, 229, 235; --tutor-color-gray: #cdcfd5; --tutor-color-gray-rgb: 205, 207, 213; /* --- Tokens del sistema nuevo (paleta clara oficial de Tutor 4.0) --- */ --tutor-surface-base: #fafafa; --tutor-surface-l1: #fff; --tutor-surface-l1-hover: #f5f5f6; --tutor-surface-l2: #ececed; --tutor-surface-l2-hover: #cecfd2; --tutor-surface-l3: #f5f5f6; --tutor-surface-sidebar-l1: #fcfcfc; --tutor-surface-dark: #0c111d; --tutor-text-primary: #0c111d; --tutor-text-secondary: #333741; --tutor-text-subdued: #73767d; --tutor-text-light: #fafafa; --tutor-text-disabled: #cecfd2; --tutor-text-brand: #3e64de; --tutor-icon-idle: #333741; --tutor-icon-secondary: #73767d; --tutor-icon-subdued: #94969c; --tutor-icon-disabled: #cecfd2; --tutor-icon-brand: #3e64de; --tutor-border-idle: #ececed; --tutor-border-idle2: #ececed; --tutor-border-hover: #cecfd2; --tutor-border-brand: #3e64de; --tutor-border-dark: #0c111d; --tutor-button-primary: #3e64de; --tutor-button-primary-hover: #2b49ca; --tutor-button-secondary: #ececed; --tutor-button-secondary-hover: #cecfd2; --tutor-button-disabled: #f0f1f1; --tutor-tab-l3: #e4ebfc; --tutor-tab-l3-hover: #dbe4fa; --tutor-tab-sidebar-l2: #fcfcfc; --tutor-tab-sidebar-l2-hover: #ececed; --tutor-actions-gray-empty: #f5f5f6; --tutor-actions-gray-secondary: #f0f1f1; --tutor-actions-gray-tertiary: #ececed; --tutor-actions-gray-quaternary: #e0e0e1; --tutor-quiz-idle: #fafafa; --tutor-quiz-hover: #f0f1f1; } /* --- Oscuro --- */ html[data-theme="dark"] { --tutor-color-primary: #5b7bff; --tutor-color-primary-rgb: 91, 123, 255; --tutor-color-primary-hover: #7c97ff; --tutor-color-primary-hover-rgb: 124, 151, 255; --tutor-body-color: #e6e9ef; --tutor-body-color-rgb: 230, 233, 239; --tutor-border-color: #28323f; --tutor-border-color-rgb: 40, 50, 63; --tutor-color-gray: #3a4557; --tutor-color-gray-rgb: 58, 69, 87; --tutor-color-gray-10: #1b2331; --tutor-color-secondary: #cbd3de; --tutor-color-subdued: #b4bdcb; --tutor-color-muted: #9ba6b8; --tutor-color-hints: #9ba6b8; /* --- Tokens del sistema nuevo, alineados con la paleta del sitio --- Los nombres son los oficiales de Tutor 4.0; los valores siguen la escala oscura de ACC (más azulada y un punto más profunda que la de Tutor) para que el curso, el player y el dashboard no desentonen con las secciones de Breakdance. Si algún componente del course player se viera raro, comenta desde aquí hasta "--tutor-quiz-hover". */ --tutor-surface-base: #0b0f17; --tutor-surface-l1: #141a24; --tutor-surface-l1-hover: #1b2331; --tutor-surface-l2: #1b2331; --tutor-surface-l2-hover: #232d3d; --tutor-surface-l3: #1b2331; --tutor-surface-sidebar-l1: #090d13; --tutor-surface-dark: #090d13; --tutor-surface-brand-secondary: #1b2331; --tutor-surface-brand-tertiary: #232d3d; --tutor-surface-brand-quaternary: #232d3d; --tutor-surface-exception7: #1b2331; --tutor-surface-success: #10291a; --tutor-surface-warning: #2a2318; --tutor-surface-critical: #2c1614; --tutor-text-primary: #e6e9ef; --tutor-text-primary-inverse: #0b0f17; --tutor-text-secondary: #cbd3de; --tutor-text-subdued: #9ba6b8; --tutor-text-light: #f2f4f8; --tutor-text-disabled: #6b7688; --tutor-text-brand: #9cb8ff; --tutor-text-brand-hover: #dde3ec; --tutor-icon-idle: #cbd3de; --tutor-icon-hover: #f2f4f8; --tutor-icon-secondary: #9ba6b8; --tutor-icon-subdued: #6b7688; --tutor-icon-disabled: #4c586b; --tutor-icon-brand: #9cb8ff; --tutor-icon-brand-hover: #b9ccff; --tutor-border-idle: #28323f; --tutor-border-idle2: #2f3a4a; --tutor-border-hover: #4c586b; --tutor-border-tertiary: #4c586b; --tutor-border-brand: #4c6fff; --tutor-border-brand-secondary: #2f3a4a; --tutor-border-dark: #2f3a4a; --tutor-button-primary: #3f5df0; --tutor-button-primary-hover: #4c6fff; --tutor-button-secondary: #232d3d; --tutor-button-secondary-hover: #2f3a4a; --tutor-button-disabled: #232d3d; --tutor-button-ghost-hover: #232d3d; --tutor-button-outline-inverse: #141a24; --tutor-button-outline-hover: #232d3d; --tutor-tab-l3: #1b2331; --tutor-tab-l3-hover: #232d3d; --tutor-tab-sidebar-l2: #141a24; --tutor-tab-sidebar-l2-hover: #232d3d; --tutor-tab-sidebar-l2-active: #1b2331; --tutor-actions-gray-empty: #141a24; --tutor-actions-gray-secondary: #1b2331; --tutor-actions-gray-tertiary: #141a24; --tutor-actions-gray-quaternary: #0b0f17; --tutor-quiz-idle: #1b2331; --tutor-quiz-hover: #232d3d; /* --- fin del bloque alineado ------------------------------------- */ } /* --- Oscuro: superficies que Tutor trae con #fff literal --- */ html[data-theme="dark"] .tutor-card, html[data-theme="dark"] .tutor-card-list-item, html[data-theme="dark"] .tutor-course-content-list-item, html[data-theme="dark"] .tutor-accordion-item, html[data-theme="dark"] .tutor-large-notification, html[data-theme="dark"] .tutor-certificate-template-inner, html[data-theme="dark"] .tutor-modal-content-white, html[data-theme="dark"] .tutor-modal-header, html[data-theme="dark"] .tutor-modal-footer, html[data-theme="dark"] .tutor-offcanvas .tutor-offcanvas-main, html[data-theme="dark"] .tutor-table tr td, html[data-theme="dark"] .tutor-bg-white, html[data-theme="dark"] .tutor-quiz-item { background-color: var(--acc-surface-1); color: var(--acc-text); } /* Controles nativos de Tutor */ html[data-theme="dark"] .tutor-form-control, html[data-theme="dark"] .tutor-input-group-addon, html[data-theme="dark"] .tutor-form-check-input.tutor-form-check-input, html[data-theme="dark"] .tutor-thumbnail-uploader .thumbnail-wrapper { background-color: var(--acc-surface-1); color: var(--acc-text); border-color: var(--acc-border); } html[data-theme="dark"] .tutor-form-control::placeholder { color: #8a94a6; } html[data-theme="dark"] .tutor-form-select-option, html[data-theme="dark"] .tutor-dropdown-select-options-container, html[data-theme="dark"] .tutor-dropdown-select-selected, html[data-theme="dark"] .tutor-form-select-dropdown, html[data-theme="dark"] .tutor-react-datepicker .dropdown-container .dropdown-list, html[data-theme="dark"] .tutor-react-datepicker .react-datepicker, html[data-theme="dark"] .tutor-backend .ui-datepicker, html[data-theme="dark"] .tutor-screen-frontend-dashboard .ui-datepicker { background-color: var(--acc-surface-1); border-color: var(--acc-border); color: var(--acc-text); } html[data-theme="dark"] .tutor-form-select-option:hover, html[data-theme="dark"] .tutor-form-select-option.is-active { background-color: var(--acc-surface-2); } html[data-theme="dark"] .tutor-btn-tertiary, html[data-theme="dark"] .tutor-nav-tabs-container, html[data-theme="dark"] .tutor-nav-tabs .tutor-nav-link.is-active, html[data-theme="dark"] .tutor-certificate-tabs.tutor-nav > li > a.is-active { background-color: var(--acc-surface-1); border-color: var(--acc-border); color: var(--acc-text); } /* Barras de progreso, sliders y switch */ html[data-theme="dark"] .tutor-progress-bar, html[data-theme="dark"] .tutor-field-type-slider { background-color: var(--acc-surface-3); } html[data-theme="dark"] .tutor-progress-circle:before, html[data-theme="dark"] .tutor-field-type-slider .ui-widget-content .ui-state-default, html[data-theme="dark"] .tutor-switch .slider:before { background-color: var(--acc-text); } /* Filtros del dashboard (TutorLMS Pro 4.x) */ html[data-theme="dark"] .tutor-wp-dashboard-course-filter .tutor-wp-dashboard-filters-button, html[data-theme="dark"] .tutor-wp-dashboard-course-filter .tutor-wp-dashboard-filter-order, html[data-theme="dark"] .tutor-wp-dashboard-course-filter .tutor-wp-dashboard-filter-tag, html[data-theme="dark"] .tutor-wp-dashboard-course-filter .tutor-wp-dashboard-filter-tag-dropdown { background-color: var(--acc-surface-1); border-color: var(--acc-border); color: var(--acc-text); } html[data-theme="dark"] .tutor-wp-dashboard-course-filter .tutor-wp-dashboard-filters-button:hover, html[data-theme="dark"] .tutor-wp-dashboard-course-filter .tutor-wp-dashboard-filter-order:hover { background-color: var(--acc-surface-2); } /* ================================================================== 7. WOOCOMMERCE (refuerzos) ------------------------------------------------------------------ Casi todo el estilo de Woo de Breakdance cuelga de las variables --bde-woo-* y de la escala de grises, así que ya se invierte solo. Aquí solo se tapan los huecos de WooCommerce "pelado". ================================================================== */ html[data-theme="dark"] .woocommerce .woocommerce-message, html[data-theme="dark"] .woocommerce .woocommerce-info, html[data-theme="dark"] .woocommerce .woocommerce-error { background-color: var(--acc-surface-1); color: var(--acc-text); border-top-color: var(--acc-brand); } html[data-theme="dark"] .woocommerce form.checkout_coupon, html[data-theme="dark"] .woocommerce form.login, html[data-theme="dark"] .woocommerce form.register, html[data-theme="dark"] .woocommerce #payment, html[data-theme="dark"] .woocommerce-checkout-review-order-table, html[data-theme="dark"] .woocommerce table.shop_table { background-color: var(--acc-surface-1); border-color: var(--acc-border); color: var(--acc-text); } html[data-theme="dark"] .select2-container--default .select2-selection--single, html[data-theme="dark"] .select2-container--default .select2-dropdown, html[data-theme="dark"] .select2-container--default .select2-search--dropdown .select2-search__field { background-color: var(--acc-surface-1); border-color: var(--acc-border); color: var(--acc-text); } /* ================================================================== 8. BOTÓN CONMUTADOR + UTILIDADES ================================================================== */ .acc-theme-toggle { --acc-toggle-size: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: var(--acc-toggle-size); height: var(--acc-toggle-size); padding: 0; margin: 0; border: 1px solid rgba(127, 127, 127, 0.35); border-radius: 999px; background-color: rgba(127, 127, 127, 0.12); color: inherit; /* se adapta a la barra donde lo pongas */ font: inherit; line-height: 1; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease; } .acc-theme-toggle:hover { background-color: rgba(127, 127, 127, 0.24); } .acc-theme-toggle:active { transform: scale(0.94); } .acc-theme-toggle:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; } .acc-theme-toggle svg { width: 18px; height: 18px; display: block; fill: currentColor; } /* Sin JS el botón no tiene sentido: no se muestra hasta que el JS arranque. */ .acc-theme-toggle[hidden] { display: none !important; } /* Variante con texto (pastilla) */ .acc-theme-toggle--label { width: auto; min-width: var(--acc-toggle-size); padding: 0 14px; border-radius: 999px; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; } .acc-theme-toggle__label { display: inline-block; } /* Intercambio de icono y texto según el tema (sin JS extra) */ html[data-theme="dark"] .acc-theme-toggle .acc-icon-sun, html[data-theme="dark"] .acc-theme-toggle .acc-label-light, html:not([data-theme="dark"]) .acc-theme-toggle .acc-icon-moon, html:not([data-theme="dark"]) .acc-theme-toggle .acc-label-dark { display: none; } /* Botón flotante (opcional: ACC_DM_FLOATING) */ .acc-theme-toggle--floating { --acc-toggle-size: 46px; position: fixed; right: 18px; bottom: 18px; z-index: 9999; background-color: var(--acc-surface-1); color: var(--acc-text); border-color: var(--acc-border); box-shadow: var(--acc-shadow); } .acc-theme-toggle--floating:hover { background-color: var(--acc-surface-2); } @media (max-width: 767px) { .acc-theme-toggle--floating { right: 12px; bottom: 12px; --acc-toggle-size: 42px; } } /* ---- Utilidades de tema -------------------------------------------------- */ /* Mantiene el aspecto original (claro u oscuro) en ambos temas. Úsalo en: hero sobre foto, barra azul de marca, footer oscuro, tarjetas con fondo de imagen, logotipos, iframes de terceros... */ html[data-theme="dark"] .acc-static { --bde-palette-color-1-930b3e51-72b2-4ac0-b721-afd0121fbc91: #ffffff; --bde-palette-color-1-57efcf54-8b92-471e-8adf-f5ff5600f341: #000000; --bde-palette-color-1-30e9fec3-5cdd-41fe-8ac7-bb5d50327582: #c7c8ca; --bde-body-text-color: #1a1a1a; --bde-headings-color: #0074d0; --bde-background-color: #f9fafb; --white: #ffffff; --grey-50: #f9fafb; --grey-100: #f3f4f6; --grey-200: #e5e7eb; --grey-300: #d1d5db; --grey-400: #9ca3af; --grey-450: #787e8b; --grey-500: #6b7280; --grey-600: #4b5563; --grey-700: #374151; --grey-800: #1f2937; --grey-900: #111827; color-scheme: light; } /* Fuerza el tema oscuro dentro de un bloque concreto (opcional). */ html[data-theme="light"] .acc-force-dark { --bde-body-text-color: #e6e9ef; --bde-headings-color: #9cb8ff; --white: #141a24; --grey-50: #0b0f17; --grey-100: #141a24; --grey-200: #1b2331; --grey-300: #28323f; --grey-700: #cbd3de; --grey-900: #f2f4f8; } /* Mostrar/ocultar versiones distintas de un mismo contenido (ej. dos logos). */ .acc-only-dark { display: none !important; } html[data-theme="dark"] .acc-only-dark { display: block !important; } html[data-theme="dark"] .acc-only-light { display: none !important; } /* Invertir un gráfico/logo monocromo (no usar con el logo del PMI). */ html[data-theme="dark"] .acc-invert { filter: invert(1) hue-rotate(180deg); } /* Aclarar el logotipo azul en fondo oscuro (alternativa a subir un logo claro). */ html[data-theme="dark"] .acc-logo-brighten { filter: brightness(1.7) saturate(1.05); } /* ================================================================== 9. EXCEPCIONES DEL SITIO (por ID de elemento Breakdance) ------------------------------------------------------------------ Elements cuyo diseño debe conservarse tal cual en modo oscuro porque dependen de una imagen, del azul de marca o de un color fijo. CÓMO AÑADIR MÁS: en Breakdance selecciona el elemento, mira su clase (Advanced → CSS Class, o el CSS que genera `.bde-section-XX-YYY`) y añádelo a esta lista. ================================================================== */ /* Hero de la home: sliders con foto + degradado. El texto blanco debe seguir blanco. */ html[data-theme="dark"] .bde-section-28-100, /* Barra superior de contacto del header: fondo azul de marca (#0425ECEB). */ html[data-theme="dark"] .bde-div-32-116 { --bde-palette-color-1-930b3e51-72b2-4ac0-b721-afd0121fbc91: #ffffff; --bde-palette-color-1-57efcf54-8b92-471e-8adf-f5ff5600f341: #000000; --bde-palette-color-1-30e9fec3-5cdd-41fe-8ac7-bb5d50327582: #c7c8ca; } /* Logotipo del header (azul sobre transparente): se aclara en modo oscuro. Si prefieres un logo blanco, sube un PNG claro, duplica el elemento Imagen, ponle la clase acc-only-dark al nuevo y acc-only-light al actual. */ html[data-theme="dark"] .bde-image-32-103 img { filter: brightness(1.7) saturate(1.05); } /* ================================================================== 10. DETALLES FINALES ================================================================== */ /* Transición suave al cambiar de tema (respeta "movimiento reducido"). */ @media (prefers-reduced-motion: no-preference) { html.acc-theme-ready, html.acc-theme-ready body, html.acc-theme-ready .bde-section, html.acc-theme-ready .bde-div, html.acc-theme-ready .bde-header-builder, html.acc-theme-ready .bde-footer-builder, html.acc-theme-ready .tutor-card, html.acc-theme-ready .tutor-btn, html.acc-theme-ready input, html.acc-theme-ready textarea, html.acc-theme-ready select { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } } /* Barra de desplazamiento acorde al tema */ html[data-theme="dark"] ::-webkit-scrollbar { width: 12px; height: 12px; } html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0b0f17; } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #2c3646; border: 3px solid #0b0f17; border-radius: 8px; } html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3a4557; } /* Selección de texto */ html[data-theme="dark"] ::selection { background-color: rgba(124, 151, 255, 0.35); color: #ffffff; } /* Logos e imágenes de terceros que traen fondo blanco incrustado: descomenta si algún widget externo (mapa, iframe, badge PMI) desentona. html[data-theme="dark"] .acc-white-bg-safe { background-color: #ffffff; border-radius: 6px; padding: 6px; } */