/* ========================================================================= LYDENT — tokens.css ÚNICA fuente de verdad de color, tipografía, espaciado, radio y densidad. Ningún otro fichero del proyecto puede declarar un literal de color, un tamaño de fuente ni un valor de espaciado. Si lo hace, es un bug. ========================================================================= */ :root { /* ---------- NEUTRALES ---------------------------------------------- Grafito ligeramente frío. No es el gris-azulado de Bootstrap. Toda la interfaz vive aquí. El color es la excepción, no la base. */ --n-0: #FFFFFF; --n-25: #FAFBFB; --n-50: #F4F6F6; --n-100: #E8ECEC; --n-200: #D4DADA; --n-300: #B4BDBD; --n-400: #8B9695; --n-500: #697372; --n-600: #4E5756; --n-700: #39403F; --n-800: #242928; --n-900: #141817; /* ---------- MARCA: AQUÍ NO ------------------------------------------ Las --brand-* NO viven en este fichero. Este sistema sirve a dos productos independientes (Lydent y OdontoHR) que comparten el SISTEMA y no comparten la MARCA. Cada uno declara sus --brand-* en static/design/brand/.css, que se carga inmediatamente DESPUÉS de este fichero. (Dentalpartners queda excluido: tiene cara propia.) Este fichero no debe contener nunca un literal de marca: si lo hace, un producto hereda en silencio la identidad de otro. Ver DESIGN.md §2 y docs/rediseno_visual_lydent_plan.md §1.5. */ /* ---------- SEMÁNTICOS --------------------------------------------- Cinco y no más. Nunca decorativos: si un color no informa, sobra. Cada uno lleva su variante de fondo para badges y filas. */ --ok: #157F5B; --ok-bg: #E4F2EC; --warn: #B4720A; --warn-bg: #FBF0DC; --risk: #B3261E; --risk-bg: #F9E5E4; --info: #1A5FA8; --info-bg: #E4EDF7; --idle: #697372; --idle-bg: #F0F2F2; /* ---------- ACENTO -------------------------------------------------- ÚNICO y de plataforma. NO se sobrescribe en apps/.css: una sub-app que redefina --accent está rompiendo la coherencia del sistema, que es justo lo que este rediseño viene a arreglar. Aparece en: navegación (barra + ítem activo), acción primaria, fila seleccionada, anillo de foco y logotipo. En ningún otro sitio: en bordes, iconos y fondos deja de orientar y pasa a ser ruido. */ --accent: var(--brand-500); --accent-600: var(--brand-600); --accent-bg: var(--brand-50); --accent-nav: var(--brand-900); /* ---------- SERIES DE GRÁFICO --------------------------------------- CINCO ranuras categóricas en ORDEN FIJO, todas de la mitad fría de la rueda. Rehechas el 2026-08-06 tras una observación del CEO —«los colores tienen sentido, pero no tienen nada que ver con la paleta de la app»— que al medirla destapó un segundo problema más serio que el estético. ───────────────────────────────────────────────────────────────────── LO QUE SE MIDIÓ, Y POR QUÉ SON CINCO Y NO OCHO ───────────────────────────────────────────────────────────────────── 1. La paleta anterior no solo desentonaba: **RIMABA CON TRES SEMÁNTICOS**. Su azul estaba a ΔE 9,6 de --info, su naranja a 10,7 de --warn y su aqua a 14,2 de --ok. En un panel donde conviven un gráfico y una tabla de badges, eso es una barra que se parece a un estado. 2. Al buscar hueco se comprobó que **los tonos de 30° a 180° están ocupados**: ahí viven --warn, --ok, --risk y los tres verdes de marca retirados. O sea que todos los naranjas, amarillos y verdes están vetados, y lo que queda libre es la mitad fría (185°–355°) más los rosas. Que es, exactamente, el barrio del índigo de marca: la restricción que parecía estética resultó ser la que da la coherencia. 3. En esa mitad **no caben ocho** ranuras por encima del suelo de croma: los teales y azules se quedan sin saturación. Y no hacía falta que cupieran: medido sobre los 22 gráficos, la ranura 1 se usa 13 veces, la 2 nueve, la 3 siete, y la 4 y la 5 una vez cada una. Solo dos roscos pedían más, y un rosco de siete sectores ya es un mal gráfico. Lo que pasa de cinco va a «Otros» en gris. Verificación (validador de la guía de gráficos, sobre blanco): · separación por daltonismo, peor par adyacente ΔE 11,7 — antes 9,1 · visión normal, peor par adyacente ΔE 20,8 — suelo 15 · distancia mínima a CUALQUIER semántico, al acento y a los verdes retirados: ΔE 15,3 — antes 9,6 · una sola ranura por debajo de 3:1 sobre blanco (antes tres), y el arquetipo C siempre pone la tabla debajo, que es el apoyo que exige. El ORDEN sigue siendo el mecanismo de seguridad, no la estética: al probar otras dos permutaciones de estos mismos cinco tonos, el par rosa↔teal caía a ΔE 6,8. No se reordenan. */ --viz-1: #7f76dc; /* índigo — la familia de la marca */ --viz-2: #00b5b5; /* teal */ --viz-3: #994b9e; /* ciruela */ --viz-4: #359bd9; /* azul */ --viz-5: #d76a87; /* rosa */ /* Magnitud: UN solo tono, claro → oscuro, y ese tono es el de la marca. Nunca un arcoíris: no tiene orden perceptivo y sus extremos se confunden con daltonismo, que es justo lo que un mapa de calor necesita distinguir. */ --viz-seq-1: #e3e6fc; --viz-seq-2: #c5caf5; --viz-seq-3: #9da4e9; --viz-seq-4: #6f73d7; --viz-seq-5: #4746a5; /* Polaridad: dos polos y un GRIS en medio, para que el cero se lea como cero. Los polos son teal y ciruela, no el clásico naranja↔azul: el naranja es territorio de --warn. */ --viz-div-neg: #00969f; --viz-div-mid: #D4DADA; --viz-div-pos: #aa55a4; /* ---------- TIPOGRAFÍA ---------------------------------------------- Plex Sans está diseñada para datos densos y su numeración tabular es excelente. Condensed se usa SOLO para micro-etiquetas y cabeceras de columna: comprime la tabla y es la firma visual del sistema. */ --font-ui: "IBM Plex Sans", system-ui, sans-serif; --font-cond: "IBM Plex Sans Condensed", "IBM Plex Sans", sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, monospace; --fs-micro: 0.6875rem; /* 11px — etiquetas condensadas en mayúscula */ --fs-xs: 0.75rem; /* 12px — metadatos, ayudas */ --fs-sm: 0.8125rem; /* 13px — celda de tabla en modo compacto */ --fs-base: 0.875rem; /* 14px — cuerpo de interfaz */ --fs-md: 1rem; /* 16px — cuerpo de lectura, formularios */ --fs-lg: 1.25rem; /* 20px — título de sección */ --fs-xl: 1.625rem; /* 26px — título de página */ --fs-2xl: 2.125rem; /* 34px — SOLO cifra de KPI (arquetipo C) */ --lh-tight: 1.25; --lh-base: 1.5; --track-micro: 0.06em; /* tracking de las micro-etiquetas */ /* ---------- ESPACIADO (base 4) --------------------------------------- */ --s-1: 0.125rem; /* 2px */ --s-2: 0.25rem; /* 4px */ --s-3: 0.375rem; /* 6px */ --s-4: 0.5rem; /* 8px */ --s-5: 0.75rem; /* 12px */ --s-6: 1rem; /* 16px */ --s-7: 1.25rem; /* 20px */ --s-8: 1.5rem; /* 24px */ --s-9: 2rem; /* 32px */ --s-10: 2.5rem; /* 40px */ --s-11: 3rem; /* 48px */ /* ---------- RADIO ---------------------------------------------------- Pequeño a propósito. Los radios grandes desperdician ancho en tablas densas y hacen que el software profesional parezca una app de consumo. */ --r-sm: 3px; --r-md: 5px; --r-lg: 8px; /* solo modales y hojas laterales */ --r-pill: 999px; /* solo badges de estado */ /* ---------- ELEVACIÓN ------------------------------------------------ Las tarjetas NO llevan sombra: se separan con borde y escalón de fondo. La sombra solo indica que algo flota sobre el documento. */ --sh-overlay: 0 8px 24px -6px rgb(20 24 23 / 0.18), 0 2px 6px -2px rgb(20 24 23 / 0.10); /* Velo del modal. Vive aquí y no en components.css porque es un literal de color, y esos solo se declaran en este fichero. */ --scrim: rgb(20 24 23 / 0.42); /* ---------- BORDES --------------------------------------------------- */ --bd: 1px solid var(--n-100); /* hairline: filas, separadores */ --bd-strong: 1px solid var(--n-200); /* contorno de contenedor */ --bd-w-signal: 3px; /* grueso del borde que ES señal: avisos y el canto de una etapa */ /* ---------- FOCO ----------------------------------------------------- Siempre visible. Nunca outline:none sin sustituto. */ --focus: 0 0 0 2px var(--n-0), 0 0 0 4px var(--accent); /* ---------- DENSIDAD ------------------------------------------------- Modo COMPACTO por defecto (valores de :root). El modo CÓMODO se activa con [data-density="comfortable"] en o en un contenedor. */ --row-h: 32px; --cell-pad-y: var(--s-2); --cell-pad-x: var(--s-5); --cell-fs: var(--fs-sm); --ctl-h: 28px; /* alto de inputs y botones */ /* ---------- LAYOUT ---------------------------------------------------- */ --nav-w: 248px; --nav-w-min: 56px; /* colapsada */ --topbar-h: 48px; --content-max: 1600px; /* las vistas de lectura se limitan; las tablas no */ /* El ajuste se lee en columna estrecha (arquetipo E). No es --content-max dividido: un formulario de configuración se lee como texto, y una etiqueta con su ayuda debajo pierde la relación con su campo en cuanto la línea se estira. 880px deja caber dos campos por fila y ni uno más. */ --form-max: 880px; /* Las dos columnas fijas del panel dividido (arquetipo D). El índice de sesiones tiene que caber un nombre y una hora sin partirse, y el aparte es contexto: si se ensancha empieza a competir con el hilo, que es donde se trabaja. Se declaran aquí y no en el arquetipo porque son medidas de layout, como --nav-w. */ --conv-w: 300px; --aparte-w: 280px; /* ---------- MOVIMIENTO ------------------------------------------------ Corto y funcional. Confirma un cambio de estado, no entretiene. */ --dur-fast: 90ms; --dur-base: 150ms; --ease: cubic-bezier(0.2, 0, 0.2, 1); } [data-density="comfortable"] { --row-h: 40px; --cell-pad-y: var(--s-4); --cell-pad-x: var(--s-6); --cell-fs: var(--fs-base); --ctl-h: 34px; } /* El compacto vuelve a declararse como bloque propio, idéntico a :root, para que la densidad se pueda BAJAR dentro de un contenedor cómodo y no solo subir. Lo pidió Analytics (arquetipo C, 2026-08-06): la página entera es cómoda por contrato —se lee, no se recorre—, pero sus tablas de detalle mensual llegan a catorce columnas y con celdas de 40px no caben ni en escritorio. Sin este bloque la única forma de recuperar la densidad dentro de una región cómoda sería reescribir los cinco valores a mano en la hoja de la app, que es declarar literales fuera de este fichero. */ [data-density="compact"] { --row-h: 32px; --cell-pad-y: var(--s-2); --cell-pad-x: var(--s-5); --cell-fs: var(--fs-sm); --ctl-h: 28px; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; } } /* ========================================================================= NO HAY ACENTOS POR APP Aquí vivía una tabla de catorce acentos, uno por sub-app, para que se supiera en qué app estabas sin leer el título. Se retira (2026-08-02): Lydent es UNA app de cara al usuario, y no todos los usuarios ven todas las sub-apps, así que la variedad de color no orientaba — solo hacía que el producto pareciese catorce productos. Lo que diferencia visualmente a una sub-app es su ARQUETIPO: Stock es una tabla a ancho completo con filtros fijos, Mensajería es un panel dividido con el compositor anclado abajo. La forma sigue a la función; el color no. Ver DESIGN.md §3 y §5. ========================================================================= */