/**
 * Estilos para el sistema de búsqueda con IA - VERSIÓN FULLSCREEN OVERLAY
 * @package WC_Productos_Template
 * @version 7.0
 */

/* ========================================
   CONTENEDOR PRINCIPAL CON POSITION RELATIVE
   ======================================== */

/* Wrapper principal debe ser relative para el overlay */
.wc-productos-template .productos-wrapper {
    position: relative !important;
    width: 100% !important;
    min-height: 500px !important;
}

/* Main area también debe ser relative */
.wc-productos-template .productos-main {
    position: relative !important;
    width: 100% !important;
    min-height: 500px !important;
}

/* Asegurar que el contenedor de productos sea el punto de referencia */
.productos-wrapper ul.products {
    position: relative !important;
}

/* ========================================
   GRID LAYOUT - CONSISTENTE CON FORCE-GRID.CSS
   ======================================== */

/* Grid principal */
html body ul.products,
html body .productos-grid,
html body .wc-productos-template ul.products,
html body.ai-searching ul.products,
html body .ai-search-results ul.products {
    /* Grid de 3 columnas por defecto */
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    
    /* Dimensiones y espaciado */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 30px 0 !important;
    padding: 0 !important;
    list-style: none !important;
    
    /* Resetear floats */
    float: none !important;
    clear: both !important;
    box-sizing: border-box !important;
    
    /* Position para overlay */
    position: relative !important;
    min-height: 400px !important;
}

/* Grid de 4 columnas cuando sidebar está colapsado */
html body .productos-sidebar.collapsed ~ .productos-main ul.products {
    grid-template-columns: repeat(4, 1fr) !important;
}

/* Productos individuales */
html body ul.products li.product {
    /* Resetear para grid */
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important;
    
    /* Diseño de tarjeta */
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    padding: 15px !important;
    background: #fff !important;
    border: 1px solid #e2e2e2 !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
    transition: all 0.3s ease !important;
    overflow: hidden !important;
    
    /* Visibilidad */
    opacity: 1 !important;
    visibility: visible !important;
}

/* Hover effect */
html body ul.products li.product:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
    border-color: #3b82f6 !important;
}

/* ========================================
   SKELETON CONTAINER - GRID SEPARADO DEL OVERLAY
   ======================================== */

/* Contenedor de skeletons con grid */
.skeleton-container,
.ai-skeleton-container {
    /* Mismo grid que productos */
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 400px !important;
    position: relative !important;
}

/* Skeleton con sidebar colapsado */
.productos-sidebar.collapsed ~ .productos-main .skeleton-container,
.productos-sidebar.collapsed ~ .productos-main .ai-skeleton-container {
    grid-template-columns: repeat(4, 1fr) !important;
}

/* Skeleton product card */
.skeleton-product {
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 15px !important;
    min-height: 380px !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
}

/* Skeleton con efecto AI */
.ai-skeleton-container .skeleton-product {
    background: linear-gradient(135deg, #f8f9ff 0%, #f0f4ff 100%) !important;
    border: 1px solid #93c5fd !important;
    box-shadow: 0 0 10px rgba(59, 130, 246, 0.05) !important;
}

/* Partes del skeleton */
.skeleton-image {
    width: 100% !important;
    height: 200px !important;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
    background-size: 200% 100% !important;
    animation: skeleton-loading 1.5s infinite !important;
    border-radius: 6px !important;
    margin-bottom: 15px !important;
}

.skeleton-title {
    width: 100% !important;
    height: 20px !important;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
    background-size: 200% 100% !important;
    animation: skeleton-loading 1.5s infinite !important;
    border-radius: 4px !important;
    margin-bottom: 10px !important;
}

.skeleton-price {
    width: 60% !important;
    height: 24px !important;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
    background-size: 200% 100% !important;
    animation: skeleton-loading 1.5s infinite !important;
    border-radius: 4px !important;
    margin-bottom: 15px !important;
}

.skeleton-button {
    width: 100% !important;
    height: 40px !important;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%) !important;
    background-size: 200% 100% !important;
    animation: skeleton-loading 1.5s infinite !important;
    border-radius: 6px !important;
    margin-top: auto !important;
}

/* ========================================
   AI LOADING - SOLUCIÓN CENTRADO PERFECTO
   ======================================== */

/* MÉTODO 1: Indicador flotante centrado (RECOMENDADO) */
.ai-loading-center {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(8px) !important;
    z-index: 99999 !important;
    animation: fadeIn 0.3s ease !important;
}

.ai-loading-center .ai-loading-box {
    background: white !important;
    padding: 40px 60px !important;
    border-radius: 20px !important;
    box-shadow: 
        0 25px 50px -12px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(59, 130, 246, 0.1) !important;
    text-align: center !important;
    border: 2px solid #3b82f6 !important;
    max-width: 90% !important;
    width: 450px !important;
}

/* MÉTODO 2: Overlay con indicador integrado */
.ai-fullscreen-overlay {
    position: fixed !important;
    inset: 0 !important; /* top, right, bottom, left: 0 */
    background: rgba(255, 255, 255, 0.97) !important;
    backdrop-filter: blur(10px) !important;
    z-index: 99999 !important;
    
    /* Flexbox para centrado perfecto */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}

.ai-fullscreen-overlay .ai-indicator-card {
    background: white !important;
    padding: 48px !important;
    border-radius: 24px !important;
    box-shadow: 
        0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04),
        0 0 0 2px rgba(59, 130, 246, 0.2) !important;
    border: 2px solid #3b82f6 !important;
    text-align: center !important;
    width: 100% !important;
    max-width: 480px !important;
    transform: scale(1) !important;
    animation: scaleIn 0.3s ease !important;
}

@keyframes scaleIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Cerebro animado */
.ai-brain-animation {
    font-size: 64px !important;
    margin-bottom: 20px !important;
    display: block !important;
    animation: pulse-ai 1.5s ease-in-out infinite !important;
    line-height: 1 !important;
}

/* Textos del indicador */
.loading-text {
    margin-bottom: 25px !important;
}

.primary-text {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
    margin-bottom: 8px !important;
    letter-spacing: -0.5px !important;
    line-height: 1.2 !important;
}

.secondary-text {
    font-size: 15px !important;
    color: #6b7280 !important;
    letter-spacing: 0.2px !important;
    line-height: 1.2 !important;
}

/* Spinner animado */
.ai-spinner {
    width: 48px !important;
    height: 48px !important;
    border: 3px solid #e5e7eb !important;
    border-top-color: #3b82f6 !important;
    border-radius: 50% !important;
    animation: spin 0.8s linear infinite !important;
    margin: 0 auto !important;
    display: block !important;
}

/* Pasos de procesamiento */
.ai-loading-steps {
    display: flex !important;
    justify-content: center !important;
    gap: 15px !important;
    margin-top: 25px !important;
    flex-wrap: wrap !important;
}

.ai-loading-steps .step {
    padding: 8px 16px !important;
    background: #f3f4f6 !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    color: #6b7280 !important;
    transition: all 0.3s ease !important;
    border: 1px solid transparent !important;
}

.ai-loading-steps .step.active {
    background: linear-gradient(135deg, #3b82f6, #2563eb) !important;
    color: white !important;
    transform: scale(1.05) !important;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

/* ========================================
   ANIMACIONES
   ======================================== */

@keyframes skeleton-loading {
    0% { 
        background-position: 200% 0;
    }
    100% { 
        background-position: -200% 0;
    }
}

@keyframes spin {
    0% { 
        transform: rotate(0deg);
    }
    100% { 
        transform: rotate(360deg);
    }
}

@keyframes pulse-ai {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.85;
        transform: scale(1.05);
    }
}

@keyframes fadeIn {
    from { 
        opacity: 0;
    }
    to { 
        opacity: 1;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   ESTADOS DE UI
   ======================================== */

/* Estado: Búsqueda normal */
.ui-state-searching ul.products {
    opacity: 0.6 !important;
    pointer-events: none !important;
}

/* Estado: Procesamiento con IA - Ocultar productos reales */
.ui-state-ai-processing ul.products {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Estado: Con skeleton loaders */
.loading-ai-skeletons {
    min-height: 500px !important;
    position: relative !important;
}

/* ========================================
   MENSAJES Y NOTIFICACIONES
   ======================================== */

.ai-search-message {
    background: linear-gradient(135deg, #eff6ff, #dbeafe) !important;
    border: 1px solid #3b82f6 !important;
    color: #1e40af !important;
    padding: 16px 20px !important;
    border-radius: 8px !important;
    margin: 20px 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    animation: fadeInUp 0.4s ease !important;
}

.ai-search-message strong {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.ai-search-message .close-message {
    background: none !important;
    border: none !important;
    font-size: 20px !important;
    color: #3b82f6 !important;
    cursor: pointer !important;
    padding: 4px 8px !important;
    transition: all 0.2s ease !important;
    opacity: 0.7 !important;
}

.ai-search-message .close-message:hover {
    transform: scale(1.1) !important;
    opacity: 1 !important;
}

/* Mensaje de error */
.ai-error {
    background: linear-gradient(135deg, #fef2f2, #fee2e2) !important;
    border: 1px solid #ef4444 !important;
    color: #991b1b !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 16px 20px !important;
    border-radius: 8px !important;
    margin: 20px 0 !important;
}

/* ========================================
   FORMULARIO DE BÚSQUEDA MEJORADO
   ======================================== */

.productos-search {
    position: relative !important;
    margin-bottom: 30px !important;
    width: 100% !important;
}

/* Indicador de IA en el campo */
.productos-search.ai-enabled::after {
    content: '🤖' !important;
    position: absolute !important;
    right: 50px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 20px !important;
    opacity: 0.6 !important;
    transition: all 0.3s ease !important;
    z-index: 10 !important;
    pointer-events: none !important;
}

.productos-search.ai-enabled:has(input:focus)::after {
    opacity: 1 !important;
    animation: pulse-ai 1.5s ease-in-out infinite !important;
}

#productos-search-input {
    width: 100% !important;
    padding: 12px 20px !important;
    padding-right: 80px !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    transition: all 0.3s ease !important;
    background: white !important;
    box-sizing: border-box !important;
}

#productos-search-input:focus {
    outline: none !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

#productos-search-input.ai-searching {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe) !important;
    border-color: #3b82f6 !important;
}

/* ========================================
   PAGINACIÓN
   ======================================== */

.productos-pagination {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    margin: 40px 0 !important;
    padding: 20px !important;
    background: white !important;
    border-radius: 8px !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

.pagination-info {
    text-align: center !important;
    color: #6b7280 !important;
    font-size: 14px !important;
}

.pagination-links {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

.page-number {
    min-width: 40px !important;
    height: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: white !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 6px !important;
    color: #374151 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: all 0.2s ease !important;
    cursor: pointer !important;
}

.page-number:hover {
    background: #3b82f6 !important;
    color: white !important;
    border-color: #3b82f6 !important;
    transform: translateY(-2px) !important;
}

.page-number.current {
    background: #3b82f6 !important;
    color: white !important;
    border-color: #3b82f6 !important;
    cursor: default !important;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Desktop - 3 o 4 columnas */
@media (min-width: 992px) {
    html body ul.products,
    .skeleton-container,
    .ai-skeleton-container {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    html body .productos-sidebar.collapsed ~ .productos-main ul.products,
    .productos-sidebar.collapsed ~ .productos-main .skeleton-container {
        grid-template-columns: repeat(4, 1fr) !important;
    }
}

/* Tablets - 3 columnas */
@media (max-width: 991px) and (min-width: 769px) {
    html body ul.products,
    .skeleton-container,
    .ai-skeleton-container {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    
    html body .productos-sidebar:not(.collapsed) ~ .productos-main ul.products {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .ai-loading-indicator,
    .ai-loading-box {
        min-width: 350px !important;
        padding: 30px 40px !important;
    }
}

/* Móviles landscape - 2 columnas */
@media (max-width: 768px) {
    html body ul.products,
    .skeleton-container,
    .ai-skeleton-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 15px !important;
    }
    
    .ai-loading-indicator,
    .ai-loading-box {
        min-width: 300px !important;
        padding: 30px !important;
    }
    
    .ai-brain-animation {
        font-size: 48px !important;
    }
    
    .primary-text {
        font-size: 18px !important;
    }
}

/* Móviles portrait - 2 columnas ajustadas */
@media (max-width: 480px) {
    html body ul.products,
    .skeleton-container,
    .ai-skeleton-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .skeleton-product {
        min-height: 280px !important;
        padding: 12px !important;
    }
    
    /* Ajustar indicador de IA para móviles */
    .ai-loading-center .ai-loading-box,
    .ai-fullscreen-overlay .ai-indicator-card {
        width: 90% !important;
        max-width: 350px !important;
        padding: 30px !important;
    }
    
    .ai-brain-animation {
        font-size: 40px !important;
    }
    
    .primary-text {
        font-size: 16px !important;
    }
    
    .secondary-text {
        font-size: 13px !important;
    }
    
    .ai-spinner {
        width: 36px !important;
        height: 36px !important;
    }
}

/* Móviles muy pequeños - 1 columna */
@media (max-width: 360px) {
    html body ul.products,
    .skeleton-container,
    .ai-skeleton-container {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }
}

/* ========================================
   UTILIDADES Y HELPERS
   ======================================== */

/* Asegurar visibilidad de productos */
html body ul.products li.product {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* Prevenir overflow */
.productos-wrapper {
    overflow-x: hidden !important;
    overflow-y: visible !important;
}

/* Z-index para capas */
.ai-search-message {
    z-index: 50 !important;
}

.ai-search-overlay,
.ai-loading-overlay {
    z-index: 9999 !important;
}

/* Transiciones suaves */
* {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* ========================================
   INSTRUCCIONES DE IMPLEMENTACIÓN JS - SIMPLIFICADO
   ========================================
   
   MÉTODO RECOMENDADO - Centrado perfecto con flexbox:
   
   // Mostrar indicador de IA
   function showAIIndicator() {
       const aiHTML = `
           <div class="ai-loading-center">
               <div class="ai-loading-box">
                   <div class="ai-brain-animation">🧠</div>
                   <div class="loading-text">
                       <div class="primary-text">Claude está analizando tu búsqueda...</div>
                       <div class="secondary-text">Optimizando resultados con IA</div>
                   </div>
                   <div class="ai-spinner"></div>
               </div>
           </div>
       `;
       
       document.body.insertAdjacentHTML('beforeend', aiHTML);
   }
   
   // Ocultar indicador
   function hideAIIndicator() {
       document.querySelector('.ai-loading-center')?.remove();
   }
   
   ALTERNATIVA - Con overlay completo:
   
   const overlayHTML = `
       <div class="ai-fullscreen-overlay">
           <div class="ai-indicator-card">
               <div class="ai-brain-animation">🧠</div>
               <div class="loading-text">
                   <div class="primary-text">Claude está analizando tu búsqueda...</div>
                   <div class="secondary-text">Optimizando resultados con IA</div>
               </div>
               <div class="ai-spinner"></div>
           </div>
       </div>
   `;
   
   ======================================== */

/* ========================================
   IMPLEMENTACIÓN RECOMENDADA FINAL
   ========================================
   
   El filter-manager.js debe usar esta estructura:
   
   _showSkeletonLoaders(isAI = false) {
       const container = this._findProductsContainer();
       if (!container) return;
       
       if (isAI) {
           // 1. Renderizar skeleton products en el grid
           container.innerHTML = this._generateSkeletonHTML();
           
           // 2. Mostrar indicador centrado
           const aiIndicator = `
               <div class="ai-loading-center">
                   <div class="ai-loading-box">
                       <div class="ai-brain-animation">🧠</div>
                       <div class="loading-text">
                           <div class="primary-text">Claude está analizando tu búsqueda...</div>
                           <div class="secondary-text">Optimizando resultados con IA</div>
                       </div>
                       <div class="ai-spinner"></div>
                   </div>
               </div>
           `;
           
           // Agregar al body para centrado perfecto
           document.body.insertAdjacentHTML('beforeend', aiIndicator);
       }
   }
   
   _hideAllLoaders() {
       // Remover indicador de IA
       document.querySelector('.ai-loading-center')?.remove();
       document.querySelector('.ai-fullscreen-overlay')?.remove();
       
       // Resto del código...
   }
   
   ======================================== */

/* ========================================
   FIN DE ESTILOS AI SEARCH OPTIMIZADOS
   ======================================== */