/**
 * PQ Productos AJAX — Estilos de tarjetas de producto
 * Versión 1.0 | Autor: Mario Torres
 *
 * Se encola desde el plugin con dependencia en elementor-frontend,
 * garantizando carga posterior y mayor especificidad que Elementor.
 *
 * Prefijo propio: #pq-resultados y .pq-* para evitar conflictos con
 * WooCommerce, Elementor y el tema Hello Elementor.
 */

/* ══════════════════════════════════════════════════════════════════
   BARRA DE FILTROS DE PRODUCTOS
   ══════════════════════════════════════════════════════════════════ */
.pq-filtros {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    gap: 16px !important;
    padding: 24px 40px !important;
    background: #f8fafc !important;
    border-bottom: 2px solid #e2e8f0 !important;
    box-sizing: border-box !important;
    /* Neutraliza color:#FFFFFF heredado del Kit de Elementor */
    color: #1e293b !important;
}

/* Todos los textos dentro del área de filtros visible sobre fondo claro */
.pq-filtros * {
    color: inherit;
}

.pq-filtro-grupo {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    flex: 1 1 200px !important;
    min-width: 180px !important;
    box-sizing: border-box !important;
}

.pq-filtro-grupo.pq-filtro-buscar {
    flex: 2 1 280px !important;
    min-width: 220px !important;
}

.pq-filtro-grupo label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
    color: #475569 !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1.2 !important;
    display: block !important;
}

.pq-filtros input[type="text"],
.pq-filtros input#pq-buscar {
    width: 100% !important;
    height: 46px !important;
    padding: 0 18px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 23px !important;
    font-size: 15px !important;
    color: #1e293b !important;
    background: #ffffff !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
}

.pq-filtros input[type="text"]:focus,
.pq-filtros input#pq-buscar:focus {
    border-color: #0d47a1 !important;
    box-shadow: 0 0 0 3px rgba(13, 71, 161, 0.12) !important;
}

.pq-filtros select,
.pq-filtros select#pq-categoria,
.pq-filtros select#pq-subcategoria {
    width: 100% !important;
    height: 46px !important;
    padding: 0 38px 0 18px !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 23px !important;
    font-size: 15px !important;
    color: #1e293b !important;
    background-color: #ffffff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 16px !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    cursor: pointer !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
    margin: 0 !important;
}

.pq-filtros select:focus,
.pq-filtros select#pq-categoria:focus,
.pq-filtros select#pq-subcategoria:focus {
    border-color: #0d47a1 !important;
    box-shadow: 0 0 0 3px rgba(13, 71, 161, 0.12) !important;
}

#pq-subcat-wrap {
    display: none !important;
    flex: 1 1 200px !important;
    min-width: 180px !important;
}

#pq-subcat-wrap.visible {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}

.pq-filtro-acciones {
    display: flex !important;
    gap: 10px !important;
    align-items: flex-end !important;
    flex-shrink: 0 !important;
}

.pq-filtros .btn-buscar {
    height: 46px !important;
    padding: 0 26px !important;
    background: #0d47a1 !important;
    color: #ffffff !important;
    border: none !important;
    border-radius: 23px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s ease, transform 0.1s ease !important;
    box-shadow: 0 2px 6px rgba(13, 71, 161, 0.25) !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

.pq-filtros .btn-buscar:hover {
    background: #1565c0 !important;
    transform: translateY(-1px) !important;
}

.pq-filtros .btn-limpiar {
    height: 46px !important;
    padding: 0 20px !important;
    background: #ffffff !important;
    color: #475569 !important;
    border: 1.5px solid #cbd5e1 !important;
    border-radius: 23px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s ease !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

.pq-filtros .btn-limpiar:hover {
    background: #f1f5f9 !important;
    color: #1e293b !important;
}

@media (max-width: 768px) {
    .pq-filtros {
        padding: 18px 20px !important;
        gap: 14px !important;
    }
    .pq-filtro-grupo,
    .pq-filtro-grupo.pq-filtro-buscar,
    #pq-subcat-wrap {
        flex: 1 1 100% !important;
        min-width: 100% !important;
    }
    .pq-filtro-acciones {
        width: 100% !important;
        display: flex !important;
        gap: 10px !important;
        margin-top: 4px !important;
    }
    .pq-filtros .btn-buscar,
    .pq-filtros .btn-limpiar {
        flex: 1 !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   CONTENEDOR DE RESULTADOS
   ══════════════════════════════════════════════════════════════════ */
#pq-resultados {
    padding: 24px 40px;
    min-height: 200px;
    /* Neutraliza color:#FFFFFF heredado del Kit de Elementor */
    color: #1e293b !important;
}

@media (max-width: 768px) {
    #pq-resultados { padding: 16px 20px; }
}

/* ══════════════════════════════════════════════════════════════════
   SECCIONES POR CATEGORÍA
   ══════════════════════════════════════════════════════════════════ */
#pq-resultados .categoria-seccion {
    margin-bottom: 40px;
}

#pq-resultados .categoria-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid #e9ecef;
}

#pq-resultados .categoria-titulo {
    font-size: 1.1rem;
    font-weight: 700;
    color: #1f2328;
    margin: 0;
}

#pq-resultados .ver-todos-cat {
    font-size: 0.82rem;
    color: #0d47a1;
    text-decoration: none;
    white-space: nowrap;
}

#pq-resultados .ver-todos-cat:hover {
    text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════════
   GRID DE PRODUCTOS
   Usamos #pq-resultados ul.products para máxima especificidad y
   anular las reglas de WooCommerce (float, width, etc.)
   ══════════════════════════════════════════════════════════════════ */
#pq-resultados ul.products {
    display:               grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap:                   20px !important;
    list-style:            none !important;
    margin:                0 !important;
    padding:               0 !important;
    float:                 none !important;
}

/* Eliminar pseudo-elementos de WooCommerce que rompen el grid */
#pq-resultados ul.products::before,
#pq-resultados ul.products::after {
    content: none !important;
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════════
   TARJETA DE PRODUCTO
   ══════════════════════════════════════════════════════════════════ */
#pq-resultados ul.products li.product {
    /* Anular estilos de WooCommerce */
    float:        none !important;
    width:        auto !important;
    margin:       0 !important;
    padding:      0 0 12px 0 !important;
    list-style:   none !important;
    box-sizing:   border-box !important;
    /* Layout de tarjeta */
    display:        flex !important;
    flex-direction: column !important;
    background:     #fff;
    border:         1px solid #e9ecef;
    border-radius:  10px;
    overflow:       hidden;
    transition:     box-shadow 0.2s ease;
    /* Altura mínima para consistencia entre tarjetas */
    min-height:     280px;
}

#pq-resultados ul.products li.product:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10);
}

/* ══════════════════════════════════════════════════════════════════
   ENLACE CONTENEDOR DE IMAGEN + TÍTULO
   ══════════════════════════════════════════════════════════════════ */
#pq-resultados ul.products li.product a.woocommerce-loop-product__link {
    display:         flex !important;
    flex-direction:  column !important;
    flex:            1 !important;
    text-decoration: none !important;
    color:           inherit !important;
}

/* ══════════════════════════════════════════════════════════════════
   CONTENEDOR DE IMAGEN — CUADRADO FIJO
   aspect-ratio + overflow:hidden garantizan que ninguna imagen
   se desborde ni sobredimensione, independientemente de su tamaño.
   ══════════════════════════════════════════════════════════════════ */
#pq-resultados ul.products li.product .pq-img-wrap {
    position:     relative;  /* necesario para el img absolute */
    width:        100%;
    aspect-ratio: 1 / 1;     /* cuadrado perfecto */
    overflow:     hidden;
    background:   #f8f9fa;
    flex-shrink:  0;          /* no se comprime en flex column */
}

/* Imagen dentro del contenedor */
#pq-resultados ul.products li.product .pq-img-wrap img {
    position:   absolute !important;
    top:        0 !important;
    left:       0 !important;
    width:      100% !important;
    height:     100% !important;
    object-fit: contain !important;  /* contain para no recortar productos */
    display:    block !important;
    /* Evitar que width/height del atributo HTML sobredimensionen */
    max-width:  none !important;
    max-height: none !important;
}

/* Placeholder SVG (sin imagen) */
#pq-resultados ul.products li.product .pq-img-wrap .pq-no-image,
#pq-resultados ul.products li.product .pq-img-wrap img.pq-no-image {
    object-fit: contain !important;
    padding:    20px;
    opacity:    0.4;
}

/* ══════════════════════════════════════════════════════════════════
   TÍTULO DEL PRODUCTO
   ══════════════════════════════════════════════════════════════════ */
#pq-resultados ul.products li.product .woocommerce-loop-product__title,
#pq-resultados ul.products li.product h2.woocommerce-loop-product__title {
    font-size:   0.88rem !important;
    font-weight: 600 !important;
    color:       #1f2328 !important;
    padding:     10px 12px 4px !important;
    margin:      0 !important;
    line-height: 1.3 !important;
    flex:        1 !important;
    /* Limitar a 3 líneas */
    display:            -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 3 !important;
    overflow:           hidden !important;
}

/* ══════════════════════════════════════════════════════════════════
   BOTÓN WHATSAPP
   ══════════════════════════════════════════════════════════════════ */
#pq-resultados ul.products li.product a.pq-wa-btn {
    display:         flex !important;
    align-items:     center !important;
    justify-content: center !important;
    /* Margen horizontal como porcentaje para no desbordar */
    margin:          8px 10px 0 !important;
    padding:         9px 8px !important;
    background:      #25d366 !important;
    color:           #fff !important;
    border-radius:   20px !important;
    font-size:       0.75rem !important;
    font-weight:     600 !important;
    text-align:      center !important;
    text-decoration: none !important;
    transition:      background 0.2s !important;
    min-height:      36px !important;
    flex-shrink:     0 !important;
    box-sizing:      border-box !important;
    /* Ancho explícito para no desbordar la tarjeta */
    width:           calc(100% - 20px) !important;
    white-space:     nowrap !important;
    overflow:        hidden !important;
    text-overflow:   ellipsis !important;
}

#pq-resultados ul.products li.product a.pq-wa-btn:hover {
    background: #1ebe5d !important;
}

/* ══════════════════════════════════════════════════════════════════
   SPINNER DE CARGA
   ══════════════════════════════════════════════════════════════════ */
.pq-spinner {
    display:         flex;
    align-items:     center;
    justify-content: center;
    padding:         60px 20px;
}

.pq-spinner-inner {
    width:            40px;
    height:           40px;
    border:           4px solid #e9ecef;
    border-top-color: #0d47a1;
    border-radius:    50%;
    animation:        pq-spin 0.8s linear infinite;
}

@keyframes pq-spin {
    to { transform: rotate(360deg); }
}

.pq-cargando {
    text-align: center;
    padding:    60px 20px;
    color:      #0d47a1;
    font-size:  16px;
}

.no-results {
    text-align: center;
    padding:    60px 20px;
    color:      #666;
    font-size:  16px;
}

/* ══════════════════════════════════════════════════════════════════
   PAGINACIÓN
   ══════════════════════════════════════════════════════════════════ */
#pq-resultados .pq-pagination {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    margin-top:      32px;
    flex-wrap:       wrap;
}

#pq-resultados .pq-page {
    padding:       6px 14px;
    border:        1px solid #e2e8f0;
    border-radius: 6px;
    color:         #0d47a1;
    cursor:        pointer;
    font-size:     0.9rem;
    background:    #fff;
    transition:    background 0.15s;
}

#pq-resultados .pq-page:hover,
#pq-resultados .pq-page.active {
    background: #0d47a1;
    color:      #fff;
    border-color: #0d47a1;
}

/* ══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    #pq-resultados ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
}

@media (max-width: 480px) {
    #pq-resultados ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    #pq-resultados ul.products li.product .woocommerce-loop-product__title,
    #pq-resultados ul.products li.product h2.woocommerce-loop-product__title {
        font-size: 0.78rem !important;
    }
}

/* ══════════════════════════════════════════════════════════════════
   EXCLUIR DE LITESPEED INLINE COMBINATION
   El comentario siguiente previene que LiteSpeed combine este CSS
   con otros archivos, garantizando el orden de carga correcto.
   ══════════════════════════════════════════════════════════════════ */
/* LiteSpeed Cache: no combine */