/* ============================================================================= css/theme.css — Sistema de Tokens de Diseño y Temas Día / Noche BAR ANTIGRAVITY ERP — Versión 1.0 Importado por css/index.css como primera regla. ============================================================================= */ /* ============================================================================= TEMA BASE — Modo Predeterminado (Neón Oscuro Premium) Activo cuando NO se ha aplicado ningún data-theme explícito. ============================================================================= */ :root { /* --- Fondos y Superficies --- */ --bg-dark: 232, 16%, 10%; /* #13141c — Fondo principal de la app */ --bg-card: 232, 18%, 14%; /* #1d1e2b — Tarjetas y módulos */ --bg-input: 232, 22%, 9%; /* #111219 — Entradas de datos */ /* --- Texto --- */ --text-main: 220, 15%, 94%; /* #EDEEF4 — Texto principal */ --text-muted: 220, 10%, 65%; /* #9FA4B5 — Texto secundario y etiquetas */ /* --- Colores de Acento Violeta / Turquesa (Tema Barra Predeterminado) --- */ --primary: 270, 75%, 62%; /* #9B59FA — Violeta brillante */ --primary-hover: 270, 85%, 68%; /* #A86BFC — Hover violeta */ --accent: 172, 80%, 45%; /* #16C9A8 — Verde azulado / Turquesa */ --accent-hover: 172, 90%, 50%; /* #0ADAB5 — Hover turquesa */ /* --- Estados Funcionales --- */ --success: 145, 65%, 45%; /* #25A05A — Verde éxito */ --danger: 355, 75%, 55%; /* #E0294A — Rojo peligro */ --warning: 35, 80%, 55%; /* #E8961A — Ámbar advertencia */ /* --- Bordes --- */ --border: 230, 15%, 18%; /* #25273A — Borde de división */ --border-glow: 270, 60%, 40%; /* #6B3BD4 — Borde activo / foco */ /* --- Sombras y Efectos de Glow --- */ --glow-shadow: 0 0 20px hsla(270, 75%, 62%, 0.25); --accent-glow: 0 0 15px hsla(172, 80%, 45%, 0.20); --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); /* --- Tipografía --- */ --font-title: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; /* --- Velocidad de Transición Global de Tema --- */ --theme-transition-duration: 800ms; /* --- Tokens Semánticos de Alta Fidelidad (Base oscura predeterminada) --- Disponibles como var(--color-bg), var(--color-primary), etc. Los tokens HSL anteriores siguen activos para todos los componentes existentes. --- */ --color-bg: #13141C; /* Fondo principal oscuro base */ --color-surface: #1D1E2B; /* Superficie tarjetas oscura base */ --color-text: #EDEEF4; /* Texto principal claro */ --color-primary: #9B59FA; /* Violeta brillante base */ --color-secondary: #16C9A8; /* Turquesa base */ --shadow-panel: 0 10px 30px rgba(0, 0, 0, 0.35); /* --- Tokens de Soporte para Componentes --- Usados directamente por components.css e index.css sin valores fijos. --- */ --glass-bg: rgba(22, 24, 33, 0.65); /* Fondo semitransparente para glass-card */ --glass-border: rgba(255, 255, 255, 0.05); /* Borde sutil glass */ --overlay-bg: rgba(7, 8, 10, 0.80); /* Fondo modal/overlay oscuro */ --color-btn-text: #ffffff; /* Texto sobre btn-primary oscuro */ --gradient-accent: rgba(99, 102, 241, 0.15); /* Color acento del gradiente de fondo */ } /* ============================================================================= TEMA DÍA — Modo "Profesional" Se activa con: Diseñado para entornos con buena iluminación (back-office, gestión). ============================================================================= */ html[data-theme="day"] { /* --- Fondos y Superficies --- */ --bg-dark: 210, 20%, 96%; /* #F4F7F6 — Gris perla suave */ --bg-card: 0, 0%, 100%; /* #FFFFFF — Blanco puro */ --bg-input: 210, 16%, 93%; /* #EBF0EE — Gris para inputs */ /* --- Texto --- */ --text-main: 210, 15%, 20%; /* #2D3436 — Carbón oscuro para máxima legibilidad */ --text-muted: 210, 10%, 50%; /* #74909A — Gris muted */ /* --- Colores de Acento Naranja / Turquesa (Profesional) --- */ --primary: 24, 100%, 50%; /* #FF6600 — Naranja vivo */ --primary-hover: 24, 100%, 45%; /* #E65C00 — Naranja hover */ --accent: 174, 72%, 45%; /* #26B5A5 — Turquesa Teal */ --accent-hover: 174, 72%, 40%; /* #21A093 — Turquesa hover */ /* --- Bordes --- */ --border: 210, 14%, 87%; /* #D9E2E0 — Borde sutil claro */ --border-glow: 24, 100%, 50%; /* #FF6600 — Borde activo naranja */ /* --- Sombras y Efectos (Más suaves en Modo Día) --- */ --glow-shadow: 0 4px 15px rgba(255, 102, 0, 0.15); --accent-glow: 0 4px 12px rgba( 38, 181, 165, 0.10); --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.04); /* --- Tokens Semánticos de Alta Fidelidad — Modo Día Profesional --- Paleta limpia para entornos de alta iluminación y gestión administrativa. --- */ --color-bg: #F8F9FA; /* Blanco hueso suave para fondo principal */ --color-surface: #FFFFFF; /* Blanco puro para tarjetas y paneles */ --color-text: #2C3E50; /* Azul carbón para máxima legibilidad diurna */ --color-primary: #FF6600; /* Naranja vibrante — acción y navegación */ --color-secondary: #20B2AA; /* Teal suave — detalles y badges */ --shadow-panel: 0 4px 12px rgba(0, 0, 0, 0.08); /* --- Tokens de Soporte para Componentes — Modo Día --- */ --glass-bg: rgba(255, 255, 255, 0.80); /* Glass card en día = casi opaco blanco */ --glass-border: rgba(44, 62, 80, 0.10); /* Borde carbón sutil */ --overlay-bg: rgba(44, 62, 80, 0.60); /* Overlay oscuro para modales en fondo claro */ --color-btn-text: #ffffff; /* Texto sobre btn naranja = blanco */ --gradient-accent: rgba(255, 102, 0, 0.08); /* Acento naranja en gradiente */ } /* ============================================================================= TEMA NOCHE — Modo "Neón" Se activa con: Diseñado para baja iluminación (operación de salón, meseros en campo). ============================================================================= */ html[data-theme="night"] { /* --- Fondos y Superficies --- */ --bg-dark: 240, 12%, 6%; /* #0D0D14 — Negro profundo del ERP */ --bg-card: 240, 9%, 12%; /* #1A1A24 — Superficie ERP oscura */ --bg-input: 240, 10%, 8%; /* #111118 — Negro para inputs */ /* --- Texto (Alto contraste para baja iluminación) --- */ --text-main: 0, 0%, 96%; /* #F5F5F5 — Blanco de alto contraste */ --text-muted: 220, 12%, 75%; /* #B8BDCC — Gris claro y legible */ /* --- Colores de Acento Hot Pink / Cyan (Neón) --- */ --primary: 320, 100%, 65%; /* #FF29B5 — Hot Pink Neón */ --primary-hover: 320, 100%, 70%; /* #FF4DC2 — Pink hover */ --accent: 180, 100%, 45%; /* #00E5E5 — Cyan eléctrico */ --accent-hover: 180, 100%, 55%; /* #1AFFFF — Cyan hover */ /* --- Estados Funcionales específicos del modo Noche --- */ --success: 120, 100%, 65%; /* #4DFF4D — Verde neón */ /* --- Bordes (Oscuros y sutiles) --- */ --border: 240, 6%, 22%; /* #333345 — Borde sutil oscuro */ --border-glow: 320, 100%, 65%; /* #FF29B5 — Borde activo pink */ /* --- Sombras y Efectos de Glow (Intensos en Modo Noche) --- */ --glow-shadow: 0 0 15px rgba(255, 41, 181, 0.25); --accent-glow: 0 0 15px rgba( 0, 229, 229, 0.20); --card-shadow: 0 15px 35px rgba(0, 0, 0, 0.90); /* --- Tokens Semánticos de Alta Fidelidad — Modo Noche Neón --- Paleta de máximo contraste y brillo para baja iluminación en campo. --- */ --color-bg: #050505; /* Negro absoluto para fondo principal */ --color-surface: #121212; /* Negro superficie para tarjetas */ --color-text: #E0E0E0; /* Gris luminoso de alto contraste */ --color-primary: #FF00FF; /* Magenta Neón puro — acción y navegación */ --color-secondary: #00E5FF; /* Cian eléctrico — detalles y badges */ --shadow-panel: 0 4px 15px rgba(0, 229, 255, 0.15); /* --- Tokens de Soporte para Componentes — Modo Noche --- */ --glass-bg: rgba(5, 5, 5, 0.75); /* Glass card en noche = negro profundo */ --glass-border: rgba(255, 255, 255, 0.04); /* Borde blanco ultra-sutil */ --overlay-bg: rgba(0, 0, 0, 0.85); /* Overlay casi opaco para noche */ --color-btn-text: #ffffff; /* Texto sobre btn magenta = blanco */ --gradient-accent: rgba(255, 0, 255, 0.08); /* Acento magenta en gradiente */ } /* ============================================================================= TRANSICIÓN GLOBAL DE TEMA Garantiza que todos los elementos cambien de forma fluida al cambiar de tema. Duración definida por --theme-transition-duration (800ms por defecto). ============================================================================= */ html, body, .dashboard-layout, aside, main, header, .glass-card, .form-control, .btn, .sidebar, .sidebar-menu, .menu-item, .submenu-item, .main-header, h1, h2, h3, p, span, label, div, select, input, table, th, td, tr, .stat-widget { transition: background-color var(--theme-transition-duration) ease, color var(--theme-transition-duration) ease, border-color var(--theme-transition-duration) ease, box-shadow var(--theme-transition-duration) ease, transform var(--theme-transition-duration) ease; } /* ============================================================================= SOBRESCRITURAS VISUALES ESPECÍFICAS POR TEMA ============================================================================= */ /* --- Bordes neón reactivos en Modo Noche (Look ERP) --- */ html[data-theme="night"] .glass-card, html[data-theme="night"] .stat-widget { border: 1px solid rgba(255, 41, 181, 0.12) !important; box-shadow: 0 8px 32px rgba(0,0,0,0.5), inset 0 0 10px rgba(255, 41, 181, 0.02); } html[data-theme="night"] .glass-card:hover, html[data-theme="night"] .stat-widget:hover { border-color: rgba(255, 41, 181, 0.35) !important; box-shadow: 0 10px 40px rgba(0,0,0,0.6), 0 0 15px rgba(255, 41, 181, 0.15); } /* --- Menú Activo en Modo Día (Naranja Profesional) --- */ html[data-theme="day"] .menu-item.active, html[data-theme="day"] .submenu-item.active { background-color: rgba(255, 102, 0, 0.08) !important; color: #FF6600 !important; border-left-color: #FF6600 !important; } /* --- Menú Activo en Modo Noche (Hot Pink Neón) --- */ html[data-theme="night"] .menu-item.active, html[data-theme="night"] .submenu-item.active { background-color: rgba(255, 41, 181, 0.08) !important; color: #FF29B5 !important; border-left-color: #FF29B5 !important; } /* --- Fondo del cuerpo en Modo Día (sin gradiente neón) --- */ html[data-theme="day"] body { background: hsl(var(--bg-dark)) !important; } /* --- Fondo del cuerpo en Modo Noche (gradiente oscuro profundo) --- */ html[data-theme="night"] body { background: radial-gradient( circle at top, rgba(255, 41, 181, 0.06) 0%, rgba(13, 13, 20, 1) 100% ) no-repeat fixed !important; }