/* Menu FILIADOS (Parte 3). Reaproveita .mk-* do Marketing (abas, topo, selos, tabela, cartoes); aqui so o que e proprio. */
.fl-paga { background: color-mix(in srgb, #7c3aed 14%, transparent); color: #6d28d9; }
.fl-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border-color); border-radius: 12px; }
.fl-tabela { min-width: 640px; }
.fl-tabela td { vertical-align: top; }
.fl-tabela .fl-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.fl-tabela .fl-check { width: 34px; }
.fl-tabela .fl-acoes { white-space: nowrap; text-align: right; }
.fl-botoes { display: inline-flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.fl-sub { display: block; color: var(--muted); font-size: var(--fs-xs); margin-top: 2px; }
.fl-filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
.fl-filtros input[type="search"] { flex: 1 1 240px; min-width: 0; }
.fl-filtros select, .fl-filtros input { max-width: 100%; }
.fl-data { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--muted); }
.fl-segmentos { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.fl-paginacao { display: flex; gap: 12px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 14px 0; font-size: var(--fs-sm); color: var(--muted); }
.fl-form { max-width: 760px; }
.fl-form-acoes { margin-top: 16px; display: flex; gap: 8px; }
.fl-cartao { display: flex; gap: 16px; align-items: center; justify-content: space-between; flex-wrap: wrap; border: 1px solid var(--border-color); border-radius: 14px; padding: 14px 16px; margin-bottom: 12px; }
.fl-linha { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fl-pct { width: 110px; }
.fl-alvo { font-size: var(--fs-sm); color: var(--muted); }
.fl-acesso { margin: 10px 0; }
.fl-acesso small { color: var(--muted); display: block; margin-bottom: 4px; }
.fl-acesso-linha { display: flex; gap: 8px; align-items: center; }
.fl-acesso-linha code { flex: 1; min-width: 0; overflow-wrap: anywhere; padding: 9px 11px; border-radius: 10px; background: var(--hover-bg); font-size: var(--fs-md); letter-spacing: .02em; }
@media (max-width: 640px) {
  .fl-filtros > * { flex: 1 1 100%; }
  .fl-cartao { flex-direction: column; align-items: stretch; }
}

/* ===================================================================== Portal do filiado (Parte 4) */
.login-ajuda { margin-top: 14px; text-align: center; font-size: var(--fs-sm); color: var(--muted); }
.fl-gerar { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.fl-gerar .campo { flex: 1 1 320px; margin: 0; min-width: 0; }
.fl-gerar .btn { flex: none; }
.fl-resultado { display: flex; flex-direction: column; gap: 12px; }
.fl-resultado:empty { display: none; }
.fl-qr { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 12px; border: 1px solid var(--border-color); border-radius: 14px; }
.fl-qr img { width: 180px; height: 180px; border-radius: 10px; background: #fff; padding: 6px; image-rendering: pixelated; }
.fl-qr > div { flex: 1 1 220px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.fl-totais { margin-bottom: 14px; }
.fp-infos { display: flex; flex-direction: column; }
.fp-info { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--border-color); font-size: var(--fs-sm); }
.fp-info:last-child { border-bottom: 0; }
.fp-info span { color: var(--muted); }
.fp-info strong { text-align: right; font-weight: 600; overflow-wrap: anywhere; }
.pagina .fl-filtros { margin-bottom: 14px; }
.pagina .fl-tabela { min-width: 560px; }
.campo input:disabled { opacity: .7; cursor: not-allowed; }
@media (max-width: 639px) {
  .fl-gerar .btn { width: 100%; }
  .fl-qr { justify-content: center; text-align: center; }
  .fl-qr > div { align-items: center; }
  .fp-info { flex-direction: column; gap: 2px; }
  .fp-info strong { text-align: left; }
}