/* =================================================================
   TABLET  (<=960px)
================================================================= */
@media (max-width: 960px) {

    /* Login */
    .login-card {
        max-width: 440px;
    }

    /* Modules */
    .modules__grid {
        grid-template-columns: repeat(4, 1fr);
    }

}

/* =================================================================
   MOBILE  (<=768px)
================================================================= */
@media (max-width: 768px) {

    /* Login */
    .login-container {
        padding: 24px 16px;
        align-items: flex-start;
    }

    .login-card {
        padding: 36px 24px 32px;
    }

    .card__title {
        font-size: 22px;
    }

    /* Modules */
    .sidebar  { display: none; }
    .app-main { margin-left: 0; }
    .content  { padding: 24px 16px; }
    .topbar   { padding: 0 16px; }

    .modules__grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

}

/* =================================================================
   MOBILE PEQUENO  (<=480px)
================================================================= */
@media (max-width: 480px) {

    .modules__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

}