/* /Components/HeaderComponent.razor.rz.scp.css */
.navbar-brand[b-vgas1e608d] {
    width: 10rem;
}

.offcanvas-body p[b-vgas1e608d] {
    font-size: .9rem;
}

.list-group .list-group-item p[b-vgas1e608d] {
    font-size: .9rem;
}
/* /Layouts/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-f3to7nzuli] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-f3to7nzuli] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Pages/User/PortalPage.razor.rz.scp.css */
/* =========================================================
   APP TILE (Card)
   ========================================================= */

.app-tile[b-ov6m3jsiuy] {
    position: relative;
    background: #fff;
    border: 1px solid var(--c-gray-200);
    overflow: hidden;
    /* rendimiento: animar solo GPU-friendly */
    transition: transform .06s ease-out, border-color .06s ease-out;
    will-change: transform;
}

    /* Background gradient overlay (hover) */
    .app-tile[b-ov6m3jsiuy]::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient( 90deg, rgba(255, 255, 255, 0.00) 0%, rgba(0, 93, 131, 0.06) 55%, rgba(0, 93, 131, 0.32) 100% );
        opacity: 0;
        transition: opacity .06s ease-out;
        will-change: opacity;
        pointer-events: none;
        z-index: 0;
    }

    /* Hover state */
    .app-tile:hover[b-ov6m3jsiuy] {
        border-color: rgba(35, 83, 115, 0.55) !important;
        transform: translateY(-1px);
        box-shadow: 0 10px 26px rgba(0, 0, 0, 0.14) !important;
    }

        .app-tile:hover[b-ov6m3jsiuy]::before {
            opacity: 1;
        }

    /* Ensure content is above gradient */
    .app-tile .card-body[b-ov6m3jsiuy],
    .app-tile .row[b-ov6m3jsiuy] {
        position: relative;
        z-index: 1;
    }

    /* =========================================================
   TEXT CLAMP (Description)
   ========================================================= */

    .app-tile p[b-ov6m3jsiuy] {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.5em;
        max-height: 3em;
    }

    /* =========================================================
   ICON CONTAINER
   ========================================================= */

    .app-tile .app-tile-icon[b-ov6m3jsiuy] {
        position: relative;
        z-index: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: #fff;
        border-radius: 12px;
        border: 1px solid var(--c-gray-200);
        width: 5rem;
        height: 5rem;
        padding: .25rem;
        overflow: hidden;
        /* rápido y barato */
        transition: background-color .06s ease-out, border-color .06s ease-out;
    }

        .app-tile .app-tile-icon img[b-ov6m3jsiuy] {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
            display: block;
        }

    /* =========================================================
   CHEVRON (Right arrow)
   ========================================================= */

    .app-tile .bi-chevron-right[b-ov6m3jsiuy] {
        transition: color .06s ease-out, transform .06s ease-out;
        will-change: transform;
    }

    .app-tile:hover .bi-chevron-right[b-ov6m3jsiuy] {
        color: #FFFFFF !important;
        transform: translateX(2px);
    }

/* =========================================================
   RESPONSIVE ICON SIZE
   ========================================================= */

/* XS */
@media (max-width: 575.98px) {
    .app-tile .app-tile-icon[b-ov6m3jsiuy] {
        width: 3.5rem;
        height: 3.5rem;
        padding: .5rem;
    }
}

/* SM / MD */
@media (max-width: 767.98px) {
    .app-tile .app-tile-icon[b-ov6m3jsiuy] {
        width: 4.25rem;
        height: 4.25rem;
        padding: .75rem;
    }
}
