/* Entrar: la misma escena que en la app. Foco pregunta y el formulario va sobre el agua. */
.login { min-height: 100vh; display: flex; flex-direction: column; }
.login-top { display: flex; flex-direction: column; align-items: center; padding: 20px 20px 0; text-align: center; }
.login .brand { align-self: flex-start; font-size: 22px; color: var(--title); }
.login-top foco-foca { width: 150px; margin-top: 2vh; }
.login .bubble { margin: 4px 0 6px; }
.login foco-agua { flex: 1; padding: 62px 20px 40px; color: #fff; }
.login-body { max-width: 440px; margin: 0 auto; text-align: center; }
.login form { display: grid; gap: 14px; margin: 0 0 22px; }
.login label { display: grid; gap: 8px; color: #fff; text-align: left; font-size: 0.9rem; }
.login input { border: 0; border-radius: 20px; padding: 17px 20px; font-size: 1.06rem; }
.login button.primary { min-height: 56px; background: #fff; color: var(--accent); font-size: 1.06rem; box-shadow: none; }
.login button.primary:hover { background: #eef4fc; }
.login button.primary:disabled { background: rgba(255, 255, 255, 0.55); opacity: 1; }
.login #restart { color: #fff; }
.login #restart:hover { background: rgba(255, 255, 255, 0.14); }
.login p, .login .muted { color: rgba(255, 255, 255, 0.92); }
.login a { color: #fff; }
.login [hidden] { display: none; }
.login #result { min-height: 1.5em; margin: 0; font-weight: 600; }
.login #result:empty { display: none; }
@media (max-width: 640px) { .login-top foco-foca { width: 124px; } .login .bubble { font-size: 1.05rem; } }