/* ========================================
   TABLA ELECTRODOMÉSTICOS - ESTILOS RESPONSIVOS
   ======================================== */

/* 🎯 Columna Tipo de Equipo (columna 2) - scroll horizontal cuando el texto es largo */
#tabla_electrodomesticos th:nth-child(2),
#tabla_electrodomesticos td:nth-child(2) {
    max-width: 250px !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
}

/* Fallback con clase */
.col-tipo-equipo th,
.col-tipo-equipo td {
    max-width: 250px !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
}

/* 📦 Contenedor del tipo de equipo */
.tipo-equipo-container {
    width: 100% !important;
    max-width: none !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    display: block !important;
}

/* 🔧 Nombre del tipo de equipo */
.tipo-equipo-nombre {
    width: 100% !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    display: block !important;
    margin: 0 !important;
    font-weight: 600 !important;
}

/* ========================================
   SCROLLBAR PERSONALIZADA PARA TIPO EQUIPO
   ======================================== */

/* Scrollbar para la columna específica */
#tabla_electrodomesticos tbody tr td:nth-child(2)::-webkit-scrollbar {
    height: 8px;
}

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

#tabla_electrodomesticos tbody tr td:nth-child(2)::-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_electrodomesticos tbody tr td:nth-child(2)::-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);
}

/* Scrollbar para el contenedor */
.tipo-equipo-nombre::-webkit-scrollbar {
    height: 8px;
}

.tipo-equipo-nombre::-webkit-scrollbar-track {
    background: rgba(146, 74, 239, 0.1);
    border-radius: 10px;
    margin: 2px;
}

.tipo-equipo-nombre::-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;
}

.tipo-equipo-nombre::-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) {
    .col-tipo-equipo th,
    .col-tipo-equipo td {
        max-width: 200px !important;
    }
    
    .tipo-equipo-nombre::-webkit-scrollbar {
        height: 6px;
    }
}

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

#tabla_electrodomesticos tbody tr td:nth-child(2),
.tipo-equipo-nombre {
    scrollbar-width: thin;
    scrollbar-color: #924AEF rgba(146, 74, 239, 0.1);
}

/* Modo oscuro (si se implementa en el futuro) */
:root .dark-mode #tabla_electrodomesticos tbody tr td:nth-child(2)::-webkit-scrollbar-track {
    background: rgba(21, 19, 43, 0.6);
}

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

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

:root .dark-mode .tipo-equipo-nombre::-webkit-scrollbar-track {
    background: rgba(21, 19, 43, 0.6);
}

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

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