/* =========================================================
   ESCRITORIO
   ========================================================= */

#main-container {
    display: flex;
    flex-direction: row;
    gap: 12px;
}

#map-container {
    flex: 1;
    min-width: 0;
}

#side-panel {
    width: 22%;
    min-width: 280px;
    max-width: 360px;
}

/* =========================================================
   GRAFICAS
   ========================================================= */

#graphs-panel {
    flex: 1;
    min-width: 0;
    min-height: 0;
}

.graphs-container {
    width: 100%;
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    box-sizing: border-box;
}

.graph-card {
    width: 100%;
    height: 500px;
    min-height: 400px;
    box-sizing: border-box;
}

.graph-card .dash-graph {
    width: 100% !important;
    height: 100% !important;
}

@media (max-width: 768px) {

    #graphs-main-container {
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        padding: 8px !important;
        gap: 8px !important;
    }
}

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

@media (max-width: 768px) {

    #graphs-panel {
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        flex: none !important;
        overflow: visible !important;
    }

    .graphs-container {
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
    }

    .graph-card {
        width: 100% !important;
        height: 55vh !important;
        min-height: 350px;
    }

    .graph-card .dash-graph {
        width: 100% !important;
        height: 100% !important;
    }
}


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

@media (max-width: 768px) {

    #main-container {
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        padding: 8px !important;
        gap: 8px !important;
    }

    #map-container {
        width: 100% !important;
        height: 55vh !important;
        min-height: 350px;
        flex: none !important;
    }

    #map-container .dash-graph {
        width: 100% !important;
        height: 100% !important;
    }

    #side-panel {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        min-height: 200px;
        overflow: visible !important;
    }
}

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


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

@media (max-width: 768px) {

    /* -----------------------------------------------------
       CONTAINER BOOTSTRAP
       ----------------------------------------------------- */

    .navbar-container {
        width: 100% !important;

        max-width: none !important;

        padding-left: 8px !important;
        padding-right: 8px !important;

        margin: 0 !important;
    }


    /* -----------------------------------------------------
       CONTENEDOR PRINCIPAL

       Escritorio:
       izquierda | titulo | derecha

       Celular:
       titulo
       izquierda | derecha
       ----------------------------------------------------- */

    #navbar-content {

        display: grid !important;

        grid-template-columns:
            minmax(0, 1fr)
            auto !important;

        grid-template-areas:
            "title title"
            "left right" !important;

        width: 100% !important;

        min-width: 0 !important;

        min-height: 0 !important;

        gap: 5px 4px !important;

        padding: 3px 0 !important;

        box-sizing: border-box !important;

        align-items: center !important;
    }


    /* =====================================================
       TITULO
       ===================================================== */

    #navbar-title {

        grid-area: title !important;

        width: 100% !important;

        min-width: 0 !important;

        text-align: center !important;

        font-size: 16px !important;

        line-height: 20px !important;

        padding: 2px 4px !important;

        margin: 0 !important;

        white-space: nowrap !important;

        overflow: hidden !important;

        text-overflow: ellipsis !important;

        box-sizing: border-box !important;
    }


    /* =====================================================
       IZQUIERDA
       MAPA / GRAFICAS
       ===================================================== */

    #navbar-left {

        grid-area: left !important;

        display: flex !important;

        align-items: center !important;

        justify-content: flex-start !important;

        gap: 2px !important;

        width: auto !important;

        min-width: 0 !important;

        flex: none !important;

        overflow: hidden !important;
    }


    /* LINKS MAPA / GRAFICAS */

    #navbar-left .nav-link {

        flex: 0 0 auto !important;

        font-size: 12px !important;

        line-height: 18px !important;

        padding: 6px 6px !important;

        margin: 0 !important;

        white-space: nowrap !important;
    }


    /* =====================================================
       DERECHA
       USUARIO / NOTIFICACIONES / SALIR
       ===================================================== */

    #navbar-right {

        grid-area: right !important;

        display: flex !important;

        align-items: center !important;

        justify-content: flex-end !important;

        gap: 4px !important;

        width: auto !important;

        min-width: 0 !important;

        flex: none !important;
    }


    /* -----------------------------------------------------
       OCULTAR NOMBRE DE USUARIO EN CELULAR

       El nombre completo ocupa demasiado espacio.
       ----------------------------------------------------- */

    .navbar-user {

        display: none !important;
    }


    /* =====================================================
       BOTONES DERECHA
       ===================================================== */

    #navbar-right button {

        flex: 0 0 auto !important;

        height: 32px !important;

        min-height: 32px !important;

        padding-left: 7px !important;

        padding-right: 7px !important;

        margin: 0 !important;

        font-size: 11px !important;

        line-height: 16px !important;

        white-space: nowrap !important;
    }


    /* =====================================================
       BOTON NOTIFICACIONES
       ===================================================== */

    .navbar-notification-btn {

        padding-left: 6px !important;

        padding-right: 6px !important;
    }


    /* =====================================================
       BOTON SALIR
       ===================================================== */

    .navbar-logout-btn {

        padding-left: 8px !important;

        padding-right: 8px !important;
    }

}



/* =========================================================
   CELULARES MUY PEQUEÑOS
   400px o menos
   ========================================================= */

@media (max-width: 400px) {

    .navbar-container {

        padding-left: 4px !important;

        padding-right: 4px !important;
    }


    #navbar-content {

        gap: 4px 2px !important;
    }


    #navbar-title {

        font-size: 15px !important;

        padding-left: 2px !important;

        padding-right: 2px !important;
    }


    #navbar-left {

        gap: 0 !important;
    }


    #navbar-left .nav-link {

        font-size: 11px !important;

        padding-left: 5px !important;

        padding-right: 5px !important;
    }


    #navbar-right {

        gap: 2px !important;
    }


    #navbar-right button {

        font-size: 10px !important;

        padding-left: 5px !important;

        padding-right: 5px !important;
    }

}