/**
 * FA Design System v1.0
 * ─────────────────────────────────────────────────────────
 * Tokens que heredan las variables de BuddyBoss como base.
 * Componentes compartidos entre login, registro y onboarding.
 * Cargado en todos los templates custom de fa-core.
 * ─────────────────────────────────────────────────────────
 */

/* ════════════════════════════════════════════════════════
   1. TOKENS
   Heredan --bb-* cuando están disponibles, fallback propio
   ════════════════════════════════════════════════════════ */
:root {
  /* Colores base — desde BB */
  --fa-bg:          var(--bb-body-background-color,       #F4F5F7);
  --fa-surface:     var(--bb-content-background-color,    #FFFFFF);
  --fa-surface-alt: var(--bb-content-alternate-background-color, #F0F2F5);
  --fa-border:      var(--bb-content-border-color,        #DDE1E7);
  --fa-accent:      var(--bb-primary-color,               #2FA9E1);
  --fa-heading:     var(--bb-headings-color,              #1A1D2E);

  /* Texto */
  --fa-text:        var(--bb-headings-color,              #1A1D2E);
  --fa-text-soft:   #6B7280;
  --fa-text-xsoft:  #9CA3AF;

  /* Estado */
  --fa-success:     #16A34A;
  --fa-error:       #DC2626;
  --fa-warning:     #D97706;

  /* Geometría */
  --fa-r-sm:  6px;
  --fa-r:     10px;
  --fa-r-lg:  16px;
  --fa-r-xl:  24px;
  --fa-r-full: 999px;

  /* Sombras */
  --fa-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --fa-shadow:    0 1px 4px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04);
  --fa-shadow-lg: 0 4px 8px rgba(0,0,0,.06), 0 16px 48px rgba(0,0,0,.08);

  /* Transición */
  --fa-t: .18s ease;

  /* Tipografía — usa la del sistema WP/BB, no importamos nada */
  --fa-font: inherit;
}

/* ════════════════════════════════════════════════════════
   2. RESET MÍNIMO (solo dentro de .fa-page)
   ════════════════════════════════════════════════════════ */
.fa-page *, .fa-page *::before, .fa-page *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.fa-page {
  font-family: var(--fa-font);
  color: var(--fa-text);
  -webkit-font-smoothing: antialiased;
}

/* ════════════════════════════════════════════════════════
   3. LAYOUT
   ════════════════════════════════════════════════════════ */

/* Página fullscreen con fondo texturizado suave */
.fa-fullpage {
  min-height: 100vh;
  background-color: var(--fa-bg);
  background-image:
    radial-gradient(circle at 20% 20%, rgba(47,169,225,.06) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(47,169,225,.04) 0%, transparent 50%);
  display: flex;
  flex-direction: column;
}

/* Card centrado */
.fa-card-centrado {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px 48px;
}

.fa-card {
  background: var(--fa-surface);
  border-radius: var(--fa-r-xl);
  box-shadow: var(--fa-shadow-lg);
  border: 1px solid var(--fa-border);
  width: 100%;
  max-width: 420px;
  padding: 40px 40px 36px;
  position: relative;
  overflow: hidden;
}

/* Línea de acento superior */
.fa-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--fa-accent);
  border-radius: var(--fa-r-xl) var(--fa-r-xl) 0 0;
}

/* ════════════════════════════════════════════════════════
   4. HEADER DEL CARD
   ════════════════════════════════════════════════════════ */
.fa-card-header {
  text-align: center;
  margin-bottom: 28px;
}

.fa-card-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}
.fa-card-logo img {
  height: 36px;
  width: auto;
}

.fa-card-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--fa-heading);
  line-height: 1.2;
  margin-bottom: 6px;
  letter-spacing: -.02em;
}

.fa-card-subtitle {
  font-size: 14px;
  color: var(--fa-text-soft);
  line-height: 1.5;
}

/* Ilustración decorativa en el header */
.fa-card-ilus {
  width: 64px;
  height: 64px;
  margin: 0 auto 16px;
  display: block;
}

/* ════════════════════════════════════════════════════════
   5. FORMULARIOS
   ════════════════════════════════════════════════════════ */
.fa-field {
  margin-bottom: 16px;
}

.fa-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--fa-text);
  margin-bottom: 6px;
  letter-spacing: .01em;
}

.fa-input {
  width: 100%;
  padding: 11px 14px;
  font-size: 14px;
  font-family: var(--fa-font);
  color: var(--fa-text);
  background: var(--fa-surface);
  border: 1.5px solid var(--fa-border);
  border-radius: var(--fa-r);
  outline: none;
  transition: border-color var(--fa-t), box-shadow var(--fa-t);
  appearance: none;
}
.fa-input::placeholder { color: var(--fa-text-xsoft); }
.fa-input:focus {
  border-color: var(--fa-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fa-accent) 15%, transparent);
}
.fa-input.fa-input--error { border-color: var(--fa-error); }
.fa-input:disabled { opacity: .5; cursor: not-allowed; }

/* OTP input */
.fa-input--otp {
  max-width: 160px;
  letter-spacing: .3em;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
}

/* Hint y error */
.fa-hint {
  font-size: 12px;
  color: var(--fa-text-xsoft);
  margin-top: 4px;
  line-height: 1.4;
}
.fa-error-msg {
  font-size: 12px;
  color: var(--fa-error);
  margin-top: 4px;
  display: none;
  align-items: center;
  gap: 4px;
}
.fa-error-msg.visible { display: flex; }

/* ════════════════════════════════════════════════════════
   6. BOTONES
   ════════════════════════════════════════════════════════ */

/* Primario */
.fa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--fa-font);
  color: #fff;
  background: var(--fa-accent);
  border: none;
  border-radius: var(--fa-r);
  cursor: pointer;
  transition: opacity var(--fa-t), transform var(--fa-t);
  letter-spacing: .01em;
  text-decoration: none;
}
.fa-btn:hover  { opacity: .88; }
.fa-btn:active { transform: scale(.98); }
.fa-btn:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* Secundario */
.fa-btn--sec {
  background: var(--fa-surface-alt);
  color: var(--fa-text);
  border: 1.5px solid var(--fa-border);
}
.fa-btn--sec:hover { background: var(--fa-border); opacity: 1; }

/* Ghost (solo borde) */
.fa-btn--ghost {
  background: transparent;
  color: var(--fa-accent);
  border: 1.5px solid var(--fa-accent);
}
.fa-btn--ghost:hover { background: color-mix(in srgb, var(--fa-accent) 8%, transparent); opacity: 1; }

/* Inline/link */
.fa-btn--link {
  width: auto;
  background: none;
  color: var(--fa-accent);
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  font-family: var(--fa-font);
}
.fa-btn--link:hover { text-decoration: underline; opacity: 1; }

/* Atrás */
.fa-btn--back {
  width: auto;
  background: none;
  border: none;
  color: var(--fa-text-soft);
  font-size: 13px;
  font-weight: 500;
  font-family: var(--fa-font);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 0;
}
.fa-btn--back:hover { color: var(--fa-text); opacity: 1; }

/* Spinner dentro del botón */
.fa-btn .fa-spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: fa-spin .7s linear infinite;
  flex-shrink: 0;
}
.fa-btn--sec .fa-spinner,
.fa-btn--back .fa-spinner {
  border-color: rgba(0,0,0,.15);
  border-top-color: var(--fa-text-soft);
}
@keyframes fa-spin { to { transform: rotate(360deg); } }

/* ════════════════════════════════════════════════════════
   7. SEPARADOR
   ════════════════════════════════════════════════════════ */
.fa-sep {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0;
  color: var(--fa-text-xsoft);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.fa-sep::before, .fa-sep::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--fa-border);
}

/* ════════════════════════════════════════════════════════
   8. BLOQUE MILITANTE (¿Ya eres militante FA?)
   ════════════════════════════════════════════════════════ */
.fa-militante-bloque {
  background: color-mix(in srgb, var(--fa-accent) 6%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--fa-accent) 25%, transparent);
  border-radius: var(--fa-r-lg);
  padding: 18px;
  margin-bottom: 20px;
}

.fa-militante-titulo {
  font-size: 14px;
  font-weight: 700;
  color: var(--fa-heading);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.fa-militante-titulo-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--fa-accent);
  flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fa-accent) 20%, transparent);
}

/* Opciones de selección (circunscripción, domicilio) */
.fa-opciones {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 12px;
}
.fa-opcion {
  width: 100%;
  padding: 10px 13px;
  text-align: left;
  font-size: 13px;
  font-family: var(--fa-font);
  color: var(--fa-text);
  background: var(--fa-surface);
  border: 1.5px solid var(--fa-border);
  border-radius: var(--fa-r);
  cursor: pointer;
  transition: border-color var(--fa-t), background var(--fa-t);
  line-height: 1.4;
}
.fa-opcion:hover {
  border-color: var(--fa-accent);
  background: color-mix(in srgb, var(--fa-accent) 4%, var(--fa-surface));
}
.fa-opcion.selected {
  border-color: var(--fa-accent);
  background: color-mix(in srgb, var(--fa-accent) 8%, var(--fa-surface));
  font-weight: 500;
}

/* ════════════════════════════════════════════════════════
   9. BADGE DE MODO PRUEBAS
   ════════════════════════════════════════════════════════ */
.fa-badge-pruebas {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #FEF3C7;
  color: #92400E;
  border-bottom: 1px solid #FCD34D;
  padding: 9px 20px;
  font-size: 12px;
  font-weight: 500;
}
.fa-badge-pruebas-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #F59E0B;
}

/* ════════════════════════════════════════════════════════
   10. PASOS DEL SIDEBAR (onboarding)
   ════════════════════════════════════════════════════════ */
.fa-steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fa-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: var(--fa-r);
  transition: background var(--fa-t);
  position: relative;
}
.fa-step.activo { background: var(--fa-surface-alt); }

/* Línea conectora entre pasos */
.fa-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 21px;
  top: 100%;
  width: 1px;
  height: 4px;
  background: var(--fa-border);
}

.fa-step-bubble {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--fa-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
  color: var(--fa-text-xsoft);
  flex-shrink: 0;
  transition: all var(--fa-t);
  background: var(--fa-surface);
}
.fa-step.activo .fa-step-bubble {
  background: var(--fa-accent);
  border-color: var(--fa-accent);
  color: #fff;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fa-accent) 20%, transparent);
}
.fa-step.hecho .fa-step-bubble {
  background: var(--fa-success);
  border-color: var(--fa-success);
  color: #fff;
}

.fa-step-label {
  font-size: 13px;
  color: var(--fa-text-xsoft);
  transition: color var(--fa-t);
}
.fa-step.activo .fa-step-label { color: var(--fa-text); font-weight: 500; }
.fa-step.hecho  .fa-step-label { color: var(--fa-text-soft); }

/* ════════════════════════════════════════════════════════
   11. PROGRESS BAR
   ════════════════════════════════════════════════════════ */
.fa-progress {
  width: 100%;
  height: 3px;
  background: var(--fa-border);
  border-radius: var(--fa-r-full);
  overflow: hidden;
  margin-bottom: 28px;
  flex-shrink: 0;
}
.fa-progress-bar {
  height: 100%;
  background: var(--fa-accent);
  border-radius: var(--fa-r-full);
  transition: width .4s ease;
}

/* ════════════════════════════════════════════════════════
   12. EMAIL VERIFICADO
   ════════════════════════════════════════════════════════ */
.fa-email-verificado {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: color-mix(in srgb, var(--fa-success) 8%, var(--fa-surface));
  border: 1.5px solid color-mix(in srgb, var(--fa-success) 30%, transparent);
  border-radius: var(--fa-r);
  font-size: 14px;
  color: var(--fa-text);
  margin-bottom: 14px;
}
.fa-email-verificado svg { color: var(--fa-success); flex-shrink: 0; }
.fa-email-verificado-cambiar {
  margin-left: auto;
  font-size: 12px;
  color: var(--fa-accent);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--fa-font);
}

/* ════════════════════════════════════════════════════════
   13. CHIP DE ESPACIO BASAL
   ════════════════════════════════════════════════════════ */
.fa-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--fa-surface-alt);
  border: 1px solid var(--fa-border);
  padding: 6px 13px;
  border-radius: var(--fa-r-full);
  font-size: 13px;
  font-weight: 500;
  color: var(--fa-text);
  margin-bottom: 22px;
}
.fa-chip-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--fa-success);
  flex-shrink: 0;
}

/* ════════════════════════════════════════════════════════
   14. ANIMACIONES DE ENTRADA
   ════════════════════════════════════════════════════════ */
.fa-screen { display: none; flex: 1; flex-direction: column; }
.fa-screen.on {
  display: flex;
  animation: fa-fadein .22s ease forwards;
}
@keyframes fa-fadein {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.fa-card-enter {
  animation: fa-card-in .3s ease forwards;
}
@keyframes fa-card-in {
  from { opacity: 0; transform: translateY(12px) scale(.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ════════════════════════════════════════════════════════
   15. RESPONSIVE
   ════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .fa-card {
    padding: 28px 22px 24px;
    border-radius: var(--fa-r-lg);
    max-width: 100%;
  }
  .fa-card::before { border-radius: var(--fa-r-lg) var(--fa-r-lg) 0 0; }
  .fa-card-centrado { align-items: flex-start; padding-top: 20px; }
}