/* ══════════════════════════════════════════════════════════════════ BÉLICO — SISTEMA DE TEMAS (claro / oscuro) ------------------------------------------------------------------ Cómo funciona: Todas las páginas ya definen sus colores con variables CSS (--black, --white, --dark, --border, --grey1...). Este archivo NO reescribe ningún estilo: solo redefine el VALOR de esas variables cuando el tiene data-theme="light". Como el selector html[data-theme="light"] es más específico que :root, gana siempre — sin importar el orden de carga. El tema por defecto del sitio es CLARO (blanco). Se aplica desde belico-theme.js antes de pintar, para que no haya parpadeo. ══════════════════════════════════════════════════════════════════ */ /* ─── TEMA CLARO ────────────────────────────────────────────────── */ html[data-theme="light"]{ /* Fondos: lo que antes era negro ahora es blanco */ --black: #ffffff; /* fondo principal de página */ --dark: #f6f6f6; /* superficie secundaria (secciones, drawers) */ --card: #eeeeee; /* fondo de imágenes/tarjetas */ /* Texto: lo que antes era blanco ahora es casi negro */ --white: #111111; /* texto principal + fondo de botones sólidos */ --offwhite: #2b2b2b; /* hover de botones sólidos */ /* Grises: se invierten en luminosidad manteniendo la jerarquía */ --border: #e2e2e2; /* líneas divisorias */ --grey1: #5e5e5e; /* texto secundario (buen contraste AA) */ --grey2: #858585; /* texto terciario */ --grey3: #cfcfcf; /* bordes sutiles (swatches) */ /* Sombras y velos: en claro se usan negros muy suaves */ --veil-strong: rgba(0,0,0,.45); --veil-soft: rgba(0,0,0,.28); --hover-tint: rgba(0,0,0,.05); /* El logo es un PNG negro: en tema claro se deja tal cual */ --logo-filter: none; color-scheme: light; } /* ─── TEMA OSCURO (valores originales, explícitos) ──────────────── */ html[data-theme="dark"]{ --veil-strong: rgba(0,0,0,.85); --veil-soft: rgba(0,0,0,.65); --hover-tint: rgba(255,255,255,.08); --logo-filter: brightness(0) invert(1); color-scheme: dark; } /* Fallback: si por algún motivo no hay data-theme, asumimos oscuro */ html:not([data-theme]){ --veil-strong: rgba(0,0,0,.85); --veil-soft: rgba(0,0,0,.65); --hover-tint: rgba(255,255,255,.08); --logo-filter: brightness(0) invert(1); } /* ══════════════════════════════════════════════════════════════════ CORRECCIONES ESPECÍFICAS DEL TEMA CLARO Casos donde invertir la variable no basta porque el color cumplía una función literal (no semántica). ══════════════════════════════════════════════════════════════════ */ /* — Logo: el PNG original es negro. En oscuro se invierte a blanco; en claro se deja negro. — */ .brand-logo, .nav-logo img, .footer-brand-logo img, .pg-logo img, img.logo{ filter: var(--logo-filter); } /* — Texto sobre fotografías (hero, paneles editoriales): la foto siempre lleva un velo oscuro, así que el texto va SIEMPRE claro, sin importar el tema. — */ html[data-theme="light"] .hero-content, html[data-theme="light"] .hero-content .hero-title, html[data-theme="light"] .hero-content .hero-title em, html[data-theme="light"] .hero-eyebrow, html[data-theme="light"] .ed-content, html[data-theme="light"] .ed-title, html[data-theme="light"] .ed-eyebrow{ color:#fff; } html[data-theme="light"] .hero-title em{ color:rgba(255,255,255,.62); } /* Botón fantasma sobre el hero: mantener vidrio claro sobre foto */ html[data-theme="light"] .btn-ghost{ background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.45); color:#fff; } html[data-theme="light"] .btn-ghost:hover{ background:rgba(255,255,255,.28); border-color:rgba(255,255,255,.75); } /* El hero en claro se aclara un poco: menos peso visual, sigue legible */ html[data-theme="light"] .hero-bg{ filter:brightness(.62); } /* — Botón "Compra Rápida" sobre la imagen del producto — */ html[data-theme="light"] .card-qb{ background:rgba(17,17,17,.92); color:#fff; } /* — Badge "Agotado" y textos de stock: rojo con contraste correcto — */ html[data-theme="light"] .card-badge.sold{ background:#c62828; color:#fff; } html[data-theme="light"] .card-stock{ color:#c62828; } html[data-theme="light"] .co-error, html[data-theme="light"] .error-msg{ color:#c62828; } /* — Banner del drop: degradado azul oscuro. En claro se suaviza a un azul muy tenue con texto oscuro. — */ html[data-theme="light"] .drop-banner{ background:linear-gradient(135deg,#eef4fc 0%,#dde8f8 55%,#cddef4 100%); } html[data-theme="light"] .drop-title{ color:#0d1b2a; } html[data-theme="light"] .drop-eyebrow{ color:#2f6bb5; } html[data-theme="light"] .drop-sub{ color:#4a5b6d; } /* — Estrellas de reseñas: el dorado necesita más contraste en blanco — */ html[data-theme="light"] .rating-stars, html[data-theme="light"] .review-stars{ color:#d99e00; } /* — Popup de newsletter: usa colores fijos, se adapta al tema — */ html[data-theme="light"] .nl-box{ background:#fff; color:#111; border:1px solid var(--border); } html[data-theme="light"] .nl-input{ background:#fff; color:#111; border-color:#d8d8d8; } html[data-theme="light"] .nl-input:focus{ border-color:#111; } html[data-theme="light"] .nl-btn{ background:#111; color:#fff; } html[data-theme="light"] .nl-btn:hover{ background:#333; } /* — Sección CTA: en oscuro es blanca (contraste). En claro la hacemos oscura para que siga siendo un corte visual. — */ html[data-theme="light"] .cta-section{ background:#111; color:#fff; } html[data-theme="light"] .cta-eyebrow{ color:#9a9a9a; } html[data-theme="light"] .cta-sub{ color:#c4c4c4; } html[data-theme="light"] .cta-tag{ background:#262626; color:#e8e8e8; } html[data-theme="light"] .btn-wa-cta{ background:#fff; color:#111; } html[data-theme="light"] .btn-wa-cta:hover{ background:#e8e8e8; } html[data-theme="light"] .btn-wa-cta svg{ fill:#111; } /* — Topbar: en oscuro es blanca. En claro la hacemos negra. — */ html[data-theme="light"] .topbar{ background:#111; color:#fff; } /* — Velos de overlays: más suaves en claro — */ html[data-theme="light"] .cart-overlay.open{ background:var(--veil-soft); } html[data-theme="light"] .qb-overlay, html[data-theme="light"] .co-overlay, html[data-theme="light"] .nl-overlay, html[data-theme="light"] .sg-overlay{ background:var(--veil-soft); } /* — Sombras suaves en claro para dar profundidad (en oscuro no hacen falta) — */ html[data-theme="light"] .cart-drawer{ box-shadow:-8px 0 40px rgba(0,0,0,.10); } html[data-theme="light"] .qb-box, html[data-theme="light"] .co-box, html[data-theme="light"] .nl-box, html[data-theme="light"] .sg-box{ box-shadow:0 12px 48px rgba(0,0,0,.16); } html[data-theme="light"] nav{ box-shadow:0 1px 0 var(--border); } /* — Toast — */ html[data-theme="light"] .toast{ box-shadow:0 6px 28px rgba(0,0,0,.18); } /* — ADDI mantiene su morado de marca en ambos temas — */ .btn-cart-addi,.btn-addi{ color:#fff !important; } /* — Indicador de stock (verde): el verde claro no contrasta en blanco — */ html[data-theme="light"] .stock-indicator{ color:#1a8f45; } html[data-theme="light"] .stock-indicator svg{ fill:#1a8f45; } /* — Checkout (pago.html): cajas de error y mensajes de cupón — */ html[data-theme="light"] .error-msg{ background:#fdecec; border-color:#f2b8b8; color:#b32020; } html[data-theme="light"] .res-descuento, html[data-theme="light"] .cupon-msg.cupon-ok{ color:#1a8f45; } html[data-theme="light"] .cupon-msg.cupon-error{ color:#c62828; } /* — Campos de formulario en claro — */ html[data-theme="light"] .co-input, html[data-theme="light"] .af-input, html[data-theme="light"] .cupon-input{ background:#fff; color:#111; border-color:#dcdcdc; } html[data-theme="light"] .co-input:focus, html[data-theme="light"] .af-input:focus, html[data-theme="light"] .cupon-input:focus{ border-color:#111; } html[data-theme="light"] .co-input::placeholder, html[data-theme="light"] .af-input::placeholder, html[data-theme="light"] .cupon-input::placeholder{ color:#9e9e9e; } html[data-theme="light"] select.af-input, html[data-theme="light"] select.co-input{ background:#fff; } /* — Toast: en claro necesita fondo oscuro para destacar — */ html[data-theme="light"] .toast{ background:#111; color:#fff; } /* ══════════════════════════════════════════════════════════════════ BOTÓN DE CAMBIO DE TEMA ══════════════════════════════════════════════════════════════════ */ .theme-toggle{ display:flex;align-items:center;justify-content:center; width:34px;height:34px;border-radius:50%; border:1px solid var(--border); color:var(--grey1);background:transparent; cursor:pointer;flex-shrink:0; transition:color .15s,border-color .15s,transform .25s; padding:0; } .theme-toggle:hover{ color:var(--white); border-color:var(--grey1); } .theme-toggle:active{ transform:scale(.92); } .theme-toggle svg{ width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round; } /* Solo se ve el icono que corresponde al tema activo */ .theme-toggle .ico-sun{ display:none; } .theme-toggle .ico-moon{ display:block; } html[data-theme="light"] .theme-toggle .ico-sun{ display:block; } html[data-theme="light"] .theme-toggle .ico-moon{ display:none; } /* Variante dentro del menú móvil */ .mob-nav .theme-toggle-row{ display:flex;align-items:center;justify-content:space-between; padding:20px 0;border-bottom:1px solid var(--border); font-size:14px;font-weight:500;letter-spacing:.18em; text-transform:uppercase;color:var(--grey1); } /* Transición suave al cambiar de tema (se desactiva en el primer pintado) */ html.theme-ready body, html.theme-ready nav, html.theme-ready footer, html.theme-ready .cart-drawer, html.theme-ready .product-card, html.theme-ready .topbar{ transition:background-color .25s ease,color .25s ease,border-color .25s ease; } /* Respeta a quien pide menos movimiento */ @media (prefers-reduced-motion:reduce){ html.theme-ready *{ transition:none !important; animation:none !important; } }