/*
 * Plain fallback styling for the sign-in screens (/login, /cambiar-password,
 * /recuperar) on browsers that drop the app's Tailwind CSS: iOS < 15.4 and
 * Chrome < 99 ignore every `@layer` block (PR 4 review finding 09).
 *
 * UNLAYERED, so it also applies on modern browsers — which is why it only sets
 * what the modern design already has (24 rem column, 20/40 px padding, 48 px
 * full-width controls, 16 px text): on a modern browser nothing changes, on an
 * old one the form is usable. No @layer, oklch, :has, :where, custom
 * properties, nesting or flex gap.
 */
.grx-auth { padding: 40px 20px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; }
.grx-auth-col { max-width: 24rem; margin-left: auto; margin-right: auto; }
.grx-auth form label { display: block; margin-top: 12px; margin-bottom: 6px; }
.grx-auth form input[type="email"],
.grx-auth form input[type="password"],
.grx-auth form input[type="text"] { display: block; width: 100%; min-height: 48px; font-size: 16px; box-sizing: border-box; }
.grx-auth form button { display: block; width: 100%; min-height: 48px; font-size: 16px; margin-top: 16px; }
.grx-auth a { min-height: 24px; }
.grx-auth-plain { display: block; margin-top: 16px; }