/* ============================================================================
   FLUXXI — EVOLUÇÃO VISUAL (19/09/2026)
   ----------------------------------------------------------------------------
   Camada por cima de estilo.css + pele.css + celular.css. Não muda estrutura,
   ordem nem texto de tela: muda HIERARQUIA (o que se lê primeiro), LEGIBILIDADE
   no balcão (corpo um degrau maior onde estava pequeno), SUPERFÍCIES (cabeçalho
   com respiro, tabelas com zebra suave, pílulas iguais em toda tela) e o
   CELULAR (faixa de avisos numa linha, cabeçalho da conversa sem botão solto,
   alvos de toque de 44px). Cor, espaço e fonte só por token; os poucos valores
   novos moram no :root abaixo, com nome.

   O que motivou, tela por tela (prints de 19/09):
   · a faixa amarela de avisos tomava a largura inteira em TODA tela e um quarto
     da tela do celular; virou uma linha discreta com o botão "Ligar avisos";
   · cabeçalho de tela apertado: título e legenda colados, sem respiro;
   · cabeçalho de tabela a 9,5px e legendas a 11,5px: pequeno para quem lê em
     pé, com sol na tela;
   · cartão da fila: nome, situação e prévia com o mesmo peso;
   · no celular, "Assumir e responder" flutuava solto sobre a ficha.
   ========================================================================== */
:root{
  --ev-zebra: rgba(64,46,24,.028);
  --ev-divisor-chassi: rgba(255,255,255,.07);
  --ev-pilula-chassi: rgba(255,255,255,.06);
  --ev-previa: rgba(20,26,29,.82);
  --ev-foco: var(--carmim);
  --ev-caption: 13px;
  --ev-toque: 44px;
}

/* 1. A faixa de avisos: uma linha, discreta, com um botão que diz o que faz */
#faixa-avisos{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:7px 14px;margin:0 56px 14px 0;border-radius:10px;
  background:var(--ouro-suave);color:var(--ouro);box-shadow:inset 0 0 0 1px var(--ouro-borda);
  font-size:12.5px;font-weight:500;line-height:1.4}
#faixa-avisos span{flex:1 1 320px;min-width:0}
#faixa-avisos button{
  font:inherit;font-weight:600;cursor:pointer;border-radius:8px;padding:6px 12px;min-height:32px;
  border:1px solid var(--ouro-borda);background:var(--papel);color:var(--grafite)}
#faixa-avisos #bt-ligar-avisos{background:var(--tinta);color:var(--creme);border-color:var(--tinta)}
#faixa-avisos #bt-adiar-avisos{background:none;border-color:transparent;color:var(--ouro);text-decoration:underline;text-underline-offset:3px;padding:6px 8px}

/* 2. Cabeçalho de tela: título, legenda com respiro e um divisor no chassi */
.chapeu{align-items:flex-end;gap:8px 18px;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--ev-divisor-chassi)}
.chapeu h1{font-size:30px;line-height:1.05}
.chapeu p{font-size:var(--ev-caption);line-height:1.45;max-width:78ch;padding-bottom:3px}
.chapeu .direita{gap:10px;padding-bottom:3px}
.vivo{padding:4px 10px;border-radius:999px;background:var(--ev-pilula-chassi);font-size:11.5px;font-weight:600;letter-spacing:.02em}

/* 3. Quadros e seções: o mesmo respiro em toda tela */
.quadro-topo{padding:16px 20px;gap:12px 14px}
.quadro-topo h2{font-size:16.5px}
.quadro-topo p,.secao-topo p{font-size:var(--ev-caption);line-height:1.45}
.quadro-corpo{padding:18px 20px}
.secao-topo{margin-bottom:12px;flex-wrap:wrap;gap:6px 12px}
.secao-topo h2{font-size:20px}

/* 4. Tabelas: cabeçalho legível, zebra suave, números alinhados */
thead th{font-size:10.5px;letter-spacing:.14em;padding:12px 18px}
tbody td{padding:13px 18px;font-size:13.5px;font-variant-numeric:tabular-nums}
tbody tr:nth-child(even) td{background:var(--ev-zebra)}
tbody tr.clicavel:hover td{background:var(--papel2)}

/* 5. Botões: uma escala, e alvo de toque onde não tem mouse */
.bt{font-size:13px;padding:9px 15px;min-height:36px}
.bt.pequeno{font-size:12px;padding:6px 11px;min-height:30px}
.bt.icone{width:36px;min-width:36px;height:36px;padding:0;display:inline-grid;place-items:center}
@media (hover:none){.bt{min-height:var(--ev-toque)}.bt.pequeno{min-height:38px}}

/* 6. Pílulas: o mesmo desenho em toda tela (situação, dono, setor) */
.sit,.dono,.tag-setor{font-size:10.5px;letter-spacing:.06em;padding:3px 8px;border-radius:6px;line-height:1.35}

/* 7. O cartão da fila: nome primeiro, situação depois, prévia por último */
.item{padding:13px 18px 15px}
.nome{font-size:16px}
.item .l2{font-size:12.5px;margin-top:5px}
.previa{font-size:13.5px;margin-top:6px;color:var(--ev-previa)}
.grupo-fila{font-size:10.5px;letter-spacing:.16em}
.abas-fila button,.abas-fila [role=tab]{font-size:13.5px}
.abas-fila .n,.abas-fila small{font-size:12px}

/* 8. Indicadores: a legenda do número em corpo de leitura */
.kpi .r{font-size:12.5px}
.kpi .d{font-size:12.5px;line-height:1.5}
.par-num i{font-size:11.5px;line-height:1.4}

/* 9. Formulários: campo de 40px e rótulo em negrito pequeno */
.campo-texto{font-size:14px;padding:10px 12px;min-height:40px}
select.campo-texto{padding-right:30px}
.linha-form label,.filtros-clientes label,.campo label{font-size:12.5px;font-weight:600}
.filtros-clientes{gap:10px 12px;padding:12px 18px}

/* 10. Estados vazios e ajudas */
.vazio b{font-size:18px}
.vazio p{font-size:13.5px}
.ajuda{font-size:12.5px;line-height:1.5}

/* 11. Foco visível em tudo que se clica (teclado e leitor de tela) */
:focus-visible{outline:2px solid var(--ev-foco);outline-offset:3px}
.nav button:focus-visible{outline-color:var(--creme)}

/* 12. Barra lateral: item um degrau maior, grupos com mais ar */
.nav button{font-size:13.5px;padding:10px 12px}
.nav .grupo{margin:14px 11px 6px}
.rodape-caixa .olho{margin-bottom:2px}

/* 13. Cartões de resposta e campanha: título estável, ações alinhadas */
.cartoes{gap:16px}
.cartoes h3{font-size:16.5px;line-height:1.25;letter-spacing:-.02em}
.cartoes .acoes{display:flex;gap:8px;flex-wrap:wrap;align-items:center}

/* o seletor "ver a fila como" é discreto: um controle, não um formulário */
.vista-como select{min-height:32px;padding:5px 30px 5px 10px;font-size:12.5px}

/* 14. Celular */
@media (max-width:720px){
  #faixa-avisos{padding:8px 12px;font-size:12px;margin:0 0 10px}
  #faixa-avisos span{flex:1 1 220px}
  #faixa-avisos button{min-height:36px}
  .chapeu{gap:6px 12px;margin-bottom:12px;padding-bottom:10px}
  .chapeu h1{font-size:24px}
  .chapeu p{font-size:12.5px}
  .quadro-topo{padding:14px 16px}
  .quadro-corpo{padding:14px 16px}
  thead th{font-size:10px;padding:10px 12px}
  tbody td{padding:11px 12px;font-size:13px}
  /* o cabeçalho da conversa: ações numa linha que rola, e o botão principal em linha própria, inteiro */
  .ch-topo{gap:8px 10px}
  .ch-acoes{flex-basis:100%;margin-left:0;justify-content:flex-start;gap:6px}
  .ch-acoes .bt.forte{flex-basis:100%;order:9;margin-top:4px;min-height:var(--ev-toque)}
  .bt.pequeno{min-height:38px}
  .fila-atalhos .bt{min-height:var(--ev-toque)}
}

/* 15. Movimento reduzido: reduzir, nunca depender */
@media (prefers-reduced-motion:reduce){.bt,.item,.nav button{transition:none}}

/* ============================================================ elegância ===
   Além do conserto: acabamento editorial. Serifa no corte de display para o
   que é título (a Fraunces tem eixo óptico de 9 a 144), filete dourado curto
   sob os títulos de seção, nome de gente em serifa também nas tabelas, cartão
   clicável que sobe ao passar o mouse, marca de estado vazio desenhada, bolhas
   e pílulas com o mesmo raio. Nada muda de lugar; muda o quanto se sente cuidado.
   ======================================================================== */
:root{
  --ev-ouro-filete: var(--ouro);
  --ev-sombra-levita: 0 1px 2px rgba(40,30,18,.06), 0 10px 24px rgba(40,30,18,.12);
  --ev-tinta-bolha: var(--tinta2);
  --ev-halo-selecionado: inset 0 0 0 1px rgba(168,17,43,.10);
}

/* Títulos no corte de display: mais contraste de traço, menos peso */
.chapeu h1{font-variation-settings:"opsz" 96,"wght" 600;letter-spacing:-.03em}
.quadro-topo h2,.secao-topo h2,.fila-topo h2,.vazio b,.cartao header h3,.cartoes h3,.kpi .v{font-variation-settings:"opsz" 72,"wght" 600}
.nome,.ch-nome,.pessoa{font-variation-settings:"opsz" 20,"wght" 600}

/* Filete dourado curto sob o título de seção: o olho encontra o começo de cada bloco */
.secao-topo h2{position:relative;padding-bottom:8px}
.secao-topo h2::after{content:"";position:absolute;left:0;bottom:0;width:26px;height:2px;border-radius:2px;background:var(--ev-ouro-filete)}
.quadro-topo h2{position:relative;padding-left:12px}
.quadro-topo h2::before{content:"";position:absolute;left:0;top:.35em;bottom:.2em;width:3px;border-radius:3px;background:var(--ev-ouro-filete)}

/* Nome de gente em serifa nas tabelas e listas (é quem, não quanto) */
tbody td:first-child b,tbody td:first-child .pessoa{font-family:var(--serif);font-size:15px;letter-spacing:-.015em}
.pessoa{font-size:15px}

/* O que se clica, sobe; o que está aberto, tem halo */
.item,.pessoa-cartao,.cartoes>div,tbody tr.clicavel{transition:transform .14s ease,box-shadow .14s ease,background .14s ease}
.cartoes>div:hover{transform:translateY(-1px);box-shadow:var(--ev-sombra-levita)}
.item[aria-current=true]{box-shadow:var(--ev-halo-selecionado)}

/* Bolhas: mesmo raio, canto "de quem fala" mais fechado */
.bolha,.msg-interna{border-radius:14px}
.msg-interna.minha{border-bottom-right-radius:5px}
.msg-interna:not(.minha){border-bottom-left-radius:5px}

/* Estado vazio: uma marca desenhada em vez de uma régua cinza */
.vazio:before{
  content:"✦";width:auto;height:auto;margin:0 auto 14px;background:none;box-shadow:none;border-radius:0;
  font-family:var(--serif);font-size:22px;line-height:1;color:var(--ev-ouro-filete);opacity:.85}

/* Pílulas de situação: contorno fino e fundo leve, o mesmo em toda tela */
.sit{box-shadow:inset 0 0 0 1px currentColor;background:transparent;opacity:.9}
.sit.ok{color:var(--menta)}
.sit.ruim{color:var(--ouro)}
.sit.grave{color:var(--carmim)}
.sit.neutro{color:var(--aco);opacity:.8}

/* Barra lateral: a marca com mais presença e o item ativo com o acento da casa */
.wordmark{letter-spacing:.34em}
.nav button[aria-current=page]{box-shadow:inset 0 0 0 1px var(--ev-divisor-chassi)}

/* Gavetas: cabeçalho com o mesmo filete e rodapé com botões alinhados à direita */
.cartao header h3{font-size:20px;letter-spacing:-.025em}
.cartao footer{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

/* Movimento reduzido: sem subir, sem deslizar */
@media (prefers-reduced-motion:reduce){.cartoes>div:hover{transform:none}.item,.pessoa-cartao,.cartoes>div,tbody tr.clicavel{transition:none}}

/* ⭐⭐ 22/09/2026 — DE ONDE VEIO A LISTA E QUEM FICOU DE FORA ("Ver campanha").
   Áudio do Fabiano: "na agenda tem sete avaliações, na lista da campanha só um".
   A linha de origem fica logo abaixo da previsão, no mesmo corpo; a conta que
   não fecha ganha a cor de alarme. A aba "Ficaram de fora" reusa o bloco por
   motivo de "por que não receberam" (.camp-motivo) e só acrescenta a lista. */
.camp-origem{margin:6px 0 0;font-size:12.5px;line-height:1.5;color:var(--grafite)}
.camp-origem span{display:block;color:var(--aco2);font-size:12px}
.camp-origem.nao-fecha{color:var(--carmim);font-weight:600}
.camp-agora.esperando_abrir,.camp-agora.almoco,.camp-agora.fechada{color:var(--ouro)}
.camp-fora{padding:14px 22px 10px}
.camp-fora > .ajuda{margin:0 0 4px}
.camp-fora details{margin-top:6px}
.camp-fora summary{cursor:pointer;font-size:12px;color:var(--aco)}
.camp-fora-lista{list-style:none;margin:6px 0 0;padding:0}
.camp-fora-lista li{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:7px 0;border-top:1px solid var(--linha)}
.camp-fora-lista li > span{min-width:0;font-size:13px;line-height:1.45}
.camp-fora-lista small{color:var(--aco2)}
.camp-fora-lista em{display:block;font-style:normal;font-size:12px;color:var(--aco)}
.camp-fora-lista .bt{flex:none}
.disparo-motivos{margin:8px 0 0;padding:0;list-style:none;font-size:12.5px;color:var(--grafite)}
.disparo-motivos li{padding:2px 0}
.disparo-motivos li b{font-variant-numeric:tabular-nums}