/* ============================================
   SISTEMA DE Z-INDEX UNIFICADO - TAXES SOFTWARE
   
   Este archivo soluciona TODOS los problemas de z-index
   del sistema de manera sistemática y organizada.
   
   JERARQUÍA DE Z-INDEX:
   - Base elements: 1-100
   - Dropdowns: 1000-1099
   - Modals backdrop: 1040
   - Modals: 1050-1060
   - Tooltips/Popovers: 1070-1080
   - Datepickers/Calendars: 1100-1200
   - Notifications: 1300-1400
   - Critical overlays: 9000+
   ============================================ */

/* ============================================
   1. RESET Y BASE
   ============================================ */
   
/* Eliminar z-index conflictivos heredados */
* {
    /* No aplicar z-index por defecto */
}

/* ============================================
   2. DROPDOWNS Y MENUS
   ============================================ */

/* Bootstrap dropdowns */
.dropdown-menu {
    z-index: 1000;
}

.dropdown-menu.show {
    z-index: 1030;
}

/* Select2 dropdowns */
.select2-container--open .select2-dropdown {
    z-index: 1060;
}

/* En modales */
.modal .select2-container--open .select2-dropdown {
    z-index: 1061;
}

/* ============================================
   3. MODALES
   ============================================ */

/* Bootstrap modals - jerarquía correcta */
.modal-backdrop {
    z-index: 1040;
}

.modal {
    z-index: 1050;
}

.modal-dialog {
    z-index: 1050;
}

/* Modales anidados */
.modal-backdrop.show ~ .modal-backdrop.show {
    z-index: 1051;
}

.modal.show ~ .modal.show {
    z-index: 1060;
}

/* ============================================
   4. DATEPICKERS Y CALENDARIOS
   ============================================ */

/* VueJS Datepicker - Solo cuando está visible */
.vdp-datepicker__calendar {
    z-index: auto; /* Por defecto no tiene z-index */
}

/* Solo cuando está abierto y visible */
.vdp-datepicker__calendar:not([style*="display: none"]) {
    z-index: 1100;
    position: absolute;
    background: white;
    border: 1px solid #dee2e6;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-radius: 4px;
}

/* Datepicker dentro de modales */
.modal .vdp-datepicker__calendar:not([style*="display: none"]),
.modal-body .vdp-datepicker__calendar:not([style*="display: none"]) {
    z-index: 99999 !important;
    position: fixed !important;
}

/* Bootstrap datepicker */
.datepicker {
    z-index: 1100 !important;
}

.modal .datepicker {
    z-index: 1150 !important;
}

/* Gijgo datepicker */
.gj-datepicker-calendar {
    z-index: 1100 !important;
}

.modal .gj-datepicker-calendar {
    z-index: 1150 !important;
}

/* ============================================
   5. TOOLTIPS Y POPOVERS
   ============================================ */

/* Bootstrap tooltips */
.tooltip {
    z-index: 1070;
}

/* Bootstrap popovers */
.popover {
    z-index: 1060;
}

/* Tooltipster */
.tooltipster-base {
    z-index: 1070;
}

/* ============================================
   6. NOTIFICACIONES Y ALERTAS
   ============================================ */

/* Toastr notifications */
.toast-container {
    z-index: 1300;
}

/* SweetAlert */
.swal2-container {
    z-index: 1400;
}

/* Custom notifications */
.notification-panel {
    z-index: 1300;
}

/* ============================================
   7. ELEMENTOS ESPECIALES DEL SISTEMA
   ============================================ */

/* DataTables */
.dataTables_processing {
    z-index: 1100;
}

.dt-button-collection {
    z-index: 1100;
}

/* En modales */
.modal .dt-button-collection {
    z-index: 1151;
}

/* Autocomplete y typeahead */
.autocomplete-suggestions,
.tt-menu {
    z-index: 1100;
}

.modal .autocomplete-suggestions,
.modal .tt-menu {
    z-index: 1151;
}

/* Model Select (componente personalizado) */
.model-select-dropdown {
    z-index: 1100;
}

.modal .model-select-dropdown {
    z-index: 1151;
}

/* ============================================
   8. OVERLAYS CRÍTICOS
   ============================================ */

/* Loading overlays */
.loading-overlay,
.se-pre-con {
    z-index: 9999;
}

/* Full screen overlays */
.fullscreen-overlay {
    z-index: 9000;
}

/* ============================================
   9. FIXES ESPECÍFICOS PARA COMPONENTES
   ============================================ */

/* Fix para el componente de notificaciones */
#notificaciones .dropdown-menu {
    z-index: 1301;
}

/* Fix para búsqueda de personas en modales */
.modal .person-search-dropdown {
    z-index: 1151;
}

/* Fix para el calendario en receipts */
#formulario .vdp-datepicker__calendar:not([style*="display: none"]) {
    z-index: 1152 !important;
}

/* Fix específico para modal de liquidaciones */
#modal_liquidacion .vdp-datepicker__calendar {
    z-index: 99999 !important;
    position: fixed !important;
}

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

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

/* ============================================
   10. UTILIDADES
   ============================================ */

/* Clases de utilidad para override manual */
.z-index-dropdown { z-index: 1000 !important; }
.z-index-sticky { z-index: 1020 !important; }
.z-index-fixed { z-index: 1030 !important; }
.z-index-modal-backdrop { z-index: 1040 !important; }
.z-index-modal { z-index: 1050 !important; }
.z-index-popover { z-index: 1060 !important; }
.z-index-tooltip { z-index: 1070 !important; }
.z-index-datepicker { z-index: 1100 !important; }
.z-index-notification { z-index: 1300 !important; }
.z-index-top { z-index: 9999 !important; }

/* ============================================
   11. MEDIA QUERIES Y RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    /* Ajustes móviles si es necesario */
    .modal {
        z-index: 1050;
    }
    
    .dropdown-menu {
        z-index: 1035;
    }
}

/* ============================================
   IMPORTANTE: ORDEN DE CARGA
   
   Este archivo debe cargarse DESPUÉS de:
   - Bootstrap CSS
   - Librerías de terceros
   - Pero ANTES de new_css_2025.css
   
   En el layout principal agregar:
   <link href="{{ asset('css/z-index-fix.css') }}" rel="stylesheet">
   ============================================ */