/** * CotizaGO 2026 - Modern SaaS Design System * Inspired by Linear, Stripe, and Vercel. */ :root { /* Colors - Slate & Electric Blue Palette */ --brand-50: #f0f9ff; --brand-100: #e0f2fe; --brand-500: #0066ff; /* Electric blue - higher vibrancy */ --brand-600: #0256d4; --brand-900: #1e3a8a; --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-400: #94a3b8; /* Lighter for better versatile contrast */ --slate-500: #64748b; --slate-600: #475569; --slate-800: #1e293b; --slate-900: #0f172a; --slate-950: #020617; /* Effects */ --glass-bg: rgba(255, 255, 255, 0.7); --glass-border: rgba(226, 232, 240, 0.5); --shadow-premium: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); --radius-premium: 14px; /* ══ Sidebar tokens — antes vivían hardcodeados dentro de #sidebar (sidebar.php). Ahora son globales para que el modo oscuro pueda sobreescribirlos. ══ */ --sb-w: 260px; --sb-bg: #FFFFFF; --sb-bg-alt: #F8FAFC; --sb-border: #E2E8F0; --sb-active-bg: #EEF2FF; --sb-icon-active-bg: #E0E7FF; --sb-bar: #6366F1; --sb-text: #64748B; --sb-text-hover: #1E293B; --sb-text-active: #3730A3; /* ══ Tokens de superficie/texto de la app (superuser: sidebar, topbar, dashboard, empresas, users). Los valores de :root son los que ya estaban en uso en claro; las variantes oscuras viven bajo [data-theme="dark"] más abajo. ══ */ --surface-app: #F1F5F9; --surface-card: #FFFFFF; --surface-card-alt: #F8FAFC; --surface-hover: #F1F5F9; --surface-hover-accent: #F8FAFF; --border-default: #E2E8F0; --border-card: #DCE3ED; --border-subtle: #F1F5F9; --text-primary: #0F172A; --text-heading: #1E293B; --text-secondary: #475569; --text-muted: #64748B; --text-tertiary: #94A3B8; --text-disabled: #CBD5E1; --accent-bg: #EEF2FF; --accent-bg-strong: #F5F3FF; --accent-text: #4F46E5; --accent-text-strong: #3730A3; --accent-icon: #4F46E5; --accent-purple: #7C3AED; --accent-purple-strong: #4C1D95; --badge-neutral-bg: #F1F5F9; --badge-neutral-text: #64748B; --status-pending-bg: #FFFBEB; --status-pending-bg-strong: #FEF3C7; --status-pending-border: #FCD34D; --status-pending-text: #92400E; --status-pending-text-strong: #B45309; --status-approved-bg: #F0FDF4; --status-approved-bg-strong: #DCFCE7; --status-approved-border: #BBF7D0; --status-approved-text: #15803D; --status-approved-text-strong: #065F46; --status-danger-bg: #FEF2F2; --status-danger-border: #FECACA; --status-danger-text: #B91C1C; --status-danger-icon: #DC2626; --status-info-bg: #EFF6FF; --status-info-border: #BFDBFE; --status-info-text: #2563EB; --shadow-card: 0 1px 3px rgba(15,23,42,0.04), 0 8px 20px -12px rgba(15,23,42,0.12); --topbar-bg: rgba(255, 255, 255, 0.96); } /* ══════════════════════════════════════════════════════════════════ MODO OSCURO — activado con . Ver public/assets/js/theme-toggle.js y el script inline anti-FOUC en layout/header.php y layout/public_header.php. Paleta: neutros navy con tinte índigo (coherente con --sb-bar), nunca gris puro ni "invertir y listo" — jerarquía de superficies real (app < card < card-alt < hover) y acentos desaturados para que el texto de estado siga siendo legible sobre fondo oscuro. ══════════════════════════════════════════════════════════════════ */ [data-theme="dark"] { /* Escala general — mismos roles semánticos, invertidos con criterio */ --slate-50: #060A14; --slate-100: #111827; --slate-200: #26324A; --slate-400: #7C8AA5; --slate-500: #94A3B8; --slate-600: #B7C1D6; --slate-800: #E2E8F0; --slate-900: #F1F5F9; --slate-950: #F8FAFC; --brand-50: rgba(59,130,246,0.12); --brand-100: rgba(59,130,246,0.2); --brand-500: #3B82F6; --brand-600: #60A5FA; --brand-900: #93C5FD; --glass-bg: rgba(17, 24, 39, 0.6); --glass-border: rgba(255, 255, 255, 0.08); --shadow-premium: 0 0 0 1px rgba(255,255,255,0.06), 0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -2px rgba(0,0,0,0.3); /* Sidebar — vuelve al navy índigo-oscuro (el que ya se había probado y gustó, ahora condicionado a un modo día/noche real en vez de fijo). */ --sb-bg: #0B1120; --sb-bg-alt: #07101F; --sb-border: #26324A; --sb-active-bg: rgba(99,102,241,0.11); --sb-icon-active-bg: rgba(99,102,241,0.22); --sb-bar: #6366F1; --sb-text: #94A3B8; --sb-text-hover: #E2E8F0; --sb-text-active: #C7D2FE; /* Superficies de la app */ --surface-app: #060A14; --surface-card: #111827; --surface-card-alt: #182235; --surface-hover: #1B2536; --surface-hover-accent: rgba(99,102,241,0.08); --border-default: #26324A; --border-card: #26324A; --border-subtle: #1B2536; --text-primary: #F1F5F9; --text-heading: #F8FAFC; --text-secondary: #B7C1D6; --text-muted: #94A3B8; --text-tertiary: #7C8AA5; --text-disabled: #4B5875; --accent-bg: rgba(99,102,241,0.16); --accent-bg-strong: rgba(124,58,237,0.18); --accent-text: #A5B4FC; --accent-text-strong: #C7D2FE; --accent-icon: #818CF8; --accent-purple: #A78BFA; --accent-purple-strong: #DDD6FE; --badge-neutral-bg: rgba(148,163,184,0.14); --badge-neutral-text: #B7C1D6; --status-pending-bg: rgba(245,158,11,0.14); --status-pending-bg-strong: rgba(245,158,11,0.22); --status-pending-border: rgba(245,158,11,0.4); --status-pending-text: #FBBF24; --status-pending-text-strong: #FCD34D; --status-approved-bg: rgba(34,197,94,0.14); --status-approved-bg-strong: rgba(34,197,94,0.2); --status-approved-border: rgba(34,197,94,0.35); --status-approved-text: #4ADE80; --status-approved-text-strong: #6EE7B7; --status-danger-bg: rgba(239,68,68,0.14); --status-danger-border: rgba(239,68,68,0.4); --status-danger-text: #F87171; --status-danger-icon: #F87171; --status-info-bg: rgba(59,130,246,0.14); --status-info-border: rgba(59,130,246,0.4); --status-info-text: #60A5FA; --shadow-card: 0 1px 3px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.55); --topbar-bg: rgba(11, 17, 32, 0.86); } @media (prefers-reduced-motion: reduce) { * { transition-duration: 0.01ms !important; } } /* Typography Base */ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; color: var(--slate-900); } h1, h2, h3, .font-display { font-family: 'Geist', 'Inter', sans-serif; letter-spacing: -0.02em; } /* Premium Components */ .glass-card { background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--glass-border); border-radius: var(--radius-premium); box-shadow: var(--shadow-premium); } .btn-premium { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; font-weight: 600; font-size: 15px; border-radius: 10px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); cursor: pointer; text-decoration: none; border: 1px solid transparent; } .btn-premium-primary { background: var(--slate-900); color: white; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .btn-premium-primary:hover { background: var(--slate-800); transform: translateY(-1px); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); } .btn-premium-secondary { background: white; color: var(--slate-900); border-color: var(--slate-200); } .btn-premium-secondary:hover { background: var(--slate-50); border-color: var(--slate-300); } /* Gradients */ .text-gradient { background: linear-gradient(135deg, var(--slate-900) 0%, var(--slate-600) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .bg-dot-grid { background-image: radial-gradient(var(--slate-200) 1px, transparent 1px); background-size: 32px 32px; } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.6s ease-out forwards; }