/* ════════════════════════════════════════════════════════════════════════
 *  BUYACÁ — Home + Vitrina de productos v2 (Fase 2 del rediseño)
 *  ───────────────────────────────────────────────────────────────────────
 *  REESTILIZADO ÚNICAMENTE — cero cambios de markup/Alpine/JS en home.php
 *  ni products-home.php. El header, el carrusel "Temu" y las tarjetas de
 *  "Locales cerca de ti" son compartidos por casi toda la app y los tocan
 *  18 de los 24 patches CSS existentes (incluido el de mayor prioridad de
 *  todo el sistema, class-buyaca-header-filters-final.php a wp_footer
 *  1700) — restructurar ese HTML habría arriesgado romper filtros,
 *  autocompletado y badges compartidos. Este archivo solo reemplaza
 *  colores/tipografía/sombras/radios/espaciado por encima. Se carga en
 *  wp_head prioridad 1000000 (ver class-buyaca-redesign-fase2.php).
 * ════════════════════════════════════════════════════════════════════════ */

/* ── Header colapsable (buscador + chips de filtro) ──
   [Fix reportado con captura] .bq-app-header es position:fixed;top:0 sin
   padding-top — en el status bar del celular (hora/batería/notch) el
   wordmark "BUY ACÁ" quedaba pegado/tapado contra el borde superior. Se
   respeta el safe-area del dispositivo. */

.buyaca-app .bq-app-header {
    background: var(--bq-page-bg, #FDFCFB) !important;
    border-bottom: 1px solid var(--bq-line, #E7E8EC) !important;

}

/* [Pedido] Al hacer scroll hacia abajo se ocultan buscador/logo/me-interesa
   EXACTAMENTE con la misma animación y al mismo tiempo, y solo queda
   visible el menú de categorías (chips) — el header en sí NO se mueve.
   La animación de los 3 (logo, buscador, me-interesa) se centralizó por
   completo en ui-refinements-v889.css (sección "2b"), con los mismos
   valores copiados 1:1 del bloque del logo — así no pueden divergir. */
/* Si el panel de búsqueda estaba abierto, se cierra también al ocultar */
.buyaca-app .bq-app-header.bq-header-hidden .bq-header-search-panel {
    display: none !important;
}

.buyaca-app .bq-wordmark {
    font-family: var(--bq-font-display, inherit) !important;
    color: var(--bq-text, #14151A) !important;
}

.buyaca-app .bq-app-header-search-input,
.buyaca-app .bq-autocomplete-input {
    background: var(--bq-surface, #fff) !important;
    border: 1px solid var(--bq-line-strong, #DEDFE4) !important;
    border-radius: 12px !important;
    color: var(--bq-text, #14151A) !important;

}

/* [Rediseño] Header minimalista de 3 zonas: ícono de buscar a la
   izquierda, logo centrado, "me interesa" a la derecha — panel de
   búsqueda desplegable en su propia fila, chips de filtro debajo.
   Requirió mover el HTML (buscador/interés ya no comparten wrapper, ver
   home.php/products-home.php) porque grid-area solo aplica a hijos
   DIRECTOS del contenedor grid. */
.buyaca-app .bq-app-header-inner {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas:
        "bqhdr-search bqhdr-logo bqhdr-interest"
        "bqhdr-panel bqhdr-panel bqhdr-panel"
        "bqhdr-chips bqhdr-chips bqhdr-chips" !important;
    align-items: center !important;

    column-gap: 10px !important;
}

.buyaca-app .bq-header-search-toggle {
    grid-area: bqhdr-search !important;
    justify-self: start !important;
}

.buyaca-app .bq-header-logo-wrap {
    grid-area: bqhdr-logo !important;
    justify-self: center !important;
    text-align: center !important;
}

/* [Fix reportado] "la ventana de resultados del buscador se muestra detrás
   del menú" — bqhdr-panel y bqhdr-chips son filas SEPARADAS del grid (la
   de resultados va justo antes de la de chips), pero el listado de
   resultados (.bq-prod-autocomplete) es position:absolute y se desborda
   hacia abajo, por debajo de su propia fila — sin una posición/z-index
   propios en .bq-header-search-panel, ese desborde quedaba pintado detrás
   de la fila de chips que viene después en el flujo normal del grid. */
.buyaca-app .bq-header-search-panel {
    grid-area: bqhdr-panel !important;
    width: 100% !important;
    position: relative !important;
    z-index: 50 !important;
}

.buyaca-app .bq-header-chips-wrap {
    grid-area: bqhdr-chips !important;
}

/* Botón ícono de buscar — circular, mismo tamaño/look que "me interesa".
   [Fix reportado] "no aparece la animación en buscar/me interesa": esta
   regla pisaba con !important la propiedad `transition` completa (la
   reemplazaba por solo background-color/color), anulando la animación de
   max-height/opacity/transform definida en ui-refinements-v889.css §2b
   — esta hoja carga DESPUÉS (wp_head prioridad 1000000), así que ganaba
   la pelea de cascada. Se quita la transition de acá; la única fuente de
   verdad para la transición de este botón queda en ui-refinements-v889.css,
   igual que el logo. */
.buyaca-app .bq-header-search-toggle {
    width: 42px !important;
    height: 42px !important;
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid var(--bq-line-strong, #DEDFE4) !important;
    border-radius: 50% !important;
    background: var(--bq-surface, #fff) !important;
    color: var(--bq-ink-soft, #5B5F6B) !important;
    cursor: pointer !important;
    padding: 0 !important;

    /* Sin "transition" acá a propósito: la única fuente de verdad para la
       transición de este botón es ui-refinements-v889.css §2b (si se
       declarara acá también, con !important y cargando después, pisaría
       esa animación por completo — eso era justamente el bug reportado). */
}

.buyaca-app .bq-header-search-toggle:hover {
    color: var(--bq-primary, #3A59EF) !important;
    border-color: var(--bq-primary, #3A59EF) !important;
}

/* Panel desplegable: el input queda a ancho completo dentro de su fila */
.buyaca-app .bq-header-search-panel .bq-app-header-search {
    width: 100% !important;
    background: var(--bq-surface, #fff) !important;
    border: 1px solid var(--bq-line-strong, #DEDFE4) !important;
    border-radius: var(--bq-radius-pill, 999px) !important;

}

.buyaca-app .bq-header-search-panel .bq-app-header-search-icon {
    color: var(--bq-ink-soft, #5B5F6B) !important;
}

.buyaca-app .bq-home-filter-pill,
.buyaca-app .bq-home-filter-select {
    background: var(--bq-surface, #fff) !important;
    border: 1px solid var(--bq-line-strong, #DEDFE4) !important;
    border-radius: 999px !important;
    color: var(--bq-ink-soft, #5B5F6B) !important;
    font-family: var(--bq-font-body, inherit) !important;
    font-weight: 600 !important;

}

/* [Pedido] Subrayado + color principal en vez de fondo relleno — mismo
   criterio que header-filters-menu-brand-v1100.css (única fuente de verdad
   para este estado; se alinea aquí para no dejar dos tratamientos
   contradictorios del mismo .active conviviendo en cascada). */
.buyaca-app .bq-home-filter-pill.active,
.buyaca-app .bq-home-filter-pill[aria-selected="true"] {
    background: transparent !important;
    border-color: var(--bq-line-strong, #DEDFE4) !important;
    color: var(--bq-brand, #3A59EF) !important;
}

/* [Pedido] "Cerca de mí" — diseño estilo botón con el color principal,
   llamativo y que destaque del resto de píldoras (outline/transparentes). */
.buyaca-app .bq-near-me-pill,
.buyaca-app .bq-near-me-pill.active {
    background: var(--bq-brand, #3A59EF) !important;
    border: 1px solid var(--bq-brand, #3A59EF) !important;
    color: #fff !important;
    font-family: var(--bq-font-body, inherit) !important;
    font-weight: 700 !important;
}

.buyaca-app .bq-near-me-pill svg {
    color: #fff !important;
}

/* ── Título de secciones ("Negocios destacados", "Locales cerca de ti") ── */
.buyaca-app .bq-recomendados-zone .bq-home-section-title,
.buyaca-app .bq-home-section-title {
    font-family: 'Roboto', var(--bq-font-display, inherit) !important;
    color: var(--bq-text, #14151A) !important;
    font-weight: 600 !important;
    margin: 10px 0px 10px 0px;
}

/* [Purga] Toda la sección "Tarjeta Temu" (negocios/productos pautados con
   panel de info + imagen a un lado) fue retirada — reemplazada por el
   rediseño tipo hero-slide (clases bq-ad-hero-*, ver
   assets/css/patches/admin-catalog-list-v1.css, último del bundle). No
   queda ningún elemento con estas clases en el HTML (templates/home.php,
   templates/products-home.php), así que estas reglas no afectaban nada. */

/* [Rediseño v5 — pedido con capturas reales] Panel de info a la izquierda
   + línea divisoria degradada + imagen a la derecha, MISMO orden en
   móvil/tablet/desktop (antes se invertía en móvil, se revirtió a
   pedido). Altura fija moderada (176-216px según densidad de contenido,
   ver comentario histórico de la v3 más abajo sobre el bug de altura).
   El carril muestra varias tarjetas a la vez: 1 móvil / 2 tablet /
   3 desktop. El wrap se alinea al mismo ancho que Categorías/Feed de
   abajo (max-width:1200px centrado) — antes ocupaba el 100% del
   viewport por reglas legacy en ui-refinements-v889.css/v8814.css con
   igual especificidad; se alinearon esas reglas directamente. */
.buyaca-app .bq-temu-carousel-wrap {
    margin: 14px 16px 16px !important;
    position: relative;
}

@media (min-width: 768px) {
    .buyaca-app .bq-temu-carousel-wrap {
        margin: 14px auto 16px !important;
        max-width: 1200px !important;
    }
}

/* [Pedido v10.10.0] Flechas de navegación del carrusel de anuncios — solo en
   PC (en móvil se navega con el dedo, deslizando sobre el track nativo). */
.buyaca-app .bq-temu-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #14151A;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.buyaca-app .bq-temu-carousel-arrow:hover {
    background: #fff;
}

.buyaca-app .bq-temu-carousel-arrow-prev {
    left: 6px;
}

.buyaca-app .bq-temu-carousel-arrow-next {
    right: 6px;
}

@media (max-width: 767px) {
    .buyaca-app .bq-temu-carousel-arrow {
        display: none;
    }
}

/* [Fix reportado — 2ª vuelta] Seguía viéndose 100% del viewport pese a la
   regla de arriba y a haber alineado ui-refinements-v889.css/v8814.css la
   vez pasada. Refuerzo con la especificidad más alta posible del
   proyecto (html body + 3 clases) por si hay alguna otra capa con igual
   especificidad que esta ganándole en orden de carga. Si tras esto sigue
   sin verse, probablemente sea caché de WordPress/CDN/navegador, no CSS
   — este archivo se imprime al final (wp_head prioridad 1000000). */
html body .buyaca-app .bq-banner-section .bq-temu-carousel-wrap {
    width: auto !important;
    margin: 14px 5px 16px !important;
    max-width: none !important;
}

@media (min-width: 768px) {
    html body .buyaca-app .bq-banner-section .bq-temu-carousel-wrap {
        margin: 14px auto 16px !important;
        max-width: 1200px !important;
    }
}

/* [Purga] Ancho responsive de la tarjeta (1/2/3 columnas) retirado — el
   ancho por breakpoint del nuevo diseño (1 móvil / 2 tablet / 3 PC, ancho
   dinámico vía --bq-ad-visible) vive en .bq-ad-hero-card, ver
   admin-catalog-list-v1.css. */

/* [Pedido] Paginación moderna tipo "barra de progreso segmentada" (estilo
   Instagram Stories) en vez de los puntos genéricos del modal de
   catálogo — identifica de un vistazo la página activa Y cuánto falta
   por recorrer. Se sobreescribe .bq-slider-dots/.bq-slider-dot SOLO
   dentro de .bq-temu-slider-dots (clase extra que ya trae el HTML), sin
   tocar el modal de catálogo que sigue usando el dot circular clásico. */
/* [Pedido] "los puntos de paginación están en información, súbelos un
   poquito al banner" — antes quedaban como fila aparte DEBAJO de todo el
   carril (imagen + panel de texto), como si fueran del contenido de la
   página y no del carrusel. Ahora flotan superpuestos sobre la franja
   inferior del carril (que sigue siendo oscura en toda su altura, imagen
   y panel — ver fondo de .bq-temu-prod-card), con una píldora oscura
   semitransparente para que se lean bien encima de cualquier foto. */
.buyaca-app .bq-temu-slider-dots {
    position: absolute !important;
    left: 50% !important;
    bottom: 8px !important;
    transform: translateX(-50%) !important;
    z-index: 6 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    height: auto !important;
    background: rgba(12, 12, 14, .38) !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
    border-top: none !important;
    border-radius: 999px !important;
    padding: 6px 10px !important;
}

.buyaca-app .bq-temu-slider-dots .bq-slider-dot {
    width: 22px !important;
    height: 4px !important;
    border-radius: 3px !important;
    background: var(--bq-line-strong, #DEDFE4) !important;
    transition: background-color .25s ease, width .3s cubic-bezier(.22, 1, .36, 1), opacity .25s ease !important;
    opacity: .8 !important;
}

.buyaca-app:not(.bq-light-mode) .bq-temu-slider-dots .bq-slider-dot {
    background: rgba(255, 255, 255, .18) !important;
}

.buyaca-app .bq-temu-slider-dots .bq-slider-dot.active {
    width: 34px !important;
    background: var(--bq-brand, #3A59EF) !important;
    opacity: 1 !important;
}

/* [Purga] Bloque "Rediseño v7" (grid imagen+panel de .bq-temu-prod-card/
   .bq-temu-biz-card, nombre/descripción/estrellas/precio/ubicación/CTA
   internos) retirado junto con el resto de la sección — ver nota de purga
   más arriba. */

/* ── Tarjeta de "Locales cerca de ti" (home.php) ── */
.buyaca-app .bq-profile-card {
    background: var(--bq-surface, #fff) !important;
    border-radius: var(--bq-radius-card, 5px) !important;

    border: none !important;
}

.buyaca-app .bq-profile-card:hover {
    transform: none !important;
}

.buyaca-app .bq-profile-card .bq-cv2-name,
.buyaca-app .bq-profile-card-name {
    font-family: var(--bq-font-display, inherit) !important;
    color: var(--bq-text, #14151A) !important;
}

.buyaca-app .bq-profile-card-desc {
    color: var(--bq-ink-soft, #5B5F6B) !important;
}

.buyaca-app .bq-profile-card-rating {
    color: var(--bq-text, #14151A) !important;
    font-weight: 700 !important;
}

/* ── CTA de registro ── */
.buyaca-app .bq-cta-register-card {
    background: var(--bq-brand-tint, #E6EBFF) !important;
    border-radius: 16px !important;
    border: 1px solid #FFDCC6 !important;
}

.buyaca-app .bq-cta-register-btn {
    background: var(--bq-brand, #3A59EF) !important;
    color: #fff !important;
    border-radius: 12px !important;
    font-weight: 700 !important;

}

/* ── Carrusel de "Categorías" ([buyaca_categorias_carrusel], colab-cats.css)
   — píldoras (icono + texto en línea, imagen de referencia del dueño).
   Reemplaza POR COMPLETO el diseño anterior de tarjeta circular
   icono-arriba/nombre-abajo (ese CSS se purgó de colab-cats.css, no queda
   ninguna regla de `.bq-catcard*` en el proyecto). ── */
.buyaca-app .bq-catcarrusel-title {
    font-family: var(--bq-font-display, inherit) !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    color: var(--bq-text, #14151A) !important;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.buyaca-app .bq-catcar-track {
    background: transparent !important;
    border-radius: 0 !important;
    padding: 2px 2px 4px !important;

    gap: 8px !important;
}

.buyaca-app .bq-catpill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    padding: 8px 16px !important;
    border-radius: 999px !important;
    border: 1.5px solid var(--bq-line-strong, #DEDFE4) !important;
    background: var(--bq-surface, #fff) !important;
    cursor: pointer !important;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease !important;
}

.buyaca-app .bq-catpill:hover {
    border-color: var(--bq-brand, #3A59EF) !important;
}

.buyaca-app .bq-catpill-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 16px !important;
    height: 16px !important;
    color: var(--bq-ink-soft, #5B5F6B) !important;
    flex-shrink: 0 !important;
}

.buyaca-app .bq-catpill-icon svg,
.buyaca-app .bq-catpill-icon i {
    width: 16px !important;
    height: 16px !important;
    font-size: 15px !important;
}

.buyaca-app .bq-catpill-icon img {
    width: 16px !important;
    height: 16px !important;
    border-radius: 4px !important;
    object-fit: cover !important;
}

.buyaca-app .bq-catpill-ph {
    font-size: 11px !important;
    font-weight: 800 !important;
    color: var(--bq-ink-soft, #5B5F6B) !important;
}

.buyaca-app .bq-catpill-name {
    font-family: var(--bq-font-body, inherit) !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--bq-ink-soft, #5B5F6B) !important;
}

/* Seleccionada: tinte del color de marca (mismo criterio de contraste que
   el resto del rediseño — nunca fondo sólido opaco, un tinte que ya se
   adapta claro/oscuro vía --bq-brand-tint/--bq-brand-text). */
.buyaca-app .bq-catpill.is-active {
    background: var(--bq-brand-tint, #E6EBFF) !important;
    border-color: var(--bq-brand, #3A59EF) !important;
}

.buyaca-app .bq-catpill.is-active .bq-catpill-icon,
.buyaca-app .bq-catpill.is-active .bq-catpill-ph,
.buyaca-app .bq-catpill.is-active .bq-catpill-name {
    color: var(--bq-brand-text, #2E45C4) !important;
}

.buyaca-app .bq-catmodal-tab,
.buyaca-app .bq-catchip {
    text-align: center !important;
}

/* ── Modal de ubicaciones ── */
.bq-loc-modal__card {
    background: var(--bq-surface, #fff) !important;
    border-radius: 18px !important;
}

.bq-loc-modal__title {
    font-family: var(--bq-font-display, inherit) !important;
    color: var(--bq-text, #14151A) !important;
}

.bq-loc-modal__item:hover {
    background: var(--bq-brand-tint, #E6EBFF) !important;
    color: var(--bq-brand-text, #2E45C4) !important;
}

@media (prefers-reduced-motion: reduce) {
    .buyaca-app .bq-profile-card {
        transition-duration: 0ms !important;
    }
}