/* ============================================================================ thor-tokens.css — [F0 2026] Design system de Thor Unificado ---------------------------------------------------------------------------- ÚNICA fuente de verdad de colores, tipografía, espaciados, radios y sombras. Variables con prefijo --thor-* para no colisionar con los CSS históricos; el resto de hojas irán migrando a estos tokens fase a fase. Modo oscuro: [data-theme="dark"] en (mecanismo ya existente, localStorage 'thor.theme'). ========================================================================== */ :root { /* ── Marca (identidad Thor: naranja + azul) ─────────────────────────── */ --thor-brand: #ff6600; --thor-brand-dark: #cc5200; --thor-brand-light: #ff944d; --thor-brand-soft: rgba(255, 102, 0, 0.14); --thor-accent: #3b82f6; --thor-accent-dark: #2563eb; --thor-accent-light: #93c5fd; --thor-accent-soft: rgba(59, 130, 246, 0.12); /* ── Estados semánticos ─────────────────────────────────────────────── */ --thor-success: #10b981; --thor-success-soft: rgba(16, 185, 129, 0.12); --thor-warning: #f59e0b; --thor-warning-soft: rgba(245, 158, 11, 0.14); --thor-danger: #ef4444; --thor-danger-soft: rgba(239, 68, 68, 0.12); --thor-info: #06b6d4; --thor-info-soft: rgba(6, 182, 212, 0.12); /* ── Superficies y texto (light) ────────────────────────────────────── */ --thor-bg: #f6f7f9; --thor-surface: #ffffff; --thor-surface-2: #f1f5f9; --thor-surface-hover: #eef2f7; --thor-border: #e2e8f0; --thor-border-strong: #cbd5e1; --thor-text: #1e293b; --thor-text-2: #64748b; --thor-text-3: #94a3b8; --thor-text-inverse: #ffffff; /* ── Shell (topbar + sidebar) ───────────────────────────────────────── */ --thor-topbar-h: 56px; --thor-sidebar-w: 248px; --thor-sidebar-bg: #0f172a; --thor-sidebar-text: #cbd5e1; --thor-sidebar-text-active: #ffffff; --thor-sidebar-item-hover: rgba(255, 255, 255, 0.07); --thor-sidebar-item-active: rgba(255, 102, 0, 0.18); --thor-sidebar-accent: var(--thor-brand); /* ── Tipografía ─────────────────────────────────────────────────────── */ --thor-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --thor-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --thor-fs-xs: 11px; --thor-fs-sm: 12.5px; --thor-fs-base: 14px; --thor-fs-md: 16px; --thor-fs-lg: 18px; --thor-fs-xl: 22px; --thor-fs-2xl: 28px; --thor-fw-normal: 400; --thor-fw-medium: 500; --thor-fw-semibold: 600; --thor-fw-bold: 700; /* ── Espaciado (escala 4px) ─────────────────────────────────────────── */ --thor-sp-1: 4px; --thor-sp-2: 8px; --thor-sp-3: 12px; --thor-sp-4: 16px; --thor-sp-5: 20px; --thor-sp-6: 24px; --thor-sp-8: 32px; --thor-sp-10: 40px; /* ── Radios y sombras ───────────────────────────────────────────────── */ --thor-radius-sm: 6px; --thor-radius: 10px; --thor-radius-lg: 14px; --thor-radius-full: 999px; --thor-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --thor-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 4px 12px rgba(15, 23, 42, 0.05); --thor-shadow-lg: 0 8px 24px rgba(15, 23, 42, 0.14); /* ── Capas ──────────────────────────────────────────────────────────── */ --thor-z-sidebar: 900; --thor-z-topbar: 950; --thor-z-dropdown: 1000; --thor-z-modal: 1100; --thor-z-toast: 1200; /* ── Transiciones ───────────────────────────────────────────────────── */ --thor-transition: 0.16s ease; } /* ── Modo oscuro ──────────────────────────────────────────────────────── */ [data-theme="dark"] { --thor-bg: #0b1220; --thor-surface: #101a2c; --thor-surface-2: #16233a; --thor-surface-hover: #1b2a44; --thor-border: #223350; --thor-border-strong: #2e4368; --thor-text: #e2e8f0; --thor-text-2: #94a3b8; --thor-text-3: #64748b; --thor-text-inverse: #0f172a; --thor-sidebar-bg: #0a0f1c; --thor-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --thor-shadow: 0 1px 3px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.3); --thor-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.55); } /* ============================================================================ Componentes base del design system (usados por el shell desde F0; el resto de pantallas migran a ellos en F1-F3) ========================================================================== */ .thor-card { background: var(--thor-surface); border: 1px solid var(--thor-border); border-radius: var(--thor-radius); box-shadow: var(--thor-shadow-sm); padding: var(--thor-sp-4); } .thor-badge { display: inline-flex; align-items: center; gap: var(--thor-sp-1); padding: 2px var(--thor-sp-2); border-radius: var(--thor-radius-full); font-size: var(--thor-fs-xs); font-weight: var(--thor-fw-semibold); background: var(--thor-surface-2); color: var(--thor-text-2); } .thor-badge--brand { background: var(--thor-brand-soft); color: var(--thor-brand-dark); } .thor-badge--success { background: var(--thor-success-soft); color: var(--thor-success); } .thor-badge--warning { background: var(--thor-warning-soft); color: var(--thor-warning); } .thor-badge--danger { background: var(--thor-danger-soft); color: var(--thor-danger); } .thor-badge--info { background: var(--thor-info-soft); color: var(--thor-info); } .thor-btn { display: inline-flex; align-items: center; gap: var(--thor-sp-2); padding: var(--thor-sp-2) var(--thor-sp-4); border-radius: var(--thor-radius-sm); border: 1px solid transparent; font-family: var(--thor-font); font-size: var(--thor-fs-base); font-weight: var(--thor-fw-medium); cursor: pointer; transition: background var(--thor-transition), border-color var(--thor-transition); } .thor-btn--primary { background: var(--thor-brand); color: #fff; } .thor-btn--primary:hover { background: var(--thor-brand-dark); } .thor-btn--secondary { background: var(--thor-surface); color: var(--thor-text); border-color: var(--thor-border-strong); } .thor-btn--secondary:hover { background: var(--thor-surface-hover); } .thor-btn--ghost { background: transparent; color: var(--thor-text-2); } .thor-btn--ghost:hover { background: var(--thor-surface-hover); color: var(--thor-text); } .thor-kpi { background: var(--thor-surface); border: 1px solid var(--thor-border); border-radius: var(--thor-radius); padding: var(--thor-sp-3) var(--thor-sp-4); display: flex; flex-direction: column; gap: 2px; } .thor-kpi__valor { font-size: var(--thor-fs-xl); font-weight: var(--thor-fw-bold); color: var(--thor-text); } .thor-kpi__etiqueta { font-size: var(--thor-fs-sm); color: var(--thor-text-2); } /* ============================================================================ Thor Shell [F0]: conmutador de workspaces en el sidebar ========================================================================== */ .thor-ws-tabs { display: flex; flex-wrap: wrap; gap: var(--thor-sp-1); padding: var(--thor-sp-2) var(--thor-sp-3); border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: var(--thor-sp-2); } .thor-ws-tab { flex: 1 1 auto; min-width: 0; padding: var(--thor-sp-1) var(--thor-sp-2); border: 1px solid transparent; border-radius: var(--thor-radius-sm); background: transparent; color: var(--thor-sidebar-text, #cbd5e1); font-family: var(--thor-font); font-size: var(--thor-fs-xs); font-weight: var(--thor-fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; transition: background var(--thor-transition), color var(--thor-transition); } .thor-ws-tab:hover { background: var(--thor-sidebar-item-hover, rgba(255, 255, 255, 0.07)); color: var(--thor-sidebar-text-active, #fff); } .thor-ws-tab--activa { background: var(--thor-sidebar-item-active, rgba(255, 102, 0, 0.18)); color: var(--thor-sidebar-text-active, #fff); border-color: var(--thor-brand); } /* Items href creados por el shell: mismo cursor que el resto del menú */ .thor-shell-href { cursor: pointer; }