/* =====================================
   TABLET
===================================== */


@media(max-width:1100px) and (min-width:769px){


    .wrapper{

        display:flex;

        flex-direction:row;

    }


    .sidebar{

        width:220px;

        flex-shrink:0;

    }


    .main{

        flex:1;

        display:flex;

        flex-direction:column;

    }


    .topbar{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    text-align:center;

    padding:20px;

}

    .content{

        padding:20px;

    }


}

/* =====================================
   MOVIL
===================================== */


@media(max-width:768px){


    /* LAYOUT */

    .wrapper{

        flex-direction:column;

    }



    /* SIDEBAR */

    .sidebar{

        width:100%;

    }



    /* TOPBAR */

    .topbar{
        flex-direction:column;

        gap:10px;

        text-align:center;

    }



    /* CONTENIDO */

    .content{

        padding:15px;

    }



    /* ELEMENTOS GENERALES */

    .container{

        width:100%;

    }



    .btn{

        max-width:100%;

    }



    /* TABLAS */

    .table-responsive{

        overflow-x:auto;

        width:100%;

    }
 .topbar{

        padding:20px;

    }


}



/* =====================================
   MOVIL PEQUEÑO
===================================== */


@media(max-width:480px){


    .content{

        padding:10px;

    }


    h1,
    h2{

        font-size:22px;
    }


    .topbar{

        padding: 15px;

    }


}