/* ──────────────────────────────────────────────────────────────────────
   1. ELIMINACIÓN DE LA "ZONA ROJA" Y FONDOS SOBREPUESTOS
   ────────────────────────────────────────────────────────────────────── */
.buyaca-app .bq-red-zone,
.bq-red-zone::before,
.bq-red-zone-sparkles,
.bq-red-zone-glow,
/* La "zona roja" antigua mostraba un slider de productos destacados (.bq-pf-zone)
   debajo del header. Hoy los anuncios viven en .bq-temu-carousel-wrap. Forzamos
   el ocultamiento total del slider antiguo para que no haya conflicto visual. */
.buyaca-app .bq-pf-zone,
.bq-pf-zone {
    display: none !important;
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    visibility: hidden !important;
}

/* ──────────────────────────────────────────────────────────────────────
   2. OCULTAR ESTRELLAS EN TARJETAS (todas las variantes)
   ────────────────────────────────────────────────────────────────────── */
.buyaca-app .bq-profile-card-feat-star,
.buyaca-app .bq-profile-card-feat-star-mini,
.buyaca-app .bq-profile-card-feat-star-mini.is-featured,
.bq-profile-card-feat-star,
.bq-profile-card-feat-star-mini,
.bq-profile-card-feat-star-mini.is-featured {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Pin de anclado/destacado: minimalista, ícono blanco total, SIN fondo, arriba-derecha */
.buyaca-app .bq-pc-pin,
.bq-pc-pin {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: none !important;
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    background: none !important;
    background-color: transparent !important;
    
    border: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.buyaca-app .bq-pc-pin svg,
.bq-pc-pin svg {
    width: 18px !important;
    height: 18px !important;
    fill: #ffffff !important;
    stroke: none !important;
    
}

/* ──────────────────────────────────────────────────────────────────────
   3. FLECHA DESPLEGABLE PEGADA AL TEXTO EN FILTROS
   El select tenía padding-right:18px + chevron al borde, por eso la
   flecha se veía lejos. Lo apretamos a 4px y subimos el tamaño visual.
   ────────────────────────────────────────────────────────────────────── */
.buyaca-app .bq-home-filter-select,
.bq-home-filter-select {
    padding-right: 16px !important;
    padding-left: 0 !important;
    background-position: right 0px center !important;
    background-size: 12px !important;
    text-align: left;
}
.buyaca-app .bq-filter-select-wrap,
.bq-filter-select-wrap {
    padding-right: 6px !important;
    padding-left: 8px !important;
    gap: 4px;
}
.buyaca-app .bq-filter-select-icon,
.bq-filter-select-icon {
    margin-right: 4px !important;
}

/* ──────────────────────────────────────────────────────────────────────
   4. HEADER + BANNER 100% RESPONSIVE
   ────────────────────────────────────────────────────────────────────── */
.bq-app-header-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 12px 16px;
    box-sizing: border-box;
}
.bq-header-chips-wrap {
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding: 4px 0;
}
.bq-header-chips-wrap::-webkit-scrollbar { display: none; }
.bq-header-chips-wrap .bq-home-filters {
    display: flex;
    gap: 6px;
    flex-wrap: nowrap;
    align-items: center;
    width: max-content;
    padding-right: 12px;
}
.bq-app-header-search {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.bq-header-search-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

/* Mobile portrait (≤480) — todas las etiquetas visibles via scroll horizontal */
@media (max-width: 480px) {
    .bq-app-header-inner { padding: 5px 5px 0px 5px  !important; }
    .bq-wordmark { font-size: 20px !important; }
    .bq-app-header-search { height: 42px !important; padding: 0 6px 0 14px !important; }
    .bq-app-header-search-input { font-size: 13.5px !important; }
    .bq-app-header-search-btn { width: 32px !important; height: 32px !important; }
    .bq-home-filter-pill {
        padding: 7px 12px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }
    .bq-filter-select-wrap { height: 32px !important; padding: 0 6px !important; }
    .bq-home-filter-select { font-size: 12px !important; padding-right: 14px !important; }
    .bq-banner-section { max-height: 460px !important; }
    .bq-header-chips-wrap .bq-home-filters { gap: 4px; }
}
/* Mobile landscape / phablet (481-639) */
@media (min-width: 481px) and (max-width: 639px) {
    .bq-home-filter-pill { font-size: 12.5px; padding: 8px 13px; }
    .bq-home-filter-select { font-size: 13px; }
}
/* Tablet (640-1023) */
@media (min-width: 640px) and (max-width: 1023px) {
    .bq-app-header-inner { padding: 14px 20px; }
    .bq-wordmark { font-size: 24px; }
    .bq-app-header-search { height: 46px; }
    .bq-home-filter-pill { font-size: 13px; padding: 8px 14px; }
    .bq-header-chips-wrap .bq-home-filters { flex-wrap: wrap; width: 100%; }
}
/* Desktop (≥1024) */
@media (min-width: 1024px) {
    .bq-app-header-inner { padding: 16px 24px; }
    .bq-wordmark { font-size: 28px; }
    .bq-header-chips-wrap .bq-home-filters {
        flex-wrap: wrap;
        width: 100%;
        gap: 8px;
    }
    .bq-home-filter-pill { font-size: 14px; padding: 9px 16px; }
    .bq-filter-select-wrap { height: 38px; }
    .bq-home-filter-select { font-size: 14px; }
}
/* Pantallas muy anchas (≥1440) */
@media (min-width: 1440px) {
    .bq-app-header-inner { padding: 18px 32px; }
    .bq-wordmark { font-size: 32px; }
}

/* ──────────────────────────────────────────────────────────────────────
   5. DARK MODE COHERENTE Y ESTÉTICO
   La paleta usa #0d0d12 (fondo base) / #16161c (cards) / #1f1f28 (elevated)
   con bordes #2a2a35 y textos #f0f0f5 / #a0a0b0.
   ────────────────────────────────────────────────────────────────────── */
.buyaca-app:not(.bq-light-mode) {
    background: #0d0d12 !important;
    color: #f0f0f5 !important;
}
.buyaca-app:not(.bq-light-mode) .bq-header-backdrop {
    background: rgb(220 82 25) !important;
    border-bottom: 0px solid rgba(255,255,255,0.04) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.buyaca-app:not(.bq-light-mode) .bq-app-header-search {
    background: #1a1a22 !important;
    border: 1px solid #2a2a35 !important;
}
.buyaca-app:not(.bq-light-mode) .bq-app-header-search-input {
    color: #f0f0f5 !important;
    background: transparent !important;
}
.buyaca-app:not(.bq-light-mode) .bq-app-header-search-input::placeholder {
    color: #6a6a78 !important;
}
.buyaca-app:not(.bq-light-mode) .bq-home-filter-pill {
    background: #1a1a22 !important;
    color: #fff !important;
    border: 1px solid #2a2a35 !important;
}
/* [Rediseño] Subrayado + color principal en vez de degradado relleno —
   misma razón que las demás correcciones de este estado en frontend.css. */
.buyaca-app:not(.bq-light-mode) .bq-home-filter-pill.active {
    background: transparent !important;
    color: var(--bq-primary, #3A59EF) !important;
    border-color: #2a2a35 !important;
}
.buyaca-app:not(.bq-light-mode) .bq-filter-select-wrap {
    background: #e3e3ff00  !important;
    border: 0px solid #2a2a35 !important;
}
.buyaca-app:not(.bq-light-mode) .bq-filter-select-wrap:hover {
    background: #344FD9 !important;
}
.buyaca-app:not(.bq-light-mode) .bq-home-filter-select {
    color: #f0f0f5 !important;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233A59EF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0px center !important;
}
.buyaca-app:not(.bq-light-mode) .bq-home-filter-select option {
    background: #1f1f28 !important;
    color: #f0f0f5 !important;
}
.buyaca-app:not(.bq-light-mode) .bq-profile-card,
.buyaca-app:not(.bq-light-mode) .bq-home-card {
    background: #16161c !important;
    border-color: #2a2a35 !important;
}
/* [Fix] .bq-cv2-product-card separada del grupo de arriba: su
   border-color propio (más específico) le ganaba en modo oscuro al borde
   fino ya definido en frontend.css/business-profile-v2.css. El fondo
   oscuro se conserva; el color del borde no se toca acá. */
.buyaca-app:not(.bq-light-mode) .bq-cv2-product-card {
    background: #16161c !important;
}

.buyaca-app:not(.bq-light-mode) .bq-home-section-title {
    color: #f0f0f5 !important;
}
.buyaca-app:not(.bq-light-mode) .bq-cta-register-card {
    background: linear-gradient(135deg, #16161c 0%, #1a1a22 100%) !important;
    border: 1px solid #2a2a35 !important;
}
.buyaca-app:not(.bq-light-mode) .bq-cta-register-title,
.buyaca-app:not(.bq-light-mode) .bq-cta-register-text {
    color: #f0f0f5 !important;
}
.buyaca-app:not(.bq-light-mode) .buyaca-bottom-nav {
    background: rgba(13,13,18,0.97) !important;
    border-top-color: rgba(255,255,255,0.06) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}
.buyaca-app:not(.bq-light-mode) .buyaca-bottom-nav-item {
    color: #6a6a78 !important;
}
.buyaca-app:not(.bq-light-mode) .buyaca-bottom-nav-item.active {
    color: #3A59EF !important;
}
/* Inputs / forms en dark */
.buyaca-app:not(.bq-light-mode) .buyaca-form-input,
.buyaca-app:not(.bq-light-mode) .buyaca-form-textarea,
.buyaca-app:not(.bq-light-mode) .buyaca-form-select {
    background: #1a1a22 !important;
    border: 1px solid #2a2a35 !important;
    color: #f0f0f5 !important;
}
.buyaca-app:not(.bq-light-mode) .buyaca-form-label {
    color: #c0c0cc !important;
}
/* Catálogo edit cards dark */
.buyaca-app:not(.bq-light-mode) .buyaca-catalog-item,
.buyaca-app:not(.bq-light-mode) .bq-dashboard-card {
    background: #16161c !important;
    border: 1px solid #2a2a35 !important;
}

/* ──────────────────────────────────────────────────────────────────────
   6. PILLS DE ESTADO (radio único + custom label)
   ────────────────────────────────────────────────────────────────────── */
.bq-status-pills-wrap {
    gap: 6px !important;
}
.bq-status-pill {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 999px;
    border: 1.5px solid var(--bq-border, #2a2a35);
    background: var(--bq-bg-elevated, #1a1a22);
    transition: all 0.18s ease;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--bq-text-secondary, #c0c0cc);
    user-select: none;
    line-height: 1;
}
.bq-status-pill:hover {
    transform: translateY(-1px);
    
}
.bq-status-pill.is-active {
    background: #3A59EF;
    border-color: #3A59EF;
    color: #fff;
}
.bq-status-pill.is-active .bq-status-pill-dot {
    
}
.bq-status-pill-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.buyaca-app.bq-light-mode .bq-status-pill {
    background: #fff;
    border-color: #e5e7eb;
    color: #4a5568;
}
.bq-status-custom-input {
    margin-top: 6px;
}

/* [Purga] Sección "7" (formato de precio de .bq-temu-prod-price, tarjeta
   Temu vieja) retirada — sin referencias en el HTML actual. */

/* ──────────────────────────────────────────────────────────────────────
   8. BADGE DE ETIQUETA PERSONALIZADA en tarjetas
   ────────────────────────────────────────────────────────────────────── */
.bq-product-status-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    /* [Pedido] "la etiqueta sigue sobrepuesta al botón de favoritos" — 16px
       de margen no alcanzaba para dejar libre la esquina donde vive el
       corazón de favorito (~30-34px + separación) en cualquier tarjeta que
       use esta clase sin un ajuste más específico propio. Reserva genérica
       más generosa como piso de seguridad. */
    max-width: calc(100% - 44px);
}
.bq-product-status-badge,
.bq-product-status-badge--custom {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 800;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.4;
    
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bq-product-status-badge--custom {
    background: linear-gradient(135deg, #4F46E5, #7C3AED);
}

/* ──────────────────────────────────────────────────────────────────────
   9. PREVENIR LAYOUT SHIFT EN BANNER SECTION (calidad visual)
   ────────────────────────────────────────────────────────────────────── */
.bq-banner-section {
    min-height: 0;
}
.bq-banner-section[x-show]:not([style*="display: none"]):not([style*="display:none"]) {
    /* permite la transición natural sin saltos */
}

/* ──────────────────────────────────────────────────────────────────────
   10. SAFETY: oculta cualquier remanente de la pf-zone antigua
   ────────────────────────────────────────────────────────────────────── */
.bq-destacados-section {
    display: none !important;
}