/* ============================================================ LUNA RESTOBAR POS v3 — Sistema de Temas por Sucursal 10 temas: 5 oscuros + 5 claros Uso: ============================================================ */ /* ══════════════════════════════════════════════════════════ TEMA 1 (DEFAULT): dark-green — Luna Bosque Verde oscuro + dorado premium (tema original del sistema) ══════════════════════════════════════════════════════════ */ [data-theme="dark-green"] { --verde-base: #1F5D3A; --verde-medio: #3E8E5B; --verde-principal: #6FBF73; --verde-claro: #A8D5A2; --dorado: #d4a843; --dorado-claro: #f0c96a; --dorado-dark: #a07a20; --bg-darkest: #080f0a; --bg-dark: #0f1e15; --bg-card: #162b1f; --bg-card-2: #1a3326; --bg-sidebar: #0d1c13; --bg-input: #0a1610; --text-primary: #e8f5e9; --text-secondary: #A8D5A2; --text-muted: #6b9f7a; --border: #2a4a35; --border-hover: #3E8E5B; --border-focus: #6FBF73; --accent: #6FBF73; --accent-glow: rgba(111,191,115,.15); --sidebar-text: #A8D5A2; --btn-primary-from:#3E8E5B; --btn-primary-to: #6FBF73; --bg-nav-section: #14251b; --color-nav-section:#A8D5A2; --border-nav-section:rgba(111,191,115,0.25); } /* ══════════════════════════════════════════════════════════ TEMA 2: dark-slate — Grafito Azul Fondo casi negro + acentos índigo ══════════════════════════════════════════════════════════ */ [data-theme="dark-slate"] { --verde-base: #3730a3; --verde-medio: #4f46e5; --verde-principal: #6366f1; --verde-claro: #a5b4fc; --dorado: #a5b4fc; --dorado-claro: #c7d2fe; --dorado-dark: #4338ca; --bg-darkest: #070a12; --bg-dark: #0f1117; --bg-card: #1a1d27; --bg-card-2: #1f2235; --bg-sidebar: #13151f; --bg-input: #0d0f18; --text-primary: #e2e8ff; --text-secondary: #a5b4fc; --text-muted: #6b7280; --border: #2a2d3e; --border-hover: #4f46e5; --border-focus: #6366f1; --accent: #6366f1; --accent-glow: rgba(99,102,241,.15); --sidebar-text: #a5b4fc; --btn-primary-from:#4f46e5; --btn-primary-to: #6366f1; --bg-nav-section: #191c28; --color-nav-section:#a5b4fc; --border-nav-section:rgba(99,102,241,0.25); } /* ══════════════════════════════════════════════════════════ TEMA 3: dark-navy — Rojo Fuego Gris muy oscuro / negro + acentos rojo vibrante ══════════════════════════════════════════════════════════ */ [data-theme="dark-navy"] { --verde-base: #24262b; --verde-medio: #3a3e47; --verde-principal: #f32c3f; --verde-claro: #ff4a5a; --dorado: #f32c3f; --dorado-claro: #ff4a5a; --dorado-dark: #c91c2c; --bg-darkest: #121316; --bg-dark: #1b1d22; --bg-card: #24262b; --bg-card-2: #2a2d33; --bg-sidebar: #24262b; --bg-input: #17191d; --text-primary: #ffffff; --text-secondary: #d1d3d6; --text-muted: #8a8e96; --border: #3a3e47; --border-hover: #4a4e58; --border-focus: #f32c3f; --accent: #f32c3f; --accent-glow: rgba(243, 44, 63, 0.2); --sidebar-text: #ffffff; --btn-primary-from:#f32c3f; --btn-primary-to: #e02334; --bg-nav-section: #2d2f36; --color-nav-section:#ff4a5a; --border-nav-section:rgba(243,44,63,0.25); } /* ══════════════════════════════════════════════════════════ TEMA 4: dark-charcoal — Carbón Dorado Negro cálido + naranja premium ══════════════════════════════════════════════════════════ */ [data-theme="dark-charcoal"] { --verde-base: #7c2d12; --verde-medio: #c2410c; --verde-principal: #f97316; --verde-claro: #fb923c; --dorado: #fbbf24; --dorado-claro: #fcd34d; --dorado-dark: #d97706; --bg-darkest: #080706; --bg-dark: #111010; --bg-card: #1c1a18; --bg-card-2: #232120; --bg-sidebar: #0e0d0b; --bg-input: #0a0908; --text-primary: #fef3e8; --text-secondary: #fdba74; --text-muted: #78614a; --border: #332d25; --border-hover: #c2410c; --border-focus: #f97316; --accent: #f97316; --accent-glow: rgba(249,115,22,.15); --sidebar-text: #fdba74; --btn-primary-from:#c2410c; --btn-primary-to: #f97316; --bg-nav-section: #181614; --color-nav-section:#fbbf24; --border-nav-section:rgba(249,115,22,0.25); } /* ══════════════════════════════════════════════════════════ TEMA 5: dark-violet — Noche Violeta Violeta profundo + magenta/rosa ══════════════════════════════════════════════════════════ */ [data-theme="dark-violet"] { --verde-base: #581c87; --verde-medio: #7e22ce; --verde-principal: #a855f7; --verde-claro: #d8b4fe; --dorado: #e879f9; --dorado-claro: #f0abfc; --dorado-dark: #c026d3; --bg-darkest: #060410; --bg-dark: #0d0a1a; --bg-card: #16102b; --bg-card-2: #1d1438; --bg-sidebar: #0a0818; --bg-input: #080614; --text-primary: #f3e8ff; --text-secondary: #d8b4fe; --text-muted: #6d4a8a; --border: #2a1a4a; --border-hover: #7e22ce; --border-focus: #a855f7; --accent: #a855f7; --accent-glow: rgba(168,85,247,.15); --sidebar-text: #d8b4fe; --btn-primary-from:#7e22ce; --btn-primary-to: #a855f7; --bg-nav-section: #130f24; --color-nav-section:#d8b4fe; --border-nav-section:rgba(168,85,247,0.25); } /* ══════════════════════════════════════════════════════════ TEMA 6: light-green — Menta Fresca Blanco + sidebar verde oscuro + acentos verdes ══════════════════════════════════════════════════════════ */ [data-theme="light-green"] { --verde-base: #1F5D3A; --verde-medio: #3E8E5B; --verde-principal: #2d7a4a; --verde-claro: #e8f5eb; --dorado: #2d7a4a; --dorado-claro: #4a9e6a; --dorado-dark: #1a5c30; --bg-darkest: #e0ede3; --bg-dark: #f0faf1; --bg-card: #ffffff; --bg-card-2: #f5fbf6; --bg-sidebar: #144026; --bg-input: #f0f8f1; --text-primary: #0d1a10; --text-secondary: #1a3a22; --text-muted: #3d6648; --border: #c8e6cc; --border-hover: #3E8E5B; --border-focus: #2d7a4a; --accent: #2d7a4a; --accent-glow: rgba(45,122,74,.1); --sidebar-text: #a8d5a2; --btn-primary-from:#3E8E5B; --btn-primary-to: #2d7a4a; --bg-nav-section: #1b4c30; --color-nav-section:#a8d5a2; --border-nav-section:rgba(168,213,162,0.2); --shadow: 0 4px 24px rgba(0,0,0,.08); --shadow-lg: 0 8px 40px rgba(0,0,0,.12); } /* ══════════════════════════════════════════════════════════ TEMA 7: light-blue — Cielo Corporativo Gris azulado claro + sidebar navy + azul ══════════════════════════════════════════════════════════ */ [data-theme="light-blue"] { color-scheme: dark !important; --verde-base: #1a3442; --verde-medio: #295267; --verde-principal: #ff5b5b; --verde-claro: #ff8a8a; --dorado: #3e7694; --dorado-claro: #4b85a3; --dorado-dark: #e04a4a; --bg-darkest: #142a36; --bg-dark: #1a3442; --bg-card: #244659; --bg-card-2: #295267; --bg-sidebar: #142a36; --bg-input: #1d3a4a; --text-primary: #ffffff; --text-secondary: #d9e6eb; --text-muted: #8fb2c4; --border: #32627a; --border-hover: #3e7694; --border-focus: #ff5b5b; --accent: #ff5b5b; --accent-glow: rgba(255,91,91,.15); --sidebar-text: #d9e6eb; --btn-primary-from:#ff7070; --btn-primary-to: #ff5b5b; --bg-nav-section: #1d3544; --color-nav-section:#d9e6eb; --border-nav-section:rgba(62,118,148,0.25); --shadow: 0 4px 24px rgba(0,0,0,.15); --shadow-lg: 0 8px 40px rgba(0,0,0,.25); } /* ══════════════════════════════════════════════════════════ TEMA 8: light-teal — Aguamarina Blanco limpio + teal/verde azulado ══════════════════════════════════════════════════════════ */ [data-theme="light-teal"] { --verde-base: #003036; --verde-medio: #004d55; --verde-principal: #00a59b; --verde-claro: #d1f0ed; --dorado: #008c84; --dorado-claro: #4ddbcf; --dorado-dark: #005e59; --bg-darkest: #e9f0f0; --bg-dark: #f4f7f6; --bg-card: #ffffff; --bg-card-2: #f9fafa; --bg-sidebar: #004d55; --bg-input: #f4f7f6; --text-primary: #081c1b; --text-secondary: #004d55; --text-muted: #577c7b; --border: #d5e3e2; --border-hover: #008c84; --border-focus: #00a59b; --accent: #00a59b; --accent-glow: rgba(0,165,155,.15); --sidebar-text: #c4edea; --btn-primary-from:#008c84; --btn-primary-to: #00a59b; --bg-nav-section: #005d67; --color-nav-section:#c4edea; --border-nav-section:rgba(0,165,155,0.25); --shadow: 0 4px 24px rgba(0,0,0,.06); --shadow-lg: 0 8px 40px rgba(0,0,0,.1); } /* ══════════════════════════════════════════════════════════ TEMA 9: light-purple — Blanco Humo Blanco humo puro + sidebar antracita + acento gris azulado ══════════════════════════════════════════════════════════ */ [data-theme="light-purple"] { --verde-base: #334155; --verde-medio: #475569; --verde-principal: #64748b; --verde-claro: #f1f5f9; --dorado: #475569; --dorado-claro: #94a3b8; --dorado-dark: #334155; --bg-darkest: #e2e8f0; --bg-dark: #f5f5f7; --bg-card: #ffffff; --bg-card-2: #f8fafc; --bg-sidebar: #0f1115; --bg-input: #f1f5f9; --text-primary: #020617; --text-secondary: #0f172a; --text-muted: #334155; --border: #e2e8f0; --border-hover: #94a3b8; --border-focus: #64748b; --accent: #475569; --accent-glow: rgba(71,85,105,.1); --sidebar-text: #cbd5e1; --btn-primary-from:#334155; --btn-primary-to: #475569; --bg-nav-section: #171a20; --color-nav-section:#cbd5e1; --border-nav-section:rgba(148,163,184,0.25); --shadow: 0 4px 24px rgba(0,0,0,.06); --shadow-lg: 0 8px 40px rgba(0,0,0,.10); } /* ══════════════════════════════════════════════════════════ TEMA 10: light-warm — Arena Cálida Beige/crema + sidebar marrón + ámbar dorado ══════════════════════════════════════════════════════════ */ [data-theme="light-warm"] { --verde-base: #292218; --verde-medio: #92400e; --verde-principal: #d97706; --verde-claro: #fef3c7; --dorado: #d97706; --dorado-claro: #fbbf24; --dorado-dark: #b45309; --bg-darkest: #ede0cc; --bg-dark: #fdf8f0; --bg-card: #ffffff; --bg-card-2: #fffcf5; --bg-sidebar: #1a150f; --bg-input: #fdf5e8; --text-primary: #0e0a08; --text-secondary: #1f170c; --text-muted: #5c4528; --border: #e8d8b8; --border-hover: #92400e; --border-focus: #d97706; --accent: #d97706; --accent-glow: rgba(217,119,6,.1); --sidebar-text: #fcd34d; --btn-primary-from:#92400e; --btn-primary-to: #d97706; --bg-nav-section: #251d15; --color-nav-section:#fcd34d; --border-nav-section:rgba(217,119,6,0.25); --shadow: 0 4px 24px rgba(0,0,0,.07); --shadow-lg: 0 8px 40px rgba(0,0,0,.11); } /* ══════════════════════════════════════════════════════════ AJUSTES GLOBALES PARA TEMAS CLAROS Sobrescriben colores hard-coded de style.css ══════════════════════════════════════════════════════════ */ [data-theme^="light-"] body, [data-theme^="light-"] { color-scheme: light; } /* Scrollbar en temas claros */ [data-theme^="light-"] ::-webkit-scrollbar-track { background: var(--bg-darkest); } [data-theme^="light-"] ::-webkit-scrollbar-thumb { background: var(--verde-medio); } /* Sidebar: texto blanco sobre fondo oscuro */ [data-theme^="light-"] .sidebar { background: var(--bg-sidebar); } [data-theme^="light-"] .sidebar-logo { border-bottom-color: rgba(255,255,255,.1); } [data-theme^="light-"] .brand-name, [data-theme^="light-"] .brand-suc { color: rgba(255,255,255,.9); } [data-theme^="light-"] .nav-section-label { color: var(--color-nav-section, rgba(255,255,255,.4)); } [data-theme^="light-"] .nav-link { color: var(--sidebar-text); border-left-color: transparent; } [data-theme^="light-"] .nav-link:hover, [data-theme^="light-"] .nav-link.active { background: rgba(255,255,255,.12); color: #ffffff; border-left-color: var(--accent); } [data-theme^="light-"] .sidebar-footer { border-top-color: rgba(255,255,255,.1); } [data-theme^="light-"] .btn-logout { color: rgba(255,255,255,.5); } [data-theme^="light-"] .btn-logout:hover { background: rgba(239,68,68,.2); color: #fca5a5; } /* Topbar en temas claros */ [data-theme^="light-"] .topbar { background: var(--bg-card); border-bottom-color: var(--border); box-shadow: 0 1px 4px rgba(0,0,0,.06); } [data-theme^="light-"] .page-title { color: var(--text-primary); } [data-theme^="light-"] .btn-sidebar-toggle { color: var(--text-muted); } [data-theme^="light-"] .topbar-username { color: var(--text-primary); } [data-theme^="light-"] .topbar-suc { color: var(--text-muted); } [data-theme^="light-"] .topbar-avatar { color: var(--accent); } /* Cards / Tablas en temas claros */ [data-theme^="light-"] .card { background: var(--bg-card); border-color: var(--border); box-shadow: var(--shadow); } [data-theme^="light-"] .table th { background: var(--bg-darkest); color: var(--text-muted); border-bottom-color: var(--border); } [data-theme^="light-"] .table td { color: var(--text-secondary); border-bottom-color: var(--border); } [data-theme^="light-"] .table tbody tr:hover { background: var(--accent-glow); } /* Formularios en temas claros */ [data-theme^="light-"] .form-control { background: var(--bg-input); border-color: var(--border); color: var(--text-primary); } [data-theme^="light-"] .form-control:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--accent-glow); } [data-theme^="light-"] .form-label { color: var(--text-secondary); } /* Modal en temas claros */ [data-theme^="light-"] .modal { background: var(--bg-card); border-color: var(--border); } [data-theme^="light-"] .modal-title { color: var(--text-primary); } [data-theme^="light-"] .modal-close { color: var(--text-muted); } /* Botones en temas claros */ [data-theme^="light-"] .btn-primary { background: linear-gradient(135deg, var(--btn-primary-from), var(--btn-primary-to)); box-shadow: 0 4px 12px var(--accent-glow); color: #fff; } [data-theme^="light-"] .btn-primary:hover { background: linear-gradient(135deg, var(--btn-primary-to), var(--btn-primary-from)); box-shadow: 0 6px 20px var(--accent-glow); } [data-theme^="light-"] .btn-outline { border-color: var(--border); color: var(--text-secondary); } [data-theme^="light-"] .btn-outline:hover { border-color: var(--accent); color: var(--accent); } /* Badges en temas claros */ [data-theme^="light-"] .badge-green { background: var(--accent-glow); color: var(--accent); border-color: rgba(0,0,0,.1); } /* Section header en temas claros */ [data-theme^="light-"] .section-header { border-bottom-color: var(--border); } [data-theme^="light-"] .section-title { color: var(--text-primary); } /* KPI Cards en temas claros */ [data-theme^="light-"] .kpi-card { background: var(--bg-card); border-color: var(--border); } [data-theme^="light-"] .kpi-value { color: var(--text-primary); } [data-theme^="light-"] .kpi-label { color: var(--text-muted); } /* Alerts en temas claros */ [data-theme^="light-"] .alert-success { background: rgba(34,197,94,.08); } [data-theme^="light-"] .alert-error { background: rgba(239,68,68,.08); } /* Overlay sidebar mobile */ [data-theme^="light-"] #sidebar-overlay { background: rgba(0,0,0,.5); }