/* ================================================================
   Estilos principales de la tienda
   ================================================================ */

:root {
    /* ── Fuentes ─────────────────────────────────────────────── */
    --font-display: 'Cormorant Garamond', 'Palatino Linotype', Georgia, serif;
    --font-body: 'Montserrat', 'Inter', system-ui, sans-serif;
    /* ── Paleta base ───────────────────────────────────────────── */
    --color-primario: #1B3D2E;
    --color-primario-hover: #2A5A44;
    --color-primario-deep: #0E2018;
    --color-acento: #C8913A;
    --color-acento-hover: #B07828;
    --color-acento-light: #FBF6EE;
    --color-acento-text: #573800;
    --color-acento-text-strong: #6E4900;
    --color-borde-acento: #E8D4A0;
    --color-secundario: #ffffff;
    /* ── Fondos ──────────────────────────────────────────────── */
    --color-fondo-claro: #F6F3EC;
    --color-fondo-qty: #EDE8DC;
    --color-fondo-hover-cat: #E4DDD2;
    --color-fondo-confirm-total: #FAFAF7;
    --color-fondo-pill-categoria: #EEE8DA;
    /* ── Grises / Texto / Bordes ─────────────────────────────── */
    --color-gris-oscuro: #1A1710;
    --color-gris-texto: #3C3726;
    /* Antes #877D6E: en labels de 0.68rem daba contraste 3.8 sobre los fondos
       claros de los temas. Este tono llega a ~5. */
    /* Superficies: un radio y una sombra por tema. Los temas los redefinen
       en su propio archivo (los "flat" los ponen en 0 / none) en vez de que
       cada componente elija el suyo. */
    --radio-card: 12px;
    --radio-control: 8px;
    --sombra-card: 0 2px 10px rgba(20, 25, 30, 0.06);
    --sombra-flotante: 0 12px 32px rgba(20, 25, 30, 0.14);
    --color-gris-muted: #6E6558;
    --color-gris-medio: #BEB5A4;
    --color-gris-claro: #DDD6CA;
    --color-borde-input: #CEC6B8;
    --color-borde-divider: #EAE5DC;
    /* ── Header ──────────────────────────────────────────────── */
    --color-header-logo-sub: rgba(196, 222, 180, 0.82);
    --color-header-search-bg: rgba(255, 255, 255, 0.10);
    --color-header-search-border: rgba(255, 255, 255, 0.18);
    --color-header-search-focus-bg: rgba(255, 255, 255, 0.18);
    --color-header-search-focus-br: rgba(255, 255, 255, 0.50);
    --color-header-search-placeholder: rgba(210, 228, 188, 0.70);
    /* ── Navegación ──────────────────────────────────────────── */
    --color-nav-pill-bg: rgba(255, 255, 255, 0.10);
    --color-nav-pill-border: rgba(255, 255, 255, 0.18);
    --color-nav-pill-hover-bg: rgba(255, 255, 255, 0.20);
    --color-nav-pill-hover-border: rgba(255, 255, 255, 0.38);
    /* ── Banner ──────────────────────────────────────────────── */
    --color-banner-strong: #E8D4A0;
    --color-banner-close: rgba(255, 255, 255, 0.80);
    /* ── Hero ────────────────────────────────────────────────── */
    --color-hero-overlay: rgba(0, 0, 0, 0.22);
    --color-hero-tag-bg: rgba(200, 145, 58, 0.18);
    --color-hero-tag-text: rgba(255, 248, 230, 0.96);
    --color-hero-tag-border: rgba(200, 145, 58, 0.40);
    --color-hero-subtitulo: rgba(210, 228, 188, 0.90);
    /* ── Carrito ─────────────────────────────────────────────── */
    --color-carrito-sombra: rgba(27, 61, 46, 0.10);
    --color-carrito-close-bg: rgba(255, 255, 255, 0.15);
    --color-carrito-close-hover: rgba(255, 255, 255, 0.28);
    /* ── Inputs ──────────────────────────────────────────────── */
    --color-input-borde-error: #c0392b;
    --color-input-borde-ok: #27ae60;
    --color-input-shadow-focus: rgba(27, 61, 46, 0.14);
    --color-input-shadow-error: rgba(192, 57, 43, 0.10);
    --color-input-shadow-ok: rgba(39, 174, 96, 0.10);
    --color-input-fondo-error: #fff8f7;
    /* ── Métodos de entrega / pago ───────────────────────────── */
    --color-metodo-active-shadow: rgba(27, 61, 46, 0.22);
    /* ── Estado vacío ────────────────────────────────────────── */
    --color-empty-icon-shadow: rgba(27, 61, 46, 0.08);
    /* ── WhatsApp ────────────────────────────────────────────── */
    --color-wsp: #25D366;
    /* ── Alertas del sistema ─────────────────────────────────── */
    --color-verde-ok-bg: #eaf7ef;
    /* ── Confirmación de pedido ──────────────────────────────── */
    --color-confirm-header-logo: rgba(255, 255, 255, 0.15);
    --color-confirm-pago-link: #8A6528;
    --color-confirm-footer-text: rgba(196, 218, 180, 0.82);
    /* ── Modal ───────────────────────────────────────────────── */
    --color-modal-overlay: rgba(14, 32, 24, 0.58);
    /* ── Zoom / Anuncio ──────────────────────────────────────── */
    --color-zoom-overlay: rgba(0, 0, 0, 0.58);
    --color-zoom-close-bg: rgba(0, 0, 0, 0.38);
    --color-zoom-close-hover: rgba(0, 0, 0, 0.60);
    --color-anuncio-overlay: rgba(0, 0, 0, 0.50);
    --color-anuncio-close-bg: rgba(0, 0, 0, 0.40);
    --color-anuncio-close-hover: rgba(0, 0, 0, 0.65);
    /* ── Página de producto ──────────────────────────────────── */
    --color-pd-card-sombra: rgba(27, 61, 46, 0.08);
    --color-pd-badge-green-bg: #e9f7ef;
    --color-pd-badge-green-border: #d4efdf;
    --color-pd-qty-btn-shadow: rgba(0, 0, 0, 0.06);
    --color-pd-btn-shadow: rgba(27, 61, 46, 0.22);
    --color-pd-btn-hover-shadow: rgba(27, 61, 46, 0.32);
    /* ── Categorías visuales ─────────────────────────────────── */
    --color-cat-visual-hover-sombra: rgba(27, 61, 46, 0.10);
    /* ── Estado (tienda pausada) ─────────────────────────────── */
    --color-status-sombra: rgba(27, 61, 46, 0.10);
    /* ── Barra de búsqueda ───────────────────────────────────── */
    --color-sf-bar-sombra: rgba(0, 0, 0, 0.04);
    --color-sf-bar-em: #8A6528;
    /* ── Dropdown de categorías ──────────────────────────────── */
    --color-dropdown-sombra: rgba(0, 0, 0, 0.12);
    /* ── Alias semánticos ────────────────────────────────────────
       blog.css, style-nosotros.css, style-mi-cuenta.css, pages.css,
       product-detail.css, sidebar.css y los 6 temas figma consumen estos
       nombres. Nunca estuvieron definidos (ni acá ni en api.js), así que
       cada uso caía a su fallback hardcodeado: las páginas secundarias
       ignoraban la paleta y, en los temas figma, `--color-fondo` sin
       definir hacía que el color de fondo elegido en el admin no tuviera
       ningún efecto. Se definen como alias de la paleta real; `--color-fondo`
       apunta al fondo de página, así que sigue a la config del admin y a los
       temas que redefinen --color-fondo-claro (ej. noche). */
    --color-fondo: var(--color-fondo-claro);
    --color-fondo-alt: var(--color-fondo-qty);
    --color-borde: var(--color-gris-claro);
    --color-texto: var(--color-gris-oscuro);
    --color-texto-suave: var(--color-gris-muted);
    /* Texto que va directamente SOBRE el fondo de página (títulos de blog,
       Nosotros, Mi cuenta…), no sobre una card blanca. Se separa de
       --color-texto porque con un fondo oscuro (tema noche, o un fondo oscuro
       elegido en el admin) el texto tiene que aclararse, mientras el de las
       cards blancas sigue siendo oscuro. api.js lo invierte según el fondo
       configurado; los temas de fondo oscuro lo pisan en su propio archivo. */
    --color-texto-pagina: var(--color-texto);
    --color-texto-pagina-suave: var(--color-texto-suave);
    /* Texto que va ENCIMA de los colores de marca. api.js los recalcula según
       la luminancia del primario/acento elegidos en el admin: con un acento
       claro (celeste, amarillo, lima) el blanco fijo daba contraste 3.4, por
       debajo del mínimo legible. */
    --color-texto-sobre-primario: #ffffff;
    --color-texto-sobre-acento: #ffffff;
    /* Color de marca para TEXTO sobre el fondo de página (precios, títulos de
       sección). api.js lo aclara u oscurece si el primario configurado no
       contrasta con el fondo del tema activo — en los temas oscuros un primario
       navy quedaba en contraste 2. Por defecto es el primario tal cual. */
    --color-primario-legible: var(--color-primario);
    --color-acento-legible: var(--color-acento);
    /* Precio del detalle de producto: vive dentro de .pd-ab-panel, que tiene
       fondo propio del tema (a veces oscuro aunque la página sea clara), así
       que necesita su propio ajuste — api.js lo calcula contra ESE fondo. */
    /* ── Layout ──────────────────────────────────────────────────
       Ancho y padding lateral ÚNICOS del contenido. Cada sección tenía el
       suyo (1200 / 1162 / 1136 / 1100 / 1080) y los bordes izquierdo y
       derecho no coincidían entre bloques: a 1440px había 5 ejes distintos
       con hasta 60px de diferencia. */
    --ancho-contenido: 1200px;
    --padding-lateral: 1.25rem;
    /* El comercio puede fijar el color del precio (Colores por zona); si no,
       sale de la paleta, ya corregido para que se lea sobre el fondo. */
    --color-precio: var(--color-zona-card-precio, var(--color-primario-legible));
    --color-precio-acento: var(--color-zona-card-precio, var(--color-acento-legible));
}


/* ================================================================
   PANTALLA DE CARGA
   ================================================================ */

#cfg-loading {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
    background: var(--color-fondo-claro);
    color: var(--color-gris-oscuro);
    font-weight: 600;
    font-size: 0.95rem;
    transition: opacity 0.25s ease;
}

#cfg-loading.cfg-loading-listo {
    opacity: 0;
    pointer-events: none;
}

#cfg-loading .cfg-loading-spinner {
    width: 38px;
    height: 38px;
    border: 3px solid var(--color-gris-claro);
    border-top-color: var(--color-primario);
    border-radius: 50%;
    animation: cfg-loading-spin 0.7s linear infinite;
}

@keyframes cfg-loading-spin {
    to {
        transform: rotate(360deg);
    }
}



/* ================================================================
   RED DE SEGURIDAD PARA LAS IMÁGENES
   ================================================================
   La tienda no tenía esta regla, que es el reset responsive de toda la vida.
   Cada imagen dependía de que le llegara SU regla puntual (`.pd-ab-main-img`,
   `.prod-img-wrap img`, la del tema activo…). Cuando alguna no llega, un
   `<img>` se dibuja a su tamaño intrínseco: las fotos del catálogo son de
   732×800 y las de hero pasan los 1600px de ancho.

   Eso en una computadora se ve feo; en un teléfono rompe la página entera. Un
   solo elemento de 1600px hace que el documento mida 1600px, el navegador
   encoge todo para que entre, y el resultado es exactamente lo que reportó un
   comercio desde Brave en el celular: "la foto del producto se veía gigante y
   todo el resto de la página quedaba mini".

   Motivos por los que una regla puede no llegar: una hoja todavía cargando (el
   `<img>` ya está en el DOM), un bloqueador de contenido que frena un recurso
   —los Shields de Brave, entre otros—, o un tema cuyo selector no matchea ese
   markup. Ninguno se puede prevenir desde acá; esto acota el daño en los tres
   casos.

   Sólo `max-width`. Nada de `height: auto`: las fotos que se recortan con
   `object-fit: cover` dentro de un contenedor de alto fijo declaran su
   `height` aparte, y pisárselo las aplastaría.
   ================================================================ */

img,
svg,
video,
canvas {
    max-width: 100%;
}


/* Los saltos internos —"Ver más", el filtro por categoría, "Volver al listado"—
   se hacían de golpe: la página aparecía en otro lado sin transición y costaba
   entender si había cambiado de sección o de página. Con el desplazamiento
   suave se entiende que es el mismo documento moviéndose.

   Respeta a quien pidió menos movimiento: para esas personas el salto brusco
   es justamente lo que evita el mareo. */
@media (prefers-reduced-motion: no-preference) {
    html {
        scroll-behavior: smooth;
    }
}


/* ================================================================
   ICON UTILITY — inline SVG icons
   ================================================================ */

.ico {
    display: inline-block;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    pointer-events: none;
}

/* ================================================================
   RESET Y BASE
   ================================================================ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--font-body);
}

html {
    /* Sin esto, iOS Safari agranda solo algunos textos al rotar a horizontal
       y la tipografía queda despareja entre bloques. */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    background-color: var(--color-fondo-claro);
    color: var(--color-gris-oscuro);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

ul {
    list-style: none;
}


/* ================================================================
   SIN PARPADEO DE COLOR AL CARGAR
   La paleta del comercio la aplica api.js por JS, así que el primer pintado
   usa los valores por defecto de este archivo. Con transiciones activas eso se
   veía como un viraje de color (dorado → color real) de ~150ms, más notorio en
   el ítem activo del menú. Se suprimen hasta que api.js avisa (clase
   cfg-aplicada en <body>, con timeout de respaldo).
   ================================================================ */

body:not(.cfg-aplicada) *,
body:not(.cfg-aplicada) *::before,
body:not(.cfg-aplicada) *::after {
    transition: none !important;
}


/* ================================================================
   MOVIMIENTO REDUCIDO
   Quien lo pide a nivel sistema (mareos, vestibular) no debería recibir la
   animación de entrada de las tarjetas, los desplazamientos en hover ni el
   carrusel automático. Se apaga todo, pero se mantiene la opacidad final
   para que nada quede invisible esperando una animación que no corre.
   ================================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
    .product-grid .product {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    .product:hover,
    .product:hover .prod-img-wrap img,
    .cat-carousel-card:hover,
    .blog-card:hover {
        transform: none !important;
    }
}


/* ================================================================
   FOCO VISIBLE (navegación con teclado)
   Varios componentes apagaban el outline sin poner nada en su lugar:
   tabulando por la tienda no se veía dónde estaba el foco. `:focus-visible`
   sólo matchea foco por teclado, así que el click con mouse sigue sin anillo.
   ================================================================ */

a:focus-visible,
button:focus-visible,
select:focus-visible,
textarea:focus-visible,
input:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-acento);
    outline-offset: 2px;
}

/* Sobre fondos oscuros (header, hero, footer) el acento puede tener poco
   contraste: ahí el anillo va blanco. */
header a:focus-visible,
header button:focus-visible,
header input:focus-visible,
footer a:focus-visible,
footer button:focus-visible,
footer input:focus-visible,
.hero-section a:focus-visible,
.hero-section button:focus-visible {
    outline-color: var(--color-secundario);
}

.oculto {
    display: none;
}


/* ================================================================
   DESTINOS DE SCROLL Y HEADER STICKY
   El header + nav son sticky (171px en mobile con el nav en dos filas, ~110px
   en desktop). Cada scrollIntoView del sitio —elegir una categoría, buscar,
   "Ver productos", volver del detalle— dejaba el título y la primera fila de
   productos DETRÁS del header. scroll-margin-top reserva ese espacio en los
   destinos, sin tocar el resto del layout.
   ================================================================ */

#product-list,
#categorias-visuales,
#featured-section,
#vistos-section,
.category-section,
.subcategory-section,
.volver-btn,
.sf-context-bar,
.pd-ab-hero,
.pd-ab-related-section,
.pd-ab-reviews-section,
.blog-post,
.cuenta-container {
    scroll-margin-top: 185px;
}

@media (min-width: 601px) {
    #product-list,
    #categorias-visuales,
    #featured-section,
    #vistos-section,
    .category-section,
    .subcategory-section,
    .volver-btn,
    .sf-context-bar,
    .pd-ab-hero,
    .pd-ab-related-section,
    .pd-ab-reviews-section,
    .blog-post,
    .cuenta-container {
        scroll-margin-top: 120px;
    }
}

/* ══════════════════════════════════════════════════════════════════
   ACCESO A LAS PÁGINAS LEGALES
   Van en base.css y no en legales.css porque aparecen en TODAS las páginas
   de la tienda (los inyecta inyectar_legales() en app/web/meta.py), y
   legales.css sólo lo carga la página legal.
   ══════════════════════════════════════════════════════════════════ */

.legal-bar {
    /* Varios temas hacen `body { display: flex; flex-direction: column }` y le
       dan `order` a cada bloque. Un hijo sin `order` vale 0, así que la franja
       —que se inyecta al final del documento— se iba ARRIBA DE TODO, entre el
       header y el hero. Se veía así en alimentos-figma. En los temas cuyo body
       no es flex, esta línea no hace nada. */
    order: 9999;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 6px 10px;
    padding: 16px 16px 20px;
    background: var(--color-fondo, transparent);
    border-top: 1px solid rgba(128, 128, 128, .22);
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: .78rem;
    line-height: 1.5;
    text-align: center;
}
.legal-bar a {
    color: inherit;
    opacity: .75;
    text-decoration: none;
    /* 44px de alto táctil sin agrandar la franja: el padding vertical lo da
       el area, no la caja visible. */
    padding: 6px 2px;
}
.legal-bar a:hover { opacity: 1; text-decoration: underline; }
.legal-bar span { opacity: .4; }

/* Botón de Data Fiscal (RG 3379/2012). Va en la misma franja que los enlaces
   legales, en su propio renglón: es una imagen vertical de 60×80 que servida
   por AFIP y entre dos links de texto rompe la línea. `flex-basis: 100%` lo
   baja sin sacarlo del flex del contenedor. */
.legal-bar .data-fiscal {
    flex-basis: 100%;
    display: flex;
    justify-content: center;
    padding: 6px 0 0;
    opacity: 1;
}
.legal-bar .data-fiscal img {
    /* Tamaño fijo: es el logo oficial y achicarlo lo vuelve ilegible. El
       height explícito evita que la franja salte cuando la imagen termina de
       bajar del servidor de AFIP. */
    /* 60×82 es la proporción exacta del JPG de AFIP (239×327): con otra
       relación quedan bandas a los costados. El height explícito evita que la
       franja salte cuando la imagen termina de bajar del servidor de AFIP. */
    width: 60px;
    height: 82px;
}

/* La barra inferior del celular mide 56px y taparía la franja, que es lo
   último del documento. */
@media (max-width: 767px) {
    .legal-bar { padding-bottom: 76px; }
}

@media print { .legal-bar { display: none; } }