/* ============================================================ MOBLEX · Design tokens Valores EXACTOS extraídos de la maqueta aprobada por Miguel (Ensamble(2).html). Cada hex/px está verificado contra la maqueta — ver css/DESIGN-SPEC.md para el catálogo completo. Concepto: "mesa de trabajo" — pergamino + pino + ámbar madera. Regla: ningún color/medida suelto en la app; todo se lee de aquí. ============================================================ */ :root { /* ---- Superficies / papel ---------------------------------- */ --bg: #F4F0E9; /* fondo de la app (pergamino cálido) */ --surface: #FFFFFF; /* tarjetas/paneles: BLANCO puro, planos */ --surface-field: #FCFAF5; /* fondo de inputs/select/textarea */ --surface-2: #EFE9DD; /* paneles hundidos / resúmenes */ --surface-track: #EBE4D6; /* riel del segmented toggle */ /* ---- Bordes / divisores ---------------------------------- */ --border: #E7E0D2; /* borde estándar de tarjeta/chip/KPI */ --border-input: #E1D9C8; /* borde de inputs/select/search */ --border-strong: #D3C8B2; /* hover de card/chip */ --border-btn: #C9BFA9; /* borde de botón secundario / dashed */ --border-footer: #E2DACA; /* border-top del footer del panel */ --divider: #F1ECE0; /* divisor interno dentro de tarjetas */ /* ---- Marca: pino (verde carpintería) ---------------------- */ --pine: #15302A; /* primario · sidebar · titulares · toast */ --pine-700: #0F241F; /* pino más profundo (hover; no en maqueta)*/ --pine-300: #2F5D4A; /* pino medio · fondo de avatar */ /* ---- Texto sobre pino ------------------------------------ */ --on-pine: #E8E2D6; /* crema base sobre pino */ --on-pine-bright:#F4F0E9; /* blanco cálido: marca, ítem/chip activo */ --on-pine-dim: #7E9286; /* subtítulo / rol de usuario sobre pino */ --on-pine-nav: #A9B6AB; /* ítem de nav inactivo */ --on-pine-hover: #C7D0C8; /* ítem de nav en hover */ --on-pine-a08: rgba(232,226,214,0.08); /* divisor de fila DENTRO de la card verde (resumen) */ --on-pine-a10: rgba(232,226,214,0.10); /* crema translúcida (bordes/botón icono sobre pino) */ --on-pine-a20: rgba(232,226,214,0.20); /* crema translúcida en hover */ /* ---- Tinta y texto (sobre pergamino/blanco) -------------- */ --ink: #1B2620; /* texto principal */ --ink-2: #42504A; /* texto 2º oscuro (tipo/categoría) */ --muted: #5E6B62; /* texto secundario · labels de input */ --muted-2: #8A9A8E; /* eyebrows de card · placeholders · hints*/ --muted-3: #6B776E; /* metadatos · subtexto de fila */ --muted-cold: #9AA69C; /* thead · icono búsqueda · labels claros */ /* ---- Acento: ámbar madera (la firma) --------------------- */ --amber: #BE8038; /* acento · CTA · folio · dots activos */ --amber-deep: #9A6233; /* texto ámbar / hover */ --amber-ink: #6E4622; /* texto ámbar chico AA sobre amber-tint */ --amber-soft: #D7A45E; /* ámbar claro (PRONTO, labels sobre pino)*/ /* ---- Semánticos: texto · dot (más brillante) · tint ------ */ --success: #2F5D4A; --success-dot: #3E7C5A; --success-tint: rgba(62,124,90,0.13); --warning: #9A6233; --warning-dot: #BE8038; --warning-tint: rgba(190,128,56,0.15); --danger: #A6493A; --danger-dot: #B0472F; --danger-tint: rgba(176,71,47,0.12); --info: #5A6E8C; --info-dot: #7C8CA6; --info-tint: rgba(90,110,140,0.12); --neutral: #6B776E; --neutral-dot: #96A199; --neutral-tint: rgba(107,119,110,0.12); /* ---- Tints de acento dedicados (NO reusar en focus) ------ */ --amber-tint: #F1E4CE; /* fondo tenue ámbar sólido */ --nav-active-bg: rgba(190,128,56,0.16);/* fondo de ítem de nav activo */ --nav-hover-bg: rgba(232,226,214,0.05);/* hover de ítem de nav */ --badge-soon-bg: rgba(190,128,56,0.18);/* fondo del pill PRONTO */ /* ---- Paleta de avatares (tinte por nombre, texto crema) -- */ --avatar-1: #8A9A8E; --avatar-2: #A88B5E; --avatar-3: #6E8FA8; --avatar-4: #BE8038; --avatar-5: #9A6E8F; --avatar-6: #5A8C72; --avatar-7: #3E7C5A; --avatar-8: #2F5D4A; /* ---- Overlay / scrim ------------------------------------- */ --scrim: rgba(21,32,28,0.34); /* fondo de slide-over, sin blur */ /* ---- Tipografía ------------------------------------------ */ --font-display: 'Space Grotesk', system-ui, sans-serif; /* titulares */ --font-body: 'IBM Plex Sans', system-ui, sans-serif; /* cuerpo */ --font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* folios/códigos/números */ /* Escala por ROL, en px exactos de la maqueta (no rem: evita el redondeo que introducía medios-px de deriva). */ --fs-h1: 27px; /* H1 de página */ --fs-h2: 23px; /* H2 de ficha */ --fs-title: 21px; /* título de panel de detalle */ --fs-brand: 18px; /* nombre de marca · nombre de etapa */ --fs-lg: 16px; /* título barra móvil · encabezado de estado */ --fs-kpi: 29px; /* número KPI grande */ --fs-name: 14.5px; /* nombre de fila · ítem de nav */ --fs-body: 14px; /* input · CTA · texto de bloque */ --fs-sm: 13px; /* body/meta · seg toggle · back-link */ --fs-meta: 12.5px; /* chips · labels de input · folios */ --fs-badge: 12px; /* status pill · cell-sub */ --fs-hint: 11.5px; /* hint/ayuda de campo */ --fs-eyebrow: 11px; /* eyebrow de página · rol de usuario */ --fs-micro: 10px; /* thead · eyebrow de card · brand tag */ --fs-nano: 9px; /* badge PRONTO */ --lh-tight: 1.15; --lh-snug: 1.2; --lh-cozy: 1.3; --lh-relaxed: 1.45; --lh-base: 1.5; /* ---- Letter-spacing (¡signos exactos de la maqueta!) ----- */ --ls-h1: -0.3px; /* titulares grandes: tracking NEGATIVO */ --ls-h2: -0.2px; /* H2 de ficha */ --ls-brand: 0.2px; /* marca: tracking POSITIVO */ --ls-eyebrow: 1.5px; /* kickers/eyebrows mono */ --ls-thead: 1px; /* encabezado de tabla */ /* ---- Espaciado (base 4px) -------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; /* ---- Radios (canónicos de la maqueta) -------------------- */ --r-dot: 3px; /* barras de progreso */ --r-badge: 8px; /* status pills */ --r-sm: 9px; /* nav · chips · botón icon */ --r-md: 10px; /* botones · inputs · CTA */ --r-toggle: 11px; /* segmented toggle · paneles hundidos */ --r-row: 12px; /* filas de listado · toast */ --r-card: 13px; /* tarjetas de dashboard */ --r-lg: 14px; /* almacén · ficha */ --r-panel: 16px; /* paneles / formularios */ --r-pill: 999px; /* reserva (la maqueta casi no usa píldoras) */ /* ---- Sombras (tinta pino, spread NEGATIVO = muy suaves) --- */ --shadow-row: 0 8px 20px -14px rgba(21,48,42,0.32); /* hover de fila */ --shadow-card: 0 8px 22px -12px rgba(21,48,42,0.32); /* hover de card */ --shadow-panel: 0 14px 40px -28px rgba(21,48,42,0.4); /* panel elevado */ --shadow-over: -20px 0 50px -30px rgba(21,32,28,0.6); /* slide-over */ --shadow-toast: 0 18px 40px -18px rgba(21,32,28,0.7); /* toast */ /* ---- Layout ---------------------------------------------- */ --sidebar-w: 240px; --sidebar-w-collapsed: 64px; /* riel de solo iconos (colapsado en desktop) */ --sidebar-tip-delay: 400ms; /* retardo del tooltip en el riel colapsado */ --gutter: 32px; /* gutter horizontal constante de la maqueta */ --content-max: 1160px; --search-w: 280px; /* ancho del buscador (desktop) */ /* ---- Movimiento ------------------------------------------ */ --t-fast: 150ms ease; --t-med: 260ms cubic-bezier(.22, .61, .36, 1); } @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-med: 0ms; } } /* ============================================================ Tablero de producción — valores EXACTOS del diseño aprobado (Tablero de producción Moblex.html). Sólo se listan los tonos que NO existían ya arriba; el resto reusa los tokens de marca. ============================================================ */ :root { /* ---- Paleta CURADA de departamentos (el admin elige de aquí, no color libre). Cero hexes nuevos: los 8 ya vivían arriba, entre --tab-dept-* y --avatar-*. LA REGLA QUE LA HACE PASAR AA POR CONSTRUCCIÓN: el accent NUNCA es color de texto — es punto, filete, borde y relleno de barra. El texto sobre el tint es siempre --pine. Con eso los 8 tints (alpha .12–.16 sobre papel) dan 11.5–12.2 de contraste, y un swatch nuevo autorado como rgba(accent,.14) hereda la garantía sin tener que re-validarlo. Las claves viven también en Departamento::COLORES (PHP) y se sirven al front en meta.colores. */ --tab-swatch-arena: #BE8038; --tab-swatch-arena-tint: #F1E4CE; --tab-swatch-pino: #2F5D4A; --tab-swatch-pino-tint: rgba(62,124,90,0.13); --tab-swatch-pizarra: #5A6E8C; --tab-swatch-pizarra-tint: rgba(90,110,140,0.12); --tab-swatch-terracota: #C8794E; --tab-swatch-terracota-tint: rgba(200,121,78,0.14); --tab-swatch-salvia: #8A9A8E; --tab-swatch-salvia-tint: rgba(138,154,142,0.16); --tab-swatch-lino: #A88B5E; --tab-swatch-lino-tint: rgba(168,139,94,0.15); --tab-swatch-ciruela: #9A6E8F; --tab-swatch-ciruela-tint: rgba(154,110,143,0.14); --tab-swatch-jade: #5A8C72; --tab-swatch-jade-tint: rgba(90,140,114,0.14); /* Departamento sin color asignado (color = NULL en BD). */ --tab-swatch-fallback: #8A9089; --tab-swatch-fallback-tint: rgba(138,144,137,0.14); /* Medidas de columna del tablero. Existen para matar deptFlex(), que era CSS escrito a mano dentro de JS. */ --tab-col-w: 300px; --tab-col-min: 258px; --tab-rail-w: 56px; /* Accentos y tintes por departamento (mapa/kanban). ALIAS TEMPORAL: el tablero sigue con datos de muestra y catálogos quemados; apuntan a los swatches para que F5 no cambie ni un pixel. BORRAR al terminar F7, cuando el tablero lea el color del snapshot. */ --tab-dept-diseno: var(--tab-swatch-arena); --tab-dept-diseno-tint: var(--tab-swatch-arena-tint); --tab-dept-taller: var(--tab-swatch-pino); --tab-dept-taller-tint: var(--tab-swatch-pino-tint); --tab-dept-instal: var(--tab-swatch-pizarra); --tab-dept-instal-tint: var(--tab-swatch-pizarra-tint); --tab-dept-public: var(--tab-swatch-terracota); --tab-dept-public-tint: var(--tab-swatch-terracota-tint); /* Semáforo de entrega */ --tab-ok: #2F5D4A; --tab-ok-bg: rgba(62,124,90,0.13); --tab-ok-dot: #2F5D4A; --tab-warn: #9A6233; --tab-warn-bg: #F1E4CE; --tab-warn-dot: #BE8038; --tab-late: #A6493A; --tab-late-bg: rgba(176,71,47,0.12); --tab-late-dot: #A6493A; /* Chrome estático propio del tablero (tonos exactos del diseño) */ --tab-soft: #FBF8F2; /* header suave / fila palomeada */ --tab-border-in: #EFE8DA; /* borde interno de tarjetas/tablas */ --tab-border-hover:#D8C8A6; /* hover de borde (cálido) */ --tab-muted: #8A9089; /* placeholders · labels UPPERCASE */ --tab-check-border:#C9BDA3; /* borde de checkbox sin marcar */ --tab-hist-border: #D8CDB8; /* borde de nodo pendiente en historial */ --tab-pending: #A9B0A8; /* texto de paso pendiente */ --tab-disabled-bg: #EDE6D7; /* botón «Avanzar» deshabilitado */ --tab-disabled-fg: #A29A88; /* texto del botón deshabilitado */ --tab-scroll: #DED6C5; /* pulgar del scrollbar horizontal */ /* Scrim y sombras del tablero (tinta pino a .34/.18/.06/.28) */ --tab-scrim: rgba(21,48,42,0.34); --tab-shadow-over: -14px 0 44px rgba(21,48,42,0.18); --tab-shadow-card: 0 2px 12px rgba(21,48,42,0.06); --tab-shadow-toast:0 8px 26px rgba(21,48,42,0.28); }