/* ========================================================================== EL BARRIL DEL VINO — MODO OSCURO Se activa con , controlado por js/dark-mode.js. Estrategia: 1) redefinir las variables CSS que ya usa el tema (style.css, vinery-complete.css, new-pages.css, etc.) para que hereden el look oscuro automáticamente, y 2) overrides explícitos para el header, modal de login y componentes de Bootstrap/WooCommerce que usan colores fijos (sin var()). Todo bajo el selector `:root[data-theme="dark"]` para tener más especificidad que los `:root { ... }` sueltos de los demás archivos y así ganar sin depender del orden de carga. ========================================================================== */ :root[data-theme="dark"] { /* Variables propias del tema (style.css / vinery-complete.css / new-pages.css) */ --primary-color: #e6b8c6; --secondary-color: #d99bb0; --accent-color: #17111a; --text-dark: #ece4e8; --text-light: #c3b3c6; --text-muted: #a396a8; --border-light: rgba(255, 255, 255, 0.14); --bg-light: #17111a; --bg-card: #241b28; --border: rgba(255, 255, 255, 0.14); --wine-light: rgba(255, 255, 255, 0.06); --purple-light: rgba(255, 255, 255, 0.06); --shadow: 0 4px 20px rgba(0, 0, 0, 0.4); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.4); --shadow-xl: 0 15px 35px rgba(0, 0, 0, 0.45); /* Tokens propios, solo para las reglas de este archivo */ --dm-bg: #17111a; --dm-surface: #241b28; --dm-surface-2: #2d2230; --dm-text: #ece4e8; --dm-text-muted: #b9a9bb; --dm-border: rgba(255, 255, 255, 0.14); --dm-wine-accent: #e8a5bb; } /* ========================================================================== 1. BASE — cuerpo, tipografía, enlaces ========================================================================== */ html[data-theme="dark"] body { background: var(--dm-bg); color: var(--dm-text); } html[data-theme="dark"] h1, html[data-theme="dark"] h2, html[data-theme="dark"] h3, html[data-theme="dark"] h4, html[data-theme="dark"] h5, html[data-theme="dark"] h6 { color: var(--dm-wine-accent); } html[data-theme="dark"] a { color: var(--dm-wine-accent); } html[data-theme="dark"] p, html[data-theme="dark"] li, html[data-theme="dark"] span, html[data-theme="dark"] label, html[data-theme="dark"] td, html[data-theme="dark"] th { color: inherit; } html[data-theme="dark"] .text-muted { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .text-wine, html[data-theme="dark"] .link-wine { color: var(--dm-wine-accent) !important; } html[data-theme="dark"] hr, html[data-theme="dark"] .border-top, html[data-theme="dark"] .border-bottom, html[data-theme="dark"] .border { border-color: var(--dm-border) !important; } /* ========================================================================== 2. COMPONENTES BOOTSTRAP GENÉRICOS (cards, modales, dropdowns, forms, tablas) ========================================================================== */ html[data-theme="dark"] .card, html[data-theme="dark"] .list-group-item, html[data-theme="dark"] .modal-content, html[data-theme="dark"] .toast, html[data-theme="dark"] .offcanvas { background-color: var(--dm-surface); color: var(--dm-text); border-color: var(--dm-border); } html[data-theme="dark"] .dropdown-menu, html[data-theme="dark"] .mega-menu, html[data-theme="dark"] .dropdown-menu-cepas, html[data-theme="dark"] .dropdown-menu-vinas, html[data-theme="dark"] .user-menu, html[data-theme="dark"] .user-dropdown-menu { background-color: var(--dm-surface) !important; border-color: var(--dm-border) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); } html[data-theme="dark"] .dropdown-item { color: var(--dm-text) !important; } html[data-theme="dark"] .dropdown-item:hover, html[data-theme="dark"] .dropdown-item:focus { background-color: var(--dm-surface-2) !important; color: var(--dm-wine-accent) !important; } html[data-theme="dark"] .dropdown-divider, html[data-theme="dark"] .menu-divider { border-color: var(--dm-border); background: var(--dm-border); } html[data-theme="dark"] .form-control, html[data-theme="dark"] .form-select, html[data-theme="dark"] textarea, html[data-theme="dark"] input[type="text"], html[data-theme="dark"] input[type="email"], html[data-theme="dark"] input[type="password"], html[data-theme="dark"] input[type="tel"], html[data-theme="dark"] input[type="number"], html[data-theme="dark"] input[type="search"] { background-color: var(--dm-surface-2); border-color: var(--dm-border); color: var(--dm-text); } html[data-theme="dark"] .form-control:focus, html[data-theme="dark"] .form-select:focus { background-color: var(--dm-surface-2); color: var(--dm-text); } html[data-theme="dark"] .form-control::placeholder { color: var(--dm-text-muted); opacity: 1; } html[data-theme="dark"] .form-label, html[data-theme="dark"] .form-check-label, html[data-theme="dark"] .form-text { color: var(--dm-text); } html[data-theme="dark"] .table { color: var(--dm-text); border-color: var(--dm-border); } html[data-theme="dark"] .table thead th { border-color: var(--dm-border); color: var(--dm-wine-accent); } html[data-theme="dark"] .table td, html[data-theme="dark"] .table th { border-color: var(--dm-border); } html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255, 255, 255, 0.03); color: var(--dm-text); } html[data-theme="dark"] .btn-close { filter: brightness(0) invert(1); } html[data-theme="dark"] .btn-outline-secondary, html[data-theme="dark"] .btn-light, html[data-theme="dark"] .btn-outline-dark { color: var(--dm-text); border-color: var(--dm-border); } html[data-theme="dark"] .btn-outline-secondary:hover, html[data-theme="dark"] .btn-light:hover { background-color: var(--dm-surface-2); color: var(--dm-text); } html[data-theme="dark"] .breadcrumb-item + .breadcrumb-item::before { color: var(--dm-text-muted); } /* ========================================================================== 3. HEADER / NAVEGACIÓN (header-improved.css usa colores fijos, sin var()) ========================================================================== */ html[data-theme="dark"] .site-header { background: linear-gradient(180deg, rgba(23, 17, 26, 0.98) 0%, rgba(23, 17, 26, 0.96) 100%) !important; border-bottom-color: var(--dm-border) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.35) !important; } html[data-theme="dark"] .site-header.scrolled { background: linear-gradient(180deg, rgba(23, 17, 26, 0.99) 0%, rgba(23, 17, 26, 0.97) 100%) !important; } html[data-theme="dark"] .header-top-bar { background: rgba(255, 255, 255, 0.04) !important; border-bottom-color: var(--dm-border) !important; } html[data-theme="dark"] .contact-item, html[data-theme="dark"] .brand-tagline, html[data-theme="dark"] .menu-text, html[data-theme="dark"] .nav-icon { color: var(--dm-text-muted) !important; } html[data-theme="dark"] .brand-name, html[data-theme="dark"] .mega-menu-title, html[data-theme="dark"] .featured-content h4, html[data-theme="dark"] .user-name, html[data-theme="dark"] .user-name-full { color: var(--dm-text) !important; } html[data-theme="dark"] .navbar-nav .nav-link, html[data-theme="dark"] .nav-link, html[data-theme="dark"] .menu-item { color: var(--dm-text) !important; } html[data-theme="dark"] .navbar-nav .nav-link:hover, html[data-theme="dark"] .navbar-nav .nav-link:focus, html[data-theme="dark"] .nav-link:hover, html[data-theme="dark"] .menu-item:hover { color: var(--dm-wine-accent) !important; background: rgba(255, 255, 255, 0.06) !important; } html[data-theme="dark"] .mobile-menu-toggle { background: rgba(255, 255, 255, 0.06) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .menu-line { background: var(--dm-text) !important; } html[data-theme="dark"] .action-link { background: rgba(255, 255, 255, 0.06) !important; border-color: var(--dm-border) !important; color: var(--dm-text) !important; } html[data-theme="dark"] .mega-menu-header { border-bottom-color: var(--dm-border); } html[data-theme="dark"] .mega-menu-featured { background: rgba(255, 255, 255, 0.05) !important; border-color: var(--dm-border) !important; } html[data-theme="dark"] .user-menu-header { background: rgba(255, 255, 255, 0.05) !important; border-bottom-color: var(--dm-border) !important; } /* ========================================================================== 4. MODAL DE LOGIN / REGISTRO (login-modal.css usa colores fijos) ========================================================================== */ html[data-theme="dark"] .login-modal-content .modal-body { background: var(--dm-surface) !important; } html[data-theme="dark"] .auth-form .form-label, html[data-theme="dark"] .auth-form .form-label i, html[data-theme="dark"] .auth-form a { color: var(--dm-wine-accent); } html[data-theme="dark"] .toggle-form-text, html[data-theme="dark"] #forgotPassword { color: var(--dm-text-muted); } /* ========================================================================== 5. WOOCOMMERCE — catálogo, carrito, checkout, mi cuenta ========================================================================== */ html[data-theme="dark"] .woocommerce ul.products li.product, html[data-theme="dark"] .product, html[data-theme="dark"] .skeleton-card { background-color: var(--dm-surface); color: var(--dm-text); } html[data-theme="dark"] .woocommerce ul.products li.product .price, html[data-theme="dark"] .precio-actual, html[data-theme="dark"] .product-price { color: var(--dm-wine-accent) !important; } html[data-theme="dark"] .shop_table, html[data-theme="dark"] table.shop_table { color: var(--dm-text); border-color: var(--dm-border); } html[data-theme="dark"] .shop_table th, html[data-theme="dark"] .shop_table td { border-color: var(--dm-border) !important; } html[data-theme="dark"] .woocommerce-message, html[data-theme="dark"] .woocommerce-info, html[data-theme="dark"] .woocommerce-noreviews, html[data-theme="dark"] .woocommerce-error { background: var(--dm-surface-2) !important; color: var(--dm-text) !important; border-top-color: var(--dm-wine-accent) !important; } html[data-theme="dark"] .quantity input.qty { background-color: var(--dm-surface-2); color: var(--dm-text); border-color: var(--dm-border); } /* ========================================================================== 6. SKELETON LOADERS (mobile-improvements.css) — ajustar el shimmer ========================================================================== */ html[data-theme="dark"] .skeleton { background: #241b28; background: linear-gradient(110deg, #241b28 8%, #2d2230 18%, #241b28 33%); background-size: 200% 100%; } /* ========================================================================== 7. BOTÓN DE ALTERNAR TEMA ========================================================================== */ .theme-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(63, 17, 28, 0.15); background: rgba(63, 17, 28, 0.06); color: #3f111c; cursor: pointer; transition: all 0.2s ease; font-size: 0.95rem; } .theme-toggle-btn:hover { background: #3f111c; color: #fff; transform: translateY(-2px); } .theme-toggle-btn .icon-moon { display: inline; } .theme-toggle-btn .icon-sun { display: none; } html[data-theme="dark"] .theme-toggle-btn { border-color: var(--dm-border); background: rgba(255, 255, 255, 0.06); color: #f4c95d; } html[data-theme="dark"] .theme-toggle-btn:hover { background: #f4c95d; color: #17111a; } html[data-theme="dark"] .theme-toggle-btn .icon-moon { display: none; } html[data-theme="dark"] .theme-toggle-btn .icon-sun { display: inline; } /* ========================================================================== 8. SCROLLBAR Y TRANSICIÓN SUAVE AL CAMBIAR DE TEMA ========================================================================== */ html[data-theme="dark"] { scrollbar-color: #4a3a4e var(--dm-bg); } html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--dm-bg); } html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #4a3a4e; border-radius: 8px; } body, .site-header, .card, .modal-content, .dropdown-menu, .form-control { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; } @media (prefers-reduced-motion: reduce) { body, .site-header, .card, .modal-content, .dropdown-menu, .form-control { transition: none; } }