@import '_content/Microsoft.AspNetCore.Components.QuickGrid/Microsoft.AspNetCore.Components.QuickGrid.bundle.scp.css';

/* /Pages/DemoEnded.razor.rz.scp.css */
.grid-container[b-hrs0xnu4g7] {
    display: grid;
    grid-template-columns: 40% 60%; /* izquierda más chica, derecha más grande */
}

.left-column[b-hrs0xnu4g7] {
    display: grid;
    grid-template-rows: auto;
    row-gap: 3rem; /* separación entre bloques */
    padding-block: var(--left-pad-top, 4vh) var(--left-pad-bottom, 6vh);
}

.top-logout[b-hrs0xnu4g7] {
    width: 100%;
    display: flex;
    justify-content: center; 
    padding: 10px 0;
}

.btn-logout[b-hrs0xnu4g7] {
    border: transparent;
    position: relative;
    left: 8rem;
}

.img-column[b-hrs0xnu4g7] {
    /*display: flex;
    justify-content: center;*/ /* centra horizontal */
    align-items: center; /* centra vertical */
    height: 100%; /* ocupa todo el alto del contenedor */
}

.div-column[b-hrs0xnu4g7] {
    display: flex;
    justify-content: center; /* centra horizontal */
    align-items: center; /* centra vertical */
    height: 100%; /* ocupa todo el alto del contenedor */
}

.img-side[b-hrs0xnu4g7] {
    max-width: 100%;
    max-height: 80dvh;
    object-fit: contain;
    margin-left: 6.25rem; 
}

.bas-circle-icon[b-hrs0xnu4g7] {
    color: #A80000;
    font-size: 3.125rem; 
    font-family: 'IBM Plex Sans', sans-serif;
}

.bas-text-demoEnd[b-hrs0xnu4g7] {
    color: #A80000;
    font-size: 1.75rem; 
    font-family: 'IBM Plex Sans', sans-serif;
    margin-top: 1rem;
}

.text-limited[b-hrs0xnu4g7] {
    max-width: 25rem; 
    margin: 0 auto; /* centra horizontalmente */
    text-align: center;
}

/* Responsive: en pantallas chicas, apilar */
@media (max-width: 768px) {
    .grid-container[b-hrs0xnu4g7] {
        grid-template-columns: 1fr; 
        grid-template-rows: auto auto;
    }

    .img-column[b-hrs0xnu4g7] {
        display: none !important;
    }

    .btn-logout[b-hrs0xnu4g7] {
        border: transparent;
        position: relative;
        left: 0rem;
    }


    .left-column[b-hrs0xnu4g7] {
        grid-template-rows: auto auto auto;
    }
}


@media (min-width: 1700px) {
    .bas-circle-icon[b-hrs0xnu4g7] {
        font-size: 3.75rem; 
    }

    .bas-text-demoEnd[b-hrs0xnu4g7] {
        font-size: 2.25rem; 
    }

    .bas-btn-figma[b-hrs0xnu4g7] {
        font-size: 1.10rem;
    }

    .bas-p[b-hrs0xnu4g7] {
        font-size: 1.25rem;
    }

}
/* /Shared/MainLayout.razor.rz.scp.css */
.page[b-ygqxt1w1s1] {
    position: relative;
    display: flex;
    flex-direction: column;
}

.main[b-ygqxt1w1s1], .main-sidebar-collapsed[b-ygqxt1w1s1] {
    flex: 1;
    background-color: var(--Primary-Ligth);
    display: grid;
    grid-template-rows: auto 1fr auto;
    min-height: 100vh;
}

.app-main[b-ygqxt1w1s1] {
    padding-bottom: var(--footer-h);
}

.NoAuthorized[b-ygqxt1w1s1] {
    background-color: white !important;
    margin: 0px !important;
}

.InstanceSelect[b-ygqxt1w1s1] {
    margin: 0px !important;
}

.footer-style[b-ygqxt1w1s1], .footer-style > a[b-ygqxt1w1s1] {
    background-color: gray;
    text-align: center;
    color: white;
    font-size: smaller;
}

.app-footer[b-ygqxt1w1s1] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--footer-h);
}


@media (min-width: 641px) {
    /*ejecuta cuando la pantalla es de 641 a infinito*/
    
    .page[b-ygqxt1w1s1] {
        flex-direction: row;
    }

    .main[b-ygqxt1w1s1]{
        margin-left:260px;
    }

    .main-sidebar-collapsed[b-ygqxt1w1s1] {
        margin-left: 84px;
    }

    .sidebar[b-ygqxt1w1s1] {
        width: 260px;
        position: fixed;
        top: 0;
        /*css figma*/
        border-right: 1px solid var(--Primary-Ligth);
        background: var(--White, #FFF);
    }

    .sidebar-collapsed[b-ygqxt1w1s1] {
        width: 84px;
        position: fixed;
        top: 0;
        /*css figma*/
        border-right: 1px solid var(--Primary-Ligth);
        background: var(--White, #FFF);
        z-index: 1000;
    }

        .sidebar-collapsed:hover[b-ygqxt1w1s1] {
            width: 260px;
            --Primary-shadow: color-mix(in srgb, var(--Gray-400) 50%, transparent);
            box-shadow: 4px 0px 5px 1px var(--Primary-shadow);
        }



    .top-nav[b-ygqxt1w1s1] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

}

.top-nav-container[b-ygqxt1w1s1]{
    position:sticky;
    top:0rem;
    z-index:100;
}

.top-nav[b-ygqxt1w1s1] {
    background-color: #fffffc;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 35px 16px 42px;
    height: 75px;
    border-bottom: 1px solid var(--Primary-Ligth);
}

.body-content[b-ygqxt1w1s1]{
    margin:25px 35px;
}