/* ============================================================ SISTEMA DE TEMAS - ALMACEN Theme Oscuro Moderno Stone + Amber + Tema Claro ============================================================ Uso: - Tema oscuro (default): data-theme="dark" en - Tema claro: data-theme="light" en - Toggle automatico via theme.js ============================================================ */ /* ── TEMA OSCURO (DEFAULT) ──────────────────────────────── */ /* Paleta: Neutral Stone + Amber — Cálido y profesional */ :root, [data-theme="dark"] { /* ── Fondos (60% ─ dominante cálido) ──────────────── */ --color-bg: #1c1917; --color-bg-alt: #292524; --color-surface: #292524; --color-surface-hover: #44403c; --color-surface-active: #57534e; --color-border: #44403c; --color-border-hover: #78716c; /* ── Primario Ámbar (10% ─ acento profesional) ──── */ --color-primary: #f59e0b; --color-primary-hover: #d97706; --color-primary-dark: #b45309; --color-primary-light: rgba(245, 158, 11, 0.10); --color-primary-15: rgba(245, 158, 11, 0.15); --color-primary-25: rgba(245, 158, 11, 0.25); --color-primary-40: rgba(245, 158, 11, 0.40); --color-primary-rgb: 245, 158, 11; /* ── Texto (30% ─ alto contraste) ────────────────── */ --color-text: #e7e5e4; --color-text-heading: #fafaf9; --color-text-muted: #a8a29e; --color-text-inverse: #1c1917; /* ── Header / Footer ──────────────────────────────── */ --color-header: #1c1917; --color-header-text: #e7e5e4; --color-header-border: #44403c; /* ── Acciones ────────────────────────────────────── */ --color-esmeralda: #22c55e; --color-esmeralda-hover: #16a34a; --color-esmeralda-light: rgba(34, 197, 94, 0.12); --color-rubi: #ef4444; --color-rubi-hover: #dc2626; --color-rubi-light: rgba(239, 68, 68, 0.12); --color-warning: #f59e0b; --color-warning-hover: #d97706; --color-warning-light: rgba(245, 158, 11, 0.12); --color-info: #06b6d4; --color-info-hover: #0891b2; --color-info-light: rgba(6, 182, 212, 0.12); /* ── Gradientes ──────────────────────────────────── */ --gradient-hero: linear-gradient(135deg, #1c1917 0%, #292524 50%, #1c1917 100%); --gradient-confirmar: linear-gradient(135deg, #22c55e 0%, #16a34a 100%); --gradient-cancelar: linear-gradient(135deg, #ef4444 0%, #dc2626 100%); --gradient-primary: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); --gradient-info: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); /* ── Sombras ──────────────────────────────────────── */ --shadow-none: 0 0 0 0 transparent; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30); --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.35); --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.40); --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.50); --shadow-button: 0 1px 3px rgba(0, 0, 0, 0.30); --shadow-card-hover: 0 8px 16px rgba(0, 0, 0, 0.40); --shadow-modal: 0 25px 50px rgba(0, 0, 0, 0.60); --shadow-toast: 0 8px 16px rgba(0, 0, 0, 0.40); /* ── Sin glow ─────────────────────────────────────── */ --glow-primary: none; --glow-primary-md: none; --glow-primary-lg: none; --glow-esmeralda: none; --glow-rubi: none; --glow-warning: none; /* ── Border Radius ────────────────────────────────── */ --radius-none: 0; --radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-2xl: 24px; --radius-full: 9999px; /* ── Transiciones ──────────────────────────────────── */ --transition-fast: 0.15s ease; --transition-normal: 0.3s ease; --transition-slow: 0.5s ease; --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); --transition-theme: 0.35s ease; /* ── Tipografia ────────────────────────────────────── */ --font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 1.875rem; --font-size-4xl: 2.25rem; /* ── Espaciado ─────────────────────────────────────── */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; --space-3xl: 4rem; /* ── Z-Index ───────────────────────────────────────── */ --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 400; --z-modal: 500; --z-toast: 600; --z-tooltip: 700; /* ── Listas ─────────────────────────────────────────── */ --lista-max-altura: 400px; --lista-item-padding: 0.75rem 1rem; --lista-item-gap: 0.25rem; --lista-skeleton-color: #292524; /* ── Especificos Override ──────────────────────────── */ --color-bg-spinner: rgba(245, 158, 11, 0.15); --color-input-bg: #292524; --color-input-border: #44403c; --color-input-focus: #f59e0b; --color-input-text: #e7e5e4; --color-input-placeholder: #78716c; --color-table-header: #292524; --color-table-header-text: #a8a29e; /* ── Meta ──────────────────────────────────────────── */ color-scheme: dark; } /* ── TEMA CLARO ──────────────────────────────────────────── */ [data-theme="light"] { --color-bg: #eef1f8; --color-bg-alt: #e4e8f2; --color-surface: #ffffff; --color-surface-hover: #f5f7fc; --color-surface-active: #edf0f8; --color-border: #d5dbe8; --color-border-hover: #b8c2d6; --color-primary: #d97706; --color-primary-hover: #b45309; --color-primary-dark: #92400e; --color-primary-light: rgba(217, 119, 6, 0.08); --color-primary-15: rgba(217, 119, 6, 0.12); --color-primary-25: rgba(217, 119, 6, 0.25); --color-primary-40: rgba(217, 119, 6, 0.40); --color-primary-rgb: 217, 119, 6; --color-text: #1a2035; --color-text-heading: #0d1220; --color-text-muted: #5e6b85; --color-text-inverse: #ffffff; --color-header: #ffffff; --color-header-text: #1e293b; --color-header-border: #e2e8f0; --color-esmeralda: #059669; --color-esmeralda-hover: #047857; --color-esmeralda-light: rgba(5, 150, 105, 0.10); --color-rubi: #e11d48; --color-rubi-hover: #be123c; --color-rubi-light: rgba(225, 29, 72, 0.10); --color-warning: #f59e0b; --color-warning-hover: #d97706; --color-warning-light: rgba(245, 158, 11, 0.10); --color-info: #0891b2; --color-info-hover: #0e7490; --color-info-light: rgba(8, 145, 178, 0.10); --gradient-hero: linear-gradient(135deg, #0d1220 0%, #1a2540 100%); --gradient-confirmar: linear-gradient(135deg, #059669 0%, #047857 100%); --gradient-cancelar: linear-gradient(135deg, #e11d48 0%, #be123c 100%); --gradient-primary: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); --gradient-warning: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); --gradient-info: linear-gradient(135deg, #0891b2 0%, #0e7490 100%); --shadow-none: 0 0 0 0 transparent; --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.10); --shadow-xl: 0 12px 36px rgba(0, 0, 0, 0.12); --shadow-button: 0 2px 6px rgba(0, 0, 0, 0.08); --shadow-card-hover: 0 8px 24px rgba(0, 0, 0, 0.10); --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.15); --shadow-toast: 0 8px 32px rgba(0, 0, 0, 0.12); --glow-primary: 0 0 12px rgba(245, 158, 11, 0.10); --glow-primary-md: 0 0 20px rgba(245, 158, 11, 0.15); --glow-primary-lg: 0 0 30px rgba(245, 158, 11, 0.20); --glow-esmeralda: 0 0 12px rgba(34, 197, 94, 0.10); --glow-rubi: 0 0 12px rgba(239, 68, 68, 0.10); --glow-warning: 0 0 12px rgba(245, 158, 11, 0.10); --lista-skeleton-color: #e4e8f2; --color-bg-spinner: rgba(217, 119, 6, 0.15); --color-input-bg: #ffffff; --color-input-border: #d5dbe8; --color-input-focus: #f59e0b; --color-input-text: #1a2035; --color-input-placeholder: #8892a8; --color-table-header: #eef1f8; --color-table-header-text: #5e6b85; color-scheme: light; } /* ── TRANSICIONES DE TEMA ────────────────────────────────── */ [data-theme], :root { transition: background-color var(--transition-theme), color var(--transition-theme); } body, .modulo-body, .modulo-card, .modulo-header, .card, .form-control, .form-select, .btn, .table, .modal-content, .alert, .app-header, .glass-surface, input, textarea, select { transition: background-color var(--transition-theme), border-color var(--transition-theme), box-shadow var(--transition-theme), color var(--transition-theme); } /* ── BODY BASE ──────────────────────────────────────────── */ body { font-family: var(--font-family); background: var(--color-bg); color: var(--color-text); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── SCROLLBAR PERSONALIZADO ────────────────────────────── */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: var(--color-bg); } ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-full); } ::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); } /* ── SELECTION ──────────────────────────────────────────── */ ::selection { background: var(--color-primary-25); color: var(--color-primary); } [data-theme="dark"] ::selection { background: var(--color-primary-25); color: var(--color-text-heading); } /* ── FOCUS VISIBLE ──────────────────────────────────────── */ :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* ── TOGGLE DE TEMA ────────────────────────────────────── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text-muted); cursor: pointer; transition: all var(--transition-fast); font-size: 1rem; position: relative; overflow: hidden; } .theme-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); box-shadow: var(--glow-primary); transform: scale(1.08); } .theme-toggle:active { transform: scale(0.95); } .theme-toggle i { transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease; } [data-theme="dark"] .theme-toggle .fa-sun { display: block; } [data-theme="dark"] .theme-toggle .fa-moon { display: none; } [data-theme="light"] .theme-toggle .fa-sun { display: none; } [data-theme="light"] .theme-toggle .fa-moon { display: block; } /* ── HEADER ACCENT LINE ─────────────────────────────── */ [data-theme="dark"] .app-header { border-bottom: 1px solid var(--color-primary-15); } [data-theme="dark"] .app-header::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--color-primary-25), transparent); opacity: 0.4; } .app-header { position: relative; } /* ── STAT CARD ACCENT ────────────────────────────────── */ [data-theme="dark"] .stat-card:hover { box-shadow: var(--shadow-lg); } [data-theme="dark"] .stat-card:hover .stat-value { color: var(--color-primary); } /* ── DASHBOARD CARD ACCENT ───────────────────────────── */ [data-theme="dark"] .dashboard-card:hover { box-shadow: var(--shadow-lg); border-color: var(--color-primary-40); } [data-theme="dark"] .dashboard-card-modular:hover { box-shadow: var(--shadow-card-hover); border-color: var(--color-primary-40); } /* ── INPUT FOCUS ─────────────────────────────────────── */ .form-control:focus, .form-select:focus { border-color: var(--color-input-focus) !important; box-shadow: 0 0 0 3px var(--color-primary-15) !important; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { box-shadow: 0 0 0 3px var(--color-primary-15) !important; } /* ── LINK UNDERLINE ───────────────────────────────────── */ .app-header-link::after { background: var(--color-primary) !important; } /* ── SECTION DIVIDER ──────────────────────────────────── */ [data-theme="dark"] .section-divider { background: linear-gradient(90deg, transparent 0%, var(--color-primary-25) 50%, transparent 100%); } /* ── PROGRESS BAR ─────────────────────────────────────── */ [data-theme="dark"] .dashboard-progress-bar, [data-theme="dark"] .progress-bar-fill { box-shadow: none; } /* ── TOAST THEME ADAPTATIONS ────────────────────────────── */ [data-theme="dark"] .toast-item { background: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .toast-item.toast-success { background: linear-gradient(135deg, rgba(0, 230, 138, 0.08) 0%, var(--color-surface) 100%); border-left-color: var(--color-esmeralda); } [data-theme="dark"] .toast-item.toast-error { background: linear-gradient(135deg, rgba(255, 59, 111, 0.08) 0%, var(--color-surface) 100%); border-left-color: var(--color-rubi); } [data-theme="dark"] .toast-item.toast-warning { background: linear-gradient(135deg, rgba(255, 176, 32, 0.08) 0%, var(--color-surface) 100%); border-left-color: var(--color-warning); } [data-theme="dark"] .toast-item.toast-info { background: linear-gradient(135deg, rgba(0, 212, 255, 0.08) 0%, var(--color-surface) 100%); border-left-color: var(--color-primary); } /* ── LOADING OVERLAY THEME ─────────────────────────────── */ [data-theme="dark"] .loading-overlay { background: rgba(6, 11, 24, 0.90); } [data-theme="light"] .loading-overlay { background: rgba(238, 241, 248, 0.90); } /* ── SKELETON LOADER THEME ──────────────────────────────── */ [data-theme="dark"] .skeleton { background: linear-gradient(90deg, var(--color-bg) 25%, var(--color-border) 50%, var(--color-bg) 75%); } [data-theme="dark"] .lista-skeleton-linea { background: linear-gradient(90deg, var(--color-bg) 25%, var(--color-border) 50%, var(--color-bg) 75%); } /* ── TABLA THEME ───────────────────────────────────────── */ [data-theme="dark"] .table { color: var(--color-text); --bs-table-bg: transparent; --bs-table-hover-bg: var(--color-surface-hover); } [data-theme="dark"] .table th { color: var(--color-text-muted); border-color: var(--color-border); } [data-theme="dark"] .table td { border-color: var(--color-border); } [data-theme="dark"] .table tbody tr:hover { background-color: var(--color-surface-hover); } /* ── BADGE THEME ───────────────────────────────────────── */ [data-theme="dark"] .badge-success { background: rgba(0, 230, 138, 0.15); color: var(--color-esmeralda); } [data-theme="dark"] .badge-danger { background: rgba(255, 59, 111, 0.15); color: var(--color-rubi); } [data-theme="dark"] .badge-warning { background: rgba(255, 176, 32, 0.15); color: var(--color-warning); } [data-theme="dark"] .badge-info { background: rgba(0, 212, 255, 0.15); color: var(--color-primary); } [data-theme="dark"] .badge-primary { background: var(--color-primary-15); color: var(--color-primary); } [data-theme="dark"] .badge-muted { background: rgba(104, 128, 166, 0.15); color: var(--color-text-muted); border-color: var(--color-border); } /* ── NAV TABS THEME ───────────────────────────────────── */ [data-theme="dark"] .nav-tabs { border-bottom-color: var(--color-border); } [data-theme="dark"] .nav-tabs .nav-link { color: var(--color-text-muted); } [data-theme="dark"] .nav-tabs .nav-link:hover { color: var(--color-text); border-color: transparent; } [data-theme="dark"] .nav-tabs .nav-link.active { color: var(--color-primary); border-bottom-color: var(--color-primary); } /* ── PANEL THEME ───────────────────────────────────────── */ [data-theme="dark"] .panel { background: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .panel:hover { border-color: var(--color-primary-40); box-shadow: var(--glow-primary); } [data-theme="dark"] .panel-header { background: var(--color-bg-alt); border-bottom-color: var(--color-border); } [data-theme="dark"] .panel-footer { background: var(--color-bg-alt); border-top-color: var(--color-border); } /* ── MODAL THEME ──────────────────────────────────────── */ [data-theme="dark"] .modal-content { background: var(--color-surface); border-color: var(--color-border); } [data-theme="dark"] .modal-header { background: var(--color-bg-alt); border-bottom-color: var(--color-border); } [data-theme="dark"] .modal-footer { background: var(--color-bg-alt); border-top-color: var(--color-border); } /* ── DROPDOWN THEME ────────────────────────────────────── */ [data-theme="dark"] .dropdown-menu { background: var(--color-surface); border-color: var(--color-border); box-shadow: var(--shadow-lg); } [data-theme="dark"] .dropdown-item { color: var(--color-text); } [data-theme="dark"] .dropdown-item:hover { background: var(--color-surface-hover); color: var(--color-primary); } /* ── ALERT THEME ───────────────────────────────────────── */ [data-theme="dark"] .alert-danger { background: rgba(255, 59, 111, 0.12); color: var(--color-rubi); border-color: rgba(255, 59, 111, 0.25); } [data-theme="dark"] .alert-success { background: var(--color-esmeralda-light); color: var(--color-esmeralda); border-color: rgba(0, 230, 138, 0.25); } [data-theme="dark"] .alert-warning { background: var(--color-warning-light); color: var(--color-warning); border-color: rgba(255, 176, 32, 0.25); } [data-theme="dark"] .alert-info { background: var(--color-primary-light); color: var(--color-primary); border-color: rgba(0, 212, 255, 0.25); } /* ── REDUCE MOTION ─────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ── RESPONSIVE ────────────────────────────────────────── */ @media (max-width: 768px) { .theme-toggle { width: 36px; height: 36px; font-size: 0.875rem; } }