/* ============================================================
   PAGE — auth.css  |  Formularios de autenticacion
   ============================================================ */

.auth-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8) var(--sp-4);
}

.auth-card {
  width: 100%;
  max-width: var(--w-form);
  background: var(--c-bg-card);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-8);
}

/* Botón regresar a inicio */
.auth-back {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--text-xs);
  color: var(--c-subtle);
  text-decoration: none;
  margin-bottom: var(--sp-5);
  transition: color var(--t-fast);
}

.auth-back:hover {
  color: var(--c-cyan);
  text-decoration: none;
}

/* Logo + título centrados */
.auth-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.auth-brand__logo {
  width: 56px;
  height: 56px;
  object-fit: contain;
}

.auth-title {
  font-size: var(--text-xl);
  font-weight: var(--weight-semi);
  color: var(--c-ink);
  margin: 0;
  text-align: center;
}

/* Compat: clases anteriores mapeadas a las nuevas alert */
.auth-error   { @apply .alert .alert--error;   }
.auth-success { @apply .alert .alert--success; }

/* Fallback sin @apply (compatibilidad) */
.auth-error {
  background: var(--c-error-08);
  border: 1px solid var(--c-error-30);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  color: var(--c-error);
  font-size: var(--text-sm);
  margin-bottom: var(--sp-4);
}

.auth-success {
  background: var(--c-cyan-08);
  border: 1px solid var(--c-cyan-30);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  color: var(--c-cyan);
  font-size: var(--text-sm);
  margin-bottom: var(--sp-4);
}

.auth-link {
  text-align: center;
  font-size: var(--text-sm);
  color: var(--c-subtle);
  margin-top: var(--sp-4);
  margin-bottom: 0;
}

.auth-link a {
  color: var(--c-cyan);
  text-decoration: none;
}
.auth-link a:hover { text-decoration: underline; }

/* Botón primario de ancho completo en formularios auth */
.auth-card .btn.btn--primary {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: var(--sp-5);
}