/* ============================================================
   FIX TEMA DARK - Asegurar que el fondo respete el tema
   ============================================================ */

/* Forzar que el body y html respeten el tema dark */
html[data-bs-theme="dark"],
html[data-bs-theme="dark"] body {
    background-color: var(--bs-body-bg) !important;
}

html[data-bs-theme="light"],
html[data-bs-theme="light"] body {
    background-color: var(--bs-body-bg) !important;
}

/* Asegurar que el layout-wrapper también respete el tema */
html[data-bs-theme="dark"] .layout-wrapper,
html[data-bs-theme="dark"] .layout-page,
html[data-bs-theme="dark"] .content-wrapper {
    background-color: var(--bs-body-bg) !important;
}

html[data-bs-theme="light"] .layout-wrapper,
html[data-bs-theme="light"] .layout-page,
html[data-bs-theme="light"] .content-wrapper {
    background-color: var(--bs-body-bg) !important;
}

/* Glocbal loader */
#global-loader {
    position: fixed; /* Posición fija en la pantalla */
    z-index: 50000; /* Z-index para asegurar que esté por encima de otros elementos */
    background: var(--bs-body-bg, #fff); /* Fondo que respeta el tema */
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    height: 100%; /* Altura completa */
    width: 100%; /* Anchura completa */
    margin: 0 auto; /* Centrado horizontal */
    text-align: center; /* Alineación del texto */
}

.loader-img {
    position: absolute; /* Posición absoluta */
    right: 0;
    bottom: 0;
    top: 43%; /* Centrado vertical aproximado */
    left: 0;
    margin: 0 auto; /* Centrado horizontal */
    text-align: center; /* Alineación del texto */
}

/* ============================================================
   TABLER ICONS - Iconos más gruesos y visibles
   ============================================================ */

/* Para todos los iconos Tabler */
.ti {
    font-size: 1.25rem; /* o el tamaño que consideres adecuado */
}

/* Si solo quieres ajustar los pequeños (ti-sm) */
.ti-sm {
    font-size: 1.25rem;
}

/* ============================================================
   SweetAlert2 por encima de modales Bootstrap (ej. modal Movimientos de Stock)
   ============================================================ */
.swal2-container {
    z-index: 10050 !important; /* Muy por encima de .modal (1055) y .modal-backdrop (1050) */
}
.swal2-popup {
    z-index: 10051 !important;
}