/* ══════════════════════════════════════════════════════════════════
DALKEN — LOS TOKENS
La fuente ÚNICA de verdad del sistema: color, letra, radio, aire.
Salió de partials/_dalken_tokens.html en V-3 (23-ago). Movimiento puro: ni una regla
cambió. El orden de carga lo fija en base.html y en el panel
de cocina: LETRA -> TOKENS -> COMPONENTES.
══════════════════════════════════════════════════════════════════ */
/* ====================================================================
DALKEN — SISTEMA DE DISEÑO · FUENTE ÚNICA DE VERDAD
Cómo escribir una página que respete esto: docs/GUIA_TEMPLATES_FRONTEND.md
Nomenclatura única: --accent / --text / --border / --text-muted /
--state-* / --cat-* / --fs-* / --r-*. Los alias legados se eliminaron
en F5; usar siempre estos tokens.
── CHECKLIST DE REBRANDING (cambiar el color de marca) ──
El acento vive en 6 lugares; cambiarlos TODOS re-tematiza la app entera:
1. --accent (aquí abajo, hex)
2. --accent-rgb (aquí abajo, "R, G, B" — el MISMO color que 1)
3. --accent-hover / --accent-soft-bg / --accent-soft-text (tonos del acento)
4. (en — barra del navegador móvil)
5. src/web/app.py → EMAIL_PALETTE["accent"] (correos salientes)
Los assets de marca (favicon, ícono de app, lock-up de correo) NO entran
en esta lista: no heredan --accent, salen de docs/marca/generar_isotipo.py
y se re-exportan con generar_assets.py. Ver DESIGN.md §6.
Fuentes: self-hosteadas en /static/fonts (no hay que tocar nada al
rebrandear salvo que cambie la tipografía).
==================================================================== */
:root {
/* ---- Acento: fuente única de verdad (swap de tema aquí) ---- */
/* ⚠ --accent y --accent-rgb son el MISMO color: cambiar los DOS al cambiar de tema */
--accent: #006885;
--accent-rgb: 0, 104, 133;
--accent-hover: #005675;
--accent-soft-bg: #DFF0F7;
--accent-soft-text: #005C79;
/* Hairline teal de las superficies suaves (banner de bienvenida, sección
abierta, burbuja del operador). Vivía escrito a mano y con CINCO
opacidades distintas para el mismo trabajo (.20 .22 .25 .28); esta es
la única. Las otras se recogen en el barrido de estados de la Fase 4. */
--accent-line: rgba(var(--accent-rgb), .20);
/* ---- Neutros (frío hacia el AZUL-slate; NO hacia el teal-verde) ----
Decisión galería 24-jul: el tinte verde-cian anterior leía «celeste
raro / web barata». Se viró a un slate azulado bajísimo en croma —
análogo al acento pero sin el verde. Ver DESIGN.md §2 (Neutral). */
--bg: #F5F6F9;
--surface: #FFFFFF;
--surface-alt: #ECEEF3;
--border: #E1E4EB;
--border-strong: #D2D6DF;
--text: #202B2F;
--text-muted: #5F6B70;
--text-subtle: #899499;
/* ---- Estados (independientes del acento; NUNCA reutilizan --accent) ---- */
--state-pending: #F59E0B;
/* ⚠ mismo color que --state-pending: los dos se cambian juntos. Lo pide
el destello de .dk-changed, que necesita el color con alfa. */
--state-pending-rgb: 245, 158, 11;
--state-pending-soft-bg: #FEF4E6;
--state-pending-soft-text: #B45309;
/* Titular sobre el ámbar suave: -soft-text no contrasta lo suficiente
contra su propio fondo. Solo texto de titular, nunca superficies. */
--state-pending-strong-text: #8A6418;
--state-pending-line: #EBD9A8;
--state-approved: #10B981;
--state-approved-rgb: 16, 185, 129;
--state-approved-soft-bg: #E6F7F1;
--state-approved-soft-text: #047857;
--state-approved-line: #CBE0D2;
--state-error: #EF4444;
/* ⚠ mismo color que --state-error (ver la nota de --state-pending-rgb). */
--state-error-rgb: 239, 68, 68;
--state-error-soft-bg: #FDECEC;
--state-error-soft-text: #B91C1C;
--state-error-line: #F3C9C9;
--state-info: #4F46E5;
--state-info-soft-bg: #EEF2FF;
--state-info-soft-text: #3730A3;
--state-info-line: #C7D2FE;
--state-discarded: #94A3B8;
--state-discarded-soft-bg: #F1F0F3;
--state-discarded-soft-text:#6B6675;
/* URGENTE — un ámbar MÁS CALIENTE que --state-pending, a propósito
(V-5). No es un capricho del panel de operador: «pendiente» es un
estado normal del trabajo y «urgente» tiene que gritar más fuerte que
él en la misma pantalla, o el operador deja de mirarlo. Vivía escrito
a mano seis veces en `_operator_css.html` con un comentario que decía
justamente eso; ahora tiene nombre y se puede reusar. */
--state-urgent-soft-bg: #FFFBEB;
--state-urgent-soft-text: #92400E;
--state-urgent-line: #FDE68A;
/* ---- Categorías de mensaje (badges, bordes, dots — un solo hogar) ---- */
--cat-lead: var(--accent);
--cat-lead-soft-bg: var(--accent-soft-bg);
--cat-pregunta: #4A7BA7;
--cat-pregunta-soft-bg: #E8EFF6;
--cat-soporte: #B5872E;
--cat-soporte-soft-bg: #F6EEDD;
--cat-spam: #C0B8AD;
--cat-spam-soft-bg: #EFEBE3;
--cat-spam-soft-text: #8A8073;
/* ⚠ Compañeros en RGB: mismo color que el token de arriba, los dos se
cambian juntos. Misma razón que --state-pending-rgb — Analítica tiñe
la fila de cada categoría con alfa, y sin esto los tres colores
estaban escritos a mano ahí, sin manera de enterarse de un cambio.
El de SPAM además CORRIGE: decía 180,170,155, que no era este color
ni ningún otro del sistema. */
--cat-pregunta-rgb: 74, 123, 167;
--cat-soporte-rgb: 181, 135, 46;
--cat-spam-rgb: 192, 184, 173;
/* Variante oscurecida para NÚMEROS CHICOS sobre fondo claro: el color de
la categoría no llega a 4.5:1 en cuerpo pequeño. Misma idea y misma
razón que --state-pending-strong-text. */
--cat-pregunta-strong-text: #3C6A93;
--cat-soporte-strong-text: #9A7126;
/* ---- Sombra ----
Las sombras se tiñen con la MISMA tinta del sistema (--text #202B2F),
no con un negro puro ni con un neutro aparte: una sombra gris-neutra
sobre superficies frías se ve sucia. Estaba hardcodeada como
rgba(42,37,48) — el neutro cálido de la marca violeta anterior, que
quedó huérfano al pasar a teal y a neutros fríos. */
--shadow-rgb: 32, 43, 47;
/* ---- Radios — escala «Ajustada» (galería 28-jul, Fase 2) ----
Cinco medidas para toda la app, y ni una escrita a mano. Antes había
CINCO radios de tarjeta conviviendo (12·14·16·18·20): tres de ellos
literales en la plantilla, y en Perfil, Voz y Catálogo dos aparecían en
la misma pantalla. De las 205 esquinas medidas, 68 no pasaban por token.
Nota histórica: `--r-card` NO existía pese a que DESIGN.md lo nombraba
—escribirlo dejaba la esquina en 0—, y el 14 escrito a mano por todos
lados nació de ahí. Ahora existe y es el ÚNICO radio de contenedor.
Se eliminaron --r-lg / --r-xl / --r-2xl: eran nombres distintos para el
mismo trabajo. ⚠️ El portal del comensal NO se rige por esta escala:
tiene la suya en partials/_portal_theme.html (es del restaurante, no de
Dalken) y ahí `var(--r-lg)` sigue resolviendo local. */
--r-card: 10px; /* toda tarjeta o panel: .card .row-card .form-card .step … */
--r-sm: 8px; /* campos, miniaturas, ítems del sidebar, tiles de ícono */
/* Menús flotantes, segmentos y burbujas valen HOY lo mismo que --r-sm
(antes 10). Se declara como ALIAS y no como un segundo literal: dos
`8px` independientes no se mueven juntos, y el que edite uno no tiene
cómo enterarse del otro. El nombre sobrevive porque el trabajo es
distinto; el día que la burbuja se separe del campo, se desata acá. */
--r-md: var(--r-sm);
/* Botones — Diseño B «Nítida» (galería 14-jul): cuadrados/decididos */
--r-btn: 7px;
--r-btn-sm: 6px; /* botón chico, chip, badge */
/* La CÁPSULA (V-1, 23-ago). Faltaba: DESIGN.md la documentaba como
`pill: 999px` desde el primer día, pero el token nunca se declaró, así
que las 73 cápsulas de la app —chips, píldoras de período, puntos,
barras de progreso— se escribieron a mano, y en dos sabores: 54 veces
`999px` y 19 veces `99px`. Se ven IGUAL (el navegador recorta el radio
a la mitad del lado corto, y ninguna de las 19 pasa de 30px de alto),
pero son dos convenciones que nadie eligió. Un valor absurdamente
grande es el modismo correcto: la cápsula sigue al alto del elemento
sola, sin que nadie recalcule nada. */
--r-pill: 999px;
/* ---- Altura de control ÚNICA (26-jul) ----
Pico le fija `height` al desde SUS tokens y NO se la fija al