/* ═══════════════════════════════════════════════════════════════════════════ ⚠️ EL TEMA DE ESTA ESCUELA CAMBIÓ DOS VECES, Y LA SEGUNDA MANDA ═══════════════════════════════════════════════════════════════════════════ Era `#1F3A2E`, un verde bosque que inventamos nosotros. Estaba a ΔE 6,5 del verde de VITTA Retail —el par más cercano de las diez escuelas— y se movió a un oliva `#3D4A0A` para separarlo. Después el CLIENTE ENTREGÓ SU LOGOTIPO, y es AZUL MARINO Y DORADO. Las dos elecciones anteriores eran nuestras; ésta no. El tema es `#001040`, el marino del propio arte, medido a ΔE 20,1 de la escuela más cercana. ⚠️ Y CON ESO SE DA VUELTA EL ARGUMENTO CENTRAL DE ESTA HOJA. Lo que sigue más abajo defiende que el latón `#C0A062` y el tema son «vecinos de puerta» —40° contra 72° de matiz—. Con marino a 225° el latón queda COMPLEMENTARIO, a 185° de distancia. El argumento no se debilita: cambia de naturaleza. Y el número mejora. Medido: latón sobre el tema oliva 3,87:1 ✗ no llegaba a texto marino 7,36:1 ✓ holgado O sea que la tesis estética anterior justificaba una decisión que NO cumplía el umbral. Oro sobre azul —el par complementario más viejo del oficio— llega con casi el doble de contraste, y es literalmente lo que el cliente entregó. ⚠️ Los números de contraste escritos más abajo son en su mayoría del OLIVA. Antes de citar uno, vuelve a medirlo con `php tools/contraste.php`. ═══════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════ PRIMITIVAS DE MARCA — Vitta Inmobiliaria ═══════════════════════════════════════════════════════════════════════════ Este archivo es del CLIENTE. La escuela comercial de la inmobiliaria del Grupo Vitta: `vittaretail.com/inmobiliaria`. Es la SÉPTIMA de las siete escuelas de sector, y la única cuyo oficio vende algo que el cliente va a HABITAR. Eso no cambia una sola regla de este archivo —el color no sabe qué se vende debajo— pero sí explica de dónde salen los cuatro valores de abajo. ┌─ ⚠️ DE DÓNDE SALEN ESTOS COLORES ─────────────────────────────────────────┐ De `docs/SIETE-ESCUELAS.md`, sección «7 · Vitta Inmobiliaria», que es la especificación firmada. Son cinco valores y ninguno se inventó acá: #3D4A0A verde bosque el tema: la superficie profunda y la tinta #3E7C5A verde acento el acento del producto: botón, enlace, foco #C0A062 latón el realce: lo que se apoya SOBRE el verde profundo #F4F8F5 papel el fondo de la página, un blanco con verde adentro #61756B apoyo el texto secundario del diploma impreso Los otros treinta y nueve tokens son DERIVADOS, y cada uno se calculó y se midió con `tools/contraste.php` antes de escribirse. Donde hay un número en un comentario, ese número salió de la herramienta, no del ojo. └───────────────────────────────────────────────────────────────────────────┘ ┌─ ⚠️ TRES VERDES EN LA MISMA FAMILIA, Y HAY QUE PODER DISTINGUIRLOS ───────┐ Vitta tiene TRES escuelas verdes y es el riesgo real de esta paleta: que alguien abra dos instalaciones y no sepa en cuál está. Retail #0C3B36 verde azulado, tira a petróleo Salud #0E4B45 verde azulado más claro, casi turquesa oscuro Inmobiliaria #3D4A0A verde BOSQUE: amarillo adentro, nada de azul La diferencia no es de gusto: está medida en HSL, y son DOS diferencias. retail H 174° S 66 % L 13,9 % salud H 174° S 69 % L 17,5 % inmobiliaria H 153° S 30 % L 17,5 % La primera es el MATIZ: veintiún grados separan a este verde de los otros dos, y los otros dos comparten matiz exacto entre sí. Dicho de frente: el problema de parecido está entre retail y salud, no acá. Este verde es el único de los tres que camina hacia el amarillo, y por eso el latón #C0A062 se le apoya encima como si fuera de la misma familia —lo es: son vecinos de matiz, 153° contra 40°, con el verde ya inclinado hacia ese lado— mientras que sobre los otros dos verdes, que tiran a azul, el mismo latón se vería prestado. La segunda es la SATURACIÓN, y es la que se nota sin medir nada: este verde está a menos de la mitad de saturación que los otros dos. Retail y salud son verdes de laboratorio; éste es un verde apagado, de tierra. Comparte la luminancia exacta de salud —17,5 %— y aun así no se confunden, porque a esa luminancia lo que separa es cuánto color hay. La segunda separación es el REALCE, y es la que se nota a un metro de la pantalla: retail y salud realzan con verdes claros; esta escuela realza con latón y con arena. Un sidebar con una línea dorada no es ninguna de las otras dos. └───────────────────────────────────────────────────────────────────────────┘ ┌─ ⚠️ DÓNDE VA CADA COLOR SE DECIDIÓ MIDIENDO ──────────────────────────────┐ El verde de acento #3E7C5A cae justo del lado bueno del umbral y por poco: blanco sobre el acento 4,96:1 ✓ y el mínimo de texto es 4,50 el acento sobre papel blanco 4,96:1 ✓ filete de campo con foco (3,0) latón sobre el verde profundo 4,96:1 ✓ el realce del menú activo verde profundo sobre el latón 4,96:1 ✓ la tinta de la etiqueta «Nuevo» ⚠️ Que el acento pase por 0,46 puntos tiene una consecuencia que hay que decir en voz alta: **este verde no se puede aclarar**. Subirlo medio tono para que «se vea más vivo» rompe el botón primario de toda la plataforma, y lo rompe en silencio, porque un botón con texto blanco al 4,2:1 se sigue viendo bien en el monitor de quien lo cambió. ⚠️ Y una segunda consecuencia, en el tema OSCURO: el acento NO se aclara, a diferencia de lo que hace `marca-snacks.css` con su morado. Está medido y la ventana es angosta: para sostener blanco encima la luminancia tiene que estar ≤ 0,1833 para separarse de la superficie oscura con 3:1 la luminancia tiene que estar ≥ 0,1434 O sea que el acento oscuro vive en una franja de cuatro centésimas, y #3E7C5A mide 0,1618 — prácticamente el centro de esa franja. Aclararlo lo saca por arriba y oscurecerlo lo saca por abajo. Por eso `--m-acento` es UN valor y no un `light-dark()`: no es un olvido, es que no hay a dónde moverlo. └───────────────────────────────────────────────────────────────────────────┘ ┌─ ⚠️ ESTA PALETA ENTRA SIN NINGUNA TOLERANCIA PROPIA ──────────────────────┐ `tools/contraste.php` lo dice en su lista de deuda: «una paleta nueva entra sin tolerancias y tiene que pasar los pares o no entra». Ésta los pasa, con una sola excepción que NO es de esta paleta y que está anotada abajo. En particular `--m-borde` PASA los dos pares de filete en los dos temas —3,45:1 sobre blanco, 3,22:1 sobre el papel, 4,72:1 sobre la superficie oscura y 5,29:1 sobre el fondo oscuro—, que es la deuda más seria que arrastra la paleta de retail y que acá no se hereda. ⚠️ LOS DOS PARES QUE FALLAN NO SON DE ESTA PALETA. `--v-on-deep` sobre `--v-warn-solid` (2,95:1) y `--v-warn-fg` sobre `--v-warn-bg` (3,45:1) dan EXACTAMENTE el mismo número en las diez instalaciones, porque sus dos tokens son del PRODUCTO: el ámbar de «En curso» y el de «vencido» no los elige ninguna marca. La tolerancia de `tools/contraste.php` ya los cubre para las diez, y ese archivo no se tocó desde acá. El único token de ESTA hoja que participa en esos pares es `--m-sobre-profundo`, y no tiene salida: para llegar a 4,5:1 sobre el ámbar tendría que ser tinta oscura, y entonces desaparecería del sidebar, que es para lo que existe. Es deuda del producto, no de este verde. └───────────────────────────────────────────────────────────────────────────┘ ⚠️ La lista de nombres es CERRADA. `tools/tokens-css.php` exige que TODA instalación declare exactamente las mismas 44 primitivas. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Tipografía ─────────────────────────────────────────────────────────── La pila de la casa, y es una decisión, no un olvido. Vitta Inmobiliaria no entregó tipografía. Ninguna de las siete escuelas de sector lo hizo: la única con familia licenciada es el concesionario, porque Louis llegó de GM Asset Central con su licencia adjunta. ⚠️ La tentación acá era fuerte y hay que nombrarla: el sector inmobiliario se dibuja con serifas —notaría, escritura, permanencia— y el proyecto aloja una. Declararla sería declarar una decisión de marca que el cliente no tomó, y además rompería la sombrilla: las siete escuelas comparten la tipografía justamente para que se lean como la misma plataforma. El día que el cliente entregue su familia con todos sus pesos, se cambia acá y en ningún otro lado. */ --m-tipo-cuerpo: 'Karla', system-ui, sans-serif; --m-tipo-titulo: 'Archivo', sans-serif; --m-tipo-logo: 'Poppins', sans-serif; /* ── Las placas del logotipo ────────────────────────────────────────────── ⚠️ ES UN AZULEJO REDONDEADO Y NO UN DISCO, Y LA FORMA TIENE MOTIVO. El emblema de esta escuela es un frontón —el techo a dos aguas— con su cuerpo debajo. Es una silueta ANGULAR, y una silueta angular dentro de un disco deja cuatro huecos de aire que el ojo lee como un error de recorte. El azulejo del 22 % acompaña la forma en vez de pelearse con ella. ⚠️ EL TAMAÑO LO DECIDIÓ LA REGLA, NO EL GUSTO. El arte ocupa más del 90 % de su lienzo, así que `tools/marca-legible.php` exige que la placa termine donde termina el arte: los tres tamaños son EXACTAMENTE los `width` de los tres `` de las vistas (46 / 76 / 132). Una placa más grande le dibujaría una segunda esquina alrededor de la que ya tiene, y eso es el halo que costó un defecto en la escuela de autos. ⚠️ EL COLOR SE MIDIÓ, Y LA PLACA CLARA QUEDÓ DESCARTADA POR NÚMERO. El emblema es CREMA sobre transparencia, así que la placa tiene que ser oscura. `tools/marca-legible.php` midió el contorno sobre los candidatos —la tabla completa está en `public/img/marca/inmobiliaria/LEEME.md`— y las dos placas claras se caen solas: sobre el papel de la marca el contorno da 1,05:1 con el 100 % fundido, y sobre el latón 2,22:1, también al 100 %. Entre las oscuras ganó `#343F00`, un escalón por debajo del verde de marca: 10,08:1 de contorno contra 9,12:1 del verde de marca, con 0,0 % fundido en las dos. ⚠️ Y LA CONSECUENCIA, DICHA EN VOZ ALTA: LA PLACA CASI NO SE VE. Da 1,15:1 contra el sidebar claro y 1,11:1 contra el oscuro, o sea por debajo del piso de 1,2 con el que este proyecto separa «un tono más» de «el mismo color con otro nombre». Y no hay salida: las tres superficies donde se dibuja la marca —sidebar, panel de ingreso y splash— son `--m-profundo`, así que cualquier placa que se despegara del sidebar claro se fundiría con el oscuro. Se probó: la más oscura que llega a 1,2 en claro se queda en 1,18 en oscuro, y además parece un agujero recortado en el menú. Que casi no se vea NO la vuelve inútil, y este es el argumento entero: la placa es lo que garantiza el SUSTRATO. Sin ella, en la pantalla de ingreso el emblema crema aterrizaría directamente sobre `ingreso.jpg`, que es un plano con líneas de latón, y ahí el contorno no lo mide nadie. Con placa, el número está: 10,08:1, siempre, en las tres pantallas. */ --m-marca-tamano: 46px; --m-marca-tamano-ingreso: 76px; --m-marca-tamano-splash: 132px; /* 22 % del lado: un azulejo, no un círculo. Ver arriba. */ --m-marca-radio: 22%; --m-marca-aislamiento: 0; --m-marca-placa: #111111; /* ── La superficie profunda ─────────────────────────────────────────────── El verde bosque de la especificación, sin tocar, en la rama clara. La rama oscura lo baja un escalón: un verde pensado para contrastar contra una página clara se ve lavado cuando la página ya es oscura. */ --m-profundo: light-dark(#001040, #000027); /* El segundo tono: el fondo del menú activo. 1,51:1 sobre el sidebar en tema claro y 1,37:1 en oscuro — por encima del piso de 1,2 que separa «un tono más» de «el mismo color con otro nombre». */ --m-profundo-2: light-dark(#0C266F, #12296E); /* Separadores y pistas de barra sobre el fondo profundo. */ --m-linea-profunda: #0E3A92; /* Lo que se escribe encima del fondo profundo. 12,33:1 en claro, 15,66:1 en oscuro. */ --m-sobre-profundo: #FFFFFF; /* = verde profundo + blanco 78 %, corrido hacia el verde para que no quede gris. 8,26:1 sobre el sidebar claro y 10,49:1 sobre el oscuro. */ --m-sobre-profundo-suave: #DDE3F2; /* Texto de apoyo cuando cae sobre el fondo profundo: los enlaces del menú, el cargo en el pie del sidebar, la leyenda de la barra de nivel. ⚠️ NO vale lo mismo que `--m-apagado`, y ésa es la diferencia con la paleta de retail. En VITTA los dos roles comparten gris y por eso el par `--v-muted-on-deep` sobre `--v-deep` está en `DESCUBIERTOS` con 3,81:1: ningún color llega a 4,5:1 contra papel blanco y contra una superficie saturada a la vez. Acá son dos colores distintos y el par da 5,89:1. */ --m-apagado-profundo: #B8C2DE; /* ── El acento ──────────────────────────────────────────────────────────── El verde de la especificación, y el mismo valor en los dos temas. 4,96:1 con blanco encima, que es lo que necesita el botón primario, y 4,96:1 sobre papel blanco, que es lo que necesita el filete de un campo con foco. Pasa los dos por 0,46 puntos: ver el bloque de arriba sobre por qué este verde no se aclara ni en claro ni en oscuro. */ --m-acento: light-dark(#1B3A78, #4A72C4); /* Disco de iniciales y estados certificados: el verde bajado. Blanco encima da 7,21:1 en claro y 5,25:1 en oscuro. La rama oscura sube en vez de bajar porque acá el disco tiene que separarse de una superficie casi negra. */ --m-acento-fuerte: light-dark(#153264, #2A4E96); /* Hover de enlaces. */ --m-acento-hover: light-dark(#153264, #3E64B4); /* ── Y ACÁ VA EL LATÓN ──────────────────────────────────────────────────── El acento cuando aterriza SOBRE la superficie profunda: el filete del menú activo, la regla del logotipo, la etiqueta «Nuevo», el relleno de la barra de nivel. Es el único sustrato de la plataforma donde el latón rinde: 4,96:1 sobre el verde profundo, contra 2,49:1 sobre papel blanco, donde no llegaría ni a filete —el mínimo no textual es 3,0—. Por eso NO es `--m-acento` —que aterriza sobre papel— sino `--m-acento-profundo`. Y la tinta que va encima del latón es el verde profundo, no blanco: 4,96:1 contra 2,49:1. Es el par que en retail y en Cars está en deuda —blanco sobre un acento saturado— y que acá se resuelve dando vuelta la tinta, que es exactamente para lo que estos dos tokens tienen nombre propio. */ --m-acento-profundo: #C0A062; --m-sobre-acento-profundo: #001040; /* La chispa: el latón subido hasta arena de plano. El renglón chico del lockup, la barra del splash y el arco alrededor del disco. Siempre sobre fondo profundo, donde da 8,14:1 en claro y 10,33:1 en oscuro. Es el latón y no otro color porque el realce de esta marca es uno solo; lo que cambia es cuánta luz tiene. El latón sostiene tinta oscura encima; la arena sostiene el papel del sidebar detrás. Dos trabajos, dos valores. */ --m-chispa: #E3D0A8; /* ── Tinta ──────────────────────────────────────────────────────────────── El verde bosque de la especificación es la tinta: 12,33:1 sobre blanco y 11,50:1 sobre el papel de la marca. Un negro habría sido más fácil y menos de esta marca. */ --m-tinta: light-dark(#001040, #E4E7F2); --m-tinta-2: light-dark(#4A5C53, #C0D0C7); --m-apagado: light-dark(#5F7168, #97AAA0); /* Fijo en los dos temas: es el número de una fase bloqueada y el marcador de posición de los campos. 3,26:1 sobre el relleno claro y 3,71:1 sobre el oscuro, que es el umbral de texto grande en los dos. */ --m-apagado-2: #77897F; /* ── Superficies claras ─────────────────────────────────────────────────── El fondo de la página es EL PAPEL DE LA ESPECIFICACIÓN, no un gris. Tiene verde adentro, y es lo que hace que la plataforma se lea como suya antes de que aparezca un solo acento. */ --m-fondo: light-dark(#F4F8F5, #0D1712); --m-superficie: light-dark(#FFFFFF, #15231C); /* ⚠️ Un solo valor para los dos temas, y elegido para PASAR los dos pares de filete en los dos temas: 3,45:1 sobre blanco, 3,22:1 sobre el papel, 4,72:1 sobre la superficie oscura y 5,29:1 sobre el fondo oscuro. Es la deuda más seria que arrastra la paleta de retail —«el borde de `.v-input` es lo que dice dónde empieza el campo»— y acá no se hereda. */ --m-borde: #7D8E85; --m-relleno: light-dark(#EBF2ED, #1F3129); --m-relleno-2: light-dark(#E2ECE5, #26382E); --m-relleno-3: light-dark(#E7F1EA, #1C3025); /* casilla marcada, realce suave */ --m-realce: light-dark(#E1EFE6, #1E3327); /* fila propia, lección activa, «Nuevo» */ /* ── Efectos teñidos por la marca ─────────────────────────────────────────*/ /* Los canales del verde profundo, para los velos. Van sueltos y no como color porque un velo necesita `rgba()` con una opacidad distinta en cada parada del degradado, y no se puede sacar la opacidad de un color ya armado. */ --m-profundo-canales: 0, 16, 64; /* el verde bosque de Vitta Inmobiliaria */ --m-halo: light-dark(rgba(14, 58, 146, .20), rgba(30, 74, 170, .38)); /* El latido del canje va en LATÓN y no en verde: es el único efecto de la plataforma que celebra algo, y en esta marca lo que celebra es el metal. Es un halo, no un texto: no tiene umbral que cumplir. */ --m-halo-latido: light-dark(rgba(192, 160, 98, .40), rgba(192, 160, 98, .48)); --m-sombra-media: light-dark(rgba(0, 16, 64, .12), rgba(0, 0, 0, .45)); --m-barra: light-dark(#D6DAE8, #10224F); /* ── Papel ──────────────────────────────────────────────────────────────── El diploma, el marco de la cápsula SCORM y el botón claro sobre fondo oscuro fijo. No siguen el tema: son la rama CLARA, clavada. ⚠️ `--m-papel-fondo` es el papel de la marca y `--m-papel-superficie` es blanco: un diploma se IMPRIME, y la hoja de la impresora es blanca. El papel verde queda para el fondo de la pantalla que lo muestra. ⚠️ `--m-papel-apagado` es #61756B y ESE valor no es libre: es el `apoyo` que `App\Services\PaletaDiploma` usa para el texto secundario del diploma impreso, y `DiplomaDeMarcaTest` verifica que el color esté escrito en esta hoja. Si los dos se separan, el PDF y la pantalla dejan de ser la misma marca y nadie lo nota hasta que alguien imprime. */ --m-papel-superficie: #FFFFFF; --m-papel-fondo: #F4F8F5; --m-papel-tinta: #001040; --m-papel-tinta-2: #4A5C53; --m-papel-apagado: #61756B; --m-papel-borde: #DCE6DF; --m-papel-profundo: #001040; }