/* ============================================================
   GALVIS - Responsive (se carga el último)
   ============================================================ */

@media (max-width: 720px) {
    /* Header compacto */
    .galvis-header {
        padding: 0 12px;
        height: 56px;
    }
    .header-brand { font-size: 1rem; gap: 8px; padding: 3px 5px; }
    .header-logo { width: 28px; height: 28px; }
    .header-username { display: none; }
    .header-user { gap: 6px; }
    .btn-admin,
    .btn-logout { width: 36px; height: 36px; }

    /* Main */
    .dashboard-main { padding: 18px 12px; }
    .dashboard-card { padding: 20px 16px; }
    .login-card { padding: 30px 22px; }
    .login-logo-bg { width: 220px; height: 220px; }

    /* Admin tiles */
    .admin-grid { grid-template-columns: 1fr; }
    .admin-tile { padding: 16px; gap: 12px; }
    .admin-tile-icon { width: 42px; height: 42px; }
    .admin-tile-icon .material-icons { font-size: 21px; }

    /* Modales a pantalla completa */
    .modal-overlay { padding: 0; align-items: flex-start; }
    .modal-box {
        padding: 24px 18px;
        max-width: 100%;
        border-radius: 0;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .modal-box-lg {
        border-radius: 0;
        min-height: 100vh;
        max-height: 100vh;
        justify-content: flex-start;
    }
    .modal-header { padding: 12px 14px; }
    .modal-body { padding: 12px; }
    .modal-footer { padding: 10px 14px; gap: 8px; }
    .modal-footer .btn-primary,
    .modal-footer .btn-secondary { flex: 1; }

    /* Filas de usuario */
    .user-row { padding: 9px 10px; gap: 9px; }
    .user-avatar { width: 34px; height: 34px; font-size: 0.88rem; }
    .user-name { font-size: 0.86rem; }
    .user-meta { font-size: 0.72rem; gap: 7px; }
    .user-action { width: 30px; height: 30px; }
    .user-action .material-icons { font-size: 16px; }

    /* Formulario */
    .form-group { padding: 10px; }
    .form-group-switch { padding: 9px 10px; }
    .pwd-requirements { padding: 10px; }

    /* Toast */
    #toast-container { left: 12px; right: 12px; bottom: 12px; }
    .toast { max-width: 100%; }

    /* Errores */
    .error-card { padding: 30px 22px 24px; }
    .error-logo { width: 90px; height: 90px; margin-bottom: 16px; }
    .error-code { font-size: 3.4rem; gap: 7px; }
    .error-code-icon { font-size: 2.2rem !important; }
    .error-title { font-size: 1.15rem; }
    .error-message { font-size: 0.88rem; }
}