/* ===========================================================================
   RIFARIO — Pantallas de acceso
   ===========================================================================
   Una sola tarjeta centrada, mucho espacio en blanco y una acción dominante:
   aquí la persona solo tiene que hacer una cosa. Es el primer contacto con la
   marca, así que el logo va arriba y a tamaño legible.
   =========================================================================== */

.auth {
  min-height: 100dvh;
  display: grid; place-items: center;
  padding: calc(var(--safe-top) + var(--space-8)) var(--space-4)
           calc(var(--safe-bottom) + var(--space-8));
  background: var(--background);
}

.auth__card {
  width: 100%; max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  padding: var(--space-8) var(--space-6);
}

.auth__brand {
  display: inline-flex; align-items: center; gap: var(--space-3);
  font-weight: var(--weight-bold); font-size: var(--text-h3);
  letter-spacing: -0.02em; color: var(--text-primary);
  text-decoration: none; margin-bottom: var(--space-6);
}
.auth__brand img { width: 34px; height: 34px; }

.auth__title {
  font-size: var(--text-h1); font-weight: var(--weight-bold);
  letter-spacing: -0.025em; margin: 0 0 var(--space-2);
}

.auth__links {
  margin: var(--space-6) 0 0; text-align: center;
  font-size: var(--text-small); color: var(--text-muted);
}
.auth__links a { margin: 0 var(--space-2); font-weight: var(--weight-medium); }

.auth__note {
  margin-top: var(--space-4); padding: var(--space-3) var(--space-4);
  background: var(--brand-primary-soft);
  border: 1px solid var(--brand-primary-border);
  border-radius: var(--radius-md);
  font-size: var(--text-small); color: var(--text-secondary);
}

/* ---------------------------------------------------------------------------
   Continuar con Google
   ---------------------------------------------------------------------------
   Fondo blanco, borde gris y el logotipo a la izquierda: son las condiciones de
   uso de la marca de Google. No se recolorea el logo ni se mete dentro de un
   botón azul, que es lo que hace que un botón parezca de Google sin serlo.
   --------------------------------------------------------------------------- */
.auth__google {
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-3); width: 100%;
  padding: 12px var(--space-4);
  background: #fff; color: #1f1f1f;
  border: 1px solid #dadce0; border-radius: var(--radius-md);
  font-size: var(--text-body); font-weight: var(--weight-medium);
  font-family: inherit; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease;
}
.auth__google:hover { background: #f7f8f8; }
.auth__google:focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; }
.auth__google img { width: 18px; height: 18px; }

/* Separador "o". La línea se dibuja con dos pseudoelementos para que el ancho se
   reparta solo, sin medir nada en JavaScript. */
.auth__sep {
  display: flex; align-items: center; gap: var(--space-3);
  margin: var(--space-5) 0;
  font-size: var(--text-small); color: var(--text-muted);
}
.auth__sep::before, .auth__sep::after {
  content: ""; flex: 1; height: 1px; background: var(--border);
}

/* Enlace que cambia de método (a contraseña, a código). No es una acción
   principal, así que no compite visualmente con el botón. */
/* `min-height: 44px` no es decoración: medido en móvil, con solo el relleno el botón
   quedaba en 37 px de alto, por debajo del objetivo táctil mínimo. Un enlace que
   cambia el método de acceso es justo el que alguien pulsa con prisa y con una mano. */
.auth__switch {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: 44px; margin-top: var(--space-4);
  background: none; border: 0; padding: var(--space-2);
  font-family: inherit; font-size: var(--text-small);
  color: var(--brand-primary); font-weight: var(--weight-medium);
  cursor: pointer; text-align: center;
}
.auth__switch:hover { text-decoration: underline; }

/* ---------------------------------------------------------------------------
   Código de un solo uso
   ---------------------------------------------------------------------------
   UN campo, no seis casillas. Seis casillas obligan a reimplementar a mano el
   pegado, el retroceso, el foco y la selección — y a equivocarse en alguno, que
   es lo que hace que teclear un código sea molesto en tantos sitios. Con un solo
   input, el navegador ya sabe hacer todo eso, `autocomplete="one-time-code"`
   permite que el sistema lo rellene, e `inputmode="numeric"` saca el teclado
   numérico en el móvil. El aspecto de casillas se consigue con espaciado.
   --------------------------------------------------------------------------- */
.otp__input {
  width: 100%; box-sizing: border-box;
  padding: var(--space-4) var(--space-3);
  font-size: 28px; font-weight: var(--weight-bold);
  letter-spacing: 0.5em; text-indent: 0.5em; text-align: center;
  font-variant-numeric: tabular-nums;
  background: var(--surface); color: var(--text-primary);
  border: 1px solid var(--border); border-radius: var(--radius-md);
}
.otp__input:focus-visible {
  outline: 2px solid var(--brand-primary); outline-offset: 1px;
  border-color: var(--brand-primary);
}
.otp__input[aria-invalid="true"] { border-color: var(--danger, #d92d20); }

.otp__sent { margin: 0 0 var(--space-4); font-size: var(--text-small); color: var(--text-secondary); }
.otp__sent b { color: var(--text-primary); font-weight: var(--weight-medium); }

.otp__resend {
  margin-top: var(--space-4); text-align: center;
  font-size: var(--text-small); color: var(--text-muted);
}
.otp__resend button {
  background: none; border: 0; padding: 0; font-family: inherit;
  font-size: inherit; color: var(--brand-primary);
  font-weight: var(--weight-medium); cursor: pointer;
}
.otp__resend button:disabled { color: var(--text-muted); cursor: default; }

/* ---------------------------------------------------------------------------
   Invitación y espera de aprobación
   --------------------------------------------------------------------------- */
.auth__invite {
  padding: var(--space-4);
  background: var(--brand-primary-soft);
  border: 1px solid var(--brand-primary-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-5);
}
.auth__invite dt {
  font-size: var(--text-small); color: var(--text-muted); margin-bottom: 2px;
}
.auth__invite dd {
  margin: 0 0 var(--space-3); font-weight: var(--weight-medium);
  color: var(--text-primary);
}
.auth__invite dd:last-child { margin-bottom: 0; }

.auth__estado {
  display: grid; place-items: center; gap: var(--space-2);
  text-align: center; padding: var(--space-4) 0 var(--space-2);
}
.auth__estado svg { width: 48px; height: 48px; color: var(--brand-primary); }