/* =======================================
   LAYOUT
======================================= */

.nc-app{

    display:flex;

    min-height:100vh;

    background:var(--nc-background);

}

.nc-content{

    flex:1;

    display:flex;

    flex-direction:column;

}

.nc-main{

    padding:30px;

    box-sizing:border-box;

}

.nc-container{

    width:100%;

    max-width:1600px;

    margin:0 auto;

    box-sizing:border-box;

}

.nc-row{

    display:flex;

    flex-wrap:wrap;

    gap:20px;

}

.nc-col{

    flex:1 1 auto;

    min-width:0;

}

/* =======================================
   CONTENIDO
======================================= */

.nc-page{

    margin-left:270px;

    min-height:100vh;

    background:#F5F7FA;

    transition:margin-left .30s ease;

}

.nc-page-collapsed{

    margin-left:80px;

}

/* =======================================
   GRID 12 COLUMNAS
======================================= */

.nc-col-1{

    flex:0 0 8.333%;

    max-width:8.333%;

}

.nc-col-2{

    flex:0 0 16.666%;

    max-width:16.666%;

}

.nc-col-3{

    flex:0 0 25%;

    max-width:25%;

}

.nc-col-4{

    flex:0 0 33.333%;

    max-width:33.333%;

}

.nc-col-5{

    flex:0 0 41.666%;

    max-width:41.666%;

}

.nc-col-6{

    flex:0 0 50%;

    max-width:50%;

}

.nc-col-7{

    flex:0 0 58.333%;

    max-width:58.333%;

}

.nc-col-8{

    flex:0 0 66.666%;

    max-width:66.666%;

}

.nc-col-9{

    flex:0 0 75%;

    max-width:75%;

}

.nc-col-10{

    flex:0 0 83.333%;

    max-width:83.333%;

}

.nc-col-11{

    flex:0 0 91.666%;

    max-width:91.666%;

}

.nc-col-12{

    flex:0 0 100%;

    max-width:100%;

}

/* =======================================
   RESPONSIVE
======================================= */

@media (max-width:992px){

    .nc-page{

        margin-left:0;

    }

    .nc-row{

        flex-direction:column;

    }

    [class^="nc-col-"]{

        flex:0 0 100%;

        max-width:100%;

    }

}