/* base.css — resets, color palette, focus rings, scrollbar (FUENTE ÚNICA). Define la paleta semántica (--bg, --fg, --accent, etc.) y los resets de bajo nivel comunes a los tres servicios. Los proyectos pueden sobrescribir variables en sus propios :root locales, pero el set base garantiza coherencia visual. Carga después de fonts.css + tokens.css y antes de components.css / style.css del proyecto. */ :root { /* ── superficies ───────────────────────────────────────────────── Escala dark calibrada para que `--bg` quede negro puro (paneles OLED no introducen halo), `--bg-soft` reciba hover states sin saltar de contraste, y `--bg-card` sea la card neutral. */ --bg: #000000; --bg-card: #0a0a0a; --bg-soft: #111111; --bg-overlay: rgba(10, 10, 10, 0.72); --border: #1f1f1f; --border-hover: rgba(242, 169, 0, 0.35); /* ── texto ─────────────────────────────────────────────────────── Tres niveles de jerarquía. --fg-faint cumple WCAG AA contra --bg-soft y --bg (>=4.5:1). */ --fg: #ededed; --fg-muted: #a1a1a1; --fg-faint: #7d7d7d; --fg-inverse: #0a0a0a; /* ── accent (Probusol Pantone 130 C) ──────────────────────────── El amarillo/naranja Pantone es la identidad. --accent-grad solo en elementos de jerarquía hero (logo, KPI value), nunca en superficies grandes (cansa). */ --accent: #F2A900; --accent-soft: #FFCC00; --accent-hot: #F2391C; --accent-grad: linear-gradient(135deg, #FFCC00 0%, #F2391C 100%); --accent-bg-soft: rgba(242, 169, 0, 0.08); /* ── Metales Refinados (Cockpit Premium 2026-05-29) ────────────── Paleta monocromática metálica para datos de charts. Jerarquía: Oro (marca / serie principal / activo) > Bronce (2ª serie: Bultos/Remitidos, cálido tostado y opaco) > Titanio (barra base / Producción / series secundarias) > Platino (labels, promedios, líneas tenues). Centralizada acá; los charts la leen vía PROBUSOL_THEME (echarts-theme.js) y la UI vía estas vars. */ --metal-gold: var(--accent); /* #F2A900 — Oro Premium */ --metal-bronze: #C2884A; /* 2ª serie — bronce vivo, cálido */ --metal-titanio: #4E4E57; /* barra base / serie secundaria */ --metal-platino: #B6B6BE; /* labels, promedios, líneas */ /* ── status semántico ──────────────────────────────────────────── Verde/amarillo/rojo neutros, calibrados para legibilidad sobre bg-soft. Reusar como aliases si necesitás otro nombre. */ --ok: #16a34a; --warn: #eab308; --err: #ef4444; --info: #60a5fa; --color-success: var(--ok); --color-warning: var(--warn); --color-danger: #e05252; --color-error: var(--color-danger); --color-danger-soft: rgba(224, 82, 82, 0.18); /* Verde/rojo de VARIACIÓN extremadamente desaturados (Cockpit Premium): sólo para badges de delta (vs ant. / YoY). Baja croma para que se integren al monocromo metálico y acompañen al número sin gritar. NUNCA en header ni en barras de datos estándar. */ --delta-up-fg: #8FB39A; /* verde desaturado, integrado */ --delta-up-bg: rgba(143, 179, 154, 0.12); --delta-down-fg: #C49490; /* rojo desaturado, integrado */ --delta-down-bg: rgba(196, 148, 144, 0.12); /* ── sombras / glow ────────────────────────────────────────────── Default shadow es ultra sutil (inset highlight). Glow accent es opcional para active states. */ --shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset; --shadow-pop: 0 8px 32px rgba(0, 0, 0, 0.45); --glow-accent: 0 0 12px rgba(242, 169, 0, 0.45); /* ── premium glass + elevación (UI premium) ────────────────────── Capa de profundidad para cards JERÁRQUICAS (KPI hero, chart principal) — opt-in vía `.glass-elev`, NUNCA default (glass como default cansa y cuesta GPU). Sobre OLED negro el blur casi no refracta: la profundidad real viene de la sombra en capas + el borde con luz cenital; el blur es un plus sutil sobre el ambient glow del hero. backdrop-filter sólo en este set acotado, jamás en contenedores que scrollean en masa (repaints GPU / frame drops). */ --glass-bg: rgba(10, 10, 10, 0.6); --glass-bg-hover: rgba(20, 20, 20, 0.7); --glass-blur: 12px; --glass-saturate: 180%; /* Superficies ELEVADAS (charcoal claro). La profundidad estilo Stitch viene de capas tonales: fondo #000 → card charcoal claramente más claro → borde luminoso + sombra. NO de backdrop-blur (sobre OLED negro no refracta nada y cuesta GPU). Estos son los surfaces de las cards de contenido para que "floten" sobre el fondo. */ --surface-elev: #1c1c22; /* card / kpi / panel de contenido */ --surface-elev-2: #26262e; /* hero (tier superior, más elevado) */ --border-elev: rgba(255, 255, 255, 0.17); /* hairline luminoso — 0.17 para que el borde top-lit quede perceptible a bajo brillo */ /* borde con luz cenital: gradiente vertical recortado a 1px vía mask */ --glass-border-grad: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%); /* glow semántico (raro, no decorativo): delta YoY+, línea de chart, estado live. NO neon-glow genérico en todos lados. */ --glow-accent-strong: 0 0 24px rgba(242, 169, 0, 0.35), 0 0 8px rgba(242, 169, 0, 0.5); --glow-accent-soft: 0 0 12px rgba(242, 169, 0, 0.18); --glow-live-pulse: 0 0 16px rgba(0, 229, 255, 0.4); /* ambient detrás del hero — radial accent ínfimo para que el glass tenga algo que refractar sin gritar (semántico, baja opacidad). */ --ambient-accent: radial-gradient(60% 80% at 50% -10%, rgba(242, 169, 0, 0.10) 0%, rgba(242, 169, 0, 0) 70%); /* gradient-area para el relleno bajo la línea del chart (22%→0%) */ --grad-area-accent: linear-gradient(180deg, rgba(242, 169, 0, 0.22) 0%, rgba(242, 169, 0, 0.04) 60%, rgba(242, 169, 0, 0) 100%); /* sombra glass premium: inset highlight cenital + inset inferior + ambient profunda + halo accent imperceptible. NO la sombra plana 0 4px 6px de Tailwind (lee como AI cheap). */ --shadow-glass-card: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 -1px 0 rgba(0, 0, 0, 0.4) inset, 0 8px 32px -8px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(242, 169, 0, 0.04); --shadow-glass-card-hover: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 -1px 0 rgba(0, 0, 0, 0.4) inset, 0 14px 48px -8px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(242, 169, 0, 0.12); /* ── layout chrome ─────────────────────────────────────────────── --sidebar-w lo puede overridear cada proyecto (180px default cubre items con label corto + icono 16px + padding cómodo). */ --sidebar-w: 180px; --header-h: 56px; } /* color-scheme: dark indica al UA que renderice controles nativos (scrollbar, form fields default) en variante oscura. Sin esto Safari pinta scrollbars blancas y los `` salen claros sobre fondo negro. */ html { color-scheme: dark; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--fg); font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "Geist Sans", Roboto, sans-serif; font-size: var(--text-base); line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* font-optical-sizing: auto pide al rendering engine que use el axis optical (opsz) del woff2 cuando esté disponible — Inter no lo tiene (es estática) pero el fallback de UA (system-ui) sí lo aprovecha. Cost cero, ganancia nula a peor caso. */ font-optical-sizing: auto; /* NO usar text-rendering: optimizeLegibility — fuerza pass de unicode completo (kerning + contextual alternates) en CADA texto del documento. En páginas con tablas largas (reports/ventas tiene 100+ filas, mrp tiene 65+ productos) genera caída visible de FPS durante scroll. Volvemos al default `auto` que es el correcto para texto de UI. Solo aplicar optimizeLegibility en bloques de copy editorial puntuales (acotado con clase `.prose-rich`). */ } /* Clase para bloques de copy editorial donde la legibilidad pesa más que el cost de rendering — descripciones largas, blog posts, etc. Usar selectiva, NO en body. */ .prose-rich { text-rendering: optimizeLegibility; line-height: 1.65; max-width: 70ch; } /* tabular-nums por defecto en valores numéricos — evita jitter de ancho al actualizar contadores/KPIs en vivo. Activá con clase `.num` o usá el mixin manual en la regla específica. */ .num, .tabular { font-variant-numeric: tabular-nums; } a { color: var(--fg); text-decoration: none; /* NO agregar transition global acá — reports/meetings/mrp tienen cientos de en tablas, y cada transition registrada por elemento cuesta perf en scroll. Cada proyecto añade transition en las reglas específicas (.sidebar a, .btn, etc.) donde realmente importa. */ } a:hover { color: var(--accent-soft); } /* ── selección de texto ─────────────────────────────────────────── */ ::selection { background: rgba(242, 169, 0, 0.32); color: var(--fg); } /* ── scrollbar ────────────────────────────────────────────────────── Estilo discreto y consistente con la paleta dark. Webkit + Firefox. Aplicamos en html (no *) — el selector universal forzaría que el browser evalúe scrollbar properties para cada elemento del documento (caro en pages con miles de nodos como reports/ventas). Las scrollbar properties son heredables, así que declarar en html alcanza. */ html { scrollbar-color: var(--border) transparent; scrollbar-width: thin; } /* WebKit pseudo-elements no son heredables — mantener `*::` para que funcionen en cualquier scrollable child. Sin border en el thumb para evitar repaint del background del padre cuando cambia de hover. */ *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-chip); } *::-webkit-scrollbar-thumb:hover { background: #2a2a2a; } /* ── focus ring universal ─────────────────────────────────────────── :focus-visible solo para teclado — el mouse no triggerea outline. Outline accent + offset = clearly visible sin invadir el contenido. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-chip); } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible { outline-offset: 2px; } /* ── skip-link (a11y) ─────────────────────────────────────────────── Primer elemento focusable del body. Oculto visualmente hasta que recibe foco — Tab desde body lo expone. */ .skip-link { position: absolute; top: -100px; left: var(--space-2); background: var(--accent); color: var(--fg-inverse); padding: var(--space-2) var(--space-3); border-radius: var(--radius-btn); font-weight: 600; z-index: 9999; transition: top var(--dur-base, 140ms) var(--ease, ease); } .skip-link:focus, .skip-link:focus-visible { top: var(--space-2); outline: none; } /* ── Alpine.js x-cloak ────────────────────────────────────────────── Oculta nodos hasta que Alpine inicialice — evita FOUC de condicionales x-show/x-if antes del hydration. */ [x-cloak] { display: none !important; } /* ── ECharts tooltip smooth trail ────────────────────────────────── Bypass del throttle interno de ECharts (50ms en updatePosition cuando transitionDuration > 0 — ver apache/echarts#16101). El theme reports/echarts-theme.js setea `className: 'echarts-tooltip- smooth'` + `transitionDuration: 0` para evitar el throttle y delegar el tween al GPU compositor vía esta regla CSS. `!important` necesario porque ECharts injecta inline `transition` en el div del tooltip (con transitionDuration: 0 inyecta `transition: transform 0s`). Curva + duración: 280ms + cubic-bezier(0.25, 0.46, 0.45, 0.94) (easeOutQuad). Magic UI sweet spot — equivale al lerp factor 0.15 recomendado por la mayoría de implementaciones de smooth-cursor (Magic UI, 14islands). Trail prolongado, sensación de glide smooth, sin sentirse pesado. Iteraciones probadas: v13 180ms strong ease-out → "muy snap" v14 220ms easeOutCubic → "casi" v15 280ms easeOutQuad → elegida (sweet spot industry) prefers-reduced-motion lo recorta a 1ms via motion.css. */ .echarts-tooltip-smooth { transition: transform 280ms cubic-bezier(0.25, 0.46, 0.45, 0.94) !important; will-change: transform; } /* ── helpers de visibilidad para lectores ───────────────────────── */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }