/* ========================================================================== LeadSync - Tokens de color Las variables de los dos temas. El tema se fija en ; el oscuro es el de por defecto y el claro lo redefine entero. OJO CON EL ORDEN: estos ficheros se enlazan en index.html en un orden concreto y ese orden ES la cascada. Mover un enlace de sitio cambia que regla gana entre dos de la misma especificidad. Si anades uno nuevo, ponlo donde le toque, no al final. ========================================================================== */ /* --- Tema oscuro (por defecto) --- */ :root, :root[data-theme="dark"] { --bg: #0b141a; --bg-panel: #111b21; --bg-elev: #202c33; --bg-hover: #2a3942; --border: #2a3942; --text: #e9edef; --text-dim: #8696a0; --accent: #00a884; --accent-dim: #025c4c; --accent-strong: #06c294; --on-accent: #04140f; --client: #202c33; --bot: #144d38; --operator: #005c4b; --system: #1d2a30; --danger: #f15c6d; /* Enlace dentro de una burbuja (item B112): el azul de WhatsApp Web en oscuro. */ --enlace: #53bdeb; /* Presencia del globito de operador: conectado y desconectado. */ --presencia-on: #06c294; --presencia-off: #55636b; /* Borde un punto más marcado, para que un contorno siga leyéndose cuando el fondo de debajo cambia (p. ej. una fila con el ratón encima). */ --border-strong: #3f4d55; --warn: #e2b53e; --warn-bg: #3a2e12; /* Resaltado de coincidencias de la lupa. Va aparte de --warn porque en claro este necesita ser un amarillo CLARO de rotulador y --warn es un ocre oscuro (item 35). */ --hit-bg: #e2b53e; --hit-fg: #17212b; --info: #4a9eff; --info-bg: rgba(58, 142, 230, .14); --info-border: #3a8ee6; --chat-bg: #0b141a; --shadow: rgba(0, 0, 0, .4); /* El tooltip se lee SOBRE el tema, no dentro de una tarjeta: en oscuro va un punto mas claro que el panel para despegarse del fondo. */ --tooltip-bg: #2a3942; --tooltip-text: #e9edef; --author-client: #7fb3ff; --author-bot: #7bf2d3; --badge-human-bg: #5a3a12; /* Colores por TIPO de notificación del bot (item 29). Se eligen bien separados entre sí —no en degradado del mismo tono— porque su trabajo es distinguirse de un vistazo. */ --n-transferencia: #ffa94d; --n-espera: #e2b53e; --n-presupuesto: #06c294; --n-cliente: #7fb3ff; --n-vinculo: #c99cf5; --n-memoria: #6ed0d0; /* COLOR POR MODO DEL BOT (item A4). Verde = atiende. Azul = redacta y espera a una persona. Gris = no interviene. Es una LEYENDA, no decoración: el mismo modo tiene el mismo color en el menú del chat, en Configuración y en los distintivos de la lista. Hasta ahora "Activo" y "Asistencia" salían del MISMO color, así que el color no distinguía nada. Van en PAREJA (color de texto + fondo del distintivo) y con valores propios por tema en vez de reusar --accent-dim/--author-bot, que es lo que había. Medido: en tema claro esa pareja daba 4.22:1 y el distintivo es de 10px, o sea por debajo del 4.5:1 que pide WCAG AA para texto pequeño. Las seis parejas de aquí van de 5.33:1 a 7.00:1. */ --modo-activo: #7bf2d3; --modo-activo-bg: #025c4c; --modo-asistencia: #9ecbff; --modo-asistencia-bg: #14395e; --modo-entrenamiento: #c6adff; --modo-entrenamiento-bg: #36234f; --modo-apagado: #9fb0bb; --modo-apagado-bg: #2a3942; /* Estado de una plantilla de WhatsApp (item A13). Son ALIAS y no valores nuevos: el verde, el ámbar y el rojo de esta interfaz ya están medidos para AA en los dos temas, y copiar sus números aquí los dejaría desincronizados el día que se retoque uno. Las propiedades personalizadas se resuelven AL USARSE, así que cada alias sigue solo el valor del tema que gane. */ --plantilla-ok: var(--modo-activo); --plantilla-espera: var(--warn); --plantilla-mal: var(--danger); /* Píldora de la hora de un sticker (item 32): el sticker va sin burbuja, así que la hora necesita su propio fondo para leerse sobre el chat. */ --sticker-meta-bg: rgba(17, 27, 33, .75); /* ancho del panel de depuración (ajustable por arrastre) */ --debug-w: 380px; /* ancho de la lista de chats (ajustable por arrastre, item 30) */ --sidebar-w: 340px; /* ancho del rail de iconos y del divisor arrastrable. ESTABAN ESCRITOS A MANO en cada sitio que los necesitaba -56 px en seis reglas del rail, 5 px en el divisor y otra vez en la barra del audio-, y de ahi salio el fallo que el vio: la barra del audio sumaba el divisor y la lista, pero se olvidaba del rail, asi que empezaba 56 px antes que el chat y se metia sobre la lista. NO_REPETIR 37. */ --rail-w: 56px; --resizer-w: 5px; /* DONDE EMPIEZA LA COLUMNA DEL CHAT (item B37). Lo consume TODO lo que va con position:fixed encima del chat y no debe invadir la lista; hoy, la barra del audio. La barra se sumaba los anchos ella sola y se olvidó del rail el día que el rail apareció, así que se metía 56px dentro de la lista. Con la cuenta en un solo sitio, lo que flote mañana consume la variable y no hay nada que recordar. LOS TRES SUMANDOS POR SU TOKEN, sin un número a mano. La fórmula llevaba `var(--rail-w, 56px)` —el 56 otra vez— y `+ 5px` —el divisor otra vez—, tres líneas debajo de donde los dos se declaran: o sea, el mismo fallo que el bloque de arriba dice estar arreglando. El día que el divisor cambiara de ancho, esta cuenta se habría quedado con el viejo, en silencio. Lo vigila `scripts/check-borde-del-chat.py`, que ahora rechaza un número suelto o un valor de reserva aquí dentro. */ --chat-left: calc(var(--rail-w) + var(--sidebar-w) + var(--resizer-w)); /* duración ÚNICA de la transición claro/oscuro (item 13) */ --theme-t: .25s; /* DURACIONES DE MOVIMIENTO, en un solo sitio (06-10). Cada menú nuevo traía las suyas (el filtro por operador abría en .18s y cerraba en .18s mientras el resto iba a .16/.12) y se notaba. Quien anime un menú, un popover o un resalte las LEE de aquí. */ --dur-pop-in: .16s; --dur-pop-out: .12s; --dur-hover: .12s; /* TONOS DE PERSONA (avatar y nombre en el globo de un grupo, B129). Iguales en los dos temas: es el color con el que se reconoce a alguien. */ --av-1: #7fb3ff; --av-2: #6ed0d0; --av-3: #c99cf5; --av-4: #ffa94d; --av-5: #8fd694; --av-6: #f5a3c7; --av-7: #e2c65e; --av-8: #9fb0f0; /* VERDE DE «SALIÓ BIEN». Se usaba en cinco sitios (marca ✓ de los campos, difusiones, contactos) sin estar definido, así que el color no se aplicaba nunca (06-10). Lee el acento: el mismo verde en los dos temas. */ --ok: var(--accent); /* Scrollbar neutro e IGUAL en ambos temas: así no "salta" al alternar tema (los scrollbars no admiten transition; la solución es que no cambien). */ --scrollbar-thumb: rgba(128, 138, 148, .45); --scrollbar-thumb-hover: rgba(128, 138, 148, .72); /* La corona del admin tiene COLOR PROPIO y no reusa el ámbar de advertencia: una corona no avisa de nada, y compartir variable con los estados haría que cambiar el color de los avisos cambiara también la corona. En claro, además, ese ámbar sale casi marrón sobre fondo blanco y no se lee como dorado. */ --corona: #f5c542; --notif: #e5484d; /* Lo que hace el bot se pinta con --info, el azul de INFORMACIÓN que ya existe aquí abajo. No lleva token propio a propósito: se creó uno (#3d8bfd) y era el mismo azul de --info con otro nombre, o sea dos tokens casi iguales esperando a separarse solos. */ } /* --- Tema claro --- */ :root[data-theme="light"] { /* JERARQUÍA DE SUPERFICIES (convención de industria; en oscuro ya se cumplía y en claro NO): el FONDO de la página es el más oscuro de los tres y lo que se apoya encima es más claro. Antes --bg y --bg-elev eran EL MISMO gris (#f0f2f5), así que toda tarjeta, entrada de texto y panel desaparecía contra la página en tema claro. · --bg el suelo: gris. Nunca lleva contenido directamente. · --bg-panel las columnas grandes (sidebar, chat): blanco. · --bg-elev lo que FLOTA sobre el suelo (tarjetas, inputs, encabezados de tabla): blanco, para despegarse del gris de abajo. · --bg-hover el gris de interacción, más marcado que el suelo para que se note. */ --bg: #eef1f4; --bg-panel: #ffffff; --bg-elev: #ffffff; --bg-hover: #e6eaee; --border: #dfe3e7; --corona: #d99e00; --notif: #d32f38; --text: #111b21; --text-dim: #667781; --accent: #00a884; --accent-dim: #d1f4e0; --accent-strong: #017561; --on-accent: #ffffff; --client: #ffffff; --bot: #eaf7f0; --operator: #d9fdd3; --system: #fff3d6; --danger: #d3364a; /* Enlace dentro de una burbuja (item B112): el azul de WhatsApp Web en claro. */ --enlace: #027eb5; --presencia-on: #16a34a; --presencia-off: #b3bcc2; --border-strong: #c3cad1; --warn: #9a7a12; --warn-bg: #fdf6dd; --hit-bg: #ffe680; --hit-fg: #2b2200; --info: #1667c7; --info-bg: rgba(22, 103, 199, .10); --info-border: #2f7fd6; --chat-bg: #efeae2; --shadow: rgba(0, 0, 0, .15); /* EN CLARO SE INVIERTE Y ES A PROPOSITO: oscuro sobre claro. Tiene nombre propio en la industria -es el rol `inverse surface` de Material Design 3-, y el motivo es que un tooltip flota SOBRE cualquier cosa: una foto, un globo verde, una tarjeta. Si tomara el color del tema se perderia contra la mitad de lo que tiene detras. Invertido se lee siempre, y ademas dice de un vistazo que no es una tarjeta mas de la pagina. El texto va a blanco puro y no al gris del tema oscuro: el contraste se calcula contra este fondo, no contra el panel. */ --tooltip-bg: #2a3942; --tooltip-text: #ffffff; --author-client: #2b6cb0; --author-bot: #087f5b; --badge-human-bg: #fbe7c6; /* Los mismos tipos, oscurecidos: sobre fondo claro los tonos del tema oscuro no tienen contraste suficiente para leerse. */ --n-transferencia: #c9600a; --n-espera: #9a7a12; --n-presupuesto: #0a7a5e; --n-cliente: #1667c7; --n-vinculo: #7a3fb5; --n-memoria: #14807f; /* Los mismos tres modos, oscurecidos para fondo claro (item A4). */ --modo-activo: #05654a; --modo-activo-bg: #d1f4e0; --modo-asistencia: #10528f; --modo-asistencia-bg: #dbe9f9; --modo-entrenamiento: #6b3fa0; --modo-entrenamiento-bg: #eee2fa; --modo-apagado: #51606a; --modo-apagado-bg: #e6eaee; --sticker-meta-bg: rgba(255, 255, 255, .9); }