/* ========================================
   TABLA SERVICIOS - ESTILOS RESPONSIVOS
   ======================================== */

/* 🎯 Columnas con scroll horizontal */
/* Código (columna 1) */
#tabla_servicios tbody tr td:nth-child(1) {
    max-width: 100px !important;
    min-width: 100px !important;
    width: 100px !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
}

/* Nombre del Servicio (columna 2) */
#tabla_servicios tbody tr td:nth-child(2),
#tabla_servicios tbody tr td.col-nombre {
    max-width: 200px !important;
    min-width: 200px !important;
    width: 200px !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
}

/* Descripción (columna 3) */
#tabla_servicios tbody tr td:nth-child(3) {
    max-width: 250px !important;
    min-width: 250px !important;
    width: 250px !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
}

/* Precio (columna 4) */
#tabla_servicios tbody tr td:nth-child(4) {
    max-width: 100px !important;
    min-width: 100px !important;
    width: 100px !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
}

/* ========================================
   SCROLLBAR PERSONALIZADA
   ======================================== */

/* Scrollbar para las columnas con scroll */
#tabla_servicios tbody tr td::-webkit-scrollbar {
    height: 6px;
}

#tabla_servicios tbody tr td::-webkit-scrollbar-track {
    background: rgba(146, 74, 239, 0.1);
    border-radius: 10px;
    margin: 2px;
}

#tabla_servicios tbody tr td::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #924AEF, #C15BB7);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

#tabla_servicios tbody tr td::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, #7A3FD9, #A64BA3);
    transform: scaleY(1.2);
    box-shadow: 0 2px 8px rgba(146, 74, 239, 0.3);
}

/* ========================================
   RESPONSIVE - MÓVILES
   ======================================== */

@media (max-width: 768px) {
    #tabla_servicios tbody tr td:nth-child(2) {
        max-width: 200px !important;
    }
    
    #tabla_servicios tbody tr td:nth-child(3) {
        max-width: 220px !important;
    }
    
    #tabla_servicios tbody tr td::-webkit-scrollbar {
        height: 4px;
    }
}

/* ========================================
   COMPATIBILIDAD FIREFOX
   ======================================== */

#tabla_servicios tbody tr td {
    scrollbar-width: thin;
    scrollbar-color: #924AEF rgba(146, 74, 239, 0.1);
}

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

:root .dark-mode #tabla_servicios tbody tr td::-webkit-scrollbar-track {
    background: rgba(21, 19, 43, 0.6);
}

:root .dark-mode #tabla_servicios tbody tr td::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, #924AEF, #E328AF);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

:root .dark-mode #tabla_servicios tbody tr td::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, #A65BF5, #F542C1);
    box-shadow: 0 2px 12px rgba(146, 74, 239, 0.5);
}