/* ═══════════════════════════════════════════════════════════════════════════ SAI UI — Design Tokens (dual theme) ─────────────────────────────────────────────────────────────────────────── :root → tema CLARO (predefinido) [data-theme=dark] → tema OSCURO El toggle JS aplica/quita data-theme="dark" en y lo persiste en localStorage('sai-theme'). Default: claro. ═══════════════════════════════════════════════════════════════════════════ */ :root { /* ── Fondos (tema claro) ───────────────────────────────────────────────── */ --color-bg-base: #f6f8fb; --color-bg-surface: #ffffff; --color-bg-elevated: #ffffff; --color-bg-overlay: rgba(255, 255, 255, 0.96); /* Overlays sutiles oscuros sobre fondo claro */ --color-glass-sm: rgba(15, 23, 42, 0.025); --color-glass-md: rgba(15, 23, 42, 0.05); --color-glass-lg: rgba(15, 23, 42, 0.07); --color-glass-hover: rgba(15, 23, 42, 0.085); /* ── Marca: azules y rojos no cambian — son identidad ──────────────────── */ --color-blue-950: #05132e; --color-blue-900: #0a1f4e; --color-blue-800: #0e2a6e; --color-blue-700: #1240a0; --color-blue-500: #2563eb; --color-blue-400: #3b82f6; --color-blue-300: #60a5fa; --color-blue-glow: rgba(37, 99, 235, 0.14); --color-blue-glow-sm: rgba(37, 99, 235, 0.06); --color-red-600: #c42030; --color-red-500: #e63946; --color-red-400: #f05060; --color-red-glow: rgba(230, 57, 70, 0.16); --color-red-glow-sm: rgba(230, 57, 70, 0.06); --color-green: #16a34a; --color-green-glow: rgba(22, 163, 74, 0.14); --color-yellow: #ca8a04; --color-yellow-glow: rgba(202, 138, 4, 0.14); --color-cyan: #0891b2; --color-purple: #7c3aed; /* ── Texto (oscuro sobre claro) ────────────────────────────────────────── */ --text-primary: #0f172a; --text-secondary: #475569; --text-tertiary: #64748b; --text-muted: #94a3b8; --text-inverse: #ffffff; /* ── Bordes ────────────────────────────────────────────────────────────── */ --border-subtle: rgba(15, 23, 42, 0.06); --border-default: rgba(15, 23, 42, 0.10); --border-strong: rgba(15, 23, 42, 0.18); --border-bright: rgba(37, 99, 235, 0.45); /* ── Layout ────────────────────────────────────────────────────────────── */ --sidebar-width: 252px; --topbar-height: 64px; --content-gap: 20px; --section-gap: 16px; /* ── Spacing ───────────────────────────────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; /* ── Radius ────────────────────────────────────────────────────────────── */ --radius-xs: 4px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-full: 9999px; /* ── Shadows (tema claro: más sutiles) ─────────────────────────────────── */ --shadow-card: 0 1px 3px rgba(15, 23, 42, 0.06), 0 4px 12px rgba(15, 23, 42, 0.04); --shadow-modal: 0 12px 40px rgba(15, 23, 42, 0.15), 0 4px 12px rgba(15, 23, 42, 0.08); --shadow-blue: 0 0 16px var(--color-blue-glow); --shadow-red: 0 0 16px var(--color-red-glow); /* ── Typography ────────────────────────────────────────────────────────── */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace; --text-xs: 10px; --text-sm: 12px; --text-base: 13px; --text-md: 14px; --text-lg: 16px; --text-xl: 20px; --text-2xl: 24px; --text-3xl: 30px; --weight-normal: 400; --weight-medium: 500; --weight-semi: 600; --weight-bold: 700; /* ── Transitions ───────────────────────────────────────────────────────── */ --transition-fast: 0.12s ease; --transition-base: 0.2s ease; --transition-slow: 0.35s ease; --transition-spring: 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); /* ── Z-index scale ─────────────────────────────────────────────────────── */ --z-base: 0; --z-raised: 10; --z-sidebar: 20; --z-topbar: 30; --z-modal: 100; --z-toast: 200; /* ── Light content zone (cards blancas sobre fondo claro) ──────────────── */ --lz-bg: #ffffff; --lz-panel: #ffffff; --lz-panel-header: #f8fafc; --lz-border: #e2e8f0; --lz-border-hover: #cbd5e1; --lz-text-1: #0f172a; --lz-text-2: #475569; --lz-text-3: #94a3b8; --lz-shadow-sm: 0 1px 3px rgba(15,23,42,0.07), 0 1px 2px rgba(15,23,42,0.04); --lz-shadow-md: 0 4px 12px rgba(15,23,42,0.10), 0 2px 4px rgba(15,23,42,0.05); --lz-shadow-lg: 0 8px 24px rgba(15,23,42,0.12), 0 4px 8px rgba(15,23,42,0.06); /* ── Semantic pills/badges — adaptan contraste por tema ────────────────── Fondos opacos sobre el color base (no translúcidos) para máximo contraste con el texto. En tema claro: fondo de color suave + texto MUY oscuro. En tema oscuro: fondo oscuro con tinte + texto MUY claro. */ --pill-blue-bg: #dbeafe; /* azul muy claro */ --pill-blue-text: #1e3a8a; /* azul navy */ --pill-blue-border: #93c5fd; /* azul medio */ --pill-green-bg: #dcfce7; --pill-green-text: #14532d; --pill-green-border: #86efac; --pill-red-bg: #fee2e2; --pill-red-text: #7f1d1d; --pill-red-border: #fca5a5; --pill-yellow-bg: #fef3c7; --pill-yellow-text: #713f12; --pill-yellow-border: #fcd34d; --pill-gray-bg: #f1f5f9; --pill-gray-text: #334155; --pill-gray-border: #cbd5e1; /* Code blocks: fondo claro con sintaxis legible */ --code-bg: #0b1220; /* siempre oscuro (terminal-like) */ --code-fg: #e2e8f0; } /* ═══════════════════════════════════════════════════════════════════════════ TEMA OSCURO — activado con ═══════════════════════════════════════════════════════════════════════════ */ [data-theme="dark"] { /* ── Fondos oscuros ────────────────────────────────────────────────────── */ --color-bg-base: #060810; --color-bg-surface: #0b0d18; --color-bg-elevated: #0f1220; --color-bg-overlay: rgba(11, 13, 24, 0.95); /* Overlays claros sobre fondo oscuro */ --color-glass-sm: rgba(255, 255, 255, 0.025); --color-glass-md: rgba(255, 255, 255, 0.045); --color-glass-lg: rgba(255, 255, 255, 0.065); --color-glass-hover: rgba(255, 255, 255, 0.075); /* Glows más vivos en oscuro */ --color-blue-glow: rgba(59, 130, 246, 0.18); --color-blue-glow-sm: rgba(59, 130, 246, 0.08); --color-red-glow: rgba(230, 57, 70, 0.22); --color-red-glow-sm: rgba(230, 57, 70, 0.08); --color-green-glow: rgba(0, 200, 150, 0.2); --color-yellow-glow: rgba(245, 158, 11, 0.2); /* Verde y amarillo más vivos en oscuro */ --color-green: #00c896; --color-yellow: #f59e0b; /* ── Texto claro sobre oscuro ──────────────────────────────────────────── */ --text-primary: #edf1f9; --text-secondary: #8896b0; --text-tertiary: #4d607a; --text-muted: #2e3d54; --text-inverse: #060810; /* ── Bordes ────────────────────────────────────────────────────────────── */ --border-subtle: rgba(59, 130, 246, 0.07); --border-default: rgba(59, 130, 246, 0.13); --border-strong: rgba(59, 130, 246, 0.28); --border-bright: rgba(59, 130, 246, 0.5); /* ── Shadows oscuros (más profundas) ───────────────────────────────────── */ --shadow-card: 0 4px 24px rgba(0, 0, 0, 0.4); --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.7); /* ── Light content zone — re-mapeada para oscuro ───────────────────────── */ --lz-bg: #0b0d18; --lz-panel: #0f1220; --lz-panel-header: #141728; --lz-border: rgba(59, 130, 246, 0.12); --lz-border-hover: rgba(59, 130, 246, 0.25); --lz-text-1: #edf1f9; --lz-text-2: #8896b0; --lz-text-3: #4d607a; --lz-shadow-sm: 0 1px 3px rgba(0,0,0,0.5), 0 1px 2px rgba(0,0,0,0.3); --lz-shadow-md: 0 4px 12px rgba(0,0,0,0.55), 0 2px 4px rgba(0,0,0,0.3); --lz-shadow-lg: 0 8px 24px rgba(0,0,0,0.6), 0 4px 8px rgba(0,0,0,0.3); /* ── Pills/badges — override para tema oscuro (colores más claros) ────── */ --pill-blue-bg: rgba(59, 130, 246, 0.18); --pill-blue-text: #bfdbfe; --pill-blue-border: rgba(59, 130, 246, 0.45); --pill-green-bg: rgba(34, 197, 94, 0.18); --pill-green-text: #bbf7d0; --pill-green-border: rgba(34, 197, 94, 0.45); --pill-red-bg: rgba(239, 68, 68, 0.18); --pill-red-text: #fecaca; --pill-red-border: rgba(239, 68, 68, 0.45); --pill-yellow-bg: rgba(245, 158, 11, 0.18); --pill-yellow-text: #fde68a; --pill-yellow-border: rgba(245, 158, 11, 0.45); --pill-gray-bg: rgba(148, 163, 184, 0.18); --pill-gray-text: #e2e8f0; --pill-gray-border: rgba(148, 163, 184, 0.4); } /* Transición suave al cambiar de tema */ html, body, .sidebar, .topbar, .panel, .chip, .nav-item, .stat-card, .endpoint-card { transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; }