/* ================================================================
   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;
    --color-gris-muted: #877D6E;
    --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);
}


/* ================================================================
   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);
    }
}



/* ================================================================
   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);
}

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;
}

.oculto {
    display: none;
}