/* ============================================
   FIX DEFINITIVO PARA DATEPICKERS EN MODALES
   Solución específica para modal_form_ventas_compras.vue
   ============================================ */

/* FIX CRÍTICO: Eliminar TODOS los contextos de apilamiento de taxes-table-header */
.taxes-table-header,
.taxes-table-header th,
tr.taxes-table-header,
thead.taxes-table-header {
    position: static !important;  /* Eliminar sticky que causa el problema */
    z-index: auto !important;     /* Eliminar z-index que crea stacking context */
    top: auto !important;         /* Resetear top */
    transform: none !important;   /* Eliminar cualquier transform */
    will-change: auto !important; /* Eliminar will-change */
}

/* Si necesitas mantener el header fijo en algunas tablas, usa esta clase alternativa */
.taxes-table-header-sticky {
    position: sticky !important;
    top: 0 !important;
    z-index: 2 !important; /* Muy bajo para no interferir con datepickers */
}

/* IMPORTANTE: Forzar z-index MUY alto para TODOS los datepickers */
.vdp-datepicker__calendar {
    z-index: 2147483647 !important; /* Máximo valor posible de z-index */
    position: fixed !important; /* Fixed en lugar de absolute para mejor posicionamiento */
    background: white !important;
    border: 2px solid #2563eb !important;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.4) !important;
    border-radius: 8px !important;
    padding: 5px !important;
}

/* Asegurar que NINGÚN input del modal pueda estar encima */
.modal .form-group,
.modal .form-control,
.modal .b-form-select,
.modal input,
.modal select,
.modal-body .form-group,
.modal-body .form-control,
.modal-body .b-form-select,
.modal-body input,
.modal-body select {
    position: relative !important;
    z-index: 1 !important; /* Muy bajo para no interferir */
}

/* Asegurar que se muestre sobre modales */
.modal .vdp-datepicker__calendar,
.modal-body .vdp-datepicker__calendar,
#formulario .vdp-datepicker__calendar {
    z-index: 99999 !important;
    position: fixed !important; /* Cambiar a fixed para mejor posicionamiento */
}

/* Asegurar que el wrapper tenga posición relativa */
.modal .vdp-datepicker,
.modal-body .vdp-datepicker,
#formulario .vdp-datepicker {
    position: relative !important;
    z-index: 1 !important;
}

/* Fix para el input del datepicker */
.modal .vdp-datepicker input,
.modal-body .vdp-datepicker input {
    z-index: 1 !important;
    position: relative !important;
}

/* Asegurar que el calendario sea clickeable */
.modal .vdp-datepicker__calendar[style*="display: block"] *,
.modal-body .vdp-datepicker__calendar[style*="display: block"] * {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* Fix específico para el formulario de ventas/compras */
.formulario-wrapper .vdp-datepicker__calendar[style*="display: block"] {
    z-index: 1156 !important;
}

/* Fix específico para modal de liquidaciones */
#modal_liquidacion .vdp-datepicker__calendar {
    z-index: 2147483647 !important; /* Máximo z-index posible */
    position: fixed !important;
    background: white !important;
    border: 2px solid #2563eb !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
    border-radius: 8px !important;
    padding: 5px !important;
}

#modal_liquidacion .modal-body {
    overflow: visible !important;
}

#modal_liquidacion .modal-content {
    overflow: visible !important;
}

/* Clases específicas para modales con datepickers */
.datepicker-modal .modal-body,
.datepicker-modal-body {
    overflow: visible !important;
    position: static !important;
    z-index: auto !important;
}

.datepicker-modal .vdp-datepicker__calendar {
    z-index: 2147483647 !important;
    position: fixed !important;
}

/* Asegurar que ningún elemento del modal cubra el calendario */
.modal-content {
    z-index: auto !important;
}

.modal-body {
    z-index: auto !important;
    overflow: visible !important;
}

/* Fix para tabs dentro del modal */
.modal .nav-tabs,
.modal .tab-content {
    z-index: auto !important;
}

/* Fix para cards dentro del modal */
.modal .card,
.modal .card-header,
.modal .card-body {
    z-index: auto !important;
    overflow: visible !important;
}

/* ============================================
   FIX PARA DROPDOWNS EN NOTIFICACIONES
   ============================================ */

/* Dropdown de notificaciones en el header */
.notification-wrapper .dropdown-menu,
.notification-dropdown .dropdown-menu {
    z-index: 1301 !important;
    position: absolute !important;
    background: white !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Dropdown del perfil de usuario */
.user-profile-dropdown .custom-dropdown-menu.show {
    z-index: 1035 !important;
    display: block !important;
}

/* Dropdown de consumos excedidos en header_periodo_prueba */
.consumption-dropdown .dropdown-menu.show {
    z-index: 1036 !important;
    position: absolute !important;
}

/* Bootstrap dropdowns genéricos en el header */
.container_header .dropdown-menu.show {
    z-index: 1035 !important;
}

/* ============================================
   UTILIDADES DE DEBUG
   ============================================ */

/* Clase para forzar elementos al frente cuando sea necesario */
.force-front {
    z-index: 9999 !important;
    position: relative !important;
}

/* Clase para debug - agrega borde rojo */
.z-debug {
    border: 2px solid red !important;
}