/* 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 */
}

/* Miscellaneous
******************************************************************************* */
.misc-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    min-block-size: 100vh;
    text-align: center;
}

.misc-bg {
    position: absolute;
    inline-size: 100%;
    inset-block-end: 0;
    inset-inline-start: 0;
}

.misc-object {
    position: absolute;
    z-index: 1;
    inset-block-end: 8%;
    inset-inline-start: 16%;
}
.misc-object:dir(rtl) {
    inset-inline-start: 10%;
}

.misc-model {
    position: relative;
    inset-block-end: 3rem;
}

/* ========================================
   Validación Bootstrap: label verde cuando el campo es válido
   El tema pinta igual invalid/valid en labels; aquí forzamos verde para .is-valid
   ======================================== */
form .form-floating > .form-control.is-valid ~ label,
form .form-floating > .form-control.is-valid:hover ~ label,
form .form-floating > .form-control.is-valid:focus ~ label,
form .form-floating > .form-select.is-valid ~ label,
form .form-floating > .form-select.is-valid:hover ~ label,
form .form-floating > .form-select.is-valid:focus ~ label {
    color: var(--bs-form-valid-border-color) !important;
}

/* Select2: label verde cuando el select tiene .is-valid (igual que .is-invalid en rojo en core) */
form .form-floating:has(.select2.is-valid) label {
    color: var(--bs-form-valid-border-color) !important;
}

/* ========================================
   Menú: color por sector (texto del encabezado; texto e ícono del grupo de catálogo)
   ======================================== */
.menu-sector-logistica { --menu-sector-color: #16b1ff; }
.menu-sector-produccion { --menu-sector-color: #ff9f43; }
.menu-sector-finanzas { --menu-sector-color: #56ca00; }
.menu-sector-comercial { --menu-sector-color: #e83e8c; }
.menu-sector-sistema { --menu-sector-color: #8592a3; }

.layout-menu .menu-header[class*='menu-sector-'] .menu-header-text {
    color: var(--menu-sector-color);
    font-weight: 600;
}

.layout-menu .menu-item[class*='menu-sector-'] > .menu-link > div {
    color: var(--menu-sector-color);
    font-weight: 500;
}

.layout-menu .menu-item[class*='menu-sector-'] > .menu-link > .menu-icon {
    color: var(--menu-sector-color);
}

/* Ítem operativo: solo el ícono lleva el color del sector */
.layout-menu .menu-item.menu-sector-soft > .menu-link > div {
    color: inherit;
    font-weight: inherit;
}

.layout-menu .menu-item.menu-sector-soft.active:not(.open) > .menu-link > .menu-icon {
    color: inherit;
}

/* Subítem de Carga masiva: el punto de la izquierda en el color del sector */
.layout-menu .menu-sub > .menu-item.menu-sector-soft > .menu-link::before {
    background-color: var(--menu-sector-color);
}

/* ========================================
   Roles: asignación de permisos por sector (/rols/assign)
   ======================================== */
.assign-search {
    max-width: 320px;
}

.assign-sector {
    border-left: 3px solid var(--menu-sector-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-card-bg);
}

.assign-sector-header {
    border-bottom: 1px solid var(--bs-border-color);
}

.assign-sector-title {
    color: var(--menu-sector-color);
    font-weight: 600;
    letter-spacing: 0.03em;
}

.assign-sector-collapse i {
    transition: transform 0.2s ease;
}

.assign-sector-collapse.collapsed i {
    transform: rotate(-90deg);
}

.assign-sector .assign-module-cell {
    width: 296px;
}

/* La casilla del módulo se alinea con el título del sector (px-3 de la cabecera) */
.assign-sector .table > tbody > tr > td.assign-module-cell {
    padding-left: 0.75rem;
}

/* ⓘ del módulo: tooltip CSS (xoey-tooltip.css) sobre un span, no sobre el ícono */
.assign-module-info {
    display: inline-flex;
    vertical-align: middle;
    cursor: help;
}

.assign-actions-bar {
    position: sticky;
    bottom: 0;
    z-index: 5;
    background-color: var(--bs-card-bg);
    border-top: 1px solid var(--bs-border-color);
}

/* Estilos para iconos en selector de roles */
#icon-selector button i.ri {
    display: inline-block !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    flex-shrink: 0;
    color: inherit;
    background-color: currentColor;
    -webkit-mask-image: var(--svg);
    mask-image: var(--svg);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-position: center;
    mask-position: center;
}