/* Meta de fluxo — folha das três telas do módulo.
 *
 * Escrita ANTES do markup. Reaproveita o kit `prg-` (KPI, card, tabela, selo,
 * vazio, frescor) e só cria classe onde o visual é novo de verdade: a barra de
 * exigido contra medido, o par meta × desafio, a régua de disponibilidade e a
 * linha de loja que precisa esmaecer sem ficar vermelha.
 *
 * Tokens vêm de prog.css. Nada de cor solta aqui.
 */

/* ── par meta × desafio: os dois números lado a lado, um é o ativo ── */
.flx-alvo { display: flex; gap: .35rem; align-items: stretch; flex-wrap: wrap; }
.flx-alvo-op {
  border: 1px solid var(--prg-rule); background: var(--prg-surface);
  border-radius: 4px; padding: .3rem .6rem; cursor: pointer; text-align: left;
  min-width: 8.5rem; line-height: 1.25;
}
.flx-alvo-op:hover { background: var(--prg-surface-2); }
.flx-alvo-op.is-ativo { border-color: var(--prg-info); background: var(--prg-info-bg); }
.flx-alvo-rot { display: block; font-size: .68rem; text-transform: uppercase;
  letter-spacing: .03em; color: var(--prg-muted); }
.flx-alvo-op.is-ativo .flx-alvo-rot { color: var(--prg-info); }
.flx-alvo-val { display: block; font-size: .92rem; font-weight: 600; color: var(--prg-ink);
  font-variant-numeric: tabular-nums; }
.flx-alvo-leg { display: block; font-size: .68rem; color: var(--prg-muted); }

/* ── pendência: sempre termina em verbo ── */
.flx-pend { display: flex; flex-direction: column; gap: .3rem; }
.flx-pend-i {
  display: flex; gap: .55rem; align-items: baseline; flex-wrap: wrap;
  padding: .38rem .6rem; border-radius: 4px; font-size: .82rem;
  border: 1px solid var(--prg-rule-soft); background: var(--prg-surface-2);
  border-left: 3px solid var(--prg-rule);
}
.flx-pend-i.t-danger { border-left-color: var(--prg-danger); background: var(--prg-danger-bg); }
.flx-pend-i.t-warn { border-left-color: var(--prg-warn); background: var(--prg-warn-bg); }
.flx-pend-i.t-info { border-left-color: var(--prg-info); background: var(--prg-info-bg); }
.flx-pend-t { flex: 1 1 16rem; color: var(--prg-ink); }
.flx-pend-v {
  border: 0; background: transparent; padding: 0; font-size: .8rem; font-weight: 600;
  color: var(--prg-info); cursor: pointer; white-space: nowrap;
}
.flx-pend-v:hover { text-decoration: underline; }

/* ── barra de exigido × medido: comprimento é o exigido, preenchido é o medido ── */
.flx-barra { display: block; height: 6px; border-radius: 3px; background: var(--prg-rule-soft);
  overflow: hidden; min-width: 4.5rem; }
.flx-barra-i { display: block; height: 100%; background: var(--prg-good); }
.flx-barra-i.t-warn { background: var(--prg-warn); }
.flx-barra-i.t-danger { background: var(--prg-danger); }

/* ── disponibilidade do contador ── */
.flx-disp { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.flx-disp-pt { width: .5rem; height: .5rem; border-radius: 50%; background: var(--prg-good);
  flex: 0 0 auto; }
.flx-disp-pt.t-warn { background: var(--prg-warn); }
.flx-disp-pt.t-danger { background: var(--prg-danger); }
.flx-disp-pt.t-neutro { background: var(--prg-muted); }

/* Linha de loja que a fonte não mediu: esmaece com o motivo, nunca fica vermelha.
   Vermelho aqui leria como performance ruim da loja, e o problema é do contador. */
.flx-linha.is-sem-medida td { opacity: .55; }
.flx-linha.is-sem-medida td:first-child { opacity: 1; }
.flx-linha.is-alvo td { background: var(--prg-info-bg); }
.flx-linha-motivo { display: block; font-size: .72rem; color: var(--prg-muted); }
.flx-loja-btn {
  border: 0; background: transparent; padding: 0; text-align: left;
  font: inherit; color: var(--prg-ink); font-weight: 600; cursor: pointer;
}
.flx-loja-btn:hover { color: var(--prg-info); text-decoration: underline; }

/* ── faixa de dias da tabela-filha ── */
.flx-dias { display: flex; gap: 2px; flex-wrap: wrap; }
.flx-dia {
  width: 1.55rem; height: 1.55rem; border-radius: 3px; font-size: .62rem;
  display: flex; align-items: center; justify-content: center;
  background: var(--prg-good-bg); color: var(--prg-good); font-variant-numeric: tabular-nums;
}
.flx-dia.t-warn { background: var(--prg-warn-bg); color: var(--prg-warn); }
.flx-dia.t-danger { background: var(--prg-danger-bg); color: var(--prg-danger); }
.flx-dia.t-vazio { background: var(--prg-surface-2); color: var(--prg-muted); }

/* ── régua do mês: o que veio do ERP e o que foi digitado, no mesmo campo ── */
.flx-campo { width: 6.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.flx-campo.is-manual { border-color: var(--prg-warn); background: var(--prg-warn-bg); }
.flx-erp { display: block; font-size: .68rem; color: var(--prg-muted); text-align: right;
  font-variant-numeric: tabular-nums; }
.flx-regua-acoes { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }

/* ── 375px: a tabela rola dentro do container, a página nunca ── */
@media (max-width: 640px) {
  .flx-alvo-op { min-width: 0; flex: 1 1 8rem; }
  .flx-pend-i { flex-direction: column; gap: .25rem; align-items: flex-start; }
  /* Em coluna o `flex-basis` do texto vira ALTURA: sem zerar aqui, cada
     pendência esticava até 16rem e o verbo caía longe do texto no celular. */
  .flx-pend-t { flex: 0 1 auto; }
  .flx-campo { width: 5rem; }
}