/* ============================================================
   Gestão de Parceiros (programa de fidelidade) e Empresas
   ------------------------------------------------------------
   Só o que as duas telas têm de próprio. O resto é do console:
   .card, .kpis/.kpi, .grade, button.acao/.leve, tabela e o painel
   lateral (.ds-drawer*). Cores pelos tokens do design system, com
   o valor claro de reserva para o console sem ds-theme.
   ============================================================ */

.fid-faixa { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 14px; }
.fid-faixa .fid-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-left: auto; }
.fid-estado { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  padding: 5px 12px; border-radius: 99px; background: var(--ds-alerta-fundo, #FDEAD7);
  color: var(--ds-alerta-texto, #894B00); }
.fid-estado.no-ar { background: var(--ds-ok-fundo, #D0FAE5); color: var(--ds-ok-texto, #006045); }
.fid-estado::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.fid-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.fid-filtros input, .fid-filtros select { max-width: 260px; margin: 0; }

/* Selo da categoria: as cores do próprio cartão, para o time reconhecer de longe. */
.fid-cat { display: inline-block; font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; padding: 2px 9px; border-radius: 99px; white-space: nowrap; }
.fid-cat.inicial  { background: #E6E9ED; color: #3A4552; }
.fid-cat.vip      { background: #0262EF; color: #FFFFFF; }
.fid-cat.prata    { background: #CDD3D9; color: #17202A; }
.fid-cat.ouro     { background: #E7CF8F; color: #3B2A0A; }
.fid-cat.diamante { background: #0B0D12; color: #9FE3F0; }

.fid-tabela td, .fid-tabela th { white-space: nowrap; }
.fid-tabela tbody tr { cursor: pointer; }
.fid-tabela td.num, .fid-tabela th.num { text-align: right; font-variant-numeric: tabular-nums; }
.fid-sub { display: block; font-size: 12px; color: var(--ds-texto-meta, #737373); }
.fid-mini { font-size: 12.5px; color: var(--ds-texto-meta, #737373); }

/* Painel lateral mais largo: o cartão precisa de espaço para ser lido. */
.fid-overlay .ds-drawer { width: min(600px, 100vw); background: var(--ds-branco, #fff); }
.fid-overlay .ds-drawer-corpo { gap: 16px; }
.fid-overlay .ds-abas { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--ds-n-200, #e5e5e5); }
.fid-overlay .ds-aba { background: none; border: 0; padding: 10px 12px; font: inherit; font-size: 13.5px;
  color: var(--ds-texto-meta, #737373); cursor: pointer; border-bottom: 2px solid transparent; }
.fid-overlay .ds-aba.ds-ativa { color: var(--ds-acao, #224CF0); border-bottom-color: var(--ds-acao, #224CF0); font-weight: 600; }
.fid-overlay .ds-aba:focus-visible { outline: 2px solid var(--ds-foco, #0B4DF8); outline-offset: -2px; }
.fid-overlay .mp-cartao-caixa { --mp-fundo: var(--ds-branco, #fff); }

.fid-blocos { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; }
.fid-bloco { background: var(--ds-painel-frio, #F4F8FC); border-radius: 10px; padding: 10px 12px;
  display: flex; flex-direction: column; gap: 2px; }
.fid-bloco span { font-size: 12px; color: var(--ds-texto-meta, #737373); }
.fid-bloco b { font-size: 17px; font-variant-numeric: tabular-nums; color: var(--ds-texto-forte, #262626); }
.fid-bloco.alerta { background: var(--ds-erro-fundo, #FCE4E4); }
.fid-bloco.alerta b { color: var(--ds-erro-texto, #A21212); }

.fid-progresso { display: flex; flex-direction: column; gap: 6px; }
.fid-progresso .trilho { height: 8px; border-radius: 99px; background: var(--ds-trilho, #F5F5F5); overflow: hidden; }
.fid-progresso .trilho i { display: block; height: 100%; border-radius: 99px; background: var(--ds-grad-marca, #224CF0); }
.fid-progresso .txt { display: flex; justify-content: space-between; gap: 8px; font-size: 13px;
  color: var(--ds-texto-meta, #737373); font-variant-numeric: tabular-nums; }

.fid-linhas { display: flex; flex-direction: column; }
.fid-linha { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 10px 0;
  border-bottom: 1px solid var(--ds-n-100, #f0f0f0); font-size: 13.5px; }
.fid-linha:last-child { border-bottom: 0; }
.fid-linha .v { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.fid-linha .v.pos { color: var(--ds-kpi-positivo, #15803D); }
.fid-linha .v.neg { color: var(--ds-kpi-negativo, #B91C1C); }
.fid-linha .meta { grid-column: 1 / -1; font-size: 12px; color: var(--ds-texto-meta, #737373); }

.fid-chip { display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: .05em;
  text-transform: uppercase; border-radius: 99px; padding: 1px 7px; margin-left: 6px; vertical-align: 1px; }
.fid-chip.pendente  { background: var(--ds-alerta-fundo, #FDEAD7); color: var(--ds-alerta-texto, #894B00); }
.fid-chip.garantido, .fid-chip.ativo, .fid-chip.confirmado { background: var(--ds-ok-fundo, #D0FAE5); color: var(--ds-ok-texto, #006045); }
.fid-chip.usado, .fid-chip.devolvido, .fid-chip.convidado { background: #E3EAFA; color: #1F4FBF; }
.fid-chip.estornado, .fid-chip.vencido, .fid-chip.bloqueado { background: var(--ds-erro-fundo, #FCE4E4); color: var(--ds-erro-texto, #A21212); }

.fid-form { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 10px;
  border: 1px solid var(--ds-n-200, #e5e5e5); }
.fid-form h4 { margin: 0; font-size: 14px; }
.fid-form .grade { gap: 0 12px; }
.fid-form .acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.fid-form p { margin: 0; font-size: 13px; color: var(--ds-texto-meta, #737373); }
.fid-link { display: flex; gap: 8px; align-items: center; }
.fid-link input { flex: 1; font-family: ui-monospace, Menlo, monospace; font-size: 12px; margin: 0; }

.fid-regras .grade { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.fid-aviso { font-size: 13px; padding: 10px 12px; border-radius: 8px;
  background: var(--ds-alerta-fundo, #FDEAD7); color: var(--ds-alerta-texto, #894B00); }

/* Credenciais do acesso criado pelo time: mostradas uma vez, para copiar. */
.fid-credenciais { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 10px;
  background: var(--ds-painel-frio, #F4F8FC); border: 1px dashed var(--ds-brand-200, #CCDEFF); }
.fid-credenciais > div:not(.acoes) { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.fid-credenciais span { color: var(--ds-texto-meta, #737373); }
.fid-credenciais b { font-variant-numeric: tabular-nums; word-break: break-all; text-align: right; }
.fid-senha { font-family: ui-monospace, Menlo, monospace; font-size: 16px; letter-spacing: .08em;
  color: var(--ds-acao, #224CF0); }
.fid-botao-link { display: inline-flex; align-items: center; text-decoration: none; padding: 8px 14px;
  border-radius: 8px; border: 1px solid var(--ds-n-200, #e5e5e5); color: inherit; font-size: 13.5px; }
details.fid-form > summary { cursor: pointer; font-size: 13.5px; }

/* Prévia do cartão virtual (PNG gerado no navegador). */
.fid-virtual-img { display: block; width: 100%; height: auto; margin-top: 4px; border-radius: 12px; }
.fid-virtual-img.stories { max-width: 240px; margin-inline: auto; border-radius: 16px;
  box-shadow: 0 10px 30px -18px rgba(6, 25, 68, .6); }

@media (max-width: 768px) {
  .fid-faixa .fid-acoes { margin-left: 0; }
  .fid-filtros input, .fid-filtros select { max-width: none; flex: 1 1 160px; }
}