/* ══════════════════════════════════════════════════════════════════════════════ tema-oscuro.css — Piel oscura del sitio público. Se activa SOLO cuando el tiene la clase .tema-oscuro, que se pone con: $tema_oscuro = true; // antes de incluir includes/header.php Así se va aplicando página por página sin tocar las demás. Cómo funciona: las páginas ya usan variables de color (--color-bg, --color-surface, etc.). Redefiniéndolas en el body, todo el subárbol hereda los tonos oscuros. Luego solo corregimos los pocos colores fijos (#fff) que no usan variables. ══════════════════════════════════════════════════════════════════════════════ */ /* 1) Variables oscuras (definidas en el body → pisan el :root para todo lo de adentro) */ body.tema-oscuro{ --color-bg: #0d0e11; --color-surface: #16181d; --color-text: #e8e8ea; --color-text-muted: #9aa0a6; --color-border: #24262d; --shadow: 0 1px 4px rgba(0,0,0,.5); background: #0d0e11; color: #e8e8ea; } /* 2) Header / footer (tienen #fff o #1a1a1a fijos) */ body.tema-oscuro .site-header{ background:#16181d; } body.tema-oscuro .site-footer{ background:#0d0e11; } /* 3) Barra de búsqueda + filtros (catálogo) */ body.tema-oscuro .barra-busqueda{ background:#16181d; } body.tema-oscuro #buscador-input{ background:#0d0e11; color:#e8e8ea; } body.tema-oscuro #buscador-input:focus{ background:#16181d; } body.tema-oscuro .btn-limpiar{ background:#16181d; } body.tema-oscuro #select-orden{ background:#16181d; color:#e8e8ea; } body.tema-oscuro .cat-circulo-nombre{ color:#e8e8ea; } /* 4) Tarjetas de producto (catálogo) */ body.tema-oscuro .producto-card{ background:#16181d; border-color:#24262d; } body.tema-oscuro .card-imagen-wrap{ background:#0f1014; } body.tema-oscuro .card-nombre{ color:#f3f4f6; font-weight:500; } body.tema-oscuro .card-precio{ color:#ffffff; } /* blanco como en la home */ body.tema-oscuro .card-estado{ color:#9aa0a6; } body.tema-oscuro .btn-compartir-card{ background:#1c1f26; color:#cbd0d8; border-color:#3a3d46; } body.tema-oscuro .btn-compartir-card:hover{ background:#242830; border-color:#4b515c; } body.tema-oscuro .skeleton-card{ background:#16181d; border-color:#24262d; } body.tema-oscuro .skeleton-img, body.tema-oscuro .skeleton-line{ background:#24262d; } /* 5) Ficha de producto */ body.tema-oscuro .galeria-principal{ background:#16181d; border-color:#24262d; } body.tema-oscuro .galeria-thumb{ background:#16181d; } body.tema-oscuro .gal-nav{ background:rgba(255,255,255,.14); color:#fff; } body.tema-oscuro .gal-nav:hover{ background:rgba(255,255,255,.24); } body.tema-oscuro .producto-nombre{ color:#ffffff; } body.tema-oscuro .producto-precio{ color:#ffffff; } /* blanco como en la home */ body.tema-oscuro .btn-fotos-producto{ background:transparent; color:#fff; border-color:#3a3d46; } body.tema-oscuro .btn-fotos-producto:hover{ background:rgba(255,255,255,.06); } body.tema-oscuro .compartir-dropdown{ background:#16181d; border-color:#24262d; } body.tema-oscuro .compartir-opcion:hover{ background:#242830; } body.tema-oscuro .compartir-copy{ color:#e8e8ea; } body.tema-oscuro .info-comercial{ border-color:#24262d; } body.tema-oscuro .info-comercial-item{ border-color:#24262d; } body.tema-oscuro .sticky-cta-mobile{ background:#16181d; border-color:#24262d; } /* 6) Botón "Pedir fotos" global (.btn-wa-fotos usa #fff) */ body.tema-oscuro .btn-wa-fotos{ background:transparent; color:#fff; border-color:#3a3d46; } body.tema-oscuro .btn-wa-fotos:hover{ background:rgba(255,255,255,.06); } /* 7) Badge de estado neutro */ body.tema-oscuro .badge-estado{ background:#24262d; color:#cbd0d8; border-color:#3a3d46; }