/* ═══════════════════════════════════════════════════════════════════════════ PRIMITIVAS DE MARCA — Vitta Salud ═══════════════════════════════════════════════════════════════════════════ La escuela comercial de las droguerías del Grupo Vitta: `vittaretail.com/salud`. El oficio es el del auxiliar de farmacia y el método comercial es CUIDA. ┌─ ⚠️ ESTA ESCUELA NO ES UNA MÁS DE LAS SIETE ──────────────────────────────┐ Es la única donde una venta mal hecha puede dañar la salud de alguien. Eso no cambia un solo número de esta hoja —el contraste no sabe de qué se vende—, pero sí cambia lo que la hoja tiene que sostener: una pantalla donde se lee «esto es una bandera roja, no vendas, deriva» tiene que leerse SIEMPRE, incluso con luz de mostrador encima y en el teléfono de alguien que está de turno. Por eso acá no hay ni una tolerancia de contraste propia. └───────────────────────────────────────────────────────────────────────────┘ ┌─ DE DÓNDE SALEN ESTOS COLORES ────────────────────────────────────────────┐ De la ficha de la escuela en `docs/SIETE-ESCUELAS.md` §4, que es la declaración, y de `tools/siete-escuelas.php`, clave `salud`, que es la misma declaración en código: #005127 tema verde azulado profundo, el sidebar y la superficie #12726A acento acciones, enlaces, foco #7ED0C4 realce el acento CUANDO cae sobre la superficie profunda #F2FAF8 papel el fondo de la página #54706C apoyo el texto secundario y el pie del diploma Cinco valores. Los otros treinta y nueve tokens de esta hoja son DERIVADOS, y cada uno está medido acá abajo. Ninguno introduce una familia nueva: son pasos del mismo verde azulado, mezclas contra blanco o contra el profundo. └───────────────────────────────────────────────────────────────────────────┘ ┌─ ⚠️⚠️ ESTA PALETA SE PARECÍA A LA DE RETAIL, Y EL TEMA SE MOVIÓ ──────────┐ Vitta Salud era `#005127`. Contra VITTA Retail `#0C3B36`: RETAIL SALUD (antes) matiz 173,6° 174,1° ← MEDIO GRADO de distancia saturación 66,2 % 68,5 % luz 13,9 % 17,5 % blanco encima 12,39:1 9,95:1 ΔE76 a Retail — 7,3 ← el número que importa Era **el mismo matiz**: no dos familias cercanas, sino el mismo verde azulado con dos luces. La única diferencia que un ojo registraba es que Salud era un escalón más clara, y eso, en un sidebar visto de a uno por vez, no lo registra nadie. La primera versión de esta hoja lo midió, lo dijo con todas las letras y buscó la separación en otro lado —en el realce, ver abajo— porque **el tema estaba fijado por la especificación**. Esa restricción se levantó: la especificación era nuestra, no del cliente, y una escuela nueva no puede nacer con la identidad de la que está en producción. RETAIL SALUD (hoy) tema #0C3B36 #005127 matiz 173,6° 148,9° ← casi 25 grados saturación 66,2 % 100,0 % luz 13,9 % 15,9 % blanco encima 12,39:1 9,52:1 ΔE76 a Retail — 26,8 El verde nuevo es un verde VERDADERO, no un verde azulado — que además le queda mejor a una escuela de droguerías que el agua de Retail. El mínimo que exige `tools/marcas-distinguibles.php` es ΔE 20. ⚠️ Lo de abajo NO se deshizo, y sigue siendo cierto: el realce sigue haciendo trabajo de separación, sólo que ahora acompaña al tema en vez de suplirlo. Se mantiene la medición original de los dos colores que se ven al lado del tema todo el tiempo: RETAIL SALUD distancia de matiz acento #14A07A #12726A 163,7° → 175,0° = 11,3° realce / chispa #8ACE2A #7ED0C4 84,9° → 171,2° = 86,3° El realce es el que hace el trabajo. `#8ACE2A` es un verde LIMA amarillento y `#7ED0C4` es un AGUA fría: **86,3° de distancia de matiz**, contra el medio grado que separa los dos temas. Y es el color del filete del menú activo, del relleno de la barra de nivel y de la etiqueta «Nuevo»: los tres elementos que están encima del sidebar mientras alguien lo mira. El acento aporta menos —11,3° de matiz— pero aporta luz: el de retail vive en 35,3 % de luz y el de esta escuela en 25,9 %. Un botón primario de Retail es un verde que salta; el de Salud es un verde que se queda quieto, que es lo que corresponde a un mostrador de farmacia. El resultado práctico: las dos escuelas se distinguen por lo que BRILLA encima del verde, no por el verde. Está dicho con todas las letras en `docs/brandbook-salud.md`, sección «Por qué este verde no es el de Retail». └───────────────────────────────────────────────────────────────────────────┘ ┌─ ⚠️ EL TEMA MÁS CLARO DE LOS SIETE, Y ESO TIENE UNA CONSECUENCIA ────────┐ `docs/SIETE-ESCUELAS.md` exige que los siete temas sean OSCUROS, porque la pantalla sin conexión y el sidebar asumen texto blanco encima. `#005127` es el más claro de los siete y da **9,95:1** con blanco: pasa el 4,5:1 de texto con más del doble de margen, así que la exigencia se cumple. Pero el margen no sobra en todos lados. Sobre este verde, un acento que en Retail rendía deja de rendir: `#12726A` sobre `#005127` da **1,71:1** y desaparece. Por eso el acento que aterriza sobre la superficie profunda NO es el acento del papel sino el realce (`--m-acento-profundo`), y el número que lo decidió está en su propio bloque más abajo. └───────────────────────────────────────────────────────────────────────────┘ ┌─ ESTA PALETA ENTRA SIN NINGUNA TOLERANCIA PROPIA ─────────────────────────┐ `tools/contraste.php` lo dice: «una paleta nueva entra sin tolerancias y tiene que pasar los pares o no entra». Las únicas dos líneas donde esta escuela necesita aparecer en `TOLERADOS` son las que YA estaban marcadas como deuda DEL PRODUCTO y que dan el mismo número en las diez instalaciones, porque sus dos tokens son del producto: `--v-on-deep` sobre `--v-warn-solid` 2,95:1 el ámbar de «En curso» `--v-warn-fg` sobre `--v-warn-bg` 3,45:1 el ámbar de «vencido» Las dos ya están declaradas en `TOLERADOS` para las diez instalaciones, con el motivo escrito: sus dos tokens son de `vitta.css`, valen lo mismo en todas las escuelas y por lo tanto el número también. No hay ni una tolerancia causada por este verde. En particular, `--m-borde` PASA los cuatro pares de filete en los dos temas, que es la deuda más seria que arrastra la paleta de retail. └───────────────────────────────────────────────────────────────────────────┘ ⚠️ La lista de nombres es CERRADA: 44 primitivas, ni una más ni una menos. `tools/tokens-css.php` exige que TODA instalación declare exactamente las mismas. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Tipografía ─────────────────────────────────────────────────────────── La pila de la casa, y es una decisión, no un olvido. Vitta Salud no trae tipografía licenciada. `Paleta::PALETAS['salud']` declara `'tipografia' => null`, que no es un pendiente: significa que la escuela usa la del producto. La única instalación con una familia propia es el concesionario, porque Louis llegó de GM Asset Central con su licencia. ⚠️ Declarar acá una display «clínica» que nadie entregó repetiría el defecto que ya costó caro en Cars: el navegador no falla cuando la fuente no existe —sintetiza—, y «se ve un poco raro» no lo reporta nadie. */ --m-tipo-cuerpo: 'Karla', system-ui, sans-serif; --m-tipo-titulo: 'Archivo', sans-serif; --m-tipo-logo: 'Poppins', sans-serif; /* ── Las placas del emblema ─────────────────────────────────────────────── ⚠️ UN DISCO, Y EL EMBLEMA NO PUEDE PARECER UNA CRUZ. La cruz verde de farmacia está regulada en varios países y la cruz roja es marca protegida por convenio internacional. Un emblema que se parezca a cualquiera de las dos no es un problema de gusto: es un problema legal, y además dice algo falso —esta plataforma no es un establecimiento farmacéutico ni una autoridad sanitaria, es una escuela comercial—. Por eso `icono.png` es un MONOGRAMA: la V de Vitta, y su trazo derecho sigue en una línea de pulso. Sin cruz, sin serpiente, sin copa, sin caduceo. Ver `public/img/marca/salud/LEEME.md`. ⚠️ EL COLOR DE LA PLACA LO DIJO LA MEDICIÓN. `tools/marca-legible.php` mide el contorno del emblema contra su placa. Los candidatos, con el arte en blanco: #005127 el tema 9,95:1 ← la elegida #12726A el acento 5,77:1 #FFFFFF placa blanca 1,00:1 ✗ el arte es blanco: desaparece Se descartó la placa blanca de VITTA y de Cars por dos motivos, y el primero es de medición: con el arte en blanco no hay contorno que medir. El segundo es de marca: retail YA usa placa blanca, y dos escuelas de matiz casi idéntico con la misma placa son dos escuelas que se confunden en la pestaña del navegador. Consecuencia, dicha en voz alta: sobre el sidebar —que ES `#005127`— la placa no se ve y el monograma queda flotando. NO es un descuido: es el mismo 9,95:1 el que dice que ahí se lee igual de bien. Donde la placa sí se ve es en el panel blanco del ingreso y en el splash, que es donde hace falta que exista. Los tres tamaños son EXACTAMENTE los `width` de los tres `` (46 / 76 / 132). El arte ocupa menos del 90 % de su lienzo —trae su aire adentro— así que `tools/marca-legible.php` no exige ajustar la placa; se igualan igual, porque una placa más grande que la imagen le dibuja una segunda circunferencia alrededor de la que ya tiene. Eso es el halo, y ya costó una corrección en Cars. */ --m-marca-tamano: 46px; --m-marca-tamano-ingreso: 76px; --m-marca-tamano-splash: 132px; --m-marca-radio: 50%; --m-marca-aislamiento: 0; --m-marca-placa: #111111; /* ── La superficie profunda ─────────────────────────────────────────────── El verde azulado de la escuela, 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(#005127, #003518); /* El segundo tono: el fondo del menú activo. 1,42:1 sobre el sidebar en tema claro y 1,27: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(#066B32, #014820); /* Separadores y pistas de barra sobre el fondo profundo. */ --m-linea-profunda: #088742; /* Lo que se escribe encima del fondo profundo. 9,95:1 en claro, 14,42:1 en oscuro. */ --m-sobre-profundo: #FFFFFF; /* = el profundo + blanco 78 %, redondeado a un valor que conserva el matiz. 7,22:1 sobre el sidebar claro y 10,39:1 sobre el oscuro. */ --m-sobre-profundo-suave: #CCE5D0; /* 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,34:1 en claro y 7,68:1 en oscuro. = el profundo + blanco 62 %. */ --m-apagado-profundo: #A6CAAD; /* ── El acento ──────────────────────────────────────────────────────────── El verde azulado medio de la especificación. 5,77:1 con blanco encima sobre papel, que es lo que un botón primario necesita. ⚠️ La rama oscura NO es el mismo valor aclarado a ojo: es el verde más claro que TODAVÍA sostiene blanco encima. Sobre una superficie casi negra el acento tiene que separarse del fondo (3,14:1) sin dejar de sostener el blanco de su propio botón (4,85:1), y esas dos exigencias tiran para lados opuestos. `#177F76` es donde se cruzan; medio escalón más claro —`#1A8B80`, que es el que la intuición pide— da 4,16:1 con blanco y ya no pasa. */ --m-acento: light-dark(#12726A, #177F76); /* Disco de iniciales y estados certificados: el acento bajado. 8,65:1 con blanco en claro y 5,54:1 en oscuro. */ --m-acento-fuerte: light-dark(#0B554F, #14655C); /* Hover de enlaces: el acento subido. */ --m-acento-hover: light-dark(#178F84, #3FA79A); /* ── Y ACÁ VA EL REALCE ─────────────────────────────────────────────────── 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. ⚠️ NO es `--m-acento`, y el número lo explica solo: `#12726A` sobre `#005127` da **1,71:1**, o sea que el filete del menú activo sería invisible. El realce `#7ED0C4` da **5,55:1** sobre el sidebar claro y 7,98:1 sobre el oscuro. Es exactamente el mismo mecanismo que en VittaSnacks resuelve el naranja, y para eso estos dos tokens tienen nombre propio. Y la tinta que va encima del realce es el verde profundo, no blanco: 5,55:1 contra 1,79: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. */ --m-acento-profundo: #7ED0C4; --m-sobre-acento-profundo: #005127; /* La chispa: el renglón chico del lockup —«SALUD» debajo de «VITTA»—, la barra del splash y el arco alrededor del disco. ⚠️ ES EL MISMO VALOR QUE `--m-acento-profundo`, A PROPÓSITO. La especificación de esta escuela declara CINCO colores y ninguno es un segundo realce. Inventar un sexto para no repetir un valor pondría en la interfaz un color que nadie aprobó, que es peor que la repetición: el precedente está en `marca-vitta.css`, donde `--m-acento` y `--m-acento-profundo` también valen lo mismo. Los dos tokens siguen existiendo separados porque son dos ROLES distintos —uno es un filete y el otro es texto— y el día que la escuela entregue su brandbook definitivo van a poder separarse sin tocar una regla. Como texto sobre el sidebar da 5,55:1, por encima del 4,5:1 que se le exige. */ --m-chispa: #7ED0C4; /* ── Tinta ──────────────────────────────────────────────────────────────── El verde azulado casi negro es la tinta: 11,65:1 sobre el papel de la marca y 12,36:1 sobre blanco. Un negro habría sido más fácil y menos de esta escuela. */ --m-tinta: light-dark(#044021, #E9F8EA); --m-tinta-2: light-dark(#3E5B57, #B9D2CD); /* ⚠️ Éste ES `#54706C`, el «apoyo» de la especificación, sin redondear: es el mismo color que `PaletaDiploma::salud['apoyo']` imprime en el pie del diploma, y `DiplomaDeMarcaTest` comprueba que los dos lados no se separen. 5,06:1 sobre el papel de la marca y 5,37:1 sobre blanco. */ --m-apagado: light-dark(#54706C, #92AEA9); /* Fijo en los dos temas: es el número de una fase bloqueada y el marcador de posición de los campos. 3,11:1 sobre el relleno claro y 3,78:1 sobre el oscuro, contra un piso de 3:1. ⚠️ El primer candidato fue `#7E9A95` —el gris verdoso que la intuición pide— y `tools/contraste.php` lo rechazó con 2,61:1 sobre el relleno claro. Está anotado porque es el único valor de esta hoja que hubo que corregir DESPUÉS de medir, y porque el rol engaña: parece decorativo —el número de una fase bloqueada está apagado a propósito— pero el mismo token pinta `.v-input::placeholder`, y un marcador de posición no está exento. */ --m-apagado-2: #6E8D88; /* ── Superficies claras ─────────────────────────────────────────────────── El fondo de la página es EL PAPEL DE LA ESPECIFICACIÓN, no un gris. Es un blanco con una gota del verde adentro, que es lo que hace que la plataforma se lea como de esta escuela antes de que aparezca un solo botón. */ --m-fondo: light-dark(#F2FAF8, #08201D); --m-superficie: light-dark(#FFFFFF, #0F2A27); /* ⚠️ Un solo valor para los dos temas, y elegido para PASAR los cuatro pares de filete: 3,41:1 sobre blanco, 3,22:1 sobre el papel, 4,46:1 sobre la superficie oscura y 4,99: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. En una droguería eso importa un poco más que en otra escuela: el campo que alguien no ve es el campo que alguien deja vacío. */ --m-borde: #73918C; --m-relleno: light-dark(#E4F1EE, #14332E); --m-relleno-2: light-dark(#DFEEEB, #173933); --m-relleno-3: light-dark(#E9F6F3, #113029); /* casilla marcada, realce suave */ --m-realce: light-dark(#DFF2ED, #103A32); /* 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, 81, 39; /* el verde azulado de Vitta Salud */ --m-halo: light-dark(rgba(6, 122, 60, .20), rgba(10, 135, 66, .35)); /* El latido del canje va en el REALCE y no en el acento: es el único efecto de la plataforma que celebra algo, y el agua es lo que esta escuela usa para destacar. Es un halo, no un texto: no tiene umbral que cumplir. */ --m-halo-latido: light-dark(rgba(126, 208, 196, .42), rgba(126, 208, 196, .50)); --m-sombra-media: light-dark(rgba(0, 81, 39, .12), rgba(0, 0, 0, .45)); --m-barra: light-dark(#C8E1CA, #284A2C); /* ── 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 teñido queda para el fondo de la pantalla que lo muestra. ⚠️ `--m-papel-tinta`, `--m-papel-apagado` y el acento de arriba son los tres colores que `PaletaDiploma::salud` imprime. Están escritos con el mismo valor a los dos lados a propósito, y `DiplomaDeMarcaTest` lo verifica: un diploma que se separa de la pantalla es lo primero que delata un papel copiado de otra escuela. */ --m-papel-superficie: #FFFFFF; --m-papel-fondo: #F2FAF8; --m-papel-tinta: #005127; --m-papel-tinta-2: #3E5B57; --m-papel-apagado: #54706C; --m-papel-borde: #D6E6E2; --m-papel-profundo: #005127; }