/* ========================================
   TS-241 — Auth flows shared CSS
   Reutilitza els estils base de login.css (.login-container, .login-card, etc.)
   i afegeix: estats success/error, hint de password, footer-link,
   loading skeleton i bloc d'errors de token.

   Typography: Bricolage Grotesque per a titulars (display, jerarquia visual)
   + system stack per al body (rendiment + neutralitat).
   ======================================== */

/* ─── Jerarquia tipogràfica (display vs body) ─── */
.login-card h1,
.login-card h2,
.auth-state-title {
  font-family: "Bricolage Grotesque", -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 700;
  letter-spacing: -0.015em;
  font-optical-sizing: auto;
}
.login-card h1 { font-size: 1.6rem; line-height: 1.15; }
.auth-state-title { font-size: 1.5rem; line-height: 1.2; }

/* Pill de l'email manté el seu pes tabular */
.auth-account-pill {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 0.92rem;
  letter-spacing: -0.01em;
}

.auth-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--spacing-md);
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  text-decoration: none;
  font-weight: 500;
}
.auth-back-link:hover { text-decoration: underline; }

/* Hint sota inputs */
.form-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-top: 4px;
}

/* Subtítol amb email (Per al compte: x@y) */
.auth-account-pill {
  display: inline-block;
  background: rgba(19, 117, 188, 0.12);
  color: var(--color-primary);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: var(--font-size-sm);
  font-weight: 600;
  margin-top: 6px;
  word-break: break-all;
}

/* Estats grans (success, token-error) */
.auth-state {
  text-align: center;
  padding: var(--spacing-md) 0;
  animation: stateFade 0.3s ease-out;
}
@keyframes stateFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.auth-state-icon {
  font-size: 56px !important;
  display: inline-block;
  margin-bottom: var(--spacing-md);
}
.auth-state-icon.success { color: var(--color-success, #10b981); }
.auth-state-icon.error   { color: var(--color-danger,  #ef4444); }
.auth-state-icon.warning { color: var(--color-warning, #f59e0b); }

.auth-state-title {
  font-size: var(--font-size-xl);
  font-weight: 600;
  margin: 0 0 var(--spacing-sm);
  color: var(--color-text-primary);
}

.auth-state-body {
  font-size: var(--font-size-base);
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0 0 var(--spacing-lg);
}

.auth-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  align-items: center;
}

.auth-actions .btn-login,
.auth-actions .btn-login-secondary {
  width: 100%;
}

.btn-login-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  padding: 12px 20px;
  border-radius: 10px;
  font-size: var(--font-size-base);
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  display: inline-block;
  transition: background 0.15s ease;
}
.btn-login-secondary:hover {
  background: rgba(19, 117, 188, 0.08);
}

/* Verifying skeleton */
.auth-verifying {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) 0;
}
.auth-verifying .spinner {
  width: 32px;
  height: 32px;
  border: 3px solid rgba(19, 117, 188, 0.2);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Banner d'instal·lació al login */
.auth-install-banner {
  margin-top: var(--spacing-lg);
  padding: var(--spacing-md);
  background: rgba(19, 117, 188, 0.08);
  border: 1px solid rgba(19, 117, 188, 0.18);
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  text-decoration: none;
}
.auth-install-banner:hover {
  background: rgba(19, 117, 188, 0.14);
}
.auth-install-banner .material-symbols-outlined {
  color: var(--color-primary);
  font-size: 22px;
}
.auth-install-banner-text {
  flex: 1;
  line-height: 1.3;
}
.auth-install-banner-arrow {
  color: var(--color-primary);
  font-size: 18px !important;
}

/* Petit link a sota del formulari de login */
.login-extra-links {
  margin-top: var(--spacing-md);
  text-align: center;
}
.login-extra-links a {
  color: var(--color-primary);
  font-size: var(--font-size-sm);
  text-decoration: none;
}
.login-extra-links a:hover { text-decoration: underline; }