/* ===================================================================== Valle Lindo — Themes Cada theme sobrescribe variables --vl-* del :root. Se activa con: ===================================================================== */ /* --- Palantir Dark (default - ya en core.css) --- */ [data-theme="palantir-dark"] { --vl-bg-primary: #0A192F; --vl-bg-secondary: #0F2540; --vl-bg-card: #172A45; --vl-bg-card-hover:#1E3357; --vl-bg-input: #0A192F; --vl-text-primary: #E6F1FF; --vl-text-secondary:#A8B2D1; --vl-text-muted: #8892B0; --vl-accent: #64FFDA; --vl-accent-2: #5EEAD4; --vl-accent-dim: rgba(100, 255, 218, 0.12); --vl-border: #1E3A5F; --vl-border-hover: #2E4A6F; } /* --- Valle Lindo Dark (verde palta) --- */ [data-theme="vallelindo-dark"] { --vl-bg-primary: #0B1120; --vl-bg-secondary: #111827; --vl-bg-card: #1A2332; --vl-bg-card-hover:#1E2A3A; --vl-bg-input: #0B1120; --vl-text-primary: #E8ECF1; --vl-text-secondary:#B0BCD0; --vl-text-muted: #8B99AD; --vl-accent: #2DD4A8; --vl-accent-2: #22D3EE; --vl-accent-dim: rgba(45, 212, 168, 0.12); --vl-success: #10B981; --vl-warning: #F59E0B; --vl-danger: #F87171; --vl-border: #1E2D3D; --vl-border-hover: #2A3D4D; } /* --- Minimal Light --- */ [data-theme="minimal-light"] { --vl-bg-primary: #FFFFFF; --vl-bg-secondary: #F9FAFB; --vl-bg-card: #FFFFFF; --vl-bg-card-hover:#F3F4F6; --vl-bg-input: #FFFFFF; --vl-text-primary: #111827; --vl-text-secondary:#374151; --vl-text-muted: #6B7280; --vl-accent: #059669; --vl-accent-2: #10B981; --vl-accent-dim: rgba(5, 150, 105, 0.10); --vl-success: #22C55E; --vl-warning: #D97706; --vl-danger: #DC2626; --vl-border: #E5E7EB; --vl-border-hover: #D1D5DB; --vl-shadow: 0 2px 8px rgba(0,0,0,0.06); --vl-shadow-md: 0 4px 16px rgba(0,0,0,0.08); --vl-shadow-lg: 0 8px 32px rgba(0,0,0,0.10); } /* --- Alto Contraste (accesibilidad) --- */ [data-theme="high-contrast"] { --vl-bg-primary: #000000; --vl-bg-secondary: #0A0A0A; --vl-bg-card: #141414; --vl-bg-card-hover:#1F1F1F; --vl-bg-input: #000000; --vl-text-primary: #FFFFFF; --vl-text-secondary:#E0E0E0; --vl-text-muted: #B8B8B8; --vl-accent: #FFD700; --vl-accent-2: #FFA500; --vl-accent-dim: rgba(255, 215, 0, 0.15); --vl-success: #00FF00; --vl-warning: #FFD700; --vl-danger: #FF3030; --vl-border: #404040; --vl-border-hover: #606060; } /* --- Tailwind CSS Style (slate + cyan, inspirado en tailwindcss.com) --- */ [data-theme="tailwind"] { /* Fondos: paleta slate de Tailwind */ --vl-bg-primary: #020617; /* slate-950 */ --vl-bg-secondary: #0F172A; /* slate-900 */ --vl-bg-card: #1E293B; /* slate-800 */ --vl-bg-card-hover: #334155; /* slate-700 */ --vl-bg-input: #0F172A; /* slate-900 */ /* Textos: slate más claro */ --vl-text-primary: #F1F5F9; /* slate-100 */ --vl-text-secondary: #CBD5E1; /* slate-300 */ --vl-text-muted: #94A3B8; /* slate-400 */ /* Accent: cyan (color icónico de Tailwind) */ --vl-accent: #06B6D4; /* cyan-500 */ --vl-accent-2: #38BDF8; /* sky-400 */ --vl-accent-dim: rgba(6, 182, 212, 0.12); /* Estados */ --vl-success: #10B981; /* emerald-500 */ --vl-warning: #F59E0B; /* amber-500 */ --vl-danger: #F43F5E; /* rose-500 */ /* Bordes: slate-800/700 */ --vl-border: #334155; /* slate-700 */ --vl-border-hover: #475569; /* slate-600 */ /* Sombras suaves estilo Tailwind */ --vl-shadow: 0 1px 3px 0 rgba(0,0,0,0.3), 0 1px 2px -1px rgba(0,0,0,0.3); --vl-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -2px rgba(0,0,0,0.4); --vl-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.5), 0 4px 6px -4px rgba(0,0,0,0.5); } /* --- Valle Lindo Light (verde palta sobre crema · estética Market POS) --- */ [data-theme="vallelindo-light"] { /* Fondos cálidos */ --vl-bg-primary: #FAFAF6; /* crema muy claro, fondo principal */ --vl-bg-secondary: #F3F1EA; /* crema medio para secciones */ --vl-bg-card: #FFFFFF; /* blanco puro para cards */ --vl-bg-card-hover: #F9F7F1; /* hover muy sutil */ --vl-bg-input: #FFFFFF; /* Textos slate (no negro puro - más elegante) */ --vl-text-primary: #1F2937; /* slate-800 */ --vl-text-secondary: #4B5563; /* slate-600 */ --vl-text-muted: #6B7280; /* slate-500 */ /* Accent: verde palta serio (más oscuro que el dark theme) */ --vl-accent: #2F855A; /* verde palta profundo */ --vl-accent-2: #38A169; /* verde palta hover */ --vl-accent-dim: rgba(47, 133, 90, 0.10); /* Header oscuro (estilo Market POS) */ --vl-header-bg: #1B4332; /* verde palta MUY oscuro para header */ --vl-header-text: #FFFFFF; /* Estados con calidez */ --vl-success: #16A34A; /* verde-600 */ --vl-warning: #EA580C; /* orange-600 */ --vl-danger: #DC2626; /* red-600 */ --vl-info: #7C3AED; /* violet-600 */ /* Bordes cálidos (NO grises puros) */ --vl-border: #E5E1D9; /* beige claro */ --vl-border-hover: #D6D0C4; /* Sombras suaves cálidas */ --vl-shadow: 0 1px 3px rgba(31, 41, 55, 0.06), 0 1px 2px rgba(31, 41, 55, 0.04); --vl-shadow-md: 0 4px 12px rgba(31, 41, 55, 0.08), 0 2px 4px rgba(31, 41, 55, 0.04); --vl-shadow-lg: 0 12px 28px rgba(31, 41, 55, 0.10), 0 4px 8px rgba(31, 41, 55, 0.06); } /* --- Auto: respeta preferencia del sistema --- */ @media (prefers-color-scheme: light) { [data-theme="auto"] { --vl-bg-primary: #FFFFFF; --vl-bg-secondary: #F9FAFB; --vl-bg-card: #FFFFFF; --vl-text-primary: #111827; --vl-text-muted: #6B7280; --vl-accent: #059669; --vl-border: #E5E7EB; } } /* ===================================================================== * OVERRIDES ESTILO "MARKET POS" para vallelindo-light * Header verde oscuro + sidebar blanco con sombra + fondo crema * ===================================================================== */ /* TOPBAR oscuro estilo Market POS */ [data-theme="vallelindo-light"] .vl-topbar { background: var(--vl-header-bg); border-bottom: 1px solid #143828; box-shadow: 0 2px 8px rgba(27, 67, 50, 0.12); } [data-theme="vallelindo-light"] .vl-topbar__title h1, [data-theme="vallelindo-light"] .vl-topbar__title p { color: rgba(255, 255, 255, 0.95); } [data-theme="vallelindo-light"] .vl-topbar__title p { color: rgba(255, 255, 255, 0.7); } /* Botones del topbar adaptados al fondo oscuro */ [data-theme="vallelindo-light"] .vl-icon-btn, [data-theme="vallelindo-light"] .vl-modules-trigger { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.15); color: #FFFFFF; box-shadow: none; } [data-theme="vallelindo-light"] .vl-icon-btn:hover, [data-theme="vallelindo-light"] .vl-modules-trigger:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.30); color: #FFFFFF; } [data-theme="vallelindo-light"] .vl-topbar__menu { color: #FFFFFF; } [data-theme="vallelindo-light"] .vl-topbar__menu:hover { background: rgba(255, 255, 255, 0.10); } /* Avatar y user menu en topbar oscuro */ [data-theme="vallelindo-light"] .vl-user-menu { background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.15); } [data-theme="vallelindo-light"] .vl-user-menu:hover { background: rgba(255, 255, 255, 0.18); } [data-theme="vallelindo-light"] .vl-user-menu__info strong { color: #FFFFFF; } [data-theme="vallelindo-light"] .vl-user-menu__info span { color: rgba(255, 255, 255, 0.7); } /* Avatar circular sobre header */ [data-theme="vallelindo-light"] .vl-avatar { background: linear-gradient(135deg, #84CC16, #65A30D); color: #1F2937; box-shadow: 0 2px 6px rgba(0,0,0,0.25); } /* SIDEBAR claro con sombra */ [data-theme="vallelindo-light"] .vl-sidebar { background: #FFFFFF; border-right: 1px solid #E5E1D9; box-shadow: 1px 0 12px rgba(31, 41, 55, 0.04); } [data-theme="vallelindo-light"] .vl-sidebar__brand { border-bottom: 1px solid #E5E1D9; } [data-theme="vallelindo-light"] .vl-brand strong { color: var(--vl-accent); } [data-theme="vallelindo-light"] .vl-brand__mark { background: var(--vl-accent-dim); color: var(--vl-accent); border-radius: 10px; padding: 6px; } /* Items del nav: hover y activo más suaves */ [data-theme="vallelindo-light"] .vl-nav-item { color: var(--vl-text-secondary); border-radius: 10px; margin: 2px 10px; } [data-theme="vallelindo-light"] .vl-nav-item:hover { background: var(--vl-accent-dim); color: var(--vl-accent); } [data-theme="vallelindo-light"] .vl-nav-item.is-active { background: var(--vl-accent); color: #FFFFFF; box-shadow: 0 4px 12px rgba(47, 133, 90, 0.30); } [data-theme="vallelindo-light"] .vl-nav-item.is-active .vl-nav-item__icon { filter: brightness(1.1); } [data-theme="vallelindo-light"] .vl-nav-section__label { color: var(--vl-text-muted); font-weight: 700; letter-spacing: 0.08em; } /* Notif badge sobre header oscuro */ [data-theme="vallelindo-light"] .vl-notif-badge { background: #EF4444; color: #FFFFFF; border: 2px solid var(--vl-header-bg); } /* MAIN: fondo crema cálido */ [data-theme="vallelindo-light"] .vl-main { background: var(--vl-bg-primary); } /* Cards generales con sombra suave (como Market POS) */ [data-theme="vallelindo-light"] .form-card, [data-theme="vallelindo-light"] .dash2-mod, [data-theme="vallelindo-light"] .dash2-kpi, [data-theme="vallelindo-light"] .dash2-footer__activity, [data-theme="vallelindo-light"] .dash2-footer__stats { box-shadow: 0 1px 3px rgba(31, 41, 55, 0.04); } [data-theme="vallelindo-light"] .form-card:hover, [data-theme="vallelindo-light"] .dash2-mod:hover, [data-theme="vallelindo-light"] .dash2-kpi:hover { box-shadow: 0 8px 20px rgba(31, 41, 55, 0.08); } /* Hero del dashboard adaptado */ [data-theme="vallelindo-light"] .dash2-hero { background: linear-gradient(135deg, #FFFFFF 0%, #F5F1EA 100%); border-bottom: 1px solid #E5E1D9; } /* Botones primarios verdes vivos */ [data-theme="vallelindo-light"] .btn--primary, [data-theme="vallelindo-light"] .dash2-quick--primary { background: var(--vl-accent); color: #FFFFFF; box-shadow: 0 4px 12px rgba(47, 133, 90, 0.25); } [data-theme="vallelindo-light"] .btn--primary:hover, [data-theme="vallelindo-light"] .dash2-quick--primary:hover { background: var(--vl-accent-2); color: #FFFFFF; box-shadow: 0 6px 18px rgba(47, 133, 90, 0.35); } /* Footer del sidebar */ [data-theme="vallelindo-light"] .vl-sidebar__footer { background: #F9F7F1; border-top: 1px solid #E5E1D9; } [data-theme="vallelindo-light"] .vl-status__dot { background: var(--vl-accent); box-shadow: 0 0 8px var(--vl-accent); } [data-theme="vallelindo-light"] .vl-sidebar__collapse { background: #FFFFFF; border-color: #E5E1D9; color: var(--vl-text-secondary); } [data-theme="vallelindo-light"] .vl-sidebar__collapse:hover { background: var(--vl-accent-dim); border-color: var(--vl-accent); color: var(--vl-accent); } /* Modules panel adaptado */ [data-theme="vallelindo-light"] .vl-modules-panel { box-shadow: 0 20px 50px rgba(31, 41, 55, 0.15), 0 8px 20px rgba(31, 41, 55, 0.08); border-color: #E5E1D9; } [data-theme="vallelindo-light"] .vl-modules-panel__item:hover { background: var(--vl-accent-dim); color: var(--vl-accent); }