/* =========================================================
   VIVA SPACES - COMPONENTES
   Loading, Toast, Modal, MvcGrid, Tooltip.
   ========================================================= */

/* =========================================================
   Loading
   ========================================================= */
#materialLoading {
    font-family: "Poppins", sans-serif;
    color: #000;
    font-weight: bold;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .5);
    display: table;
    z-index: 9999;
}

#materialLoadingCentered {
    display: table-cell;
    vertical-align: middle;
    padding: 20px;
}

#materialLoadingContent {
    text-align: center;
}

    #materialLoadingContent .spinner-container {
        background-color: #fff;
        text-align: center;
        border-radius: 7px;
        padding: 40px 20px;
    }

        #materialLoadingContent .spinner-container .spinner-border {
            text-align: center;
            color: var(--colorPrincipal);
            width: 3rem;
            height: 3rem;
        }

#materialLoading.hide {
    opacity: 0;
    transition: opacity .2s ease-out;
    pointer-events: none;
}

    #materialLoading.hide #materialLoadingCentered {
        transform: scale(.8);
        transition: transform .2s ease-out;
    }

#materialLoading.show {
    opacity: 1;
    transition: opacity .2s ease-in;
}

    #materialLoading.show #materialLoadingCentered {
        transform: scale(1);
        transition: transform .2s ease-in;
    }

/* =========================================================
   Toast
   ========================================================= */
#toast-container > div {
    opacity: .95 !important;
    transition: opacity .3s;
}

    #toast-container > div:hover {
        opacity: 1 !important;
    }

/* =========================================================
   Modal
   ========================================================= */
.modal-content {
    border: solid 5px var(--colorPrincipal);
    border-radius: var(--bs-modal-border-radius);
}

.modal-content-borderColorSecundario {
    border: solid 5px var(--colorSecundario);
}

.modal .btn-close:focus,
.modal .btn-close:active,
.modal .btn-close:focus-visible {
    outline: none !important;
    box-shadow: none !important;
}

.modal .btn-close {
    -webkit-tap-highlight-color: transparent;
}

/* =========================================================
   Tooltip
   ========================================================= */
.tooltip {
    border-bottom: none !important;
}

.tooltip-inner {
    background-color: #fff;
    color: #333;
    border: 1px solid var(--colorPrincipal);
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
    max-width: 300px;
}

/* =========================================================
   Otros componentes básicos
   ========================================================= */
.card {
    margin-top: 10px;
}