/* 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;
}

/* ========================================
   Tabla de ventas — Estilos base
   ======================================== */
#table-ventas {
    width: 93% !important;
    margin: 0 auto;
    table-layout: fixed !important;
}

/* ── Anchos base (aplican a todas las operaciones) ── */
#table-ventas th.col-fecha,
#table-ventas td.col-fecha {
    width: 55px !important;
    max-width: 55px !important;
}

#table-ventas th.col-nroDoc,
#table-ventas td.col-nroDoc {
    width: 55px !important;
    max-width: 55px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

#table-ventas th.col-cliente,
#table-ventas td.col-cliente {
    width: 180px !important;
    max-width: 250px !important;
}

#table-ventas td.col-cliente {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#table-ventas th.col-total,
#table-ventas td.col-total {
    width: 80px !important;
    max-width: 80px !important;
}

#table-ventas th.col-estado,
#table-ventas td.col-estado {
    width: 180px !important;
    max-width: 180px !important;
}

#table-ventas th.col-checklist,
#table-ventas td.col-checklist {
    width: 80px !important;
    max-width: 80px !important;
}

#table-ventas th.col-acciones,
#table-ventas td.col-acciones {
    width: 150px !important;
    max-width: 150px !important;
}

/* ── Columna Tipo Doc (solo visible en op=1) ── */
#table-ventas th.tipo_documento,
#table-ventas td.tipo_documento {
    width: 60px !important;
    max-width: 60px !important;
}

/* ── Operación 3 (Cotización) — anchos propios ── */
#table-ventas[data_operacion="3"] th.col-fecha,
#table-ventas[data_operacion="3"] td.col-fecha {
    width: 60px !important;
    max-width: 60px !important;
}

#table-ventas[data_operacion="3"] th.col-nroDoc,
#table-ventas[data_operacion="3"] td.col-nroDoc {
    width: 65px !important;
    max-width: 65px !important;
}

#table-ventas[data_operacion="3"] th.col-cliente,
#table-ventas[data_operacion="3"] td.col-cliente {
    width: 250px !important;
    max-width: 250px !important;
}

#table-ventas[data_operacion="3"] th.col-total,
#table-ventas[data_operacion="3"] td.col-total {
    width: 50px !important;
    max-width: 50px !important;
}

#table-ventas[data_operacion="3"] th.col-estado,
#table-ventas[data_operacion="3"] td.col-estado {
    width: 125px !important;
    max-width: 125px !important;
}

#table-ventas[data_operacion="3"] th.col-checklist,
#table-ventas[data_operacion="3"] td.col-checklist,
#table-ventas[data_operacion="4"] th.col-checklist,
#table-ventas[data_operacion="4"] td.col-checklist {
    width: 165px !important;
    max-width: 165px !important;
    min-width: 165px !important;
    text-align: center;
}

#table-ventas[data_operacion="3"] th.col-acciones,
#table-ventas[data_operacion="3"] td.col-acciones {
    width: 70px !important;
    max-width: 70px !important;
    min-width: 70px !important;
}

/* ── Operación 4 (O.S.) — anchos propios ── */
#table-ventas[data_operacion="4"] th.col-estado,
#table-ventas[data_operacion="4"] td.col-estado {
    width: 220px !important;
    max-width: 220px !important;
}

#table-ventas[data_operacion="4"] th.col-acciones,
#table-ventas[data_operacion="4"] td.col-acciones {
    width: 120px !important;
    max-width: 120px !important;
    min-width: 120px !important;
}

/* ══════════════════════════════════════════════════════
   COMPONENTES DE CELDA (sin cambios)
   ══════════════════════════════════════════════════════ */

/* 📦 Contenedor del cliente */
.cliente-container {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    display: block !important;
}

.cliente-nombre {
    width: 100% !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    margin: 0 !important;
}

/* Encabezados */
#table-ventas th {
    padding-right: 5px;
}

/* ══════════════════════════════════════════════════════
   RESPONSIVE — Móviles (≤ 768px)
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .cliente-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        text-overflow: clip !important;
    }

    .cliente-nombre {
        overflow-x: auto !important;
        text-overflow: clip !important;
    }

    #table-ventas td.col-cliente {
        overflow: visible !important;
    }

    /* Op=1 Estado y Acciones en móvil */
    #table-ventas:not([data_operacion]) th.col-estado,
    #table-ventas:not([data_operacion]) td.col-estado,
    #table-ventas[data_operacion="1"] th.col-estado,
    #table-ventas[data_operacion="1"] td.col-estado {
        width: 240px !important;
        max-width: 240px !important;
        min-width: 240px !important;
    }

    #table-ventas:not([data_operacion]) th.col-acciones,
    #table-ventas:not([data_operacion]) td.col-acciones,
    #table-ventas[data_operacion="1"] th.col-acciones,
    #table-ventas[data_operacion="1"] td.col-acciones {
        width: 120px !important;
        max-width: 120px !important;
        min-width: 120px !important;
    }

    /* Op=3 responsive */
    #table-ventas[data_operacion="3"] th.col-fecha,
    #table-ventas[data_operacion="3"] td.col-fecha {
        width: 80px !important;
        max-width: 80px !important;
        min-width: 80px !important;
    }

    #table-ventas[data_operacion="3"] th.col-nroDoc,
    #table-ventas[data_operacion="3"] td.col-nroDoc {
        width: 90px !important;
        max-width: 90px !important;
        min-width: 90px !important;
    }

    #table-ventas[data_operacion="3"] th.col-cliente,
    #table-ventas[data_operacion="3"] td.col-cliente {
        width: 200px !important;
        max-width: 200px !important;
        min-width: 200px !important;
    }

    #table-ventas[data_operacion="3"] th.col-total,
    #table-ventas[data_operacion="3"] td.col-total {
        width: 70px !important;
        max-width: 70px !important;
        min-width: 70px !important;
    }

    #table-ventas[data_operacion="3"] th.col-estado,
    #table-ventas[data_operacion="3"] td.col-estado {
        width: 250px !important;
        max-width: 250px !important;
        min-width: 250px !important;
    }

    #table-ventas[data_operacion="4"] th.col-estado,
    #table-ventas[data_operacion="4"] td.col-estado {
        width: 250px !important;
        max-width: 250px !important;
        min-width: 250px !important;
    }

    #table-ventas[data_operacion="3"] th.col-checklist,
    #table-ventas[data_operacion="3"] td.col-checklist,
    #table-ventas[data_operacion="4"] th.col-checklist,
    #table-ventas[data_operacion="4"] td.col-checklist {
        width: 180px !important;
        max-width: 180px !important;
        min-width: 180px !important;
        white-space: nowrap;
    }

    #table-ventas[data_operacion="3"] th.col-acciones,
    #table-ventas[data_operacion="3"] td.col-acciones {
        width: 85px !important;
        max-width: 85px !important;
        min-width: 85px !important;
    }

    #table-ventas[data_operacion="4"] th.col-acciones,
    #table-ventas[data_operacion="4"] td.col-acciones {
        width: 105px !important;
        max-width: 105px !important;
        min-width: 105px !important;
    }
}

/* ══════════════════════════════════════════════════════
   SCROLLBARS — Desktop (≥ 769px)
   ══════════════════════════════════════════════════════ */
@media (min-width: 769px) {
    #table-ventas tbody tr td.col-cliente::-webkit-scrollbar {
        height: 6px;
    }
    #table-ventas tbody tr td.col-cliente::-webkit-scrollbar-track {
        background: rgba(146, 74, 239, 0.1);
        border-radius: 10px;
        margin: 2px;
    }
    #table-ventas tbody tr td.col-cliente::-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.col-cliente::-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);
    }

    /* Dark mode scrollbars desktop */
    :root .dark-mode #table-ventas tbody tr td.col-cliente::-webkit-scrollbar-track {
        background: rgba(21, 19, 43, 0.6);
    }
    :root .dark-mode #table-ventas tbody tr td.col-cliente::-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.col-cliente::-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);
    }

    /* Firefox scrollbars desktop */
    #table-ventas tbody tr td.col-cliente,
    .cliente-container,
    .cliente-nombre {
        scrollbar-width: thin;
        scrollbar-color: #924aef rgba(146, 74, 239, 0.1);
    }
    :root .dark-mode #table-ventas tbody tr td.col-cliente,
    :root .dark-mode .cliente-container,
    :root .dark-mode .cliente-nombre {
        scrollbar-width: thin;
        scrollbar-color: #924aef rgba(21, 19, 43, 0.6);
    }
}

/* ══════════════════════════════════════════════════════
   SCROLLBARS — Móviles (≤ 768px)
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .cliente-container::-webkit-scrollbar { height: 4px; }
    .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);
    }
    :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);
    }
    .cliente-container {
        scrollbar-width: thin;
        scrollbar-color: #924aef rgba(146, 74, 239, 0.1);
    }
    :root .dark-mode .cliente-container {
        scrollbar-width: thin;
        scrollbar-color: #924aef rgba(21, 19, 43, 0.6);
    }
}