@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css");
@import url("bootstrap.min.css?v=5.3.3");
@import url("drawer.css?v=1.0.0");
@import url("botones.css?v=1.0.0");
@import url("loading-app.css?v=1.0.1");
@import url("overrides.css?v=1.0.0");


/*BACKGROUNDS LIGHTS*/
.bgl-primary {
    background-color: var(--color-primary-l95, hsl(210 100% 95%)) !important;
    color: var(--color-primary, hsl(210 100% 25%)) !important;
}

.bgl-secondary {
    background-color: var(--color-secondary-l95, hsl(234 54% 95%)) !important;
    color: var(--color-secondary, hsl(234 54% 40%)) !important;
}

.bgl-success {
    background-color: var(--color-success-claro, hsl(141 54% 95%)) !important;
    color: var(--color-success, hsl(141 54% 32%)) !important;
}

.bgl-danger {
    background-color: var(--color-danger-claro, hsl(0 68% 95%)) !important;
    color: var(--color-danger, hsl(0 68% 32%)) !important;
}

.bgl-warning {
    background-color: var(--color-warning-claro, hsl(32 89% 95%)) !important;
    color: var(--color-warning, hsl(32 89% 32%)) !important;
}

.bgl-info {
    background-color: var(--color-info-claro, hsl(193 100% 95%)) !important;
    color: var(--color-info, hsl(193 100% 42%)) !important;
}

.bgl-light {
    background-color: var(--color-light, hsl(0 0% 100%)) !important;
    color: var(--color-dark, hsl(0 0% 15%)) !important;
}

.bgl-gray {
    color: var(--color-gray-8, #343a40) !important;
    background-color: var(--color-gray-1, #f8f9fa) !important;
}


/*--------------------------------
CARGANDO
--------------------------------*/
/*|TO-DO| revisar cargando en componente en migracion*/
.c-cargando {
    background: hsl(0deg 0% 100% / 70%);
    transition: background-position .2s;
    z-index: 1051;
    width: 100%;
    height: 100%;
    overflow: hidden;
    outline: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    top: 0;
    left: 0;
    position: fixed;
}




/*-----------------------------------------------------------------------------------------------------
LAYOUT
------------------------------------------------------------------------------------------------------*/

/*--------------------------------
CONTENT
--------------------------------*/
.app-content {
    display: flex;
    flex-direction: column;
    height: 100vh;
    width: 100vw;
    overflow-x: hidden;
}

    .app-content header,
    .app-content footer {
        position: relative;
        width: 100%;
    }

    .app-content main {
        background-color: #ECF3FA;
        padding: 10px;
        flex-grow: 1;
        position: relative;
        width: 100%;
    }

.app-content--full main,
.app-content--full footer {
    width: 100%;
    position: relative;
    left: 0;
}

@media (max-width: 768px) {
    .app-content header,
    .app-content main,
    .app-content footer {
        position: relative;
        width: 100%;
        left: 0;
    }

    .app-content footer {
        padding-bottom: 100px;
    }
}

@media (max-width: 641px) {
    .app-content footer {
        padding-bottom: 1.2rem !important;
    }

    .app-content main {
        padding: 0 !important;
    }
}


/*--------------------------------
APPHEADER
--------------------------------*/

/* AJUSTES PANTALLA MÓVIL */
@media (max-width: 641px) {
    .header-movil__marca img {
        max-height: 32px;
        max-width: 32px;
        height: auto;
        width: auto;
    }
}

/*--------------------------------
UTILITIES
--------------------------------*/

.cursor-pointer {
    cursor: pointer;
}
.muted {
    opacity: var(--muted, 0.5) !important; 
}
.b-radius-primary {
    border-radius: var(--radius-primario, 0.25rem);
}

.b-radius-secondary {
    border-radius: var(--radius-secundario, 0.5rem);
}

.b-radius-tertiary {
    border-radius: var(--radius-terciario, 1rem);
}