/* ════════════════════════════════════════════════════════════════════════
 *  BUYACÁ — Modal "Quick View" de la vitrina de productos v2 (Fase 5)
 *  ───────────────────────────────────────────────────────────────────────
 *  .bq-qv-modal (templates/products-home.php ~392-522) es un modal DISTINTO
 *  a #bq-catalog-modal (ya corregido en catalog-modal-v2.css) — vive en
 *  Alpine directamente en el PHP de la vitrina de productos, no se genera
 *  por JS. Mismo criterio: solo CSS (radios/tipografía/espaciado/tamaño de
 *  botón), cero cambios de Alpine/lógica.
 *
 *  Es contenido de MUCHOS negocios distintos a la vez (no una sola página
 *  de un negocio), así que usa los tokens de PLATAFORMA (--bq-brand), no
 *  el --bq-primary personalizable de un negocio — no hay "un" color de
 *  negocio válido aquí, cada tarjeta es de un negocio diferente.
 * ════════════════════════════════════════════════════════════════════════ */

.bq-qv-modal {
    background: var(--bq-surface, #fff) !important;
    border-radius: 18px !important;
    
}

/* [Pedido] "fondo oscuro transparente para que se aprecie mejor el ícono...
   elimina los bordes... solo el fondo, minimalista y bien estético" — Volver
   lleva un scrim oscuro semitransparente (sin borde) para que el ícono
   blanco siempre contraste, sin importar la foto de fondo. Compartir ya no
   flota sobre la galería — bajó a la cabecera de información (ver
   .bq-qv-share-inline). */
.bq-qv-float-btn {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    background: rgba(0,0,0,.32) !important;
    border: none !important;
    -webkit-backdrop-filter: blur(6px) !important;
    backdrop-filter: blur(6px) !important;
    color: #fff !important;
    filter: none;
}
/* [Fix reportado con captura] frontend.css forzaba svg{stroke:#333!important}
   sin importar el color heredado del botón — el ícono quedaba gris oscuro
   sobre el círculo oscuro, invisible. Esa regla ya se purgó de frontend.css;
   se fija aquí explícito (no solo currentColor heredado) para que ningún
   otro selector con más especificidad pueda repetir el problema. */
.bq-qv-float-btn svg { stroke: #fff !important; fill: none !important; color: #fff !important; }
.bq-qv-float-btn:hover { transform: scale(1.08); }
/* [Purga] .bq-qv-interest-float/.bq-qv-interest-active: sin botón "me interesa" en el HTML actual. */

/* Galería + dots */
.bq-qv-slide-img { background: var(--bq-page-bg, #FDFCFB) !important; }
.bq-qv-dot { background: var(--bq-line-strong, #DEDFE4) !important; }
.bq-qv-dot.active { background: var(--bq-brand, #3A59EF) !important; }

/* [Pedido] "el ícono [de compartir] se vea muy sutil y elegante" — botón
   fantasma, sin fondo ni borde propio, solo el ícono en tono apagado que se
   ilumina levemente al pasar el mouse/tocar. "Al lado del ícono de
   compartir esté el contador de favoritos... separado por línea vertical". */
.bq-qv-topinfo-actions {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    gap: 8px !important;
    margin: 1px 0 0 !important;
}
.bq-qv-share-inline {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    width: 26px !important;
    height: 26px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    border-radius: 50% !important;
    color: var(--bq-ink-faint, #9A9DA6) !important;
    cursor: pointer;
    transition: color .15s ease, background .15s ease, transform .15s ease;
}
.bq-qv-share-inline:hover {
    color: var(--bq-brand, #3A59EF) !important;
    background: rgba(58,89,239,.08) !important;
}
.bq-qv-share-inline.is-shared { color: var(--bq-brand, #3A59EF) !important; }
.bq-qv-topinfo-divider {
    width: 1px !important;
    height: 14px !important;
    flex: 0 0 auto !important;
    background: var(--bq-line, #E7E8EC) !important;
}
.buyaca-app:not(.bq-light-mode) .bq-qv-topinfo-divider { background: rgba(255,255,255,.14) !important; }
.bq-qv-fav-count {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    flex: 0 0 auto !important;
    color: var(--bq-ink-faint, #9A9DA6) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    white-space: nowrap;
}
.bq-qv-fav-count svg { flex: 0 0 auto !important; opacity: .75; }

/* [Pedido] "la fecha de publicación... encima del nombre... letra muy
   sutil y delgadita y pequeña". Sin ícono, texto simple y discreto. */
.bq-qv-date {
    color: var(--bq-ink-faint, #9A9DA6) !important;
    font-size: 11px !important;
}
.bq-qv-date-top {
    display: block !important;
    font-weight: 400 !important;
    letter-spacing: .01em;
    margin: 0 0 4px !important;
}

/* Rating (compartido con el otro modal, mismas clases) */
.bq-modal-rating-num { color: var(--bq-text, #14151A) !important; font-weight: 700 !important; }
.bq-modal-rating-cnt { color: var(--bq-ink-soft, #5B5F6B) !important; font-weight: 400 !important; }

/* Nombre + precio: mismo criterio que el otro modal — antes demasiado
   grandes, ahora una jerarquía contenida */
.bq-qv-name {
    font-family: var(--bq-font-display, inherit) !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    color: var(--bq-text, #14151A) !important;
    margin: 6px 0 4px !important;
}
.bq-qv-price {
    font-family: var(--bq-font-display, inherit) !important;
    font-size: 20px !important;
    font-weight: 700 !important;
    color: var(--bq-brand, #3A59EF) !important;
}
.bq-qv-price-regular { color: var(--bq-ink-faint, #9A9DA6) !important; font-size: 14px !important; }
/* [Fix reportado con captura] usaba var(--bq-text) de fondo — en modo
   oscuro ese token se vuelve casi blanco (pensado para TEXTO), y el pill
   quedaba blanco-sobre-blanco con el texto #fff encima. Fondo oscuro
   estable en ambos modos. */
.bq-qv-price-disc {
    background: #14151A !important;
    color: #fff !important;
    font-size: 11px !important;
    border-radius: 999px !important;
    padding: 2px 8px !important;
}

/* Tarjeta de descripción + tabla de atributos (mismas clases que el otro
   modal: .bq-qv-card/.bq-prod-attrs-*).
   [Fix reportado con captura] antes usaba var(--bq-page-bg) — en modo
   claro ese token (#FDFCFB) es casi idéntico al fondo del propio modal
   (var(--bq-surface) = #FFFFFF), así que la tarjeta prácticamente
   desaparecía contra su propio contenedor. Ahora un tono visiblemente
   distinto en ambos modos, y los títulos de sección en el color de marca
   en vez de gris apagado, para que se lean como encabezado. */
.bq-qv-card {
    background: #F3F4F6 !important;
    border: 1px solid var(--bq-line, #E7E8EC) !important;
    border-radius: 12px !important;
    
    padding: 12px 14px !important;
}
.buyaca-app:not(.bq-light-mode) .bq-qv-card {
    background: rgba(255,255,255,.05) !important;
    border-color: var(--bq-line, #2A2B30) !important;
}
.bq-qv-card-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--bq-brand, #3A59EF) !important;
}
.bq-qv-card-title svg { color: var(--bq-brand, #3A59EF) !important; stroke: var(--bq-brand, #3A59EF) !important; }
.bq-qv-desc { font-size: 13.5px !important; line-height: 1.5 !important; color: var(--bq-text, #14151A) !important; }
.bq-prod-attrs-title {
    color: var(--bq-brand, #3A59EF) !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: .03em;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}
.bq-prod-attrs-title svg { color: var(--bq-brand, #3A59EF) !important; stroke: var(--bq-brand, #3A59EF) !important; }
.bq-prod-attrs-row { border-color: var(--bq-line, #E7E8EC) !important; }
.bq-prod-attrs-key { color: var(--bq-ink-soft, #5B5F6B) !important; font-size: 12.5px !important; }
.bq-prod-attrs-val { color: var(--bq-text, #14151A) !important; font-size: 12.5px !important; font-weight: 600 !important; }

/* CTA fijo (WhatsApp/URL) — compacto, sin invadir la pantalla */
.bq-qv-cta-sticky { padding: 10px 18px 14px !important; }
.bq-qv-cta-btn {
    height: 38px !important;
    padding: 0 16px !important;
    font-size: 13.5px !important;
    font-weight: 700 !important;
    border-radius: 10px !important;
    gap: 7px !important;
}
.bq-qv-cta-btn.is-wa { background: var(--bq-brand, #3A59EF) !important; color: #fff !important; }
.bq-qv-cta-btn.is-url { background: var(--bq-text, #14151A) !important; color: #fff !important; }
.bq-qv-cta-note { font-size: 11px !important; color: var(--bq-ink-faint, #9A9DA6) !important; }

/* Visor de zoom de imagen (.bq-imgzoom-*, propio de esta vitrina) */
.bq-imgzoom-close,
.bq-imgzoom-nav {
    background: var(--bq-scrim, rgba(12,12,14,.38)) !important;
    color: #fff !important;
    border-radius: 50% !important;
    
}
.bq-imgzoom-hint,
.bq-imgzoom-counter {
    background: var(--bq-scrim, rgba(12,12,14,.38)) !important;
    color: #fff !important;
    border-radius: 999px !important;
}

/* ════════════════════════════════════════════════════════════════════════
 *  [Pedido v10.14.8] Rediseño de cabecera del Quick View de INICIO: logo +
 *  nombre del catálogo + ciudad(es) + cantidad de contenidos publicados
 *  (izquierda), migas de categoría chicas y discretas (derecha) — "toda
 *  esta parte de arriba... tipografía pequeña y bien proporcionada". Mismo
 *  lenguaje visual que #bq-catalog-modal (catalog-modal-v2.css), pero sin
 *  el prefijo de ID porque aquí cada producto es de un negocio DISTINTO
 *  (no hay --bq-primary de un solo negocio válido — se usa --bq-brand).
 * ════════════════════════════════════════════════════════════════════════ */
/* [Pedido] "elimina las migas de pan... y pon en la posición de las migas
   de pan la fecha de publicación" — la fecha ahora ocupa el slot derecho
   que antes tenía el breadcrumb. "Esta sección [tenga] una línea divisoria
   muy profesional y sencilla" — borde inferior sutil que cierra la
   cabecera antes del nombre del producto. */
.bq-qv-topinfo {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 10px !important;
    margin: 0 0 12px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--bq-line, #E7E8EC) !important;
}
.buyaca-app:not(.bq-light-mode) .bq-qv-topinfo {
    border-bottom-color: rgba(255,255,255,.10) !important;
}
.bq-qv-biz-mini {
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
    min-width: 0;
}
.bq-qv-biz-mini-logo-link { display: block; flex: 0 0 auto; line-height: 0; }
.bq-qv-biz-mini-logo {
    width: 28px !important;
    height: 28px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex: 0 0 auto !important;
    border: 1px solid var(--bq-line, #E7E8EC) !important;
    background: var(--bq-page-bg, #F3F4F6) !important;
}
/* [Fix reportado] "Varias ciudades" ahora se despliega en línea (sin modal). */
.bq-qv-biz-mini-city.is-open { text-decoration: none; }
.bq-qv-loc-inline-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 8px 10px;
    background: var(--bq-page-bg, #F3F4F6);
    border-radius: 10px;
    font-size: 11.5px;
    color: var(--bq-text, #14151A);
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-width: 220px;
}
.bq-qv-biz-mini-logo--empty {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    color: var(--bq-brand, #3A59EF) !important;
    background: rgba(58,89,239,.1) !important;
}
.bq-qv-biz-mini-text { min-width: 0; }
.bq-qv-biz-mini-name {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--bq-text, #14151A) !important;
    text-decoration: none !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 46vw;
    display: block;
}
.bq-qv-biz-mini-name:hover { text-decoration: underline !important; }
.bq-qv-biz-mini-sub {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 4px !important;
    font-size: 10.5px !important;
    font-weight: 500 !important;
    color: var(--bq-ink-faint, #9A9DA6) !important;
    margin-top: 1px !important;
}
.bq-qv-biz-mini-city,
.bq-qv-biz-mini-dist {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: inherit !important;
    font: inherit !important;
    font-size: 10.5px !important;
    cursor: default;
}
button.bq-qv-biz-mini-city { cursor: pointer; text-decoration: underline; }
.bq-qv-biz-mini-dot { opacity: .7; }
.bq-qv-biz-mini-count { white-space: nowrap; }

/* Fecha de publicación: ocupa el slot derecho de la cabecera — pequeña y
   discreta, alineada con el bloque de negocio. [Pedido] Ícono de calendario
   en vez del texto "Publicado el" + migas de pan (categoría de catálogo y
   de contenido), separadas de la fecha por una raya vertical. */
.bq-qv-date-top {
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    gap: 4px !important;
    margin: 3px 0 0 !important;
    white-space: nowrap;
    flex-wrap: wrap;
}
.bq-qv-date-icon { flex-shrink: 0; opacity: .75; }
.bq-qv-date-sep {
    width: 1px;
    height: 11px;
    background: var(--bq-line, #E7E8EC);
    flex-shrink: 0;
    margin: 0 1px;
}
.bq-qv-crumb {
    color: var(--bq-primary, #3A59EF) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-decoration: underline;
}
/* [Pedido] Migas de pan clicables: recargan el contenido de la home filtrado
   por la categoría elegida (negocio o producto), sin recargar la página. */
.bq-qv-crumb-link {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
}
.bq-qv-crumb-link:hover,
.bq-qv-crumb-link:active {
    opacity: .75;
}
.bq-qv-crumb-dot { color: var(--bq-ink-faint, #9A9DA6); font-size: 11px; opacity: .7; }

/* [Pedido] "la etiqueta o badge... al final del nombre del producto,
   alineada naturalmente con el título" — chip inline, color del negocio. */
.bq-qv-name-tag {
    display: inline-block;
    vertical-align: middle;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: 2px 8px !important;
    border-radius: 999px !important;
    margin-left: 6px;
}

/* ════════════════════════════════════════════════════════════════════════
 *  [Pedido v10.14.8] Bloque de acción: botón CTA + corazón de favoritos
 *  juntos, "formando un grupo visual equilibrado y fácilmente identificable"
 *  — colores con contraste correcto en ambos modos.
 * ════════════════════════════════════════════════════════════════════════ */
.bq-qv-cta-row { display: flex !important; align-items: stretch !important; gap: 8px !important; }
.bq-qv-cta-row .bq-qv-cta-btn { flex: 1 1 auto !important; }
.bq-qv-cta-btn.is-default {
    background: var(--bq-brand, #3A59EF) !important;
    color: #fff !important;
}
.bq-qv-fav-badge-cta {
    margin-left: 0 !important;
    flex: 0 0 52px !important;
    width: 52px !important;
    justify-content: center !important;
    border-radius: 14px !important;
    font-size: 11px !important;
    gap: 3px !important;
}

/* ════════════════════════════════════════════════════════════════════════
 *  [Pedido v10.14.8] Reseñas del producto — al final de la información,
 *  paginadas de a 5 con "ver más" infinito, degradado sutil al final que
 *  se adapta al modo claro/oscuro para sugerir que hay más por cargar.
 *  Mismo lenguaje visual que #bq-catalog-modal (catalog-modal-v2.css).
 * ════════════════════════════════════════════════════════════════════════ */
.bq-qv-reviews-section {
    margin-top: 14px !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--bq-line, #E7E8EC) !important;
}
.bq-qv-reviews-title {
    font-size: 13px !important;
    font-weight: 800 !important;
    color: var(--bq-text, #14151A) !important;
    margin-bottom: 8px !important;
}
.bq-qv-reviews-title span { color: var(--bq-ink-faint, #9A9DA6) !important; font-weight: 500 !important; }
.bq-qv-reviews-loading,
.bq-qv-reviews-empty {
    font-size: 12.5px !important;
    color: var(--bq-ink-faint, #9A9DA6) !important;
    padding: 6px 0 !important;
}
.bq-qv-reviews-list { display: flex; flex-direction: column; gap: 12px; }
.bq-qv-review-item { display: flex; gap: 9px; align-items: flex-start; }
.bq-qv-review-avatar {
    width: 30px !important;
    height: 30px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex: 0 0 auto !important;
    background: var(--bq-page-bg, #F3F4F6) !important;
}
.bq-qv-review-body { min-width: 0; flex: 1 1 auto; }
.bq-qv-review-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 2px; }
.bq-qv-review-author { font-size: 12.5px !important; font-weight: 700 !important; color: var(--bq-text, #14151A) !important; }
.bq-qv-review-time { font-size: 10.5px !important; color: var(--bq-ink-faint, #9A9DA6) !important; flex: 0 0 auto; }
.bq-qv-review-comment { font-size: 12.5px !important; line-height: 1.5 !important; color: var(--bq-ink-soft, #5B5F6B) !important; margin: 4px 0 0 !important; }

/* Degradado sutil que insinúa más contenido por cargar, previo al botón
   "Ver más reseñas" — puramente decorativo, sin recortar ninguna reseña. */
.bq-qv-reviews-fade {
    height: 22px !important;
    margin: -6px 0 0 !important;
    background: linear-gradient(to bottom, rgba(58,89,239,0), rgba(58,89,239,.08)) !important;
    border-radius: 8px !important;
    pointer-events: none !important;
}
.buyaca-app:not(.bq-light-mode) .bq-qv-reviews-fade {
    background: linear-gradient(to bottom, rgba(108,124,255,0), rgba(108,124,255,.14)) !important;
}
.bq-qv-reviews-loadmore {
    display: block;
    width: 100%;
    margin: 8px 0 4px !important;
    padding: 10px 16px !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    cursor: pointer;
    background: linear-gradient(135deg, rgba(58,89,239,.10), rgba(58,89,239,.04)) !important;
    color: var(--bq-brand, #3A59EF) !important;
    transition: background .15s ease, transform .15s ease;
}
.bq-qv-reviews-loadmore:hover {
    background: linear-gradient(135deg, rgba(58,89,239,.16), rgba(58,89,239,.07)) !important;
    transform: translateY(-1px);
}
.buyaca-app:not(.bq-light-mode) .bq-qv-reviews-loadmore {
    background: linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.03)) !important;
    color: var(--bq-brand, #6C7CFF) !important;
}
.buyaca-app:not(.bq-light-mode) .bq-qv-reviews-loadmore:hover {
    background: linear-gradient(135deg, rgba(255,255,255,.16), rgba(255,255,255,.05)) !important;
}

@media (prefers-reduced-motion: reduce) {
    .bq-qv-modal * { transition-duration: 0ms !important; }
}