/* ============================================================================ NOalergeNO — tokens de diseño Direccion de arte (pack de rediseno total, 19/09/2026): alto contraste entre carbon y blanco roto, titulares muy pesados, modulos de esquina redondeada, y tres acentos —lima neon, violeta electrico y rosa— con anotaciones a mano como gesto de personalidad. Los tres acentos estan MUESTREADOS de las referencias del pack, no aproximados a ojo: se contaron los colores saturados de los PNG y se tomaron los dominantes. El lienzo era blanco hasta esta fecha. Cambio a negro porque la pauta nueva asi lo pide: el contenido sigue leyendose sobre BLANCO, dentro de la hoja, que es como esta montada la pauta. No es un tema oscuro; es un marco negro. Tres reglas que no se negocian: 1. El color de marca es ULTRAMAR y no toca nunca la escala semaforica. Si la marca fuese verde o roja, un fondo de marca parecería un veredicto. 2. Rojo / ámbar / amarillo / verde están RESERVADOS al motor de seguridad. La publicidad tiene su propia superficie, cálida y neutra (prompt 281). 3. EL LIMA ES EL COLOR DE ACCIÓN, y entra también en la aplicación. Esto cambió con el pack de rediseño, que lo pide como color único de CTA en los tres universos. Se midió antes de aceptarlo: la distancia RGB del lima #E0FA4E a cada color con significado es de 146 a 265, y el más cercano es el crema casi blanco del estado «insuficiente», que no se confunde con un neón saturado. Lo que NO cambia: el lima no aparece en la tarjeta de resultado ni en el botón del aviso legal. Esas dos excepciones siguen en cápsula negra y están al final de `app.css` con su porqué. ========================================================================= */ :root { /* ── Marca ───────────────────────────────────────────────────────────── Dirección visual del cliente: degradado rosa→magenta sobre blanco aireado. El rosa vivo (#FF2D6F) da 3.59:1 sobre blanco: NO pasa AA para texto. Se usa como RELLENO —degradados, botones, distintivos— nunca como color de letra. Para texto está `--no-marca-texto`, que da 6.8:1. */ /* Las tres paradas de la pauta: naranja-rojo arriba, rosa en medio, magenta abajo. El degradado va en diagonal desde arriba a la derecha. */ --no-marca-1: #FF4A4A; /* la más clara. Blanco encima: 3.32:1 */ --no-marca-2: #F52B6E; /* el rosa del centro */ --no-marca-3: #A9218C; /* el magenta del fondo */ --no-marca: #D6165C; /* sólido para rellenos. Blanco encima: 5.1:1 */ --no-marca-texto: #B01455; /* para LETRA sobre blanco: 6.8:1 */ --no-marca-fuerte: #8E1049; --no-marca-suave: #FFF0F5; --no-marca-borde: #FFD3E2; --no-degradado: linear-gradient(200deg, var(--no-marca-1) 0%, var(--no-marca-2) 45%, var(--no-marca-3) 100%); /* Para superficies pequeñas —insignias, botones— basta con dos paradas. */ --no-degradado-corto: linear-gradient(200deg, var(--no-marca-1) 0%, var(--no-marca-2) 70%); --no-marca-halo: #FFDCE8; /* el halo pálido de la insignia */ --no-sobre-marca: #FFFFFF; /* ── Tinta y superficies ─────────────────────────────────────────────── El lienzo es NEGRO y la hoja BLANCA. Lo que separa una de otra ya no es la sombra —sobre negro no se ve— sino el propio salto de color. La sombra se conserva para las tarjetas que van DENTRO de la hoja, que siguen siendo blancas sobre blanco. */ --no-tinta: #101024; /* 17.9:1 sobre blanco */ --no-tinta-media: #474C63; /* 8.0:1 */ /* 5.2:1 sobre blanco. Se eligió cuando el lienzo era lavanda, donde daba 4.9; con el lienzo en blanco sube, así que sigue valiendo. No se aclara: el texto secundario del pie es el que más se lee y el que peor se ve. */ --no-tinta-suave: #666B82; /* Tinta de la pauta: casi negra, para la hoja blanca y para los distintivos negros. 18.9:1 sobre blanco. */ --no-tinta-pauta: #131316; --no-fondo: #FFFFFF; /* la HOJA: donde de verdad se lee */ /* El lienzo de la pauta. No es negro puro: #000 sobre una pantalla OLED recorta el borde de la hoja con un contraste que cansa. */ --no-lienzo: #151517; --no-lienzo-2: #202024; /* separadores y superficies sobre el lienzo */ --no-sobre-lienzo: #FFFFFF; /* Texto secundario SOBRE el lienzo negro. 7.9:1 contra #151517. */ --no-sobre-lienzo-2: #B6B6BE; /* El gris que antes era el lienzo ahora es la superficie secundaria: bloques de código, cajas de apoyo. Es lo que da relieve ahora que el fondo no. */ /* El blanco roto de la pauta es CALIDO, no lavanda: las tarjetas del original tiran a hueso, no a azul. */ --no-superficie: #F4F4F1; --no-superficie-2: #E9E9E4; --no-borde: #E4E4DE; /* ── Acentos de la pauta ─────────────────────────────────────────────── Planos y saturados, sin degradado: en la pauta son manchas de color. Los tres contrastes están medidos, no estimados. */ --no-violeta: #5E33FA; /* muestreado del pack. Blanco encima: 6.31:1 ✓ */ --no-violeta-hondo: #3319A8; /* el violeta de sombra del pack. Blanco: 11.4:1 */ --no-violeta-suave: #EEE9FE; --no-violeta-texto: #4B1FD6; /* para LETRA violeta sobre blanco: 8.3:1 */ --no-rosa-pauta: #FD93DB; /* muestreado. Tinta negra encima: 9.31:1 ✓ */ --no-lima: #E0FA4E; /* muestreado. Tinta negra encima: 16.11:1 ✓ */ /* ── Verde flúor: el color de la llamada a la acción ─────────────────── Encargo del cliente (19/09/2026): el botón de escanear en verde flúor, «que es positivo y llama la atención». ES UN VERDE, Y AQUÍ UN VERDE YA SIGNIFICA ALGO. `--no-ok` (#0A5F35) es el estado «declarado sin» en la tarjeta de resultado. Por eso este se eligió MIDIENDO, no a ojo: · distancia RGB al verde del veredicto: 180. No se confunden. · distancia RGB al lima de la pauta: 188. Tampoco. · sobre él, tinta negra da 13.88:1. Con letra BLANCA da 1.34:1, así que la letra encima es negra SIEMPRE. Un botón flúor con letra blanca es ilegible, y este es el botón que más se pulsa. DÓNDE NO ENTRA: en la pantalla de resultado. Ahí `vista.js` pinta una acción principal pegada al veredicto, y un botón verde flúor al lado de «CONTIENE LECHE» convierte el color en ruido justo donde tiene que significar algo. Ese botón se queda en la cápsula negra. */ --no-verde-fluor: #E0FA4E; --no-verde-fluor-alto: #CFEE2F; /* el mismo, un punto más hondo, para :hover */ --no-sobre-fluor: #111114; /* ── Escala semáforica — SOLO motor de seguridad ─────────────────────── El rojo se ha PROFUNDIZADO a propósito. Con una marca rosa, un rojo claro se confundiría con ella, y en esta aplicación confundir la marca con un veredicto es el peor fallo posible. Distancia RGB con el rosa: 156. */ --no-peligro: #9E1B10; /* CONTIENE — 7.6:1 */ --no-peligro-fondo: #FCEBE9; --no-aviso: #8A4C06; /* PUEDE CONTENER — 6.2:1 */ --no-aviso-fondo: #FEF3E4; --no-duda: #6F5300; /* INSUFICIENTE — 6.5:1 */ --no-duda-fondo: #FBF4DD; --no-ok: #0A5F35; /* DECLARADO SIN — 7.2:1 */ --no-ok-fondo: #E7F5ED; /* ── Superficie comercial — jamás usa la escala de arriba ───────────────*/ --no-comercial: #FAF7F1; --no-comercial-borde: #E3DCCD; --no-comercial-tinta: #4A4335; /* ── Tipografía ────────────────────────────────────────────────────────*/ /* Poppins la servimos nosotros: ver `marca/tipografia/tipografia.css` para por qué no se pide a Google. Detrás va la pila del sistema, que es lo que se lee durante los milisegundos que tarda en llegar. */ --no-fuente: 'Poppins', ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif; --no-fuente-mono: ui-monospace, SFMono-Regular, Menlo, monospace; --no-fuente-logo: 'Poppins', "Arial Black", "Helvetica Neue", Helvetica, Arial Bold, Gadget, sans-serif; /* Titulares muy pesados y apretados, como en la pauta. */ --no-t-display: clamp(2.5rem, 9vw, 4.5rem); --no-t-xxl: 2.25rem; --no-t-xl: 1.5rem; --no-t-l: 1.1875rem; --no-t-m: 1rem; --no-t-s: 0.875rem; --no-t-xs: 0.75rem; /* ── Espaciado y forma ─────────────────────────────────────────────────*/ --no-e1: 4px; --no-e2: 8px; --no-e3: 12px; --no-e4: 16px; --no-e5: 24px; --no-e6: 32px; --no-e7: 48px; --no-e8: 64px; /* La pauta redondea MUCHO: la hoja y las tarjetas son casi cápsulas. */ --no-radio: 28px; --no-radio-hoja: 34px; --no-radio-s: 16px; --no-radio-badge: 18px; --no-radio-pill: 999px; --no-toque: 56px; --no-toque-min: 48px; /* Sombras difusas y suaves: la tarjeta flota, no se recorta. */ --no-sombra: 0 1px 2px rgba(16,16,36,.06), 0 4px 10px rgba(16,16,36,.05), 0 16px 40px rgba(16,16,36,.09); --no-sombra-alta: 0 2px 4px rgba(16,16,36,.08), 0 8px 18px rgba(16,16,36,.08), 0 28px 60px rgba(16,16,36,.14); --no-sombra-marca: 0 8px 24px rgba(214,22,92,.28); /* Sobre el lienzo negro una sombra gris no existe. Lo que despega la hoja del fondo es un halo oscuro más profundo que el propio lienzo. */ --no-sombra-hoja: 0 24px 60px rgba(0,0,0,.55); --no-anillo: 0 0 0 3px var(--no-marca-suave), 0 0 0 5px var(--no-marca); --no-transicion: 180ms cubic-bezier(.2,.7,.3,1); } /* ── Modo oscuro: rehecho, no invertido (prompt 145) ─────────────────────── Los fondos de estado se oscurecen y los textos se aclaran de forma independiente, porque invertir #FDECEA da un rosa fosforito ilegible. NO se activa solo con `prefers-color-scheme`. La pauta de marca es blanca, y con el sistema en oscuro la página salía en #0E0C16: el fondo blanco estaba puesto y no se veía. El tema oscuro sigue completo y probado, pero hay que pedirlo con `data-tema="oscuro"` en el . */ :root[data-tema="oscuro"] { --no-marca-1:#FF8A7E; --no-marca-2:#FF6D9C; --no-marca-3:#D46BC0; --no-marca:#FF5C90; --no-marca-halo:#3A1A2C; --no-marca-texto:#FF8FB4; --no-sobre-marca:#14061A; --no-marca-fuerte:#FFB3CD; --no-marca-suave:#2A1020; --no-marca-borde:#4A1E35; --no-degradado: linear-gradient(200deg, #FF8A7E 0%, #FF6D9C 45%, #D46BC0 100%); --no-degradado-corto: linear-gradient(200deg, #FF8A7E 0%, #FF6D9C 70%); --no-tinta:#F4F3F9; --no-tinta-media:#B9B8CE; --no-tinta-suave:#8F8DA8; --no-fondo:#0E0C16; --no-lienzo:#0E0C16; --no-superficie:#17141F; --no-superficie-2:#221E2E; --no-borde:#322C42; --no-peligro:#FF9186; --no-peligro-fondo:#3A1512; --no-aviso:#F2B366; --no-aviso-fondo:#33210A; --no-duda:#E0C766; --no-duda-fondo:#2C2409; --no-ok:#6FD6A0; --no-ok-fondo:#0B2C1C; --no-comercial:#191712; --no-comercial-borde:#35301F; --no-comercial-tinta:#CFC7B4; --no-sombra: 0 2px 4px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.5); --no-sombra-alta: 0 4px 8px rgba(0,0,0,.5), 0 24px 56px rgba(0,0,0,.6); --no-sombra-marca: 0 8px 24px rgba(255,92,144,.22); } /* ── Alto contraste (prompt 144) ───────────────────────────────────────────*/ @media (prefers-contrast: more) { :root { --no-tinta-suave: var(--no-tinta-media); --no-borde: var(--no-tinta-media); --no-peligro: #8E0F07; --no-aviso: #6B3A00; --no-duda: #574000; --no-ok: #064F2B; } } /* ── Movimiento reducido (prompt 146) ──────────────────────────────────────*/ @media (prefers-reduced-motion: reduce) { :root { --no-transicion: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }