/* Estilos responsive para modales optimizados */

/* ===== OPTIMIZACIÓN INICIAL: Ocultar filas hasta que JS las procese ===== */
/* CRÍTICO: Evita lag visual en primera apertura del modal */
#exampleModalCenter:not(.table-initialized) #clientes tbody tr {
    display: none !important;
}

/* Después de inicializar, JavaScript controla la visibilidad con .show()/.hide() */

/* ===== SCROLL HORIZONTAL GLOBAL PARA TABLAS ===== */
.modal .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    width: 100% !important;
}

/* ===== ALTURA Y ANCHO PARA MODAL COMPLETO DE CLIENTES ===== */
.modal#exampleModalCenter .modal-dialog {
    height: 90vh !important; /* 90% del viewport height */
    max-height: 90vh !important;
    width: 90% !important; /* 90% del ancho como vendedores */
    max-width: 90% !important;
    display: flex !important;
    align-items: center !important;
    margin: 5vh auto !important; /* Centrar verticalmente */
}

.modal#exampleModalCenter .modal-content {
    height: 100% !important;
    max-height: 100% !important;
    width: 100% !important; /* CRÍTICO: Forzar 100% del ancho */
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Admin: Forzar modal-content y modal-body a usar todo el ancho */
body.voyager .modal#exampleModalCenter .modal-content {
    width: 100% !important;
    box-sizing: border-box !important;
}

body.voyager .modal#exampleModalCenter .modal-body {
    width: 100% !important;
    box-sizing: border-box !important;
}

.modal#exampleModalCenter .modal-header {
    flex-shrink: 0 !important; /* No se encoge */
    padding: 1rem !important;
    background-color: #28a745 !important; /* Verde solo en header */
}

/* CRÍTICO: Asegurar que modal-body tenga fondo blanco y padding superior */
.modal#exampleModalCenter .modal-body {
    background-color: white !important;
    flex: 1 !important; /* Toma todo el espacio disponible */
    overflow: hidden !important; /* Sin scroll en modal-body */
    padding: 1.5rem 1rem 1rem 1rem !important; /* Más padding superior para separar del header */
    min-height: 0 !important; /* Importante para flexbox */
    display: flex !important;
    flex-direction: column !important;
}

/* Contenedor de búsqueda - tamaño fijo */
.modal#exampleModalCenter .modal-body .row {
    flex-shrink: 0 !important;
    margin-bottom: 1rem !important;
}

.modal#exampleModalCenter .table-responsive {
    flex: 1 !important; /* Toma el espacio restante */
    overflow-y: auto !important; /* SCROLL DENTRO DE LA TABLA */
    overflow-x: auto !important; /* Scroll horizontal también */
    border: 1px solid #dee2e6 !important;
    border-radius: 6px !important;
    min-height: 0 !important; /* Importante para flexbox */
}

/* Contenedor de paginación - tamaño fijo */
.modal#exampleModalCenter .modal-body #clientTablePaginate {
    flex-shrink: 0 !important;
    margin-top: 1rem !important;
}

/* ===== ALTURA Y ANCHO BASE PARA MODAL DE PRODUCTOS (SIN TRANSFORMS) ===== */
.modal#exampleModalCenter2 .modal-dialog {
    width: 80% !important; /* 80% del ancho para admin por defecto */
    max-width: 80% !important;
    height: 85vh !important; /* 85% del viewport height */
    max-height: 85vh !important;
    display: flex !important;
    align-items: center !important;
    margin: 7.5vh auto !important; /* Centrado tradicional para admin */
}

/* ===== ESTRUCTURA FLEXIBLE PARA MODAL DE PRODUCTOS ===== */
.modal#exampleModalCenter2 .modal-content {
    height: 100% !important;
    width: 100% !important; /* Forzar que use todo el ancho del modal-dialog */
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}

/* Header fijo del modal de productos */
.modal#exampleModalCenter2 .modal-header {
    flex-shrink: 0 !important;
    padding: 15px !important;
}

/* Body expandible con scroll interno */
.modal#exampleModalCenter2 .modal-body {
    flex: 1 !important;
    overflow: hidden !important;
    padding: 10px 15px 10px 15px !important; /* Reducido padding superior e inferior */
    display: flex !important;
    flex-direction: column !important;
}

/* Contenedor de tabla con scroll interno */
.modal#exampleModalCenter2 .table-responsive {
    flex: 1 !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 0.25rem !important;
    width: 100% !important; /* Forzar ancho completo */
    margin-top: 10px !important; /* Reducir espacio superior de la tabla */
}

/* Reducir espacios en los filtros y búsqueda */
.modal#exampleModalCenter2 .modal-body > div:first-child {
    margin-bottom: 8px !important; /* Menos espacio después de filtros y búsqueda */
}

.modal#exampleModalCenter2 #brandFilters {
    margin-bottom: 8px !important; /* Menos espacio después de filtros de marca */
}

.modal#exampleModalCenter2 .d-flex input[type="text"] {
    margin-bottom: 0 !important; /* Sin margen en campo de búsqueda */
}

/* Tabla usa todo el ancho disponible */
.modal#exampleModalCenter2 .table {
    width: 100% !important;
    table-layout: auto !important; /* Layout automático para que descripción se expanda */
    margin-bottom: 0 !important;
}

/* Filas dinámicas - contenido completo visible */
.modal#exampleModalCenter2 .table td,
.modal#exampleModalCenter2 .table th {
    white-space: normal !important; /* Permitir salto de línea */
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    vertical-align: top !important;
    padding: 8px !important;
    line-height: 1.4 !important;
}

/* ===== OPTIMIZACIÓN DE COLUMNAS PARA MODAL DE PRODUCTOS ===== */
/* Columna N° - mínimo espacio fijo */
.modal#exampleModalCenter2 .table th:nth-child(1),
.modal#exampleModalCenter2 .table td:nth-child(1) {
    width: 50px !important;
    max-width: 50px !important;
    min-width: 50px !important; /* Forzar ancho fijo */
    text-align: center !important;
    font-size: 0.85em !important;
}

/* Columna CÓDIGO - espacio más compacto */
.modal#exampleModalCenter2 .table th:nth-child(2),
.modal#exampleModalCenter2 .table td:nth-child(2) {
    width: 100px !important; /* Reducido de 120px a 100px */
    max-width: 100px !important;
    min-width: 100px !important;
    font-size: 0.85em !important;
}

/* Columna MARCA - espacio más compacto */
.modal#exampleModalCenter2 .table th:nth-child(3),
.modal#exampleModalCenter2 .table td:nth-child(3) {
    width: 120px !important; /* Reducido de 140px a 120px */
    max-width: 120px !important;
    min-width: 120px !important;
}

/* Columna DESCRIPCIÓN - forzar uso del 100% del ancho asignado EN TODOS LOS TAMAÑOS */
.modal#exampleModalCenter2 .table th:nth-child(4),
.modal#exampleModalCenter2 .table td:nth-child(4) {
    width: 35% !important; /* Reducido aproximadamente 20% del espacio total */
    min-width: 250px !important; /* Mínimo reducido también */
    max-width: 35% !important; /* Límite máximo para controlar espacio */
    white-space: normal !important; /* Permitir salto de línea */
    word-wrap: break-word !important; /* Forzar uso completo del ancho */
    word-break: break-word !important; /* Romper palabras si es necesario */
    hyphens: auto !important; /* Guiones automáticos para mejor distribución */
    vertical-align: top !important; /* Alineación superior para mejor distribución */
    line-height: 1.3 !important; /* Mejor espaciado entre líneas */
    text-align: justify !important; /* Justificar texto para usar todo el ancho */
    text-align-last: left !important; /* Última línea alineada a la izquierda */
    padding: 8px !important; /* Padding uniforme */
    box-sizing: border-box !important; /* Incluir padding en el ancho */
    display: table-cell !important; /* Forzar comportamiento de celda */
    text-justify: inter-word !important; /* Mejor justificación */
}

/* Columna PRECIO - espacio más compacto */
.modal#exampleModalCenter2 .table th:nth-child(5),
.modal#exampleModalCenter2 .table td:nth-child(5) {
    width: 70px !important; /* Reducido de 80px a 70px */
    max-width: 70px !important;
    min-width: 70px !important;
    text-align: right !important;
    font-size: 0.9em !important;
}

/* Columna STOCK - espacio más compacto */
.modal#exampleModalCenter2 .table th:nth-child(6),
.modal#exampleModalCenter2 .table td:nth-child(6) {
    width: 60px !important; /* Reducido de 70px a 60px */
    max-width: 60px !important;
    min-width: 60px !important;
    text-align: center !important;
    font-size: 0.9em !important;
}

/* Columna CANTIDAD - espacio más compacto */
.modal#exampleModalCenter2 .table th:nth-child(7),
.modal#exampleModalCenter2 .table td:nth-child(7) {
    width: 80px !important; /* Reducido de 90px a 80px */
    max-width: 80px !important;
    min-width: 80px !important;
    text-align: center !important;
}

/* Columna ACCIÓN - espacio mínimo absoluto fijo */
.modal#exampleModalCenter2 .table th:nth-child(8),
.modal#exampleModalCenter2 .table td:nth-child(8) {
    width: 45px !important; /* Espacio suficiente para centrar */
    max-width: 45px !important;
    min-width: 45px !important; /* Forzar ancho fijo */
    text-align: center !important;
    padding: 8px !important; /* Padding para centrado vertical */
    vertical-align: middle !important; /* Centrado vertical de la celda */
}

/* Ocultar texto del header "Acción" para ganar espacio */
.modal#exampleModalCenter2 .table th:nth-child(8) {
    font-size: 0 !important; /* Ocultar texto del header */
    line-height: 1 !important;
    vertical-align: middle !important;
}

/* Botón de acción redondo y perfectamente centrado */
.modal#exampleModalCenter2 .table td:nth-child(8) .btn {
    width: 30px !important; /* Ancho fijo para botón redondo */
    height: 30px !important; /* Altura fija para botón redondo */
    padding: 0 !important; /* Sin padding para botón redondo */
    font-size: 0.8em !important;
    min-width: auto !important;
    border-radius: 50% !important; /* Totalmente redondo */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important; /* Centrar horizontalmente */
}

/* ===== DIFERENCIACIÓN DESKTOP: VENDEDORES vs ADMIN ===== */
/* Vendedores: 95% ancho + transforms en desktop (views que usan modals_np.blade.php) */
@media (min-width: 993px) {
    body:not(.voyager) .modal#exampleModalCenter2 .modal-dialog {
        width: 95% !important;
        max-width: 95% !important;
        left: 50% !important; /* Forzar centrado horizontal para vendedores */
        transform: translateX(-50%) !important; /* Centrar desde el punto medio para vendedores */
        margin-left: 0 !important; /* Reset margin-left para vendedores */
        margin-right: 0 !important; /* Reset margin-right para vendedores */
    }

    /* Admin: 80% ancho en desktop - centrado tradicional */
    body.voyager .modal#exampleModalCenter2 .modal-dialog {
        width: 80% !important;
        max-width: 80% !important;
        margin: 7.5vh auto !important;
        left: auto !important;
        transform: none !important;
    }

    /* Admin: Forzar modal-content y modal-body a usar todo el ancho en desktop */
    body.voyager .modal#exampleModalCenter2 .modal-content {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    body.voyager .modal#exampleModalCenter2 .modal-body {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}


/* ===== RESPONSIVE PARA AMBOS MODALES DE PRODUCTOS ===== */
/* Tablet: 90% ancho para ambos (vendedores y admin) */
@media (max-width: 992px) {
    .modal#exampleModalCenter2 .modal-dialog {
        width: 90% !important; /* 90% en tablet para ambos */
        max-width: 90% !important;
        height: 85vh !important; /* Mantener altura fija */
        margin: 10vh auto !important; /* Centrado tradicional para admin */
    }

    /* Vendedores en tablet: aplicar transforms */
    body:not(.voyager) .modal#exampleModalCenter2 .modal-dialog {
        left: 50% !important; /* Forzar centrado horizontal en tablet para vendedores */
        transform: translateX(-50%) !important; /* Centrar desde el punto medio para vendedores */
        margin-left: 0 !important; /* Reset margin-left para vendedores */
        margin-right: 0 !important; /* Reset margin-right para vendedores */
    }

    /* Admin en tablet: centrado tradicional */
    body.voyager .modal#exampleModalCenter2 .modal-dialog {
        margin: 10vh auto !important;
        left: auto !important;
        transform: none !important;
    }

    /* Admin: Forzar modal-content y modal-body a usar todo el ancho en tablet */
    body.voyager .modal#exampleModalCenter2 .modal-content {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    body.voyager .modal#exampleModalCenter2 .modal-body {
        width: 100% !important;
        box-sizing: border-box !important;
    }


    /* Columnas más compactas en tablet para eliminar scroll horizontal */
    .modal#exampleModalCenter2 .table th:nth-child(2),
    .modal#exampleModalCenter2 .table td:nth-child(2) {
        width: 80px !important; /* CÓDIGO más compacto en tablet */
        max-width: 80px !important;
        min-width: 80px !important;
    }

    .modal#exampleModalCenter2 .table th:nth-child(3),
    .modal#exampleModalCenter2 .table td:nth-child(3) {
        width: 100px !important; /* MARCA más compacta en tablet */
        max-width: 100px !important;
        min-width: 100px !important;
    }

    .modal#exampleModalCenter2 .table th:nth-child(4),
    .modal#exampleModalCenter2 .table td:nth-child(4) {
        width: 32% !important; /* DESCRIPCIÓN un poco más de espacio en tablet */
        min-width: 200px !important;
        max-width: 32% !important;
        white-space: normal !important; /* Forzar salto de línea en tablet */
        height: auto !important; /* Altura automática para expandir */
        text-align: justify !important; /* Justificar texto en tablet también */
        padding-left: 8px !important; /* Usar ancho completo en tablet */
        padding-right: 8px !important; /* Usar ancho completo en tablet */
    }

    .modal#exampleModalCenter2 .table th:nth-child(5),
    .modal#exampleModalCenter2 .table td:nth-child(5) {
        width: 60px !important; /* PRECIO más compacto */
        max-width: 60px !important;
        min-width: 60px !important;
    }

    .modal#exampleModalCenter2 .table th:nth-child(6),
    .modal#exampleModalCenter2 .table td:nth-child(6) {
        width: 50px !important; /* STOCK más compacto */
        max-width: 50px !important;
        min-width: 50px !important;
    }

    .modal#exampleModalCenter2 .table th:nth-child(7),
    .modal#exampleModalCenter2 .table td:nth-child(7) {
        width: 70px !important; /* CANTIDAD más compacta */
        max-width: 70px !important;
        min-width: 70px !important;
    }
}

/* Móvil: 95% ancho para mejor uso del espacio */
@media (max-width: 576px) {
    .modal#exampleModalCenter2 .modal-dialog {
        width: 95% !important;
        max-width: 95% !important;
        height: 85vh !important; /* Mantener altura fija */
        margin: 10vh auto !important; /* Centrado tradicional para admin */
    }

    /* Vendedores en móvil: aplicar transforms */
    body:not(.voyager) .modal#exampleModalCenter2 .modal-dialog {
        left: 50% !important; /* Forzar centrado horizontal en móvil para vendedores */
        transform: translateX(-50%) !important; /* Centrar desde el punto medio para vendedores */
        margin-left: 0 !important; /* Reset margin-left para vendedores */
        margin-right: 0 !important; /* Reset margin-right para vendedores */
    }

    /* Admin en móvil: centrado tradicional */
    body.voyager .modal#exampleModalCenter2 .modal-dialog {
        margin: 10vh auto !important;
        left: auto !important;
        transform: none !important;
    }

    /* Admin: Forzar modal-content y modal-body a usar todo el ancho en móvil */
    body.voyager .modal#exampleModalCenter2 .modal-content {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    body.voyager .modal#exampleModalCenter2 .modal-body {
        width: 100% !important;
        box-sizing: border-box !important;
    }


    /* Descripción usando 100% del ancho también en móvil */
    .modal#exampleModalCenter2 .table th:nth-child(4),
    .modal#exampleModalCenter2 .table td:nth-child(4) {
        text-align: justify !important; /* Justificar texto en móvil también */
        padding-left: 6px !important; /* Usar ancho completo en móvil */
        padding-right: 6px !important; /* Usar ancho completo en móvil */
        word-spacing: 0.1em !important; /* Mejor distribución en móvil */
    }
}

/* Ajustes responsive para diferentes tamaños de pantalla */
@media (max-width: 992px) {
    .modal#exampleModalCenter .modal-dialog {
        height: 90vh !important; /* 90% en tablets */
        max-height: 90vh !important;
        margin: 5vh auto !important;
    }

    /* Admin: Forzar modal-content y modal-body a usar todo el ancho en tablets */
    body.voyager .modal#exampleModalCenter .modal-content {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    body.voyager .modal#exampleModalCenter .modal-body {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 576px) {
    .modal#exampleModalCenter .modal-dialog {
        height: 90vh !important; /* 90% en móviles también */
        max-height: 90vh !important;
        margin: 5vh auto !important;
    }

    /* Admin: Forzar modal-content y modal-body a usar todo el ancho en móviles */
    body.voyager .modal#exampleModalCenter .modal-content {
        width: 100% !important;
        box-sizing: border-box !important;
    }

    body.voyager .modal#exampleModalCenter .modal-body {
        width: 100% !important;
        box-sizing: border-box !important;
    }
}

.modal #clientes {
    min-width: 650px !important; /* Reducido por texto multilínea */
    width: auto !important;
    table-layout: auto !important;
}

/* ===== CONFIGURACIÓN BASE PARA TODAS LAS CELDAS ===== */
.modal #clientes tbody td {
    line-height: 1.4 !important;
    vertical-align: top !important;
    padding: 8px 6px !important;
    height: auto !important;
    position: relative !important;
}

/* ===== COLUMNAS MULTILÍNEA (SIN ALTURA MÁXIMA FIJA) ===== */
.modal #clientes tbody td:nth-child(2), /* RAZÓN SOCIAL */
.modal #clientes tbody td:nth-child(4), /* GIRO */
.modal #clientes tbody td:nth-child(5), /* REGIÓN */
.modal #clientes tbody td:nth-child(6), /* COMUNA */
.modal #clientes tbody td:nth-child(7) { /* DIRECCIÓN */
    white-space: normal !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    height: auto !important; /* Altura automática para evitar cortes */
    max-height: none !important; /* Sin límite de altura */
    overflow: visible !important; /* Mostrar todo el contenido */
}

/* Efecto de fade REMOVIDO - causaba líneas de corte */

/* Anchos específicos por columna optimizados */
.modal #clientes tbody td:nth-child(1) { /* N° - Más pequeño */
    max-width: 35px !important;
    min-width: 30px !important;
    text-align: center !important;
    font-size: 11px !important;
    height: auto !important;
    max-height: none !important; /* Permitir altura completa */
    padding: 8px 2px !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
}

.modal #clientes tbody td:nth-child(2) { /* RAZÓN SOCIAL - Reducir 20% */
    max-width: 160px !important;
    min-width: 120px !important;
}

.modal #clientes tbody td:nth-child(3) { /* RUT - Tomar 100% del contenido */
    width: auto !important;
    min-width: 80px !important;
    max-width: 120px !important; /* Aumentado para acomodar contenido completo */
    height: auto !important; /* Altura automática */
    max-height: none !important; /* Sin límite de altura */
    white-space: normal !important;
    word-wrap: break-word !important;
    overflow: visible !important; /* Mostrar contenido completo */
}

/* Configuración específica por columna para mejor display */
.modal #clientes tbody td:nth-child(2), /* RAZÓN SOCIAL */
.modal #clientes tbody td:nth-child(5), /* REGIÓN */
.modal #clientes tbody td:nth-child(6), /* COMUNA */
.modal #clientes tbody td:nth-child(7) { /* DIRECCIÓN */
    line-height: 1.5 !important;
    word-spacing: 1px !important;
    letter-spacing: 0.2px !important;
}

/* GIRO - Configuración especial para arreglar el display extraño */
.modal #clientes tbody td:nth-child(4) { /* GIRO */
    line-height: 1.4 !important; /* Línea más compacta */
    word-spacing: 0px !important; /* Sin espaciado adicional entre palabras */
    letter-spacing: 0px !important; /* Sin espaciado entre letras */
    display: table-cell !important; /* Forzar display de celda de tabla */
    box-sizing: border-box !important; /* Incluir padding en el ancho */
}

.modal #clientes tbody td:nth-child(4) { /* GIRO - Reducir 20% del tamaño anterior */
    max-width: 264px !important; /* 330px - 20% = 264px */
    min-width: 200px !important; /* 250px - 20% = 200px */
}

.modal #clientes tbody td:nth-child(5) { /* REGIÓN - Mantener igual */
    max-width: 120px !important;
    min-width: 100px !important;
}

.modal #clientes tbody td:nth-child(6) { /* COMUNA - Mantener igual */
    max-width: 120px !important;
    min-width: 100px !important;
}

.modal #clientes tbody td:nth-child(7) { /* DIRECCIÓN - Reducir 20% */
    max-width: 160px !important;
    min-width: 120px !important;
}

/* ===== COLUMNAS DE UNA LÍNEA (EMAIL Y FONO) ===== */
.modal #clientes tbody td:nth-child(8), /* EMAIL */
.modal #clientes tbody td:nth-child(9) { /* FONO */
    white-space: nowrap !important;
    overflow: visible !important; /* Permitir que se vea completamente */
    text-overflow: clip !important; /* No truncar el texto */
    vertical-align: middle !important;
    width: auto !important; /* Tomar ancho del contenido */
}

.modal #clientes tbody td:nth-child(8) { /* EMAIL - Expandido para contenido completo */
    max-width: none !important; /* Remover límite máximo para desktop */
    min-width: 180px !important;
    width: auto !important; /* Forzar ancho automático basado en contenido */
}

.modal #clientes tbody td:nth-child(9) { /* FONO - Expandido para contenido completo */
    max-width: none !important; /* Remover límite máximo para desktop */
    min-width: 140px !important;
    width: auto !important; /* Forzar ancho automático basado en contenido */
}

/* OVERRIDE CRÍTICO: Forzar EMAIL y FONO a tomar ancho completo del contenido */
.modal #clientes tbody td:nth-child(8),
.modal #exampleModalCenter #clientes tbody td:nth-child(8) {
    max-width: none !important;
    width: auto !important;
    min-width: 180px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

.modal #clientes tbody td:nth-child(9),
.modal #exampleModalCenter #clientes tbody td:nth-child(9) {
    max-width: none !important;
    width: auto !important;
    min-width: 140px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
}

/* OVERRIDE CRÍTICO: Headers EMAIL y FONO */
.modal #clientes thead th:nth-child(8),
.modal #exampleModalCenter #clientes thead th:nth-child(8) {
    max-width: none !important;
    width: auto !important;
    min-width: 180px !important;
}

.modal #clientes thead th:nth-child(9),
.modal #exampleModalCenter #clientes thead th:nth-child(9) {
    max-width: none !important;
    width: auto !important;
    min-width: 140px !important;
}

/* Headers para todas las columnas */
.modal #clientes thead th {
    white-space: normal !important;
    word-wrap: break-word !important;
    text-align: center !important;
    vertical-align: middle !important;
    padding: 8px 6px !important;
    height: auto !important;
    min-height: 50px !important;
}

/* Anchos específicos para headers - Coinciden con columnas de datos */
.modal #clientes thead th:nth-child(1) { max-width: 35px !important; min-width: 30px !important; }
.modal #clientes thead th:nth-child(2) { max-width: 160px !important; min-width: 120px !important; }
.modal #clientes thead th:nth-child(3) { max-width: 120px !important; min-width: 80px !important; } /* RUT expandido */
.modal #clientes thead th:nth-child(4) { max-width: 264px !important; min-width: 200px !important; } /* GIRO reducido 20% */
.modal #clientes thead th:nth-child(5) { max-width: 120px !important; min-width: 100px !important; }
.modal #clientes thead th:nth-child(6) { max-width: 120px !important; min-width: 100px !important; }
.modal #clientes thead th:nth-child(7) { max-width: 160px !important; min-width: 120px !important; }
.modal #clientes thead th:nth-child(8) { max-width: none !important; min-width: 180px !important; width: auto !important; } /* EMAIL sin límite para desktop */
.modal #clientes thead th:nth-child(9) { max-width: none !important; min-width: 140px !important; width: auto !important; } /* FONO sin límite para desktop */

/* Altura flexible de filas sin restricciones */
.modal #clientes tbody tr {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    vertical-align: top !important;
}

/* Asegurar que la tabla tenga ancho total apropiado */
.modal #clientes {
    width: 100% !important; /* CRÍTICO: Usar 100% del ancho disponible */
    table-layout: auto !important; /* Auto para que columnas se ajusten */
}

/* FORZAR que table-responsive use todo el ancho */
.modal#exampleModalCenter .table-responsive {
    width: 100% !important;
    overflow-x: auto !important;
}

/* OVERRIDE: Remover min-width fijo que causa espacio en blanco */
body.voyager .modal #clientes {
    min-width: 0 !important; /* Permitir que tabla use solo el espacio necesario */
}

/* Última columna (Fono) debe expandirse para llenar espacio disponible */
.modal #clientes thead th:nth-child(10),
.modal #clientes tbody td:nth-child(10) {
    width: 1% !important; /* Truco: 1% + white-space:nowrap = se expande automáticamente */
    white-space: nowrap !important;
}

/* ===== MODAL DE SELECCIÓN DE BODEGA ===== */
.bodega-card {
    border-radius: 12px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}

.bodega-card .card-body {
    padding: 1.5rem !important;
}

.bodega-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(104, 91, 199, 0.2) !important;
}

@media (max-width: 768px) {
    .bodega-card {
        min-height: 140px !important;
    }

    .bodega-card .card-body {
        padding: 1rem !important;
    }

    .bodega-card h5 {
        font-size: 1rem !important;
    }

    .bodega-card i {
        font-size: 2em !important;
    }
}

/* ===== MODALES DE CLIENTES Y PRODUCTOS ===== */
.modal-xl {
    max-width: 95% !important;
}

.modal-body {
    padding: 1rem !important;
}

/* Optimización específica para columna N° */
.modal .table td:first-child,
.modal .table th:first-child {
    text-align: center !important;
    padding-left: 0.2rem !important;
    padding-right: 0.2rem !important;
    font-weight: 600 !important;
    min-width: 35px !important;
    max-width: 40px !important;
}

/* Control de responsive DataTables - simplificado */
.modal .table td.dtr-control {
    background-color: #685bc7 !important;
    color: white !important;
    text-align: center !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    border-radius: 4px !important;
    width: 3% !important;
    min-width: 30px !important;
    max-width: 35px !important;
}

.modal .table td.dtr-control:hover {
    background-color: #5a4eb5 !important;
}

.modal .table td.dtr-control::before {
    content: '+' !important;
    font-weight: bold !important;
    font-size: 14px !important;
}

.modal .table tr.parent td.dtr-control::before {
    content: '-' !important;
}

/* Mejorar visibilidad de filas de detalles */
.modal .table tr.child {
    background-color: #f8f9fa !important;
}

.modal .table tr.child td {
    border-top: none !important;
    padding: 0.75rem !important;
}

.modal .table tr.child ul.dtr-details {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.modal .table tr.child ul.dtr-details li {
    padding: 6px 0 !important;
    border-bottom: 1px solid #dee2e6 !important;
    font-size: 0.9rem !important;
}

.modal .table tr.child span.dtr-title {
    font-weight: bold !important;
    color: #685bc7 !important;
    display: inline-block !important;
    min-width: 80px !important;
}

.modal .table tr.child span.dtr-data {
    margin-left: 8px !important;
}

/* Mejorar tablas en modales */
.modal .table td,
.modal .table th {
    padding: 0.75rem !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.modal .table-sm td,
.modal .table-sm th {
    padding: 0.3rem !important;
    font-size: 0.8rem !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* Optimizar espacios para mostrar más columnas */
.modal .table {
    margin-bottom: 0.5rem !important;
}

.modal .table-sm {
    font-size: 0.8rem !important;
    margin-bottom: 0.5rem !important;
}

/* Hacer que el texto se ajuste mejor - EXCEPTO DESCRIPCIONES, EMAIL Y FONO */
.modal .table td:not(:nth-child(8)):not(:nth-child(9)) {
    max-width: 150px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    padding: 8px 6px !important;
    vertical-align: top !important;
}

/* Aumentar altura de filas para acomodar 2 líneas */
.modal .table tbody tr {
    min-height: 55px !important;
}

/* Columnas de descripción con 2 líneas máximo */
.modal .table td:nth-child(4),
.modal .table td[class*="descripcion"],
.modal .table td:has(span[class*="descripcion"]) {
    min-width: 250px !important;
    max-width: 350px !important;
    width: auto !important;
    white-space: normal !important;
    line-height: 1.4 !important;
    max-height: none !important;
    overflow: visible !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    text-overflow: unset !important;
    word-wrap: break-word !important;
    padding: 10px 8px !important;
}

/* ===== HOVER COMPLETAMENTE LIMPIO - MÁXIMA PRIORIDAD ===== */
/* NUCLEAR: Eliminar TODOS los hovers de celdas individuales */
table#clientes tbody td:hover,
.modal table#clientes tbody td:hover,
.modal #exampleModalCenter table#clientes tbody td:hover,
.modal .table tbody td:hover,
.modal .table-hover tbody td:hover,
.table-hover tbody td:hover,
body .modal table#clientes tbody td:hover,
body .modal #exampleModalCenter table#clientes tbody td:hover {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: none !important;
    text-decoration: none !important;
    outline: none !important;
    border-bottom: 1px solid #dee2e6 !important;
}




/* FORZAR hover de fila COMPLETA únicamente */
body .modal#exampleModalCenter table#clientes.table-hover tbody tr:hover {
    background-color: rgba(104, 91, 199, 0.1) !important;
    background: rgba(104, 91, 199, 0.1) !important;
}

/* FORZAR que TODAS las celdas de la fila tengan EL MISMO fondo */
body .modal#exampleModalCenter table#clientes.table-hover tbody tr:hover td,
body .modal#exampleModalCenter table#clientes.table-hover tbody tr:hover > td {
    background-color: rgba(104, 91, 199, 0.1) !important;
    background: rgba(104, 91, 199, 0.1) !important;
    border-bottom: 1px solid #dee2e6 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

/* Base limpia para todas las celdas */
table#clientes tbody td,
.modal table#clientes tbody td {
    border: none !important;
    border-bottom: 1px solid #dee2e6 !important;
    background: transparent !important;
    cursor: pointer !important;
}

/* Mejorar headers de tabla */
.modal .thead-light th {
    background-color: #f8f9fa !important;
    border-bottom: 2px solid #dee2e6 !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.5px !important;
    color: #495057 !important;
    white-space: nowrap !important;
    text-align: center !important;
    vertical-align: middle !important;
    position: relative !important;
    z-index: 10 !important;
    padding: 10px 8px !important;
    min-width: 80px !important;
}

/* Headers específicos para tabla de clientes - vendedores y admin - PRIORIDAD ALTA */
.modal #clientes.table .thead-light th,
.modal #exampleModalCenter .table .thead-light th,
.modal #clientes .thead-light th,
.modal #exampleModalCenter .thead-light th {
    font-size: 0.65rem !important;
    padding: 8px 4px !important;
    word-wrap: break-word !important;
    white-space: normal !important;
    line-height: 1.1 !important;
    text-align: center !important;
    vertical-align: middle !important;
    height: 50px !important;
    overflow: visible !important;
    text-overflow: unset !important;
}

/* Distribución específica de anchos para headers de clientes */
.modal #clientes .thead-light th:nth-child(1),
.modal #exampleModalCenter .thead-light th:nth-child(1) {
    width: 3% !important;
    min-width: 40px !important;
    max-width: 50px !important;
}

.modal #clientes .thead-light th:nth-child(2),
.modal #exampleModalCenter .thead-light th:nth-child(2) {
    width: 20% !important;
    min-width: 150px !important;
}

.modal #clientes .thead-light th:nth-child(3),
.modal #exampleModalCenter .thead-light th:nth-child(3) {
    width: 10% !important;
    min-width: 100px !important;
}

.modal #clientes .thead-light th:nth-child(4),
.modal #exampleModalCenter .thead-light th:nth-child(4) {
    width: 18% !important;
    min-width: 140px !important;
}

.modal #clientes .thead-light th:nth-child(5),
.modal #exampleModalCenter .thead-light th:nth-child(5) {
    width: 8% !important;
    min-width: 80px !important;
}

.modal #clientes .thead-light th:nth-child(6),
.modal #exampleModalCenter .thead-light th:nth-child(6) {
    width: 8% !important;
    min-width: 80px !important;
}

.modal #clientes .thead-light th:nth-child(7),
.modal #exampleModalCenter .thead-light th:nth-child(7) {
    width: 20% !important;
    min-width: 150px !important;
}

.modal #clientes .thead-light th:nth-child(8),
.modal #exampleModalCenter .thead-light th:nth-child(8) {
    width: 8% !important;
    min-width: 80px !important;
}

.modal #clientes .thead-light th:nth-child(9),
.modal #exampleModalCenter .thead-light th:nth-child(9) {
    width: 5% !important;
    min-width: 60px !important;
}

/* Headers específicos de clientes para mobile - PRIORIDAD ALTA */
@media (max-width: 768px) {
    .modal #clientes.table .thead-light th,
    .modal #exampleModalCenter .table .thead-light th,
    .modal #clientes .thead-light th,
    .modal #exampleModalCenter .thead-light th {
        font-size: 0.6rem !important;
        padding: 6px 2px !important;
        min-width: 60px !important;
        max-width: 80px !important;
        line-height: 1.0 !important;
        height: 45px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        text-overflow: unset !important;
        overflow: visible !important;
    }
}

/* Asegurar que los headers se mantengan visibles en responsive */
.modal .table.dataTable thead th {
    position: relative !important;
    background-color: #f8f9fa !important;
    border-bottom: 2px solid #dee2e6 !important;
    font-weight: 600 !important;
    padding: 8px 6px !important;
    min-width: 50px !important;
}

/* Corregir headers que desaparecen en DataTables responsive */
.modal table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child {
    position: relative !important;
}
.modal table.dataTable.dtr-inline.collapsed > tbody > tr[role="row"] > td:first-child:before {
    content: "" !important;
}

/* Forzar que DataTables mantenga la estructura de headers */
.modal .dataTables_wrapper .dataTables_scroll .dataTables_scrollHead table {
    margin-bottom: 0 !important;
}

.modal .dataTables_wrapper .dataTables_scroll .dataTables_scrollHead table thead th {
    border-bottom: 2px solid #dee2e6 !important;
    background-color: #f8f9fa !important;
}

/* Evitar que los headers se colapsen incorrectamente */
.modal table.dataTable thead th {
    position: relative !important;
    box-sizing: border-box !important;
}

/* Asegurar visibilidad en todas las resoluciones */
@media (max-width: 576px) {
    .modal .table thead th {
        font-size: 0.6rem !important;
        padding: 4px 2px !important;
        max-width: 60px !important;
    }
}

/* ===== BOTONES OPTIMIZADOS ===== */
.add_product {
    min-width: 35px !important;
    height: 35px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 1.2em !important;
    font-weight: bold !important;
    border-radius: 50% !important;
    padding: 0 !important;
    border: none !important;
    transition: all 0.2s ease !important;
}

.add_product:hover {
    transform: scale(1.1) !important;
    box-shadow: 0 3px 8px rgba(40, 167, 69, 0.3) !important;
}

.add_product:active {
    transform: scale(0.95) !important;
}

/* ===== FILTROS DE MARCA OPTIMIZADOS ===== */
.brand-filter {
    margin: 2px !important;
    padding: 4px 8px !important;
    font-size: 0.7rem !important;
    border-radius: 15px !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.brand-filter:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.brand-filter.active {
    background-color: #685bc7 !important;
    border-color: #685bc7 !important;
    color: white !important;
}

/* Estilos para imágenes de marca - tamaño 100% del botón */
.brand-filter-image .brand-logo {
    height: 45px !important;
    width: auto !important;
    max-width: 100% !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

.brand-filter-image {
    padding: 8px 12px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 50px !important;
    min-width: 65px !important;
    border: 3px solid #e0e0e0 !important;
    background: white !important;
    border-radius: 16px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.brand-filter-image:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border-color: #007bff !important;
}

.brand-filter-image.active {
    background: white !important;
    border-color: #28a745 !important;
    box-shadow: 0 6px 20px rgba(40,167,69,0.3);
    transform: scale(1.02);
}

/* Botón "Todas" mejorado */
.brand-filter-all {
    padding: 8px 12px !important;
    border: 3px solid #6c757d !important;
    background: white !important;
    border-radius: 16px !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    min-height: 50px !important;
    min-width: 65px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

.brand-filter-all:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(0,0,0,0.15);
    border-color: #495057 !important;
}

.brand-filter-all.active {
    background: linear-gradient(135deg, #6c757d 0%, #495057 100%) !important;
    border-color: #495057 !important;
    box-shadow: 0 6px 20px rgba(108,117,125,0.4);
    transform: scale(1.02);
}

.brand-filter-all .fa {
    font-size: 18px !important;
    color: #6c757d !important;
    transition: all 0.3s ease !important;
}

.brand-filter-all.active .fa {
    color: white !important;
    transform: scale(1.1);
}

/* ===== CAMPO DE CANTIDAD DE PRODUCTOS ===== */
.modal .table input[type="number"].form-control[class*="stock_amount_"] {
    width: 70% !important;
    min-width: 60px !important;
    max-width: 80px !important;
}

/* ===== CAMPO DE BÚSQUEDA ===== */
.modal #searchInput {
    border-radius: 25px !important;
    border: 2px solid #e9ecef !important;
    padding: 0.5rem 1rem !important;
    font-size: 0.9rem !important;
    transition: border-color 0.3s ease !important;
}

.modal #searchInput:focus {
    border-color: #685bc7 !important;
    box-shadow: 0 0 0 0.2rem rgba(104, 91, 199, 0.25) !important;
}

.modal #clearSearch {
    border-radius: 25px !important;
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    padding: 0.5rem 1rem !important;
}

/* ===== BUSCADOR A LA DERECHA ===== */
.modal .dataTables_filter {
    text-align: right !important;
    margin-bottom: 1rem !important;
    float: right !important;
}

.modal .dataTables_filter label {
    display: inline-flex !important;
    align-items: center !important;
    font-weight: 600 !important;
    color: #495057 !important;
}

.modal .dataTables_filter input {
    margin-left: 10px !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    border: 1px solid #dee2e6 !important;
    font-size: 13px !important;
    width: 200px !important;
    transition: border-color 0.3s ease !important;
}

.modal .dataTables_filter input:focus {
    border-color: #685bc7 !important;
    box-shadow: 0 0 0 0.15rem rgba(104, 91, 199, 0.15) !important;
    outline: none !important;
}

/* ===== PAGINACIÓN ESTILO PRODUCTOS ===== */
.modal .dataTables_paginate {
    text-align: center !important;
    margin-top: 1rem !important;
    float: none !important;
    clear: both !important;
}

/* Asegurar que el contenedor de paginación esté centrado */
.modal .dataTables_wrapper .dataTables_paginate {
    text-align: center !important;
    margin: 1rem 0 !important;
    float: none !important;
    clear: both !important;
    width: 100% !important;
}

.modal .dataTables_paginate .paginate_button {
    display: inline-block !important;
    float: none !important;
    background: #fff !important;
    border: 1px solid #dee2e6 !important;
    color: #495057 !important;
    margin: 0 1px !important;
    border-radius: 3px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    transition: all 0.2s ease !important;
}

.modal .dataTables_paginate .paginate_button:hover {
    background: #f8f9fa !important;
    border-color: #685bc7 !important;
    color: #685bc7 !important;
}

.modal .dataTables_paginate .paginate_button.current {
    background: #685bc7 !important;
    border-color: #685bc7 !important;
    color: white !important;
}

.modal .dataTables_paginate .paginate_button.disabled {
    background: #f8f9fa !important;
    border-color: #e9ecef !important;
    color: #6c757d !important;
    cursor: not-allowed !important;
}

/* Estilo para paginación con números - más visible */
.modal .dataTables_wrapper .dataTables_paginate .paging_full_numbers .paginate_button {
    min-width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    line-height: 1 !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    margin: 0 2px !important;
}

/* Mantener buscador a la derecha */
.modal #clientes_wrapper .dataTables_filter {
    text-align: right !important;
    float: right !important;
    margin-bottom: 1rem !important;
}

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Forzar responsive en tablets grandes */
@media (max-width: 1200px) {
    .modal .table {
        width: 100% !important;
        table-layout: auto !important;
    }

    /* MANTENER anchos específicos en lugar de forzar min-width genérico */
    .modal #clientes {
        min-width: 1300px !important;
    }

    /* NO sobrescribir anchos específicos de columnas */
    .modal #clientes thead th {
        font-size: 0.7rem !important;
        padding: 8px 4px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        /* REMOVIDO: min-width genérico que causaba problemas */
    }
}

/* Tablets */
@media (max-width: 992px) {
    .modal-xl {
        max-width: 90% !important;
    }

    /* FORZAR scroll horizontal en tablets para mantener todas las columnas */
    .modal .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .modal #clientes {
        min-width: 1300px !important; /* Ancho completo para tablets */
    }

    .modal .table-sm td,
    .modal .table-sm th {
        padding: 0.25rem !important;
        font-size: 0.75rem !important;
    }

    .brand-filter {
        font-size: 0.65rem !important;
        padding: 3px 6px !important;
        border-radius: 12px !important;
    }

    .brand-filter-image .brand-logo {
        height: 38px !important;
        max-width: 100% !important;
    }
    .brand-filter-image {
        min-height: 42px !important;
        min-width: 55px !important;
        padding: 6px 10px !important;
    }
    .brand-filter-all {
        min-height: 42px !important;
        min-width: 55px !important;
        padding: 6px 10px !important;
    }
    .brand-filter-all .fa {
        font-size: 16px !important;
    }

    /* Mantener headers visibles pero mejorar su display en tablets */
    .modal .table thead th {
        font-size: 0.7rem !important;
        padding: 6px 4px !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        max-width: 100px !important;
    }

    /* Headers específicos para clientes en tablets - MANTENER anchos específicos */
    .modal #clientes.table .thead-light th,
    .modal #exampleModalCenter .table .thead-light th,
    .modal #clientes .thead-light th,
    .modal #exampleModalCenter .thead-light th {
        font-size: 0.62rem !important;
        padding: 7px 3px !important;
        /* REMOVIDO: min-width y max-width genéricos que colapsaban columnas */
        white-space: normal !important;
        line-height: 1.05 !important;
        height: 48px !important;
        word-wrap: break-word !important;
        text-overflow: unset !important;
        overflow: visible !important;
    }

    /* MANTENER todas las columnas visibles - permitir scroll horizontal si es necesario */
    .modal .table thead th:nth-child(8),
    .modal .table thead th:nth-child(9) {
        min-width: 100px !important;
        width: auto !important;
        font-size: 11px !important;
        padding: 6px 4px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        line-height: 1.2 !important;
    }

    /* Asegurar texto completo visible en tablets */
    .modal #clientes tbody td {
        font-size: 12px !important;
        padding: 7px 5px !important;
        line-height: 1.3 !important;
        /* REMOVIDO: max-height: none que sobrescribía las reglas específicas */
    }

    /* Filas más altas en tablets para acomodar hasta 6 líneas */
    .modal #clientes tbody tr {
        min-height: 140px !important;
        max-height: 160px !important;
    }

    /* FORZAR anchos específicos de columnas en tablets - MÁXIMA PRIORIDAD */
    .modal #exampleModalCenter #clientes thead th:nth-child(1),
    .modal #clientes.table thead th:nth-child(1) { max-width: 35px !important; min-width: 30px !important; width: 35px !important; }

    .modal #exampleModalCenter #clientes thead th:nth-child(2),
    .modal #clientes.table thead th:nth-child(2) { max-width: 160px !important; min-width: 120px !important; width: 160px !important; }

    .modal #exampleModalCenter #clientes thead th:nth-child(3),
    .modal #clientes.table thead th:nth-child(3) { max-width: 120px !important; min-width: 80px !important; width: 120px !important; }

    .modal #exampleModalCenter #clientes thead th:nth-child(4),
    .modal #clientes.table thead th:nth-child(4) { max-width: 264px !important; min-width: 200px !important; width: 264px !important; }

    .modal #exampleModalCenter #clientes thead th:nth-child(5),
    .modal #clientes.table thead th:nth-child(5) { max-width: 120px !important; min-width: 100px !important; width: 120px !important; }

    .modal #exampleModalCenter #clientes thead th:nth-child(6),
    .modal #clientes.table thead th:nth-child(6) { max-width: 120px !important; min-width: 100px !important; width: 120px !important; }

    .modal #exampleModalCenter #clientes thead th:nth-child(7),
    .modal #clientes.table thead th:nth-child(7) { max-width: 160px !important; min-width: 120px !important; width: 160px !important; }

    .modal #exampleModalCenter #clientes thead th:nth-child(8),
    .modal #clientes.table thead th:nth-child(8) { max-width: none !important; min-width: 180px !important; width: auto !important; }

    .modal #exampleModalCenter #clientes thead th:nth-child(9),
    .modal #clientes.table thead th:nth-child(9) { max-width: none !important; min-width: 140px !important; width: auto !important; }

    /* FORZAR anchos específicos de CELDAS en tablets - MÁXIMA PRIORIDAD */
    .modal #exampleModalCenter #clientes tbody td:nth-child(1),
    .modal #clientes.table tbody td:nth-child(1) { max-width: 35px !important; min-width: 30px !important; width: 35px !important; }

    .modal #exampleModalCenter #clientes tbody td:nth-child(2),
    .modal #clientes.table tbody td:nth-child(2) { max-width: 160px !important; min-width: 120px !important; width: 160px !important; }

    .modal #exampleModalCenter #clientes tbody td:nth-child(3),
    .modal #clientes.table tbody td:nth-child(3) { max-width: 120px !important; min-width: 80px !important; width: 120px !important; }

    .modal #exampleModalCenter #clientes tbody td:nth-child(4),
    .modal #clientes.table tbody td:nth-child(4) { max-width: 264px !important; min-width: 200px !important; width: 264px !important; }

    .modal #exampleModalCenter #clientes tbody td:nth-child(5),
    .modal #clientes.table tbody td:nth-child(5) { max-width: 120px !important; min-width: 100px !important; width: 120px !important; }

    .modal #exampleModalCenter #clientes tbody td:nth-child(6),
    .modal #clientes.table tbody td:nth-child(6) { max-width: 120px !important; min-width: 100px !important; width: 120px !important; }

    .modal #exampleModalCenter #clientes tbody td:nth-child(7),
    .modal #clientes.table tbody td:nth-child(7) { max-width: 160px !important; min-width: 120px !important; width: 160px !important; }

    .modal #exampleModalCenter #clientes tbody td:nth-child(8),
    .modal #clientes.table tbody td:nth-child(8) { max-width: none !important; min-width: 180px !important; width: auto !important; }

    .modal #exampleModalCenter #clientes tbody td:nth-child(9),
    .modal #clientes.table tbody td:nth-child(9) { max-width: none !important; min-width: 140px !important; width: auto !important; }

    /* OVERRIDE FINAL - Asegurar que no hay table-layout fixed */
    .modal table,
    .modal .table,
    .modal #clientes,
    .modal #exampleModalCenter #clientes {
        table-layout: auto !important;
    }

    /* ASEGURAR scroll horizontal cuando sea necesario */
    .modal .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .modal #exampleModalCenter #clientes,
    .modal #clientes.table,
    .modal #clientes {
        min-width: 1300px !important; /* Ancho completo para tablets */
        table-layout: auto !important; /* FORZAR layout automático */
        width: auto !important;
    }

    /* OVERRIDE CRÍTICO: Headers de clientes deben prevalecer sobre reglas generales */
    .modal div#exampleModalCenter .table thead.thead-light th,
    .modal div#clientes .table thead.thead-light th {
        font-size: 0.62rem !important;
        padding: 7px 3px !important;
        min-width: 70px !important;
        max-width: 100px !important;
        white-space: normal !important;
        line-height: 1.05 !important;
        height: 48px !important;
        word-wrap: break-word !important;
        text-overflow: unset !important;
        overflow: visible !important;
        text-align: center !important;
        vertical-align: middle !important;
    }

    /* Forzar responsive específico para admin clientes en tablets */
    #clientes {
        width: 100% !important;
        table-layout: auto !important;
    }

    #clientes thead th {
        font-size: 0.62rem !important;
        padding: 7px 3px !important;
        min-width: 70px !important;
        max-width: 100px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        line-height: 1.05 !important;
        height: 48px !important;
    }
}

/* Móviles */
@media (max-width: 768px) {
    .modal-xl {
        max-width: 98% !important;
        margin: 0.5rem auto !important;
    }

    .modal-dialog {
        margin: 0.5rem auto !important;
    }

    .modal-body {
        padding: 0.75rem !important;
    }

    /* FORZAR scroll horizontal en móviles para mantener todas las columnas */
    .modal .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        min-width: 100% !important;
    }

    .modal #clientes {
        min-width: 1300px !important; /* Ancho completo para móviles */
    }

    .modal .table-sm td,
    .modal .table-sm th {
        padding: 0.25rem !important;
        font-size: 0.75rem !important;
    }

    /* Headers específicos para móviles */
    .modal .thead-light th {
        font-size: 0.65rem !important;
        padding: 6px 3px !important;
        white-space: nowrap !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        max-width: 70px !important;
        line-height: 1.2 !important;
    }

    /* Asegurar que los headers críticos siempre estén visibles */
    .modal .table thead th:nth-child(1),
    .modal .table thead th:nth-child(2),
    .modal .table thead th:nth-child(3),
    .modal .table thead th:nth-child(4) {
        display: table-cell !important;
    }

    /* MANTENER todas las columnas visibles - incluso en móviles usar scroll horizontal */
    .modal .table thead th:nth-child(n+6) {
        min-width: 80px !important;
        font-size: 10px !important;
        padding: 4px 2px !important;
        word-wrap: break-word !important;
        white-space: normal !important;
        line-height: 1.2 !important;
    }

    /* Asegurar texto completo visible en móviles */
    .modal #clientes tbody td {
        font-size: 11px !important;
        padding: 6px 4px !important;
        line-height: 1.3 !important;
        max-height: none !important;
    }

    /* Filas más altas en móviles para acomodar 3 líneas si es necesario */
    .modal #clientes tbody tr {
        min-height: 80px !important;
    }

    /* Optimizaciones específicas para columnas en móviles */
    .modal #clientes tbody td:nth-child(1) { /* N° - Extra pequeño en móviles */
        max-width: 25px !important;
        min-width: 20px !important;
        font-size: 10px !important;
    }

    .modal #clientes thead th:nth-child(1) { /* Header N° en móviles */
        max-width: 25px !important;
        min-width: 20px !important;
        font-size: 9px !important;
    }

    .add_product {
        min-width: 30px !important;
        height: 30px !important;
        font-size: 1rem !important;
    }

    .brand-filter {
        font-size: 0.65rem !important;
        padding: 3px 6px !important;
        margin: 1px !important;
    }

    .brand-filter-image .brand-logo {
        height: 32px !important;
        max-width: 100% !important;
    }
    .brand-filter-image {
        min-height: 36px !important;
        min-width: 50px !important;
        padding: 4px 8px !important;
    }
    .brand-filter-all {
        min-height: 36px !important;
        min-width: 50px !important;
        padding: 4px 8px !important;
    }
    .brand-filter-all .fa {
        font-size: 14px !important;
    }

    .modal #searchInput {
        font-size: 0.85rem !important;
        padding: 0.4rem 0.8rem !important;
    }

    /* Mantener N° visible pero más compacto en móvil */
    .modal .table td:first-child,
    .modal .table th:first-child {
        font-size: 0.7rem !important;
        padding: 0.1rem !important;
        min-width: 25px !important;
        max-width: 30px !important;
    }

    /* Para modal de productos, ocultar código en móvil */
    #exampleModalCenter2 .table th:nth-child(2),
    #exampleModalCenter2 .table td:nth-child(2) {
        display: none !important;
    }

    /* Para modal de clientes, ocultar región y comuna en móvil */
    #exampleModalCenter .table th:nth-child(5),
    #exampleModalCenter .table td:nth-child(5),
    #exampleModalCenter .table th:nth-child(6),
    #exampleModalCenter .table td:nth-child(6) {
        display: none !important;
    }

    /* OVERRIDE CRÍTICO MÓVIL: Headers de clientes deben prevalecer sobre reglas generales */
    .modal div#exampleModalCenter .table thead.thead-light th,
    .modal div#clientes .table thead.thead-light th {
        font-size: 0.6rem !important;
        padding: 6px 2px !important;
        min-width: 60px !important;
        max-width: 80px !important;
        line-height: 1.0 !important;
        height: 45px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        text-overflow: unset !important;
        overflow: visible !important;
        text-align: center !important;
        vertical-align: middle !important;
    }

    /* Forzar responsive específico para admin clientes en móviles */
    #clientes {
        width: 100% !important;
        table-layout: auto !important;
    }

    #clientes thead th {
        font-size: 0.6rem !important;
        padding: 6px 2px !important;
        min-width: 60px !important;
        max-width: 80px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        line-height: 1.0 !important;
        height: 45px !important;
    }
}

/* Móviles pequeños */
@media (max-width: 576px) {
    .modal-xl {
        max-width: 100% !important;
        margin: 0 !important;
        height: 100vh !important;
    }

    .modal-dialog {
        margin: 0 !important;
        height: 100vh !important;
    }

    .modal-content {
        height: 100vh !important;
        border-radius: 0 !important;
    }

    .modal-body {
        overflow-y: auto !important;
        max-height: calc(100vh - 120px) !important;
    }

    .modal .table-sm td,
    .modal .table-sm th {
        padding: 0.2rem !important;
        font-size: 0.7rem !important;
    }

    .add_product {
        min-width: 28px !important;
        height: 28px !important;
        font-size: 0.9rem !important;
    }
}

/* ===== ANIMACIONES SUAVES ===== */
.modal.fade .modal-dialog {
    transition: transform 0.3s ease-out !important;
}

.modal.show .modal-dialog {
    transform: none !important;
}

/* ===== MODAL DE SELECCIÓN DE BODEGA EN HOME ===== */
.modal#bodegaSelectorModal .modal-dialog {
    width: 60% !important; /* 60% del ancho como solicitaste */
    max-width: 60% !important;
    height: auto !important; /* Altura automática */
    margin: 10vh auto !important; /* Margen superior más bajo para evitar scroll */
}

.modal#bodegaSelectorModal .modal-content {
    height: auto !important;
    overflow: visible !important; /* Permitir que se ajuste naturalmente */
}

.modal#bodegaSelectorModal .modal-header {
    padding: 15px !important; /* Header normal */
    background-color: #685bc7 !important; /* Asegurar color de fondo */
    color: white !important; /* Texto blanco */
}

/* Título e ícono blancos */
.modal#bodegaSelectorModal .modal-title {
    color: white !important;
}

.modal#bodegaSelectorModal .modal-title .feather {
    color: white !important;
}

/* Botón cerrar blanco */
.modal#bodegaSelectorModal .close {
    color: white !important;
    opacity: 0.8 !important;
}

.modal#bodegaSelectorModal .close:hover {
    color: white !important;
    opacity: 1 !important;
}

.modal#bodegaSelectorModal .modal-body {
    padding: 20px !important; /* Padding normal para que no se vea chato */
    overflow: visible !important; /* Sin restricciones de overflow */
}

/* Alert compacto pero legible */
.modal#bodegaSelectorModal .alert {
    padding: 10px 15px !important;
    margin-bottom: 15px !important;
    font-size: 0.9em !important;
    line-height: 1.4 !important;
}

/* Cards con altura apropiada */
.modal#bodegaSelectorModal .card {
    min-height: 120px !important; /* Altura decente */
    margin-bottom: 10px !important;
}

.modal#bodegaSelectorModal .card-body {
    padding: 15px !important; /* Padding apropiado */
}

/* Íconos y texto legibles */
.modal#bodegaSelectorModal .feather {
    font-size: 2em !important;
    margin-bottom: 10px !important;
}

.modal#bodegaSelectorModal .card-title {
    font-size: 1em !important;
    margin-bottom: 8px !important;
    font-weight: 600 !important;
}

.modal#bodegaSelectorModal .card-text {
    font-size: 0.9em !important;
    margin-bottom: 8px !important;
}

.modal#bodegaSelectorModal .badge {
    font-size: 0.8em !important;
}

/* Responsive para modal de bodega */
@media (max-width: 992px) {
    .modal#bodegaSelectorModal .modal-dialog {
        width: 85% !important;
        max-width: 85% !important;
    }
}

@media (max-width: 576px) {
    .modal#bodegaSelectorModal .modal-dialog {
        width: 95% !important;
        max-width: 95% !important;
        margin: 10vh auto !important;
    }
}

/* ===== SCROLLBAR PERSONALIZADO EN MODALES ===== */
.modal-body::-webkit-scrollbar {
    width: 6px !important;
}

.modal-body::-webkit-scrollbar-track {
    background: #f1f1f1 !important;
    border-radius: 3px !important;
}

.modal-body::-webkit-scrollbar-thumb {
    background: #685bc7 !important;
    border-radius: 3px !important;
}

.modal-body::-webkit-scrollbar-thumb:hover {
    background: #5a4eb5 !important;
}


/* ===== CRITICAL OVERRIDES - MAXIMUM PRIORITY ===== */
/* ESTAS REGLAS DEBEN ESTAR AL FINAL PARA MÁXIMA PRIORIDAD */

/* FORCE: Tabla admin clientes responsive */
body #clientes,
body table#clientes,
body .table#clientes,
body div table#clientes {
    width: 100% !important;
    table-layout: fixed !important;
    max-width: 100% !important;
    overflow-x: auto !important;
}

/* FORCE: Tabla modal vendedores responsive */
body .modal #exampleModalCenter table,
body .modal div#exampleModalCenter table {
    width: 100% !important;
    table-layout: fixed !important;
    max-width: 100% !important;
}

body #clientes_wrapper,
body .dataTables_wrapper {
    width: 100% !important;
    overflow-x: auto !important;
}

/* FORCE: Breakpoint específico para 1210px y menor */
@media (max-width: 1210px) {
    body #clientes,
    body table#clientes {
        width: 100% !important;
        table-layout: auto !important;
        max-width: 100% !important;
    }

    body #clientes_wrapper {
        width: 100% !important;
        overflow-x: auto !important;
        max-width: 100% !important;
    }

    body .modal #clientes table thead th,
    body .modal table#clientes thead th,
    body #clientes thead th,
    body table#clientes thead th {
        font-size: 0.63rem !important;
        padding: 7px 4px !important;
        min-width: 75px !important;
        max-width: 110px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }
}

/* FORCE: Headers de clientes en todas las vistas - ESCRITORIO */
body .modal #exampleModalCenter table thead th,
body .modal #clientes table thead th,
body .modal table#clientes thead th,
body .modal div#exampleModalCenter table thead th {
    font-size: 0.65rem !important;
    padding: 8px 4px !important;
    min-width: 80px !important;
    max-width: 120px !important;
    white-space: normal !important;
    word-wrap: break-word !important;
    line-height: 1.1 !important;
    text-align: center !important;
    vertical-align: middle !important;
    height: 50px !important;
    overflow: visible !important;
    text-overflow: unset !important;
}

/* FORCE: Headers de clientes - TABLETS (992px y menor) */
@media (max-width: 992px) {
    body .modal #exampleModalCenter table thead th,
    body .modal #clientes table thead th,
    body .modal table#clientes thead th,
    body .modal div#exampleModalCenter table thead th,
    body #clientes thead th,
    body table#clientes thead th {
        font-size: 0.62rem !important;
        padding: 7px 3px !important;
        min-width: 70px !important;
        max-width: 100px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        line-height: 1.05 !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: none !important;
        overflow: visible !important;
        text-overflow: unset !important;
        text-align: center !important;
        vertical-align: middle !important;
        box-sizing: border-box !important;
    }

    /* FORCE: Evitar colapso de tabla modal vendedores */
    body .modal #exampleModalCenter table,
    body .modal div#exampleModalCenter table {
        height: auto !important;
        min-height: 300px !important;
        max-height: none !important;
        table-layout: fixed !important;
    }

    body .modal #exampleModalCenter table thead,
    body .modal div#exampleModalCenter table thead {
        height: auto !important;
        min-height: 60px !important;
        max-height: none !important;
        display: table-header-group !important;
    }

    body .modal #exampleModalCenter table tbody,
    body .modal div#exampleModalCenter table tbody {
        height: auto !important;
        min-height: 200px !important;
        display: table-row-group !important;
    }

    /* FORCE: Tabla admin responsive en tablets */
    body #clientes,
    body table#clientes {
        width: 100% !important;
        table-layout: auto !important;
        max-width: 100% !important;
    }

    body #clientes_wrapper {
        width: 100% !important;
        overflow-x: auto !important;
    }
}

/* FORCE: Headers de clientes - MÓVILES (768px y menor) */
@media (max-width: 768px) {
    body .modal #exampleModalCenter table thead th,
    body .modal #clientes table thead th,
    body .modal table#clientes thead th,
    body .modal div#exampleModalCenter table thead th,
    body #clientes thead th,
    body table#clientes thead th {
        font-size: 0.6rem !important;
        padding: 6px 2px !important;
        min-width: 60px !important;
        max-width: 80px !important;
        white-space: normal !important;
        word-wrap: break-word !important;
        line-height: 1.0 !important;
        height: 45px !important;
        overflow: visible !important;
        text-overflow: unset !important;
        text-align: center !important;
        vertical-align: middle !important;
    }

    /* FORCE: Tabla admin responsive en móviles */
    body #clientes,
    body table#clientes {
        width: 100% !important;
        table-layout: auto !important;
        max-width: 100% !important;
    }

    body #clientes_wrapper {
        width: 100% !important;
        overflow-x: auto !important;
    }
}

/* ===== MEJORAS DE ACCESIBILIDAD ===== */
.modal-header .close {
    font-size: 1.5rem !important;
    font-weight: 300 !important;
    opacity: 0.7 !important;
    transition: opacity 0.3s ease !important;
}

.modal-header .close:hover {
    opacity: 1 !important;
    transform: scale(1.1) !important;
}

/* ===== INDICADOR DE LOADING ===== */
.modal-loading {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 9999 !important;
}

.modal-loading .spinner-border {
    color: #685bc7 !important;
}

/* ===== OVERRIDE FINAL EMAIL/FONO - MÁXIMA PRIORIDAD ===== */
/* ESTAS REGLAS DEBEN ESTAR AL FINAL PARA OVERRIDE COMPLETO */
body .modal #clientes tbody td:nth-child(8),
body .modal #exampleModalCenter #clientes tbody td:nth-child(8),
body .modal table#clientes tbody td:nth-child(8) {
    max-width: none !important;
    width: auto !important;
    min-width: 180px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-wrap: normal !important;
}

body .modal #clientes tbody td:nth-child(9),
body .modal #exampleModalCenter #clientes tbody td:nth-child(9),
body .modal table#clientes tbody td:nth-child(9) {
    max-width: none !important;
    width: auto !important;
    min-width: 140px !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-wrap: normal !important;
}

body .modal #clientes thead th:nth-child(8),
body .modal #exampleModalCenter #clientes thead th:nth-child(8),
body .modal table#clientes thead th:nth-child(8) {
    max-width: none !important;
    width: auto !important;
    min-width: 180px !important;
}

body .modal #clientes thead th:nth-child(9),
body .modal #exampleModalCenter #clientes thead th:nth-child(9),
body .modal table#clientes thead th:nth-child(9) {
    max-width: none !important;
    width: auto !important;
    min-width: 140px !important;
}

/* ===== HOVER NUCLEAR OVERRIDE PARA TABLA CLIENTES ===== */
/* SPECIFICITY LEVEL: 0,1,0,5 - Ultra alta prioridad */
html body div.modal#exampleModalCenter table#clientes.table tbody tr {
    cursor: pointer !important;
    transition: background-color 0.15s ease-in-out !important;
    background-color: transparent !important;
}

/* HOVER DE FILA COMPLETA - Ultra específico */
html body div.modal#exampleModalCenter table#clientes.table tbody tr:hover {
    background-color: rgba(104, 91, 199, 0.12) !important;
}

/* FORZAR que TODAS las celdas hereden el fondo de la fila */
html body div.modal#exampleModalCenter table#clientes.table tbody tr:hover td:nth-child(1),
html body div.modal#exampleModalCenter table#clientes.table tbody tr:hover td:nth-child(2),
html body div.modal#exampleModalCenter table#clientes.table tbody tr:hover td:nth-child(3),
html body div.modal#exampleModalCenter table#clientes.table tbody tr:hover td:nth-child(4),
html body div.modal#exampleModalCenter table#clientes.table tbody tr:hover td:nth-child(5),
html body div.modal#exampleModalCenter table#clientes.table tbody tr:hover td:nth-child(6),
html body div.modal#exampleModalCenter table#clientes.table tbody tr:hover td:nth-child(7),
html body div.modal#exampleModalCenter table#clientes.table tbody tr:hover td:nth-child(8),
html body div.modal#exampleModalCenter table#clientes.table tbody tr:hover td:nth-child(9) {
    background-color: rgba(104, 91, 199, 0.12) !important;
    background-image: none !important;
    background: rgba(104, 91, 199, 0.12) !important;
    border-bottom: 1px solid #dee2e6 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
}

/* ELIMINAR cualquier hover de celda individual */
html body div.modal#exampleModalCenter table#clientes.table tbody td:hover {
    background-color: transparent !important;
    background: transparent !important;
    background-image: none !important;
}

/* ===== DESKTOP SPECIFIC (993px+) - FORZAR EXPANSIÓN EMAIL/FONO ===== */
@media (min-width: 993px) {
    body .modal #clientes,
    body .modal #exampleModalCenter #clientes,
    body .modal table#clientes {
        table-layout: auto !important;
        min-width: 1500px !important;
        width: auto !important;
    }

    /* FORZAR EMAIL y FONO a expandirse completamente en desktop */
    body .modal #clientes tbody td:nth-child(8),
    body .modal #exampleModalCenter #clientes tbody td:nth-child(8) {
        max-width: 400px !important; /* Límite generoso para emails largos */
        width: auto !important;
        min-width: 200px !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    body .modal #clientes tbody td:nth-child(9),
    body .modal #exampleModalCenter #clientes tbody td:nth-child(9) {
        max-width: 200px !important; /* Límite generoso para teléfonos */
        width: auto !important;
        min-width: 160px !important;
        white-space: nowrap !important;
        overflow: visible !important;
        text-overflow: clip !important;
    }

    /* Headers matching */
    body .modal #clientes thead th:nth-child(8),
    body .modal #exampleModalCenter #clientes thead th:nth-child(8) {
        max-width: 400px !important;
        width: auto !important;
        min-width: 200px !important;
    }

    body .modal #clientes thead th:nth-child(9),
    body .modal #exampleModalCenter #clientes thead th:nth-child(9) {
        max-width: 200px !important;
        width: auto !important;
        min-width: 160px !important;
    }
}