/* ------------------------------------------------------------------------------ */
/* -------------------------------- Media Quieres ------------------------------- */
/* ------------------------------------------------------------------------------ */

.mobile-nav {
    display: none;
}

.hamburger {
    display: none;
}

@media (max-width: 1200px) {
    .key-title {
        font-size: 0.7rem;
    }
}

@media (max-width: 950px) {
    .summary-title,
    .summary-content {
        font-size: 0.9rem;
    }

    .area-title {
        font-size: 0.7rem !important;
    }
}
   

@media (max-width: 768px) {
    .desktop-nav {
        display: none;
    }

    .hamburger {
        display: flex;
        margin: 10px;
        background: none;
        color: white;
        border: none;
        font-size: 2rem;
        position: absolute;
        z-index: 9999;
    }

    .mobile-nav {
        display: flex;
        flex-direction: column;
        position: fixed;
        transform: translateX(-100%);
    }

    .mobile-nav > .navigation,
    .mobile-nav > .user-details {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        margin-top: 64px;
    }

    .mobile-nav.open {
        display: flex;
        transform: translateX(0);
    }

    .navigation,
    .user-details {
        margin-top: 0 !important; 
        margin: 20px !important;
    }

    .navigation > li,
    .user-details > li {
        margin: 8px;
    }

    .area-card-titles {
        display: none;
    }

    .machine-boxes {
        width: 170px;
    }

    .status-title,
    .number-value {
        display: none !important;
    }
}