/* ============================================================ tokens.css — Paleta y medidas EXACTAS del documento VISUALES v3 Secciones A.1 (colores verificados AA), A.2 (tipografía), A.3 (espaciado, radios, sombras, z-index, táctil). Temas: data-theme="claro" | "oscuro" | "mix" en . RTL: dir="rtl" en (los componentes usan propiedades lógicas). NO añadir colores nuevos aquí sin par verificado en A.1. ============================================================ */ /* ---------- TEMA CLARO (por defecto) ---------- */ :root { color-scheme: light; /* A.1 · Colores de marca */ --brand: #0E7C6B; /* barras, botón principal, acentos, checks leído */ --brand-dark: #0A5E52; /* presionado, cabeceras oscuras, texto sobre tint */ --brand-tint: #D8F2EC; /* fondos suaves, burbuja propia (claro), fila activa */ --brand-contrast: #FFFFFF; /* texto/iconos sobre --brand */ /* A.1 · Superficies (claro) */ --bg: #F2F4F5; --bg-chat: #ECE7E0; /* fondo de conversación, cálido tipo papel */ --surface: #FFFFFF; --surface-2: #F7F9FA; --border: #E1E5E8; /* A.1 · Texto (claro) */ --text: #0F1A1C; /* B12 · era #5B6B70: la hora y la última línea de la fila de chat ACTIVA (fondo --brand-tint) daban 4.37:1 en el juego azul de los paneles y 4.46:1 sobre el tinte de IA. Ahora el peor tinte queda en 4.92:1 y sobre tarjeta blanca sube de 5.55:1 a 6.25:1. */ --text-2: #546367; --text-place: #5F7076; /* placeholders y legal: SÍ legible (≥4.5:1) */ --text-3: #8A9AA0; /* SOLO deshabilitado. Prohibido en placeholders */ /* A.1 · Estados semánticos — acento (texto/icono sobre blanco) */ --success: #0F6B41; --success-fill: #1E9E62; /* solo relleno decorativo grande (3.11:1 sobre --bg) */ --warning: #8A5307; /* B12 · era #C9821A: como punto de estado / estrella sobre --bg daba 2.84:1 (mínimo 3:1 de objeto gráfico, WCAG 1.4.11). Ahora 3.38:1 sobre --bg, 3.03:1 sobre --bg-chat y 3.73:1 sobre --surface. */ --warning-fill: #B87610; /* B12 · era #C6413B: como texto sobre el fondo cálido del chat (--bg-chat) daba 4.05:1, por debajo del 4.5:1. Ahora 4.73:1 (bg-chat) · 5.28:1 (bg) · 5.82:1 (surface) · 5.51:1 (surface-2), y el blanco encima sube a 5.82:1. */ --danger: #B8362F; /* B12 · era #2E77B5: como texto de 11px («ver original», ⓘ) daba 4.30:1 sobre --bg y 3.86:1 sobre --bg-chat, por debajo del 4.5:1 de texto. Ahora 4.93:1 (bg-chat) · 5.50:1 (bg) · 6.06:1 (surface) · 5.74:1 (surface-2). */ --info: #26669C; --ai: #5B3FD6; --ai-fill: #7A5AF8; /* A.1 · Parejas de insignia (fondo tinte / texto) — nunca blanco 11px */ --success-tint: #D7F1E3; --success-tint-text: #0F6B41; --warning-tint: #FBEBD0; --warning-tint-text: #8A5307; --danger-tint: #FBE2E0; --danger-tint-text: #9C2B26; --info-tint: #DCEBF8; --info-tint-text: #1D5A8F; --ai-tint: #E9E3FD; --ai-tint-text: #5B3FD6; --brand-tint-text: #0A5E52; /* texto de marca sobre --brand-tint (6.52:1) */ /* A.1 · Funcionales del chat */ --check-entregado: #5F7076; --check-leido: #0E7C6B; --toggle-off: #6E7E85; --focus: #0E7C6B; /* anillo de foco (2px, separado 2px) */ /* B12 · Borde de un CONTROL (campo, casilla del código, chip, botón secundario, zona de soltar, barra del reproductor). WCAG 1.4.11 pide 3:1 al contorno que identifica un componente; --border (#E1E5E8, 1.27:1 sobre blanco) vale para separar filas y tarjetas —decoración— pero NO para dibujar el contorno de un campo. Este es el mismo gris del interruptor apagado, ya verificado: 4.21:1 sobre --surface · 3.82:1 sobre --bg · 3.99:1 sobre --surface-2 · 3.42:1 sobre --bg-chat. */ --borde-control: #6E7E85; /* Burbujas (A.6/A.7) */ --bubble-propia: var(--brand-tint); /* cliente, modo claro */ --bubble-propia-texto: var(--text); --bubble-recibida: var(--surface); --bubble-operador: var(--brand); /* burbuja propia del operador */ /* A.2 · Tipografía CP-528 · Los tamaños van en rem (1rem = 16px por defecto): así el ajuste de tamaño de letra del sistema/navegador agranda el texto de verdad. Equivalencias con los px de A.2 en cada línea. */ --font: "Inter", "Noto Sans Arabic", system-ui, "Segoe UI", Roboto, Arial, sans-serif; --fs-h1: 1.5rem; --lh-h1: 2rem; --fw-h1: 700; /* 24/32px */ --fs-h2: 1.25rem; --lh-h2: 1.75rem; --fw-h2: 600; /* 20/28px */ --fs-h3: 1.0625rem; --lh-h3: 1.5rem; --fw-h3: 600; /* 17/24px */ --fs-body: 0.9375rem; --lh-body: 1.375rem; --fw-body: 400; /* 15/22px */ --fw-strong: 600; --fs-small: 0.8125rem; --lh-small: 1.125rem; /* 13/18px */ --fs-caption: 0.6875rem; --lh-caption: 0.875rem; --fw-caption: 500; /* 11/14px */ --fs-kpi: 1.75rem; --lh-kpi: 2.125rem; --fw-kpi: 700; /* 28/34px · valor grande de tarjeta KPI (PULIDO.md) */ /* Nada por debajo de 11px (0.6875rem). Holgura del 35% en controles (regla A.2). */ /* A.3 · Rejilla de 4px */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-6: 24px; --sp-8: 32px; /* A.3 · Radios */ --r-campo: 10px; /* campos y botones */ --r-tarjeta: 14px; --r-burbuja: 18px; /* esquina del emisor a 4px: --r-ancla */ --r-ancla: 4px; --r-redondo: 50%; /* A.3 · Sombras (en oscuro se sustituyen por borde) */ --sombra-tarjeta: 0 1px 3px rgba(0,0,0,.08); --sombra-flotante: 0 6px 20px rgba(0,0,0,.14); --sombra-fab: 0 4px 12px rgba(0,0,0,.18); /* A.3 · Medidas universales */ --tactil: 44px; /* zona táctil mínima en TODO lo pulsable */ --alto-boton: 48px; --alto-campo: 48px; --alto-cabecera-chat: 56px; --fila-chat: 72px; --fila-tabla: 56px; /* cómoda (por defecto); compacta 48px */ --fila-tabla-compacta: 48px; --icono-s: 16px; --icono-m: 20px; --icono-l: 24px; /* únicos 3 tamaños */ --borde-grosor: 1px; --burbuja-max-movil: 75%; --burbuja-max-escritorio: 65%; /* con tope 480px */ --burbuja-tope: 480px; /* ---------- ÁREA SEGURA DEL TELÉFONO (06/09/2026 · tanda 3 de móvil) ---------- La muesca de arriba, la barra de gestos de abajo y, en horizontal, la muesca en el costado. El navegador solo dice cuánto miden si la página pide ir de borde a borde: `viewport-fit=cover` en la etiqueta `viewport` de los cinco `index.html`. Sin eso, `env()` vale 0 y no pasa nada. POR QUÉ SON VARIABLES Y NO `env()` SUELTO EN CADA REGLA: 1 · en un ordenador `env()` vale siempre 0, así que un fallo aquí no se vería nunca. Con variable se puede simular una muesca desde la consola (`document.documentElement.style.setProperty('--safe-arriba','44px')`) y COMPROBAR que la pantalla se aparta. Es como se ha verificado. 2 · el segundo argumento (`, 0px`) hace que un navegador viejo que no conozca `env()` siga midiendo 0 en vez de romper el `calc()`. ARRIBA/ABAJO son físicos y no cambian con el idioma. INICIO/FIN sí: en árabe el «inicio» de la línea es la derecha de la pantalla, y la muesca sigue estando donde está — por eso se cruzan en el bloque RTL de más abajo. Así las pantallas usan solo propiedades lógicas (regla del proyecto) y el hueco cae igualmente donde está la muesca de verdad. */ --safe-arriba: env(safe-area-inset-top, 0px); --safe-abajo: env(safe-area-inset-bottom, 0px); --safe-izquierda: env(safe-area-inset-left, 0px); --safe-derecha: env(safe-area-inset-right, 0px); --safe-inicio: var(--safe-izquierda); --safe-fin: var(--safe-derecha); /* Layout de escritorio (PULIDO.md · feedback 10/08/2026) */ --ancho-lateral: 240px; /* barra lateral de navegación de los paneles */ --ancho-lista-chats: 380px; /* lista de chats del cliente en dos paneles (WhatsApp Web) */ --contenido-max: 1180px; /* ancho máximo del contenido de panel */ /* A.3 · Orden de capas (6 niveles con nombre en llano) */ --z-suelo: 1; --z-barras: 100; /* cabeceras, composer, tabs, menú lateral */ --z-flotantes: 300; /* menús ⋮, desplegables */ --z-capas: 500; /* hojas inferiores, diálogos (fondo oscurecido) */ --z-globos: 700; /* globos ⓘ: también legibles DENTRO de un diálogo (22/08/2026) */ --z-avisos: 900; /* toasts: siempre encima de todo */ /* A.5 · Movimiento (150–200ms, con propósito) */ --dur: 180ms; --dur-rapida: 150ms; --ease: cubic-bezier(.2, .7, .3, 1); /* Tokens de componente (derivados de A.1; cambian por tema) */ --velo: rgba(0,0,0,.45); /* fondo oscurecido de popups, hojas y velos */ --esqueleto-brillo: rgba(255,255,255,.35);/* destello del esqueleto de carga */ --danger-contrast: #FFFFFF; /* texto/iconos sobre --danger */ --toggle-bola: #FFFFFF; /* bolita del interruptor */ --avatar-texto: #FFFFFF; /* iniciales sobre el color del avatar */ --qr-fondo: #FFFFFF; /* los QR siempre sobre blanco (legibilidad) */ --qr-tinta: #0F1A1C; --pastilla-agente-texto: var(--brand-tint-text); /* Miniaturas del selector de tema (CP-205): valores FIJOS de A.1 de cada tema, para que cada miniatura enseñe su tema sin depender del activo. No son colores nuevos: son los mismos de A.1 (claro y oscuro). */ --previa-claro-bg: #ECE7E0; --previa-claro-superficie: #FFFFFF; --previa-claro-burbuja: #D8F2EC; --previa-oscuro-bg: #0A1114; --previa-oscuro-superficie: #222E33; --previa-oscuro-burbuja: #0A5E52; } /* ---------- TEMA OSCURO (sin negro puro) ---------- */ :root[data-theme="oscuro"] { color-scheme: dark; --bg: #0E1517; --bg-chat: #0A1114; --surface: #1B2529; --surface-2: #222E33; --border: #2A363B; --text: #E9EEF0; --text-2: #9BB0B6; --text-place: #9AAAB1; --text-3: #6C8088; /* Estados en oscuro: versión clara, legible sobre superficies oscuras */ --success: #57C690; --warning: #E3A64E; --danger: #F0928C; --info: #7FB8E8; --ai: #B6A5FB; /* Insignias en oscuro: tinte translúcido del acento + texto acento claro */ --success-tint: rgba(87,198,144,.16); --success-tint-text: #57C690; --warning-tint: rgba(227,166,78,.16); --warning-tint-text: #E3A64E; --danger-tint: rgba(240,146,140,.16); --danger-tint-text: #F0928C; --info-tint: rgba(127,184,232,.16); --info-tint-text: #7FB8E8; --ai-tint: rgba(182,165,251,.16); --ai-tint-text: #B6A5FB; --brand-tint: rgba(14,124,107,.20); --brand-tint-text: #57C690; --check-entregado: #9AAAB1; --check-leido: #57C690; --toggle-off: #64767E; --focus: #4DB6A3; /* B12 · Los rellenos decorativos NO estaban definidos en oscuro: se quedaban con el valor claro y quedaban apagados sobre superficie oscura (el morado #7A5AF8 daba 3.46:1, al filo). Ahora usan la variante clara del mismo estado, ya verificada: ≥6.5:1 sobre --surface-2 y ≥7.2:1 sobre --surface. */ --success-fill: #57C690; --warning-fill: #E3A64E; --ai-fill: #B6A5FB; /* B12 · En oscuro --danger es un salmón claro: el texto blanco encima del botón de peligro relleno daba 2.28:1. Con la tinta oscura, 7.76:1. */ --danger-contrast: #0F1A1C; /* B12 · Contorno de control en oscuro (3.78:1 sobre --surface, 3.37:1 sobre --surface-2, 4.46:1 sobre --bg). */ --borde-control: #6C8088; --bubble-propia: #0A5E52; /* --brand-bubble-dark de A.1 */ --bubble-propia-texto: #E9EEF0; --bubble-recibida: #222E33; /* --surface-2 en oscuro */ --bubble-operador: #0A5E52; /* En oscuro, las sombras se sustituyen por borde sutil (A.3) */ --sombra-tarjeta: 0 0 0 1px var(--border); --sombra-flotante: 0 0 0 1px var(--border), 0 6px 20px rgba(0,0,0,.35); --sombra-fab: 0 0 0 1px var(--border); /* Tokens de componente en oscuro */ --esqueleto-brillo: rgba(255,255,255,.06); --pastilla-agente-texto: var(--text); } /* ---------- TEMA MIX (automático: sigue el sistema — A.8) ---------- El JS (ui.js) resuelve «mix» y también «por horario»; este bloque garantiza el resultado correcto incluso sin JS. */ @media (prefers-color-scheme: dark) { :root[data-theme="mix"] { color-scheme: dark; --bg: #0E1517; --bg-chat: #0A1114; --surface: #1B2529; --surface-2: #222E33; --border: #2A363B; --text: #E9EEF0; --text-2: #9BB0B6; --text-place: #9AAAB1; --text-3: #6C8088; --success: #57C690; --warning: #E3A64E; --danger: #F0928C; --info: #7FB8E8; --ai: #B6A5FB; --success-tint: rgba(87,198,144,.16); --success-tint-text: #57C690; --warning-tint: rgba(227,166,78,.16); --warning-tint-text: #E3A64E; --danger-tint: rgba(240,146,140,.16); --danger-tint-text: #F0928C; --info-tint: rgba(127,184,232,.16); --info-tint-text: #7FB8E8; --ai-tint: rgba(182,165,251,.16); --ai-tint-text: #B6A5FB; --brand-tint: rgba(14,124,107,.20); --brand-tint-text: #57C690; --check-entregado: #9AAAB1; --check-leido: #57C690; --toggle-off: #64767E; --focus: #4DB6A3; /* B12 · mismos arreglos que el tema oscuro (rellenos, tinta del botón de peligro y contorno de control); si faltan aquí, «Mix» no está arreglado. */ --success-fill: #57C690; --warning-fill: #E3A64E; --ai-fill: #B6A5FB; --danger-contrast: #0F1A1C; --borde-control: #6C8088; --bubble-propia: #0A5E52; --bubble-propia-texto: #E9EEF0; --bubble-recibida: #222E33; --bubble-operador: #0A5E52; --sombra-tarjeta: 0 0 0 1px var(--border); --sombra-flotante: 0 0 0 1px var(--border), 0 6px 20px rgba(0,0,0,.35); --sombra-fab: 0 0 0 1px var(--border); /* Tokens de componente en mix+sistema oscuro (mismos que el tema oscuro) */ --esqueleto-brillo: rgba(255,255,255,.06); --pastilla-agente-texto: var(--text); } } /* ============================================================ DOBLE JUEGO DE MARCA (decisión del titular, 2026-08-09) Las interfaces de TRABAJO (admin, operador, afiliado) llevan data-marca="panel" en su y usan este AZUL REY. El CLIENTE no lleva el atributo y conserva el verde-teal de A.1. Solo se redefinen los tokens --brand* y sus derivados; el resto de la paleta (superficies, texto, estados) es común. Ratios WCAG 2.1 CALCULADOS con script (no a ojo) — todos pasan: ┌────────────────────────────────────────────────┬─────────┬──────┐ │ Par comprobado │ Ratio │ Mín. │ ├────────────────────────────────────────────────┼─────────┼──────┤ │ #FFFFFF sobre --brand #2B4EC8 (botón) │ 6.94:1 │ 4.5 │ │ #FFFFFF sobre --brand-dark #1F3A9E (presionado)│ 9.73:1 │ 4.5 │ │ tint-text #1F3A9E sobre tint #DCE4FA (insignia)│ 7.66:1 │ 4.5 │ │ texto #0F1A1C sobre tint #DCE4FA │ 13.94:1 │ 4.5 │ │ --focus claro #2B4EC8 sobre --bg #F2F4F5 │ 6.29:1 │ 3.0 │ │ --focus claro #2B4EC8 sobre #FFFFFF │ 6.94:1 │ 3.0 │ │ --brand #2B4EC8 como texto sobre #FFFFFF │ 6.94:1 │ 4.5 │ │ --focus oscuro #7D9BF0 sobre --bg #0E1517 │ 6.87:1 │ 3.0 │ │ --focus oscuro #7D9BF0 sobre --surface #1B2529 │ 5.82:1 │ 3.0 │ │ acento osc. #9DB4F5 sobre --surface #1B2529 │ 7.65:1 │ 4.5 │ │ acento osc. #9DB4F5 sobre --bg #0E1517 │ 9.03:1 │ 4.5 │ │ texto #E9EEF0 sobre burbuja oscura #1F3A9E │ 8.32:1 │ 4.5 │ │ #9DB4F5 sobre tinte translúcido .16 (#23334B) │ 6.24:1 │ 4.5 │ └────────────────────────────────────────────────┴─────────┴──────┘ ============================================================ */ /* Paneles · tema claro (y base común: --brand/--brand-dark/--brand-contrast valen también en oscuro, igual que en el juego teal) */ :root[data-marca="panel"] { --brand: #2B4EC8; /* azul rey: barras, botón principal, acentos */ --brand-dark: #1F3A9E; /* presionado, texto sobre tinte */ --brand-tint: #DCE4FA; /* fondos suaves, fila activa */ --brand-contrast: #FFFFFF; /* texto/iconos sobre --brand (6.94:1) */ --brand-tint-text: #1F3A9E;/* par de insignia: texto sobre --brand-tint (7.66:1) */ --check-leido: #2B4EC8; --focus: #2B4EC8; /* ≥3:1 sobre --bg y --surface claros */ } /* Paneles · tema oscuro */ :root[data-theme="oscuro"][data-marca="panel"] { --brand-tint: rgba(43,78,200,.20); --brand-tint-text: #9DB4F5; /* par de insignia en oscuro (≥7.65:1) */ --check-leido: #9DB4F5; --focus: #7D9BF0; /* ≥3:1 sobre --bg y --surface oscuros */ --bubble-propia: #1F3A9E; /* burbuja propia del operador en oscuro (8.32:1) */ --bubble-operador: #1F3A9E; } /* Paneles · tema mix cuando el sistema está en oscuro */ @media (prefers-color-scheme: dark) { :root[data-theme="mix"][data-marca="panel"] { --brand-tint: rgba(43,78,200,.20); --brand-tint-text: #9DB4F5; --check-leido: #9DB4F5; --focus: #7D9BF0; --bubble-propia: #1F3A9E; --bubble-operador: #1F3A9E; } } /* ---------- A.5 · Reducir movimiento (respetado SIEMPRE) ---------- */ @media (prefers-reduced-motion: reduce) { :root { --dur: 1ms; --dur-rapida: 1ms; --dur-fundido: 140ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; /* CP-546: nunca desplazamiento suave, en ningún elemento */ } /* CP-546 · MEDIDO ANTES: el brillo del esqueleto (que se desliza) seguía dando UNA pasada de 1 ms. AHORA: el esqueleto se queda gris y quieto, sin brillo. */ :where(.esqueleto)::after { animation-name: none !important; } /* CP-546 (30/09/2026) · LO QUE ENTRA SE FUNDE, NO APARECE DE GOLPE. MEDIDO ANTES: con «reducir movimiento» la regla de arriba dejaba hojas, ventanas, avisos, el panel lateral, la franja de novedades y el cambio de pantalla en 1 ms: aparecían DE GOLPE (el plan pide «fundidos breves»). AHORA: esas piezas cambian su entrada (que subía, bajaba o crecía) por un fundido de solo opacidad de 140 ms, sin ningún desplazamiento ni escala. Lo que se repite (esqueletos, pulsos, ruedas) sigue quieto por la regla de arriba, y el tour cambia su pulso por el borde fijo (tour.css). Van con :where() (peso cero) y DESPUÉS de la regla de arriba: le ganan a ella por orden, y en cambio el «quieto para la foto» del motor visual (un «*{animation:none!important}» que se añade más tarde) les sigue ganando a ellas, así que las fotos de referencia no cambian. */ :where(.popup, .toast, .hoja, .portafolio-panel, .globo-etiqueta, .nav-grupo-abriendo .nav-grupo-items > .lateral-item, .login-tarjeta, .af-login, .pwa-franja, .act-franja, .entra, .entra-2, .entra-3, .bienvenida-velo, .bienvenida-velo img, .bienvenida-velo h2, .op-bienvenida) { animation-name: mov-fundido !important; animation-duration: var(--dur-fundido) !important; animation-timing-function: ease-out !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; animation-fill-mode: none !important; } /* El saludo del operador se va fundiéndose y se queda oculto. */ :where(.op-bienvenida.se-va) { animation-name: mov-fundido-sale !important; animation-fill-mode: forwards !important; } /* El cambio de pantalla (el calco que deja el router) y la salida del velo del administrador: también un fundido, no un corte. */ :where(.rt-calco, .bienvenida-velo) { transition-property: opacity !important; transition-duration: var(--dur-fundido) !important; transition-timing-function: ease-out !important; } @keyframes mov-fundido { from { opacity: 0; } to { opacity: 1; } } @keyframes mov-fundido-sale { from { opacity: 1; } to { opacity: 0; visibility: hidden; } } } /* ============================================================ --brand-texto (12/08/2026) · el acento cuando se usa como TEXTO o TRAZO, no como relleno. En claro coincide con --brand; en oscuro sube a la variante clara ya verificada en la tabla de ratios de arriba. NO se añade ningún hex nuevo. ============================================================ */ :root { --brand-texto: var(--brand); } /* Juego AZUL de los paneles (admin · operador · afiliado) */ :root[data-theme="oscuro"][data-marca="panel"] { --brand-texto: #9DB4F5; } /* 7.65:1 sobre --surface */ @media (prefers-color-scheme: dark) { :root[data-theme="mix"][data-marca="panel"] { --brand-texto: #9DB4F5; } } /* Juego TEAL del cliente (mismo criterio; #57C690 ya es --brand-tint-text en oscuro) */ :root[data-theme="oscuro"]:not([data-marca]) { --brand-texto: #57C690; } @media (prefers-color-scheme: dark) { :root[data-theme="mix"]:not([data-marca]) { --brand-texto: #57C690; } } /* ============================================================ PASTILLAS DE ACCIÓN (§16 · punto 4 del titular, 03/09/2026) Cada botón de una barra de acciones es un CUADRADO de color suave con el icono en el color fuerte del mismo tono. El color significa lo mismo en TODO el sistema: verde → aprobar · activar · confirmar · restaurar azul → ver · abrir · escribir · editar ámbar → suspender · pausar · avisar rojo → eliminar · bloquear · denegar gris → neutro · secundario No hay ni un hex nuevo: cada par reutiliza las parejas de insignia de A.1, que ya cambian solas en claro, oscuro y mix. El gris no lleva relleno de color (sería un cuadrado invisible sobre la fila blanca): se dibuja con su BORDE, y por eso es el único que necesita `--acc-gris-borde`. Ratios WCAG 2.1 CALCULADOS con script (no estimados). El mínimo exigible a un icono (objeto gráfico, 1.4.11) es 3:1; todos estos pasan además el 4.5:1 de texto normal: ── TEMA CLARO ───────────────────────────────────────────────── ┌──────────────────────────────────────────┬─────────┬──────┐ │ Par comprobado │ Ratio │ Mín. │ ├──────────────────────────────────────────┼─────────┼──────┤ │ verde #0F6B41 sobre #D7F1E3 │ 5.49:1 │ 3.0 │ │ azul #1D5A8F sobre #DCEBF8 │ 5.94:1 │ 3.0 │ │ ámbar #8A5307 sobre #FBEBD0 │ 5.39:1 │ 3.0 │ │ rojo #9C2B26 sobre #FBE2E0 │ 6.12:1 │ 3.0 │ │ gris #5B6B70 sobre #F7F9FA │ 5.26:1 │ 3.0 │ │ (y sobre la fila blanca, sin pastilla): │ │ │ │ verde #0F6B41 / azul #1D5A8F sobre #FFF │ 6.56 · 7.21 │ 3.0 │ │ ámbar #8A5307 / rojo #9C2B26 sobre #FFF │ 6.32 · 7.53 │ 3.0 │ └──────────────────────────────────────────┴─────────┴──────┘ ── TEMA OSCURO (el tinte es translúcido: se compone primero sobre --surface #1B2529 y se mide sobre el resultado) ────── ┌──────────────────────────────────────────┬─────────┬──────┐ │ verde #57C690 sobre #253F39 (tinte .16) │ 5.35:1 │ 3.0 │ │ azul #7FB8E8 sobre #2B3D48 │ 5.32:1 │ 3.0 │ │ ámbar #E3A64E sobre #3B3A2F │ 5.37:1 │ 3.0 │ │ rojo #F0928C sobre #3D3639 │ 5.15:1 │ 3.0 │ │ gris #9BB0B6 sobre #222E33 │ 6.16:1 │ 3.0 │ └──────────────────────────────────────────┴─────────┴──────┘ Peor caso medido: la pastilla sobre una fila ya teñida (--surface-2), donde el tinte se compone sobre #222E33 → 4.59:1 el rojo, 4.78:1 el azul. Sigue por encima del 3:1 exigido a un icono y del 4.5:1 de texto. B12 (04/09/2026) · Todos estos números, y otros 350 pares más, los recalcula `prototipo/pruebas_contraste_b12.py`, que LEE ESTE FICHERO, rehace la cascada de los 4 contextos (claro/oscuro × cliente/panel), compone los tintes translúcidos sobre su fondo real y aplica la fórmula de WCAG 2.1. Si se toca un color aquí, se vuelve a ejecutar: `python pruebas_contraste_b12.py` sale con código 0 solo si no hay ni un fallo. El único cambio de la pastilla gris es su borde (ahora --borde-control, 4.21:1). ============================================================ */ :root { --acc-verde-bg: var(--success-tint); --acc-verde-ico: var(--success-tint-text); --acc-azul-bg: var(--info-tint); --acc-azul-ico: var(--info-tint-text); --acc-ambar-bg: var(--warning-tint); --acc-ambar-ico: var(--warning-tint-text); --acc-rojo-bg: var(--danger-tint); --acc-rojo-ico: var(--danger-tint-text); --acc-gris-bg: var(--surface-2); --acc-gris-ico: var(--text-2); /* B12 · el neutro se dibuja con BORDE, así que ese borde es lo único que identifica el control: necesita 3:1 (antes --border, 1.27:1). */ --acc-gris-borde: var(--borde-control); --acc-cuadro: 36px; /* lado del cuadrado dentro de la zona táctil de 44 */ } /* ============================================================ ÁREA SEGURA · EL CRUCE EN ÁRABE (06/09/2026 · tanda 3 de móvil) `--safe-inicio` y `--safe-fin` son LÓGICOS: «inicio» es por donde empieza a leerse la línea. En árabe eso es la derecha de la pantalla, así que el hueco que hay que reservar al inicio es el de la muesca DERECHA. Sin este cruce, una pantalla en árabe con el teléfono girado apartaría el contenido del lado equivocado y lo dejaría igual de tapado. Se declara aquí y no en cada hoja: las pantallas siguen escribiendo solo `padding-inline-start`, como manda el proyecto. ============================================================ */ [dir="rtl"] { --safe-inicio: var(--safe-derecha); --safe-fin: var(--safe-izquierda); }