/* =====================================================================
   VS Design System — telas administrativas (F6)
   Admin, Manager, Financeiro e Vendedor. Antes de criar uma classe aqui,
   confira components.css (vs-table, vs-toolbar, vs-filtros, vs-form-grid,
   vs-drawer, vs-stat…). Só tokens (var(--vs-*)), nunca hex.
   Cada grupo de telas tem a sua seção — mantenha as regras dentro dela.
   ===================================================================== */

/* === A — Clientes ==================================================== */
/* Prefixo vs-cli-: peças compartilhadas do grupo (Components/Gestao/Clientes) e do painel
   /admin/clientes. As demais telas usam vs-cli-<tela>-. */

/* -- Peças compartilhadas: botão que expande, campos alterados, texto e anexos de tramitação -- */
.vs-cli-form__expandir { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; font: inherit; color: inherit; cursor: pointer; border-radius: var(--vs-radius-xs); }
.vs-cli-form__expandir .vs-icon { color: var(--vs-text-3); }
.vs-cli-form__expandir:focus-visible { outline: none; box-shadow: var(--vs-focus-ring); }
.vs-cli-acao-inicio { margin-right: auto; }
.vs-cli-aviso { color: var(--vs-warn-fg); }
.vs-cli-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.vs-cli-texto { margin: 0; padding: 12px 14px; border: 1px solid var(--vs-border-subtle); border-radius: var(--vs-radius-md); background: var(--vs-bg-subtle); white-space: pre-wrap; overflow-wrap: anywhere; line-height: var(--vs-leading); }
.vs-cli-diff { display: flex; flex-direction: column; gap: 6px; }
.vs-cli-diff__titulo { margin: 0; font-size: var(--vs-text-xs); font-weight: var(--vs-weight-medium); letter-spacing: var(--vs-tracking-caps); text-transform: uppercase; color: var(--vs-text-3); }
.vs-cli-diff__lista { margin: 0; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-md); background: var(--vs-bg-surface); }
.vs-cli-diff__linha { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; padding: 8px 12px; }
.vs-cli-diff__linha + .vs-cli-diff__linha { border-top: 1px solid var(--vs-border-subtle); }
.vs-cli-diff__linha dt { font-size: var(--vs-text-md); font-weight: var(--vs-weight-medium); color: var(--vs-text); }
.vs-cli-diff__linha dd { margin: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: var(--vs-text-md); overflow-wrap: anywhere; }
.vs-cli-diff__linha dd .vs-icon { color: var(--vs-text-3); }
.vs-cli-diff__linha dd strong { font-weight: var(--vs-weight-medium); }
.vs-cli-anexos { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid var(--vs-border-subtle); }
.vs-cli-anexos p { margin: 0; }
.vs-cli-anexos__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vs-cli-anexos__lista { list-style: none; margin: 0; padding: 0; }
.vs-cli-anexos__lista li { display: flex; align-items: center; gap: 8px; padding: 6px 0; min-width: 0; }
.vs-cli-anexos__lista li + li { border-top: 1px solid var(--vs-border-subtle); }
.vs-cli-anexos__lista li > .vs-icon { flex: 0 0 auto; color: var(--vs-text-3); }

/* -- Lista à esquerda e detalhe à direita (tela de Grupos de clientes) -- */
.vs-cli-painel { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 16px; align-items: start; }
.vs-cli-lista__itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.vs-cli-item { flex-wrap: nowrap; gap: 10px; }
.vs-cli-item .vs-list-row__main { flex: 1 1 auto; }
.vs-cli-item .vs-badge { flex: 0 0 auto; }
.vs-cli-item.is-selected, .vs-cli-item.is-selected:hover { background: var(--vs-accent-soft); }
.vs-cli-item:focus-visible { outline: none; box-shadow: inset var(--vs-focus-ring); }
.vs-cli-lista__por-pagina { display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 4px 10px 6px; }
.vs-cli-lista__por-pagina .vs-select { width: auto; }

.vs-cli-form__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.vs-cli-form__head p { margin: 2px 0 0; }
.vs-cli-form__grupo { min-width: 0; margin: 0; padding: 16px 0 0; border: 0; border-top: 1px solid var(--vs-border-subtle); }
.vs-cli-form__grupo > legend { float: left; width: 100%; margin: 0 0 12px; padding: 0; font-size: var(--vs-text-md); font-weight: var(--vs-weight-semibold); color: var(--vs-text); }
.vs-cli-form__grupo > legend + * { clear: both; }
.vs-cli-form__grid { max-width: none; }
.vs-cli-form__grid > p { margin: 0; }
.vs-cli-form__endereco { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 16px; }
.vs-cli-form__largo { grid-column: span 2; }


.vs-cli-tramitacao__meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--vs-text-sm); color: var(--vs-text-3); }

/* -- /admin/clientes: tabela em largura total com consumo, limite, atraso e alertas -- */
.vs-cli-visoes { margin-bottom: 0; }
.vs-cli-toolbar .vs-search { flex: 1 1 260px; }
.vs-cli-toolbar .vs-select { width: auto; flex: 0 1 200px; }
.vs-cli-toolbar .vs-cli-filtro-uf { flex: 0 0 auto; min-width: 128px; }
.vs-cli-segmento { color: var(--vs-text-3); }
.vs-cli-filtros-extra { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px 16px; padding: 4px 10px 14px; border-bottom: 1px solid var(--vs-border-subtle); margin-bottom: 4px; }
.vs-cli-recentes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 4px 10px 12px; }
.vs-cli-grade th { white-space: nowrap; }
.vs-cli-ordem { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.vs-cli-ordem .vs-icon { color: var(--vs-text-placeholder); }
.vs-cli-ordem:hover, .vs-cli-ordem.is-ativa { color: var(--vs-text); }
.vs-cli-ordem.is-ativa .vs-icon { color: var(--vs-text); }
.vs-cli-ordem:focus-visible { outline: var(--vs-focus-outline); outline-offset: 2px; border-radius: 4px; }
.is-num .vs-cli-ordem { flex-direction: row-reverse; }
.vs-cli-linha { cursor: pointer; }
.vs-cli-linha td { vertical-align: middle; }
/* Valor + linha de apoio (CNPJ, nº de consultas, dias de atraso) num bloco só: no celular a célula vira
   linha flex (rótulo à esquerda) e os dois precisam ficar empilhados à direita, não em colunas. */
.vs-cli-celula { min-width: 0; overflow-wrap: anywhere; }
.vs-cli-variacao { font-weight: var(--vs-weight-medium); font-variant-numeric: tabular-nums; white-space: nowrap; }
.vs-cli-variacao.is-ok { color: var(--vs-ok-fg); }
.vs-cli-variacao.is-warn { color: var(--vs-warn-fg); }
.vs-cli-variacao.is-risk { color: var(--vs-risk-fg); }
.vs-cli-limite { display: inline-flex; align-items: center; gap: 8px; min-width: 120px; }
.vs-cli-limite__trilho { flex: 1 1 64px; height: 6px; border-radius: var(--vs-radius-full); background: var(--vs-bg-sunken); overflow: hidden; }
.vs-cli-limite__trilho > span { display: block; height: 100%; border-radius: inherit; background: var(--vs-ink); }
.vs-cli-limite.is-warn .vs-cli-limite__trilho > span { background: var(--vs-warn-dot); }
.vs-cli-limite.is-risk .vs-cli-limite__trilho > span { background: var(--vs-risk-dot); }
.vs-cli-limite__pct { min-width: 38px; text-align: right; font-variant-numeric: tabular-nums; }
.vs-cli-limite.is-risk .vs-cli-limite__pct { color: var(--vs-risk-fg); font-weight: var(--vs-weight-medium); }
.vs-cli-atraso { color: var(--vs-risk-fg); font-weight: var(--vs-weight-medium); }
.vs-cli-alertas { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.vs-cli-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 0 10px 4px; }
.vs-cli-rodape .vs-pagination { flex: 1 1 auto; }

/* -- Ficha do cliente (/admin/clientes/{id}): cabeçalho, abas e blocos -- */
.vs-ficha-cab { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.vs-ficha-cab__marca { width: 48px; height: 48px; flex: 0 0 48px; border-radius: var(--vs-radius-lg); background: var(--vs-ink); color: var(--vs-text-inverse); display: inline-grid; place-items: center; font-size: var(--vs-text-lg); font-weight: var(--vs-weight-semibold); letter-spacing: .02em; }
.vs-ficha-cab__texto { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.vs-ficha-cab__linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.vs-ficha-cab__nome { margin: 0; font-size: var(--vs-text-3xl); font-weight: var(--vs-weight-semibold); letter-spacing: var(--vs-tracking-tight); line-height: 1.2; overflow-wrap: anywhere; }
.vs-ficha-cab__meta { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: var(--vs-text-md); color: var(--vs-text-2); }
.vs-ficha-cab__meta > span + span::before { content: "·"; margin-right: 16px; margin-left: -10px; color: var(--vs-text-separator); }
/* No celular a linha quebra e o "·" ficaria solto no começo: uma informação por linha, sem separador. */
@media (max-width: 575.98px) {
    .vs-ficha-cab__meta { flex-direction: column; gap: 2px; }
    .vs-ficha-cab__meta > span + span::before { content: none; }
}
.vs-ficha-cab__voltar { margin-left: auto; }
/* Tipo de cliente no cabeçalho da ficha: um select em forma de selo, tracejado quando falta classificar. */
.vs-tipo-rapido { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 2px 0 10px; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-full); background: var(--vs-bg-surface); color: var(--vs-text-2); font-size: var(--vs-text-sm); }
.vs-tipo-rapido:hover { border-color: var(--vs-border-hover); }
.vs-tipo-rapido:focus-within { outline: var(--vs-focus-outline); outline-offset: 2px; }
.vs-tipo-rapido.is-vazio { border-style: dashed; color: var(--vs-text-3); }
.vs-tipo-rapido.is-salvando .vs-icon { animation: vs-spin .8s linear infinite; }
.vs-tipo-rapido__select { height: 100%; border: 0; background: transparent; font: inherit; color: inherit; padding: 0 6px 0 0; cursor: pointer; outline: none; }
.vs-tipo-rapido__select:disabled { cursor: progress; }

.vs-ficha-aba__barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.vs-ficha-aba__barra p { margin: 0; }
.vs-ficha-aba__titulo { margin: 0; font-size: var(--vs-text-lg); font-weight: var(--vs-weight-semibold); }
.vs-ficha-aba__acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.vs-tabpanel > .vs-stack + .vs-stack { margin-top: 12px; padding-top: 20px; border-top: 1px solid var(--vs-border-subtle); }

/* -- Hub Faturas e cobrança (/admin/faturas): linha de topo de cada aba e blocos dentro da aba -- */
.vs-hub-barra { align-items: flex-start; }
.vs-hub-barra__texto { margin: 0; flex: 1 1 360px; max-width: 76ch; color: var(--vs-text-2); font-size: var(--vs-text-md); line-height: 1.5; }
.vs-hub-secao + .vs-hub-secao { margin-top: 8px; padding-top: 24px; border-top: 1px solid var(--vs-border-subtle); }
.vs-hub-select { width: auto; max-width: 100%; }
.vs-hub-quebra { overflow-wrap: anywhere; }

.vs-ficha-alertas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.vs-ficha-alerta { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--vs-radius-full); border: 1px solid transparent; font-size: var(--vs-text-md); font-weight: var(--vs-weight-medium); }
.vs-ficha-alerta--risk { background: var(--vs-risk-bg); border-color: var(--vs-risk-border); color: var(--vs-risk-fg); }
.vs-ficha-alerta--warn { background: var(--vs-warn-bg); border-color: var(--vs-warn-border); color: var(--vs-warn-fg); }
.vs-ficha-alerta--ok { background: var(--vs-ok-bg); border-color: var(--vs-ok-border); color: var(--vs-ok-fg); }
.vs-ficha-alerta--neutral { background: var(--vs-neutral-bg); border-color: var(--vs-neutral-border); color: var(--vs-neutral-fg); }
.vs-ficha-produto { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) 40px; }

.vs-ficha-cadastro { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; align-items: start; }
.vs-ficha-cadastro > .vs-card.is-editando { grid-column: 1 / -1; border-color: var(--vs-accent); box-shadow: var(--vs-focus-ring); }
.vs-ficha-cadastro .vs-cli-form__grupo { padding-top: 0; border-top: 0; }
.vs-cad-efeito { display: block; margin-top: 4px; font-size: var(--vs-text-sm); font-weight: var(--vs-weight-regular); color: var(--vs-text-3); }
.vs-cad-endereco { margin: 0; overflow-wrap: anywhere; }
.vs-cad-vazio { margin: 8px 0 0; color: var(--vs-text-3); }
.vs-cad-status { list-style: none; margin: 10px 0 0; padding: 0; }
.vs-cad-status li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 0; }
.vs-cad-status li + li { border-top: 1px solid var(--vs-border-subtle); }
.vs-cad-status__texto { flex: 1 1 200px; min-width: 0; font-size: var(--vs-text-md); color: var(--vs-text-2); }
.vs-cad-status__data { font-size: var(--vs-text-sm); color: var(--vs-text-3); font-variant-numeric: tabular-nums; }
.vs-ficha-novo { max-width: 980px; }

@media (max-width: 767.98px) {
    .vs-ficha-cab__nome { font-size: var(--vs-text-2xl); }
    .vs-ficha-cab__voltar { display: none; }
    .vs-ficha-cadastro { grid-template-columns: minmax(0, 1fr); }
    .vs-cli-toolbar .vs-select { flex: 1 1 140px; }
}

/* -- aba Contatos e anexos: grade com prévia, envio em lote e visualização -- */
.vs-cli-anexos-grade { list-style: none; margin: 0; padding: 0 10px 4px; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.vs-cli-anexo { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-lg); background: var(--vs-bg-surface); overflow: hidden; }
.vs-cli-anexo__previa { width: 100%; height: 140px; padding: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; border-bottom: 1px solid var(--vs-border-subtle); background: var(--vs-bg-subtle); color: var(--vs-text-3); font: inherit; cursor: zoom-in; }
.vs-cli-anexo__previa img { width: 100%; height: 100%; object-fit: cover; }
.vs-cli-anexo__previa:focus-visible { outline: none; box-shadow: inset var(--vs-focus-ring); }
.vs-cli-anexo__corpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 4px; }
.vs-cli-anexo__corpo .vs-chip { align-self: flex-start; margin-top: 6px; }
.vs-cli-anexo__nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--vs-weight-medium); }
.vs-cli-anexo__descricao { margin: 6px 0 0; font-size: var(--vs-text-md); color: var(--vs-text-2); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.vs-cli-anexo__acoes { display: flex; justify-content: flex-end; gap: 2px; padding: 4px 8px 8px; }
.vs-cli-anexo-visual { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto; border-radius: var(--vs-radius-md); }
.vs-cli-upload { list-style: none; margin: 0; padding: 0; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-md); }
.vs-cli-upload li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 8px 12px; padding: 8px 12px; }
.vs-cli-upload li + li { border-top: 1px solid var(--vs-border-subtle); }
.vs-cli-upload__nome { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vs-cli-upload__nome .vs-icon { flex: 0 0 auto; color: var(--vs-text-3); }
.vs-cli-upload__nome .vs-truncar { flex: 1 1 auto; min-width: 0; max-width: none; font-weight: var(--vs-weight-medium); }

/* -- /admin/clientes/{id}/tramitacoes: linha do tempo -- */
.vs-cli-segmented { max-width: 100%; overflow-x: auto; }
.vs-cli-timeline { list-style: none; margin: 0; padding: 0; }
.vs-cli-timeline__item { display: flex; flex-direction: column; gap: 8px; padding: 14px 10px; }
.vs-cli-timeline__item + .vs-cli-timeline__item { border-top: 1px solid var(--vs-border-subtle); }
.vs-cli-timeline__topo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.vs-cli-timeline__assunto { flex: 1 1 240px; min-width: 0; margin: 0; font-size: var(--vs-text-base); font-weight: var(--vs-weight-semibold); overflow-wrap: anywhere; }
.vs-cli-timeline__texto { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: var(--vs-leading); }
.vs-cli-timeline__cadeado { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; color: var(--vs-text-3); }

/* -- /admin/tipos-consulta/{id}: lista de tipos e diálogo de insumos -- */
.vs-cli-tipo__nome { font-weight: var(--vs-weight-medium); }
.vs-cli-tipo__insumos { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; max-width: 520px; }
.vs-cli-insumos__ordem { width: 96px; }
.vs-cli-insumos__novo { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-md); background: var(--vs-bg-subtle); }
.vs-cli-insumos__campos { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 12px; }

/* -- /admin/grupos -- */
.vs-cli-grupos__dica { margin: 0; padding: 0 10px 8px; }

/* -- /admin/clientes/{id}/contatos -- */
.vs-cli-contato__obs { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 1023.98px) {
    .vs-cli-painel { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 767.98px) {
    .vs-cli-form__endereco { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575.98px) {
    .vs-cli-form__endereco { grid-template-columns: minmax(0, 1fr); }
    .vs-cli-form__largo { grid-column: auto; }
    .vs-cli-upload li { grid-template-columns: minmax(0, 1fr); }
    .vs-cli-insumos__campos { grid-template-columns: minmax(0, 1fr); }
    .vs-cli-contato__obs { max-width: none; white-space: normal; }
}

/* === fim A ============================================================ */



/* === B — Faturamento e financeiro ===================================== */
/* Telas: faturas (lista e detalhe), boletos avulsos, conferência de boletos,
   negativações, isenções, comissões, NF em massa e migração do faturamento. */

/* Barra de andamento: a largura vem da custom property (sem style="width") */
.vs-fat-progresso { width: var(--vs-progresso, 0%); }

/* Log de lote (migração, conferência, NF em massa) */
.vs-fat-log {
    list-style: none;
    margin: 0;
    padding: 12px 14px;
    max-height: 360px;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius-md);
    background: var(--vs-bg-subtle);
    font-family: var(--vs-font-mono);
    font-size: var(--vs-text-sm);
    line-height: 1.6;
}
.vs-fat-log li { overflow-wrap: anywhere; }
.vs-fat-log .is-info { color: var(--vs-text-2); }
.vs-fat-log .is-ok { color: var(--vs-ok-fg); }
.vs-fat-log .is-warn { color: var(--vs-warn-fg); }
.vs-fat-log .is-risk { color: var(--vs-risk-fg); }
.vs-fat-log__hora { margin-right: 8px; color: var(--vs-text-3); }

/* Motivo da alteração: valor anterior → novo */

/* Filtros e chips dentro de um card de lista (alinhados ao respiro do vs-card--pad-list) */
.vs-fat-filtros-lista { padding: 0 10px 14px; }
.vs-fat-chips-lista { padding: 0 10px; margin-bottom: 10px; }
.vs-fat-check-filtro { min-height: var(--vs-control-h-md); }

/* Ênfase de célula (nome principal, valor que importa) e selos lado a lado */
.vs-fat-forte { font-weight: var(--vs-weight-medium); }
.vs-fat-selos { gap: 6px; align-items: center; }

/* Linha de totais no rodapé da tabela */
.vs-fat-total th,
.vs-fat-total td {
    padding: 12px;
    border-top: 1px solid var(--vs-border);
    font-size: var(--vs-text-base);
    font-weight: var(--vs-weight-semibold);
    color: var(--vs-text);
}
.vs-fat-total th { text-align: right; }

/* Selects compactos de barra (formato da exportação, itens por página) */
.vs-fat-formato,
.vs-fat-itens { width: auto; min-width: 84px; }

/* Busca com sugestões de cliente (relatório de faturas) */
.vs-fat-busca { position: relative; }
.vs-fat-sugestoes {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: var(--vs-z-dropdown);
    list-style: none;
    margin: 0;
    padding: 4px;
    max-height: 264px;
    overflow: auto;
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius-md);
    background: var(--vs-bg-surface);
    box-shadow: var(--vs-shadow-overlay);
}
.vs-fat-sugestoes button {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border: 0;
    border-radius: var(--vs-radius-sm);
    background: transparent;
    font: inherit;
    text-align: left;
    color: var(--vs-text);
    cursor: pointer;
}
.vs-fat-sugestoes button:hover,
.vs-fat-sugestoes button:focus-visible { background: var(--vs-bg-row-hover); outline: none; }
.vs-fat-sugestoes__nome { font-weight: var(--vs-weight-medium); font-size: var(--vs-text-md); }
.vs-fat-sugestoes__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--vs-text-sm); color: var(--vs-text-3); }

/* Histórico legado (OS no Omie) recolhido no detalhe da fatura */
.vs-fat-legado summary { cursor: pointer; font-size: var(--vs-text-md); color: var(--vs-text-2); }
.vs-fat-legado[open] summary { margin-bottom: 12px; }

/* Diálogos: subtítulo de bloco, KPIs compactos e resumo sem margem extra */
.vs-fat-subtitulo { margin: 0 0 8px; font-size: var(--vs-text-md); font-weight: var(--vs-weight-semibold); color: var(--vs-text); }
.vs-fat-lote-stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.vs-fat-resumo-ajuste { margin: 0; }

/* Boletos avulsos [TEMPORARIO]: passos da geração, resultado, prévia e lote */
.vs-fat-passos-bloco { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--vs-border-subtle); }
.vs-fat-passos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: var(--vs-text-md); }
.vs-fat-passos li { display: flex; align-items: center; gap: 8px; }
.vs-fat-passos .is-ok .vs-icon { color: var(--vs-ok-fg); }
.vs-fat-passos .is-risk { color: var(--vs-risk-fg); }
.vs-fat-passos .is-info .vs-icon { color: var(--vs-info-fg); }
.vs-fat-passos .is-neutral .vs-icon { color: var(--vs-text-3); }
.vs-fat-passos__hora { font-size: var(--vs-text-sm); color: var(--vs-text-3); }
.vs-fat-girando { animation: vs-spin .8s linear infinite; }
.vs-fat-resultado { margin-top: 16px; align-items: flex-start; flex-wrap: wrap; }
.vs-fat-resultado__dados { margin-top: 8px; }
.vs-fat-campo-curto { max-width: 280px; }
.vs-fat-chip-risco { color: var(--vs-risk-fg); border-color: var(--vs-risk-border); }
.vs-fat-tabela-larga .vs-table { min-width: 980px; }
.vs-fat-tabela-rolagem { max-height: 420px; overflow-y: auto; border: 1px solid var(--vs-border-subtle); border-radius: var(--vs-radius-md); }
.vs-fat-lote-acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }

@media (max-width: 1099.98px) {
    .vs-table--cards .vs-fat-total { display: block; }
    .vs-table--cards .vs-fat-total tr { display: flex; flex-direction: column; gap: 8px; padding: 14px 10px; border-top: 1px solid var(--vs-border); }
    .vs-table--cards .vs-fat-total th,
    .vs-table--cards .vs-fat-total td { display: flex; justify-content: space-between; gap: 12px; padding: 0; border: 0; text-align: left; }
    .vs-table--cards .vs-fat-total td[data-label]::before { content: attr(data-label); font-size: var(--vs-text-sm); font-weight: var(--vs-weight-regular); color: var(--vs-text-3); }
    .vs-table--cards .vs-fat-total .vs-fat-total__vazio { display: none; }
}

/* === fim B ============================================================ */



/* === C — Consultas ==================================================== */


/* Barra fina de insumos que retornaram (lista de consultas e detalhe). A largura vem da
   custom property --vs-cons-pct, o tom da classe. */
.vs-cons-progresso { flex: 1 1 56px; min-width: 56px; max-width: 120px; background: var(--vs-bg-muted); }
.vs-cons-progresso .vs-progress__bar { width: var(--vs-cons-pct, 0%); }
.vs-cons-progresso--ok .vs-progress__bar { background: var(--vs-ok-dot); }
.vs-cons-progresso--warn .vs-progress__bar { background: var(--vs-warn-dot); }
.vs-cons-progresso--risk .vs-progress__bar { background: var(--vs-risk-dot); }
.vs-cons-progresso--neutral .vs-progress__bar { background: var(--vs-neutral-dot); }
.vs-cons-insumos { display: inline-flex; align-items: center; gap: 8px; min-width: 120px; }

/* Detalhe da consulta (Admin/DetalhesConsulta) */
.vs-dc-dados { margin: 0; }
.vs-dc-progresso { display: inline-flex; align-items: center; gap: 8px; min-width: 140px; }
.vs-dc-erro { display: block; max-width: 520px; font-size: var(--vs-text-sm); color: var(--vs-risk-fg); overflow-wrap: anywhere; }
.vs-dc-reproc { margin-top: 6px; display: flex; flex-direction: column; gap: 4px; }
.vs-dc-reproc__item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vs-dc-parsing { max-height: 400px; }
.vs-dc-json { margin-top: 12px; max-height: 60vh; }

/* Cache de consultas (Admin/CacheConsultas): o campo tem dica embaixo, então os botões
   alinham pelo controle (descontam a altura do rótulo), não pelo pé da dica. */
.vs-cache-busca { align-items: flex-start; }
.vs-cache-busca .vs-filtros__acoes { margin-top: calc(var(--vs-text-md) * var(--vs-leading) + 6px); }
.vs-cache-nota { margin: 0; padding: 12px 10px 4px; font-size: var(--vs-text-sm); color: var(--vs-text-3); }

/* Notas explicativas e totais de tabela (relatórios do grupo: consumo por fornecedor, leilões, vendedor) */
.vs-cons-notas { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; font-size: var(--vs-text-md); color: var(--vs-text-2); }
.vs-cons-rodape { margin: 12px 0 0; font-size: var(--vs-text-sm); color: var(--vs-text-3); }
.vs-table tbody tr.vs-cons-subtotal td { background: var(--vs-bg-subtle); font-weight: var(--vs-weight-medium); color: var(--vs-text-2); }
.vs-table tfoot tr.vs-cons-total td { padding: 12px; border-top: 1px solid var(--vs-border); font-weight: var(--vs-weight-semibold); }

/* Relatório de leilões (Admin/RelatorioLeiloes) */
.vs-rl-diagnostico { max-height: 500px; }
.vs-rl-resumo { margin: 0; }

/* Consultas (Admin/ConsultasAdmin + Gestao/Consultas/*): lista de clientes à esquerda,
   consultas do cliente à direita; no celular empilha. */
.vs-ca-layout { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 16px; align-items: start; }
.vs-ca-consultas { min-width: 0; }
.vs-ca-clientes { position: sticky; top: calc(var(--vs-topbar-h) + 16px); display: flex; flex-direction: column; max-height: calc(100vh - var(--vs-topbar-h) - 32px); }
.vs-ca-buscas { display: flex; flex-direction: column; gap: 8px; padding: 0 10px 10px; border-bottom: 1px solid var(--vs-border-subtle); }
.vs-ca-busca-global { display: flex; align-items: center; gap: 6px; }
.vs-ca-busca-global .vs-search { flex: 1 1 auto; }
.vs-ca-lista { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 6px 2px 2px; }
.vs-ca-cliente {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 9px 10px; border: 0; border-radius: var(--vs-radius-md); background: transparent;
    font: inherit; color: var(--vs-text); text-align: left; cursor: pointer;
    transition: background-color var(--vs-dur-fast) var(--vs-ease);
}
.vs-ca-cliente:hover { background: var(--vs-bg-hover); }
.vs-ca-cliente.is-selected { background: var(--vs-accent-soft); }
.vs-ca-cliente__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.vs-ca-cliente__nome { font-weight: var(--vs-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-ca-cliente__sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: var(--vs-text-sm); color: var(--vs-text-3); }
.vs-ca-cliente__total { flex: 0 0 auto; min-width: 28px; padding: 2px 8px; border-radius: var(--vs-radius-full); background: var(--vs-bg-muted); font-size: var(--vs-text-sm); font-weight: var(--vs-weight-medium); font-variant-numeric: tabular-nums; text-align: center; color: var(--vs-text-2); }
.vs-ca-cliente.is-selected .vs-ca-cliente__total { background: var(--vs-bg-surface); color: var(--vs-ink); }
.vs-ca-select { width: auto; min-width: 150px; }
.vs-ca-head-acoes { align-items: center; gap: 8px; }
.vs-ca-reproc { padding: 0 10px 12px; }
.vs-ca-selos { display: inline-flex; flex-wrap: wrap; gap: 4px; }

/* JSON dos insumos (ConsultaJsonModal) */
.vs-ca-json-meta { margin-bottom: 14px; }
.vs-ca-json-chips { margin: 0 0 12px; }
.vs-ca-json-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.vs-ca-json { max-height: 55vh; }

/* Relatório de consultas (RelatorioConsultasPainel) */
.vs-ca-rel-filtros { padding: 0 10px 12px; }
.vs-ca-rel-export { border-top: 1px solid var(--vs-border-subtle); padding-top: 12px; }
.vs-ca-rel-formato { width: auto; }
.vs-ca-sugestoes-ancora { position: relative; }
.vs-ca-sugestoes {
    position: absolute; top: 100%; left: 0; right: 0; z-index: var(--vs-z-dropdown);
    margin-top: 4px; max-height: 260px; overflow-y: auto; padding: 4px;
    border: 1px solid var(--vs-border); border-radius: var(--vs-radius-lg);
    background: var(--vs-bg-surface); box-shadow: var(--vs-shadow-overlay);
}
.vs-ca-sugestao {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 8px 10px; border: 0; border-radius: var(--vs-radius-sm); background: transparent;
    font: inherit; color: var(--vs-text); text-align: left; cursor: pointer;
}
.vs-ca-sugestao:hover, .vs-ca-sugestao:focus-visible { background: var(--vs-bg-hover); }
.vs-ca-sugestao__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.vs-ca-sugestao__nome { font-weight: var(--vs-weight-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 900px) {
    .vs-ca-layout { grid-template-columns: minmax(0, 1fr); }
    .vs-ca-clientes { position: static; max-height: 420px; }
}

/* Consultas de clientes (Admin/ConsultasClientes): reaproveita .vs-ca-layout e as sugestões
   (.vs-ca-sugestoes) da tela de Consultas. */
.vs-cc-cliente { display: flex; flex-direction: column; gap: 14px; }
.vs-cc-cliente .vs-card__head { margin-bottom: 0; }
.vs-cc-sem-sugestao { margin: 0; padding: 10px; font-size: var(--vs-text-md); color: var(--vs-text-3); }
.vs-cc-selecionado { display: flex; flex-direction: column; gap: 8px; }
.vs-cc-selecionado__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: var(--vs-weight-medium); }
.vs-cc-dados { margin: 0; }
.vs-cc-form { display: flex; flex-direction: column; gap: 14px; padding-top: 16px; border-top: 1px solid var(--vs-border-subtle); }
.vs-cc-cobranca { display: flex; flex-direction: column; gap: 2px; }
.vs-cc-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.vs-cc-nova { display: flex; justify-content: center; padding: 8px 0 4px; }
.vs-cc-json-titulo { margin-bottom: 12px; }

/* Comunicados de venda (Admin/GerenciarComunicadosVenda + Gestao/Consultas/Comunicado*) */
.vs-cv-status { justify-content: flex-start; }
.vs-table tbody tr.vs-cv-excluido td { color: var(--vs-text-3); }
.vs-cv-excluido .vs-cv-riscavel { text-decoration: line-through; }
.vs-cv-texto { margin: 0; font-size: var(--vs-text-md); color: var(--vs-text-2); }
.vs-cv-resumo { margin: 0; }
.vs-cv-erros { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; }
.vs-cv-preview { display: block; max-width: 100%; max-height: 400px; margin: 12px auto 0; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-lg); }
.vs-cv-grupo { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.vs-cv-grupo legend { padding: 0; margin-bottom: 12px; }
.vs-cv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px 14px; }
.vs-cv-grid__largo { grid-column: span 2; }
@media (max-width: 560px) {
    .vs-cv-grid__largo { grid-column: auto; }
}

/* === fim C ============================================================ */



/* === D — Painel, relatórios e monitor ================================= */

/* Painel: gráficos Chart.js (Components/Gestao/Painel/PainelGrafico) — altura fixa, o canvas preenche */
/* Painel — aba Operação (PainelSaudeFornecedores): tabela com barra de sucesso por verificação. */
.vs-saude { display: flex; flex-direction: column; gap: 16px; }
.vs-saude__tabela td { vertical-align: middle; }
.vs-saude__linha.is-selected td { background: var(--vs-accent-soft); }
.vs-saude__nome {
    display: inline-flex; align-items: center; gap: 8px; padding: 0; border: 0; background: none;
    color: var(--vs-text); font: inherit; font-weight: var(--vs-weight-medium); text-align: left; cursor: pointer;
}
.vs-saude__nome:hover { color: var(--vs-accent); }
.vs-saude__icone.is-ok, .vs-saude__pct.is-ok { color: var(--vs-ok-fg); }
.vs-saude__icone.is-warn, .vs-saude__pct.is-warn { color: var(--vs-warn-fg); }
.vs-saude__icone.is-risk, .vs-saude__pct.is-risk { color: var(--vs-risk-fg); }
.vs-saude__icone.is-neutral, .vs-saude__pct.is-neutral { color: var(--vs-text-3); }
.vs-saude__fornecedores { font-family: var(--vs-font-mono); font-size: var(--vs-text-sm); color: var(--vs-text-2); }
.vs-saude__taxa { display: flex; align-items: center; gap: 10px; min-width: 200px; }
.vs-saude__barra { flex: 1 1 auto; height: 8px; border-radius: var(--vs-radius-full); background: var(--vs-bg-sunken); overflow: hidden; }
.vs-saude__preenchido { display: block; height: 100%; border-radius: inherit; background: var(--vs-neutral-dot); }
.vs-saude__preenchido.is-ok { background: var(--vs-ok-dot); }
.vs-saude__preenchido.is-warn { background: var(--vs-warn-dot); }
.vs-saude__preenchido.is-risk { background: var(--vs-risk-dot); }
.vs-saude__pct { font-variant-numeric: tabular-nums; font-weight: var(--vs-weight-semibold); }

/* Painel — aba Clientes (PainelClientesRisco): um card por categoria, risco antes de oportunidade. */
.vs-risco__grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.vs-risco__grupo.is-risk { border-top: 3px solid var(--vs-risk-dot); }
.vs-risco__grupo.is-warn { border-top: 3px solid var(--vs-warn-dot); }
.vs-risco__grupo.is-ok { border-top: 3px solid var(--vs-ok-dot); }
.vs-risco__lista { list-style: none; margin: 0; padding: 0; }
.vs-risco__valor { flex: 0 0 auto; font-weight: var(--vs-weight-semibold); font-variant-numeric: tabular-nums; }
.vs-risco__valor.is-risk { color: var(--vs-risk-fg); }
.vs-risco__valor.is-warn { color: var(--vs-warn-fg); }
.vs-risco__valor.is-ok { color: var(--vs-ok-fg); }
.vs-risco__vazio, .vs-risco__mais { margin: 0; padding: 12px 16px; font-size: var(--vs-text-md); color: var(--vs-text-3); }

.vs-painel-grafico { position: relative; height: 280px; }
.vs-painel-grafico--sm { height: 220px; }
.vs-painel-grafico--lg { height: 320px; }
.vs-painel-legenda-topo { margin: -6px 0 12px; }

/* Seletores no cabeçalho da página e dos cartões */
.vs-painel-periodo { width: auto; min-width: 170px; }
.vs-painel-data { width: auto; }
.vs-painel-select { width: auto; min-width: 140px; max-width: 260px; }
.vs-painel-controles { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

.vs-painel-secao { margin: 8px 0 -4px; font-size: var(--vs-text-xl); font-weight: var(--vs-weight-semibold); letter-spacing: var(--vs-tracking-snug); color: var(--vs-text); }
.vs-painel-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }

/* Ranking em barras horizontais: rótulo largo e valor em moeda; a maior em tinta, as demais claras */
.vs-painel-hbars .vs-hbar { grid-template-columns: minmax(0, 150px) minmax(60px, 1fr) auto; }
.vs-painel-hbars .vs-hbar__fill { width: var(--largura, 0%); }
.vs-painel-hbars .vs-hbar__fill.is-claro { background: var(--vs-chart-pale); }

/* Pares rótulo/valor dos cartões de resumo */
.vs-painel-dados dd { font-variant-numeric: tabular-nums; }
/* Funil de vendas da aba Tendências: etapas em escada, a receita em destaque no fim. */
.vs-painel-funil { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.vs-painel-funil li { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 10px 14px; border-radius: var(--vs-radius-md); background: var(--vs-bg-subtle); }
.vs-painel-funil li:nth-child(2) { margin-left: 12px; }
.vs-painel-funil li:nth-child(3) { margin-left: 24px; }
.vs-painel-funil li.is-total { margin-left: 36px; background: var(--vs-ok-bg, var(--vs-bg-subtle)); }
.vs-painel-funil strong { font-variant-numeric: tabular-nums; font-size: var(--vs-text-lg); }
.vs-painel-atencao { color: var(--vs-warn-fg); }
.vs-painel-total { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; }
.vs-painel-total__valor { font-size: var(--vs-text-3xl); font-weight: var(--vs-weight-semibold); letter-spacing: var(--vs-tracking-tight); font-variant-numeric: tabular-nums; }
.vs-painel-split { margin-bottom: 14px; }
.vs-painel-split > span { flex: var(--peso, 1) 1 0; }

/* Coluna direita das listas de atividade (valor + selo/hora) */
.vs-painel-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: 0 0 auto; }
.vs-painel-meta__valor { font-weight: var(--vs-weight-medium); font-variant-numeric: tabular-nums; }

/* Uso do limite mensal (modal de clientes próximos ao limite) */
.vs-painel-uso { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; }
.vs-painel-uso__barra { width: 80px; height: 6px; border-radius: var(--vs-radius-full); background: var(--vs-bg-sunken); overflow: hidden; }
.vs-painel-uso__barra > span { display: block; height: 100%; width: var(--uso, 0%); border-radius: var(--vs-radius-full); }
.vs-painel-uso__barra.is-warn > span { background: var(--vs-warn-dot); }
.vs-painel-uso__barra.is-risk > span { background: var(--vs-risk-dot); }

/* Linha de totais das tabelas de resumo */
.vs-painel-tabela tfoot td { padding: 12px; border-top: 1px solid var(--vs-border); background: var(--vs-bg-subtle); font-weight: var(--vs-weight-semibold); }

.vs-painel-rodape { display: flex; align-items: center; gap: 6px; margin: 0; }

/* Relatórios: totais em linha (clientes críticos) e linhas expansíveis */
.vs-relatorio-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 1px; margin: 0 0 16px; border: 1px solid var(--vs-border-subtle); border-radius: var(--vs-radius-lg); background: var(--vs-border-subtle); overflow: hidden; }
.vs-relatorio-numeros > div { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; background: var(--vs-bg-surface); }
.vs-relatorio-numeros dt { font-size: var(--vs-text-sm); font-weight: var(--vs-weight-regular); color: var(--vs-text-3); }
.vs-relatorio-numeros dd { margin: 0; font-size: var(--vs-text-2xl); font-weight: var(--vs-weight-semibold); letter-spacing: var(--vs-tracking-snug); font-variant-numeric: tabular-nums; color: var(--vs-text); }
.vs-table tbody tr.vs-relatorio-detalhe, .vs-table tbody tr.vs-relatorio-detalhe:hover { background: var(--vs-bg-subtle); }
.vs-relatorio-detalhe > td { padding: 12px 16px 16px 32px; }
.vs-relatorio-detalhe .vs-table { background: var(--vs-bg-surface); border: 1px solid var(--vs-border-subtle); border-radius: var(--vs-radius-md); margin-bottom: 12px; }
.vs-relatorio-detalhe .vs-table th, .vs-relatorio-detalhe .vs-table td { padding: 8px 10px; }
.vs-relatorio-acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.vs-relatorio-bloco { margin-top: 16px; }
.vs-relatorio-bloco-topo { margin-bottom: 16px; }
.vs-relatorio-check { align-self: center; }
.vs-relatorio-trio { display: inline-flex; gap: 4px; }

/* Monitor de integração: passos do pipeline, status do mês, log do lote e campos técnicos */
.vs-monitor-pipeline { display: inline-flex; gap: 3px; }
.vs-monitor-passo { padding: 1px 6px; border: 1px solid var(--vs-neutral-border); border-radius: var(--vs-radius-xs); background: var(--vs-neutral-bg); color: var(--vs-text-3); font-family: var(--vs-font-mono); font-size: var(--vs-text-xs); font-weight: var(--vs-weight-semibold); line-height: 1.5; }
.vs-monitor-passo.is-ok { background: var(--vs-ok-bg); border-color: var(--vs-ok-border); color: var(--vs-ok-fg); }
.vs-monitor-passo.is-atual { background: var(--vs-warn-bg); border-color: var(--vs-warn-border); color: var(--vs-warn-fg); }
.vs-monitor-passo.is-erro { background: var(--vs-risk-bg); border-color: var(--vs-risk-border); color: var(--vs-risk-fg); }
.vs-monitor-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vs-monitor-sep { width: 1px; height: 18px; margin: 0 4px; background: var(--vs-border); }
.vs-monitor-nota { margin: 12px 0 0; }
.vs-monitor-acao { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; }
.vs-monitor-auditoria { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--vs-border-subtle); }
.vs-monitor-atual { margin: 0 10px 12px; }
.vs-monitor-log { max-height: 400px; overflow-y: auto; margin: 0 10px 4px; border: 1px solid var(--vs-border-subtle); border-radius: var(--vs-radius-md); }
.vs-monitor-log .vs-table th, .vs-monitor-log .vs-table td { padding: 6px 10px; }
.vs-monitor-log .vs-table thead th { position: sticky; top: 0; background: var(--vs-bg-surface); }
.vs-monitor-mensagem { min-width: 240px; font-size: var(--vs-text-sm); overflow-wrap: anywhere; }
.vs-monitor-tabela td { font-size: var(--vs-text-md); }
.vs-monitor-nfse { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.vs-monitor-ultimo, .vs-monitor-erro { display: inline-block; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; }
.vs-monitor-erro { max-width: 160px; }

/* Detalhe da fatura (modal) */
.vs-monitor-bloco + .vs-monitor-bloco, .vs-monitor-bloco + .vs-monitor-legado { margin-top: 20px; }
.vs-monitor-cabecalho { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 10px; }
.vs-monitor-cabecalho .vs-monitor-titulo { margin: 0 4px 0 0; }
.vs-monitor-titulo { margin: 0 0 10px; font-size: var(--vs-text-base); font-weight: var(--vs-weight-semibold); color: var(--vs-text); }
.vs-monitor-historico { max-height: 350px; overflow-y: auto; border: 1px solid var(--vs-border-subtle); border-radius: var(--vs-radius-md); }
.vs-monitor-historico .vs-feed__item { padding: 8px 12px; }
.vs-monitor-historico .vs-feed__resumo { display: block; }
.vs-monitor-historico .vs-feed__meta { white-space: normal; height: auto; }
.vs-monitor-campos { margin: 0; padding: 4px 14px; border: 1px solid var(--vs-border-subtle); border-radius: var(--vs-radius-md); background: var(--vs-bg-subtle); font-family: var(--vs-font-mono); font-size: var(--vs-text-sm); }
.vs-monitor-campos > div { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 12px; padding: 6px 0; }
.vs-monitor-campos > div + div { border-top: 1px solid var(--vs-border-subtle); }
.vs-monitor-campos dt { font-weight: var(--vs-weight-regular); color: var(--vs-text-3); }
.vs-monitor-campos dd { margin: 0; color: var(--vs-text); overflow-wrap: anywhere; }
.vs-monitor-legado { margin-top: 20px; }
.vs-monitor-legado summary { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--vs-weight-medium); color: var(--vs-text-2); cursor: pointer; }
.vs-monitor-legado > p { margin: 8px 0; }
@media (max-width: 575.98px) {
    .vs-monitor-campos > div { grid-template-columns: 1fr; gap: 2px; }
}

/* === fim D ============================================================ */



/* === E — Usuários, equipe e logs ====================================== */

/* Perfis (roles) de uma conta lado a lado — usuários e funcionários */
.vs-usuarios-perfis { display: inline-flex; flex-wrap: wrap; gap: 4px; }

/* "10 por página" na barra das listas de funcionários e vendedores */
.vs-equipe-por-pagina { width: auto; }

/* Cadastro de usuário: grupo de perfis marcáveis */
.vs-editarusuario-perfis { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.vs-editarusuario-perfis > legend { padding: 0; margin-bottom: 2px; }

/* Vendedores: acrescentar cliente à carteira e ações do cálculo de comissão */
.vs-carteira-novo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: end; }
.vs-comissao-acoes { display: flex; flex-wrap: wrap; gap: 8px; }

/* Revendas: status e selo "Raiz" na mesma célula */
.vs-revendas-status { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }

/* Logs master: busca de cliente com sugestões e o cliente escolhido */
.vs-logs-busca { position: relative; }
.vs-logs-sugestoes {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: var(--vs-z-dropdown);
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: var(--vs-bg-surface);
    border: 1px solid var(--vs-border);
    border-radius: var(--vs-radius-lg);
    box-shadow: var(--vs-shadow-overlay);
}
.vs-logs-sugestoes .vs-list-row { padding: 8px 10px; }
.vs-logs-sugestoes [aria-selected="true"] .vs-list-row { background: var(--vs-accent-soft); }
.vs-logs-cliente { padding: 12px 0 0; border-top: 1px solid var(--vs-border-subtle); border-radius: 0; }
.vs-logs-selo { margin-left: 6px; }

/* Linhas do tempo de atividade (usuário e gerente): selos e IP/navegador na linha de metadados */
.vs-timeline__linha .vs-logs-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; white-space: normal; overflow: visible; }
.vs-logs-linha-fixa { grid-template-columns: 28px minmax(0, 1fr); cursor: default; }
.vs-logs-linha-fixa:hover { background: transparent; }

/* Detalhe expandido do registro do gerente */
.vs-logs-detalhe__titulo { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--vs-text-md); font-weight: var(--vs-weight-semibold); color: var(--vs-text); }
.vs-logs-detalhe__titulo .vs-icon { color: var(--vs-text-3); }
.vs-logs-detalhe__sub { margin: 4px 0 0; font-size: var(--vs-text-sm); font-weight: var(--vs-weight-medium); color: var(--vs-text-2); }
.vs-logs-detalhe > p { margin: 0; }
.vs-logs-detalhe .vs-table td { padding: 8px 12px; }
.vs-logs-detalhe .vs-grid-stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.vs-logs-alteracoes .vs-logs-seta { width: 28px; text-align: center; color: var(--vs-text-3); }

@media (max-width: 560px) {
    .vs-carteira-novo { grid-template-columns: 1fr; }
}

/* === fim E ============================================================ */



/* === F — Produtos, preços e fornecedores ============================== */
/* Templates, tabelas de preço, faixas, reajuste, produto em massa, features opcionais,
   engine Avali e probe. Prefixo vs-produtos- para o que é comum ao grupo. */

/* Cabeçalho de seção dentro de modal/card: título pequeno + ação à direita */
.vs-produtos-secao { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--vs-control-h-sm); }
.vs-produtos-secao__titulo { margin: 0; font-size: var(--vs-text-md); font-weight: var(--vs-weight-semibold); color: var(--vs-text); }

/* Painel claro para sub-formulários (novo insumo, revenda root) */
.vs-produtos-painel { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-lg); background: var(--vs-bg-subtle); }
.vs-produtos-painel--linha { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.vs-produtos-painel .vs-form-grid { max-width: none; }
.vs-produtos-grid-3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 2fr); }
.vs-produtos-acoes-fim { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.vs-produtos-sem-margem { margin: 2px 0 0; }
.vs-produtos-nome-selo { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }

/* Ordem editável na tabela de insumos */
.vs-produtos-col-ordem { width: 110px; }
.vs-produtos-ordem { width: 84px; }

/* Lista de escolha (copiar template padrão) */
.vs-produtos-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

/* Tabela longa dentro de modal/card: rola por dentro, cabeçalho fixo */
.vs-produtos-rolagem { max-height: 420px; overflow-y: auto; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-lg); }
.vs-produtos-rolagem--curta { max-height: 320px; }
.vs-produtos-rolagem thead th { position: sticky; top: 0; z-index: 1; background: var(--vs-bg-surface); }

/* Preço editável alinhado à direita (tabela de preços) */
.vs-produtos-col-preco { width: 160px; }
.vs-produtos-preco { width: 130px; text-align: right; }

/* Linha de cadastro inativo: texto esmaecido, ações seguem legíveis */
.vs-table tbody tr.vs-produtos-linha-inativa td { color: var(--vs-text-3); }

/* Nota abaixo da tabela, alinhada ao respiro do card de lista */
.vs-produtos-rodape { padding: 12px 10px 4px; }

/* Reajuste de preços: linha expansível por cliente e detalhe aninhado */
.vs-reajuste-col-toggle { width: 44px; }
.vs-reajuste-linha { cursor: pointer; }
.vs-reajuste-delta, .vs-reajuste-novo { font-weight: var(--vs-weight-medium); }
.vs-reajuste-reducao { color: var(--vs-warn-fg); }
.vs-table tbody tr.vs-reajuste-detalhe:hover { background: transparent; }
.vs-table tbody tr.vs-reajuste-detalhe > td { padding: 4px 12px 16px; background: var(--vs-bg-subtle); }
.vs-reajuste-detalhe__corpo { display: flex; flex-direction: column; gap: 16px; padding: 14px 16px; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-lg); background: var(--vs-bg-surface); }

/* Produto em massa: escolha de insumos, contagens e log */
.vs-produtos-form-largo { max-width: 860px; }
.vs-produtos-insumo-add { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; max-width: 560px; }
.vs-produtos-chips { list-style: none; padding: 0; }
.vs-produtos-chip-remover { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin: 0 -4px 0 2px; padding: 0; border: 0; border-radius: var(--vs-radius-full); background: transparent; color: inherit; cursor: pointer; }
.vs-produtos-chip-remover:hover:not(:disabled) { background: var(--vs-bg-hover); }
.vs-produtos-chip-remover:focus-visible { outline: none; box-shadow: var(--vs-focus-ring); }
.vs-produtos-chip-remover:disabled { opacity: .5; cursor: not-allowed; }
.vs-produtos-contagens { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.vs-produtos-log { list-style: none; margin: 0; padding: 12px 14px; max-height: 320px; overflow-y: auto; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-lg); background: var(--vs-bg-subtle); font-family: var(--vs-font-mono); font-size: var(--vs-text-sm); line-height: 1.6; }
.vs-produtos-log__linha { color: var(--vs-text-2); overflow-wrap: anywhere; }
.vs-produtos-log__linha.is-ok { color: var(--vs-ok-fg); }
.vs-produtos-log__linha.is-warn { color: var(--vs-warn-fg); }
.vs-produtos-log__linha.is-risk { color: var(--vs-risk-fg); }
.vs-produtos-log__linha.is-neutral { color: var(--vs-text-3); }
.vs-produtos-log__hora { color: var(--vs-text-3); }

/* Ícone girando (gravação em andamento fora de botão) */
.vs-produtos-girando { animation: vs-spin .8s linear infinite; }

/* Features opcionais: edição inline e checkboxes de tipo de relatório */
.vs-opcionais-tabela__ordem { width: 72px; }
.vs-opcionais-tabela__edicao { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.vs-opcionais-tabela__tipos { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.vs-opcionais-rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; padding: 12px 10px 4px; border-top: 1px solid var(--vs-border-subtle); }

/* Engine Avali (hub Fornecedores): sequência por insumo, auditoria e tabelas de tuning/TTL */
.vs-avali-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr); gap: 16px; align-items: start; }

.vs-avali-seq { overflow: hidden; }
.vs-avali-seq.is-alterado { border-color: var(--vs-warn-border); }
.vs-avali-seq__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; width: 100%; padding: 14px 16px; border: 0; background: transparent; font: inherit; color: var(--vs-text); text-align: left; cursor: pointer; transition: background-color var(--vs-dur-fast) var(--vs-ease); }
.vs-avali-seq__head:hover { background: var(--vs-bg-row-hover); }
.vs-avali-seq__head:focus-visible { outline: none; box-shadow: inset var(--vs-focus-ring); }
.vs-avali-seq__head > .vs-icon { color: var(--vs-text-3); }
.vs-avali-seq__titulo { flex: 1 1 200px; min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.vs-avali-seq__nome { font-weight: var(--vs-weight-semibold); }
.vs-avali-seq.is-nao-consumido .vs-avali-seq__nome { font-weight: var(--vs-weight-medium); color: var(--vs-text-3); }
.vs-avali-seq__selos { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.vs-avali-seq__corpo { padding: 4px 8px 8px; border-top: 1px solid var(--vs-border-subtle); }
.vs-avali-seq__pendente { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 12px; padding: 12px 10px 4px; border-top: 1px solid var(--vs-border-subtle); }

.vs-avali-col-estreita { width: 56px; }
.vs-avali-arrastavel { cursor: grab; }
.vs-avali-arrastavel:active { cursor: grabbing; }
.vs-table tbody tr.vs-avali-arrastavel.is-arrastando { opacity: .45; }
.vs-table tbody tr.vs-avali-arrastavel.is-alvo { box-shadow: inset 0 2px 0 var(--vs-accent); background: var(--vs-accent-soft); }
.vs-avali-alca { display: inline-flex; color: var(--vs-text-3); }

.vs-avali-auditoria__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.vs-avali-auditoria__item { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--vs-border-subtle); }
.vs-avali-auditoria__item:first-child { padding-top: 0; border-top: 0; }
.vs-avali-auditoria__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }

.vs-avali-celula { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.vs-avali-campo { display: flex; flex-direction: column; gap: 4px; }
.vs-avali-campo .vs-input, .vs-avali-numero { width: 120px; }
.vs-avali-filtro { width: auto; min-width: 220px; }
.vs-avali-fim { margin-left: auto; }
.vs-avali-ordem { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 4px; }

@media (max-width: 991.98px) {
    .vs-avali-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Probe de fornecedor: selos do resultado e resposta crua mais alta que o vs-json padrão */
.vs-probe-selos { display: flex; flex-wrap: wrap; gap: 6px; }
.vs-probe-corpo { max-height: 520px; white-space: pre; overflow-wrap: normal; }
.vs-probe-corpo code { font: inherit; color: inherit; background: none; padding: 0; }

@media (max-width: 575.98px) {
    .vs-produtos-grid-3 { grid-template-columns: 1fr; }
}

/* === fim F ============================================================ */



/* === G — Suporte, comunicação e ferramentas =========================== */

/* Feedbacks (/admin/feedbacks): selects compactos na barra da lista */
.vs-feedbacks__filtro { width: auto; min-width: 168px; }

/* Avisos (/admin/avisos): lista de avisos à esquerda, formulário + prévia à direita */
.vs-avisos__situacoes { justify-content: flex-start; }
.vs-avisos__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.vs-avisos__item { display: flex; flex-direction: column; gap: 6px; padding: 12px 10px; border-radius: var(--vs-radius-md); cursor: pointer; transition: background-color var(--vs-dur-fast) var(--vs-ease); }
.vs-avisos__item + .vs-avisos__item { border-top: 1px solid var(--vs-border-subtle); }
.vs-avisos__item:hover { background: var(--vs-bg-row-hover); }
.vs-avisos__item.is-selected { background: var(--vs-accent-soft); }
.vs-avisos__selos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.vs-avisos__titulo { font-weight: var(--vs-weight-medium); color: var(--vs-text); overflow-wrap: anywhere; }
.vs-avisos__mensagem { margin: 0; font-size: var(--vs-text-sm); color: var(--vs-text-2); overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.vs-avisos__rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; }
.vs-avisos__form { max-width: none; }
.vs-avisos__publico { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; min-width: 0; }
.vs-avisos__publico > legend { float: left; width: 100%; padding: 0; margin: 0 0 2px; }
/* Público refinado: recolhido por padrão, aberto quando há filtro ligado. */
.vs-avisos__refinar { padding: 12px 14px; border: 1px solid var(--vs-border-subtle); border-radius: var(--vs-radius-md); background: var(--vs-bg-subtle); }
.vs-avisos__refinar > summary { cursor: pointer; font-weight: var(--vs-weight-medium); color: var(--vs-text-2); }
.vs-avisos__refinar[open] > summary { margin-bottom: 8px; }
.vs-avisos__refinar > .vs-field__hint { margin: 0 0 12px; }
.vs-avisos__previa { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px dashed var(--vs-border); border-radius: var(--vs-radius-lg); background: var(--vs-bg-canvas); }
.vs-avisos__previa-rotulo { display: inline-flex; align-items: center; gap: 6px; font-size: var(--vs-text-sm); font-weight: var(--vs-weight-medium); color: var(--vs-text-2); }
.vs-avisos__link { overflow-wrap: anywhere; }
/* Banner (out/2026): imagem, clientes do aviso direcionado, cliques e interessados. */
.vs-avisos__imagem { display: flex; flex-direction: column; gap: 6px; }
.vs-avisos__imagem-linha { display: flex; align-items: flex-start; gap: 14px; }
.vs-avisos__imagem-miniatura {
    flex: none; display: grid; place-items: center;
    width: 128px; aspect-ratio: 16 / 9; overflow: hidden;
    border: 1px solid var(--vs-border); border-radius: var(--vs-radius-md);
    background: var(--vs-bg-subtle); color: var(--vs-text-3);
}
.vs-avisos__imagem-miniatura img { width: 100%; height: 100%; object-fit: cover; }
.vs-avisos__clientes { display: flex; flex-direction: column; gap: 8px; }
.vs-avisos__clientes-busca {
    list-style: none; margin: 0; padding: 4px;
    border: 1px solid var(--vs-border); border-radius: var(--vs-radius-md); background: var(--vs-bg-surface);
}
.vs-avisos__cliente-opcao {
    display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
    padding: 7px 10px; border: 0; border-radius: var(--vs-radius-sm);
    background: transparent; color: var(--vs-text); font: inherit; text-align: left; cursor: pointer;
}
.vs-avisos__cliente-opcao:hover { background: var(--vs-bg-row-hover); }
.vs-avisos__cliente-opcao strong { font-weight: var(--vs-weight-medium); }
.vs-avisos__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vs-avisos__cliente-chip {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 4px 3px 10px; border-radius: var(--vs-radius-full);
    background: var(--vs-accent-soft); color: var(--vs-info-fg); font-size: var(--vs-text-md);
}
.vs-avisos__cliente-chip button {
    display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0;
    border: 0; border-radius: var(--vs-radius-full); background: transparent; color: inherit; cursor: pointer;
}
.vs-avisos__cliente-chip button:hover { background: rgba(var(--vs-accent-rgb), .14); }
.vs-avisos__cliques { padding: 0 6px; }
.vs-avisos__copiar { display: flex; justify-content: flex-end; }
.vs-avisos__contato { display: flex; flex-direction: column; gap: 2px; }
@media (max-width: 640px) {
    .vs-avisos__imagem-linha { flex-direction: column; }
}

/* Enviar e-mail (/admin/enviar-email-customizado): formulário + pré-visualização lado a lado */
.vs-email { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1023.98px) { .vs-email { grid-template-columns: minmax(0, 1fr); } }
.vs-email__previa { display: block; width: 100%; height: 520px; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-lg); background: var(--vs-bg-surface); }
.vs-email__clientes { list-style: none; margin: 0; padding: 4px; max-height: 280px; overflow-y: auto; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-md); }
.vs-email__cliente { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--vs-radius-sm); cursor: pointer; }
.vs-email__cliente:hover { background: var(--vs-bg-row-hover); }
.vs-email__cliente input, .vs-email__check { flex: 0 0 auto; width: 16px; height: 16px; margin: 0; accent-color: var(--vs-ink); }
.vs-email__cliente-nome { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.vs-email__cliente-nome > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-email__selecao { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.vs-email__rolagem { max-height: 380px; overflow-y: auto; }
.vs-email__rolagem thead th { position: sticky; top: 0; z-index: 1; background: var(--vs-bg-surface); }
.vs-email__erros { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; font-size: var(--vs-text-md); overflow-wrap: anywhere; }
.vs-email__contadores { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.vs-email__contadores dt { font-size: var(--vs-text-sm); color: var(--vs-text-3); }
.vs-email__contadores dd { margin: 0; font-size: var(--vs-text-xl); font-weight: var(--vs-weight-semibold); font-variant-numeric: tabular-nums; }
@media (max-width: 575.98px) { .vs-email__contadores { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vs-email__esquema { display: flex; flex-direction: column; gap: 12px; padding: 16px; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-lg); background: var(--vs-bg-canvas); }
.vs-email__esquema p { margin: 0; }
.vs-email__esquema .vs-resumo { margin: 0; background: var(--vs-bg-surface); }
.vs-email__esquema-topo { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px; border: 1px solid var(--vs-border-subtle); border-radius: var(--vs-radius-md); background: var(--vs-bg-surface); }
.vs-email__esquema-cta { align-self: center; pointer-events: none; }
.vs-email__esquema-codigo { padding: 8px; border: 1px dashed var(--vs-border-strong); border-radius: var(--vs-radius-sm); background: var(--vs-bg-surface); font-size: var(--vs-text-sm); color: var(--vs-text-3); text-align: center; }

/* Ferramentas Omie (/admin/auditoria-cnpj-omie e /admin/correcao-cliente-omie) */
.vs-omie__rolagem { max-height: 680px; overflow-y: auto; }
.vs-omie__rolagem thead th { position: sticky; top: 0; z-index: 1; background: var(--vs-bg-surface); }
.vs-omie__check { width: 16px; height: 16px; margin: 0; accent-color: var(--vs-ink); }
.vs-omie__passos { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--vs-text-2); line-height: var(--vs-leading); }
.vs-omie__passos strong { color: var(--vs-text); font-weight: var(--vs-weight-medium); }
.vs-omie__log { list-style: none; margin: 0; padding: 0 10px 6px; max-height: 340px; overflow-y: auto; font-family: var(--vs-font-mono); font-size: var(--vs-text-sm); }
.vs-omie__log-linha { display: grid; grid-template-columns: 8px auto minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 5px 0; }
.vs-omie__log-linha + .vs-omie__log-linha { border-top: 1px solid var(--vs-border-subtle); }
.vs-omie__log-ponto { width: 8px; height: 8px; border-radius: var(--vs-radius-full); background: var(--vs-neutral-dot); }
.vs-omie__log-ponto.is-ok { background: var(--vs-ok-dot); }
.vs-omie__log-ponto.is-warn { background: var(--vs-warn-dot); }
.vs-omie__log-ponto.is-risk { background: var(--vs-risk-dot); }
.vs-omie__log-texto { color: var(--vs-text); overflow-wrap: anywhere; white-space: pre-wrap; }

/* Logs de debug (/admin/logs-debug) */
.vs-logsdebug__diagnostico { margin-top: 8px; }
.vs-logsdebug__diagnostico dd { overflow-wrap: anywhere; }
.vs-logsdebug__horas .vs-bars { height: 120px; gap: 3px; }
.vs-logsdebug__horas .vs-bars__labels { gap: 3px; }
.vs-logsdebug__eixo-topo { top: 0; }
.vs-logsdebug__eixo-meio { top: 50%; }
.vs-logsdebug__mensagem { max-width: clamp(240px, 36vw, 520px); }
.vs-logsdebug__texto { display: block; max-width: clamp(220px, 34vw, 500px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vs-logsdebug__detalhe > td { padding: 14px 16px; background: var(--vs-bg-subtle); }
.vs-table tbody tr.vs-logsdebug__detalhe:hover { background: transparent; }
.vs-logsdebug__subtitulo { margin: 0; font-size: var(--vs-text-sm); font-weight: var(--vs-weight-semibold); color: var(--vs-text-2); }
.vs-logsdebug__detalhe .vs-json { max-height: 220px; background: var(--vs-bg-surface); }
.vs-logsdebug__rodape { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.vs-logsdebug__rodape .vs-pagination { flex: 1 1 auto; }
.vs-logsdebug__por-pagina { width: auto; }
.vs-logsdebug__ranking { grid-template-columns: minmax(0, 1.4fr) minmax(60px, 1fr) 40px; }
.vs-logsdebug__ranking .vs-hbar__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* === fim G ============================================================ */

/* === Hub de Produtos (out/2026): lista, página do produto e assistente === */
/* Atalhos de configuração de preço sob o cabeçalho do hub */
.vs-produtos-atalhos { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.vs-produtos-atalhos > span { margin-right: 4px; }

/* Passos do assistente "Novo produto" */
.vs-passos { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.vs-passos__item { display: inline-flex; align-items: center; gap: 8px; color: var(--vs-text-3); font-size: var(--vs-text-sm); }
.vs-passos__numero { width: 24px; height: 24px; flex: 0 0 24px; display: inline-grid; place-items: center; border-radius: var(--vs-radius-full); border: 1px solid var(--vs-border-strong); font-size: var(--vs-text-xs); font-weight: var(--vs-weight-semibold); font-variant-numeric: tabular-nums; }
.vs-passos__item.is-atual { color: var(--vs-text); font-weight: var(--vs-weight-medium); }
.vs-passos__item.is-atual .vs-passos__numero { background: var(--vs-ink); border-color: var(--vs-ink); color: var(--vs-text-inverse); }
.vs-passos__item.is-feito { color: var(--vs-text-2); }
.vs-passos__item.is-feito .vs-passos__numero { background: var(--vs-ok-bg); border-color: var(--vs-ok-border); color: var(--vs-ok-fg); }

/* Resumo do que será criado (último passo) */
.vs-resumo-lista { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 4px 0 0; padding: 12px 14px; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-lg); background: var(--vs-bg-subtle); font-size: var(--vs-text-md); }
.vs-resumo-lista dt { color: var(--vs-text-2); }
.vs-resumo-lista dd { margin: 0; overflow-wrap: anywhere; }

/* Itens do produto, na ordem (o primeiro define a tela de consulta) */
.vs-itens-produto { display: flex; flex-direction: column; gap: 12px; }
.vs-itens-produto__vazio { margin: 0; }
.vs-itens-produto__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; border: 1px solid var(--vs-border); border-radius: var(--vs-radius-lg); }
.vs-itens-produto__item { display: flex; align-items: center; gap: 12px; padding: 8px 10px 8px 12px; }
.vs-itens-produto__item + .vs-itens-produto__item { border-top: 1px solid var(--vs-border); }
.vs-itens-produto__ordem { width: 22px; flex: 0 0 22px; text-align: right; color: var(--vs-text-3); font-variant-numeric: tabular-nums; font-size: var(--vs-text-sm); }
.vs-itens-produto__nome { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.vs-itens-produto__adicionar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; max-width: 620px; }

/* Lista simples com selo à direita (avisos do produto) */
.vs-lista-simples { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.vs-lista-simples > li { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.vs-lista-simples > li + li { border-top: 1px solid var(--vs-border); }

/* Hub Fornecedores (/admin/fornecedores/{aba}): a faixa de resumo da engine, lida como um painel de
   instrumentos — três leituras em mono, a de saúde com a barra lateral no tom (verde/vermelho) e o
   número levando ao Ranking. No celular as duas contagens dividem a linha e a saúde ocupa a seguinte. */
.vs-forn-explica { margin: 0; max-width: 78ch; }
.vs-forn-resumo {
    margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--vs-border); border-radius: var(--vs-card-radius); background: var(--vs-bg-surface); overflow: hidden;
}
.vs-forn-resumo__item { position: relative; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 2px; padding: 12px 18px; min-width: 0; }
.vs-forn-resumo__item + .vs-forn-resumo__item { border-left: 1px solid var(--vs-border-subtle); }
.vs-forn-resumo__item dt { font-size: var(--vs-text-sm); font-weight: var(--vs-weight-regular); color: var(--vs-text-3); }
.vs-forn-resumo__item dd {
    margin: 0; font-family: var(--vs-font-mono); font-size: var(--vs-text-2xl); font-weight: var(--vs-weight-semibold); line-height: 1.2;
    font-variant-numeric: tabular-nums; letter-spacing: var(--vs-tracking-tight); color: var(--vs-text);
}
.vs-forn-resumo__item dd a { display: inline-flex; align-items: baseline; gap: 6px; color: inherit; text-decoration: none; }
.vs-forn-resumo__item dd a:hover .vs-forn-resumo__unidade { text-decoration: underline; }
.vs-forn-resumo__item dd a:focus-visible { outline: var(--vs-focus-outline); outline-offset: 2px; border-radius: var(--vs-radius-sm); }
.vs-forn-resumo__item dd a .vs-icon { align-self: center; }
.vs-forn-resumo__unidade { margin-left: 6px; font-family: var(--vs-font-sans); font-size: var(--vs-text-sm); font-weight: var(--vs-weight-medium); letter-spacing: 0; color: var(--vs-text-2); }
.vs-forn-resumo__item--saude::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; }
.vs-forn-resumo__item--saude.is-ok::before { background: var(--vs-ok-dot); }
.vs-forn-resumo__item--saude.is-risk { background: var(--vs-risk-bg); }
.vs-forn-resumo__item--saude.is-risk::before { background: var(--vs-risk-dot); }
.vs-forn-resumo__item--saude.is-risk dd, .vs-forn-resumo__item--saude.is-risk dd .vs-forn-resumo__unidade { color: var(--vs-risk-fg); }
.vs-forn-resumo--off { display: flex; align-items: center; gap: 10px; padding: 12px 16px; font-size: var(--vs-text-md); color: var(--vs-text-2); }
.vs-forn-resumo--off > .vs-icon { flex: none; color: var(--vs-warn-fg); }
/* Painel › Operação: dica e o atalho para o hub no cabeçalho do card. */
.vs-saude__acoes { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 12px; }
@media (max-width: 575.98px) {
    .vs-forn-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .vs-forn-resumo__item { padding: 10px 14px; }
    .vs-forn-resumo__item--saude { grid-column: 1 / -1; border-top: 1px solid var(--vs-border-subtle); }
    .vs-forn-resumo__item + .vs-forn-resumo__item--saude { border-left: 0; }
    .vs-saude__acoes .vs-card__aside { display: none; }
    /* Oito abas não cabem numa linha de 390 px: viram pílulas que quebram linha — todas à vista e a ativa
       destacada, em vez de uma faixa que rola e esconde a aba aberta. */
    .vs-tabs.vs-forn-abas { flex-wrap: wrap; gap: 6px; overflow: visible; border-bottom: 0; }
    .vs-forn-abas .vs-tabs__aba {
        height: 34px; padding: 0 12px; margin: 0; gap: 6px; font-size: var(--vs-text-md);
        border: 1px solid var(--vs-border); border-radius: var(--vs-radius-full); background: var(--vs-bg-surface);
    }
    .vs-forn-abas .vs-tabs__aba[aria-selected="true"] { background: var(--vs-ink); border-color: var(--vs-ink); color: var(--vs-text-inverse); }
    .vs-forn-abas .vs-tabs__aba:focus-visible { border-radius: var(--vs-radius-full); outline-offset: 2px; }
}

/* -- Hubs por assunto (out/2026: Suporte, Comunicação — Gestao/Comum/HubCabecalho) --
   Título do assunto, a linha da aba aberta e as abas; o painel mantém o ritmo da página (20px). */
.vs-hub__abas { margin-top: -4px; }
.vs-hub__painel { --vs-gap: 20px; }
/* Título que abre um painel (feedback no drawer): parece link, é botão. */
.vs-link-botao { padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.vs-link-botao:focus-visible { outline: var(--vs-focus-outline); outline-offset: 2px; border-radius: var(--vs-radius-sm); }
/* Grupo no cabeçalho da ficha: leva à gestão do grupo. */
.vs-ficha-cab__link { color: inherit; text-decoration: underline; text-decoration-color: var(--vs-border-strong); text-underline-offset: 3px; }
.vs-ficha-cab__link:hover { color: var(--vs-accent); text-decoration-color: currentColor; }

/* -- Hub Pessoas (/admin/pessoas) e fichas da pessoa e do vendedor --
   Empresa tem marca quadrada (ficha do cliente); pessoa tem marca redonda: o formato diz de quem é a ficha. */
.vs-ficha-cab__marca--pessoa { border-radius: var(--vs-radius-full); }
.vs-ficha-cab__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-left: auto; }
.vs-ficha-cab__acoes .vs-ficha-cab__voltar { margin-left: 0; }
.vs-pessoa-papel { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.vs-pessoa-papel__texto { flex: 1 1 280px; min-width: 0; }
.vs-pessoa-papel__texto p { margin: 4px 0 0; }
@media (max-width: 767.98px) {
    .vs-ficha-cab__acoes { margin-left: 0; width: 100%; }
    .vs-pessoa-papel .vs-segmented { width: 100%; }
}

/* -- Hub Relatórios (/admin/relatorios/{aba}) -- */
.vs-relatorio-atalhos { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.vs-relatorio-atalhos > span { margin-right: 4px; }

/* Relatórios de BI e Período (out/2026): barra de período, mini-barras nas tabelas, faixa ABC e mapa de
   calor das safras. Sem rolagem lateral: as tabelas viram cartões no celular (.vs-table--cards). */
.vs-rel-periodo { display: flex; flex-direction: column; gap: 12px; }
.vs-rel-periodo__linha { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.vs-rel-periodo__acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vs-rel-periodo__acoes .vs-select { width: auto; }
.vs-rel-periodo__intervalo { display: flex; flex-wrap: wrap; gap: 12px 20px; }
.vs-rel-periodo__mesano { display: inline-flex; gap: 6px; }
.vs-rel-periodo__mesano .vs-select { width: auto; min-width: 0; }
.vs-rel-periodo__resumo { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--vs-text-sm); color: var(--vs-text-2); }
.vs-rel-periodo__resumo .vs-icon { color: var(--vs-text-3); }
.vs-rel-atualizando { opacity: .55; transition: opacity .2s var(--vs-ease); pointer-events: none; }
.vs-rel-grafico { padding: 0 12px 12px; }
.vs-rel-nota { margin: 10px 12px 4px; }
.vs-card--pad .vs-rel-nota { margin: 10px 0 0; }
.vs-rel-tabela td { vertical-align: middle; }
.vs-rel-tabela tfoot th, .vs-rel-tabela tfoot td { padding: 12px; border-top: 1px solid var(--vs-border); background: var(--vs-bg-subtle); font-weight: var(--vs-weight-semibold); text-align: left; }
.vs-rel-tabela tfoot td.is-num { text-align: right; }
.vs-rel-posicao { display: inline-block; min-width: 22px; margin-right: 6px; font-size: var(--vs-text-sm); color: var(--vs-text-3); text-align: right; }
/* Mini-barra dentro da célula (cadastros, % do total, % em dia): trilho fino e o número ao lado. */
.vs-rel-minibarra { display: inline-flex; align-items: center; gap: 8px; width: 100%; min-width: 120px; }
.vs-rel-minibarra__trilho { flex: 1 1 auto; height: 6px; border-radius: var(--vs-radius-full); background: var(--vs-bg-muted); overflow: hidden; }
.vs-rel-minibarra__fill { display: block; width: var(--largura, 0%); height: 100%; border-radius: inherit; background: var(--vs-chart-1); }
.vs-rel-minibarra__fill.is-ok { background: var(--vs-ok-dot); }
.vs-rel-minibarra > .vs-mono { flex: 0 0 auto; min-width: 46px; text-align: right; font-size: var(--vs-text-sm); }
/* Clientes de um vendedor (linha aberta) */
.vs-rel-clientes { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vs-rel-clientes li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.vs-rel-clientes a { font-weight: var(--vs-weight-medium); color: var(--vs-text); }
.vs-rel-clientes a:hover { color: var(--vs-accent); }
.vs-rel-clientes__valor { margin-left: auto; font-size: var(--vs-text-sm); }
/* Concentração: curva de Pareto + faixa ABC (a mesma classe em duas réguas: parte dos clientes × parte da receita) */
.vs-rel-concentracao { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: center; }
.vs-rel-abc { display: flex; flex-direction: column; gap: 12px; }
.vs-rel-abc__frase { margin: 0 0 4px; font-size: var(--vs-text-lg); line-height: 1.35; color: var(--vs-text-2); }
.vs-rel-abc__frase strong { font-size: var(--vs-text-2xl); font-weight: var(--vs-weight-semibold); letter-spacing: var(--vs-tracking-snug); font-variant-numeric: tabular-nums; color: var(--vs-text); }
.vs-rel-abc__linha { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 10px; }
.vs-rel-abc__rotulo { font-size: var(--vs-text-sm); color: var(--vs-text-3); }
.vs-rel-abc__barra { display: flex; height: 26px; border-radius: var(--vs-radius-sm); overflow: hidden; background: var(--vs-bg-muted); }
.vs-rel-abc__seg { display: flex; align-items: center; justify-content: center; width: var(--largura); min-width: 2px; font-size: var(--vs-text-xs); font-weight: var(--vs-weight-semibold); transform-origin: left; animation: vs-grow-x .6s var(--vs-ease) both; }
.vs-rel-abc__seg + .vs-rel-abc__seg { border-left: 2px solid var(--vs-bg-surface); }
.vs-rel-abc__seg.is-a, .vs-rel-abc__ponto.is-a { background: var(--vs-chart-1); color: var(--vs-bg-surface); }
.vs-rel-abc__seg.is-b, .vs-rel-abc__ponto.is-b { background: var(--vs-chart-2); color: #fff; }
.vs-rel-abc__seg.is-c, .vs-rel-abc__ponto.is-c { background: var(--vs-chart-pale); color: var(--vs-text); }
.vs-rel-abc__legenda { display: grid; gap: 6px; margin: 4px 0 0; }
.vs-rel-abc__legenda > div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; font-size: var(--vs-text-sm); }
.vs-rel-abc__legenda dt { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--vs-weight-medium); color: var(--vs-text); }
.vs-rel-abc__legenda dd { margin: 0; color: var(--vs-text-2); font-variant-numeric: tabular-nums; }
.vs-rel-abc__ponto { display: inline-block; width: 10px; height: 10px; border-radius: 3px; }
/* Safras: a cor da célula sobe com a parte da safra que consultou (--calor de 0 a 100) */
.vs-rel-calor { background: color-mix(in srgb, var(--vs-accent) calc(var(--calor, 0) * 0.42%), transparent); font-variant-numeric: tabular-nums; }
.vs-rel-safras__vazia td { color: var(--vs-text-3); }
@media (max-width: 991.98px) {
    .vs-rel-concentracao { grid-template-columns: 1fr; }
}
@media (max-width: 767.98px) {
    .vs-rel-periodo__linha { align-items: stretch; }
    .vs-rel-periodo__atalhos { display: flex; flex-wrap: wrap; width: 100%; overflow: visible; }
    .vs-rel-periodo__atalhos .vs-segmented__item { flex: 1 1 auto; }
    .vs-rel-periodo__acoes { width: 100%; flex-wrap: nowrap; }
    .vs-rel-periodo__acoes .vs-btn { flex: 1 1 auto; }
    /* Tabelas de mês a mês: continuam tabela (curtas), só com as colunas essenciais. */
    .vs-rel-compacta .vs-rel-opcional { display: none; }
    .vs-rel-compacta td.is-num { white-space: nowrap; }
    .vs-rel-segmentos .vs-card__head { flex-wrap: wrap; gap: 8px; }
    .vs-rel-compacta th, .vs-rel-compacta td { padding-left: 8px; padding-right: 8px; font-size: var(--vs-text-sm); }
    .vs-rel-compacta .vs-rel-minibarra { min-width: 0; }
    .vs-rel-compacta .vs-rel-minibarra__trilho { min-width: 40px; }
    .vs-rel-tabela td { flex-wrap: wrap; }
    .vs-rel-tabela td > .vs-table__sub { flex-basis: 100%; text-align: right; }
    .vs-rel-tabela td[data-label] > .vs-rel-minibarra { width: auto; flex: 0 1 220px; }
    .vs-rel-posicao { display: none; }
    .vs-rel-tabela td.vs-rel-calor { padding: 4px 8px; border-radius: var(--vs-radius-sm); }
    .vs-relatorio-detalhe > td { padding: 12px 10px; }
    .vs-rel-clientes__valor { margin-left: 0; }
}

/* === Auditoria de produção — interface do admin (out/2026) ============
   Correções da auditoria de 11/10/2026 (itens 5–35). Bloco único para facilitar a junção dos branches. */

/* Painel › Últimas atividades: valor e selo à direita, na mesma linha do nome (antes quebravam embaixo). */
.vs-painel-atividade { flex-wrap: nowrap; }
.vs-painel-atividade .vs-list-row__main { flex: 1 1 auto; }
.vs-painel-atividade .vs-list-row__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Barras horizontais: o nome quebra em até duas linhas em vez de ser cortado; a barra divide o resto. */
.vs-painel-hbars .vs-hbar { grid-template-columns: minmax(96px, 1.3fr) minmax(56px, 1fr) auto; }
.vs-painel-hbars--largo .vs-hbar { grid-template-columns: minmax(140px, 280px) minmax(80px, 1fr) auto; }
.vs-painel-hbars__rotulo {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
    overflow: hidden; overflow-wrap: anywhere; line-height: 1.3;
}
.vs-painel-hbars .vs-hbar__value { white-space: nowrap; }

/* Painel › Clientes: cancelado em cinza (histórico, não alarme) e legenda da barra. */
.vs-painel-split__cancelado { background: var(--vs-neutral-dot); }
.vs-painel-split-legenda { margin: -4px 0 14px; }
.vs-painel-split-legenda .vs-legend__item { font-variant-numeric: tabular-nums; }

/* Painel › Clientes: categorias sem cliente numa linha só (o card vazio deixava buraco na grade). */
.vs-risco__vazias { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--vs-text-md); color: var(--vs-text-3); }
.vs-risco__vazias li { display: inline-flex; align-items: center; gap: 6px; }
.vs-risco__vazias strong { font-weight: var(--vs-weight-medium); color: var(--vs-text-2); }

/* KPIs da gestão: o número encolhe com a largura do card (container query), de 20 a 30 px, em vez de
   quebrar "R$" numa linha e o valor na outra (Relatórios a 1366, Inadimplência). */
[data-vs-area="gestao"] .vs-grid-stats > .vs-stat { container-type: inline-size; }
[data-vs-area="gestao"] .vs-stat__value, [data-vs-area="gestao"] .vs-table td.is-num { white-space: nowrap; }
[data-vs-area="gestao"] .vs-grid-stats > .vs-stat .vs-stat__value { font-size: clamp(var(--vs-text-2xl), 11cqi, var(--vs-text-4xl)); }

/* Faturas: "Mostrar faturas zeradas" alinhado aos campos; seletor de seção dentro da aba (Integração). */
.vs-filtros__acoes .vs-fat-zeradas { min-height: var(--vs-control-h-md, 40px); }
.vs-fat-zeradas-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.vs-fat-secoes, .vs-forn-secoes { align-self: flex-start; }

/* Uma fonte só para números de tabela na gestão: Geist com algarismos tabulares (como no Painel). Antes,
   Relatórios, Faturas e Comissões usavam mono nos valores e o Painel, proporcional. Mono fica para código:
   placa, chassi, CNPJ, número de boleto. */
[data-vs-area="gestao"] .vs-table td.is-num { font-family: var(--vs-font-sans); font-variant-numeric: tabular-nums; }

/* Tendências › Mês a mês: dez colunas de valor sem quebrar "R$" — células mais justas. */
.vs-painel-tabela th, .vs-painel-tabela td { padding-left: 8px; padding-right: 8px; }
.vs-painel-tabela { font-size: var(--vs-text-md); }

/* Cartão de tabela (até 1099 px): o texto de apoio de uma célula (ex.: "13/13 fontes" sob o status) desce
   para a linha de baixo em vez de empurrar o cartão para o lado. */
@media (max-width: 1099.98px) {
    [data-vs-area="gestao"] .vs-table--cards:not(.vs-table--compacta) td { flex-wrap: wrap; }
    [data-vs-area="gestao"] .vs-table--cards:not(.vs-table--compacta) td > .vs-table__sub { flex-basis: 100%; text-align: right; }
}
/* Consultas › lista ao lado dos clientes: o nome do cliente pode ser mais estreito que nas listas de página inteira. */
@media (min-width: 1100px) {
    /* A lista de clientes cede espaço para a tabela em notebook (320 px só quando sobra). */
    .vs-ca-layout { grid-template-columns: minmax(240px, min(320px, 24%)) minmax(0, 1fr); }
    .vs-ca-consultas .vs-table td.vs-col-nome { min-width: 150px; }
    .vs-ca-consultas .vs-table th, .vs-ca-consultas .vs-table td { padding-left: 10px; padding-right: 10px; }
}
.vs-ca-cliente-celula__nome {
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
}

/* Clientes: oito colunas em notebook — o nome pode ser um pouco mais estreito que o padrão de .vs-col-nome. */
@media (min-width: 1100px) {
    .vs-cli-grade td.vs-col-nome { min-width: 160px; }
}

/* Pessoas › Usuários dos clientes: o filtro de situação ao lado da busca, não na linha toda. */
.vs-toolbar .vs-pessoas-situacao, .vs-col-12 .vs-toolbar .vs-avisos-tipo { width: auto; flex: 0 1 300px; }

/* Consultas › "Todos os clientes" selecionado: o texto de apoio mantém contraste AA no fundo de seleção. */
.vs-ca-cliente.is-selected .vs-ca-cliente__sub { color: var(--vs-text-2); }

/* Avisos: com o formulário fechado, a lista ocupa a linha toda. */
.vs-row > .vs-col-12 { flex: 1 1 100%; min-width: 0; }

/* Clientes: com os filtros na gaveta, os "Mais filtros" ocupam a linha toda dentro da barra. */
.vs-cli-toolbar .vs-cli-filtros-extra { flex: 1 0 100%; }

/* Celular (auditoria de out/2026, item 21) — só nas telas da equipe ([data-vs-area="gestao"]).
   KPIs em duas colunas (antes um por linha) e listas principais em cartão compacto: o nome em cima e o
   resto numa linha corrida de valores (antes, 5 linhas "rótulo: valor"). A tabela opta pelo modo
   compacto com .vs-table--compacta; td.vs-col-nome é o título do cartão (sem ele, a 1ª célula);
   .vs-cartao-oculta some no cartão (o dado está no detalhe); as ações ficam no canto superior. */
@media (max-width: 575.98px) {
    [data-vs-area="gestao"] .vs-grid-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    [data-vs-area="gestao"] .vs-grid-stats > .vs-stat { padding: 12px 14px; gap: 6px; }
    [data-vs-area="gestao"] .vs-grid-stats > .vs-stat .vs-stat__label { font-size: var(--vs-text-sm); }
    [data-vs-area="gestao"] .vs-grid-stats > .vs-stat .vs-stat__label .vs-icon { display: none; }
    [data-vs-area="gestao"] .vs-grid-stats > .vs-stat .vs-stat__value { font-size: clamp(var(--vs-text-lg), 13cqi, var(--vs-text-2xl)); }
    [data-vs-area="gestao"] .vs-grid-stats > .vs-stat .vs-stat__meta { font-size: var(--vs-text-xs); }
}
@media (max-width: 767.98px) {
    [data-vs-area="gestao"] .vs-table--compacta tbody tr {
        position: relative; display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 14px;
        padding: 12px 44px 12px 6px;
    }
    [data-vs-area="gestao"] .vs-table--compacta td {
        display: inline; flex: 0 1 auto; padding: 0; border: 0; text-align: left;
        font-size: var(--vs-text-sm); color: var(--vs-text-2); white-space: normal;
    }
    [data-vs-area="gestao"] .vs-table--compacta td[data-label]::before { content: none; }
    [data-vs-area="gestao"] .vs-table--compacta td.vs-col-nome,
    [data-vs-area="gestao"] .vs-table--compacta tr:not(:has(> td.vs-col-nome)) > td:first-child {
        order: -1; flex: 1 0 100%; margin-bottom: 2px; min-width: 0;
        font-size: var(--vs-text-base); font-weight: var(--vs-weight-medium); color: var(--vs-text);
    }
    [data-vs-area="gestao"] .vs-table--compacta td .vs-table__sub,
    [data-vs-area="gestao"] .vs-table--compacta td .vs-cli-celula { display: inline; margin-left: 6px; font-size: inherit; }
    [data-vs-area="gestao"] .vs-table--compacta td.vs-col-nome .vs-table__sub { font-size: var(--vs-text-sm); font-weight: var(--vs-weight-regular); }
    [data-vs-area="gestao"] .vs-table--compacta td.is-num { font-weight: var(--vs-weight-medium); color: var(--vs-text); }
    [data-vs-area="gestao"] .vs-table--compacta td.is-actions { position: absolute; top: 8px; right: 0; display: flex; }
    [data-vs-area="gestao"] .vs-table--compacta .vs-cartao-oculta,
    [data-vs-area="gestao"] .vs-table--compacta td:empty { display: none; }
    [data-vs-area="gestao"] .vs-table--compacta .vs-badge { vertical-align: baseline; }
    [data-vs-area="gestao"] .vs-table--compacta td .vs-truncar { max-width: 100%; }

    /* Fornecedores › Consumo: três colunas que cabem (largura fixa e o tipo quebra). */
    .vs-forn-consumo { table-layout: fixed; }
    .vs-forn-consumo th, .vs-forn-consumo td { padding-left: 8px; padding-right: 8px; }
    .vs-forn-consumo th:last-child, .vs-forn-consumo td:last-child { width: 96px; }
    .vs-forn-consumo td.vs-mono { overflow-wrap: anywhere; word-break: break-word; font-size: var(--vs-text-sm); }
}

/* Tabelas que viraram cartão (Oportunidades): o conteúdo de várias linhas fica à direita do rótulo. */
@media (max-width: 1099.98px) {
    .vs-table--cards td.vs-oport-celula { flex-wrap: wrap; align-items: flex-start; }
    .vs-table--cards td.vs-oport-celula > * { margin-left: auto; text-align: right; }
}

/* === fim auditoria admin ============================================== */