/* ============================================================ NA — Colores de marca: el amarillo y el azul marino pasan a verde CMP · Agosto 2026 ============================================================ QUE PIDIO EL USUARIO (30-ago-2026, literal, en dos mensajes): 1. «quiero que los colores que sean similares o iguales a ffd100 sean sustituidos por aad142 y que pueda cambiar esto de manera sencilla desde la web». 2. «ademas el uso de azul prusia o esas tonalidades de azul que se puede estar utilizando en la web tambien quisiera cambiarlo al verde». 3. Y al plantearle el problema de legibilidad: «si las tonalidades de colores que queremos cambiar son oscuras, entonces en lugar de cambiarlas por el color lima claro, cambiarlo por este 28600a». LA REGLA, ENTONCES, ES LA LUMINOSIDAD DEL ORIGEN, NO EL USO: origen CLARO (el amarillo #FFD100) -> #aad142 origen OSCURO (el marino #002842) -> #28600a Asi se conserva la relacion figura-fondo. Los numeros que lo justifican, con el ratio de contraste WCAG 2.1 (medidos con `scripts/s21-inventario-colores.py --contraste`, no a ojo): #FFD100 sobre blanco ... 1.46:1 (era decorativo, no texto) #aad142 sobre blanco ... 1.76:1 FALLA AA (4.5) y AA grande (3.0) #002842 sobre blanco ... 15.19:1 #28600a sobre blanco ... 7.59:1 PASA AA y AAA de texto grande blanco sobre #28600a ... 7.59:1 (el contraste es simetrico: un solo numero cubre texto-sobre-fondo y fondo-con-texto-blanco) O sea: pintar de #aad142 un titular o un boton que hoy es marino lo dejaria ILEGIBLE (1.76:1). Por eso el marino va a #28600a y NO al lima. No cambies esto sin volver a calcular el contraste. ============================================================ DE DONDE VIENE EL COLOR DE VERDAD — leelo antes de tocar nada ============================================================ Ni el amarillo ni el marino son literales sueltos del CSS del tema: son dos COLORES GLOBALES del kit de Elementor 369, y todo el sitio los consume como variables. Medido en `checks/kit-369-page-settings-sesion12.json`: vamtam_accent_1 = #FFD100 (el amarillo) -> var(--e-global-color-vamtam_accent_1) vamtam_accent_2 = #002842 (el marino) -> var(--e-global-color-vamtam_accent_2) vamtam_accent_3 = #59606D (gris azulado) -> texto secundario, NO se toca Por eso la via «desde la web» que pidio el usuario NO es un panel nuevo: es *Elementor > Ajustes del sitio > Colores globales*, que ya existe, tiene selector de color y se propaga a las ~700 referencias del sitio de una vez. Este modulo NO duplica ese mecanismo y, sobre todo, NO LO PISA. ============================================================ JERARQUIA — lo mas importante del fichero, no la inviertas ============================================================ EL KIT DE ELEMENTOR ES LA FUENTE DE VERDAD DEL COLOR. `na-marca.css` es solo: tokens + valor de reserva + parches quirurgicos. Los tokens de abajo LEEN el global y llevan el verde como `fallback`: --na-marca-acento: var(--e-global-color-vamtam_accent_1, #aad142); Consecuencia buscada: el usuario cambia el color en Elementor, guarda, y el cambio se propaga solo a todo lo nuestro. Sin desplegar y sin tocar codigo, que es literalmente lo que pidio. LA TENTACION QUE HAY QUE RESISTIR. Una version anterior de este fichero traia un bloque «puente» que hacia lo contrario: `html:root { --e-global-color-…: var(--na-marca-acento) }`, con especificidad (0,1,1) para ganarle al `.elementor-kit-369` (0,1,0). Blindaba el verde contra una restauracion del kit... y de paso dejaba el selector de color de Elementor MUERTO: el usuario lo cambiaba, guardaba, y no pasaba nada. Un interruptor que no responde es peor que no tener interruptor, porque ademas nadie sabe por que. Se RETIRO a proposito. Si algun dia vuelve el amarillo, NO lo arregles subiendo la especificidad aqui: mira primero los globales del kit (ver la nota final). Que el `fallback` no se malinterprete: SOLO entra si la variable no existe (kit sin cargar, kit importado sin ese global, CSS del kit que no llega). Si el kit define el amarillo, se vera amarillo — y eso es CORRECTO: el sitio esta diciendo la verdad sobre su configuracion, y esa verdad es diagnosticable en treinta segundos. Un verde impuesto por CSS encima de un kit amarillo no lo es. ============================================================ */ /* ================================================================== TOKENS Los tokens que consume el resto de na-core. LEEN el global del kit; el verde solo es el valor de RESERVA. ------------------------------------------------------------------------ COMO SE LEE `var(--e-global-color-vamtam_accent_1, #aad142)`: el segundo argumento entra UNICAMENTE si la variable no existe — kit sin cargar, kit importado sin ese global, o CSS del kit que no llega (paso de verdad en dev: ver la memoria `dev-staging-switch-vamtam`). Si el kit define un color, MANDA EL KIT, sea el verde o sea el amarillo. Es justo lo que se quiere: el selector de color de *Elementor > Ajustes del sitio > Colores globales* tiene que seguir funcionando, porque el encargo del usuario fue «que pueda cambiar esto de manera sencilla desde la web». NO conviertas estos valores en literales sueltos ni anadas una regla que reescriba `--e-global-color-*`: eso rompe el interruptor. Ver la cabecera. */ :root { /* Verde de marca CLARO. Sustituye al amarillo #FFD100 (`vamtam_accent_1`). Uso: fondos, banners, badges, iconos decorativos, subrayados. NO usar como color de texto sobre blanco: 1.76:1, no llega a AA. */ --na-marca-acento: var(--e-global-color-vamtam_accent_1, #aad142); /* Verde de marca OSCURO. Sustituye al azul marino #002842 (`vamtam_accent_2`). Uso: texto, titulares, fondos de boton con texto blanco. 7.59:1 sobre blanco y 7.59:1 con blanco encima: pasa AA en los dos sentidos. */ --na-marca-acento-oscuro: var(--e-global-color-vamtam_accent_2, #28600a); /* Los dos de abajo NO salen de ningun global: son colores de apoyo que el kit de VamTam no tiene. Van como literales a proposito. Si el dia de manana se crean globales equivalentes, se convierten en `var(--e-global-color-…, …)` igual que los de arriba. */ /* Color de TEXTO recomendado ENCIMA de `--na-marca-acento`. Es el verde muy oscuro que ya usa el boton de NutriClub (`nutriclub-nav.css:11`), asi que no introduce un color nuevo en la paleta. Contraste medido contra #aad142: 8.11:1. Con `--na-marca-acento-oscuro` encima del lima serian 4.30:1, que pasa AA de texto normal pero por poco; para texto pequeno sobre el lima, este es el bueno. */ --na-marca-sobre-acento: #1a3005; /* Estado hover del acento claro. Es el mismo lima bajado en luminosidad, no un color nuevo: mantiene el tono y solo oscurece, que es como se comporta hoy el verde historico (#b5c234 -> #8f9a29, medido en `docs/superpowers/reference/paleta-de-marca-petio.md`). OJO: es un literal, asi que NO sigue al global. Si algun dia se cambia el acento desde Elementor a un color muy distinto, este hover hay que revisarlo a mano; no hay `color-mix()` aqui porque el soporte en los navegadores del parque de este sitio no esta medido. */ --na-marca-acento-hover: #93b834; } /* `vamtam_accent_3` (#59606D) no se toca ni se envuelve en un token. Cae dentro del radio del barrido azul (dE00 19.09 contra el azul de Prusia), pero no es un color de marca: es el gris azulado del texto secundario, 27 usos, todos de parrafo y de meta. Pintarlo de verde convertiria el cuerpo de texto en verde y no es lo que pidio nadie. */ /* ======================================================= RED DE SEGURIDAD Hex escritos a fuego, que ningun global puede alcanzar. ------------------------------------------------------------------------ Estas reglas NO pisan al kit: sustituyen literales por el TOKEN, asi que siguen obedeciendo al color global igual que todo lo demas. Son el unico caso en que este fichero pinta algo, y solo porque el valor original estaba quemado en un CSS y no habia variable de la que colgarse. Quirurgico a proposito: una sola regla por superficie MEDIDA, con el color original en el comentario. NO conviertas esto en una escopeta del tipo `[style*="#FFD100"]` ni en una lista de selectores del tema padre copiados a ojo: cada regla de aqui debe poder verificarse abriendo su fichero de origen. El inventario completo, con fichero y linea, esta en `checks/s21-colores.md` (generado por `scripts/s21-inventario-colores.py`). Resumen del codigo VIVO: en `na-core/` solo hay UNA aparicion del amarillo (la de `na-home-banner.css`, que ya consume el global y por tanto se arregla sola al cambiar el kit) y cuatro del marino. De esas cuatro, dos son de la pantalla de administracion de pedidos (`includes/admin/na-admin-orders.php`), que el visitante no ve y que se dejan como estan: repintar el admin de verde no es lo que se pidio y se perderia la convencion de color de WordPress. */ /* Controles de cantidad (`na-qty-controls.css:57`). El icono se pinta con `currentColor` sobre un gris #f4f6f4, y hoy va en marino #14304b (dE00 2.53 contra el azul de Prusia: es el mismo color a efectos practicos). El selector se copia EXACTO del modulo original — `.na-qty > button.na-qty__btn` con `!important` — porque ahi el `!important` no es cosmetico: le esta ganando a `.elementor-kit-369 button`, que estila todos los botones. Sin repetirlo, esta regla pierde. Contraste del verde oscuro sobre ese gris: 6.99:1. */ .na-qty > button.na-qty__btn { color: var(--na-marca-acento-oscuro) !important; } /* Sombra de los banners semanales (`na-home-banner.css`, `rgba(0,40,66,.18)`). Es literalmente #002842 al 18%, o sea el marino del kit convertido en sombra. Se deja INTENCIONADAMENTE SIN TOCAR: una sombra al 18% de opacidad no se lee como «color azul de la web», se lee como profundidad, y tenirla de verde daria un halo verdoso bajo cada banner. Queda anotado aqui para que nadie lo «arregle» pensando que se paso por alto. Fichero de otro modulo, ademas. */ /* ------------------------------------------------------------------------ NOTA PARA QUIEN VENGA DESPUES ------------------------------------------------------------------------ Si tras el switch aparece amarillo o azul marino en alguna pantalla, el orden de sospecha, de mas probable a menos, es: 1. el color esta guardado a pelo dentro del widget en `_elementor_data` (no usa el global) -> se arregla en la BD, ver `checks/s21-colores.md`; 2. viene del CSS del Personalizador (`wp_get_custom_css`) -> ahi tambien; 3. es un PNG/SVG de la mediateca con el amarillo dentro -> hay que reexportar la imagen, ningun CSS lo arregla; 4. es un glifo del icon-font `theme-icons` pintado con el global -> entonces el problema NO esta en este CSS: revisa que el CSS del kit se este sirviendo (caja de red del navegador, no «deberia»). Y ANTES DE LOS CUATRO, LO PRIMERO: mira los COLORES GLOBALES DEL KIT en *Elementor > Ajustes del sitio > Colores globales*. Si `vamtam_accent_1` o `vamtam_accent_2` han vuelto a su valor de fabrica (#FFD100 / #002842), porque se restauro un backup o se reimporto el demo de VamTam, el sitio se vera amarillo y azul y ESTE FICHERO NO LO VA A TAPAR — a proposito. Se corrige poniendo otra vez el verde en esos dos selectores de color, que es un minuto, y no subiendo la especificidad aqui. Comparar contra `checks/kit-369-page-settings-sesion12.json`. ------------------------------------------------------------------------ */