/* auth.css — páginas de autenticación v2 (register / login). Standalone, pre-shell.
   Usa los tokens de theme.css (--mr-*). Sin emojis: iconos SVG de línea. */

/* Fuente base: estas páginas NO llevan class="mr-app", así que fijamos la
   tipografía aquí para que el texto no caiga al serif del navegador. */
body {
  font-family: var(--mr-sans);
  color: var(--mr-ink);
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.011em;
  margin: 0;
}

.a-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--mr-bg); color: var(--mr-ink);
}

/* Controles esquina superior derecha: idioma + tema */
.a-controls { position: fixed; top: 18px; right: 18px; display: flex; gap: 8px; align-items: center; }
.a-lang { display: flex; border: 1px solid var(--mr-bd); border-radius: 8px; overflow: hidden; background: var(--mr-sf); }
.a-lang button {
  border: 0; background: none; cursor: pointer; padding: 7px 9px;
  font: 600 11px var(--mr-mono); color: var(--mr-ink3); letter-spacing: .04em;
}
.a-lang button + button { border-left: 1px solid var(--mr-bd); }
.a-lang button.on { background: var(--mr-ac); color: var(--mr-ac-ink); }
.a-lang button:not(.on):hover { color: var(--mr-ink); }

.a-theme {
  border: 1px solid var(--mr-bd); background: var(--mr-sf);
  border-radius: 8px; padding: 7px 11px; cursor: pointer;
  font: 600 11px var(--mr-mono); color: var(--mr-ink2);
}
.a-theme:hover { border-color: var(--mr-ink3); }

.a-card {
  width: 100%; max-width: 400px;
  background: var(--mr-sf); border: 1px solid var(--mr-bd);
  border-radius: 16px; padding: 36px 34px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

.a-brand { display: flex; align-items: center; gap: 9px; margin-bottom: 22px; }
.a-brand svg { display: block; }
.a-brand span { font: 700 18px var(--mr-display); letter-spacing: -.01em; }

.a-h1 { font: 700 24px var(--mr-display); letter-spacing: -.02em; margin: 0 0 6px; }
.a-sub { font: 400 13.5px var(--mr-sans); color: var(--mr-ink2); margin: 0 0 22px; line-height: 1.5; }

.a-field { display: grid; gap: 6px; margin-bottom: 15px; }
.a-field label { font: 600 12.5px var(--mr-sans); color: var(--mr-ink2); }
.a-field input {
  width: 100%; box-sizing: border-box;
  padding: 11px 13px; font: 500 14px var(--mr-sans);
  border: 1px solid var(--mr-bd); border-radius: 9px;
  background: var(--mr-bg); color: var(--mr-ink);
}
.a-field input:focus { outline: 2px solid var(--mr-sig); outline-offset: 1px; border-color: transparent; }

.a-pass { position: relative; }
.a-pass input { padding-right: 42px; }
.a-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: 6px; cursor: pointer; color: var(--mr-ink3);
  display: flex; align-items: center;
}
.a-eye:hover { color: var(--mr-ink); }

.a-btn {
  width: 100%; margin-top: 6px;
  background: var(--mr-ac); color: var(--mr-ac-ink); border: 0;
  border-radius: 9px; padding: 12px; cursor: pointer;
  font: 600 14.5px var(--mr-sans);
  display: flex; align-items: center; justify-content: center; gap: 9px;
}
.a-btn:hover { opacity: .9; }
.a-btn:disabled { opacity: .55; cursor: default; }

.a-foot { margin-top: 20px; font: 400 13px var(--mr-sans); color: var(--mr-ink2); text-align: center; }
.a-foot a, .a-link { color: var(--mr-ink); font-weight: 600; text-decoration: none; }
.a-foot a:hover, .a-link:hover { text-decoration: underline; }
.a-forgot { display: block; text-align: right; margin: -8px 0 15px; font-size: 12.5px; }

/* Alertas */
.a-alert { border-radius: 9px; padding: 11px 13px; font: 400 13px var(--mr-sans); line-height: 1.45; margin-bottom: 16px; }
.a-alert a { font-weight: 600; color: inherit; text-decoration: underline; }
.a-alert-err { background: var(--mr-crit-s); color: var(--mr-crit); }
.a-alert-ok  { background: var(--mr-good-s); color: var(--mr-good); }

/* Estado "revisa tu correo" */
.a-check { text-align: center; }
.a-check svg { color: var(--mr-sig); margin-bottom: 14px; }
.a-check h2 { font: 700 20px var(--mr-display); margin: 0 0 8px; }
.a-check p { font-size: 13.5px; color: var(--mr-ink2); line-height: 1.55; margin: 0 0 18px; }
.a-check strong { color: var(--mr-ink); }

.a-spin {
  width: 15px; height: 15px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4); border-top-color: currentColor;
  animation: a-rot .7s linear infinite;
}
@keyframes a-rot { to { transform: rotate(360deg); } }