/* ============================================================ TRAMO · Design tokens ------------------------------------------------------------ Fuente única de color, tipografía, espacio y movimiento. Aquí no vive ninguna regla de componente (ver components.css). La app se usa en cuatro contextos con densidades distintas. La densidad se declara con data-density en , no con CSS por pantalla: (sin atributo) PC central y escritorio · mouse y teclado data-density="touch" Tablet de operario · guantes data-density="wall" monitor_planta · lectura a distancia Los colores de estado (corriendo / paro / alerta) son FUNCIONALES. El acento de marca es índigo justamente para no competir con ellos. ============================================================ */ :root { color-scheme: dark; /* --- Marca ------------------------------------------------- Toda la rampa se deriva de DOS variables: tono y croma. Cambiar --brand-hue rota el color principal de la app entera, y la escala de luminancia se mantiene, así que los contrastes siguen funcionando con cualquier tono. Se usa OKLCH y no HSL porque en OKLCH la luminancia es perceptualmente uniforme: en HSL un amarillo al 50 % se ve mucho más claro que un azul al 50 %, y la rampa se rompería al cambiar de tono. El valor por defecto (268) es el índigo de Tramo. Se cambia en caliente desde el selector del navbar; ver static/js/tramo-theme.js. ----------------------------------------------------------- */ --brand-hue: 268; --brand-chroma: 0.19; --brand-50: oklch(0.97 calc(var(--brand-chroma) * 0.18) var(--brand-hue)); --brand-200: oklch(0.88 calc(var(--brand-chroma) * 0.45) var(--brand-hue)); --brand-400: oklch(0.75 calc(var(--brand-chroma) * 0.85) var(--brand-hue)); --brand-500: oklch(0.69 calc(var(--brand-chroma) * 0.95) var(--brand-hue)); --brand-600: oklch(0.63 var(--brand-chroma) var(--brand-hue)); --brand-700: oklch(0.55 var(--brand-chroma) var(--brand-hue)); --brand-900: oklch(0.38 calc(var(--brand-chroma) * 0.75) var(--brand-hue)); --accent: var(--brand-600); --accent-hover: var(--brand-500); --accent-active: var(--brand-700); --accent-contrast: #ffffff; /* Tintes translúcidos: se componen sobre cualquier superficie. */ --accent-tint: color-mix(in oklab, var(--brand-600) 14%, transparent); --accent-tint-hover: color-mix(in oklab, var(--brand-600) 22%, transparent); /* --- Superficies ------------------------------------------ */ /* Escalera de elevación: la profundidad la da el nivel, no la sombra. Cada peldaño sube ~2-3% de luminancia. */ --bg: #0a0b0d; --surface-1: #101216; --surface-2: #171a20; --surface-3: #1e222a; --surface-4: #262b34; --overlay-hover: rgba(255, 255, 255, 0.04); --overlay-active: rgba(255, 255, 255, 0.07); --scrim: rgba(6, 7, 9, 0.72); /* --- Bordes ----------------------------------------------- */ --border: #232830; --border-strong: #333a45; --border-subtle: #1a1e25; --focus-ring: var(--brand-400); /* --- Texto ------------------------------------------------ */ --text: #e9ecf1; --text-muted: #99a1ae; --text-subtle: #6b7280; --text-disabled: #4b525d; --text-on-accent: #ffffff; /* --- Estado (semántico, nunca decorativo) ----------------- */ --run: #34d399; /* corriendo · conforme */ --run-tint: color-mix(in oklab, #34d399 14%, transparent); --warn: #fbbf24; /* alerta · por vencer */ --warn-tint: color-mix(in oklab, #fbbf24 14%, transparent); --stop: #f87171; /* paro · no conforme */ --stop-tint: color-mix(in oklab, #f87171 14%, transparent); --idle: #64748b; /* inactivo · sin sesión */ --idle-tint: color-mix(in oklab, #64748b 16%, transparent); --info: var(--brand-400); --info-tint: var(--accent-tint); /* --- Avance de una orden ---------------------------------- Eje distinto al de arriba. Los de arriba describen a la MÁQUINA en este instante (corriendo, en paro, en alerta); estos describen a la ORDEN a lo largo de su vida: --busy la orden está en curso, aún queda trabajo --done la orden está cerrada, no queda nada que hacer Naranja para en curso y verde para terminada, que es como se lee en planta: el verde es la meta, no el estado normal. Ojo al usarlos: --busy es vecino de --warn en la rueda. No poner los dos en la misma tarjeta sin algo más que el color (icono o texto) que los separe. ---------------------------------------------------------- */ --busy: #fb923c; /* Se deriva de la variable, no del literal, para que el tema claro arrastre también el tinte al redefinir --busy. */ --busy-tint: color-mix(in oklab, var(--busy) 14%, transparent); --done: var(--run); --done-tint: var(--run-tint); /* --- Tipografía ------------------------------------------- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* Mono para folios, referencias y códigos de recurso. */ --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; /* Escala 1.200 (minor third) anclada en 14px. */ --text-2xs: 0.6875rem; /* 11px · etiquetas de tabla densa */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px · cuerpo por defecto */ --text-md: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.375rem; /* 22px */ --text-2xl: 1.75rem; /* 28px */ --text-3xl: 2.25rem; /* 36px */ --text-metric: 2.5rem; /* 40px · contadores y OEE */ --text-metric-lg: 3.5rem; /* 56px */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --leading-tight: 1.15; --leading-snug: 1.35; --leading-normal: 1.55; /* A mayor cuerpo, menos espaciado óptico hace falta. */ --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.04em; --tracking-caps: 0.08em; /* --- Espaciado (base 4px) --------------------------------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; /* --- Radios ----------------------------------------------- */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-full: 999px; /* --- Sombras ---------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.45); --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55); --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.65); /* --- Movimiento ------------------------------------------- */ /* Curvas propias: las nativas de CSS son demasiado blandas y le restan intención al movimiento. Nunca usar ease-in en UI: arranca lento justo en el instante que el usuario mira. */ --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); /* Duraciones por tipo de elemento, no genéricas. */ --dur-press: 140ms; --dur-tooltip: 160ms; --dur-menu: 200ms; --dur-modal: 260ms; --dur-drawer: 380ms; /* --- Ergonomía ------------------------------------------- */ /* Por defecto: mouse y teclado (PC central y escritorio). */ --control-h: 36px; /* alto de inputs y botones */ --control-h-sm: 30px; --control-h-lg: 44px; /* acción primaria */ --touch-min: 32px; /* target mínimo clicable */ --row-h: 38px; /* fila de tabla densa */ /* --- Layout ----------------------------------------------- */ --navbar-h: 56px; --content-max: 1600px; --content-pad: var(--space-6); --z-sticky: 100; --z-navbar: 200; --z-dropdown: 300; --z-scrim: 400; --z-modal: 500; --z-toast: 600; } /* ------------------------------------------------------------ Tema claro No es un invertido mecánico: en planta se usa de día junto a ventanas, así que sube el contraste en vez de bajarlo. ------------------------------------------------------------ */ :root[data-theme='light'] { color-scheme: light; --bg: #f7f8fa; --surface-1: #ffffff; --surface-2: #f2f4f7; --surface-3: #e8ebf0; --surface-4: #dde1e9; --overlay-hover: rgba(10, 11, 13, 0.04); --overlay-active: rgba(10, 11, 13, 0.07); --scrim: rgba(16, 18, 22, 0.45); --border: #dfe3ea; --border-strong: #c3cad6; --border-subtle: #ebeef3; --text: #14171c; --text-muted: #5a6472; --text-subtle: #808b9a; --text-disabled: #aab2be; --accent: var(--brand-700); --accent-hover: var(--brand-600); --accent-active: var(--brand-900); /* Estados oscurecidos para sostener contraste AA sobre claro. */ --run: #0d9668; --warn: #b45309; --stop: #dc2626; --idle: #64748b; --busy: #c2410c; --shadow-sm: 0 1px 2px rgba(16, 18, 22, 0.06); --shadow-md: 0 4px 12px rgba(16, 18, 22, 0.08); --shadow-lg: 0 12px 32px rgba(16, 18, 22, 0.12); --shadow-xl: 0 24px 64px rgba(16, 18, 22, 0.16); } /* ------------------------------------------------------------ Densidad · TÁCTIL Tablets de operario. Se opera con guantes y la mano tapa parte de la pantalla, así que todo crece y el hover deja de ser señal. ------------------------------------------------------------ */ :root[data-density='touch'] { --text-sm: 1rem; --text-md: 1.125rem; --text-lg: 1.25rem; --text-xl: 1.5rem; --control-h: 56px; --control-h-sm: 48px; --control-h-lg: 68px; /* conforme / no conforme / paro */ --touch-min: 48px; --row-h: 64px; --navbar-h: 68px; --content-pad: var(--space-5); --radius-md: 12px; --radius-lg: 16px; } /* ------------------------------------------------------------ Densidad · MURO monitor_planta. Se lee a varios metros y nadie lo toca, así que la tipografía manda y los controles casi desaparecen. ------------------------------------------------------------ */ :root[data-density='wall'] { --text-2xs: 0.875rem; --text-xs: 1rem; --text-sm: 1.25rem; --text-md: 1.5rem; --text-lg: 1.875rem; --text-xl: 2.5rem; --text-2xl: 3.25rem; --text-3xl: 4rem; --text-metric: 5.5rem; --text-metric-lg: 8rem; --row-h: 72px; --navbar-h: 0px; /* el muro no lleva navegación */ --content-pad: var(--space-8); --content-max: none; } /* ------------------------------------------------------------ Movimiento reducido Menos movimiento, no cero. Se conservan opacidad y color porque ayudan a entender el cambio de estado; se quita el desplazamiento. ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { :root { --dur-press: 1ms; --dur-tooltip: 1ms; --dur-menu: 1ms; --dur-modal: 1ms; --dur-drawer: 1ms; } }