/* ========================================== */
/*     ESTILOS PREMIUM PARA PRODUCTOS        */
/*     Archivo: estilos_productos_premium.css */
/* ========================================== */

/* Importar Animate.css para animaciones sutiles */
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css');

/* ============================================ */
/*           NOMBRES DE PRODUCTOS PREMIUM      */
/* ============================================ */

/* SELECTOR MUY ESPECÍFICO para evitar interferencia */
.table-responsive .table tbody tr td a.product-name-premium,
.table tbody td .product-name-premium {
    /* Tipografía mejorada */
    font-weight: 800 !important;
    font-size: 1.05rem !important;
    line-height: 1.2 !important;
    letter-spacing: 0.3px !important;
    
    /* Gradiente sutil en el texto */
    background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    
    /* Transiciones suaves */
    transition: all 0.3s ease !important;
    
    /* Decoración */
    text-decoration: none !important;
    border-bottom: 1px solid transparent !important;
}

/* Efecto hover mejorado - MUY ESPECÍFICO */
.table-responsive .table tbody tr td a.product-name-premium:hover,
.table tbody td .product-name-premium:hover {
    /* Cambiar gradiente en hover - AZUL MÁS VISTOSO */
    background: linear-gradient(135deg, #007bff 0%, #0056b3 50%, #004085 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    
    /* Línea inferior animada - MÁS VISTOSA */
    border-bottom-color: #007bff !important;
    border-bottom-width: 2px !important;
    
    /* Escala sutil */
    transform: scale(1.02) !important;
    
    /* Sombra sutil para mayor impacto */
    text-shadow: 0 2px 4px rgba(0, 123, 255, 0.3) !important;
}

/* ============================================ */
/*              EFECTOS ESPECIALES             */
/* ============================================ */

/* Efecto shimmer para productos destacados - MUY ESPECÍFICO */
.table tbody td .product-name-shimmer {
    position: relative !important;
    overflow: visible !important; /* Cambiado de hidden a visible */
}

.table tbody td .product-name-shimmer::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: -100% !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    ) !important;
    transition: left 0.6s ease !important;
    pointer-events: none !important; /* No interferir con clics */
}

.table tbody td .product-name-shimmer:hover::before {
    left: 100% !important;
}

/* ============================================ */
/*            BADGES ALTERNATIVOS              */
/* ============================================ */

/* Badge minimalista para estado - SOLO en contexto específico */
.table tbody td .product-status-minimal {
    display: inline-block !important;
    padding: 1px 6px !important;
    font-size: 0.65rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    border-radius: 2px !important;
    margin-left: 6px !important;
    border: 1px solid !important;
    background: transparent !important;
    transition: all 0.2s ease !important;
}

/* Estados de stock - SELECTORES ESPECÍFICOS */
.table tbody td .product-status-minimal.stock-alto {
    color: #27ae60 !important;
    border-color: #27ae60 !important;
}

.table tbody td .product-status-minimal.stock-medio {
    color: #f39c12 !important;
    border-color: #f39c12 !important;
}

.table tbody td .product-status-minimal.stock-bajo {
    color: #e74c3c !important;
    border-color: #e74c3c !important;
}

/* Hover para badges - SOLO en tabla */
.table tbody td .product-status-minimal:hover {
    background-color: currentColor !important;
    color: white !important;
}

/* ============================================ */
/*             INDICADORES VISUALES            */
/* ============================================ */

/* Barra lateral de color - SOLO para filas de tabla */
.table tbody tr.product-row-indicator {
    position: relative !important;
}

.table tbody tr.product-row-indicator::before {
    content: '' !important;
    position: absolute !important;
    left: -1px !important; /* Ajustado para no salir de la tabla */
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 3px !important;
    height: 50% !important;
    border-radius: 1px !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
    z-index: 1 !important;
}

/* Colores por categoría - SOLO en filas de tabla */
.table tbody tr.product-row-indicator.categoria-alimentos::before {
    background-color: #e67e22 !important;
}

.table tbody tr.product-row-indicator.categoria-bebidas::before {
    background-color: #3498db !important;
}

.table tbody tr.product-row-indicator.categoria-limpieza::before {
    background-color: #9b59b6 !important;
}

.table tbody tr.product-row-indicator.categoria-otros::before {
    background-color: #95a5a6 !important;
}

/* Mostrar indicador en hover de la fila - SOLO en tabla */
.table tbody tr.product-row-indicator:hover::before {
    opacity: 0.7 !important;
}

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

/* Animación de entrada para nuevos productos - SOLO en tabla */
.table tbody td .product-fadeIn {
    animation: fadeInUp 0.4s ease-out !important;
}

/* Animación personalizada más sutil */
@keyframes fadeInUp {
    from {
        opacity: 0.8;
        transform: translate3d(0, 5px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

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

/* Ajustes para móviles */
@media (max-width: 768px) {
    .table tbody td .product-name-premium {
        font-size: 0.95rem !important;
        letter-spacing: 0.2px !important;
    }
    
    .table tbody td .product-status-minimal {
        font-size: 0.6rem !important;
        padding: 1px 4px !important;
    }
    
    .table tbody tr.product-row-indicator::before {
        width: 2px !important;
        left: 0px !important;
    }
}

/* ============================================ */
/*          PROTECCIÓN DE FUNCIONALIDAD        */
/* ============================================ */

/* Asegurar que NO se afecten otros elementos de la tabla 
   - Esta sección protege la funcionalidad existente */
/* .table,
.table thead,
.table thead th,
.table tbody,
.table tbody tr,
.table tbody td {
    NO modificar propiedades estructurales 
} */

/* Asegurar que botones y controles funcionen normalmente */
.table .btn,
.table .form-control,
.table .badge:not(.product-status-minimal),
.table input,
.table select {
    /* Restaurar comportamiento normal */
    position: static !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ============================================ */
/*                MODO OSCURO                   */
/* ============================================ */

/* (Sin modo oscuro) */