/* ════════════════════════════════════════════════════════════════════════
 *  BUYACA Pro — Social/Pro Redesign v1
 *  ───────────────────────────────────────────────────────────────────────
 *  Overrides puntuales acordados con el dueño del producto sobre un mockup
 *  aprobado. Se cargan vía wp_footer prioridad 1800 (después de
 *  Header_Filters_Final=1700 y de todo lo que imprime en wp_head), por lo
 *  que ganan la cascada por ORDEN además de por especificidad — no dependen
 *  de adivinar la prioridad correcta en cada archivo legacy.
 *
 *  Alcance: header (transparente, sin fondo propio — logo/lupa/campana
 *  flotan), bandeja de filtros (con su propio fondo, separada del header),
 *  botón de notificaciones + panel, carrusel destacado (panel de info
 *  reestructurado y adaptable al tema), botón "Ver todas las categorías"
 *  + tiles verticales de categoría, grid de productos de la Vitrina (grid
 *  original, imagen 2:1 + corazón de favorito), y la página /favoritos
 *  (secciones separadas de productos/negocios).
 * ════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Isotipo junto al wordmark "BUY ACÁ" ─────────────────────────────── */
.buyaca-app .bq-header-logo-wrap {
    gap: 7px !important;
}

/* [Fix] El texto del logo no contrastaba. Causa real: frontend.css:1676-1684
   fuerza color:#fff con un selector que incluye el ID #bq-brand-topbar
   (Locales) — un ID pesa más que cualquier cantidad de clases, así que le
   ganaba a la regla de clases de abajo SIN IMPORTAR el orden de carga. Se
   repite acá el mismo selector CON el ID para igualar esa especificidad. */
html body .buyaca-app .bq-wordmark,
html body .buyaca-app .bq-wordmark-1,
html .buyaca-app .bq-app-header#bq-brand-topbar .bq-wordmark,
html .buyaca-app .bq-app-header#bq-brand-topbar .bq-wordmark-1,
html .buyaca-app .bq-app-header.bq-products-header .bq-wordmark,
html .buyaca-app .bq-app-header.bq-products-header .bq-wordmark-1 {
    color: var(--bq-text, #14151A) !important;
    -webkit-text-fill-color: var(--bq-text, #14151A) !important;
}

.bq-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: linear-gradient(155deg, #4A67F5, var(--bq-brand-dark, #344FD9));

    flex-shrink: 0;
}

.bq-brand-mark svg {
    display: block;
}

/* ── 1b · Botón de notificaciones (reemplaza a "Me interesa", purgado) ───── */
.buyaca-app .bq-header-notif-btn {
    grid-area: bqhdr-interest !important;
    /* mismo slot del grid que ocupaba el botón viejo */
    justify-self: end !important;
    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;

    position: relative !important;
}

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

.buyaca-app .bq-notif-nav-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    background: var(--bq-brand, #3A59EF);
    color: #fff;
    font-size: 9px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    padding: 0 3px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--bq-surface, #fff);
}

/* ── 1c · Panel desplegable de notificaciones ─────────────────────────────  */
/* [Fix] .bq-notif-panel y [hidden] tienen la MISMA especificidad (0,0,1,0
   cada uno) — sin esta regla, "display:flex" de abajo le ganaba al
   "display:none" del atributo [hidden] por venir después en el archivo,
   y por eso apagar/cerrar con panel.hidden=true NUNCA se veía (JS
   correcto, CSS lo tapaba). */
.bq-notif-panel[hidden] {
    display: none !important;
}

.bq-notif-panel {
    position: fixed;
    z-index: 100000;
    width: min(360px, calc(100vw - 24px));
    max-height: min(70vh, 480px);
    display: flex;
    flex-direction: column;
    background: var(--bq-surface, #fff);
    color: var(--bq-text, #14151A);
    border: 1px solid var(--bq-line, #E7E8EC);
    border-radius: 16px;

    overflow: hidden;
}

.bq-notif-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid var(--bq-line, #E7E8EC);
    font-family: var(--bq-font-display, inherit);
    gap: 8px;
}

.bq-notif-panel-head b {
    font-size: 14px;
    flex-shrink: 0;
}

.bq-notif-panel-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.bq-notif-markall,
.bq-notif-clearall {
    background: none;
    border: none;
    color: var(--bq-brand-text, #2E45C4);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    padding: 4px;
    white-space: nowrap;
}

.bq-notif-clearall {
    color: var(--bq-ink-soft, #5B5F6B);
}

.bq-notif-list {
    overflow-y: auto;
    padding: 4px;
}

/* [Rediseño] Ítem simple: título + descripción corta y ya — sin fecha, sin
   estado "leída" (todo lo que queda en la lista es, por definición, no
   leído: leer = eliminar la fila). */
.bq-notif-item {
    display: flex;
    align-items: center;
    gap: 6px;
    border-radius: 10px;
}

.bq-notif-item:hover {
    background: var(--bq-brand-tint, #E6EBFF);
}

.bq-notif-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 4px 10px 10px;
    cursor: pointer;
}

.bq-notif-item-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--bq-text, #14151A);
}

.bq-notif-item-msg {
    font-size: 12px;
    color: var(--bq-ink-soft, #5B5F6B);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bq-notif-item-close {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    margin-right: 6px;
    border: none;
    background: none;
    color: var(--bq-ink-faint, #9A9DA6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.bq-notif-item-close:hover {
    background: var(--bq-line, #E7E8EC);
    color: var(--bq-text, #14151A);
}

.bq-notif-empty {
    padding: 24px 12px;
    text-align: center;
    font-size: 12.5px;
    color: var(--bq-ink-soft, #5B5F6B);
}

/* ── 1d · Modal de detalle de notificación ────────────────────────────── */
.bq-notif-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 100010;
    background: rgba(15, 16, 20, .5);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.bq-notif-modal-backdrop[hidden] {
    display: none !important;
}

.bq-notif-modal {
    position: relative;
    width: min(420px, 100%);
    max-height: 85vh;
    overflow-y: auto;
    background: var(--bq-surface, #fff);
    color: var(--bq-text, #14151A);
    border-radius: 18px;

    padding: 26px 24px 22px;
}

.bq-notif-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    border: none;
    background: var(--bq-bg, #F5F6F8);
    color: var(--bq-ink-soft, #5B5F6B);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.bq-notif-modal-close:hover {
    color: var(--bq-text, #14151A);
}

.bq-notif-modal-img {
    display: block;
    width: 100%;
    max-height: 200px;
    object-fit: cover;
    border-radius: 12px;
    margin-bottom: 16px;
}

.bq-notif-modal-title {
    font-size: 17px;
    font-weight: 800;
    margin: 0 32px 8px 0;
}

.bq-notif-modal-msg {
    font-size: 14px;
    line-height: 1.55;
    color: var(--bq-ink-soft, #5B5F6B);
    margin: 0 0 20px;
    white-space: pre-wrap;
}

.bq-notif-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bq-notif-modal-link {
    display: block;
    text-align: center;
    background: var(--bq-brand, #3A59EF);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 12px;
    border-radius: 10px;
    text-decoration: none;
}

.bq-notif-modal-read {
    background: none;
    border: 1px solid var(--bq-line-strong, #DEDFE4);
    color: var(--bq-ink-soft, #5B5F6B);
    font-weight: 600;
    font-size: 13px;
    padding: 11px;
    border-radius: 10px;
    cursor: pointer;
}

.bq-notif-modal-read:hover {
    border-color: var(--bq-brand, #3A59EF);
    color: var(--bq-brand, #3A59EF);
}

/* ── 1d · Header: SIN fondo propio (logo, lupa, campana quedan flotando) ── */
/* [Corrección] Lo que se pedía purgar era ESTO, no la bandeja de filtros
   (sección 5, ya restaurada). Neutraliza el fondo propio de .bq-app-header
   (home-products-v2.css, var(--bq-page-bg)), repitiendo selectores por tema
   con !important para ganar por especificidad/orden de carga.
   [Fix] En Locales seguía oscuro: frontend.css:1605-1621 fija background
   #141d24/#0a0a0a con un selector que incluye el ID #bq-brand-topbar — un ID
   pesa más que cualquier cantidad de clases, así que ganaba pase lo que
   pase con el orden de carga. Hay que repetir el MISMO selector con ID acá
   para empatar esa especificidad (recién ahí "quién carga después" decide).
   [Purga] Se retiró la regla hermana que neutralizaba .bq-header-backdrop
   (y la sección "1e" que le seguía) — ese elemento tiene
   "display:none!important" permanente en frontend.css, nunca se pinta. */
.buyaca-app .bq-app-header,
html.bq-page-light body .buyaca-app .bq-app-header,
html.bq-page-dark body .buyaca-app .bq-app-header,
html .buyaca-app .bq-app-header#bq-brand-topbar,
html .buyaca-app .bq-app-header.bq-products-header,
html .bq-app-header#bq-brand-topbar,
html .bq-app-header.bq-products-header,
html .buyaca-app:not(.bq-light-mode) .bq-app-header#bq-brand-topbar,
html.bq-page-dark .bq-app-header#bq-brand-topbar {
    background: transparent !important;
    border-bottom: none !important;
}

/* [Fix reportado — causa real encontrada en el bundle en vivo] .bq-header-
   backdrop tiene "display:none !important" en frontend.css (línea ~1532,
   de otra ronda de cambios) — NUNCA se pinta, así que TODO lo de arriba
   (y mis intentos anteriores) le pintaban el fondo a un elemento fantasma.
   El fondo real que se ve es el de .bq-app-header MISMO, que la sección
   1d de arriba (línea 271) deja "transparent !important" a propósito
   (diseño viejo: "logo/lupa/campana quedan flotando"). Se repite acá el
   MISMO selector con la misma especificidad que 1d para ganar por orden
   de carga (esta regla va después). */
html.bq-page-light body .buyaca-app .bq-app-header,
html.bq-page-light body .buyaca-app .bq-products-header,
body .buyaca-app.bq-light-mode .bq-app-header {
    background: #ffffff !important;
}

/* ── 1f · Header: quitar la sombra de "tap" nativa del navegador ──────────
   [Pedido] "al momento de hacer clic en el botón de menú del header no
   aparezca esa sombra... sino un contorno del mismo color principal, o el
   fondo tenue de selección con el mismo color principal". La "sombra" es
   el resaltado táctil que Chrome/Safari móvil agregan por defecto a
   cualquier elemento clicable (-webkit-tap-highlight-color, gris/negro
   translúcido) — ningún CSS del proyecto lo desactivaba para estos
   botones. Se anula y se reemplaza por un fondo tenue con el color
   principal de marca al presionar/enfocar. */
.buyaca-app .bq-home-filter-pill,
.buyaca-app .bq-filter-select-wrap,
.buyaca-app .bq-header-search-toggle,
.buyaca-app .bq-header-notif-btn {
    -webkit-tap-highlight-color: transparent;
}

.buyaca-app .bq-home-filter-pill:active,
.buyaca-app .bq-home-filter-pill:focus-visible,
.buyaca-app .bq-filter-select-wrap:active,
.buyaca-app .bq-filter-select-wrap:focus-within,
.buyaca-app .bq-header-search-toggle:active,
.buyaca-app .bq-header-search-toggle:focus-visible,
.buyaca-app .bq-header-notif-btn:active,
.buyaca-app .bq-header-notif-btn:focus-visible {
    outline: none !important;
    box-shadow: none !important;
    background: var(--bq-primary-light, rgba(58, 89, 239, 0.12)) !important;
}

/* ── 2 · Header: radio inferior más suave (ambos temas) ──────────────────── */
html.bq-page-light body .buyaca-app .bq-app-header,
html.bq-page-light body .buyaca-app #bq-brand-topbar,
html.bq-page-light body .buyaca-app #bq-products-topbar,
body .buyaca-app.bq-light-mode .bq-app-header,
html.bq-page-dark body .buyaca-app .bq-app-header,
html.bq-page-dark body .buyaca-app #bq-brand-topbar,
html.bq-page-dark body .buyaca-app #bq-products-topbar,
body .buyaca-app:not(.bq-light-mode):not([class*="bq-light"]) .bq-app-header {
    border-radius: 0 0 18px 18px !important;
}

/* ── 3 · Contraste de pills inactivos (modo claro) ───────────────────────── */
/* --bq-tab-ink es la variable que consume la regla "1 · INACTIVAS" de
   header-filters-menu-brand-v1100.css; el valor de origen (#d4d4d4) roza no
   pasar WCAG AA sobre fondo blanco. La redefinimos con el token ya validado
   del design system en vez de tocar esa regla directamente. */
html.bq-page-light body .buyaca-app .bq-app-header,
html.bq-page-light body .buyaca-app #bq-brand-topbar,
html.bq-page-light body .buyaca-app #bq-products-topbar,
body .buyaca-app.bq-light-mode .bq-app-header {
    --bq-tab-ink: var(--bq-ink-soft, #5B5F6B) !important;
}

/* ── 4 · Pill activo "Todos": relleno sólido, SIN sombra ─────────────────── */
html body .buyaca-app .bq-app-header .bq-home-filter-pill.active,
html body .buyaca-app .bq-products-header .bq-home-filter-pill.active {
    background: var(--bq-brand, #3A59EF) !important;
    color: #fff !important;
    border-radius: 10px !important;

}

html body .buyaca-app .bq-app-header .bq-home-filter-pill.active::before,
html body .buyaca-app .bq-products-header .bq-home-filter-pill.active::before {
    display: none !important;
}

html body .buyaca-app .bq-app-header .bq-home-filter-pill.active svg:not([fill="none"]) *,
html body .buyaca-app .bq-products-header .bq-home-filter-pill.active svg:not([fill="none"]) * {
    fill: #fff !important;
}

/* ── 5 · Bandeja de filtros: mantiene su fondo propio ────────────────────── */
/* [Corrección] Ronda anterior lo había purgado por un malentendido — el
   pedido real era eliminar el fondo del HEADER (logo/lupa/campana, ver
   sección 1d), no el de esta bandeja. Se restaura tal cual estaba: fondo
   --bq-surface (se adapta solo a claro/oscuro), separada del header. */
.buyaca-app .bq-header-chips-wrap {
    background: var(--bq-surface, #fff) !important;
    border: 1px solid var(--bq-line, #E7E8EC);
    border-radius: 16px;
    margin: 5px 0 0;
}

/* ── 6 · Badge "Anuncio" del carrusel: REVERTIDO a su estilo original ────── */
/* [Corrección] Se había repintado a pill azul arriba-izquierda; se pidió
   volver a como estaba (rectángulo oscuro arriba-derecha, esquina cortada,
   ver ui-badges-v105.css). Sin reglas acá, esa hoja vuelve a ganar sola. */

/* [Purga] Sección "6a" (panel de info reestructurado del carrusel Temu
   viejo: .bq-temu-prod-card/.bq-temu-biz-card y todos sus sub-elementos)
   retirada — reemplazada por el rediseño tipo hero-slide (bq-ad-hero-*,
   ver assets/css/patches/admin-catalog-list-v1.css). Ninguna de estas
   clases sigue en el HTML de templates/home.php / templates/products-home.php. */

/* ── 6b · Todas las etiquetas de estado, un solo color (principal) ───────── */
/* Antes cada estado (vendido/agotado/preventa/apartar/reservado/o una
   etiqueta personalizada) tenía un color propio, asignado inline vía Alpine
   (:style="'background:'+{...}"). Se pidió que CUALQUIER etiqueta de la
   ventana principal (Locales o Vitrina) salga del mismo color de marca.
   Un !important en hoja externa SÍ le gana a un style="" inline no marcado
   important — es como estas etiquetas reciben su color hoy — por eso alcanza
   con una sola regla, sin tocar el Alpine que las genera. Cubre a la vez el
   grid de productos (.bq-pc) y ambos carruseles (Locales y Vitrina, que
   comparten esta misma clase). */
.buyaca-app .bq-product-status-badge {
    background: var(--bq-brand, #3A59EF) !important;
}

/* [Purga] Sección "6c" (corazón de favorito y etiqueta de producto del
   carrusel Temu viejo, .bq-temu-fav-heart/.bq-temu-prod-label-*) retirada
   — el nuevo hero-slide no tiene favoritos ni etiquetas (son piezas
   publicitarias libres, no negocios/productos reales). Sin referencias en
   ningún template. */

/* ── 7 · Más aire entre la bandeja de filtros y el carrusel de anuncios ── */
/* [Corrección] El margin-top que había puesto acá (40→54→72px) se
   SUMABA al padding-top:90px que ya trae ui-refinements-v8812.css
   (.bq-banner-section, sección "1 · Banner tono rosa refinado") —
   quedaba un espacio de ~160px+, el doble de lo pedido. Se retira: el
   espaciado real lo controla esa regla de padding, que el usuario
   confirmó directamente viendo el bundle en DevTools. */

/* [Pedido] "al momento de cargar la página aparece en la parte del header
   rosa" — no era un flash/bug de render, era un fondo intencional pero ya
   no deseado: ui-refinements-v8811.css §3 ("BANNER · FONDO ROSA QUE
   ARMONIZA CON EL HEADER") y ui-refinements-v8812.css §1 pintan
   .bq-banner-section (el carrusel de anuncios, pegado justo debajo del
   header) con un degradado rosa pastel (#FFE7F1→#FFF7FB) en modo claro, y
   un degradado oscuro con tinte rosado (#1a1015) en modo oscuro. Se
   neutraliza acá, en la última hoja del bundle, a los mismos tokens de
   fondo neutro que usa el resto del sitio. */
html.bq-page-light body .buyaca-app .bq-banner-section,
html.bq-page-light body .buyaca-app .bq-app-header+.bq-banner-section,
html.bq-page-light body .buyaca-app .bq-app-header.bq-products-header+.bq-banner-section,
html.bq-page-light body .buyaca-app .bq-app-header.bq-products-header~.bq-banner-section,
html.bq-page-light body .buyaca-app #bq-products-topbar+.bq-banner-section,
html.bq-page-light body .buyaca-app #bq-products-topbar~.bq-banner-section,
html.bq-page-light body .buyaca-app #bq-brand-topbar+.bq-banner-section,
html.bq-page-light body .buyaca-app #bq-brand-topbar~.bq-banner-section,
body .buyaca-app.bq-light-mode .bq-banner-section {
    /* [Pedido] "quiero que el fondo de todo sea color #ffffff" */
    background: #ffffff !important;
}

html.bq-page-dark body .buyaca-app .bq-banner-section,
html.bq-page-dark body .buyaca-app #bq-products-topbar+.bq-banner-section,
html.bq-page-dark body .buyaca-app #bq-products-topbar~.bq-banner-section,
body .buyaca-app:not(.bq-light-mode):not([class*="bq-light"]) .bq-banner-section {
    background: var(--bq-bg, #0d0d0f) !important;
}

/* ── 8 · "Ver todas las categorías" — botón inyectado sobre .bq-catcarrusel */
/* (el modal en sí reutiliza las clases .bq-catmodal-* que ya existen en
   colab-cats.css — ver assets/js/patches/social-redesign-v1.js) */
.bq-catcarrusel {
    position: relative;
}

.bq-catcarrusel-viewall {
    position: absolute;
    top: 2px;
    right: 2px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    padding: 4px 2px;
    font-family: var(--bq-font-body, inherit);
    font-size: 12.5px;
    font-weight: 700;
    color: var(--bq-brand-text, #2E45C4);
    cursor: pointer;
}

/* ── 8b · "Categorías": tile vertical — ícono ARRIBA, nombre ABAJO ───────── */
/* [Rediseño] De pill horizontal (ícono + texto en línea, con borde/fondo) a
   tile vertical minimalista: círculo delgado con el ícono, nombre chico
   debajo, sin pill visible alrededor — el estilo "categoría de app" tipo
   Amazon/Shein en vez de "botón de filtro". */
.buyaca-app .bq-catpill {
    display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 6px !important;
    flex: 0 0 auto !important;
    white-space: normal !important;
    width: 62px !important;
    padding: 2px 2px 0 !important;
    border-radius: 12px !important;
    border: none !important;
    background: transparent !important;

}

.buyaca-app .bq-catpill:hover {
    background: transparent !important;
}

.buyaca-app .bq-catpill-icon {
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 1px solid var(--bq-line, #E7E8EC) !important;
    background: var(--bq-surface, #fff) !important;
    color: var(--bq-ink-soft, #5B5F6B) !important;
    flex-shrink: 0 !important;
}

/* [Límite honesto] Estos íconos son Font Awesome 6 FREE ("fa-solid", ver
   class-buyaca-colab-cats.php::enqueue_fa()). FA Free solo trae "regular"
   (más delgado) para una fracción de sus íconos — cambiar la clase de
   fa-solid a fa-regular por CSS no es posible (son glifos distintos de
   fuentes distintas) y hacerlo vía JS arriesga íconos en blanco para
   cualquier categoría cuyo ícono elegido no tenga versión "regular" en el
   tier gratuito. Se optó por lo seguro: chico + opacidad reducida, que a
   este tamaño lee visualmente "delgado". Si de verdad quieres el peso
   "regular"/"light" real (sin riesgo de íconos rotos), la vía correcta es
   armar un set propio de SVG de línea fina — como el resto de íconos del
   sitio — mapeado por categoría; puedo construirlo si me confirmas que
   quieres ir por ahí. */
.buyaca-app .bq-catpill-icon svg,
.buyaca-app .bq-catpill-icon i {
    width: 14px !important;
    height: 14px !important;
    font-size: 13px !important;
    opacity: .78;
}

.buyaca-app .bq-catpill-name {
    font-size: 10.5px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.buyaca-app .bq-catpill.is-active {
    background: transparent !important;
}

.buyaca-app .bq-catpill.is-active .bq-catpill-icon {
    background: var(--bq-brand-tint, #E6EBFF) !important;
    border-color: var(--bq-brand, #3A59EF) !important;
}

/* ── 9 · Imagen de la tarjeta de producto: menos alta, no cuadrada ───────── */
/* [Rev.] El Masonry (CSS columns) se probó y se pidió revertir — el grid
   (.bq-pgrid) vuelve a ser el original de frontend.css (grid parejo,
   2/3/4/5/6 columnas según breakpoint), sin ningún override acá.
   Lo único que cambia es la proporción de la foto: de cuadrada
   (aspect-ratio:1, height:160px fijo) a 2:1 — la mitad de alto que de
   ancho — escalando con el ancho real de cada columna en vez de un alto
   fijo en píxeles. */
.buyaca-app .bq-pc-iw {
    aspect-ratio: 2 / 1;
    height: auto;
}

/* ── 9b · Reorganización del cuerpo de la tarjeta de producto (Vitrina) ──── */
/* Orden pedido: título → precio → reseñas + ubicación (se quita la
   descripción, que no formaba parte del orden solicitado, para mantener
   la tarjeta compacta estilo Pinterest). El título pasa a una letra
   delgada (antes font-weight:600 en frontend.css línea ~1351). */
.buyaca-app .bq-pc-name {
    font-weight: 400 !important;
}

.buyaca-app .bq-pc-desc {
    display: none !important;
}

.buyaca-app .bq-pc-meta-row {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    margin-top: 2px;
    min-width: 0;
}

.buyaca-app .bq-pc-meta-row .bq-pc-loc {
    flex-shrink: 1;
    min-width: 0;
    text-align: right;
}

.buyaca-app .bq-pc-meta-row .bq-pc-rating {
    flex-shrink: 0;
}

/* ── 10 · Corazón de favorito: MISMO diseño en TODAS las tarjetas ────────── */
/* [Favoritos v5] "Todo" tenía en realidad 4 corazones distintos: grilla
   Vitrina (.bq-pc-fav), grilla Locales (.bq-profile-card-heart), ambos
   carruseles de anuncios (.bq-temu-fav-heart) — y uno que se había quedado
   atrás, .buyaca-card-favorite-btn (business-card.php: resultados de
   búsqueda Y las tarjetas de la propia ventana emergente de favoritos),
   que seguía con el círculo blanco de fondo de la versión vieja. Se unifica
   acá el LOOK de las 4 en un solo bloque — sin chapa de fondo, solo el
   ícono con drop-shadow para contraste, azul de marca cuando está activo.
   La posición/tamaño (arriba-derecha en la grilla, arriba-izquierda en
   anuncios, etc.) es propia de cada contexto y se declara aparte, donde
   siempre vivió cada clase (§6c, §10 más abajo). */
.buyaca-app .bq-pc-fav,
.buyaca-app .bq-profile-card-heart,
.buyaca-app .bq-temu-fav-heart,
.buyaca-app .buyaca-card-favorite-btn {
    background: none !important;

    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    color: #fff !important;

}

.buyaca-app .bq-pc-fav:hover,
.buyaca-app .bq-profile-card-heart:hover,
.buyaca-app .bq-temu-fav-heart:hover,
.buyaca-app .buyaca-card-favorite-btn:hover {
    background: none !important;
    transform: scale(1.08);
}

.buyaca-app .bq-pc-fav.is-fav,
.buyaca-app .bq-profile-card-heart.active,
.buyaca-app .bq-temu-fav-heart.is-fav,
.buyaca-app .buyaca-card-favorite-btn.active {
    background: none !important;
    color: var(--bq-brand, #3A59EF) !important;
}

.buyaca-app .bq-profile-card-heart.active svg,
.buyaca-app .buyaca-card-favorite-btn.active svg {
    fill: var(--bq-brand, #3A59EF) !important;
}

/* Posición/tamaño de la grilla Vitrina (no forma parte del "look" compartido) */
.buyaca-app .bq-pc-fav {
    position: absolute;
    top: 0px;
    right: 4px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
}

.buyaca-app .bq-pc-fav svg {
    width: 17px;
    height: 17px;
}

/* [Pedido] "el contador de favoritos... más útil y mejor ubicado y más
   profesional" — insignia numérica sobre el propio corazón (mismo patrón
   que un contador de notificaciones), en vez de agregar texto suelto que
   deforme el círculo del botón. Solo aparece cuando hay al menos 1
   favorito (x-show="p.fav_count > 0" en la plantilla) — no ensucia la
   tarjeta con "0" en productos nuevos. */
.buyaca-app .bq-pc-fav-count {
    position: absolute;
    bottom: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 999px;
    background: #fff;
    color: var(--bq-brand, #3A59EF);
    font-size: 9.5px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 1.5px solid rgba(0, 0, 0, .06);
}

.buyaca-app .bq-pc-fav.is-fav .bq-pc-fav-count {
    background: var(--bq-brand, #3A59EF);
    color: #fff;
    border-color: var(--bq-brand, #3A59EF);
}

/* ── 10c · Tarjeta de Locales: descripción a 1 línea real ────────────────── */
/* .bq-profile-card-desc no tenía NINGUNA regla de recorte en frontend.css —
   era un <p> normal que envolvía a 2-3 líneas según el largo del texto. Se
   pidió una sola línea real (no "depende de si es corto"). El nombre ya se
   trunca a 10 caracteres desde el propio x-text en home.php; :title agrega
   el nombre completo como tooltip nativo.
   [Rev.] Se agregó y luego se QUITÓ una línea "Horario: …" acá — pedido
   explícito de revertirla; no se dejó ningún rastro (ni el <p> en home.php
   ni el cálculo de biz._todaySchedule en calcStatus()). */
.buyaca-app .bq-profile-card-desc {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    max-width: 100%;
}

/* ── 10d · Tarjeta de Locales: rediseño compacto/moderno ─────────────────── */
/* [Pedido] "que no ocupe tantos espacios... espacios en blanco... mucho más
   moderna, profesional, minimalista y limpia". frontend.css acumula varias
   capas (v8/v9/v10/v11/v12) sobre este componente; en vez de perseguir una
   por una, se redeclaran acá las propiedades que de verdad generan el aire
   sobrante, con !important, para que esta hoja (la última en cargar) gane
   sin ambigüedad:
   1) El banner era CUADRADO (aspect-ratio:1) — la foto por sí sola ya
      ocupaba más de la mitad del alto de la tarjeta. Se pasa a una
      proporción de "card moderna" (16:10), bastante más baja.
   2) .bq-profile-card-meta tenía position:absolute (un hack viejo para
      flotar junto al logo) — se regresa al flujo normal, debajo del
      nombre, para que no se superponga con nada.
   3) El padding/gap del cuerpo se ajusta más apretado.
   4) El footer tenía margin-top:auto + border-top: en una grilla de
      tarjetas con igual alto, ese auto-margin es justo lo que deja un
      "hueco" elástico en el medio de las tarjetas con menos contenido.
      Se cambia a un margen fijo y chico — el contenido queda agrupado
      arriba en vez de estirado, que es lo que se percibía como "espacio
      en blanco". */
.buyaca-app .bq-profile-card-banner {
    aspect-ratio: 16 / 10 !important;
}

.buyaca-app .bq-profile-card-meta {
    position: static !important;
    top: auto !important;
    left: auto !important;
    margin: 4px 0 0 !important;
    gap: 5px !important;
}

.buyaca-app .bq-profile-card-body {
    padding: 10px 12px 12px !important;
    gap: 5px !important;
}

.buyaca-app .bq-profile-card-name {
    margin: 0 !important;
}

.buyaca-app .bq-profile-card-desc {
    margin: 0 !important;
}

.buyaca-app .bq-profile-card-footer {
    margin-top: 4px !important;
    padding-top: 0 !important;
    border-top: none !important;
}

/* ── 11 · Página /favoritos: pestañas Productos / Negocios favoritos ────── */
/* [v3] Antes eran dos secciones apiladas (siempre ambas visibles); ahora son
   pestañas — solo una sección a la vez, con contador de cuántos hay. */
.bq-fav-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--bq-line, #E7E8EC);
}

.bq-fav-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    padding: 10px 4px 12px;
    margin-right: 14px;
    font-family: var(--bq-font-display, inherit);
    font-size: 14px;
    font-weight: 700;
    color: var(--bq-ink-soft, #5B5F6B);
    cursor: pointer;
    border-bottom: 2.5px solid transparent;
    margin-bottom: -1px;
}

.bq-fav-tab.is-active {
    color: var(--bq-brand-text, #2E45C4);
    border-bottom-color: var(--bq-brand, #3A59EF);
}

.bq-fav-tab-count {
    /* [Fix] Era un <span> inline sin display propio: el padding/border-radius
       no alcanzaban a formar una insignia real (se veía aplastada, sin
       centrar). inline-flex + min-width igual a la altura la vuelve un
       círculo/píldora consistente sin importar si el número es 1 o 2 dígitos. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    line-height: 1;
    font-size: 11px;
    font-weight: 700;
    color: var(--bq-ink-soft, #5B5F6B);
    background: var(--bq-line, #E7E8EC);
    border-radius: 999px;
    padding: 0 6px;
    box-sizing: border-box;
}

.bq-fav-tab.is-active .bq-fav-tab-count {
    color: #fff;
    background: var(--bq-brand, #3A59EF);
}

.bq-fav-section {
    margin-bottom: 28px;
}

/* ════════════════════════════════════════════════════════════════════════
 *  [Pedido] "vista lista... con un límite de diez favoritos, tendrá
 *  paginación... quiero que todo aparezca más pequeño". .bq-fav-list
 *  reemplaza la grilla (.buyaca-grid.buyaca-grid-4) SOLO en esta página —
 *  las tarjetas (.buyaca-business-card) son el mismo componente
 *  compartido que usan otras páginas (ej. resultados de búsqueda), así
 *  que se reacomodan/achican por CSS scopeado a .bq-fav-list, sin tocar
 *  su HTML ni su estilo de grilla en ningún otro lugar del sitio.
 * ════════════════════════════════════════════════════════════════════════ */
.bq-fav-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.bq-fav-list .buyaca-business-card-link {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.bq-fav-list .buyaca-business-card-image {
    flex: 0 0 52px !important;
    width: 52px !important;
    height: 52px !important;
    border-radius: 9px !important;
}

.bq-fav-list .buyaca-card-favorite-btn {
    width: 20px !important;
    height: 20px !important;
    top: 5px !important;
    right: 5px !important;
}

.bq-fav-list .buyaca-card-favorite-btn svg {
    width: 11px !important;
    height: 11px !important;
}

.bq-fav-list .buyaca-verified-badge {
    display: none !important;
}

.bq-fav-list .buyaca-business-card-body {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 0 !important;
}

.bq-fav-list .buyaca-business-card-category {
    font-size: 9.5px !important;
    margin-bottom: 1px !important;
}

.bq-fav-list .buyaca-business-card-title {
    font-size: 12.5px !important;
    margin: 0 0 1px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Descripción y barrio ocupan demasiado alto en una fila chica — el
   nombre + ubicación + reseña ya alcanzan para identificar la tarjeta. */
.bq-fav-list .buyaca-business-card-description,
.bq-fav-list .buyaca-card-barrio {
    display: none !important;
}

.bq-fav-list .buyaca-card-address {
    font-size: 10px !important;
    margin: 0 0 1px !important;
}

.bq-fav-list .buyaca-business-card-footer {
    margin-top: 1px !important;
}

.bq-fav-list .buyaca-business-card-rating {
    font-size: 10.5px !important;
}

.bq-fav-list .buyaca-business-card-rating svg {
    width: 10px !important;
    height: 10px !important;
}

/* Paginación (10 por página) — controles simples de Anterior/Siguiente,
   chicos y discretos. */
.bq-fav-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 12px;
}

.bq-fav-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid var(--bq-line, #E7E8EC);
    background: var(--bq-surface, #fff);
    color: var(--bq-text, #14151A);
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease;
}

.bq-fav-page-btn:hover:not(:disabled) {
    border-color: var(--bq-brand, #3A59EF);
    color: var(--bq-brand, #3A59EF);
}

.bq-fav-page-btn:disabled {
    opacity: .35;
    cursor: default;
}

.bq-fav-page-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--bq-ink-soft, #5B5F6B);
}

.buyaca-empty-sm {
    padding: 20px 14px;
    text-align: center;
    background: var(--bq-surface, #fff);
    border: 1px solid var(--bq-line, #E7E8EC);
    border-radius: 14px;
}

.buyaca-empty-sm .buyaca-empty-text {
    font-size: 12.5px;
    color: var(--bq-ink-soft, #5B5F6B);
    margin: 0;
}

.buyaca-empty-sm .buyaca-empty-icon {
    margin-bottom: 8px;
}

/* ── 12 · "Ver más productos": link subrayado en vez de botón-píldora ────── */
.buyaca-app .bq-load-more-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    height: auto !important;
    min-width: 0 !important;
    padding: 4px 2px !important;
    border: none !important;
    border-radius: 0 !important;
    background: none !important;
    color: var(--bq-brand-text, #2E45C4) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;

}

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

/* ── 13 · Ventana emergente de Favoritos ──────────────────────────────────── */
/* [Favoritos v4] Se abre al marcar/desmarcar CUALQUIER corazón (producto o
   negocio, grilla o carrusel de anuncios) y al tocar "Favoritos" en el nav
   inferior — ver BUYACA.Favorites.openPopup() en frontend.js. Reutiliza el
   fragmento .bq-fav-tabs/.bq-fav-section pedido por AJAX, así que hereda
   sola toda la sección 11 de este archivo (pestañas, contador, tarjetas). */
#bq-fav-popup[hidden] {
    display: none !important;
}

/* [Pedido con captura] "me está apareciendo con otra tipografía" — la
   ventana de favoritos se crea con document.body.appendChild() (ver
   frontend.js _ensurePopup()), es decir, HERMANA de .buyaca-app, no
   descendiente. La tipografía del sitio se declara en .buyaca-app{
   font-family:var(--bq-font-family) } (frontend.css ~506) — al quedar
   fuera de ese elemento, nada la heredaba y el navegador usaba su fuente
   por defecto. Se fija acá, en el contenedor raíz de la ventana, para
   que TODO su contenido (tarjetas incluidas) herede la tipografía real
   del sitio sin tocar cada elemento por separado. */
#bq-fav-popup.bq-fav-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(10, 10, 15, .55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    font-family: var(--bq-font-family, 'DM Sans', sans-serif);
}

.bq-fav-popup {
    width: 100%;
    max-width: 640px;
    max-height: 82vh;
    background: var(--bq-surface, #fff);
    color: var(--bq-text, #14151A);
    border-radius: 20px 20px 0 0;
    display: flex;
    flex-direction: column;

    overflow: hidden;
}

@media (min-width: 640px) {
    #bq-fav-popup.bq-fav-popup-overlay {
        align-items: center;
        padding: 16px;
    }

    .bq-fav-popup {
        border-radius: 20px;
        max-height: 80vh;
    }
}

.bq-fav-popup-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    border-bottom: 1px solid var(--bq-line, #E7E8EC);
    flex-shrink: 0;
}

.bq-fav-popup-head b {
    font-family: var(--bq-font-display, inherit);
    font-size: 16px;
}

.bq-fav-popup-close {
    background: none;
    border: none;
    color: var(--bq-ink-soft, #5B5F6B);
    cursor: pointer;
    padding: 4px;
    display: flex;
}

.bq-fav-popup-close:hover {
    color: var(--bq-text, #14151A);
}

.bq-fav-popup-body {
    overflow-y: auto;
    padding: 14px 18px 20px;
}

/* Dentro de la ventana emergente el título "Mis Favoritos" ya está en el
   encabezado del modal (bq-fav-popup-head) — si el fragmento llegara a
   incluirlo de nuevo no aplica, hoy no lo incluye (ver
   render_favorites_body(), que empieza directo en las pestañas). */
.bq-fav-popup-body .bq-fav-tabs {
    margin-top: 0;
}

/* [Pedido con captura] Mismo motivo que la tipografía de arriba: al ser
   hermana de .buyaca-app, esta ventana tampoco veía las variables de
   modo claro (.buyaca-app.bq-light-mode redefine --bq-bg-card/--bq-text/
   etc. SOLO dentro de su propio árbol, frontend.css ~35-55) — si el sitio
   estaba en modo claro, las tarjetas de acá igual salían con los valores
   oscuros por defecto de :root. Se replican esos mismos valores acá,
   condicionados al mismo estado real del sitio (:has), para que la
   ventana siga siempre al tema activo. */
body:has(.buyaca-app.bq-light-mode) #bq-fav-popup {
    --bq-text: #1a1a1a;
    --bq-text-primary: #1a1a1a;
    --bq-text-secondary: #4b5563;
    --bq-bg: #f8f9fa;
    --bq-bg-secondary: #f3f4f6;
    --bq-bg-card: #ffffff;
    --bq-bg-elevated: #ffffff;
    --bq-bg-surface: #f9fafb;
    --bq-border: #e5e7eb;
    --bq-border-light: #f3f4f6;
    --bq-primary-light: #fff5f2;
}

/* [Pedido] "mejora el diseño de esas tarjetas, que no se vean tan
   saturadas" — .buyaca-business-card (templates/business-card.php) es un
   diseño más viejo y denso (categoría + título + dirección + barrio +
   descripción + footer, todo apilado) que el resto del sitio ya no usa en
   otros lados. Dentro de esta ventana se recorta a lo esencial: se quita
   el renglón de barrio (ya redundante con la dirección/ciudad de arriba)
   y la descripción larga, quedando una tarjeta limpia de imagen + nombre
   + categoría + dirección + rating. Cambio SOLO dentro de la ventana de
   favoritos — no afecta a .buyaca-business-card donde se use en otras
   partes del sitio. */
#bq-fav-popup .buyaca-card-barrio,
#bq-fav-popup .buyaca-business-card-description {
    display: none !important;
}

#bq-fav-popup .buyaca-business-card {
    border-radius: var(--bq-radius, 14px) !important;
    border-color: var(--bq-border) !important;
}

#bq-fav-popup .buyaca-business-card-body {
    padding: 12px !important;
}

#bq-fav-popup .buyaca-business-card-title {
    font-size: 14px !important;
    margin-bottom: 3px !important;
}

/* ── 13 · Tarjetas de "Productos y servicios cerca de ti" (.bq-pc) ───────
   [Pedido con capturas] "las tarjetas las veo muy separadas... que se
   está sobreponiendo la ubicación por encima de la ciudad" + "no dispo
   sobrepuesta al botón de favoritos" + "alinea el nombre con el precio".

   Causa real: cuando la foto pasó de cuadrada a 2:1 (§9 más arriba,
   .bq-pc-iw), nadie ajustó el contenedor .bq-pc — seguía con la altura
   fija vieja de frontend.css (height:160px, pensada para una foto
   cuadrada que ocupaba toda la tarjeta). Con la foto ahora más baja pero
   el cuerpo de texto (nombre/precio/reseña/ubicación) sumando su propio
   alto debajo, el total ya no entraba en esos 160px fijos — con
   overflow:hidden, el texto de abajo quedaba recortado/apretado contra
   el de arriba. Mismo defecto que ya se había corregido para las
   tarjetas de Locales (§10d) pero se quedó pendiente acá. Se aplica la
   misma solución: alto automático según el contenido real. ── */
.buyaca-app .bq-pc {
    height: auto !important;
    aspect-ratio: auto !important;
}

/* Espaciado del cuerpo: un solo criterio (el gap del contenedor), sin
   márgenes propios duplicados en cada hijo que sumaban espacios
   desparejos entre nombre/precio/ubicación. */
.buyaca-app .bq-pc-body {
    gap: 4px !important;
}

.buyaca-app .bq-pc-price,
.buyaca-app .bq-pc-name,
.buyaca-app .bq-pc-loc {
    margin: 0 !important;
}

/* Precio + tachado + "-X%": estaban alineados por línea base (baseline),
   que con la píldora de descuento (fondo + padding) se ve ligeramente
   corrida respecto al texto del precio. Centrado real. */
.buyaca-app .bq-pc-price-row {
    align-items: center !important;
}

/* Etiqueta personalizada (ej. "No dispo") arriba-izquierda de la foto:
   sin tope de ancho podía extenderse hasta pisar el corazón de favorito
   arriba-derecha (.bq-pc-fav, 30px + 7px de margen). Se limita el ancho
   disponible y cada chip individual trunca con "…" en vez de invadir esa
   esquina. */
.buyaca-app .bq-pc-iw .bq-product-status-badges {
    max-width: calc(100% - 44px) !important;
}

.buyaca-app .bq-pc-iw .bq-product-status-badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}