/* ============================================================================
   MÓDULO INTEGRADOR (Fase 5) — estilos próprios, prefixo "it-".
   Segue o mesmo padrão visual dos módulos Agendamentos/Match/Importar
   (agendamentos.css/match.css/importar.css): laranja MyCar, chips coloridos,
   tabela com cabeçalho cinza. As cores usam valores HEX FIXOS (mesmos de
   --ag-laranja/--ag-ink/--ag-muted/--ag-border) em vez de var(--it-...) —
   propositalmente, pra este arquivo não depender de nenhum outro CSS já ter
   carregado/definido variáveis (mesma convenção do importar.css, que evitou
   um bug de cor sumindo quando var(--...) não estava definida ainda).
   ========================================================================== */

/* ---------------------------------------------------------------------
   Raiz do módulo — mesmo teto de largura do ag-root/mt-root (agendamentos.css/
   match.css), senão a tabela estica de ponta a ponta em telas largas enquanto
   os outros módulos ficam centralizados a 1400px.
   --------------------------------------------------------------------- */
.it-root { max-width: 1400px; margin: 0 auto; }

/* ---------------------------------------------------------------------
   Cabeçalho do módulo (título + subtítulo + contadores)
   --------------------------------------------------------------------- */
.it-subtitulo { color: #707070; font-size: 13px; margin-top: 4px; }

.it-contadores { display: flex; gap: 10px; flex-wrap: wrap; }
.it-contador {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 92px; padding: 8px 16px; border-radius: 10px;
  background: #fff5f3; border: 1px solid #f6c9c1;
}
.it-contador strong { font-size: 20px; font-weight: 800; color: #f43f27; line-height: 1.2; }
.it-contador span { font-size: 11px; color: #707070; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; }

/* ---------------------------------------------------------------------
   Filtros (busca simples / seletor de status) — mesma grade de .filtros,
   só com um pouco menos de margem porque já vem logo abaixo das abas.
   --------------------------------------------------------------------- */
.it-filtros { margin-top: 4px; align-items: center; }

/* ---------------------------------------------------------------------
   Fork "Houve acordo?" no modal Finalizar Venda — reaproveita a estrutura
   visual de .seletor-tipo (mesma usada em "Mudar Status" do módulo
   Veículos), só com uma margem extra abaixo do subtítulo do modal.
   --------------------------------------------------------------------- */
.it-seletor-acordo { margin: 4px 0 20px; }

/* ---------------------------------------------------------------------
   Chips de status da fila de notificações (pendente/enviado/falhou)
   --------------------------------------------------------------------- */
.it-chip {
  display: inline-flex; align-items: center; gap: 4px; border-radius: 999px;
  padding: 4px 10px; font-size: 11px; font-weight: 600; white-space: nowrap;
}
.it-chip-pendente { background: #f0f0f0; color: #666666; }
.it-chip-enviado { background: #e7f8ee; color: #1c8a4b; }
.it-chip-erro { background: #fdeaea; color: #c72609; }

.it-celula-erro {
  max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.it-celula-erro:hover { white-space: normal; overflow: visible; }

/* ---------------------------------------------------------------------
   Ajustes responsivos (telas estreitas)
   --------------------------------------------------------------------- */
@media (max-width: 720px) {
  .it-contadores { width: 100%; }
  .it-contador { flex: 1 1 auto; }
  .it-filtros { flex-direction: column; align-items: stretch; }
}