/* ============================================================================= PALETA DE MARCA LUMA — fuente única para todo el producto ----------------------------------------------------------------------------- Se carga DESPUÉS de `styles.css` y solo reasigna tokens; no reescribe ni una regla del template. Para revertir: quitar los dos que lo incluyen. POR QUÉ SE REDECLARAN TAMBIÉN LOS DERIVADOS Una custom property se resuelve donde se DECLARA, no donde se usa. El template define `--primary-color: rgb(var(--primary-rgb))` dentro de su `:root`, así que cambiar solo `--primary-rgb` deja intactas las 374 reglas que consumen `var(--primary-color)` — cambiarían apenas las 22 que usan el RGB directo. Por eso acá se reasignan los 20 tokens completos. EL REPARTO Primario = la tinta del logotipo. Superficies de peso: héroe, paneles, banners, acción principal. Negro sobre blanco, como la marca. Acento = índigo. Todo lo que debe leerse como accionable o destacado. Luminoso = cian. El segundo acento, el que hace que «Luma» sea luz. LO QUE NO TOCA Los semánticos (éxito/aviso/peligro) y la paleta de gráficas. Significan estado y están validados para daltonismo; no son colores de marca. ========================================================================== */ :root { /* ---- Escala de marca (referencia legible) ---- */ --luma-ink: #0A0A0A; --luma-paper: #FEFEFE; --luma-indigo-300: #84A6FF; --luma-indigo-400: #506EFF; --luma-indigo-500: #2E33E8; --luma-indigo-600: #2626CC; --luma-cyan-400: #22C1E5; --luma-cyan-600: #0090B0; --luma-cyan-700: #00708A; --luma-neutral-700: #3E424D; --luma-neutral-800: #242934; --luma-neutral-900: #121621; /* ---- Mapeo sobre los tokens del template ---- La tríada de la marca en orden: tinta, índigo, cian. */ --primary-rgb: 10, 10, 10; /* tinta · blanco 19.80:1 */ --primary-tint1-rgb: 46, 51, 232; /* índigo · blanco 7.62:1 */ --primary-tint2-rgb: 0, 112, 138; /* cian · blanco 5.70:1 */ --primary-tint3-rgb: 34, 193, 229; /* cian claro, para realces */ --secondary-rgb: 46, 51, 232; /* el acento también es el secundario */ /* ---- Derivados: obligatorio redeclararlos (ver cabecera) ---- */ --primary-color: rgb(var(--primary-rgb)); --primary-border: rgb(var(--primary-rgb)); --primary-tint1-color: rgb(var(--primary-tint1-rgb)); --primary-tint2-color: rgb(var(--primary-tint2-rgb)); --primary-tint3-color: rgb(var(--primary-tint3-rgb)); --primary005: rgba(var(--primary-rgb), 0.05); --primary01: rgba(var(--primary-rgb), 0.1); --primary02: rgba(var(--primary-rgb), 0.2); --primary03: rgba(var(--primary-rgb), 0.3); --primary04: rgba(var(--primary-rgb), 0.4); --primary05: rgba(var(--primary-rgb), 0.5); --primary06: rgba(var(--primary-rgb), 0.6); --primary07: rgba(var(--primary-rgb), 0.7); --primary08: rgba(var(--primary-rgb), 0.8); --primary09: rgba(var(--primary-rgb), 0.9); } /* ----------------------------------------------------------------------------- TEMA OSCURO La superficie sigue en tinta —los paneles y el héroe están hechos para sostener texto blanco—, y lo que se invierte es la acción principal: papel con tinta, que es el patrón correcto sobre fondo oscuro. Los acentos suben un paso para despegarse del fondo. -------------------------------------------------------------------------- */ [data-theme-mode="dark"] { --primary-rgb: 10, 10, 10; --primary-tint1-rgb: 80, 110, 255; /* índigo 400 · fondo oscuro 4.19:1 */ --primary-tint2-rgb: 0, 144, 176; /* cian 600 · fondo oscuro 4.69:1 */ --primary-tint3-rgb: 105, 216, 248; --secondary-rgb: 80, 110, 255; --primary-color: rgb(var(--primary-rgb)); --primary-border: rgb(var(--primary-rgb)); --primary-tint1-color: rgb(var(--primary-tint1-rgb)); --primary-tint2-color: rgb(var(--primary-tint2-rgb)); --primary-tint3-color: rgb(var(--primary-tint3-rgb)); --primary005: rgba(var(--primary-rgb), 0.05); --primary01: rgba(var(--primary-rgb), 0.1); --primary02: rgba(var(--primary-rgb), 0.2); --primary03: rgba(var(--primary-rgb), 0.3); --primary04: rgba(var(--primary-rgb), 0.4); --primary05: rgba(var(--primary-rgb), 0.5); --primary06: rgba(var(--primary-rgb), 0.6); --primary07: rgba(var(--primary-rgb), 0.7); --primary08: rgba(var(--primary-rgb), 0.8); --primary09: rgba(var(--primary-rgb), 0.9); } /* ----------------------------------------------------------------------------- EL ACENTO NO PUEDE MORIR CON EL PRIMARIO `--primary-color` gobierna a la vez los rellenos y los textos de acento. Con el primario en tinta, cada `.text-primary` se volvería negro y el producto perdería toda señal de «esto es accionable». Se redirigen al secundario. -------------------------------------------------------------------------- */ .text-primary, a.text-primary:hover { color: rgb(var(--secondary-rgb)) !important; } .bg-primary-transparent { background-color: rgba(var(--secondary-rgb), 0.1) !important; color: rgb(var(--secondary-rgb)) !important; } .btn-primary-light { background-color: rgba(var(--secondary-rgb), 0.1); color: rgb(var(--secondary-rgb)); border-block-end-color: rgb(var(--secondary-rgb)); } /* ----------------------------------------------------------------------------- LO QUE PINTA EL PRIMARIO COMO TEXTO, EN TEMA OSCURO El bloque de arriba cubre `.text-primary` y los rellenos transparentes, pero el template pinta el primario como color de texto en varios lugares más. En claro eso es tinta sobre papel y se lee perfecto; en oscuro es tinta sobre una superficie casi negra —1.4:1— y el texto DESAPARECE. Medido sobre las dieciséis pantallas del producto, son cuatro familias: · el breadcrumb, que está en las dieciséis; · `.btn-outline-primary`, en Fondos, Gastos, Presupuesto y Resultados; · `.btn-primary-light`, en Mantenimiento y Marco Legal; · `.alert-primary`, cuyo texto heredan todos sus hijos. Van al secundario, que es el mismo destino que ya tiene `.text-primary`: si el primario es la tinta de la marca, lo accionable se lee en el acento. Solo en oscuro. En claro la tinta sobre papel da 19.8:1 y es la intención de la marca: no hay nada que arreglar ahí. -------------------------------------------------------------------------- */ [data-theme-mode="dark"] .breadcrumb .breadcrumb-item a, [data-theme-mode="dark"] .alert-primary, [data-theme-mode="dark"] .alert-primary .alert-link { color: rgb(var(--secondary-rgb)); } [data-theme-mode="dark"] .btn-outline-primary { color: rgb(var(--secondary-rgb)); border-color: rgb(var(--secondary-rgb)); } /* Al pasar el mouse el template lo rellena con el primario y pone el texto en blanco: en oscuro ese relleno es tinta sobre tinta y el botón se desvanece junto con su texto. Se rellena con el acento, que sí se despega del fondo. */ [data-theme-mode="dark"] .btn-outline-primary:hover, [data-theme-mode="dark"] .btn-outline-primary:active, [data-theme-mode="dark"] .btn-outline-primary:focus { background-color: rgb(var(--secondary-rgb)); border-color: rgb(var(--secondary-rgb)); color: #fff; } /* `.btn-primary-light` ya estaba redirigido más arriba, pero el template lo declara como `.btn.btn-primary-light` —dos clases— y le ganaba por especificidad. Con el mismo par de clases el arreglo se aplica. */ [data-theme-mode="dark"] .btn.btn-primary-light { color: rgb(var(--secondary-rgb)); } /* La quinta familia, la que no aparece en una revisión de pantallas porque hay que ABRIR el menú para verla: los ítems de los desplegables. El template pinta con el primario el ítem ACTIVO —`color: var(--primary-color) !important` sobre un relleno del mismo primario al 5%— y también cualquier ítem al pasar el mouse. En claro es tinta sobre papel. En oscuro el menú se dibuja sobre una superficie casi negra y un 5% de tinta no la aclara: el renglón queda en tinta sobre tinta y desaparece. Lo peor no es que se pierda un renglón cualquiera, sino CUÁL: el ítem activo del conmutador de PH es el que contesta «cuál estoy mirando», así que en oscuro el menú se abría sin ninguna marca de la propiedad seleccionada. Pasa igual en los desplegables de idioma y de cuenta. Acá el arreglo NO es mandar el texto al acento, que es lo que resuelve a las otras cuatro. Medido: índigo 400 sobre su propio relleno al 12% da 2.87:1 — mejor que el 1.41:1 de la tinta, y sigue sin pasar—. El acento no puede ser a la vez el fondo y el texto del mismo renglón. El reparto que sí funciona es el otro: EL ACENTO ES EL RELLENO y el texto va en blanco. 12.02:1 en el renglón elegido y 12.60:1 al pasar el mouse, con el fondo haciendo de señal de «este es» en vez de dejársela sola al color del texto. Es además lo que ya hace el template en oscuro con el ítem activo del menú lateral, así que la señal es la misma en las dos barras. En claro no se toca: tinta sobre papel al 5% da 17.84:1 y es la intención de la marca. Las variantes de color del template (`dropdown-menu-primary` y compañía) solo existen en la página de demostración de Xintra, no en el producto: no hay nada que preservar ahí. -------------------------------------------------------------------------- */ [data-theme-mode="dark"] .dropdown-item.active { background-color: rgba(var(--secondary-rgb), 0.12) !important; color: #fff !important; } [data-theme-mode="dark"] .dropdown-item:not(.active):hover, [data-theme-mode="dark"] .dropdown-item:not(.active):focus, [data-theme-mode="dark"] .dropdown-item:not(.active):active { background-color: rgba(var(--secondary-rgb), 0.08); color: #fff; } /* ----------------------------------------------------------------------------- ACCIÓN PRINCIPAL EN TEMA OSCURO: papel sobre tinta (19.63:1). El template fija `color:#fff !important` en `.btn-primary`, así que la inversión necesita la misma fuerza. -------------------------------------------------------------------------- */ [data-theme-mode="dark"] .btn-primary { background-color: var(--luma-paper) !important; border-color: var(--luma-paper) !important; color: var(--luma-ink) !important; } /* Sobre los rellenos de acento en oscuro, el número/etiqueta se lee mejor en tinta que en blanco (índigo 4.60 vs 4.19 · cian 5.16 vs 3.74). */ [data-theme-mode="dark"] .ph-step-number.bg-primary1, [data-theme-mode="dark"] .ph-step-number.bg-primary2 { color: var(--luma-ink) !important; } /* ----------------------------------------------------------------------------- EL PIE DE LA LANDING El template lo trae con un azul marino QUEMADO (#192038) —el único hex fijo de toda la zona landing, por eso no lo movía ningún token—. Al bajar la página aparecía como una franja azulada entre superficies negras. Pasa a la tinta, igual que el héroe y los banners. -------------------------------------------------------------------------- */ .landing-body .landing-footer, .landing-main-footer { background-color: var(--luma-ink); }