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

/* ========================================
   Animación de rotación para iconos de carga
   Usado en SweetAlert de búsqueda de correlativo
   ======================================== */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.spin-animation {
    display: inline-block;
    animation: spin 1s linear infinite;
    font-size: 2rem;
    color: #6f42c1;  /* Color purple para consistencia con error correlativo */
}

/* Estilos específicos para la tabla de ventas */
#table-ventas {
    width: 95% !important;
    margin: 0 auto;
    table-layout: fixed !important; /* Asegura que los anchos definidos se respeten */
}

/* Columna Checkbox (nueva primera columna) Operacion = 1 (compr. Electr.) */
.col-check th:nth-child(1),
.col-check td:nth-child(1) {
    width: 36px !important;
    max-width: 36px !important;
    min-width: 36px !important;
}

/* Estilos para la columna Fecha Operacion = 1 (compr. Electr.) */
.col-fecha th:nth-child(2) {
    width: 60px !important;
    max-width: 60px !important;
}

.col-fecha td:nth-child(2) {
    max-width: 68px !important;
}

/* Estilos para la columna Tipo Doc Operacion = 1 (compr. Electr.) */
.tipo_documento th:nth-child(3) {
    width: 70px !important;
    max-width: 70px !important;
}

.tipo_documento td:nth-child(3) {
    max-width: 75px !important;
}

/* Estilos para la columna Nro Doc Operacion = 1 (compr. Electr.) */
.col-nroDoc th:nth-child(4) {
    width: 60px !important;
    max-width: 60px !important;
}

.col-nroDoc td:nth-child(4) {
    max-width: 60px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Estilos para la columna Cliente Operacion = 1 (compr. Electr.) */
.col-cliente th:nth-child(5) {
    width: 250px !important;
    max-width: 350px !important;
}

.col-cliente td:nth-child(5) {
    max-width: 250px !important;
    white-space: nowrap;
    overflow-x: auto;
}

/* Estilos para la columna Acciones Operacion = 1 (compr. Electr.) */
#table-ventas th:nth-child(8),
#table-ventas td:nth-child(8) {
    width: 190px !important;
    max-width: 190px !important;
    min-width: 190px !important;
}

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

/* 👤 Nombre del cliente - sin limitaciones */
.cliente-nombre {
    width: 100% !important;
    max-width: none !important;
    white-space: nowrap !important;
    overflow-x: auto !important;
    display: block !important;
    margin: 0 !important;
}

/* Checkbox */
#table-ventas[data_operacion="3"] th:nth-child(1),
#table-ventas[data_operacion="3"] td:nth-child(1) {
    width: 10px !important;
    max-width: 10px !important;
    min-width: 10px !important;
}

/* Fecha */
#table-ventas[data_operacion="3"] th:nth-child(2),
#table-ventas[data_operacion="3"] td:nth-child(2) {
    width: 60px !important;
    max-width: 60px !important;
}

/* Nro Doc */
#table-ventas[data_operacion="3"] th:nth-child(3),
#table-ventas[data_operacion="3"] td:nth-child(3) {
    width: 50px !important;
    max-width: 50px !important;

}

/* Cliente */
#table-ventas[data_operacion="3"] th:nth-child(4),
#table-ventas[data_operacion="3"] td:nth-child(4) {
    width: 250px !important;
    max-width: 250px !important;
}

/* Total */
#table-ventas[data_operacion="3"] th:nth-child(5),
#table-ventas[data_operacion="3"] td:nth-child(5) {
    width: 50px !important;
    max-width: 50px !important;
}

/* Estado */
#table-ventas[data_operacion="1"] th:nth-child(7),
#table-ventas[data_operacion="1"] td:nth-child(7) {
    width: 240px !important;
    max-width: 240px !important;
}

/* Estado */
#table-ventas[data_operacion="3"] th:nth-child(6),
#table-ventas[data_operacion="3"] td:nth-child(6) {
    width: 125px !important;
    max-width: 125px !important;
}

/* Estado */
#table-ventas[data_operacion="4"] th:nth-child(6),
#table-ventas[data_operacion="4"] td:nth-child(6) {
    width: 220px !important;
    max-width: 220px !important;
}

/* Acciones */
#table-ventas[data_operacion="3"] th:nth-child(7),
#table-ventas[data_operacion="3"] td:nth-child(7) {
    width: 70px !important;
    max-width: 70px !important;
    min-width: 70px !important;
}

/* Acciones */
#table-ventas[data_operacion="4"] th:nth-child(7),
#table-ventas[data_operacion="4"] td:nth-child(7) {
    width: 120px !important;
    max-width: 120px !important;
    min-width: 120px !important;
}

/* RESPONSIVE: Evitar doble scroll en móviles */
@media (max-width: 768px) {

    .cliente-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* El nombre del cliente NO debe tener scroll propio */
    .cliente-nombre {
        overflow-x: visible !important;
        overflow: visible !important;
    }

    /* La celda tampoco debe tener scroll */
    #table-ventas td:nth-child(5) {
        overflow: visible !important;
    }

    /* Columna Estado - más ancha en móviles */
    #table-ventas th:nth-child(7),
    #table-ventas td:nth-child(7) {
        width: 240px !important;
        max-width: 240px !important;
        min-width: 240px !important;
    }

    /* Columna Acciones - ajustada para móviles */
    #table-ventas th:nth-child(8),
    #table-ventas td:nth-child(8) {
        width: 120px !important;
        max-width: 120px !important;
        min-width: 120px !important;
    }

    /* Checkbox */
    #table-ventas[data_operacion="3"] th:nth-child(1),
    #table-ventas[data_operacion="3"] td:nth-child(1) {
        width: 25px !important;
        max-width: 25px !important;
        min-width: 25px !important;
    }

    /* Fecha */
    #table-ventas[data_operacion="3"] th:nth-child(2),
    #table-ventas[data_operacion="3"] td:nth-child(2) {
        width: 80px !important;
        max-width: 80px !important;
        min-width: 80px !important;
    }

    /* Nro Doc ← AQUÍ, NO SE OCULTA */
    #table-ventas[data_operacion="3"] th:nth-child(3),
    #table-ventas[data_operacion="3"] td:nth-child(3) {
        width: 80px !important;
        max-width: 80px !important;
        min-width: 80px !important;
    }

    /* Cliente */
    #table-ventas[data_operacion="3"] th:nth-child(4),
    #table-ventas[data_operacion="3"] td:nth-child(4) {
        width: 200px !important;
        max-width: 200px !important;
        min-width: 200px !important;
    }

    /* Monto */
    #table-ventas[data_operacion="3"] th:nth-child(5),
    #table-ventas[data_operacion="3"] td:nth-child(5) {
        width: 70px !important;
        max-width: 70px !important;
        min-width: 70px !important;
    }

    /* Estado ← AQUÍ CAMBIAS EL ANCHO */
    #table-ventas[data_operacion="3"] th:nth-child(6),
    #table-ventas[data_operacion="3"] td:nth-child(6) {
        width: 250px !important;       /* ← TU AJUSTE */
        max-width: 250px !important;
        min-width: 250px !important;
    }

    #table-ventas[data_operacion="4"] th:nth-child(6),
    #table-ventas[data_operacion="4"] td:nth-child(6) {
        width: 250px !important;       /* ← TU AJUSTE */
        max-width: 250px !important;
        min-width: 250px !important;
    }

    /* Acciones */
    #table-ventas[data_operacion="3"] th:nth-child(7),
    #table-ventas[data_operacion="3"] td:nth-child(7) {
        width: 85px !important;
        max-width: 85px !important;
        min-width: 85px !important;
    }

    #table-ventas[data_operacion="4"] th:nth-child(7),
    #table-ventas[data_operacion="4"] td:nth-child(7) {
        width: 105px !important;
        max-width: 105px !important;
        min-width: 105px !important;
    }
}

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

/* Scrollbar personalizado para la columna Cliente - SOLO DESKTOP */
@media (min-width: 769px) {
    #table-ventas tbody tr td:nth-child(5)::-webkit-scrollbar {
        height: 6px;
    }

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

    #table-ventas tbody tr td:nth-child(5)::-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-ventas tbody tr td:nth-child(5)::-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-container::-webkit-scrollbar,
    .cliente-nombre::-webkit-scrollbar {
        height: 6px;
    }

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

    .cliente-container::-webkit-scrollbar-thumb,
    .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-container::-webkit-scrollbar-thumb:hover,
    .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 - SOLO DESKTOP */
@media (min-width: 769px) {
    :root .dark-mode #table-ventas tbody tr td:nth-child(5)::-webkit-scrollbar-track {
        background: rgba(21, 19, 43, 0.6);
    }

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

    :root .dark-mode #table-ventas tbody tr td:nth-child(5)::-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-container::-webkit-scrollbar-track,
    :root .dark-mode .cliente-nombre::-webkit-scrollbar-track {
        background: rgba(21, 19, 43, 0.6);
    }

    :root .dark-mode .cliente-container::-webkit-scrollbar-thumb,
    :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-container::-webkit-scrollbar-thumb:hover,
    :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);
    }
}

/* 📱 SCROLLBAR MÓVILES - Mismos colores que desktop */
@media (max-width: 768px) {
    /* WebKit scrollbars para móviles */
    .cliente-container::-webkit-scrollbar {
        height: 4px; /* Más delgado en móviles */
    }

    .cliente-container::-webkit-scrollbar-track {
        background: rgba(146, 74, 239, 0.1);
        border-radius: 8px;
    }

    .cliente-container::-webkit-scrollbar-thumb {
        background: linear-gradient(90deg, #924AEF, #C15BB7);
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, 0.2);
    }

    /* Modo oscuro para móviles */
    :root .dark-mode .cliente-container::-webkit-scrollbar-track {
        background: rgba(21, 19, 43, 0.6);
    }

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

    /* Firefox para móviles */
    .cliente-container {
        scrollbar-width: thin;
        scrollbar-color: #924AEF rgba(146, 74, 239, 0.1);
    }

    /* Firefox modo oscuro para móviles */
    :root .dark-mode .cliente-container {
        scrollbar-width: thin;
        scrollbar-color: #924AEF rgba(21, 19, 43, 0.6);
    }
}

/* Para Firefox - SOLO DESKTOP */
@media (min-width: 769px) {
    #table-ventas tbody tr td:nth-child(5),
    .cliente-container,
    .cliente-nombre {
        scrollbar-width: thin;
        scrollbar-color: #924AEF rgba(146, 74, 239, 0.1);
    }

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