/** * Tokens de tema globales del ecosistema CUME. * * Define la paleta de marca y las superficies en modo claro (`:root`) y su * variante en modo oscuro (`[data-cume-theme="dark"]`). Todos los plugins * y widgets CUME consumen estos tokens `--cume-*`, de modo que un único * interruptor de tema recolorea todo el sitio de forma consistente. * * Identidad CUME (§13.1 del plan): morado #26214f, amarillo #ffa800, * fondo #f0f0f2. En modo oscuro el morado se aclara para mantener contraste * sobre superficies negras. * * El cambio de tema se anima suavemente salvo que el usuario haya pedido * reducir el movimiento. */ :root { /* --- Marca --- */ --cume-primary: #26214f; /* Morado institucional */ --cume-primary-strong: #1a1636; --cume-primary-soft: #4a4483; --cume-accent: #ffa800; /* Amarillo/dorado */ --cume-accent-strong: #e59700; --cume-accent-soft: #ffc451; /* --- Superficies (modo claro) --- */ --cume-bg: #f0f0f2; /* Fondo general de página */ --cume-surface: #ffffff; /* Tarjetas y paneles */ --cume-surface-2: #f6f6f8; /* Superficie alterna / hover suave */ --cume-border: #e6e6ec; --cume-border-strong: #d6d6de; /* --- Texto --- */ --cume-text: #26214f; /* Cuerpo (morado casi negro) */ --cume-text-muted: #5b5b6e; /* Secundario */ --cume-heading: #26214f; /* Títulos */ /* --- Sombra / elevación --- */ --cume-shadow-sm: 0 2px 8px rgba(38, 33, 79, 0.06); --cume-shadow-md: 0 10px 30px rgba(38, 33, 79, 0.10); --cume-shadow-lg: 0 22px 48px rgba(38, 33, 79, 0.16); /* --- Curva y duración de transición de tema --- */ --cume-theme-transition: 320ms ease; } [data-cume-theme="dark"] { /* En oscuro el morado se aclara (lavanda) para leerse sobre negro. */ --cume-primary: #a99ff0; --cume-primary-strong: #c4bcff; --cume-primary-soft: #6f66b8; --cume-accent: #ffb733; --cume-accent-strong: #ffa800; --cume-accent-soft: #ffca66; --cume-bg: #0b0b10; --cume-surface: #14141c; --cume-surface-2: #1c1c26; --cume-border: #2a2a37; --cume-border-strong: #3a3a4a; --cume-text: #e9e9f3; --cume-text-muted: #a2a2b8; --cume-heading: #f5f5fc; --cume-shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.45); --cume-shadow-md: 0 12px 32px rgba(0, 0, 0, 0.55); --cume-shadow-lg: 0 24px 52px rgba(0, 0, 0, 0.65); } /* ========================================================================= * DESACTIVADO (agosto 2026) — PUENTE CON LA PALETA GLOBAL DE ELEMENTOR * * Todo lo de este bloque está COMENTADO a propósito. El sitio queda como antes * de estas pruebas: los widgets CUME siguen el tema con sus tokens --cume-*, * y lo maquetado en Elementor conserva sus colores en los dos modos. * * QUÉ HACÍA * Cuando en el editor eliges un color de la PALETA GLOBAL, Elementor no escribe * el hex: escribe var(--e-global-color-xxx). Redefiniendo esas variables se * podía recolorear todo el sitio con el interruptor, sin tocar página a página. * * POR QUÉ SE DESACTIVA * En esta paleta un mismo color cumple DOS roles: el blanco es fondo de tarjeta * y también color del título del hero; el negro es fondo de sección y también * color de algunos titulares. Al voltearlo se acierta en un uso y se arruina el * otro: aparecieron textos negros sobre negro y blancos sobre blanco. * * La solución real no es CSS, es de paleta: hacen falta colores por ROL * (Fondo, Superficie, Texto sobre claro, Texto sobre oscuro) y repuntar los * elementos a ellos. Es una pasada de maquetación, no de código. * * DETALLE TÉCNICO A NO OLVIDAR AL RETOMARLO * Elementor declara estas variables en la clase del kit, que va en el * (.elementor-kit-6), no en :root. Las custom properties se resuelven por * PROXIMIDAD en la cadena de herencia, no por especificidad global: una * declaración en `html` NUNCA gana. Hay que declararlas en el body o en un * contenedor más cercano al elemento. * * CÓMO REACTIVARLO * Descomentar las reglas de abajo (quitar el asterisco inicial de cada línea). * La versión opt-in solo afecta a las secciones que lleven la clase * `cume-theme-auto` en Avanzado → Clases CSS adicionales, así que se puede ir * probando sección por sección sin romper el resto. * * html[data-cume-theme="dark"] .cume-theme-auto { * --e-global-color-primary: var(--cume-primary); morado a lavanda * --e-global-color-secondary: var(--cume-accent); ámbar * --e-global-color-accent: var(--cume-accent); ámbar * --e-global-color-text: var(--cume-text-muted); gris legible * * --e-global-color-1f988aa: var(--cume-primary); #26214F morado * --e-global-color-d1f174c: var(--cume-primary-soft); #6E68A8 morado medio * --e-global-color-c785c74: var(--cume-accent); #FFA800 ámbar * --e-global-color-3632cb9: var(--cume-accent-strong); #D68D00 ámbar oscuro * * --e-global-color-0a3254b: var(--cume-surface); #FFFFFF blanco * --e-global-color-f48beed: var(--cume-surface); #FFFFFF blanco * --e-global-color-6517dcc: var(--cume-surface); #F8F6F1 crema * --e-global-color-7495d5f: var(--cume-bg); #F0F0F2 fondo claro * --e-global-color-6d395fd: var(--cume-border); #E3E3E3 gris claro * --e-global-color-bf2cfa8: var(--cume-border-strong); #CECECE gris * } * * html:not([data-cume-theme="dark"]) .cume-theme-auto { * --e-global-color-f9f2957: var(--cume-bg); #0A0A0C * --e-global-color-dcd60da: var(--cume-surface); #141418 * --e-global-color-f299341: var(--cume-surface-2); #181818 * } * * Fondo y color de página. Elementor fija el fondo del body con un color fijo; * esta regla lo hacía seguir al tema. Es la de mayor alcance de todas. * * html[data-cume-theme="dark"] body { * background-color: var(--cume-bg); * color: var(--cume-text); * } * ====================================================================== */ /* Transición suave de superficies al alternar el tema. */ [data-cume-theme] body { transition: background-color var(--cume-theme-transition), color var(--cume-theme-transition); } @media (prefers-reduced-motion: reduce) { [data-cume-theme] body, [data-cume-theme] body * { transition-duration: 0.001ms !important; } }