/* ============================================================ VecinoSeguro V2 - Sistema de temas Modos: dia (claro), noche (oscuro), nocturno (sepia/calido) Se activa agregando class="tema-dia" / "tema-noche" / "tema-nocturno" al ============================================================ */ /* ── Modo Noche (default - el que teniamos) ── */ :root, html.tema-noche { --bg-primary: #0f172a; --bg-secondary: #1e293b; --bg-tertiary: #0f172a; --border: #334155; --border-hover: #475569; --text-primary: #f1f5f9; --text-secondary:#94a3b8; --text-muted: #64748b; --text-faint: #475569; --accent: #0ea5e9; --accent-hover: #0284c7; --success: #22c55e; --warning: #f59e0b; --danger: #ef4444; --stock-alto: #4ade80; --stock-medio: #fbbf24; --stock-bajo: #f87171; --stock-cero: #475569; --card-shadow: 0 4px 16px rgba(0,0,0,0.4); } /* ── Modo Dia (fondo blanco, texto oscuro) ── */ html.tema-dia { --bg-primary: #f8fafc; --bg-secondary: #ffffff; --bg-tertiary: #f1f5f9; --border: #e2e8f0; --border-hover: #cbd5e1; --text-primary: #0f172a; --text-secondary:#334155; --text-muted: #64748b; --text-faint: #94a3b8; --accent: #0284c7; --accent-hover: #0369a1; --success: #16a34a; --warning: #d97706; --danger: #dc2626; --stock-alto: #16a34a; --stock-medio: #d97706; --stock-bajo: #dc2626; --stock-cero: #94a3b8; --card-shadow: 0 2px 8px rgba(0,0,0,0.08); } /* ── Modo Nocturno (sepia calido, reduce luz azul) ── */ html.tema-nocturno { --bg-primary: #1a1209; --bg-secondary: #231a0e; --bg-tertiary: #1a1209; --border: #3d2e1a; --border-hover: #5c4525; --text-primary: #f5e6cc; --text-secondary:#d4b896; --text-muted: #a08060; --text-faint: #6b5035; --accent: #d4882a; --accent-hover: #b8711f; --success: #6aaa4a; --warning: #d4882a; --danger: #c0392b; --stock-alto: #6aaa4a; --stock-medio: #d4882a; --stock-bajo: #c0392b; --stock-cero: #6b5035; --card-shadow: 0 4px 16px rgba(0,0,0,0.5); } /* ============================================================ Aplicar variables a todos los elementos ============================================================ */ body { background: var(--bg-primary) !important; color: var(--text-primary) !important; transition: background 0.3s, color 0.3s; } /* Headers y barras */ .header, .topbar, .cotizacion-bar { background: var(--bg-secondary) !important; border-color: var(--border) !important; } /* Cards y contenedores */ .product-card, .cart-table, .summary-card, .contact-card, .sidebar, .table-wrap, .form-card, .stat, .stat-mini, .tc-box, .formato-card, .card { background: var(--bg-secondary) !important; border-color: var(--border) !important; } /* Fondos internos oscuros */ .product-img, thead th, .product-sku + *, .bg-tertiary, .cotiz-texto, .form-group input, .filter-input, .filter-group input, .filter-group select, .search-input, .marca-badge, .sku-cell + *, .iva-badge { background: var(--bg-tertiary) !important; } /* Textos */ h1, h2, h3, .page-title, .section-title, .product-name, .stat-val, .summary-total .value, .product-precio-ars { color: var(--text-primary) !important; } .page-sub, .product-precio-usd, .product-iva, .results-info, .cotizacion-bar, .tc-info, .stat-sub, .stat-label, .summary-row { color: var(--text-muted) !important; } /* Inputs */ .filter-input, .filter-group input, .filter-group select, .search-input, .form-group input { color: var(--text-primary) !important; border-color: var(--border) !important; } .filter-input:focus, .filter-group input:focus, .filter-group select:focus, .search-input:focus, .form-group input:focus { border-color: var(--accent) !important; } /* Bordes */ tbody tr { border-color: var(--bg-tertiary) !important; } .section-sep, .summary-total { border-color: var(--border) !important; } /* Botón acento */ .btn-primary, .btn-buscar, .btn-filter, .btn-login, .btn-carrito:not(:disabled), .btn-submit { background: var(--accent) !important; } .btn-primary:hover, .btn-buscar:hover, .btn-filter:hover, .btn-login:hover, .btn-carrito:hover:not(:disabled) { background: var(--accent-hover) !important; } /* Stock colores */ .stock-alto { color: var(--stock-alto) !important; } .stock-medio { color: var(--stock-medio) !important; } .stock-bajo { color: var(--stock-bajo) !important; } .stock-cero { color: var(--stock-cero) !important; } /* Links de filtro activos */ .filter-list li a.active { color: var(--accent) !important; background: rgba(14,165,233,0.1) !important; } html.tema-dia .filter-list li a.active { background: rgba(2,132,199,0.08) !important; } html.tema-nocturno .filter-list li a.active { color: var(--accent) !important; background: rgba(212,136,42,0.12) !important; }