/* Importar estilos compartidos de tablas */
@import url('tables.css');

/* Estilos específicos para la tabla de productos */
#table-productos {
    width: 95% !important;
    margin: 0 auto;
}

#table-productos th:nth-child(1),
#table-productos td:nth-child(1) {
    width: 150px !important;
    max-width: 150px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#table-productos th:nth-child(2),
#table-productos td:nth-child(2) {
    width: 220px !important;
    max-width: 220px !important;
    white-space: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
}

#table-productos th:nth-child(8),
#table-productos td:nth-child(8) {
    width: 120px !important;
    max-width: 120px !important;
}

.codigo-interno {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: inline-block !important;
    max-width: 150px !important;
}

/* 🎯 Columna Nombre/Descripción - con scroll horizontal */
.col-producto th,
.col-producto td {
    max-width: 250px !important;
    white-space: nowrap;
    overflow-x: auto;
}

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

/* 📦 Nombre del producto */
.producto-nombre {
    width: 100% !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    display: block !important;
    margin: 0 !important;
    font-weight: 500 !important;
}

/* Estilos para el scrollbar horizontal en la columna producto */
/* Modo claro */
#table-productos tbody tr td:nth-child(2)::-webkit-scrollbar {
    height: 6px;
}

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

#table-productos 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;
}

#table-productos 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);
}

.producto-nombre::-webkit-scrollbar {
    height: 6px;
}

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

.producto-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;
}

.producto-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);
}

/* Modo oscuro */
:root .dark-mode #table-productos tbody tr td:nth-child(2)::-webkit-scrollbar-track {
    background: rgba(21, 19, 43, 0.6);
}

:root .dark-mode #table-productos 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 #table-productos 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 .producto-nombre::-webkit-scrollbar-track {
    background: rgba(21, 19, 43, 0.6);
}

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

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

/* Para Firefox - Modo claro */
#table-productos tbody tr td:nth-child(2),
.producto-nombre {
    scrollbar-width: thin;
    scrollbar-color: #924AEF rgba(146, 74, 239, 0.1);
}

/* Para Firefox - Modo oscuro */
:root .dark-mode #table-productos tbody tr td:nth-child(2),
:root .dark-mode .producto-nombre {
    scrollbar-width: thin;
    scrollbar-color: #924AEF rgba(21, 19, 43, 0.6);
}