/* ========================================================================== MagicBoxDesk — Preferencias de usuario Modo oscuro (claro/oscuro/automático), tamaño de texto, reducir animaciones, alto contraste. Todo por atributos en (data-theme / data-motion / data-contrast) y la variable --mbd-font-scale. No toca el contenido: solo redefine las variables de color (theme.json presets + --mbd-*). ========================================================================== */ /* --- Escala de texto accesible --- */ :root { --mbd-font-scale: 1; } html { font-size: calc(100% * var(--mbd-font-scale)); } /* -------------------------------------------------------------------------- MODO OSCURO -------------------------------------------------------------------------- */ :root[data-theme="dark"] { /* presets de theme.json (los bloques usan var(--wp--preset--color--slug)) */ --wp--preset--color--base: #10161a; --wp--preset--color--surface: #19212a; --wp--preset--color--ink: #e9efe9; --wp--preset--color--ink-soft: #c3ccc4; --wp--preset--color--muted: #93a397; --wp--preset--color--line: #29352f; --wp--preset--color--brand: #92c142; --wp--preset--color--brand-bright: #a9dd52; /* mirror de las variables propias --mbd-* */ --mbd-brand: #92c142; --mbd-bright: #a9dd52; --mbd-ink: #e9efe9; --mbd-ink-soft: #c3ccc4; --mbd-muted: #93a397; --mbd-line: #29352f; --mbd-surface: #19212a; color-scheme: dark; } /* fondo/textos base por si el tema los fija por hex y no por variable */ :root[data-theme="dark"] body, :root[data-theme="dark"] .wp-site-blocks { background-color: var(--wp--preset--color--base); color: var(--mbd-ink); } :root[data-theme="dark"] .has-base-background-color { background-color: var(--wp--preset--color--base) !important; } :root[data-theme="dark"] .has-surface-background-color { background-color: var(--wp--preset--color--surface) !important; } :root[data-theme="dark"] .has-white-background-color { background-color: var(--wp--preset--color--surface) !important; } :root[data-theme="dark"] .has-ink-color, :root[data-theme="dark"] .has-ink-soft-color { color: var(--mbd-ink) !important; } /* superficies claras "a pelo" muy habituales (tarjetas blancas) */ :root[data-theme="dark"] :is(.wp-block-group, .wp-block-column)[style*="background-color:#fff"], :root[data-theme="dark"] :is(.wp-block-group, .wp-block-column)[style*="background-color:#ffffff"], :root[data-theme="dark"] :is(.wp-block-group, .wp-block-column)[style*="background-color: #fff"] { background-color: var(--wp--preset--color--surface) !important; } :root[data-theme="dark"] hr, :root[data-theme="dark"] .wp-block-separator { border-color: var(--mbd-line); background-color: var(--mbd-line); } /* sombras menos duras en oscuro */ :root[data-theme="dark"] [class*="shadow"], :root[data-theme="dark"] .wp-block-group.is-style-mbd-card { box-shadow: 0 10px 30px rgba(0,0,0,.45); } /* la barra superior y el pie mantienen legibilidad */ :root[data-theme="dark"] header, :root[data-theme="dark"] footer { background-color: var(--wp--preset--color--surface); } /* -------------------------------------------------------------------------- REDUCIR ANIMACIONES -------------------------------------------------------------------------- */ :root[data-motion="reduce"] *, :root[data-motion="reduce"] *::before, :root[data-motion="reduce"] *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } :root[data-motion="reduce"] :is(.mbd-reveal, .mbd-reveal-up, .mbd-reveal-left, .mbd-reveal-right, .mbd-reveal-zoom) { opacity: 1 !important; transform: none !important; filter: none !important; } /* -------------------------------------------------------------------------- ALTO CONTRASTE -------------------------------------------------------------------------- */ :root[data-contrast="high"] { --mbd-muted: var(--mbd-ink); --wp--preset--color--muted: var(--wp--preset--color--ink); --mbd-line: currentColor; } :root[data-contrast="high"] a:not(.wp-element-button):not(.mbd-prefs *) { text-decoration: underline; } :root[data-contrast="high"] :focus-visible { outline-width: 4px !important; } :root[data-contrast="high"] .has-muted-color { color: var(--wp--preset--color--ink) !important; } /* -------------------------------------------------------------------------- BOTÓN Y PANEL DE PREFERENCIAS -------------------------------------------------------------------------- */ .mbd-prefs-btn { position: fixed; left: 20px; bottom: 20px; z-index: 9998; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; background: var(--mbd-brand); color: #fff; border: none; box-shadow: 0 8px 24px rgba(0,0,0,.28); transition: transform var(--mbd-t-fast, .16s), background var(--mbd-t-fast, .16s); } .mbd-prefs-btn:hover { transform: translateY(-2px) scale(1.04); } .mbd-prefs-btn svg { width: 26px; height: 26px; } .mbd-prefs-panel { position: fixed; left: 20px; bottom: 84px; z-index: 9999; width: 300px; max-width: calc(100vw - 40px); background: var(--wp--preset--color--base, #fff); color: var(--mbd-ink); border: 1px solid var(--mbd-line); border-radius: 18px; padding: 18px; box-shadow: 0 20px 50px rgba(0,0,0,.28); opacity: 0; transform: translateY(10px) scale(.98); pointer-events: none; transition: opacity .18s ease, transform .18s ease; font-family: inherit; } .mbd-prefs-panel.is-open { opacity: 1; transform: none; pointer-events: auto; } .mbd-prefs-panel h2 { font-size: 1.05rem; margin: 0 0 2px; font-weight: 700; } .mbd-prefs-group { margin-top: 16px; } .mbd-prefs-group > span.mbd-prefs-label { display: block; font-size: .82rem; font-weight: 600; color: var(--mbd-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; } .mbd-seg { display: flex; gap: 6px; background: var(--mbd-surface); padding: 4px; border-radius: 12px; } .mbd-seg button { flex: 1; border: none; background: transparent; color: var(--mbd-ink); padding: 8px 6px; border-radius: 9px; font: inherit; font-size: .86rem; cursor: pointer; transition: background var(--mbd-t-fast, .16s); } .mbd-seg button[aria-pressed="true"] { background: var(--mbd-brand); color: #fff; font-weight: 600; } .mbd-prefs-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 0; } .mbd-prefs-row span { font-size: .92rem; } .mbd-switch { position: relative; width: 46px; height: 26px; flex: none; border: none; border-radius: 999px; background: var(--mbd-line); cursor: pointer; transition: background var(--mbd-t-fast, .16s); } .mbd-switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform var(--mbd-t-fast, .16s); box-shadow: 0 1px 3px rgba(0,0,0,.3); } .mbd-switch[aria-pressed="true"] { background: var(--mbd-brand); } .mbd-switch[aria-pressed="true"]::after { transform: translateX(20px); } .mbd-prefs-close { position: absolute; top: 12px; right: 12px; border: none; background: transparent; color: var(--mbd-muted); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 4px; } @media (prefers-reduced-motion: reduce) { .mbd-prefs-btn, .mbd-prefs-panel, .mbd-seg button, .mbd-switch, .mbd-switch::after { transition: none; } } /* -------------------------------------------------------------------------- MODO OSCURO — superficies del tema hardcodeadas a claro (overrides dirigidos) -------------------------------------------------------------------------- */ :root[data-theme="dark"] .mbd-lienzo { background: linear-gradient(180deg, #0d1317 0%, #10161a 22%, #10161a 78%, #0b0f13 100%); } :root[data-theme="dark"] .mbd-lienzo::after { background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px); } /* tarjetas, pasos, FAQ, formulario, dropdowns, chips → superficie oscura */ :root[data-theme="dark"] :is( .is-style-mbd-card, .mbd-card, .mbd-step, .is-style-mbd-cards .wp-block-column, .mbd-faq, .mbd-form-wrap, .mbd-rapido__btn, .mbd-idiomas__lista, .mbd-header .wp-block-navigation__submenu-container ) { background: var(--wp--preset--color--surface) !important; border-color: var(--mbd-line); color: var(--mbd-ink); } /* campos de formulario */ :root[data-theme="dark"] :is(.mbd-field input, .mbd-field textarea, .mbd-field select) { background: #141b21 !important; border-color: var(--mbd-line); color: var(--mbd-ink); } :root[data-theme="dark"] :is(.mbd-field input:focus, .mbd-field textarea:focus, .mbd-field select:focus) { background: #19212a !important; } :root[data-theme="dark"] .mbd-mapa { background: linear-gradient(160deg, #16201a, #10161a) !important; border-color: var(--mbd-line); } :root[data-theme="dark"] .mbd-aviso--idioma { background: var(--wp--preset--color--surface) !important; } /* cabecera translúcida: tinte oscuro */ :root[data-theme="dark"] .mbd-header { background: rgba(14, 20, 24, .82) !important; } :root[data-theme="dark"] .mbd-header.is-stuck { background: rgba(14, 20, 24, .95) !important; } /* textos gris hardcodeados que quedan flojos sobre oscuro */ :root[data-theme="dark"] .mbd-mapa__aviso { color: var(--mbd-muted); } /* Secciones que usan var(--mbd-ink) como FONDO (heroes .mbd-dark, pie, botón subir): al volcar --mbd-ink a claro para el texto, su fondo se volvía claro. Se les da su propio fondo oscuro. */ :root[data-theme="dark"] .mbd-dark { background: #0c1217 !important; } :root[data-theme="dark"] .mbd-footer { background: #0a0e12 !important; } :root[data-theme="dark"] .mbd-fab .mbd-fab__top { background: var(--wp--preset--color--surface) !important; } /* rejilla de los heroes oscuros: ya es blanca translúcida, se deja */ /* Secciones CLARAS del tema (.mbd-grid-light, fondo #f4f7f1 por diseño alternante): en modo oscuro se tratan como las secciones oscuras del propio tema. */ :root[data-theme="dark"] .mbd-grid-light { background-color: #10161a !important; color: var(--mbd-ink); } :root[data-theme="dark"] .mbd-grid-light :is(h1, h2, h3, h4, h5, h6) { color: #fff; } :root[data-theme="dark"] .mbd-grid-light :is(p, li) { color: rgba(233, 239, 233, .8); } /* rejilla técnica: pasa de líneas oscuras a claras */ :root[data-theme="dark"] .mbd-grid-light::after { background-image: linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px); } /* CATCH-ALL: cualquier sección/grupo con fondo claro INLINE (#fff, #f4f7f1, #fbfdf9) se vuelca a oscuro. Cubre las secciones que fijan el color a mano en el editor. */ :root[data-theme="dark"] [style*="background-color:#ffffff"], :root[data-theme="dark"] [style*="background-color: #ffffff"], :root[data-theme="dark"] [style*="background-color:#fff"], :root[data-theme="dark"] [style*="background-color: #fff"], :root[data-theme="dark"] [style*="background-color:#f4f7f1"], :root[data-theme="dark"] [style*="background-color: #f4f7f1"], :root[data-theme="dark"] [style*="background-color:#fbfdf9"], :root[data-theme="dark"] [style*="background-color: #fbfdf9"] { background-color: #111820 !important; } /* tarjetas blancas anidadas (grupos/columnas con inline blanco) un poco más claras */ :root[data-theme="dark"] :is(.wp-block-column, .wp-block-group.is-style-mbd-card, .mbd-card)[style*="background-color:#fff"] { background-color: var(--wp--preset--color--surface) !important; } /* asegurar texto legible en cualquier sección volcada: los títulos por defecto claros */ :root[data-theme="dark"] :is(.wp-block-group, section)[style*="background-color:#ffffff"] :is(h1,h2,h3,h4,h5,h6), :root[data-theme="dark"] :is(.wp-block-group, section)[style*="background-color:#f4f7f1"] :is(h1,h2,h3,h4,h5,h6) { color: #fff; } :root[data-theme="dark"] :is(.wp-block-group, section)[style*="background-color:#ffffff"] :is(p,li), :root[data-theme="dark"] :is(.wp-block-group, section)[style*="background-color:#f4f7f1"] :is(p,li) { color: rgba(233,239,233,.82); }