/* Pedidos confirmados no BioManager — variante B ("Por atenção") do modelo aprovado.
 *
 * 🚨 Esta pagina NAO usa AG Grid, e a escolha e do dono. Medido em 21/09/2026: das 78 paginas
 * do dashboard, 21 usam AG Grid e 40 usam tabela; NENHUMA das 11 paginas de /logistica usa
 * grid. O plano dizia "ag_grid_biomed (padrao do projeto, 23 paginas)" — a contagem estava
 * certa e a conclusao errada: as paginas que servem de modelo sao tabela semantica em cartao.
 *
 * O grid tambem nao reproduz os atomos do modelo: pill de estado, mini-trilha com o ponto
 * atual em anel, delta abaixo do valor. Eram esses que faziam a pagina nao se parecer com ele.
 *
 * Prefixo `bxp-` para nao colidir com o resto do dashboard. Valores de cor vem do design
 * system (docs/design/design-system.md §2) — nao inventar hex aqui.
 */

.bxp-card {
  background: var(--biomed-card-bg);
  border: 1px solid var(--biomed-border);
  border-radius: 12px;
  overflow: hidden;
}

.bxp-tab {
  border-collapse: collapse;
  width: 100%;
  /* 🚨 Sem `min-width` o `overflow-x: auto` do contêiner NUNCA dispara: a tabela encolhe para
   * caber e o navegador quebra os valores no meio — medido em produção às 14:52 de 21/09,
   * com "R$ 38.004,20" virando "R$" numa linha e "38.004,20" na outra. Coluna de dinheiro
   * espremida é pior que barra de rolagem: o número deixa de ser legível de relance, que é a
   * única razão de ele estar numa tabela. Mesmo padrão das páginas de /logistica. */
  min-width: 1040px;
}

.bxp-tab th {
  font-size: var(--bmd-fs-minimo);
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--biomed-text-light);               /* --bmd-fg-muted, ja corrigido para passar AA */
  text-align: left;
  padding: 9px 12px;
  background: var(--gray-100);
  border-bottom: 1px solid var(--biomed-border);
  white-space: nowrap;
}

.bxp-tab td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--biomed-border);
  vertical-align: middle;
}

.bxp-tab td.r, .bxp-tab th.r { text-align: right; }
/* dinheiro não quebra: "R$" e o valor são uma coisa só */
.bxp-tab td.r { white-space: nowrap; }
.bxp-num { font-variant-numeric: tabular-nums; }

.bxp-row { cursor: pointer; }
.bxp-row:hover td { background: var(--biomed-card-bg-hover); }
/* foco visivel: a linha e navegavel por teclado (design system §5) */
.bxp-row:focus-visible { outline: 2px solid #0e7c86; outline-offset: -2px; }

.bxp-cli {
  font-weight: 600;
  max-width: 260px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Pill de estado — par cor/fundo, SEMPRE com forma alem da cor (o texto carrega o estado) */
.bxp-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border-radius: 999px;
  padding: 2px 9px;
  font-size: var(--bmd-fs-minimo);
  font-weight: 650;
  white-space: nowrap;
}
.bxp-pill.ok     { background: var(--bmd-ok-bg); color: var(--bmd-ok); }
.bxp-pill.warn   { background: var(--bmd-warn-bg); color: var(--bmd-estado-atencao-fg); }
.bxp-pill.danger { background: var(--bmd-danger-bg); color: var(--bmd-danger); }
.bxp-pill.info   { background: var(--bmd-info-bg); color: var(--bmd-info); }
/* 🚨 "sem dado" TEM cor propria: sem ela parecia "ok" (design system, principio 6) */
.bxp-pill.nodata { background: var(--biomed-card-bg-hover); color: var(--biomed-text-light); }

/* Delta sob o valor: diz o tamanho da diferenca sem obrigar ninguem a subtrair de cabeca */
.bxp-delta { font-size: var(--bmd-fs-minimo); font-weight: 650; display: block; white-space: nowrap; }
.bxp-delta.bad { color: var(--bmd-danger); }
.bxp-delta.ok  { color: var(--bmd-ok); }
.bxp-delta.nd  { color: var(--biomed-text-light); }

/* Prazo vencido com saldo aberto. Mora colado ao saldo porque e ele que qualifica:
   limite vencido em pedido ja entregue nao acende. O "▲" da FORMA ao estado — cor
   sozinha nao chega (checklist §5 do design system). */
.bxp-atraso {
  font-size: var(--bmd-fs-minimo); font-weight: 650; color: var(--bmd-danger);
  display: block; white-space: nowrap; margin-top: 2px;
}
.bxp-atraso::before { content: "▲ "; }

/* Mini-trilha: ponto cheio = etapa cumprida, anel = onde o pedido esta agora */
.bxp-trail { display: flex; align-items: center; gap: 0; }
.bxp-trail i { width: 11px; height: 11px; border-radius: 50%; background: #c3c9d6; display: block; flex: none; }
.bxp-trail i.on  { background: #1e7a3d; }
.bxp-trail i.now { background: #0e7c86; box-shadow: 0 0 0 3px #e2f1f2; }
.bxp-trail s { height: 2px; width: 14px; background: var(--bmd-info-bg); display: block; }
.bxp-trail s.on { background: #1e7a3d; }

/* Cabecalho da faixa */
.bxp-faixa h3 {
  font-size: 13px;
  margin: 18px 0 8px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.bxp-faixa h3 .n {
  background: var(--gray-100);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: var(--bmd-fs-minimo);
  font-variant-numeric: tabular-nums;
}
.bxp-faixa h3 .sub { color: var(--biomed-text-light); font-size: 12px; font-weight: 400; }

.bxp-lk { color: var(--biomed-accent); text-decoration: none; font-weight: 600; font-size: 12.5px; }
.bxp-lk:hover { text-decoration: underline; }
.bxp-na { color: var(--biomed-text-light); font-size: 12px; }
.bxp-vazio { padding: 14px 12px; font-size: 13px; color: var(--biomed-text-light); }

@media (prefers-reduced-motion: reduce) {
  .bxp-row, .bxp-row:hover td { transition: none; }
}