/* ========================================================================= Las fichas de la casa — la paleta de Grupo Taekni ------------------------------------------------------------------------- 🔴 **Éste es el único sitio donde se decide un color del sistema.** Lo leen las tres piezas: el chat con un ``, y el tablero y la presentación incrustándolo en el HTML que generan (`agente/marca.hoja()`), porque las dos se guardan y se mandan por correo y tienen que seguir funcionando sueltas. Antes del 3-sep-2026 había **tres sistemas de diseño y ni un valor compartido**: 44 fichas en el chat (`--fondo` `--panel` `--acento` `--riesgo`), 30 en el tablero en inglés (`--ground` `--surface` `--accent` `--crit`) y 38 en la presentación en otro español (`--tinta` `--azul` `--rojo`). `--mono` salía en dos y no valía lo mismo. Y se veía: la marca del chat es verde y la de la presentación era morada — se salía del chat al tablero desde el mismo menú y parecía otro producto. **Ganó la paleta del chat**, y no por antigüedad: es la identidad de Grupo Taekni, es la que el equipo ve todos los días, tenía claro y oscuro resueltos y contrastes ya medidos, y sus nombres están en español como manda la casa. El morado del tablero y de la presentación fue una invención aparte. Cada ficha se declara **dos veces, una por tema, y ni una de menos**: una que solo estuviera en la clara deja un color del tema contrario colgado en medio del oscuro, y no da ningún error. `pruebas_interfaz` compara las dos listas y comprueba además que las tres piezas resuelven los mismos valores. Los cuatro estados del tablero se casaron con los tres del chat y no se inventó un cuarto juego: --crit --crit-bg --crit-line → --riesgo --riesgo-fondo --riesgo-borde --warn --warn-bg --warn-line → --pend --pend-fondo --pend-borde --good --good-bg --good-line → --hecho --hecho-fondo --hecho-borde --neg (sin ninguna acción) → --texto (la tinta más fuerte, que es lo que era: no un color, el peor estado pintado con todo el peso) Lo que **no** vive aquí: lo que es de una sola pieza. Los anchos de columna y de cajón del chat, la escala de letra del tablero, el gris de la mesa sobre la que flotan las láminas. Una ficha que solo usa una pantalla no es del sistema. ========================================================================= */ :root { /* Los dos grises de texto secundario se subieron el 28-ago-2026. Los de antes —#64726E sobre #F4F6F5— daban 4.0:1, por debajo del mínimo legible, y de ahí salían dos quejas que parecían distintas y eran la misma: que el «Dicta o escribe qué pasó» se veía apagado, y que **en el teléfono al sol no se leen ni las horas ni los rótulos**. Ahora pasan de 7:1. */ --fondo: #F4F6F5; --panel: #FFFFFF; --panel-alto: #EDF1EF; --borde: #DBE2E0; --borde-suave: #E7ECEA; --texto: #131C1B; --texto-suave: #47544F; --tenue: #4F5D59; --acento: #10605A; --acento-suave: #DCECE9; --acento-borde: #B6D6D0; --sobre-acento: #FFFFFF; /* Los dos modos, cada uno con su tinta. Se declaran aquí arriba —y no dentro de los bloques de modo— porque **las dos pestañas se ven a la vez**: la que no está puesta tiene que salir con su propio color, o «cada una con su color» se queda en una sola. `--acento` es la del modo en el que estás; de éstas cuelgan la bolita y el filo de cada pestaña, estés donde estés. `--ventas` vale exactamente lo mismo que `--acento` sin modo, que es la identidad de la casa de siempre. */ --ventas: #10605A; --soporte: #17539E; --hecho: #246B4E; --hecho-fondo: #E1EFE7; --hecho-borde: #B9D9C7; --pend: #8B6015; --pend-fondo: #F5EBD8; --pend-borde: #E2CDA0; /* 🔴 La tinta que va ENCIMA de `--pend`, y faltaba. `--acento` y `--riesgo` tenían la suya desde el principio; el estado pendiente no, y el único botón que se rellena con él —«Sí, escríbelo», el que autoriza la escritura en el CRM— llevaba `color: #fff` a mano. En claro daba igual: `--pend` es un ámbar oscuro y el blanco encima da 5,55:1. En oscuro **`--pend` se da la vuelta** —pasa a ser un ámbar claro, porque ahí es tinta sobre fondo oscuro— y el blanco encima se cae a **2,07:1**, por debajo incluso del 3:1 de texto grande. No da ningún error y no se ve en claro: es exactamente la trampa que `docs/71` §2 apunta, un texto que se cae en una sola de las cuatro combinaciones. Medido con la fórmula de la WCAG, no a ojo: 5,55 en claro y 7,40 en oscuro con estos dos valores. */ --sobre-pend: #FFFFFF; --riesgo: #9C3A30; --riesgo-fondo: #F6E3E0; --riesgo-borde: #E5BDB7; --sobre-riesgo: #FFFFFF; --velo: rgba(19,28,27,.42); --sombra: 0 1px 2px rgba(19,28,27,.05), 0 8px 24px -16px rgba(19,28,27,.22); --sombra-alta: 0 2px 6px rgba(19,28,27,.08), 0 18px 40px -22px rgba(19,28,27,.38); --foco: #1E7A72; /* Las tres familias. `--mono` estaba en el chat y en el tablero **con dos listas distintas**: la misma cifra salía con una letra en una pantalla y con otra en la de al lado. */ --display: 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Book Antiqua', Georgia, serif; --cuerpo: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'Roboto Mono', Menlo, monospace; /* Tres radios, y solo tres. Nadie lee «9 px», pero **el ojo sí ve que dos cosas no son del mismo juego**. --radio-chico lo que va DENTRO de otra caja: filas de menú, chips, código, la caja de texto dentro de la barra. --radio la caja en sí: tarjetas, botones, paneles, campos. --radio-redondo lo que es redondo por naturaleza y no por adorno: el avatar, las bolitas, los puntos y las barras de nivel. */ --radio: 4px; --radio-chico: 3px; --radio-redondo: 999px; /* Tres tiempos y una curva, por la misma razón que los radios. --mov-rapido lo que no cambia de sitio: un color o una opacidad al pasar por encima, una barra que sigue un número. --mov lo que entra en su sitio sin venir de fuera: un menú que sale de su botón, la hoja de atajos, una burbuja. --mov-largo lo que recorre la pantalla de verdad: el cajón, que entra desde fuera del borde, y las barras de progreso. --curva arranca deprisa y frena al llegar: el final lento es el que da la sensación de peso. */ --mov-rapido: 120ms; --mov: 160ms; --mov-largo: 220ms; --curva: cubic-bezier(.22, .61, .36, 1); color-scheme: light; } /* El mismo bloque, dos veces: por preferencia del sistema y por elección explícita. Se repite entero a propósito —una ficha que solo estuviera en uno de los dos sitios es exactamente el agujero que estas listas evitan— y las tres piezas comparten la llave: `data-tema` en el `` y `tema` en el `localStorage`. ⚠️ El `:where()` no es decoración: **deja el selector con la especificidad de `:root` a secas**. El tablero y la presentación vuelven a la paleta clara al imprimir y al proyectar, y lo hacen con un bloque `:root` normal; con `:root:not(…)` —que pesa más— ese bloque perdía, y en una máquina con el sistema en oscuro **el tablero salía impreso en negro**. No da error: sale el papel gastado. */ @media (prefers-color-scheme: dark) { :root:where(:not([data-tema="claro"])) { --fondo: #0E1413; --panel: #151D1C; --panel-alto: #1B2523; --borde: #27332F; --borde-suave: #1F2A28; --texto: #E5EDEB; --texto-suave: #A9B8B4; --tenue: #97A6A2; --acento: #55B7AA; --acento-suave: #17302E; --acento-borde: #2A4C48; --sobre-acento: #07211F; --ventas: #55B7AA; --soporte: #6FADEE; --hecho: #6FBE97; --hecho-fondo: #162A22; --hecho-borde: #2A4A3A; --pend: #D9AE58; --pend-fondo: #2C2415; --pend-borde: #4A3D1F; --sobre-pend: #2C2415; --riesgo: #E4907F; --riesgo-fondo: #2E1B18; --riesgo-borde: #513029; --sobre-riesgo: #2A1512; --velo: rgba(0,0,0,.62); --sombra: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.7); --sombra-alta: 0 2px 6px rgba(0,0,0,.5), 0 18px 40px -22px rgba(0,0,0,.9); --foco: #7FCFC3; color-scheme: dark; } } :root[data-tema="oscuro"] { --fondo: #0E1413; --panel: #151D1C; --panel-alto: #1B2523; --borde: #27332F; --borde-suave: #1F2A28; --texto: #E5EDEB; --texto-suave: #A9B8B4; --tenue: #97A6A2; --acento: #55B7AA; --acento-suave: #17302E; --acento-borde: #2A4C48; --sobre-acento: #07211F; --ventas: #55B7AA; --soporte: #6FADEE; --hecho: #6FBE97; --hecho-fondo: #162A22; --hecho-borde: #2A4A3A; --pend: #D9AE58; --pend-fondo: #2C2415; --pend-borde: #4A3D1F; --sobre-pend: #2C2415; --riesgo: #E4907F; --riesgo-fondo: #2E1B18; --riesgo-borde: #513029; --sobre-riesgo: #2A1512; --velo: rgba(0,0,0,.62); --sombra: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -16px rgba(0,0,0,.7); --sombra-alta: 0 2px 6px rgba(0,0,0,.5), 0 18px 40px -22px rgba(0,0,0,.9); --foco: #7FCFC3; color-scheme: dark; } /* ========================================================================= Los dos modos — 9-sep-2026 ------------------------------------------------------------------------- El chat tiene dos pestañas, Ventas y Soporte, y **cambia de color según en cuál estés**. Lo pidió Alejandro con esas palabras. Lo que cambia es el ACENTO y nada más: el fondo, la tinta, los bordes y los tres estados —hecho, pendiente, riesgo— son los mismos en los dos modos y en los dos temas. Meter una segunda paleta entera es de lo que se viene (C1, 3-sep): tres sistemas de diseño y ni un valor compartido. 🔴 **`ventas` vale exactamente lo que valía `:root` sin modo.** Está escrito igualmente, y no dejado al bloque de arriba, para que los dos modos se lean uno al lado del otro y para que nadie tenga que ir a comprobar cuál es «el de por omisión». `pruebas_interfaz` compara los valores resueltos de las tres pantallas y el chat arranca en ventas: si estos números se separaran de los de arriba, esa prueba se pondría roja. ⚠️ **El orden manda, y la forma del selector también.** · Los bloques de modo van AL FINAL, después de los dos de tema. Con la misma especificidad —`:root[data-modo=…]` y `:root[data-tema=…]` pesan igual— gana el último, y es el modo el que tiene que ganar. · Se escribe `[data-modo][data-tema]` y NUNCA `[data-tema][data-modo]`: `agente/marca.oscuras()` busca el bloque oscuro por el texto literal `:root[data-tema="oscuro"]` y se queda con la PRIMERA aparición. Con el otro orden esa función devolvería este bloque en vez de la paleta oscura entera, y la presentación se quedaría sin tema oscuro. No daría ningún error: saldría clara de noche. Los contrastes, medidos —no mirados a ojo— contra `--fondo`, `--panel` y `--panel-alto` de cada tema, con la fórmula de la WCAG: claro acento #17539E → 6.99 / 7.59 / 6.66 (ventas: 6.81 / 7.39 / 6.48) blanco sobre él → 7.59 (ventas: 7.39) acento sobre --acento-suave → 6.14 (ventas: 6.06) foco #2C6BC0 → 4.87 / 5.29 (ventas: 4.74 / 5.14) oscuro acento #6FADEE → 7.88 / 7.26 / 6.66 (ventas: 7.75 / 7.14 / 6.54) sobre-acento → 7.51 (ventas: 7.01) acento sobre --acento-suave → 6.60 (ventas: 5.83) foco #9CC8F5 → 10.63 / 9.80 (ventas: 10.30 / 9.49) Ni uno por debajo del de ventas, que ya estaba medido y en uso. Lo vuelve a comprobar `PruebasElChatSeLeeEnLosDosModos`, recorriendo la pantalla entera en las cuatro combinaciones de modo y tema. ========================================================================= */ :root[data-modo="ventas"] { --acento: #10605A; --acento-suave: #DCECE9; --acento-borde: #B6D6D0; --sobre-acento: #FFFFFF; --foco: #1E7A72; } @media (prefers-color-scheme: dark) { :root[data-modo="ventas"]:where(:not([data-tema="claro"])) { --acento: #55B7AA; --acento-suave: #17302E; --acento-borde: #2A4C48; --sobre-acento: #07211F; --foco: #7FCFC3; } } :root[data-modo="ventas"][data-tema="oscuro"] { --acento: #55B7AA; --acento-suave: #17302E; --acento-borde: #2A4C48; --sobre-acento: #07211F; --foco: #7FCFC3; } :root[data-modo="soporte"] { --acento: #17539E; --acento-suave: #DEE8F6; --acento-borde: #B9CDEA; --sobre-acento: #FFFFFF; --foco: #2C6BC0; } @media (prefers-color-scheme: dark) { :root[data-modo="soporte"]:where(:not([data-tema="claro"])) { --acento: #6FADEE; --acento-suave: #152534; --acento-borde: #2C4864; --sobre-acento: #08192B; --foco: #9CC8F5; } } :root[data-modo="soporte"][data-tema="oscuro"] { --acento: #6FADEE; --acento-suave: #152534; --acento-borde: #2C4864; --sobre-acento: #08192B; --foco: #9CC8F5; }