/* ═══════════════════════════════════════════════════════════════════════════
   AUTH / LOGIN / RESPONSIVE
   Ajustes responsivos de la superficie pública de acceso.
   Debe cargarse después de login.css.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 700px) {
    .login-page {
        place-items: safe center;
        padding: 24px 16px;
    }

    .login-panel {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .login-visual {
        min-height: 0;
        padding: 20px 18px 22px;
        border-right: none;
        border-bottom: 2px solid var(--miapp-section-accent);
    }

    .login-brand-intro {
        width: min(100%, 320px);
        margin-top: 20px;
    }

    .login-brand-intro::before {
        margin-bottom: 16px;
    }

    .login-brand-heading {
        font-size: 15px;
    }

    .login-brand-description {
        font-size: 11.5px;
    }

    .login-header {
        min-height: 54px;
        padding: 0 18px;
    }

    .login-field {
        grid-template-columns: minmax(96px, 30%) minmax(0, 1fr);
        min-height: 68px;
    }

    .login-field > label {
        padding: 10px 14px;
    }

    .login-field-control {
        padding: 12px 16px;
    }

    .login-actions {
        padding: 10px 12px;
    }
}

@media (max-width: 520px) {
    .login-page {
        padding-inline: 12px;
    }

    .login-field {
        grid-template-columns: minmax(88px, 31%) minmax(0, 1fr);
    }

    .login-field > label {
        padding: 10px 12px;
    }

    .login-field-control {
        padding: 10px 12px;
    }
}