/* Manrope/Roboto auto-hospedadas (static/fonts/) em vez de Google Fonts —
     app roda sem internet garantida, CDN quebraria pro fallback do
     sistema. Arquivos são fontes variáveis (1 arquivo cobre a faixa de
     peso toda). Usadas por enquanto só no redesign do Helpdesk (ver
     --fonte-corpo/--fonte-destaque), não no resto do app. */
  @font-face {
    font-family: 'Roboto';
    src: url('/static/fonts/roboto-latin.woff2') format('woff2');
    font-weight: 400 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Manrope';
    src: url('/static/fonts/manrope-latin.woff2') format('woff2');
    font-weight: 500 700;
    font-style: normal;
    font-display: swap;
  }
  :root {
    --cor-marca: #00284d;
    --cor-acento: #0067ff;
    --cor-acento-fundo: #eef2ff;
    --cor-acento-texto: #0052cc;
    --cor-texto: #1c2430;
    --cor-texto-2: #555;
    --cor-texto-mudo: #8a93a6;
    --cor-borda: #dfe3ea;
    --fonte-corpo: 'Roboto', Arial, sans-serif;
    --fonte-destaque: 'Manrope', 'Roboto', Arial, sans-serif;
  }
  body { font-family: var(--fonte-corpo); margin: 0; background: var(--fundo-f4f5f7); color: var(--cor-texto); }
  /* Tipografia de destaque (Manrope) — mesmo critério do piloto do
     Helpdesk, agora pra todo o app: qualquer controle/rótulo em negrito
     (botão, cabeçalho, aba ativa, pílula) usa a fonte de destaque; texto
     corrido (parágrafo, input, célula de tabela) fica em Roboto. */
  button, header, th, .sidebar-titulo, .sidebar-item, .tab-btn, .ambiente-pill,
  .fc-status-pill, .fc-alerta-pilula, .pilula-toggle, .tv-pill, .tv-kpi-value,
  .hdg-eyebrow, .hdg-pill { font-family: var(--fonte-destaque); }
  header { background: var(--fundo-00284d); color: var(--texto-white); padding: 7px 20px; font-weight: 600; display: flex; align-items: center; justify-content: space-between; }
  header .header-right { display: flex; align-items: center; gap: 10px; position: relative; }
  .ambiente-pill { font-size: 12px; padding: 3px 10px; border-radius: 10px; font-weight: 500; }
  .ambiente-pill.homologacao { background: var(--fundo-e0a800); color: var(--texto-1c2430); }
  .ambiente-pill.producao { background: var(--fundo-0e8f8b); color: var(--texto-white); }
  .gear-btn { background: none; border: none; color: var(--texto-white); font-size: 18px; cursor: pointer; padding: 4px 8px; margin: 0; border-radius: 6px; }
  .gear-btn:hover { background: var(--fundo-rgba-255-255-255-0-15); }
  .gear-dropdown { position: absolute; top: 36px; right: 0; background: var(--fundo-white); color: var(--texto-1c2430); border-radius: 8px; box-shadow: 0 4px 16px var(--sombra-rgba-0-0-0-0-2); padding: 14px; width: 280px; z-index: 10; }
  .gear-dropdown h4 { margin: 0 0 6px; font-size: 13px; }
  .gear-dropdown hr { border: none; border-top: 1px solid var(--borda-eee); margin: 12px 0; }
  /* Largura ampliada (pedido do usuário, 2026-09-01: "encostar mais o menu
     esquerdo pra borda esquerda e a área de trabalho esticar até encostar
     na borda direita"). 1900px em vez de 1300px: em monitores até
     ~1920px de largura (a maioria aqui na TPF) isso já ocupa a tela quase
     toda (só sobra o padding de respiro); em monitores ultrawide/4K
     continua limitado, pra não esticar tabelas/listas a ponto de ficar
     difícil de ler. box-sizing:border-box pra o padding nunca somar além
     de 100% da viewport (risco real de "estourar" a página). */
  main { padding: 20px 24px; max-width: 1900px; margin: 0 auto; box-sizing: border-box; }
  .card { background: var(--fundo-white); border-radius: 10px; padding: 16px 20px; border: 0.5px solid var(--cor-borda); margin-bottom: 14px; }
  /* Menu lateral (pedido do usuário, 2026-08-22: SQL avançado precisava de
     uma tela própria, sem espaço pra isso no menu ⚙) — troca qual .secao
     fica visível dentro de .conteudo-secoes, mesma ideia de navegação de
     abas, só que na lateral. */
  .app-shell { display: flex; gap: 20px; align-items: flex-start; }
  /* Coluna esquerda = 2 cards empilhados (menu + "Minha fila", pedido do
     usuário, 2026-09-01: "o card é separado do card de menus" — antes
     "Minha fila" vivia dentro do mesmo card do menu, só com uma linha
     divisória). width/position/sticky moraram aqui (saíram de .sidebar),
     que agora é só a caixa visual do menu em si. */
  .sidebar-coluna { display: flex; flex-direction: column; gap: 12px; width: 190px; flex-shrink: 0; position: sticky; top: 24px; }
  .sidebar { display: flex; flex-direction: column; gap: 4px; background: var(--fundo-white); border-radius: 10px; padding: 10px; border: 0.5px solid var(--cor-borda); }
  .sidebar-item { margin: 0; background: none; color: var(--texto-1c2430); text-align: left; padding: 8px 12px; border-radius: 6px; font-size: 14px; font-weight: 500; }
  .sidebar-item:hover { background: var(--fundo-f4f5f7); }
  .sidebar-item.ativo { background: var(--fundo-00284d); color: var(--texto-white); }
  .conteudo-secoes { flex: 1; min-width: 0; }
  /* Menu com 2 níveis (pedido do usuário, 2026-08-22): "Menu Principal"
     (ex.: Pgto Avulso) agrupando "Submenu" (Individual/Lote/Logística) —
     pensado pra caber mais módulos do lado (Helpdesk é o próximo). */
  .sidebar-grupo { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
  /* Grupo recolhido por padrão (pedido do usuário, 2026-08-22: "menos
     poluição") — só mostra os submenus quando expandido; mostrarSecao()
     expande sozinho o grupo da tela atual, senão a pessoa ficaria sem
     ver onde está depois de navegar. */
  .sidebar-titulo { font-size: 12px; color: var(--cor-texto-mudo); font-weight: 500; padding: 8px 12px; cursor: pointer; user-select: none; display: flex; align-items: center; justify-content: space-between; }
  .sidebar-titulo::after { content: '▸'; font-size: 10px; transition: transform .15s; }
  .sidebar-grupo.expandido .sidebar-titulo::after { transform: rotate(90deg); }
  .sidebar-grupo .sidebar-item { padding-left: 22px; font-size: 13px; display: none; }
  /* :not(.oculto) é necessário (não só estético) — pedido do usuário,
     2026-09-06: "Gestão" (submenu do Helpdesk) precisa ficar escondida de
     quem não tem permissão MESMO com o grupo expandido. Sem o :not, a
     regra de baixo (3 classes) vence ".oculto{display:none}" (1 classe)
     por especificidade, e um item .oculto dentro de um grupo .expandido
     reaparecia (bug real, testado: computed display voltava "block").
     Mesma lição já registrada no projeto sobre display base em elemento
     que pode ficar .oculto — aqui também corrige o mesmo risco latente
     pro navTriagem dentro de #grupoAtivos. */
  .sidebar-grupo.expandido .sidebar-item:not(.oculto) { display: block; }
  /* Abas dentro de uma tela (pedido do usuário, 2026-08-22: "Gestão de
     Ativos" agrupa "Pgto Avulso" como submenu único, com Individual/Lote/
     Logística virando abas dentro dessa tela em vez de itens de menu
     separados; mesma ideia pro Helpdesk, com abas Atendente/Painel TV). */
  .tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--borda-e2e5eb); margin-bottom: 12px; }
  .tab-btn { margin: 0; background: none; color: var(--texto-555); border-radius: 6px 6px 0 0; padding: 8px 16px; font-size: 14px; font-weight: 500; border-bottom: 2px solid transparent; }
  .tab-btn:hover { background: var(--fundo-f4f5f7); }
  .tab-btn.ativo { color: var(--texto-00284d); border-bottom-color: var(--borda-00284d); font-weight: 600; }
  .aba.oculto { display: none; }
  label { display: block; font-size: 13px; color: var(--texto-555); margin-bottom: 4px; margin-top: 8px; }
  input, select, textarea { width: 100%; padding: 8px; border: 1px solid var(--borda-ccd); border-radius: 6px; font-size: 14px; box-sizing: border-box; font-family: inherit; }
  textarea { font-family: monospace; font-size: 13px; resize: vertical; }
  button { margin-top: 10px; padding: 9px 16px; border: none; border-radius: 6px; background: var(--fundo-0067ff); color: var(--texto-white); cursor: pointer; font-size: 14px; }
  button:not(.secundario):hover { background: var(--fundo-0055d4); }
  button:disabled { opacity: .5; cursor: not-allowed; }
  button.secundario { background: transparent; color: var(--cor-acento-texto); border: 0.5px solid var(--cor-borda); margin-left: 8px; }
  button.secundario:hover { border-color: var(--cor-acento); background: var(--cor-acento-fundo); }
  button.secundario.ativo { background: var(--cor-acento); color: var(--texto-fff); border-color: var(--cor-acento); }
  table { width: 100%; border-collapse: collapse; margin-top: 0; font-size: 14px; }
  th, td { text-align: left; padding: 7px 12px; border-bottom: 1px solid var(--borda-eee); }
  th { white-space: nowrap; }
  td input, td select { min-width: 110px; }
  tr:hover td { background: var(--fundo-f8f9fb); }
  /* Destaque de duplicata (pedido do usuário, 2026-08-22) — mesma
     especificidade de "tr:hover td", por isso vem DEPOIS no CSS (quem
     vier depois ganha o empate): mantém o laranja visível mesmo passando
     o mouse em cima. */
  tr.linha-duplicata td { background: var(--fundo-ffedd9); }
  /* Container com rolagem própria (pedido do usuário, 2026-08-22: dados
     compactos demais nas tabelas, e no app Node a barra de rolagem
     horizontal só aparecia lá no fim da página, exigindo rolar tudo pra
     acessar). Limitando a altura aqui, as duas barras (vertical e
     horizontal) ficam sempre visíveis dentro do próprio quadro. */
  #tabelaContainerVivo, #tabelaContainerUnidas, #tabelaContainerImoveis, #tabelaContainerBeta, #loteNotasContainer, #lotePastasContainer {
    overflow: auto;
    max-height: 72vh;
    border: 1px solid var(--borda-e2e5eb);
    border-radius: 8px;
    margin-top: 10px;
  }
  #tabelaContainerVivo table, #tabelaContainerUnidas table, #tabelaContainerImoveis table, #tabelaContainerBeta table, #loteNotasContainer table, #lotePastasContainer table { margin-top: 0; }
  #tabelaContainerVivo thead th, #tabelaContainerUnidas thead th, #tabelaContainerImoveis thead th, #tabelaContainerBeta thead th, #loteNotasContainer thead th, #lotePastasContainer thead th {
    position: sticky; top: 0; background: var(--fundo-fff); z-index: 1;
  }
  /* Tela Logística (beta) — simplificação 2026-10-08: link de ajustes, faixa de
     resumo da leitura e selos ✔/⚠/✖ por linha. O aviso de bloqueio de data
     continua no DOM da linha (o botão Enviar depende dele), mas o motivo já
     aparece na coluna da própria linha, então fica escondido aqui. */
  .link-beta { color: var(--texto-1f5fa8); font-size: 13px; text-decoration: underline; cursor: pointer; }
  .faixa-beta { margin-top: 12px; padding: 8px 10px; border-radius: 6px; background: var(--fundo-f1f5fa); border: 1px solid var(--borda-d5dfec); font-size: 14px; color: var(--texto-223); }
  .faixa-beta #listaIgnoradasBeta { margin-top: 6px; font-size: 12px; color: var(--texto-555); }
  .sit-beta { font-size: 12px; margin-top: 4px; }
  .sit-beta.sit-ok { color: var(--texto-1b6e2d); }
  .sit-beta.sit-aviso { color: var(--texto-7a5600); }
  .sit-beta.sit-erro { color: var(--texto-a12626); font-weight: 600; }
  #tabelaContainerBeta .aviso-bloqueio { display: none; }
  /* Tela Logística (beta), 2026-10-08: avisos NÃO bloqueantes dentro da
     tabela (arquivo principal não achado, data de exceção fora do
     razoável) — tom amarelo pra não parecer o vermelho de bloqueio
     (.aviso-bloqueio), que desabilita o envio. */
  .aviso-suave { background: var(--fundo-fff8e1); border: 1px solid var(--borda-f0d98a); color: var(--texto-6b5200); padding: 6px 8px; border-radius: 6px; font-size: 12px; margin-top: 6px; }
  /* Linhas/colunas mais compactas só na tabela de Imóveis (pedido do
     usuário, 2026-09-15) — tem mais colunas que Vivo/Unidas (CNPJ, CPF,
     Banco/Agência/Conta separados) e fica larga demais com o padding/
     min-width padrão do resto do app. Regra própria, não mexe no `th, td`
     nem no `td input, td select` genéricos (usados por todo o resto do
     app) — sobrescreve só dentro de `#tabelaContainerImoveis`. */
  #tabelaContainerImoveis th, #tabelaContainerImoveis td { padding: 6px 8px; }
  .erro { color: var(--texto-b02a2a); font-size: 13px; margin-top: 8px; }
  .grupo-info { font-size: 13px; color: var(--texto-666); margin-top: 4px; }
  /* "Powered by Iris" (pedido do usuário, 2026-09-11) — selo discreto no
     canto superior direito dos 3 painéis de lançamento de notas
     (Individual/Lote genérico/Logística), onde a extração via IRIS entra
     como fallback. Mesmo tom/tamanho já usado pros textos secundários do
     app (11px, #8a93a6 — ver .hd-email/.sidebar-titulo). */
  .titulo-com-iris { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
  .titulo-com-iris h3 { margin: 0; }
  .iris-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--texto-8a93a6); white-space: nowrap; }
  .iris-badge img { height: 14px; width: auto; display: block; }
  .oculto { display: none; }
  .versao-app { font-size: 11px; color: var(--texto-999); margin-top: 10px; }
  /* Mesmo indicador de leitura de anexo do widget.html (templates/widget.html)
     — pedido do usuário (2026-09-25): sem isso, anexar vários PDFs no
     Individual dava impressão de tela travada enquanto cada um era lido. */
  .carregando { font-size: 12px; color: var(--texto-00284d); margin-top: 4px; display: flex; align-items: center; gap: 6px; }
  .carregando.oculto { display: none; } /* .carregando (acima) vencia .oculto por vir depois: indicador nunca sumia */
  .spinner {
    width: 12px; height: 12px; border: 2px solid var(--borda-cfd8e3); border-top-color: var(--borda-00284d);
    border-radius: 50%; animation: girar .7s linear infinite; flex: 0 0 auto;
  }
  @keyframes girar { to { transform: rotate(360deg); } }
  /* Aviso de política de pagamento — pedido do usuário (2026-08-22): BLOQUEIA
     de verdade (diferente do app Node, que só avisa), então precisa parecer
     mais sério que os erros de validação comuns. */
  .aviso-bloqueio { background: var(--fundo-fdecea); border: 1px solid var(--borda-f2b8b5); color: var(--texto-7a1f1a); padding: 8px 10px; border-radius: 6px; font-size: 13px; margin-top: 8px; }
  /* Layout compacto do formulário Individual — grid de 2 colunas em vez de
     tudo empilhado em largura total (pedido do usuário, 2026-08-22: "ficou
     muito grande"). */
  .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: start; }
  .form-grid > .full { grid-column: 1 / -1; }
  /* Tela de login mais estreita (pedido do usuário, 2026-08-22: "muito
     larga") — 60% de largura (redução de 40%), proporcional ao invés de
     um px fixo, com um mínimo pra não espremer demais em janela pequena. */
  #cardLogin { max-width: 60%; min-width: 320px; margin: 0 auto; }

  /* Fluxo de Compra — porte de sgp-ativos/backend/sgpFluxoCompra.js +
     sgp-tools.html, com layout próprio (pedido do usuário, 2026-08-24:
     "arrumar um layout mais elegante" — trocado o stepper simples do Node
     por círculos conectados por linha, status atual/concluído destacados). */
  .fc-stepper { display: flex; align-items: flex-start; margin: 4px 0 20px; overflow-x: auto; padding-bottom: 4px; }
  .fc-step { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 92px; position: relative; }
  .fc-step:not(:last-child)::after { content: ''; position: absolute; top: 13px; left: 56%; width: 88%; height: 2px; background: var(--fundo-e2e5eb); z-index: 0; }
  .fc-step.done:not(:last-child)::after { background: var(--fundo-0e8f8b); }
  .fc-step-circle { width: 26px; height: 26px; border-radius: 50%; background: var(--fundo-e2e5eb); color: var(--texto-8a93a6); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; z-index: 1; flex-shrink: 0; }
  .fc-step.done .fc-step-circle { background: var(--fundo-0e8f8b); color: var(--texto-fff); }
  .fc-step.active .fc-step-circle { background: var(--fundo-00284d); color: var(--texto-fff); box-shadow: 0 0 0 4px var(--sombra-e9edf5); }
  .fc-step-label { font-size: 11px; color: var(--texto-8a93a6); text-align: center; margin-top: 6px; max-width: 100px; line-height: 1.3; }
  .fc-step.active .fc-step-label { color: var(--texto-00284d); font-weight: 600; }
  .fc-status-pill { padding: 2px 10px; border-radius: 6px; font-size: 13px; font-weight: 600; background: var(--fundo-e9edf5); color: var(--texto-00284d); white-space: nowrap; }
  /* "Aprovado pelo Gerente" em verde (pedido do usuário, 2026-09-17) — mesma
     cor já usada pra "concluído"/"aprovado" no resto do Fluxo de Compra
     (.fc-step.done, .hd-pill.minha). */
  .fc-status-pill.aprovado { background: var(--fundo-ddf3f1); color: var(--texto-0b6e6b); }
  /* Status/Tipo/Criado em maiores (pedido do usuário, 2026-09-04) — só
     dentro do Fluxo de Compra: .hd-item-meta é reaproveitado por outras
     telas (Helpdesk/Triagem), então o aumento é escopado a #cardFluxoCompra
     pra não mexer em nada fora daqui. Status já fica na mesma linha do #ID
     (não cresce a linha, só combina com o tamanho que já tinha); Tipo e
     Criado em dividem a mesma linha (.hd-item-meta), então também não
     ganham linha própria — só ficam maiores nessa linha que já existia. */
  #cardFluxoCompra .hd-item-meta { font-size: 13px; }
  .fc-etapa-card { background: var(--fundo-fafbfc); border: 1px solid var(--borda-e2e5eb); border-radius: 10px; padding: 16px 18px; margin-top: 4px; }
  .fc-aviso { background: var(--fundo-fff3d6); border: 1px solid var(--borda-f0dca0); color: var(--texto-8a5a00); padding: 8px 10px; border-radius: 6px; font-size: 12px; margin-bottom: 12px; }
  /* Alerta de palavras-chave (pedido do usuário, 2026-09-04): pílula de
     aviso (mesma paleta do .fc-aviso acima) que só aplica o filtro quando
     clicada — sem clicar, fica só destacada pra chamar atenção. */
  .fc-alerta-pilula { padding: 4px 12px; border-radius: 6px; font-size: 13px; font-weight: 700; background: var(--fundo-fff3d6); color: var(--texto-8a5a00); border: 1px solid var(--borda-f0dca0); cursor: pointer; white-space: nowrap; }
  .fc-alerta-pilula.ativo { background: var(--fundo-8a5a00); color: var(--texto-fff); border-color: var(--borda-8a5a00); }
  /* Botão liga/desliga em formato de pílula, genérico (usado hoje só no
     ⚙ do alerta, mas sem prefixo fc- de propósito — dá pra reaproveitar
     em outro toggle futuro). */
  .pilula-toggle { border-radius: 6px; padding: 5px 16px; border: 0.5px solid var(--cor-borda); background: transparent; color: var(--cor-texto-2); font-weight: 500; font-size: 12px; cursor: pointer; }
  .pilula-toggle.ativo { background: var(--fundo-0e8f8b); border-color: var(--borda-0e8f8b); color: var(--texto-fff); }
  .fc-orcamentos-tabela { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 10px; }
  .fc-orcamentos-tabela th, .fc-orcamentos-tabela td { padding: 6px 8px; text-align: left; border-bottom: 1px solid var(--borda-eee); }
  .fc-orcamentos-tabela th { color: var(--cor-texto-mudo); font-weight: 500; font-size: 12px; }
  .fc-nota-campo { font-size: 11px; color: var(--texto-0e8f8b); margin-top: 2px; }
  .fc-checklist { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; font-size: 13px; color: var(--texto-444); }
  .fc-checklist label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-444); margin: 0; }
  .fc-checklist input { width: auto; margin: 0; }
  .fc-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
  .fc-acoes button { margin: 0; }
  /* Faixa de andamento da etapa (2026-10-08, ver fcAcaoEmSegundoPlano): a ação
     roda em segundo plano e a tela já mostra a próxima etapa — a faixa diz o
     que ainda está acontecendo no SGP (mesma paleta do selo do Helpdesk). */
  #fcFaixaEtapa { margin: 0 0 8px; }
  .fc-faixa { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 8px 12px; border-radius: 6px; font-size: 13px; }
  .fc-faixa.pendente { background: var(--fundo-fff4d6); color: var(--texto-8a6100); border: 1px solid var(--borda-f0dca0); }
  .fc-faixa.ok { background: var(--fundo-ddf3f1); color: var(--texto-0b6e6b); border: 1px solid var(--borda-c7eae6); }
  .fc-faixa.erro { background: var(--fundo-fde8e8); color: var(--texto-a12626); border: 1px solid var(--borda-f2b8b5); }
  .fc-faixa-texto { display: flex; align-items: center; gap: 8px; }
  .fc-faixa-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
  .fc-faixa-acoes button { margin: 0; padding: 5px 10px; border-radius: 6px; font-size: 12px; cursor: pointer; font-weight: 600; background: var(--fundo-fff); color: var(--texto-333); border: 1px solid var(--borda-d6b0b0); }
  .fc-linha-pendente td { color: var(--texto-8a6100); background: var(--fundo-fffaf0); }
  .fc-linha-pendente.erro td { color: var(--texto-a12626); background: var(--fundo-fff5f5); }
  .fc-tag-pendente { font-size: 11px; font-weight: 600; margin-left: 6px; }
  #cardFluxoCompra button[data-fc-continuar]:disabled { cursor: not-allowed; }
  /* Aba "Patrimônio" (pedido do usuário, 2026-08-24: "layout ficou muito
     grande") — grid mais denso que o .form-grid padrão (4 colunas em vez
     de 2), já que a maioria dos campos é curta (ID, Etiqueta, valores);
     só Descrição/Observações pedem largura total (.full, reaproveitado). */
  .fc-filtros-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 12px; align-items: start; }
  .fc-filtros-grid > .full { grid-column: 1 / -1; }

  /* Painel do Atendente (Helpdesk) — porte de
     sgp-helpdesk-colaborador/painel-ti.html, adaptado à paleta deste app. */
  /* "Minha fila" saiu daqui (foi pro menu lateral, ver .hd-sidebar-fila),
     então "Fila de chamados" agora é a única coluna — sem grid, direto no
     padding do .card, pra usar a largura toda (pedido do usuário,
     2026-09-01: "deixar o card central com mais visibilidade"). */
  /* Linha única de controles da fila — mês, Filtros, Atualizar/
     Configurações (pedido do usuário, 2026-09-01: "parte branca muito
     grande na área superior", juntar tudo numa linha só em vez de 2
     linhas separadas + sem título "Fila de chamados" (tirado por
     completo, não só o "(não atribuídos)")). */
  .hd-controles-fila { margin: 16px 0 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .hd-controles-fila-direita { display: flex; align-items: center; gap: 6px; margin-left: auto; }
  /* Botões compactos (pedido do usuário, 2026-09-01: "reduzir o tamanho
     dos botões" — a linha de controles ficava com padding/fonte do botão
     padrão do app, grande demais pra uma barra de ferramentas densa).
     height+box-sizing:border-box fixos nos 3 — sem isso, button (sem
     borda) e input/select (com borda de 1px + chrome nativo do
     calendário/seta) renderizam com alturas ligeiramente diferentes
     mesmo com o mesmo padding, e a linha fica desalinhada (pedido do
     usuário: "alinhar os campos com os botões"). */
  /* margin:0 é o pulo do gato aqui — sem isso, os <button> dessa linha
     herdam o "margin-top: 14px" do botão padrão do app (ver regra
     "button" mais acima), e mesmo com height igual aos <input>/<select>
     (que nunca tiveram essa margem) a linha inteira fica desalinhada
     verticalmente (achado testando, pedido do usuário: "alinhar os
     campos com os botões"). */
  .hd-btn-sm { height: 32px; padding: 0 10px; font-size: 12px; box-sizing: border-box; margin: 0; }
  /* Atualizar/Configurações viraram só ícone (pedido do usuário,
     2026-09-01: "remover o nome e deixar apenas o ícone"). */
  .hd-btn-icone { height: 32px; padding: 0 10px; font-size: 14px; line-height: 1; box-sizing: border-box; margin: 0; }
  /* "Minha fila" compacta no menu lateral (pedido do usuário, 2026-09-01)
     — fica sempre visível (não só na aba Atendente), atualiza junto com
     hdRefreshTimer. Formato bem enxuto: só ID + solicitante (truncado) +
     botão de finalizar; clique na linha abre o modal de detalhe. */
  .hd-sidebar-fila { background: var(--fundo-white); border-radius: 10px; padding: 12px 0 6px; border: 0.5px solid var(--cor-borda); }
  .hd-sidebar-fila-titulo { display: flex; align-items: center; justify-content: space-between; padding: 0 12px 6px; font-size: 12px; font-family: var(--fonte-corpo); color: var(--cor-texto-mudo); font-weight: 500; }
  /* Contador de "Minha fila" — o único ponto de tipografia de destaque
     deste redesign (pedido do usuário: ousar em tipografia, não em cor de
     acento). Manrope 700, tratado como selo em vez do "(3)" em texto puro. */
  .hd-contagem-badge { font-family: var(--fonte-destaque); font-weight: 700; font-size: 12px; color: var(--cor-acento-texto); background: var(--cor-acento-fundo); padding: 1px 7px; border-radius: 6px; margin-left: 6px; }
  .hd-sidebar-fila-titulo button { margin: 0; background: none; color: var(--texto-8a93a6); padding: 0 4px; font-size: 13px; }
  .hd-sidebar-fila-titulo button:hover { color: var(--texto-0067ff); background: none; }
  #hdMinhaFilaWrap { max-height: 260px; overflow-y: auto; display: flex; flex-direction: column; gap: 1px; }
  .hd-sidebar-item { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; cursor: pointer; }
  .hd-sidebar-item:hover { background: var(--fundo-f4f5f7); }
  .hd-sidebar-item-info { min-width: 0; flex: 1; }
  .hd-sidebar-item-id { font-size: 11px; font-weight: 700; color: var(--texto-1c2430); }
  .hd-sidebar-item-nome { font-size: 11px; color: var(--texto-666); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hd-sidebar-item-finalizar { flex: 0 0 auto; margin: 0; background: var(--fundo-ddf3f1); color: var(--texto-0b6e6b); border-radius: 50%; width: 20px; height: 20px; padding: 0; font-size: 11px; line-height: 1; display: flex; align-items: center; justify-content: center; }
  .hd-sidebar-item-finalizar:hover { background: var(--fundo-c7eae6); }
  /* Botão "Filtros" (pedido do usuário, 2026-09-01) — mesmo tratamento
     azul vibrante do botão "Experiência completa": fica destacado sempre
     que algum filtro está aplicado (feedback visual mesmo com o dropdown
     fechado), não só enquanto aberto. */
  #hdBtnFiltros.ativo { background: var(--fundo-0067ff); color: var(--texto-fff); }
  /* Modal de detalhe do chamado (pedido do usuário, 2026-09-01) — antes
     era um painel fixo embaixo de "Minha fila"; como ela saiu do card
     central, o detalhe virou um modal por cima (preserva o contexto da
     lista por trás, ao contrário de navegar pra uma tela cheia). */
  /* :not(.oculto) em vez de "display:flex" direto na regra base — achado
     testando (2026-09-01): a regra base competia com ".oculto{display:
     none}" na mesma especificidade, e como .hd-modal-overlay vem DEPOIS
     no arquivo, ela vencia e o modal nunca ficava de fato escondido
     (mesma armadilha de sempre com toggle de display via classe). */
  .hd-modal-overlay { position: fixed; inset: 0; background: var(--fundo-rgba-0-0-0-0-4); z-index: 200; padding: 20px; }
  .hd-modal-overlay:not(.oculto) { display: flex; align-items: center; justify-content: center; }
  /* Único momento de animação do redesign (pedido do usuário: ousadia
     concentrada aqui, nada mais se move sozinho no painel) — dispara toda
     vez que o overlay sai de display:none, sem precisar de JS. */
  @keyframes hdModalIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
  .hd-modal-overlay:not(.oculto) .hd-modal { animation: hdModalIn .18s ease-out; }
  .hd-modal { background: var(--fundo-fff); border-radius: 10px; padding: 22px 24px; max-width: 520px; width: 100%; max-height: 85vh; overflow-y: auto; position: relative; font-size: 13px; }
  .hd-modal-close { position: absolute; top: 10px; right: 10px; background: none; color: var(--texto-8a93a6); font-size: 16px; padding: 4px 8px; margin: 0; }
  .hd-modal-close:hover { color: var(--texto-1c2430); background: var(--fundo-f4f5f7); }
  .hd-list-wrap { max-height: 50vh; overflow-y: auto; }
  .hd-item-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 8px; border-bottom: 1px solid var(--borda-eee); cursor: pointer; border-radius: 6px; }
  .hd-item-row:hover { background: var(--fundo-f4f5f7); }
  /* Linha que bateu com o alerta de palavras-chave (Fluxo de Compra,
     2026-09-04) — mesma cor/lógica de especificidade do destaque de
     duplicata (ver "tr.linha-duplicata" mais abaixo): precisa vir DEPOIS
     de ".hd-item-row:hover" (empate de especificidade, quem vem depois
     ganha) senão o laranja some ao passar o mouse. */
  .hd-item-row.fc-alerta-linha { background: var(--fundo-ffedd9); }
  .hd-item-row.selecionado { background: var(--fundo-e9edf5); }
  .hd-item-main { min-width: 0; }
  .hd-item-id { font-weight: 700; font-size: 13px; }
  .hd-item-solicitante { font-size: 14px; font-weight: 700; color: var(--texto-1c2430); margin: 2px 0; }
  .hd-email { font-size: 11px; font-weight: 400; color: var(--texto-8a93a6); }
  /* Fluxo de Compra: e-mail (solicitante/gerente) um pouco maior que o
     padrão do Helpdesk — pedido do usuário, 2026-09-10, escopado a
     #cardFluxoCompra pra não mudar a fonte no Helpdesk também. */
  #cardFluxoCompra .hd-email { font-size: 13px; }
  .hd-item-desc { font-size: 13px; color: var(--texto-555); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }
  /* Descrição completa (preferência pessoal, ver hdGetDescricaoCompleta) —
     Tipo/Subtipo/Local viram etiquetas pra não disputar espaço com o texto
     da descrição, que fica em destaque e sem corte. */
  .hd-tags { display: flex; gap: 6px; margin: 4px 0; flex-wrap: wrap; }
  .hd-tag { background: var(--fundo-e9edf5); color: var(--texto-00284d); font-size: 12px; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
  .hd-item-desc-completa { font-size: 13px; color: var(--texto-1c2430); line-height: 1.5; margin-top: 2px; }
  .hd-item-meta { font-size: 11px; color: var(--texto-8a93a6); }
  .hd-item-actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; row-gap: 6px; }
  /* Linha compacta da fila do Painel do Atendente (2026-10-08, mockup
     aprovado pelo dono): 2 linhas em vez de 4. Escopada em
     .hd-item-compacta porque ".hd-item-row" é compartilhada com Triagem,
     Fluxo de Compra e busca de Patrimônio, que continuam como estavam.
     Topo = #ID · nome · e-mail · "Criado em" (à direita); base = assunto à
     esquerda e etiquetas/ações à direita. */
  .hd-item-row.hd-item-compacta { flex-direction: column; justify-content: flex-start; align-items: stretch; gap: 3px; }
  .hd-item-compacta .hd-item-topo { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
  .hd-item-compacta .hd-item-id { flex: 0 0 auto; }
  .hd-item-compacta .hd-item-solicitante { margin: 0; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* E-mail ao lado do nome, menor e cinza; é o que trunca (reticências)
     antes de a data ser empurrada. */
  .hd-item-compacta .hd-item-email { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hd-item-compacta .hd-item-criado { margin-left: auto; white-space: nowrap; flex: 0 0 auto; }
  .hd-item-compacta .hd-item-base { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-width: 0; }
  .hd-item-compacta .hd-item-base .hd-item-main { flex: 1 1 auto; }
  /* Janela estreita: a data cai para a linha de baixo do topo em vez de
     sobrepor texto. */
  @media (max-width: 700px) {
    .hd-item-compacta .hd-item-topo { flex-wrap: wrap; row-gap: 2px; }
    .hd-item-compacta .hd-item-criado { margin-left: 0; flex-basis: 100%; }
  }
  /* Fundo neutro por padrão (pedido do usuário, 2026-09-01: filtro de
     Status trouxe outros status pra "Fila de chamados", que agora mostra
     o status como etiqueta em vez do botão "Iniciar Atendimento" quando
     não é 'Aberto') — .minha (verde) continua sobrescrevendo. */
  .hd-pill { padding: 3px 9px; border-radius: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; background: var(--fundo-e2e5eb); color: var(--texto-555); }
  .hd-pill.minha { background: var(--fundo-ddf3f1); color: var(--texto-0b6e6b); }
  button.hd-acao { margin: 0; border: none; padding: 6px 12px; border-radius: 6px; font-size: 12px; cursor: pointer; font-weight: 600; }
  button.hd-acao.iniciar { background: var(--fundo-0e8f8b); color: var(--texto-fff); }
  button.hd-acao.finalizar { background: var(--fundo-b25a1e); color: var(--texto-fff); }
  button.hd-acao:disabled { opacity: .5; cursor: not-allowed; }
  /* Fila de tarefas em segundo plano (ver filaEnfileirar): selo no item + toast. */
  .hd-selo-wrap { display: inline-flex; align-items: center; gap: 6px; }
  .hd-selo { padding: 3px 9px; border-radius: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; }
  .hd-selo.sync { background: var(--fundo-fff4d6); color: var(--texto-8a6100); }
  .hd-selo.erro { background: var(--fundo-fde8e8); color: var(--texto-a12626); }
  .hd-selo-wrap button { margin: 0; border: none; padding: 3px 8px; border-radius: 6px; font-size: 11px; cursor: pointer; font-weight: 600; background: var(--fundo-e2e5eb); color: var(--texto-333); }
  #toastContainer { position: fixed; right: 16px; bottom: 16px; z-index: 9999; display: flex; flex-direction: column; gap: 8px; max-width: 360px; }
  .toast { padding: 10px 14px; border-radius: 8px; font-size: 13px; background: var(--fundo-2b3245); color: var(--texto-fff); box-shadow: 0 4px 14px var(--sombra-rgba-0-0-0-0-25); }
  .toast.erro { background: var(--fundo-a12626); }
  .toast.aviso { background: var(--fundo-8a6100); }
  /* Conteúdo do modal de detalhe do chamado (ver #hdDetailPanelBody,
     dentro de .hd-modal) — antes vivia num painel fixo (.hd-detail-panel,
     removida 2026-09-01 junto com a mudança pro modal). */
  .hd-dp-row { margin-bottom: 6px; }
  .hd-dp-label { color: var(--cor-texto-mudo); font-size: 11px; font-family: var(--fonte-corpo); }
  /* Campos relacionados numa linha só (pedido do usuário, 2026-09-17):
     Produto/UD/Centro de Custo, Ramal/Local e Tipo/Subtipo, no modal de
     detalhe do chamado — menos scroll pra ver o mesmo conteúdo. */
  .hd-dp-group { display: flex; gap: 18px; margin-bottom: 6px; }
  .hd-dp-group .hd-dp-row { flex: 1; min-width: 0; margin-bottom: 0; }
  .hd-historico-header { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--cor-texto-mudo); margin-bottom: 8px; }
  .hd-link-btn { background: none; border: none; color: var(--texto-0067ff); font-size: 12px; cursor: pointer; font-weight: 600; padding: 2px 4px; }
  .hd-link-btn:hover { text-decoration: underline; }
  /* Botão outline (pedido do usuário: menos peso visual pra ação que não
     é a principal do card) — "Falar no Teams" e "Ver histórico" usam essa
     classe no lugar do preenchido sólido que tinham antes. */
  .hd-btn-outline { background: transparent; color: var(--cor-acento-texto); border: 0.5px solid var(--cor-borda); border-radius: 6px; padding: 6px 12px; font-weight: 500; font-size: 13px; cursor: pointer; }
  .hd-btn-outline:hover { border-color: var(--cor-acento); background: var(--cor-acento-fundo); }
  .hd-historico-lista { display: flex; flex-direction: column; gap: 8px; }
  .hd-historico-subtitulo { color: var(--cor-texto-mudo); font-size: 11px; margin: 8px 0 6px; }
  .hd-historico-item { background: var(--fundo-f4f6fb); border: 1px solid var(--cor-borda); border-radius: 8px; padding: 8px 10px; font-size: 12px; }
  .hd-historico-item .hd-h-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
  .hd-historico-item .hd-h-id { font-weight: 700; }
  .hd-historico-item .hd-h-status { color: var(--texto-8a93a6); font-size: 11px; white-space: nowrap; }
  .hd-historico-item .hd-h-meta { color: var(--texto-8a93a6); font-size: 11px; margin: 3px 0; }
  .hd-historico-item .hd-h-desc { color: var(--texto-555); }
  /* Ficha de equipamentos do solicitante (2026-10-08, ver hdCarregarEquipamentos). */
  details.hd-equip { margin: 10px 0 6px; border-top: 1px solid var(--borda-eee); padding-top: 8px; }
  details.hd-equip > summary { cursor: pointer; font-weight: 600; font-size: 13px; }
  .hd-equip-corpo { margin-top: 8px; }
  .hd-equip-aviso { background: var(--fundo-fff4d6); color: var(--texto-8a6100); border-radius: 6px; padding: 5px 9px; font-size: 12px; margin-bottom: 8px; }
  .hd-equip-tipo { color: var(--cor-texto-mudo); font-size: 11px; margin: 8px 0 4px; }
  .hd-equip-item { background: var(--fundo-f4f6fb); border: 1px solid var(--cor-borda); border-radius: 8px; padding: 7px 10px; font-size: 12px; margin-bottom: 6px; }
  .hd-equip-desc { font-weight: 700; }
  .hd-equip-meta { color: var(--texto-666); font-size: 11px; margin-top: 3px; }
  .hd-equip-status { display: inline-block; background: var(--fundo-e2e5eb); color: var(--texto-555); border-radius: 6px; padding: 1px 7px; font-size: 10px; font-weight: 600; margin-left: 4px; }
  #hdFiltroPalavras.ativo { border-color: var(--borda-0067ff); box-shadow: 0 0 0 1px var(--sombra-0067ff); }
  /* Filtros estruturados (Tipo/Subtipo/Local) — pedido do usuário,
     2026-09-01: colaboradores acostumados com o painel "Filtros" do SGP
     nativo sentiam falta de filtrar por Subtipo direto na fila, sem
     precisar digitar palavra por palavra. Server-side seria uma consulta
     nova por combinação; como os dados da fila já vêm todos do mês
     selecionado, filtra em cima do que já foi carregado (client-side). */
  .hd-filtros-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
  .hd-filtros-bar select, .hd-filtros-bar input { width: auto; min-width: 0; max-width: 100%; margin-top: 0; flex: 1 1 130px; }
  .hd-filtros-bar select.ativo, .hd-filtros-bar input.ativo { border-color: var(--borda-0067ff); box-shadow: 0 0 0 1px var(--sombra-0067ff); }
  .hd-filtros-bar button { margin-top: 0; flex: 0 0 auto; }
  /* "Experiência completa" (pedido do usuário, 2026-09-01: nova
     visualização em tabela como OPÇÃO ativável, sem substituir os cards —
     "não vamos perder a atual"; movida pro submenu Configurações em
     2026-09-01, junto com Falar no Teams/Histórico — ver
     hdChkExperienciaCompleta). Tabela reaproveita table/th/td padrão do
     app; container próprio com rolagem horizontal (nunca deixa a tabela
     "estourar" o card, mesmo com muitas colunas numa janela estreita). */
  .hd-tabela-wrap { overflow-x: auto; }
  .hd-tabela { font-size: 13px; }
  .hd-tabela th, .hd-tabela td { padding: 8px 10px; white-space: nowrap; }
  .hd-tabela td.hd-tabela-desc { white-space: normal; max-width: 320px; overflow: hidden; text-overflow: ellipsis; }
  .hd-tabela tr { cursor: pointer; }
  .hd-tabela tr.selecionado td { background: var(--fundo-e9edf5); }
  .hd-tabela td.hd-tabela-acao { white-space: nowrap; }

  /* Painel da Equipe (TV) — porte de sgp-helpdesk/painel-equipe.html. */
  .tv-kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 10px; }
  /* Accent border (pedido do usuário, 2026-09-19) — reforça a cor que a
     barrinha de baixo (.tv-kpi-bar > div) já usa por status, em vez de
     inventar uma cor nova: mesma informação, só visível antes de ler o
     número. transparent por padrão pra nunca deslocar o cartão quando a
     cor é definida inline (ver as 4 instâncias abaixo). */
  .tv-kpi-card { background: var(--fundo-fafbfc); border: 1px solid var(--borda-e2e5eb); border-top: 3px solid transparent; border-radius: 8px; padding: 10px 14px; }
  .tv-kpi-label { font-size: 13px; color: var(--texto-555); margin-bottom: 2px; }
  .tv-kpi-value { font-size: 32px; font-weight: 700; line-height: 1; color: var(--texto-1c2430); }
  .tv-kpi-bar { height: 4px; border-radius: 4px; margin-top: 6px; background: var(--fundo-e2e5eb); }
  .tv-kpi-bar > div { height: 100%; border-radius: 4px; width: 0%; }
  .tv-row2 { display: grid; grid-template-columns: 1fr 1.3fr; gap: 14px; margin-top: 14px; }
  .tv-col { background: var(--fundo-fafbfc); border: 1px solid var(--borda-e2e5eb); border-radius: 8px; padding: 12px 14px; }
  .tv-col h4 { margin: 0 0 10px; font-size: 13px; font-weight: 500; color: var(--cor-texto-2); }
  .tv-chart-wrap { margin-top: 10px; border-top: 1px solid var(--borda-e2e5eb); padding-top: 10px; }
  .tv-chart-title { font-size: 12px; color: var(--cor-texto-mudo); margin-bottom: 8px; }
  .tv-pie-body { display: flex; align-items: center; gap: 14px; }
  .tv-pie-legend { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--texto-555); max-height: 110px; overflow-y: auto; }
  .tv-pie-legend-item { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
  .tv-pie-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
  .tv-suggest-item { padding: 8px 0; border-bottom: 1px solid var(--borda-eee); font-size: 14px; }
  .tv-suggest-item:last-child { border-bottom: none; }
  .tv-suggest-item .tv-no-owner { color: var(--texto-b25a1e); font-weight: 600; }
  .tv-list-table { width: 100%; border-collapse: collapse; font-size: 14px; }
  .tv-list-table th, .tv-list-table td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--borda-eee); }
  .tv-list-table th { color: var(--cor-texto-mudo); font-weight: 500; font-size: 12px; }
  .tv-list-table tr.crit td:first-child { border-left: 3px solid var(--borda-b02a2a); border-radius: 0; }
  .tv-list-table tr.warn td:first-child { border-left: 3px solid var(--borda-e0a800); border-radius: 0; }
  .tv-pill { padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; }
  .tv-pill.crit { background: var(--fundo-fdecea); color: var(--texto-b02a2a); }
  .tv-pill.warn { background: var(--fundo-fff3d6); color: var(--texto-8a5a00); }
  .tv-map-row { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
  .tv-map-row input { flex: 1; margin-top: 0; }
  .tv-map-row button { margin: 0; flex: 0 0 auto; }
  /* Mapeamento de UD (pedido do usuário, 2026-09-02) — mesmo padrão
     visual do .tv-map-row (linha de 2 campos + botão remover). */
  .hd-ud-row { display: flex; gap: 8px; margin-top: 8px; align-items: center; }
  .hd-ud-row input { flex: 1; margin-top: 0; }
  .hd-ud-row input.hd-ud-codigo { flex: 0 0 70px; text-transform: uppercase; }
  .hd-ud-row button { margin: 0; flex: 0 0 auto; }

  /* Helpdesk — Gestão (pedido do usuário, 2026-09-05, redesenhado 2026-09-06
     depois de validar protótipo): lista simples de atendentes (nome + total
     + selo de nível predominante), detalhe completo num modal ao clicar
     (reaproveita .hd-modal-overlay/.hd-modal já existentes — mesma lição já
     aprendida sobre display/oculto), e um bloco "Visão do time" acima com
     métricas agregadas. Reaproveita .tv-kpi-row/.tv-kpi-card pros KPIs do
     topo (sem redefinir). */
  .hdg-eyebrow { font-size: 12px; font-weight: 500; color: var(--cor-texto-mudo); margin-bottom: 8px; }
  .hdg-trend { font-size: 12px; margin-top: 6px; font-weight: 600; }
  .hdg-trend.up { color: var(--texto-0e8f8b); }
  .hdg-trend.down { color: var(--texto-b02a2a); }
  .hdg-trend.neutro { color: var(--texto-8a93a6); }

  .hdg-insight-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 14px; }
  .hdg-panel { background: var(--fundo-fafbfc); border: 1px solid var(--borda-e2e5eb); border-radius: 8px; padding: 12px 14px; }
  .hdg-panel h4 { margin: 0 0 2px; font-size: 13px; }

  .hdg-bar-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
  .hdg-bar-row .quem { width: 96px; flex: 0 0 auto; font-size: 12.5px; color: var(--texto-555); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hdg-bar-row .trilha { flex: 1; height: 8px; border-radius: 4px; background: var(--fundo-e2e5eb); overflow: hidden; }
  .hdg-bar-row .trilha > div { height: 100%; border-radius: 4px; background: var(--fundo-0067ff); }
  .hdg-bar-row .pct { width: 36px; flex: 0 0 auto; text-align: right; font-size: 12.5px; font-weight: 600; }

  .hdg-heatmap { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 8px; }
  .hdg-heatmap .celula { border-radius: 6px; padding: 8px 4px 6px; text-align: center; background: var(--fundo-eef0f3); }
  .hdg-heatmap .celula .dia { font-size: 10px; font-weight: 500; color: var(--cor-texto-mudo); }
  .hdg-heatmap .celula .qtd { font-size: 14px; font-weight: 700; margin-top: 3px; color: var(--texto-1c2430); }
  .hdg-heatmap .celula.pico { background: var(--fundo-0067ff); }
  .hdg-heatmap .celula.pico .dia, .hdg-heatmap .celula.pico .qtd { color: var(--texto-fff); }

  .hdg-toplist { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
  .hdg-toplist .linha { display: flex; align-items: center; gap: 8px; font-size: 13px; }
  .hdg-toplist .linha .txt { flex: 1; min-width: 0; }
  .hdg-toplist .linha .txt b { font-weight: 600; }
  .hdg-toplist .linha .txt span { color: var(--texto-8a93a6); font-size: 12px; }
  .hdg-toplist .linha .qtd { font-weight: 700; }

  .hdg-coverage-bar { height: 10px; border-radius: 5px; background: var(--fundo-d8dde5); overflow: hidden; margin: 10px 0 6px; }
  .hdg-coverage-bar > div { height: 100%; background: var(--fundo-0067ff); }
  .hdg-coverage-legend { display: flex; justify-content: space-between; font-size: 12px; color: var(--texto-555); }

  .hdg-roster { background: var(--fundo-fafbfc); border: 1px solid var(--borda-e2e5eb); border-radius: 8px; overflow: hidden; }
  .hdg-roster-row {
    display: grid; grid-template-columns: 1fr auto auto auto; align-items: center; gap: 14px;
    padding: 12px 14px; border-bottom: 1px solid var(--borda-e2e5eb); cursor: pointer;
    background: none; border-left: 3px solid transparent; width: 100%; text-align: left; font: inherit; color: inherit;
  }
  .hdg-roster-row:last-child { border-bottom: none; }
  .hdg-roster-row:hover { background: var(--fundo-eef0f3); border-left-color: var(--borda-0067ff); }
  .hdg-roster-row .hdg-nome { font-weight: 600; font-size: 14px; }
  .hdg-roster-row .hdg-total { font-size: 13px; color: var(--texto-555); white-space: nowrap; }
  .hdg-roster-row .hdg-total b { color: var(--texto-1c2430); font-size: 15px; }
  .hdg-pill { font-size: 11.5px; font-weight: 700; padding: 3px 10px; border-radius: 6px; white-space: nowrap; color: var(--texto-fff); }
  .hdg-chev { color: var(--texto-8a93a6); font-size: 15px; }

  .hdg-stat5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px; }
  .hdg-stat5 .tile { background: var(--fundo-fafbfc); border: 1px solid var(--borda-e2e5eb); border-radius: 8px; padding: 8px 4px; text-align: center; }
  .hdg-stat5 .tile .lbl { font-size: 11px; color: var(--cor-texto-mudo); }
  .hdg-stat5 .tile .val { font-size: 18px; font-weight: 700; margin-top: 3px; }

  .hdg-peso-row { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
  .hdg-peso-row .ponto { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
  .hdg-peso-row .nome { width: 92px; flex: 0 0 auto; font-size: 13px; }
  .hdg-peso-row .trilha { flex: 1; height: 9px; border-radius: 5px; background: var(--fundo-e2e5eb); overflow: hidden; }
  .hdg-peso-row .trilha > div { height: 100%; }
  .hdg-peso-row .qtd { width: 26px; flex: 0 0 auto; text-align: right; font-weight: 700; font-size: 13px; }

  .hdg-desempenho-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
  .hdg-desempenho-card { border-radius: 8px; padding: 12px; border: 1px solid var(--borda-e2e5eb); }
  .hdg-desempenho-card.melhor { background: var(--fundo-ddf3f1); border-color: var(--borda-c7eae6); }
  .hdg-desempenho-card.pior { background: var(--fundo-fdecea); border-color: var(--borda-f3c6c1); }
  .hdg-desempenho-card .lbl { font-size: 12px; font-weight: 500; }
  .hdg-desempenho-card.melhor .lbl { color: var(--texto-0e8f8b); }
  .hdg-desempenho-card.pior .lbl { color: var(--texto-b02a2a); }
  .hdg-desempenho-card .data { font-size: 14px; font-weight: 700; margin-top: 5px; }
  .hdg-desempenho-card .qtd { font-size: 12px; color: var(--texto-555); margin-top: 2px; }

  .hdg-tiposub { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 8px; }
  .hdg-tiposub th, .hdg-tiposub td { padding: 7px 4px; text-align: left; border-bottom: 1px solid var(--borda-eee); }
  .hdg-tiposub th { font-size: 12px; color: var(--cor-texto-mudo); font-weight: 500; }
  .hdg-tiposub td.qtd { text-align: right; font-weight: 700; }
  .hdg-tiposub tr:last-child td { border-bottom: none; }

  .hdg-config-secao h4 { margin: 14px 0 4px; }
  .hdg-config-secao h4:first-child { margin-top: 0; }
  .hdg-regra-row { display: flex; gap: 6px; margin-top: 8px; align-items: center; }
  .hdg-regra-row input, .hdg-regra-row select { margin-top: 0; }
  .hdg-regra-row select.hdg-regra-tipo { flex: 1.4; }
  .hdg-regra-row input.hdg-regra-subtipo { flex: 1; }
  .hdg-regra-row input.hdg-regra-palavras { flex: 1.6; }
  .hdg-regra-row select.hdg-regra-nivel { flex: 1; }
  .hdg-regra-row button { margin: 0; flex: 0 0 auto; padding: 4px 8px; }