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

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

/* Estilos para la columna Cliente */
#table-compras th:nth-child(1) {
    width: 350px !important;
    max-width: 350px !important;
}

#table-compras td:nth-child(1) {
    max-width: 350px !important;
    white-space: nowrap;
    overflow-x: auto;
}

.cliente-nombre {
    max-width: 350px !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    display: inline-block !important;
}

/* Estilos para la columna de acciones */
#table-compras th:nth-child(6) {
    width: 100px !important;
    max-width: 100px !important;
}

#table-compras td:nth-child(6) {
    max-width: 100px !important;
}

/* Estilos para la columna de A4 */
#table-compras th:nth-child(7) {
    width: 100px !important;
    max-width: 100px !important;
}

#table-compras td:nth-child(7) {
    max-width: 100px !important;
}

/* Estilos para los encabezados de la tabla */
#table-compras th {
    padding-right: 5px;
}

/* Scrollbar personalizado para la columna Cliente */
#table-compras tbody tr td:nth-child(1)::-webkit-scrollbar {
    height: 6px;
}

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

#table-compras tbody tr td:nth-child(1)::-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-compras tbody tr td:nth-child(1)::-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);
}

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

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

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

.cliente-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-compras tbody tr td:nth-child(1)::-webkit-scrollbar-track {
    background: rgba(21, 19, 43, 0.6);
}

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

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

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

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

:root .dark-mode .cliente-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-compras tbody tr td:nth-child(1),
.cliente-nombre {
    scrollbar-width: thin;
    scrollbar-color: #924AEF rgba(146, 74, 239, 0.1);
}

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