/* ═══════════════════════════════════════════════════════════════════════
   TEMA "RETAIL CLARO" — tienda clara al estilo de los grandes e-commerce.
   El violeta del logo es el color de acción; el magenta queda como acento.
   El visitante puede pasar a modo oscuro (data-retail-mode="dark",
   recordado en su navegador). La estructura común vive en common.css.
   ═══════════════════════════════════════════════════════════════════════ */
html[data-web-theme="retail"] {
    color-scheme: light;
    --td-bg: #f5f5f8;
    --td-bg-2: #f8f7fb;
    --td-footer: #ffffff;
    --td-band: #ffffff;
    --td-surface: #ffffff;
    --td-surface-2: #ffffff;
    --td-surface-3: #f3f2f7;
    --td-hover: #efedf5;
    --td-input: #ffffff;
    --td-line: #e7e5ee;
    --td-line-2: #d9d6e3;
    --td-text: #17151f;
    --td-text-2: #34313f;
    --td-muted: #5f5b70;
    /* Contraste AA medido 2026-09-22: #8e8aa0 daba 3.0–3.3:1 sobre blanco. */
    --td-faint: #6b677e;
    --td-primary: #5b3fa3;
    --td-primary-600: #4a3189;
    --td-primary-soft: #f1edfb;
    --td-primary-line: #cfc3ef;
    --td-primary-text: #5b3fa3;
    --td-on-primary: #ffffff;
    --td-accent: #d4009f;
    --td-chip-active-bg: #f1edfb;
    --td-chip-active-text: #5b3fa3;
    --td-img-bg: #ffffff;
    --td-nav-bg: rgba(255, 255, 255, 0.9);
    --td-nav-bg-solid: #ffffff;
    --td-overlay: rgba(15, 12, 25, 0.5);
    --td-overlay-solid: rgba(245, 245, 248, 0.96);
    --td-promo: linear-gradient(120deg, #efeafc 0%, #f8e8f6 100%);
    --td-chat-head: #5b3fa3;
    --td-hero-glow: radial-gradient(60% 60% at 50% 0%, rgba(91, 63, 163, 0.1) 0%, transparent 70%);
    --td-shadow: 0 1px 2px rgba(23, 21, 31, 0.04), 0 8px 24px -8px rgba(23, 21, 31, 0.12);
    --td-shadow-lg: 0 24px 64px -16px rgba(23, 21, 31, 0.28);
    --td-card-shadow: 0 1px 2px rgba(23, 21, 31, 0.04);
    --td-cta-shadow: 0 8px 20px -8px rgba(91, 63, 163, 0.5);
    --td-maxw: 1320px;
    --td-gutter: clamp(16px, 3vw, 24px);
    --td-radius-card: 16px;
    --td-font: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    --td-font-head: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
    /* Colores de estado del panel admin (fondo claro) */
    --td-ok: #0c7a53;
    --td-wa-text: #167f3e;
    --td-ok-soft: #e6f6ef;
    --td-ok-line: #a7ddc7;
    --td-warn: #9d6007;
    --td-warn-soft: #fdf3e0;
    --td-warn-line: #e6cf9c;
    --td-warn2: #b93d0b;
    --td-warn2-soft: #fdeee4;
    --td-warn2-line: #f0c2a4;
    --td-danger: #c62f2f;
    --td-danger-soft: #fdecec;
    --td-danger-line: #f0b6b6;
    --td-info: #1f5fea;
    --td-info-soft: #e8eefd;
    --td-info-line: #b6c9f5;
    --td-neutral: #5f5b70;
    --td-neutral-soft: #f0eff4;
    --td-neutral-line: #d9d6e3;
}
html[data-web-theme="retail"][data-retail-mode="dark"] {
    color-scheme: dark;
    --td-bg: #0f0e15;
    --td-bg-2: #13121a;
    --td-footer: #13121a;
    --td-band: #17151f;
    --td-surface: #17151f;
    --td-surface-2: #1c1a26;
    --td-surface-3: #25222f;
    --td-hover: #2a2735;
    --td-input: #13121a;
    --td-line: #2a2735;
    --td-line-2: #363243;
    --td-text: #f3f2f7;
    --td-text-2: #d8d5e3;
    --td-muted: #aaa6ba;
    --td-faint: #938fa2;
    --td-wa-text: #25d366;
    --td-primary: #8f78dc;
    --td-primary-600: #a08ce3;
    --td-primary-soft: #241f36;
    --td-primary-line: #4a3f70;
    --td-primary-text: #b3a3ec;
    --td-on-primary: #0f0e15;
    --td-accent: #ff4fd0;
    --td-chip-active-bg: #2c2542;
    --td-chip-active-text: #c9bcf5;
    --td-nav-bg: rgba(23, 21, 31, 0.9);
    --td-nav-bg-solid: #17151f;
    --td-overlay: rgba(0, 0, 0, 0.6);
    --td-overlay-solid: rgba(15, 14, 21, 0.96);
    --td-promo: linear-gradient(120deg, #221b38 0%, #2a1631 100%);
    --td-chat-head: #2c2542;
    --td-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 8px 24px -8px rgba(0, 0, 0, 0.5);
    --td-shadow-lg: 0 24px 64px -16px rgba(0, 0, 0, 0.7);
    --td-card-shadow: none;
    --td-cta-shadow: none;
    /* Colores de estado del panel admin (fondo oscuro) */
    --td-ok: #34d399;
    --td-ok-soft: rgba(52, 211, 153, 0.14);
    --td-ok-line: rgba(52, 211, 153, 0.28);
    --td-warn: #fbbf24;
    --td-warn-soft: rgba(251, 191, 36, 0.14);
    --td-warn-line: rgba(251, 191, 36, 0.28);
    --td-warn2: #fb923c;
    --td-warn2-soft: rgba(251, 146, 60, 0.14);
    --td-warn2-line: rgba(251, 146, 60, 0.28);
    --td-danger: #f87171;
    --td-danger-soft: rgba(248, 113, 113, 0.14);
    --td-danger-line: rgba(248, 113, 113, 0.28);
    --td-info: #60a5fa;
    --td-info-soft: rgba(96, 165, 250, 0.14);
    --td-info-line: rgba(96, 165, 250, 0.28);
    --td-neutral: #94a3b8;
    --td-neutral-soft: rgba(148, 163, 184, 0.14);
    --td-neutral-line: rgba(148, 163, 184, 0.28);
}

/* Colores de estado legibles sobre fondo claro */
html[data-web-theme="retail"]:not([data-retail-mode="dark"]) .text-green-400:where(:not(#lightbox-modal, #lightbox-modal *)) { color: var(--td-ok); }
html[data-web-theme="retail"]:not([data-retail-mode="dark"]) .text-yellow-400:where(:not(#lightbox-modal, #lightbox-modal *)) { color: var(--td-warn); }
html[data-web-theme="retail"]:not([data-retail-mode="dark"]) :is(.text-orange-400, .text-orange-500):where(:not(#lightbox-modal, #lightbox-modal *)) { color: var(--td-warn2); }
html[data-web-theme="retail"]:not([data-retail-mode="dark"]) .text-red-400:where(:not(#lightbox-modal, #lightbox-modal *)) { color: var(--td-danger); }
html[data-web-theme="retail"]:not([data-retail-mode="dark"]) :is(.text-blue-400, .text-sky-400):where(:not(#lightbox-modal, #lightbox-modal *)) { color: var(--td-info); }
html[data-web-theme="retail"]:not([data-retail-mode="dark"]) .text-brand-accent:where(:not(#lightbox-modal, #lightbox-modal *)) { color: var(--td-ok); }
html[data-web-theme="retail"]:not([data-retail-mode="dark"]) .text-yellow-300:where(:not(#lightbox-modal, #lightbox-modal *)) { color: var(--td-warn); }

/* Barra utilitaria superior */
html[data-web-theme="retail"] .theme-utility {
    background: #1d1433;
    color: #e5dff5;
    justify-content: space-between;
    max-width: none;
}
html[data-web-theme="retail"] .theme-utility > span > i { color: #b9a6f2; margin-right: 4px; }
html[data-web-theme="retail"] .theme-utility-links {
    display: flex;
    align-items: center;
    gap: 20px;
}
html[data-web-theme="retail"] .theme-utility-links a { opacity: 0.85; }
html[data-web-theme="retail"] .theme-utility-links a:hover { opacity: 1; }
html[data-web-theme="retail"] .theme-utility-links i { margin-right: 4px; }
html[data-web-theme="retail"] .theme-dark-toggle {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: inline-grid;
    place-items: center;
}
html[data-web-theme="retail"] .theme-dark-toggle:hover { background: rgba(255, 255, 255, 0.12); }
html[data-web-theme="retail"] .theme-dark-toggle .fa-sun,
html[data-web-theme="retail"][data-retail-mode="dark"] .theme-dark-toggle .fa-moon { display: none; }
html[data-web-theme="retail"][data-retail-mode="dark"] .theme-dark-toggle .fa-sun { display: inline-block; }
@media (max-width: 640px) {
    html[data-web-theme="retail"] .theme-utility { justify-content: center; }
}

/* Cabecera de la maqueta B: marca con icono + texto, categorías en la 2ª fila
   y "Mis Pedidos" entre las acciones. Se ocultan las piezas equivalentes del
   diseño clásico para que no se dupliquen. */
html[data-web-theme="retail"] :is(.nav-logo, .nav-sections, #btn-orders) { display: none !important; }
/* El PNG del logo es texto BLANCO: sobre fondo claro hay que invertirlo
   (invert + hue-rotate 180° mantiene el violeta de la marca). */
html[data-web-theme="retail"]:not([data-retail-mode="dark"]) :is(.preloader img, #mode-overlay img[src*="logo"]) {
    filter: invert(1) hue-rotate(180deg);
}

/* Barras de scroll en el violeta del tema (main.css las pinta magenta). */
html[data-web-theme="retail"] ::-webkit-scrollbar-thumb { background: var(--td-line-2); }
html[data-web-theme="retail"] ::-webkit-scrollbar-thumb:hover { background: var(--td-primary); }
html[data-web-theme="retail"] ::-webkit-scrollbar-track { background: transparent; }

/* Carrito con total en la cabecera */
html[data-web-theme="retail"] #btn-cart-wrapper {
    background: var(--td-primary-soft);
    border-color: transparent;
    color: var(--td-primary-text);
}
html[data-web-theme="retail"] .cart-total-mini {
    font-weight: 800;
    color: var(--td-text);
}

/* Tarjeta: botón "Agregar" de ancho completo, estilo retail */
html[data-web-theme="retail"] .product-card .card-quick-add { width: 100%; }
html[data-web-theme="retail"] .card-quick-add {
    background: transparent;
    border: 1.5px solid var(--td-primary);
    color: var(--td-primary-text);
}
html[data-web-theme="retail"] .card-quick-add:not(:disabled):hover,
html[data-web-theme="retail"] .product-card:hover .card-quick-add:not(:disabled) {
    background: var(--td-primary);
    color: var(--td-on-primary);
}
/* La marca de agua (mix-blend-multiply) se ve sucia sobre blanco puro. */
html[data-web-theme="retail"] .product-card img[alt="Watermark"] { opacity: 0.05; }

/* Banner promocional claro: texto oscuro sobre degradado suave */
html[data-web-theme="retail"] .bg-banner-purple-gradient .bg-white\/15 {
    background: var(--td-surface);
    border-color: var(--td-line);
    color: var(--td-accent);
}

/* Botón de compartir y overlays que eran negros */
html[data-web-theme="retail"] #product-detail-modal .bg-black\/50 {
    background: var(--td-surface-3);
    color: var(--td-text);
}

/* Barra inferior móvil (tipo app) */
.theme-bottom-nav { display: none; }
@media (max-width: 767px) {
    html[data-web-theme="retail"] .theme-bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 150;
        display: flex;
        justify-content: space-around;
        align-items: stretch;
        height: calc(62px + env(safe-area-inset-bottom));
        padding-bottom: env(safe-area-inset-bottom);
        background: var(--td-surface);
        border-top: 1px solid var(--td-line);
        box-shadow: 0 -6px 20px -12px rgba(23, 21, 31, 0.25);
    }
    html[data-web-theme="retail"] .theme-bottom-nav > * {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        font-size: 0.6875rem;
        font-weight: 600;
        color: var(--td-muted);
    }
    html[data-web-theme="retail"] .theme-bottom-nav i { font-size: 1.125rem; }
    html[data-web-theme="retail"] .bn-cart { position: relative; }
    html[data-web-theme="retail"] .bn-cart b {
        position: absolute;
        top: -6px;
        right: -12px;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 9px;
        background: var(--td-accent);
        color: #fff;
        font-size: 0.6875rem;
        display: grid;
        place-items: center;
        border: 2px solid var(--td-surface);
    }
    html[data-web-theme="retail"] .bn-cart b.scale-0 { display: none; }
    html[data-web-theme="retail"] body { padding-bottom: 62px; }
    /* Los flotantes suben para no tapar la barra inferior. */
    html[data-web-theme="retail"] #social-fab-stack { bottom: 76px; }
    html[data-web-theme="retail"] .scroll-to-top { bottom: 8.5rem; }
    html[data-web-theme="retail"] #sticky-add-cart-bar { z-index: 160; }
    /* En móvil el carrito y los pedidos ya están en la barra inferior. */
    html[data-web-theme="retail"] :is(#btn-cart-wrapper, #btn-orders) { display: none; }
}

/* ═══ Secciones de la maqueta B ═══ */
/* Catálogo con barra lateral de categorías. */
html[data-web-theme="retail"] #products {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    grid-template-rows: auto auto auto;
    column-gap: 28px;
    align-items: start;
    max-width: var(--td-maxw);
    padding-inline: var(--td-gutter);
}
html[data-web-theme="retail"] .td-sidebar { grid-column: 1; grid-row: 1 / span 20; position: sticky; top: 200px; }
html[data-web-theme="retail"] #products > :not(.td-sidebar) { grid-column: 2; }
html[data-web-theme="retail"] #products .categories-scroll { display: none; }
html[data-web-theme="retail"] .product-grid { grid-template-columns: repeat(3, 1fr); }
/* Nosotros y contacto: la maqueta usa una tarjeta con cifras y mueve el contacto al FAQ. */
html[data-web-theme="retail"] .td-about-classic { display: none; }
html[data-web-theme="retail"] #about { background: var(--td-bg); }
html[data-web-theme="retail"] #contacto { display: none; }
/* FAQ con caja de ayuda al lado. */
html[data-web-theme="retail"] .td-faq-section {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    grid-template-rows: auto auto;
    column-gap: 28px;
    align-items: start;
    max-width: var(--td-maxw);
    padding-inline: var(--td-gutter);
}
html[data-web-theme="retail"] .td-faq-title { grid-column: 1; }
html[data-web-theme="retail"] #faq-container { grid-column: 1; }
html[data-web-theme="retail"] .td-contact-box { grid-column: 2; grid-row: 1 / span 2; margin-top: 46px; }