/* ═══════════════════════════════════════════════════════════════════════════ PRIMITIVAS DE MARCA — Vitta Telecom ═══════════════════════════════════════════════════════════════════════════ Este archivo es del CLIENTE. La escuela comercial del operador de telecomunicaciones del Grupo Vitta: `vittaretail.com/telecom`. ┌─ ⚠️ DE DÓNDE SALEN ESTOS COLORES ─────────────────────────────────────────┐ De la especificación del grupo —`docs/SIETE-ESCUELAS.md`, sección «6 · Vitta Telecom»—, que declara cuatro colores y nada más: #3C3F7B índigo profundo el tema: sidebar, splash, barra del sistema #5B47C8 índigo medio el acento: botones, enlaces, foco #00C2A8 verde azulado el realce #F5F4FD papel el fondo de la página ⚠️ NO hay brandbook entregado. Los otros cuarenta tokens de esta hoja se DERIVAN de esos cuatro, y cada derivación está medida abajo. Es lo contrario del caso de Cars —donde Louis llegó de GM Asset Central con su licencia— y del de VittaSnacks, donde el cliente entregó cinco muestras rotuladas. El día que el operador entregue su manual de marca, lo que se corrige es este archivo y ningún otro. └───────────────────────────────────────────────────────────────────────────┘ ┌─ ⚠️ ESTE ÍNDIGO NO ES EL MORADO DE VITTASNACKS ───────────────────────────┐ ⚠️ ERAN los dos temas más cercanos de las diez instalaciones, y este párrafo argumentaba —con matiz y saturación— que se distinguían igual. El argumento era honesto y estaba equivocado, y conviene dejar las dos versiones porque el error es fácil de repetir: lo que decía Telecom #2B1B54 · H 256,8° · S 51,4 % Snacks #2E0B57 · H 267,6° · S 77,6 % «once grados de matiz y veintiséis de saturación» Once grados y veintiséis puntos suenan a mucho. En HSL lo son. HSL no es perceptualmente uniforme: es una reordenación del cubo RGB, y la distancia entre dos de sus puntos no dice cuánto se parecen dos colores para un ojo. Medidos donde corresponde —ΔE76 sobre CIELAB, que es lo que hace `tools/marcas-distinguibles.php`— los dos temas estaban a ΔE 12,3. El umbral de esa herramienta es 20, y no es redondo: es lo que se puede exigir a diez marcas encerradas cada una en la familia de tono de su sector. Así que el tema se movió: Vitta Telecom #3C3F7B H 237,1° S 34,4 % L 35,9 % ΔE a Snacks 24,3 VittaSnacks #2E0B57 H 267,6° S 77,6 % L 19,2 % El índigo nuevo tira más al azul y es más claro. Sigue siendo un índigo y no se confunde con el azul de Cars —`#013C9E`, ΔE 24,2— ni con el navy de Seguros —`#17324D`, ΔE 24,4—: es el color más apretado de las diez, y por eso es el que fija el mínimo alcanzable. Puestos uno al lado del otro se distinguen; puestos en dos pantallas distintas, la diferencia real la hace el ACENTO, que es donde no se parecen en nada: Snacks acentúa en naranja `#FF7A00` sobre su superficie profunda, y Telecom en verde azulado `#00C2A8`. ⚠️ Y una advertencia sobre cómo NO comparar estos dos: el contraste WCAG entre los dos temas da 1,07:1, y ese número no dice nada útil. El contraste mide LUMINANCIA, y dos morados oscuros distintos tienen casi la misma. Los colores de marca se distinguen por MATIZ y por SATURACIÓN, que es lo que está medido arriba. Con la misma vara equivocada, el naranja de Snacks y el verde azulado de Telecom darían 1,16:1 —«casi idénticos»— cuando están a ciento cuarenta y tres grados de distancia y no se parecen en nada. Nunca se ven juntos: son dos instalaciones con dos bases y dos URL. Aun así, la diferenciación la cargan el emblema, el acento y el vocabulario, no el tema. Ver `docs/brandbook-telecom.md`. └───────────────────────────────────────────────────────────────────────────┘ ┌─ ⚠️ DÓNDE VA CADA COLOR SE DECIDIÓ MIDIENDO ──────────────────────────────┐ El verde azulado del realce es exactamente el mismo caso que el naranja de VittaSnacks: un color de marca que NO puede aterrizar sobre papel. realce sobre blanco 2,26:1 ✗ ni texto (4,5) ni filete (3,0) realce sobre el índigo 6,69:1 ✓ y el índigo encima del realce, 6,69:1 acento sobre blanco 6,60:1 ✓ acento sobre el índigo 2,29:1 ✗ no sirve de filete sobre el sidebar blanco sobre el índigo 15,14:1 ✓ O sea que los dos colores de marca son excluyentes y cada uno tiene su sustrato: el ACENTO vive sobre papel y el REALCE vive sobre la superficie profunda. Por eso el realce es `--m-acento-profundo` y no `--m-acento`. Y la tinta que va encima del realce es el índigo profundo, no blanco: 6,69:1 contra 2,53: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. Lo vuelve a medir `tools/contraste.php` en cada `make check`. └───────────────────────────────────────────────────────────────────────────┘ ┌─ ⚠️ ESTA PALETA ENTRA SIN NINGUNA TOLERANCIA PROPIA ──────────────────────┐ Los 60 pares de `tools/contraste.php` × 2 temas se calculan contra esta hoja y pasan, incluidos los dos pares de filete —`--m-borde` sobre superficie y sobre fondo, en claro y en oscuro—, que son la deuda más seria que arrastra la paleta de retail. ⚠️ Las únicas dos líneas donde `telecom` aparece en `TOLERADOS` son las que ya estaban marcadas como deuda DEL PRODUCTO —`--v-on-deep` sobre `--v-warn-solid` y `--v-warn-fg` sobre `--v-warn-bg`—: sus dos tokens son del producto, valen lo mismo en las diez instalaciones y por lo tanto dan el mismo número. No hay ni una tolerancia causada por este índigo. └───────────────────────────────────────────────────────────────────────────┘ ⚠️ La lista de nombres es CERRADA. `tools/tokens-css.php` exige que TODA instalación declare exactamente las mismas primitivas. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Tipografía ─────────────────────────────────────────────────────────── La pila de la casa, y es una decisión, no un olvido. La especificación de Vitta Telecom no entrega tipografía: entrega cuatro colores. Declarar acá una familia que el proyecto no aloja produciría el peor de los resultados —el navegador cae a la fuente del sistema y la escuela se ve distinta en cada computadora—, y declarar una que el proyecto aloja pero sin todos los pesos produce el segundo peor: `vitta.css` usa el titular en 800 en veinticuatro reglas, y Poppins está subida en 600 y 700 solamente. El navegador no falla, sintetiza una negrita falsa y engorda los trazos. Nadie lo reporta, porque «se ve un poco raro» no es un error. Es exactamente el mismo razonamiento de `marca-snacks.css`, y llega a la misma conclusión por el mismo camino. El día que el operador 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 ────────────────────────────────────────────── ⚠️ EL EMBLEMA SE GENERÓ, NO SE RECIBIÓ, Y ESO CAMBIA QUIÉN DECIDE QUÉ. No hay logotipo entregado por el cliente. `public/img/marca/telecom/icono.png` se dibuja con geometría —la receta completa está en el LEEME de esa carpeta—: la señal de tres arcos sobre la palabra VITTA y el renglón TELECOM debajo. Ni una tipografía instalada, ni una licencia que verificar. Que el arte sea nuestro NO significa que la placa se pueda elegir a gusto. Significa lo contrario: que hay que medirla igual, porque no hay un brandbook al que echarle la culpa. `tools/marca-legible.php` mide el CONTORNO del emblema —cada píxel opaco que toca uno transparente— contra los candidatos: #3C3F7B índigo profundo 7,28:1 0,0 % fundido ← el elegido #51579C segundo tono 5,25:1 0,0 % #5B47C8 acento 5,01:1 19,9 % #FFFFFF blanco 1,46:1 100,0 % ✗ NO PASA ⚠️ Los dos primeros números BAJARON cuando el tema se movió: el índigo viejo daba 11,48:1 y el nuevo da 7,28:1, porque es más claro y el emblema también lo es. Sigue muy por encima de cualquier mínimo y el fundido sigue en 0,0 %, así que la elección no cambia — pero el número sí, y dejarlo escrito con el valor viejo sería afirmar una medición que ya no se hizo. El blanco queda descartado por medición: el emblema es blanco y verde azulado, y sobre blanco pierde su contorno ENTERO. Es la misma trampa que costó el halo de Cars, sólo que acá el número existió ANTES de la decisión. El arte trae su propio aire —ocupa el 81,6 % de su lienzo, por debajo del 90 % de `LLENA_SU_LIENZO`—, así que la placa NO tiene que ajustarse al píxel y los tres tamaños son los mismos de la imagen. Con arte que respira, una placa igual al `` no dibuja un segundo borde: dibuja el margen. ⚠️ Consecuencia de elegir el índigo, dicha en voz alta: sobre el sidebar —que ES `#3C3F7B`— la placa no se ve y el emblema queda flotando. No es un descuido: es el mismo 7,28: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. */ --m-marca-tamano: 46px; --m-marca-tamano-ingreso: 76px; --m-marca-tamano-splash: 132px; /* 26 % del lado: un azulejo redondeado, no un disco. El emblema es un lockup vertical —señal, palabra, renglón—, y un círculo le recorta las esquinas justo donde termina la palabra TELECOM. */ --m-marca-radio: 26%; --m-marca-aislamiento: 0; --m-marca-placa: #FFFFFF; /* ── La superficie profunda ─────────────────────────────────────────────── El índigo de la especificación, sin tocar, en la rama clara. La rama oscura lo baja un escalón: un índigo pensado para contrastar contra una página clara se ve lavado cuando la página ya es oscura. */ --m-profundo: light-dark(#3C3F7B, #2D3050); /* El segundo tono: el fondo del menú activo. 1,38:1 sobre el sidebar en tema claro y 1,28: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(#51579C, #40457D); /* Separadores y pistas de barra sobre el fondo profundo. */ --m-linea-profunda: #5F6CC7; /* Lo que se escribe encima del fondo profundo. 15,14:1 en claro, 18,26:1 en oscuro. */ --m-sobre-profundo: #FFFFFF; /* El lila claro de la familia del índigo. 10,10:1 sobre el sidebar. */ --m-sobre-profundo-suave: #F6F9FF; /* 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 toda 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 7,52:1. */ --m-apagado-profundo: #D5DBFF; /* ── El acento ──────────────────────────────────────────────────────────── EL ÍNDIGO MEDIO, no el verde azulado. 6,60:1 con blanco encima sobre papel, que es lo que un botón primario necesita y lo que el realce no puede dar (2,53:1). La rama oscura sube el índigo: en tema oscuro el acento tiene que separarse de una superficie casi negra (3,84:1) sin dejar de sostener el blanco de su propio botón (4,66:1). El índigo de la especificación, sin aclarar, da 2,70:1 contra la superficie oscura y se hunde en ella. */ --m-acento: light-dark(#5B47C8, #7565CE); /* Disco de iniciales y estados certificados: el índigo bajado. Con blanco encima da 9,53:1 en claro y 5,62:1 en oscuro. */ --m-acento-fuerte: light-dark(#43349B, #6A57C0); /* Hover de enlaces: el índigo subido. */ --m-acento-hover: light-dark(#7460DC, #9C8FE0); /* ── Y ACÁ SÍ VA EL VERDE AZULADO ───────────────────────────────────────── 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 realce rinde: 6,69:1 sobre el índigo, contra 2,26:1 sobre papel. Y la tinta que va encima del realce es el índigo profundo, no blanco: 6,69:1 contra 2,53:1. Es el par que en retail y en Cars está en deuda y que acá se resuelve dando vuelta la tinta, que es exactamente para lo que estos dos tokens tienen nombre propio. */ --m-acento-profundo: #00C2A8; --m-sobre-acento-profundo: #2A2F5C; /* La chispa: el realce aclarado. El renglón chico del lockup, la barra del splash y el arco alrededor del disco. Siempre sobre fondo profundo, donde da 9,66:1 en claro y 11,66:1 en oscuro. ⚠️ Es un color DERIVADO y no de la especificación: hacen falta DOS acentos sobre la superficie profunda —uno para el filete y otro para el texto chico—, y con uno solo el renglón del lockup y el filete del menú activo serían el mismo color y se leerían como el mismo elemento. */ --m-chispa: #5FE3D2; /* ── Tinta ──────────────────────────────────────────────────────────────── El índigo profundo es la tinta: 13,87:1 sobre el papel y 15,14:1 sobre blanco. Un negro habría sido más fácil y menos de esta marca. */ --m-tinta: light-dark(#232741, #EDEAFA); --m-tinta-2: light-dark(#514A6E, #C7C1DE); /* El apoyo del diploma, y el mismo valor: un pie de diploma y un «hace 3 días» son el mismo rol tipográfico en dos sustratos. Ver `PaletaDiploma`. */ --m-apagado: light-dark(#6C6488, #9C95B4); /* Fijo en los dos temas: es el número de una fase bloqueada y el marcador de posición de los campos. Pasa 3:1 sobre el relleno claro y sobre el oscuro. */ --m-apagado-2: #8B84A3; /* ── Superficies claras ─────────────────────────────────────────────────── El fondo de la página es EL PAPEL de la especificación, no un gris: un blanco con una gota de índigo adentro. Es lo que hace que la plataforma se lea como suya antes de que aparezca un solo botón. */ --m-fondo: light-dark(#F5F4FD, #110C22); --m-superficie: light-dark(#FFFFFF, #191233); /* ⚠️ Un solo valor para los dos temas, y elegido para PASAR los dos pares de filete en los dos temas. 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: #8A82A6; --m-relleno: light-dark(#EEEDFA, #241B45); --m-relleno-2: light-dark(#E7E5F7, #2A2050); --m-relleno-3: light-dark(#EAE7FB, #201741); /* casilla marcada, realce suave */ --m-realce: light-dark(#E6E2FB, #241C4C); /* fila propia, lección activa, «Nuevo» */ /* ── Efectos teñidos por la marca ─────────────────────────────────────────*/ /* Los canales del índigo 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: 60, 63, 123; /* el índigo profundo de Vitta Telecom */ --m-halo: light-dark(rgba(95, 108, 199, .20), rgba(120, 130, 210, .35)); /* El latido del canje va en VERDE AZULADO y no en índigo: es el único efecto de la plataforma que celebra algo, y en una escuela cuyo tema y cuyo acento son el mismo color, un halo índigo sobre una tarjeta índigo no celebra nada. Es un halo, no un texto: no tiene umbral que cumplir. */ --m-halo-latido: light-dark(rgba(0, 194, 168, .40), rgba(0, 194, 168, .48)); --m-sombra-media: light-dark(rgba(60, 63, 123, .12), rgba(0, 0, 0, .45)); --m-barra: light-dark(#F0F4FF, #494D7A); /* ── 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. ⚠️ Los cuatro colores del diploma —tinta, apoyo, acento y filete— son los mismos de `PaletaDiploma::PALETAS['telecom']`, escritos acá para que `DiplomaDeMarcaTest` pueda comprobar que el papel y la pantalla no se separaron. Si uno cambia sin el otro, el diploma sale con el color del año pasado y nadie se entera hasta que alguien pone los dos papeles juntos. ⚠️ `--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-superficie: #FFFFFF; --m-papel-fondo: #F5F4FD; --m-papel-tinta: #232741; --m-papel-tinta-2: #514A6E; --m-papel-apagado: #6C6488; --m-papel-borde: #E4E3EE; --m-papel-profundo: #3C3F7B; }