/* ================================================================
   HEADER
   ================================================================ */

header {
    background-color: var(--color-zona-header-fondo, var(--color-primario));
    position: sticky;
    top: 0;
    z-index: 500;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 4px 20px rgba(0, 0, 0, 0.22);
    transition: box-shadow 0.2s;
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.55rem var(--padding-lateral);
    max-width: var(--ancho-contenido);
    margin: 0 auto;
    transition: padding 0.25s;
}

/* ── Header retráctil en mobile ──────────────────────────────────────────
   En el celular el header ocupa dos filas (logo + buscador) más el nav de
   categorías: fijo arriba se come casi la mitad de la pantalla mientras se
   navega el catálogo. Al bajar se retrae y al subir vuelve, como cualquier
   app. Sólo hasta 768px: en escritorio el header es una franja fina y
   esconderlo sólo molestaría.
   Sin `will-change: transform`: crea contenedor para los hijos con
   position:fixed y el panel de categorías (.dropdown-content) dejaría de
   posicionarse contra la ventana. La lógica vive en el script del header
   compartido (app/tienda/partials/header.html). */
@media (max-width: 768px) {
    header {
        transition: transform 0.28s ease, box-shadow 0.2s;
    }
    header.header-oculto {
        transform: translateY(-100%);
    }
}

/* Mini header al hacer scroll */
header.header-mini {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
}

header.header-mini .header-inner {
    padding: 0.28rem 1.4rem;
}

header.header-mini .header-logo img {
    height: calc(28px * var(--logo-escala, 1));
}

header.header-mini .header-logo-text strong {
    font-size: 1rem;
}

header.header-mini .header-logo-text span {
    display: none;
}

.header-logo {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    cursor: pointer;
    flex-shrink: 0;
    text-decoration: none;
}

/* `--logo-escala` (Configuración → Diseño, o el panel de "Editar página") es un
   multiplicador sobre este alto, no un tamaño: así el mini-header al scrollear
   y las media queries siguen decidiendo el alto base y la elección del comercio
   se respeta en los tres casos. Ningún tema pisa esta regla — el alto del logo
   vive sólo acá y en el mini-header. Ausente = 1 = como siempre. */
.header-logo img {
    height: calc(36px * var(--logo-escala, 1));
    width: auto;
    border-radius: 5px;
}

.header-logo-text strong {
    display: block;
    /* Sobre un fondo de header elegido a mano, el color de texto por defecto
       es el que api.js calculó como legible sobre ESE fondo. */
    color: var(--color-zona-header-texto,
            var(--color-zona-header-fondo-texto-legible, var(--color-secundario)));
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.15;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.header-logo-text span {
    display: block;
    color: var(--color-header-logo-sub);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.header-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--color-header-search-bg);
    border: 1px solid var(--color-header-search-border);
    border-radius: 8px;
    padding: 0.38rem 0.9rem;
    transition: background 0.2s, border-color 0.2s;
}

.header-search:focus-within {
    background: var(--color-header-search-focus-bg);
    border-color: var(--color-header-search-focus-br);
}

.header-search-icon {
    width: 14px;
    height: 14px;
    opacity: 0.65;
    flex-shrink: 0;
}

.header-search input {
    background: none;
    border: none;
    outline: none;
    color: var(--color-secundario);
    font-size: 0.88rem;
    width: 100%;
    font-family: var(--font-body);
    font-weight: 400;
    letter-spacing: 0.01em;
}

.header-search input::placeholder {
    color: var(--color-header-search-placeholder);
}

.header-cart-btn {
    background-color: var(--color-acento);
    /* Texto calculado según el acento: con un acento claro el blanco fijo
       quedaba en contraste 3.4 (por debajo del mínimo legible). */
    color: var(--color-texto-sobre-acento);
    border: none;
    font-size: 0.88rem;
    padding: 0.48rem 1.1rem;
    border-radius: 7px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s, transform 0.15s, box-shadow 0.2s;
    position: relative;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    flex-shrink: 0;
    letter-spacing: 0.01em;
}

.header-cart-btn:hover {
    background-color: var(--color-acento-hover);
    border-radius: 7px;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
}

#cart-count {
    display: inline-block;
    background-color: rgba(255, 255, 255, 0.22);
    color: var(--color-secundario);
    border-radius: 4px;
    min-width: 18px;
    height: 18px;
    font-size: 0.7rem;
    font-weight: 700;
    text-align: center;
    line-height: 18px;
    padding: 0 4px;
    margin-left: 4px;
}


/* ================================================================
   NAVEGACIÓN
   ================================================================ */

#category-buttons {
    display: flex;
    align-items: center;
    /* `safe center` centra cuando el nav entra en pantalla, pero cae a
       flex-start cuando NO entra: con `center` puro y overflow-x:auto el
       contenido se sale por los dos lados y el principio queda cortado e
       inalcanzable con scroll. La línea de arriba es el fallback para
       navegadores sin `safe`. */
    justify-content: center;
    justify-content: safe center;
    gap: 0.3rem;
    padding: 0;
    background-color: var(--color-primario-hover);
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    /* NO poner mask-image acá. Había un fade en el borde derecho para indicar
       que el nav seguía scrolleando, y recortaba el render de TODO el subtree
       del nav: el panel de categorías (.dropdown-content, position:fixed)
       quedaba invisible en los 24 layouts, en desktop y en mobile — se veía
       rotar la flecha y nada más. Un mask/filter en un ancestro clipea incluso
       a los descendientes fixed. En mobile el nav ya no scrollea (envuelve en
       dos filas, ver sidebar.css) y en tablet/desktop alcanza `safe center`. */
}

#category-buttons::-webkit-scrollbar {
    display: none;
}

.quick-cat-pills {
    display: flex;
    gap: 0;
    flex-shrink: 0;
}

.quick-pill {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    /* 0.72 daba 4.1-4.2 sobre las barras de nav de tono medio (modaco-figma,
       alimentos-figma): texto de 0.7rem necesita 4.5. Los temas de nav claro
       pisan este color con el suyo, así que subirlo no los afecta. */
    color: rgba(255, 255, 255, 0.88);
    border-radius: 0;
    /* products.js los renderiza como <a href="/?cat=...">: sin esto quedaban
       con el subrayado por defecto del navegador y parecían el ítem activo
       del nav (el resto de los links del nav ya traen text-decoration:none). */
    text-decoration: none;
    padding: 0.6rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    letter-spacing: 0.02em;
}

.quick-pill:hover {
    color: rgba(255, 255, 255, 0.95);
    border-bottom-color: rgba(255, 255, 255, 0.4);
}

.quick-pill.active {
    color: var(--color-acento);
    border-bottom-color: var(--color-acento);
    font-weight: 600;
}

.nav-link-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    /* 0.72 daba 4.1-4.2 sobre las barras de nav de tono medio (modaco-figma,
       alimentos-figma): texto de 0.7rem necesita 4.5. Los temas de nav claro
       pisan este color con el suyo, así que subirlo no los afecta. */
    color: rgba(255, 255, 255, 0.88);
    border-radius: 0;
    padding: 0.6rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s, border-color 0.15s;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.nav-link-btn:hover {
    color: rgba(255, 255, 255, 0.95);
    border-bottom-color: rgba(255, 255, 255, 0.4);
}

.nav-link-btn.active {
    color: var(--color-acento);
    border-bottom-color: var(--color-acento);
    font-weight: 600;
}

.dropdown {
    position: relative;
    display: inline-block;
    flex-shrink: 0;
}

.dropdown-btn {
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    /* 0.72 daba 4.1-4.2 sobre las barras de nav de tono medio (modaco-figma,
       alimentos-figma): texto de 0.7rem necesita 4.5. Los temas de nav claro
       pisan este color con el suyo, así que subirlo no los afecta. */
    color: rgba(255, 255, 255, 0.88);
    border-radius: 0;
    padding: 0.6rem 0.85rem;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    transition: color 0.15s;
    letter-spacing: 0.02em;
}

.dropdown-btn:hover {
    color: rgba(255, 255, 255, 0.95);
}

.dropdown .arrow {
    font-size: 0.7rem;
    transition: transform 0.22s;
}

.dropdown:hover .arrow,
.dropdown .arrow.rotate {
    transform: rotate(180deg);
}

.dropdown-content {
    display: none;
    position: fixed;
    background: var(--color-secundario);
    /* Con el fondo va el color del texto. Faltaba: el panel se pinta claro
       —igual que el sidebar de filtros, y por el mismo motivo, porque los
       botones de categoría traen su color propio— pero seguía heredando el
       color del tema, así que en los temas oscuros cualquier cosa que se
       agregara adentro y no trajera su color salía clara sobre blanco. Medido
       con los links de páginas: contraste 1,00. Invisible.

       Literal y no `--color-texto`: varios temas lo redefinen a un tono claro
       porque su fondo de página es oscuro (clásico, noche, café dieron 1,00 a
       1,37 con esa variable). El panel es una superficie clara FIJA, así que
       su texto también tiene que serlo — mismo criterio y mismo valor que el
       sidebar de filtros. */
    color: #374151;
    width: 360px;
    border-radius: 14px;
    box-shadow: 0 12px 40px var(--color-dropdown-sombra);
    overflow: hidden;
    z-index: 9999;
    border: 1px solid var(--color-gris-claro);
    padding: 6px 8px 8px 8px;
    /* Con muchas categorías el panel se extendía más allá del borde inferior
       de la pantalla y no había forma de llegar a las últimas. */
    max-height: calc(100vh - 120px);
    overflow-y: auto;
}

.dropdown:hover .dropdown-content,
.dropdown-content.show {
    display: block !important;
}

.cat-btn-todas {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    background: var(--color-fondo-qty) !important;
    cursor: pointer !important;
    margin-bottom: 6px !important;
    border: 1.5px solid var(--color-gris-medio) !important;
    color: var(--color-primario) !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    text-align: left !important;
    transition: background 0.15s !important;
}

a.cat-btn-todas { text-decoration: none !important; }

.cat-btn-todas:hover {
    background: var(--color-fondo-hover-cat) !important;
}

.cat-btn-todas.active-cat {
    background: var(--color-primario) !important;
    color: var(--color-secundario) !important;
}

.dropdown-cat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3px;
}

.dropdown-content button:not(.cat-btn-todas),
.dropdown-content a:not(.cat-btn-todas) {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 8px 10px !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--color-gris-oscuro) !important;
    border: 1px solid transparent !important;
    text-align: left !important;
    /* El panel puede armarse con <a>: sin esto quedan subrayados. */
    text-decoration: none !important;
    cursor: pointer !important;
    font-size: 0.78rem !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    transition: background 0.12s, border-color 0.12s !important;
}

.dropdown-content button:not(.cat-btn-todas):hover,
.dropdown-content a:not(.cat-btn-todas):hover {
    background: var(--color-fondo-claro) !important;
    border-color: var(--color-gris-claro) !important;
    color: var(--color-primario) !important;
}

/* La categoría elegida tiene que LEERSE como elegida. Antes era un fondo gris
   clarito con borde: al lado de "Ver todos los productos" —que tiene caja,
   borde y negrita SIEMPRE— parecía que lo seleccionado era "Ver todos". Se ve
   en cualquier tema con acento fuerte. Ahora la elegida se pinta con el color
   principal y "Ver todos" queda neutro salvo cuando el filtro es él. */
.dropdown-content button:not(.cat-btn-todas).active-cat,
.dropdown-content a:not(.cat-btn-todas).active-cat {
    background: var(--color-primario) !important;
    border-color: var(--color-primario) !important;
    color: var(--color-secundario) !important;
}

.dropdown-content button:not(.cat-btn-todas).active-cat small,
.dropdown-content a:not(.cat-btn-todas).active-cat small {
    color: var(--color-secundario) !important;
    opacity: 0.75;
}

/* Con una categoría filtrada, "Ver todos" es la salida, no el estado actual. */
.dropdown-content:has(.active-cat) .cat-btn-todas:not(.active-cat) {
    background: transparent !important;
    border-color: var(--color-gris-claro) !important;
    font-weight: 600 !important;
}

@media (max-width: 500px) {
    .dropdown-content {
        width: calc(100vw - 20px);
    }
}


/* ================================================================
   BANNER ENVÍO GRATIS
   ================================================================ */

.banner-envio {
    background-color: var(--color-primario);
    color: var(--color-secundario);
    text-align: center;
    padding: 9px 44px;
    font-size: 0.88rem;
    font-weight: 600;
    position: relative;
}

.banner-envio strong {
    color: var(--color-banner-strong);
    text-decoration: underline;
}

.cerrar-banner {
    background: none;
    border: none;
    color: var(--color-banner-close);
    font-size: 1rem;
    font-weight: 700;
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    line-height: 1;
}

.cerrar-banner:hover {
    color: var(--color-secundario);
}




/* ================================================================
   ÁREA TÁCTIL MÍNIMA — móvil
   ================================================================
   Medido a 390px en los 24 temas: los cinco controles que más se tocan en
   toda la tienda (logo, favoritos, carrito, menú de categorías y los enlaces
   del nav) quedaban entre 33 y 36px de alto, y el cerrar del banner en 16px.
   El mínimo recomendado es 44px (Apple HIG) / 48dp (Material).

   Se agranda el área sensible, no el dibujo: los botones ya tienen su tamaño
   visual dado por su padding y su fondo, así que acá sólo se sube el alto
   mínimo y se centra el contenido. El aspecto no cambia. */
@media (max-width: 768px) {
    .header-logo,
    .header-fav-btn,
    .header-cart-btn,
    .dropdown-btn,
    #category-buttons .nav-link-btn {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .header-fav-btn,
    .header-cart-btn,
    .dropdown-btn {
        justify-content: center;
        min-width: 44px;
    }
    /* El ✕ del banner era de 16px: se le da el área sin mover el glifo, que
       sigue centrado sobre el borde derecho de la franja. */
    .cerrar-banner {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        right: 2px;
    }
    /* Flechas del carrusel del hero: 32px medidos en 19 temas. */
    .slide-prev,
    .slide-next {
        min-width: 44px;
        min-height: 44px;
    }
}