/** * Temas dinámicos ERP - CSS Variables * Light, Dark, Corporate, High Contrast + Océano, Esmeralda, Ámbar, Violeta, Rosa * Uso: (inyectado por active_theme) * Definiciones fuera de @layer para que no sean sobrescritas por otros estilos. */ /* ========== Escala global ERP – PARA PROBAR: cambia solo el número en scale(...) ========== */ /* Ej: 0.7 más pequeño, 0.75 como ref, 0.8 menos pequeño, 1 = sin escala */ .erp-zoom-outer { overflow-x: hidden; } .erp-zoom-scale { transform: scale(0.75); transform-origin: top left; width: 133.33%; min-height: 133.33vh; margin-bottom: -33.34vh; box-sizing: border-box; } /* ========== TEMA LIGHT (Indigo - por defecto) ========== */ :root, body[data-theme="light"], [data-theme="light"] { --color-primary: #4f46e5; --color-primary-hover: #4338ca; --color-secondary: #6366f1; --color-bg-main: #f5f5f5; --color-bg-surface: #ffffff; --color-surface-elevated: #ffffff; --color-text: #1e293b; --color-text-muted: #64748b; --color-border: #e2e8f0; --color-navbar: #4f46e5; --color-sidebar: #1e293b; --color-sidebar-text: #f1f5f9; --color-input-bg: #ffffff; --color-input-border: #e2e8f0; /* Iconos: SaaS Claro - trazos finos y oscuros */ --icon-color: #475569; --icon-stroke-width: 1.5; /* Hero / títulos de sección (Cobranza, Contabilidad, Ventas) */ --hero-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%); --hero-text: #ffffff; --color-success: #059669; --color-success-text: #ffffff; --color-danger: #dc3545; --color-danger-text: #ffffff; } /* ========== TEMA DARK (Slate) ========== */ body[data-theme="dark"], [data-theme="dark"] { --color-primary: #818cf8; --color-primary-hover: #a5b4fc; --color-secondary: #6366f1; --color-bg-main: #0f172a; --color-bg-surface: #1e293b; --color-surface-elevated: #334155; --color-text: #f1f5f9; --color-text-muted: #94a3b8; --color-border: #334155; --color-navbar: #1e293b; --color-sidebar: #0f172a; --color-sidebar-text: #e2e8f0; --color-input-bg: #1e293b; --color-input-border: #475569; /* Iconos: Dark Mode - colores vibrantes / neón */ --icon-color: #a5b4fc; --icon-stroke-width: 1.5; --hero-bg: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%); --hero-text: #f1f5f9; --color-success: #34d399; --color-success-text: #022c22; --color-danger: #f87171; --color-danger-text: #1e293b; } /* Hero en tema oscuro: reglas explícitas para que siempre se vea distinto */ body[data-theme="dark"] .accounting-hero, body[data-theme="dark"] .ventas-corporativas-hero, body[data-theme="dark"] .cobranza-hero { background: linear-gradient(135deg, #1e293b 0%, #334155 50%, #475569 100%) !important; color: #f1f5f9 !important; } body[data-theme="dark"] .accounting-hero h1, body[data-theme="dark"] .accounting-hero p, body[data-theme="dark"] .ventas-corporativas-hero h1, body[data-theme="dark"] .ventas-corporativas-hero p, body[data-theme="dark"] .cobranza-hero h1, body[data-theme="dark"] .cobranza-hero p { color: #f1f5f9 !important; } /* ========== TEMA CORPORATE (Navy) ========== */ body[data-theme="corporate"], [data-theme="corporate"] { --color-primary: #1e3a5f; --color-primary-hover: #2d4a6f; --color-secondary: #2563eb; --color-bg-main: #f1f5f9; --color-bg-surface: #ffffff; --color-surface-elevated: #ffffff; --color-text: #0f172a; --color-text-muted: #475569; --color-border: #cbd5e1; --color-navbar: #1e3a5f; --color-sidebar: #0f172a; --color-sidebar-text: #e2e8f0; --color-input-bg: #ffffff; --color-input-border: #cbd5e1; /* Iconos: Corporativo - tonos navy/azul */ --icon-color: #1e3a5f; --icon-stroke-width: 1.5; --hero-bg: linear-gradient(135deg, #1e3a5f 0%, #2563eb 100%); --hero-text: #ffffff; --color-success: #059669; --color-success-text: #ffffff; --color-danger: #dc3545; --color-danger-text: #ffffff; } /* ========== TEMA ALTO CONTRASTE ========== */ body[data-theme="contrast"], [data-theme="contrast"] { --color-primary: #000000; --color-primary-hover: #333333; --color-secondary: #333333; --color-bg-main: #ffffff; --color-bg-surface: #ffffff; --color-surface-elevated: #f5f5f5; --color-text: #000000; --color-text-muted: #333333; --color-border: #000000; --color-navbar: #000000; --color-sidebar: #000000; --color-sidebar-text: #ffffff; --color-input-bg: #ffffff; --color-input-border: #000000; --icon-color: #000000; --icon-stroke-width: 2.5; --hero-bg: linear-gradient(135deg, #000000 0%, #333333 100%); --hero-text: #ffffff; --color-success: #22c55e; --color-success-text: #ffffff; --color-danger: #dc3545; --color-danger-text: #ffffff; } /* ========== TEMA OCÉANO (Azul cielo / profesional) ========== */ body[data-theme="ocean"], [data-theme="ocean"] { --color-primary: #0284c7; --color-primary-hover: #0369a1; --color-secondary: #0ea5e9; --color-bg-main: #f0f9ff; --color-bg-surface: #ffffff; --color-surface-elevated: #e0f2fe; --color-text: #0c4a6e; --color-text-muted: #0369a1; --color-border: #bae6fd; --color-navbar: #0284c7; --color-sidebar: #0c4a6e; --color-sidebar-text: #e0f2fe; --color-input-bg: #ffffff; --color-input-border: #7dd3fc; --icon-color: #0369a1; --icon-stroke-width: 1.5; --hero-bg: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%); --hero-text: #ffffff; --color-success: #0d9488; --color-success-text: #ffffff; --color-danger: #dc2626; --color-danger-text: #ffffff; } /* ========== TEMA ESMERALDA (Verde profesional) ========== */ body[data-theme="emerald"], [data-theme="emerald"] { --color-primary: #059669; --color-primary-hover: #047857; --color-secondary: #10b981; --color-bg-main: #ecfdf5; --color-bg-surface: #ffffff; --color-surface-elevated: #d1fae5; --color-text: #064e3b; --color-text-muted: #047857; --color-border: #a7f3d0; --color-navbar: #059669; --color-sidebar: #064e3b; --color-sidebar-text: #d1fae5; --color-input-bg: #ffffff; --color-input-border: #6ee7b7; --icon-color: #047857; --icon-stroke-width: 1.5; --hero-bg: linear-gradient(135deg, #059669 0%, #10b981 100%); --hero-text: #ffffff; --color-success: #047857; --color-success-text: #ffffff; --color-danger: #dc2626; --color-danger-text: #ffffff; } /* ========== TEMA ÁMBAR (Cálido / energético) ========== */ body[data-theme="amber"], [data-theme="amber"] { --color-primary: #d97706; --color-primary-hover: #b45309; --color-secondary: #f59e0b; --color-bg-main: #fffbeb; --color-bg-surface: #ffffff; --color-surface-elevated: #fef3c7; --color-text: #78350f; --color-text-muted: #b45309; --color-border: #fde68a; --color-navbar: #d97706; --color-sidebar: #78350f; --color-sidebar-text: #fef3c7; --color-input-bg: #ffffff; --color-input-border: #fcd34d; --icon-color: #b45309; --icon-stroke-width: 1.5; --hero-bg: linear-gradient(135deg, #d97706 0%, #f59e0b 100%); --hero-text: #ffffff; --color-success: #059669; --color-success-text: #ffffff; --color-danger: #dc3545; --color-danger-text: #ffffff; } /* ========== TEMA VIOLETA (Premium / moderno) ========== */ body[data-theme="violet"], [data-theme="violet"] { --color-primary: #7c3aed; --color-primary-hover: #6d28d9; --color-secondary: #8b5cf6; --color-bg-main: #f5f3ff; --color-bg-surface: #ffffff; --color-surface-elevated: #ede9fe; --color-text: #4c1d95; --color-text-muted: #6d28d9; --color-border: #c4b5fd; --color-navbar: #7c3aed; --color-sidebar: #4c1d95; --color-sidebar-text: #e9d5ff; --color-input-bg: #ffffff; --color-input-border: #a78bfa; --icon-color: #6d28d9; --icon-stroke-width: 1.5; --hero-bg: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%); --hero-text: #ffffff; --color-success: #7c3aed; --color-success-text: #ffffff; --color-danger: #e11d48; --color-danger-text: #ffffff; } /* ========== TEMA ROSA (Llamativo / dashboards) ========== */ body[data-theme="rose"], [data-theme="rose"] { --color-primary: #be123c; --color-primary-hover: #9f1239; --color-secondary: #e11d48; --color-bg-main: #fff1f2; --color-bg-surface: #ffffff; --color-surface-elevated: #ffe4e6; --color-text: #881337; --color-text-muted: #9f1239; --color-border: #fecdd3; --color-navbar: #be123c; --color-sidebar: #881337; --color-sidebar-text: #ffe4e6; --color-input-bg: #ffffff; --color-input-border: #fda4af; --icon-color: #9f1239; --icon-stroke-width: 1.5; --hero-bg: linear-gradient(135deg, #be123c 0%, #e11d48 100%); --hero-text: #ffffff; --color-success: #be123c; --color-success-text: #ffffff; --color-danger: #be123c; --color-danger-text: #ffffff; } /* Aplicar variables al body y contenedores */ body { background-color: var(--color-bg-main); color: var(--color-text); } .theme-bg-main { background-color: var(--color-bg-main); } .theme-bg-surface { background-color: var(--color-bg-surface); } .theme-text { color: var(--color-text); } .theme-text-muted { color: var(--color-text-muted); } .theme-border { border-color: var(--color-border); } /* Navbar y sidebar usan variables */ .navbar.theme-aware { background: var(--color-navbar) !important; } .sidebar.theme-aware { background: var(--color-sidebar) !important; color: var(--color-sidebar-text); } .sidebar.theme-aware a { color: var(--color-sidebar-text); } .content.theme-aware { background: var(--color-bg-surface); color: var(--color-text); } .container.theme-aware { background: var(--color-bg-main); } /* Tablas: cabeceras, celdas y fondo según tema (legible en dark) */ table { background-color: var(--color-bg-surface); color: var(--color-text); } table th { background-color: var(--color-surface-elevated, var(--color-bg-surface)) !important; color: var(--color-text) !important; border-color: var(--color-border); font-weight: 600; } table td { background-color: var(--color-bg-surface); color: var(--color-text) !important; border-color: var(--color-border); } table tbody tr { background-color: var(--color-bg-surface); color: var(--color-text); } table tbody tr:hover { background-color: color-mix(in srgb, var(--color-primary) 8%, var(--color-bg-surface)); } .table-responsive { color: var(--color-text); } .table-responsive table td, .table-responsive table tbody tr td { color: var(--color-text) !important; } /* ========== Clases de color para texto/iconos (variables de tema) ========== */ .text-primary { color: var(--color-primary); } .text-secondary { color: var(--color-secondary); } /* ========== Iconos dinámicos (Lucide / Heroicons compatible) ========== */ /* Base: todos los SVG de icono usan currentColor y stroke del tema */ .erp-icon, .icon-theme { color: var(--color-primary); transition: color 0.3s ease; } .erp-icon svg, .icon-theme svg { width: 1.5rem; height: 1.5rem; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: var(--icon-stroke-width, 1.5); transition: stroke 0.3s ease, color 0.3s ease; } /* Variante con color secundario */ .erp-icon-secondary { color: var(--color-secondary); } .erp-icon-secondary svg { stroke: currentColor; fill: none; stroke-width: var(--icon-stroke-width, 1.5); } /* Icono que sigue el color de icono por tema (slate/neon/black) */ .erp-icon-theme { color: var(--icon-color); } .erp-icon-theme svg { stroke: currentColor; fill: none; stroke-width: var(--icon-stroke-width, 1.5); } /* ========== Efecto Cristal / Glassmorphism (App Premium) ========== */ .icon-wrapper-premium, .icon-glass { display: inline-flex; align-items: center; justify-content: center; padding: 0.5rem; border-radius: 0.5rem; background-color: color-mix(in srgb, var(--color-primary) 10%, transparent); color: var(--color-primary); transition: background-color 0.3s ease, color 0.3s ease; } .icon-wrapper-premium svg, .icon-glass svg { width: 1.25rem; height: 1.25rem; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: var(--icon-stroke-width, 1.5); } /* Iconos del selector de tema: heredan color del botón/opción (currentColor) */ .theme-selector-icon { display: inline-flex; align-items: center; justify-content: center; color: inherit; } .theme-selector-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: var(--icon-stroke-width, 1.5); transition: stroke 0.3s ease, color 0.3s ease; } /* * ESTRATEGIA DE ICONOS CON TEMAS DINÁMICOS * ---------------------------------------- * 1. Usar SVG con stroke="currentColor" y fill="none" (Lucide/Heroicons). * 2. Clases recomendadas: * - .text-primary / .text-secondary → color del contenedor para texto/iconos * - .erp-icon → icono con color primary y tamaño 1.5rem * - .erp-icon-theme → icono con color por tema (slate/neon/negro) * - .icon-glass (o .icon-wrapper-premium) → contenedor cristal bg-primary/10 * 3. Comportamiento por tema (variables --icon-color, --icon-stroke-width): * - Light/SaaS: trazos finos, tonos slate * - Dark: tonos vibrantes (indigo) * - Corporate: navy * - Alto contraste: trazos gruesos (2.5), negro puro * * Ejemplo en template Django: * * * * O con clase de tamaño (sin Tailwind):