/* ==========================================
   CoEIG MOBILE FIXES
========================================== */

html,
body{
    max-width:100%;
    overflow-x:hidden;
}

/* Imágenes */
img{
    max-width:100%;
    height:auto;
}

/* Iframes */
iframe{
    max-width:100%;
}

/* Tablas */
table{
    width:100%;
    display:block;
    overflow-x:auto;
}

/* ==========================================
   HEADER
========================================== */

@media (max-width:768px){

    .header{
        flex-direction:column !important;
        gap:15px !important;
        text-align:center !important;
        padding:15px !important;
    }

    .brand{
        flex-direction:column !important;
    }

    .brand img{
        width:70px !important;
        height:70px !important;
    }

    .brand-text h1{
        font-size:22px !important;
    }

    .brand-text small{
        font-size:12px !important;
        display:block !important;
        max-width:260px;
        margin:auto;
    }

    .userbox{
        justify-content:center !important;
    }

}

/* ==========================================
   MENU
========================================== */

@media (max-width:768px){

    nav{
        flex-direction:column !important;
        gap:8px !important;
        padding:10px !important;
    }

    nav a{
        width:100%;
        text-align:center;
    }

}

/* ==========================================
   PRINCIPAL.PHP
========================================== */

@media (max-width:768px){

    .container{
        flex-direction:column !important;
        padding:15px !important;
    }

    .sidebar{
        width:100% !important;
    }

    .main{
        width:100% !important;
        padding:18px !important;
    }

}

/* ==========================================
   GRID GENERALES
========================================== */

@media (max-width:768px){

    .grid{
        grid-template-columns:1fr !important;
    }

}

/* ==========================================
   BOTONES FLOTANTES
========================================== */

@media (max-width:768px){

    .admin-btn,
    .admin-disabled{

        right:10px !important;
        bottom:10px !important;

        padding:12px 14px !important;

        font-size:13px !important;
    }

}

/* ==========================================
   RECAUDACIONES
========================================== */

@media (max-width:768px){

    .transparency{
        flex-direction:column !important;
    }

    .grid{
        grid-template-columns:1fr !important;
    }

    .total-money{
        font-size:40px !important;
    }

}

/* ==========================================
   STREAMING
========================================== */

@media (max-width:768px){

    .stream-box{
        height:220px !important;
    }

}

/* ==========================================
   MODALES
========================================== */

@media (max-width:768px){

    .modal-content{
        padding:20px !important;
        width:95% !important;
    }

    .actions{
        flex-direction:column !important;
    }

}