/* ============================================
   EFECTOS UNIVERSALES PARA TABLAS - EDMTECH
   ============================================ */

/* Variables para los efectos de tabla */
:root {
    --table-hover-bg: #F8FAFC;
    --table-hover-scale: 1.01;
    --table-transition: all 0.2s ease;
    --table-shadow-hover: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

/* Efecto hover básico para todas las tablas */
.table tbody tr {
    transition: var(--table-transition);
    cursor: pointer;
}

.table tbody tr:hover {
    background-color: var(--table-hover-bg) !important;
    transform: scale(var(--table-hover-scale));
    box-shadow: var(--table-shadow-hover);
}

/* Efecto hover mejorado (clase opcional) */
.table-hover-enhanced tbody tr:hover {
    background: linear-gradient(135deg, #F8FAFC 0%, #E2E8F0 100%) !important;
    transform: scale(1.02);
    box-shadow: 0 8px 15px -3px rgb(0 0 0 / 0.1);
    border-left: 4px solid var(--primary-color, #4F46E5);
}

/* Efecto hover suave (clase opcional) */
.table-hover-soft tbody tr:hover {
    background-color: rgba(79, 70, 229, 0.05) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px -1px rgb(0 0 0 / 0.1);
}

/* Efecto hover con glow (clase opcional) */
.table-hover-glow tbody tr:hover {
    background-color: var(--table-hover-bg) !important;
    transform: scale(1.01);
    box-shadow: 0 0 20px rgba(79, 70, 229, 0.15);
    border-radius: 8px;
}

/* Para DataTables específicamente */
.dataTables_wrapper .table tbody tr {
    transition: var(--table-transition);
}

.dataTables_wrapper .table tbody tr:hover {
    background-color: var(--table-hover-bg) !important;
    transform: scale(var(--table-hover-scale));
}

/* Responsive - reducir efectos en móviles */
@media (max-width: 768px) {
    .table tbody tr:hover {
        transform: scale(1.005); /* Efecto más sutil en móviles */
    }
    
    .table-hover-enhanced tbody tr:hover {
        transform: scale(1.01);
    }
}

/* Para tablas específicas con clases custom */
.table-users tbody tr:hover,
.table-products tbody tr:hover,
.table-orders tbody tr:hover {
    background-color: var(--table-hover-bg) !important;
    transform: scale(var(--table-hover-scale));
}

/* Efecto para filas activas/seleccionadas */
.table tbody tr.selected {
    background-color: rgba(79, 70, 229, 0.1) !important;
    border-left: 4px solid var(--primary-color, #4F46E5);
}

.table tbody tr.selected:hover {
    background-color: rgba(79, 70, 229, 0.15) !important;
}