/**
 * SGB - Corrección para menús desplegables
 * Este archivo CSS corrige el problema de z-index en los menús desplegables
 * donde aparecen detrás de otros elementos.
 */

/* Aumentar z-index para todos los contenedores dropdown */
.dropdown,
.dropstart,
.dropend,
.dropup,
.btn-group,
.dropdown-center,
.dropup-center {
  position: relative !important;
  z-index: 99999 !important; /* Valor extremadamente alto */
}

/* Aumentar z-index para menús desplegables */
.dropdown-menu {
  z-index: 100000 !important; /* Ultra alta prioridad */
  position: absolute !important;
}

/* Asegurar que los botones de acción también tengan un z-index adecuado */
.dropdown-toggle {
  position: relative !important;
  z-index: 99999 !important;
}

/* Corregir posicionamiento específico para el menú de exportar/importar */
.dropdown-menu.show {
  position: absolute !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  margin-top: 0 !important;
  pointer-events: auto !important;
}

/* Corrección para el menú desplegable específico de acciones */
.dropdown-menu[data-bs-popper] {
  top: 100% !important;
  left: 0 !important;
  margin-top: 0.125rem !important;
}

/* Corrección específica para el botón de 3 puntos y su menú */
button[aria-expanded="true"] + .dropdown-menu,
button.dropdown-toggle[aria-expanded="true"] + .dropdown-menu {
  z-index: 200000 !important; /* Prioridad máxima */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  inset: 0px auto auto 0px !important;
  transform: translate3d(0px, 40px, 0px) !important;
}

/* Regla muy específica para el menú de 3 puntos en la sección de inventario */
body > div.container-fluid > div.row.mb-4.align-items-center > div.col-md-6.text-md-end > div > div {
  position: static !important;
}

body > div.container-fluid > div.row.mb-4.align-items-center > div.col-md-6.text-md-end > div > div > .dropdown-menu {
  position: absolute !important;
  z-index: 999999 !important;
  inset: auto auto auto auto !important;
  transform: translate3d(-110px, 40px, 0px) !important;
  display: block !important;
}

/* Regla extremadamente específica para el botón de 3 puntos */
.btn-group > .btn.dropdown-toggle {
  z-index: 999999 !important;
}

/* Regla extremadamente específica para el menú desplegable de 3 puntos */
.btn-group > .btn-group:not(:first-child) > .btn, 
.btn-group > .btn.show, 
.btn-group > .btn:nth-child(n+3), 
.btn-group > :not(.btn-check) + .btn {
  z-index: 999999 !important;
}

.btn-group > .btn.show + .dropdown-menu,
.dropdown > .btn.show + .dropdown-menu {
  display: block !important;
  z-index: 9999999 !important; /* El z-index más alto posible */
  position: absolute !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ===== CORRECCIONES ESPECÍFICAS PARA EL BANNER DE INVENTARIO ===== */

/* Asegurar que el banner de inventario no afecte a los dropdowns */
.container-fluid > .row:first-child {
  z-index: auto !important; /* Evitar que cree un nuevo contexto de apilamiento */
  position: relative !important;
}

/* Selector específico para el botón de 3 puntos en el banner */
.container-fluid .btn[data-bs-toggle="dropdown"] {
  position: relative !important;
  z-index: 1000000 !important; /* Valor extremadamente alto */
}

/* Mejorar la visibilidad del botón de Exportar */
.container-fluid a.btn-primary,
.container-fluid button.btn-primary {
  position: relative !important;
  z-index: 1000000 !important;
}

/* Específicamente para el menú desplegable del botón de 3 puntos en el banner */
.container-fluid .btn[data-bs-toggle="dropdown"] + .dropdown-menu,
.container-fluid .btn-group .dropdown-menu {
  position: absolute !important;
  top: 100% !important;
  right: 0 !important;
  left: auto !important;
  z-index: 2147483647 !important; /* El máximo z-index posible */
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* El botón específico de 3 puntos en la parte superior */
[aria-label="Más opciones"],
.btn-group > .btn:last-child:not(:first-child) {
  position: relative !important;
  z-index: 1000001 !important;
}

/* Estilos para el menú desplegable en el banner de gestión de inventario */
#opciones-inventario-menu,
[id*="dropdown-menu"] {
  z-index: 2147483647 !important;
  position: absolute !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ===== CORRECCIONES ESPECÍFICAS PARA EL BANNER_INVENTARIO.PHP ===== */

/* El contenedor principal del banner */
#main-page-header {
  position: relative !important;
  z-index: 1 !important; /* Bajo z-index para no interferir */
}

/* El botón de 3 puntos específico en el banner_inventario.php */
#main-page-header .dropdown .btn.dropdown-toggle {
  position: relative !important;
  z-index: 2147483646 !important; /* Extremadamente alto */
}

/* El menú desplegable específico en el banner_inventario.php */
#main-page-header .dropdown .dropdown-menu {
  position: absolute !important;
  display: block !important;
  z-index: 2147483647 !important; /* Máximo z-index posible */
  right: 0 !important;
  left: auto !important;
  top: 100% !important;
  margin-top: 0.125rem !important;
  transform: none !important;
}

/* Asegurar que el dropdown-menu-end funcione correctamente */
.dropdown-menu-end {
  right: 0 !important;
  left: auto !important;
}

/* Estilo específico para el botón de 3 puntos en banner_inventario.php */
#main-page-header .dropdown > .btn-primary.btn-sm.dropdown-toggle {
  position: relative !important;
  z-index: 9999999 !important;
}

/* Estilo específico para el menú desplegable del botón de 3 puntos */
#main-page-header .dropdown > .btn-primary.btn-sm.dropdown-toggle[aria-expanded="true"] + .dropdown-menu,
#main-page-header .dropdown > .btn-primary.btn-sm.dropdown-toggle.show + .dropdown-menu {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  right: 0 !important;
  left: auto !important;
  top: 100% !important;
  z-index: 9999999 !important;
}

/* Forzar visibilidad para todas las capas */
* {
  transform: none !important;
  transform-style: flat !important;
}