/* ========================================
    CSS UNIFICADO DE PRODUCTOS - INDEX
    VERSIÓN MEJORADA CON UI/UX PROFESIONAL
    ======================================== */

/* Compensar menú fijo.
   --menu-height la mantiene sincronizada js/menu-index-2026.js con la
   altura real de .premium-navbar (incluida la fila de búsqueda). */
#filterBar {
    margin-top: calc(var(--menu-height, 64px) + 12px);
}

.product-image-container {
    height: 190px !important;
}

/* --- 1. IMÁGENES DEL PRODUCTO --- */
.product-image-container {
    height: 180px !important;
    max-width: 100% !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
    transition: background 0.3s ease;
}
.product-image {
    object-fit: contain !important;
    max-height: 100% !important;
    max-width: 100% !important;
    padding: 15px !important;
    transition: transform 0.3s ease;
}

/* --- 2. TARJETA DEL PRODUCTO (CARD) MODERNA --- */
.product-card {
    min-height: 320px !important;
    border-radius: 16px !important;
    border: 1px solid #e9ecef !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin: 8px !important;
    overflow: hidden;
    background: #fff;
}
.product-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 40px rgba(26, 127, 74, 0.15) !important;
    border-color: #198754 !important;
}
.product-card:hover .product-image {
    transform: scale(1.05);
}

/* Badge de oferta/nuevo */
.product-card .badge-oferta {
    background: linear-gradient(135deg, #dc3545, #c82333);
}
.product-card .badge-nuevo {
    background: linear-gradient(135deg, #0d6efd, #0b5ed7);
}

/* --- 3. TÍTULO DEL PRODUCTO --- */
.product-title {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: #212529 !important;
    min-height: 2.8em;
}

/* Ajustes de espaciado de las tarjetas de producto */
.product-card .card-body {
    padding: 12px !important;
}

/* --- 4. PRECIO --- */
.product-price {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    background: linear-gradient(135deg, #198754, #20c997);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- 5. BOTONES +/- --- */
.product-card .btn-qty {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    font-size: 1.1rem !important;
}
.product-card .qty-controls {
    margin-top: auto !important;
}
.product-card .qty-controls input {
    width: 50px !important;
    text-align: center !important;
    font-weight: 600 !important;
    border-radius: 10px !important;
    border: 1.5px solid #dee2e6 !important;
    font-size: 0.95rem !important;
    height: 38px !important;
}
.product-card .qty-controls .input-group {
    display: flex !important;
    align-items: center !important;
    gap: 0 !important;
    flex-wrap: nowrap !important;
}
.product-card .qty-controls .input-group > * {
    border-radius: 0 !important;
}
.product-card .qty-controls .input-group > :first-child {
    border-radius: 10px 0 0 10px !important;
}
.product-card .qty-controls .input-group > :last-child {
    border-radius: 0 10px 10px 0 !important;
}
.product-card .cl-grid-qty-menos,
.product-card .cl-grid-qty-mas {
    width: 38px !important;
    height: 38px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    line-height: 1 !important;
    background: #fff;
    border: 1.5px solid #dee2e6;
    color: #212529;
    transition: all 0.15s ease;
    cursor: pointer;
    user-select: none;
}
.product-card .cl-grid-qty-menos:hover,
.product-card .cl-grid-qty-mas:hover {
    background: #f8f9fa;
    border-color: #198754;
    color: #198754;
}
.product-card .cl-grid-qty-menos:active,
.product-card .cl-grid-qty-mas:active {
    transform: scale(0.92);
    background: #e8f5e9;
}
.product-card .cl-grid-add-cart {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 8px 12px !important;
    margin-top: 6px !important;
    border-radius: 10px !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    background: linear-gradient(135deg, #198754, #20c997) !important;
    border: none !important;
    color: #fff !important;
    transition: all 0.2s ease !important;
    cursor: pointer;
    gap: 4px;
}
.product-card .cl-grid-add-cart:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(25,135,84,0.3);
}
.product-card .cl-grid-add-cart:active {
    transform: scale(0.96);
}

/* --- 6. CONTENEDOR GRID (LISTADO) - FLEXBOX RESPONSIVE --- */
#idlosproCuerpo {
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 16px 8% 60px 8%;
}

#idlosproCuerpo .row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 -5px !important;
    width: calc(100% + 10px) !important;
    justify-content: flex-start;
    gap: 0;
}

#idlosproCuerpo .row .col {
    padding: 8px !important;
}

/* 4 columnas: PC Grande */
@media (min-width: 1200px) {
    #idlosproCuerpo .row .col {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
}

/* 4 columnas: PC */
@media (min-width: 993px) and (max-width: 1199px) {
    #idlosproCuerpo .row .col {
        flex: 0 0 25% !important;
        max-width: 25% !important;
    }
}

/* 3 columnas: Tablet */
@media (min-width: 577px) and (max-width: 992px) {
    #idlosproCuerpo .row .col {
        flex: 0 0 33.333333% !important;
        max-width: 33.333333% !important;
    }
}

/* 2 columnas: Móvil */
@media (max-width: 576px) {
    #idlosproCuerpo {
        padding: 12px 8px 40px 8px !important;
    }
    #idlosproCuerpo .row {
        margin: 0 -4px !important;
        width: calc(100% + 8px) !important;
    }
    #idlosproCuerpo .row .col {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding: 6px !important;
    }
    .product-card {
        min-height: auto !important;
        margin: 0 !important;
    }
    .product-card .card-body {
        padding: 10px 8px !important;
    }
    .product-title {
        font-size: 0.8rem !important;
        min-height: 2.2em !important;
    }
    .product-price {
        font-size: 1rem !important;
    }
    .product-image-container {
        height: 100px !important;
    }
    .product-card .btn-qty {
        width: 28px !important;
        height: 28px !important;
        font-size: 1rem !important;
    }
    .product-card .qty-controls input {
        width: 40px !important;
        font-size: 0.9rem !important;
        height: 42px !important;
    }
    .product-card .cl-grid-qty-menos,
    .product-card .cl-grid-qty-mas {
        width: 42px !important;
        height: 42px !important;
        font-size: 1.3rem !important;
        border-radius: 12px !important;
    }
    .product-card .qty-controls .input-group > :first-child {
        border-radius: 12px 0 0 12px !important;
    }
    .product-card .qty-controls .input-group > :last-child {
        border-radius: 0 12px 12px 0 !important;
    }
    .product-card .cl-grid-add-cart {
        padding: 10px 12px !important;
        font-size: 0.9rem !important;
        border-radius: 12px !important;
    }
}

/* Móvil muy pequeño */
@media (max-width: 360px) {
    #idlosproCuerpo .row .col {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .product-title {
        font-size: 0.75rem !important;
    }
    .product-price {
        font-size: 0.9rem !important;
    }
}

/* --- OVERRIDES DE CSS ANTIGUO --- */
.cl-less-img {
    display: none !important;
}
.cl-less-an {
    min-height: auto !important;
}

/* --- SKELETON LOADING --- */
.skeleton-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
    justify-content: center;
}
.skeleton-card {
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    border: 1px solid #f0f0f0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.skeleton-image {
    height: 140px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: 12px;
    margin-bottom: 16px;
}
.skeleton-title {
    height: 18px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: 8px;
    margin-bottom: 12px;
}
.skeleton-title.short { width: 50%; margin: 0 auto; }
.skeleton-price {
    height: 24px;
    width: 40%;
    margin: 16px auto;
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: 8px;
}
.skeleton-btn {
    height: 40px;
    margin-top: 16px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: 10px;
}
/* Final override for image height to ensure consistent look on all devices */
.product-image-container { height: 190px !important; }
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@media (max-width: 576px) {
    .skeleton-card { padding: 12px; }
    .skeleton-image { height: 100px; }
}

/* --- PAGINACIÓN --- */
#pagination-nav {
    display: none;
    margin: 0;
    padding: clamp(20px, 3vw, 32px) max(16px, env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
    justify-content: center;
}
.pagination {
    gap: 8px;
    flex-wrap: wrap;
}
.pagination .page-link {
    color: #198754;
    border-color: #e9ecef;
    border-radius: 8px;
    padding: 10px 16px;
    font-weight: 500;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.pagination .page-link:hover {
    background: #198754;
    border-color: #198754;
    color: white;
}
.pagination .page-item.active .page-link {
    background: linear-gradient(135deg, #198754, #20c997);
    border-color: #198754;
    color: white;
    font-weight: 600;
}
.pagination .page-item.active .page-link:hover {
    background: linear-gradient(135deg, #166b3d, #198754);
}
.pagination .page-item.disabled .page-link {
    color: #6c757d;
    background: #f8f9fa;
}

/* Category header for subcategory pages (consistency) */
.category-header {
  background: #f8f9fa;
  padding: 16px;
  border-radius: 8px;
  margin: 0 1rem 20px;
  text-align: center;
}
.category-header h2 {
  font-size: 1.4rem;
  margin: 0;
}
.category-header p { color: #6c757d; margin: 0; }
@media (max-width: 576px) {
    .pagination .page-link {
        padding: 8px 12px;
        font-size: 0.9rem;
    }
}

/* --- TOAST --- */
#toast-container {
    z-index: 99999;
}

/* --- FILTER BAR --- */
#filterBar .card { border: 1px solid #e9ecef; }
#filterBar .form-select-sm, #filterBar .form-control-sm { font-size: 0.8rem; }
#filterBar label { font-size: 0.7rem; font-weight: 500; }

/* ============================================================
   FASE 5 — CSS DE NUEVA GENERACIÓN
   ============================================================ */

/* --- 7. CONTAINER QUERIES (estándar 2023) ---
   Las cards se adaptan al espacio REAL de su contenedor, no al
   ancho de la ventana: fin de los breakpoints frágiles cuando cambia
   el entorno (split-screen, rotación, zoom, futuras sidebars).
   Complementa (no reemplaza) las media queries existentes: al estar
   al final del archivo, el ajuste fino por card gana la cascada.
   Navegadores sin soporte (pre-2022) las ignoran → layout actual. */
#idlosproCuerpo,
.productos-container {
    container-type: inline-size;
    container-name: productos;
}

/* Card angosta (2 columnas en móvil, ~170px cada una) */
@container productos (max-width: 200px) {
    .product-title {
        font-size: 0.78rem !important;
        min-height: 2.2em !important;
    }
    .product-image-container {
        height: 132px !important;
    }
    .product-card .cl-grid-add-cart {
        font-size: 0.78rem !important;
        padding: 8px 6px !important;
    }
    .pack-btn {
        font-size: 0.68rem !important;
        padding: 3px 6px !important;
    }
}

/* Card media (tablet / 3 columnas) */
@container productos (min-width: 201px) and (max-width: 320px) {
    .product-image-container {
        height: 172px !important;
    }
}

/* Card ancha (desktop / 1-2 columnas grandes) */
@container productos (min-width: 321px) {
    .product-image-container {
        height: 224px !important;
    }
    .product-title {
        font-size: 0.98rem !important;
    }
    .product-card .cl-grid-add-cart {
        font-size: 0.92rem !important;
    }
    .product-card .card-body {
        padding: 16px 14px !important;
    }
}

/* El contenedor de consultas es el catálogo completo, no cada tarjeta.
   En móvil, prevalecen estas medidas sobre la regla de contenedor ancho. */
@media(max-width:767.98px){
 .catalog-home #idlosproCuerpo .product-image-container{height:clamp(112px,32vw,160px)!important}
 .catalog-home #idlosproCuerpo .product-image{padding:6px!important;width:100%;height:100%;object-fit:contain!important}
 .catalog-home #idlosproCuerpo .product-card{min-height:0!important;margin:0!important}
 .catalog-home #idlosproCuerpo .product-card .card-body{padding:10px 8px!important}
 .catalog-home #idlosproCuerpo .product-title{font-size:.8rem!important;line-height:1.4!important;min-height:2.8em!important}
 .catalog-home #idlosproCuerpo .product-card .cl-grid-add-cart{font-size:.85rem!important;padding:8px 6px!important;min-height:40px}
 .catalog-home #idlosproCuerpo>.row{--bs-gutter-y:0}
 .catalog-home #idlosproCuerpo>.row>.col{padding-top:7px!important;padding-bottom:7px!important}
 .catalog-home #idlosproCuerpo .product-title,
 .catalog-home #idlosproCuerpo .price-simple{margin-bottom:6px!important}
}

/* Delimitar cada producto sin añadir un marco pesado. */
.catalog-home #idlosproCuerpo .product-card{border:1px solid #cbd5df!important}
.catalog-home #idlosproCuerpo .product-card:hover{border-color:#9eafbF!important}
[data-bs-theme="dark"] .catalog-home #idlosproCuerpo .product-card,
.catalog-home[data-bs-theme="dark"] #idlosproCuerpo .product-card{border-color:#526474!important}

/* --- 8. SCROLL-DRIVEN ANIMATIONS (estándar 2024) ---
   Las cards aparecen con un fade sutil al entrar en el viewport,
   con CSS PURO (animation-timeline: view()): cero JavaScript, cero
   listeners, cero main-thread. @supports lo limita a los navegadores
   con soporte; prefers-reduced-motion lo desactiva (accesibilidad).
   El fill 'both' deja las cards en su estado final; el hover con
   !important sigue ganando la cascada como siempre. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .product-card {
            animation: card-appear linear both;
            animation-timeline: view();
            animation-range: entry 0% entry 85%;
        }
    }
}

@keyframes card-appear {
    from {
        opacity: 0;
        transform: translateY(26px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* Inicio: una sola compensación del menú fijo, sin espacios acumulados. */
body.catalog-home{margin:0;padding-top:calc(var(--menu-height,64px) + 8px)}
.catalog-home #filterBar{margin-top:0;margin-bottom:0!important}
.catalog-home #filterBar>.card>.card-body{padding:6px 12px!important}
.catalog-home #idlosproCuerpo{padding-top:0!important}
.catalog-home #skeletonGrid{margin-top:8px}
@media(max-width:576px){
 body.catalog-home{padding-top:calc(var(--menu-height,118px) + 6px)}
 .catalog-home #filterBar>.card>.card-body{padding:6px 8px!important}
}

/* Alinear filtros con .row: padding lateral del catálogo menos su margen negativo. */
.catalog-home #filterBar{width:calc(84% + 10px);margin-left:auto;margin-right:auto;box-sizing:border-box}
@media(max-width:576px){
 .catalog-home #filterBar{width:calc(100% - 8px)}
}

/* El espaciado pertenece al contenedor, sin sumar mt-4 de Bootstrap. */
#productPagination { margin: 0 !important; }
@media (max-width: 576px) {
    #pagination-nav { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
}

/* Paginación móvil: controles estables sin salto de línea. */
#productPagination .catalog-page-summary { display: none; }
@media (max-width: 576px) {
    #productPagination { flex-wrap: nowrap; align-items: center; gap: 6px; width: 100%; }
    #productPagination .catalog-page-number,
    #productPagination .catalog-page-gap { display: none; }
    #productPagination .catalog-page-summary { display: list-item; }
    #productPagination > li { flex: 0 0 auto; }
    #productPagination .page-link { display:flex;align-items:center;justify-content:center;min-height:44px;padding:10px 9px;font-size:.875rem;line-height:1.5; }
    #productPagination .catalog-page-summary .page-link {
        min-width:72px;border:1px solid var(--store-accent,#198754);
        border-radius:10px;background:var(--store-accent,#198754);
        color:var(--store-on-accent,#fff);font-weight:700;
        font-variant-numeric:tabular-nums;cursor:default;
    }
    #productPagination .page-item:not(.disabled) a.page-link {color:var(--store-accent,#198754);border-color:var(--store-accent,#198754);background:transparent;}
    #productPagination .page-item:not(.disabled) a.page-link:hover {background:var(--store-accent,#198754);color:var(--store-on-accent,#fff);}
}