/* ==========================================================================
   SGP — Design System · Camada 11: backoffice comercial (fatia F08)
   Painel de clientes da plataforma e a faixa "você está na visão Vizion".
   Arquivo próprio da fatia — nada aqui edita 03_componentes.css nem 04_layout.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Faixa de super-usuário (slot topo_avisos, ocupante crítico do chassi)
   -------------------------------------------------------------------------- */
.faixa-vizion__marca {
  flex: none;
  font-weight: var(--peso-semi);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: var(--texto-xs);
  padding: 0 var(--esp-2);
  border: 1px solid currentColor;
  border-radius: var(--raio-pilula);
}

/* --------------------------------------------------------------------------
   Filtros do painel comercial
   -------------------------------------------------------------------------- */
.comercial-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
}
.comercial-filtros__busca { flex: 1 1 280px; min-width: 0; }
.comercial-filtros .campo__controle { width: auto; min-width: 160px; }
.comercial-filtros__busca .campo__controle { width: 100%; }
.comercial-filtros__arquivados { flex: none; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Tabela do painel
   -------------------------------------------------------------------------- */
.tabela--comercial td { vertical-align: top; }
.comercial-sublinha {
  display: block;
  font-size: var(--texto-sm);
  line-height: 1.3;
}
.comercial-parado { color: var(--sgp-atencao); font-weight: var(--peso-semi); }
.comercial-alerta { color: var(--sgp-perigo); }
.linha-arquivada > td:first-child .texto-forte { text-decoration: line-through; }
.linha-arquivada { opacity: .72; }

/* Uso contra o teto contratado. A barra só existe quando há teto: para limite
   infinito, uma barra vazia diria "sobra tudo" — que não é a mesma coisa. */
.medidor-uso { display: flex; flex-direction: column; gap: var(--esp-1); min-width: 96px; }
.medidor-uso__numeros { font-variant-numeric: tabular-nums; white-space: nowrap; }
.medidor-uso .barra-progresso { display: block; width: 100%; }
.medidor-uso--alerta .medidor-uso__numeros strong { color: var(--sgp-perigo); }
.medidor-uso--alerta .barra-progresso__preenchimento { background: var(--sgp-perigo); }

@media (max-width: 760px) {
  .comercial-filtros .campo__controle { flex: 1 1 140px; min-width: 0; }
}

/* Os quatro números do alto do painel ficam mais juntos que a grade padrão:
   são leitura de relance, não cartões para clicar. */
.comercial-resumo { gap: var(--esp-4); }