/* Histórico WhatsApp. Régua de espaço: múltiplos de 4px; 16px entre blocos, 12px dentro do bloco,
   8px entre título e o que ele nomeia. Raio 8 (controle) e 12 (cartão). Sombra só na janelinha. */
:root {
  --fundo: #f4f5f2; --cartao: #fff; --texto: #1d211f; --sub: #66706b; --linha: #e2e5e1; --suave: #f7f8f6;
  --marca: #1f7a52; --marca-escura: #175c3e; --marca-suave: #eaf5ef; --minha: #dff3e8; --dele: #fff;
  --ok: #1f7a52; --ok-fundo: #e3f4ea; --atencao: #8a5a00; --atencao-fundo: #fff3d6;
  --erro: #a3261e; --erro-fundo: #fde6e3; --neutro: #4b5560; --neutro-fundo: #eceff1;
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e6: 24px; --e8: 32px;
  --largura: 1240px; --lateral: 340px; --vao: 16px; --quem: 64px;
  --mono: ui-monospace, "Cascadia Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--marca); }
h1 { font-size: 1.5rem; line-height: 1.2; letter-spacing: -.01em; margin: 0 0 var(--e4); }
h2 { font-size: 1rem; line-height: 1.3; margin: 0 0 var(--e3); }
p { margin: 0 0 var(--e3); }
p:last-child { margin-bottom: 0; }
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

/* Topo: a MESMA grade da página (03/11, Gu: "totalmente desalinhado", medido em medir.mjs).
   Coluna do conteúdo: marca · empresas · busca (a busca TERMINA onde termina a coluna do conteúdo).
   Coluna da lateral (340 px, à direita): resumo · quem (o "Sair" termina onde termina a página).
   O padding em % (e não 100vw) usa a mesma largura que o <main>: com barra de rolagem não desalinha. */
.topo { display: grid; align-items: center; column-gap: var(--vao);
  grid-template-columns: max-content minmax(0, 1fr) minmax(0, 320px) calc(var(--lateral) - var(--vao) - var(--quem)) var(--quem);
  grid-template-areas: "marca empresas busca resumo quem";
  padding: 10px max(var(--e4), calc((100% - var(--largura)) / 2 + var(--e4)));
  background: var(--cartao); border-bottom: 1px solid var(--linha); }
.marca { grid-area: marca; font-weight: 700; text-decoration: none; color: var(--texto); white-space: nowrap; }
.empresas-topo { grid-area: empresas; display: flex; gap: var(--e1); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.empresas-topo::-webkit-scrollbar { display: none; }
.empresas-topo a { padding: 6px 10px; border-radius: 8px; color: var(--sub); text-decoration: none; font-size: .9rem; white-space: nowrap; }
.empresas-topo a:hover { color: var(--texto); background: var(--suave); }
.empresas-topo a.atual { color: var(--marca); background: var(--marca-suave); font-weight: 600; }
.busca-topo { grid-area: busca; margin: 0; min-width: 0; }
.busca-topo input { width: 100%; padding: 7px 12px 7px 32px; font-size: .9rem; background: var(--suave) no-repeat 10px 50% / 14px
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366706b' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E"); }
.busca-topo input:focus { background-color: #fff; }
.resumo { grid-area: resumo; display: flex; align-items: center; gap: 6px; text-decoration: none; color: var(--sub); font-size: .8rem; white-space: nowrap; min-width: 0; }
.resumo > span { display: inline-flex; align-items: center; }
.resumo:hover > span:first-child { color: var(--texto); }
.resumo .alerta { color: var(--erro); background: var(--erro-fundo); font-weight: 600; padding: 2px 8px 2px 7px; border-radius: 999px; }
.resumo:hover .alerta { background: #fbd5d0; }
.quem { grid-area: quem; justify-self: end; display: flex; gap: 10px; align-items: center; color: var(--sub); font-size: .9rem; white-space: nowrap; }
.quem form { margin: 0; }
main { max-width: var(--largura); margin: 0 auto; padding: var(--e6) var(--e4) var(--e8); }
main.solo { max-width: 720px; padding-top: var(--e8); }

.migalhas { font-size: .85rem; color: var(--sub); margin-bottom: var(--e2); }
.migalhas a { color: var(--sub); }
.migalhas a:hover { color: var(--marca); }
.migalhas .sep { margin: 0 var(--e2); }

.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: 12px; padding: var(--e4); margin: 0 0 var(--e4); }
.cartao.destaque { border-color: var(--marca); background: var(--marca-suave); }
/* Caixa do link de conexão (Gu: "falta de espaçamento"): 12 px entre título, frase, link e botão. */
.cartao.destaque { display: grid; gap: var(--e3); justify-items: start; }
.cartao.destaque > * { margin: 0; }
.cartao.destaque > .linha { justify-self: stretch; }
.cartao.sem-padding { padding: 0; }
.grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--e4); margin-bottom: var(--e4); }
.grade > .cartao { margin: 0; }
.bloco { display: flex; flex-direction: column; gap: var(--e1); text-decoration: none; color: var(--texto); }
.bloco:hover { border-color: var(--marca); }
.sub { color: var(--sub); font-size: .88rem; margin: 0; }
.linha { display: flex; gap: var(--e2); align-items: center; flex-wrap: wrap; }
.linha input { flex: 1; min-width: 200px; }
.formulario { display: grid; gap: var(--e3); max-width: 520px; }
.formulario h2 { margin-bottom: 0; }
label { display: grid; gap: var(--e1); font-size: .88rem; color: var(--sub); }
input, textarea { font: inherit; padding: 9px 12px; border: 1px solid #cfd5d0; border-radius: 8px; background: #fff; color: var(--texto); }
input:focus, textarea:focus { outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave); }
input[readonly] { background: var(--suave); }
button { font: inherit; padding: 9px 16px; border: 0; border-radius: 8px; background: var(--marca); color: #fff; cursor: pointer; white-space: nowrap; }
button:hover { background: var(--marca-escura); }
button:disabled { opacity: .55; cursor: default; }
button.secundario { background: #fff; color: var(--marca); border: 1px solid var(--marca); padding: 8px 15px; }
button.secundario:hover { background: var(--marca-suave); }
button.link { background: none; color: var(--sub); padding: 0; }
button.link:hover { color: var(--marca); background: none; }
button.perigo { background: var(--erro); }
button.perigo:hover { background: #7f1d17; }

.selo { display: inline-block; font-size: .8rem; line-height: 1.4; padding: 2px 10px; border-radius: 999px; width: fit-content; white-space: nowrap; }
.selo-ok { color: var(--ok); background: var(--ok-fundo); }
.selo-atencao { color: var(--atencao); background: var(--atencao-fundo); }
.selo-erro { color: var(--erro); background: var(--erro-fundo); }
.selo-neutro { color: var(--neutro); background: var(--neutro-fundo); }
.aviso { padding: var(--e3) var(--e4); border-radius: 8px; margin: 0 0 var(--e4); }
.aviso-erro { background: var(--erro-fundo); color: var(--erro); }
.aviso-atencao { background: var(--atencao-fundo); color: var(--atencao); }
.aviso-ok { background: var(--ok-fundo); color: var(--ok); }
.aviso-neutro { background: var(--neutro-fundo); color: var(--neutro); }
/* Aviso do histórico (página do número): o texto diz o estado; a barrinha só aparece quando o
   servidor manda style="--progresso: 40%" (CSS não lê data-* como largura com segurança). */
.aviso-historico { display: grid; gap: 6px; }
.aviso-historico[style*="--progresso"]::after { content: ""; height: 4px; border-radius: 2px;
  background: linear-gradient(to right, currentColor var(--progresso), color-mix(in srgb, currentColor 20%, transparent) var(--progresso)); }
/* Na tabela da operação, embaixo da situação: texto curto na cor do estado, quebra em vez de cortar. */
.tabela td .hist { display: block; margin-top: 2px; font-size: .75rem; line-height: 1.3; white-space: normal; }
.hist-ok { color: var(--ok); } .hist-atencao { color: var(--atencao); } .hist-erro { color: var(--erro); } .hist-neutro { color: var(--sub); }

/* Lista solta (conversas, resultados da busca) e lista dentro de um cartão (sem moldura dobrada). */
.lista { list-style: none; margin: 0 0 var(--e4); padding: 0; background: var(--cartao); border: 1px solid var(--linha); border-radius: 12px; }
.lista li { padding: var(--e3) var(--e4); border-bottom: 1px solid var(--linha); display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--e2); row-gap: 2px; }
.lista li:last-child { border-bottom: 0; }
.lista li > .trecho { flex-basis: 100%; }
.lista li .selo { align-self: center; }
.lista a { text-decoration: none; font-weight: 600; }
.lista a:hover { text-decoration: underline; }
.cartao .lista { border: 0; border-radius: 0; margin: 0 calc(-1 * var(--e4)) calc(-1 * var(--e4)); }
.cartao:has(> .lista) { overflow: hidden; }
.cartao .lista li { border-top: 1px solid var(--linha); border-bottom: 0; }
.trecho { color: var(--sub); font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

.cabeca { display: flex; justify-content: space-between; gap: var(--e2) var(--e4); align-items: flex-start; flex-wrap: wrap; margin-bottom: var(--e4); }
.cabeca h1 { margin-bottom: var(--e1); }
.cabeca > h1:only-of-type { margin-bottom: 0; align-self: center; }
.cabeca .sub + p, .cabeca .sub + .sub { margin-top: var(--e2); }
.cabeca .dir { display: grid; justify-items: end; gap: var(--e2); text-align: right; }
.cabeca + p.sub { margin: calc(-1 * var(--e3)) 0 var(--e4); }
.rodape { margin-top: var(--e6); }
.centro { text-align: center; }
.topo-espaco { margin-top: var(--e4); }

/* Conversa: o mesmo desenho do WhatsApp, só que de leitura. */
.conversa { display: flex; flex-direction: column; gap: 6px; background: #ece6dd; padding: var(--e4); border-radius: 12px; }
.dia { align-self: center; font-size: .78rem; color: var(--sub); background: #fff; padding: 2px var(--e3); border-radius: 999px; margin: var(--e3) 0 var(--e1); }
.dia:first-child { margin-top: 0; }
.msg { max-width: 72%; padding: 6px 10px 4px; border-radius: 8px; background: var(--dele); box-shadow: 0 1px 0 rgba(0,0,0,.06); overflow-wrap: anywhere; align-self: flex-start; }
.msg.minha { align-self: flex-end; background: var(--minha); }
.msg .autor { font-size: .8rem; font-weight: 600; color: var(--marca); margin-bottom: 2px; }
.msg .texto { white-space: pre-wrap; }
.msg .meta { font-size: .72rem; color: var(--sub); text-align: right; margin-top: 2px; }
.msg .apagada { color: var(--erro); }
.msg img.imagem { max-width: 100%; max-height: 360px; border-radius: 6px; display: block; }
.msg img.figurinha { width: 140px; }
.msg video { max-width: 100%; max-height: 360px; border-radius: 6px; }
.msg audio { width: 280px; max-width: 100%; display: block; height: 40px; }
.msg .doc { display: inline-block; padding: var(--e1) 0; }
.midia-falta { font-size: .85rem; color: var(--sub); font-style: italic; }
.msg:target { outline: 2px solid var(--marca); }

/* Entrar */
.entrar { display: grid; gap: var(--e3); max-width: 380px; margin: 8vh auto 0; padding: var(--e6); }
.entrar h1 { margin-bottom: var(--e2); }
.entrar button { margin-top: var(--e1); padding-block: 11px; }

/* Página pública de conexão: o código é a peça principal (a pessoa está no celular). */
.conectar { padding: var(--e6); }
.conectar h1 { margin-bottom: var(--e1); }
.conectar h1 + .sub { margin-bottom: var(--e4); }
.conectar .duas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e4); margin: var(--e4) 0; }
.conectar .duas > section { border: 1px solid var(--linha); border-radius: 12px; padding: var(--e4); }
.conectar .duas > section:first-child { border-color: var(--marca); background: var(--marca-suave); }
.conectar .codigo { font: 700 1.9rem/1.2 var(--mono); letter-spacing: .12em; padding: var(--e3) 0; margin-top: var(--e3);
  text-align: center; background: #fff; border: 1px dashed var(--marca); border-radius: 8px; }
.conectar img { width: 240px; height: 240px; display: block; margin: var(--e2) auto 0; }
.conectar img[hidden], .conectar [hidden] { display: none; }
.conectar .codigo.fora { font: 500 .9rem/1.4 system-ui, sans-serif; letter-spacing: 0; color: var(--atencao); border-color: #e0b54a; padding: var(--e3); }
.conectar ol { padding-left: 1.2rem; margin: 0; display: grid; gap: var(--e1); }
.conectar #estado:empty { display: none; }
.conectar #estado { margin-bottom: var(--e3); }

/* 03/11: painel da empresa, tabela, janelinhas e lateral de Ativos/Inativos.
   Lateral à DIREITA (decisão do Gu; não mudar sem perguntar a ele). Título e ações da página ficam na
   faixa ACIMA das duas colunas, para a lateral e o primeiro cartão começarem na mesma altura. */
.faixa-titulo { display: flex; justify-content: space-between; align-items: center; gap: var(--e2) var(--e4); flex-wrap: wrap; margin-bottom: var(--e4); }
.faixa-titulo h1 { margin: 0; }
.faixa-titulo > div:first-child .sub { margin-top: var(--e1); }
.faixa-titulo .cabeca { flex: 1; margin: 0; align-items: center; }
.com-lateral { display: grid; grid-template-columns: minmax(0, 1fr) var(--lateral); gap: var(--vao); align-items: start; }
.principal > :first-child { margin-top: 0; }
.principal { min-width: 0; }
.lateral { position: sticky; top: var(--e4); display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  max-height: calc(100vh - var(--e8)); overflow: auto; padding: 0; }
.lateral::before { content: "Números da empresa"; grid-column: 1 / -1; padding: var(--e3) var(--e4);
  border-bottom: 1px solid var(--linha); font-size: .75rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sub); }
.lateral .coluna { padding: var(--e3) var(--e4) var(--e4); min-width: 0; }
.lateral .coluna + .coluna { border-left: 1px solid var(--linha); }
.lateral h2 { font-size: .88rem; display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--e3); }
.lateral h2 .sub { font-size: .75rem; font-weight: 600; background: var(--neutro-fundo); color: var(--neutro); border-radius: 999px; padding: 0 8px; }
.lateral ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3); }
.lateral li { display: grid; gap: 1px; font-size: .88rem; line-height: 1.3; min-width: 0; }
.lateral li.sub { font-style: italic; font-size: .82rem; }
.lateral li a { text-decoration: none; color: var(--texto); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral li a:hover { color: var(--marca); }
.lateral li.atual { background: var(--marca-suave); border-radius: 8px; padding: 6px 8px; margin: -6px -8px; }
.lateral li.atual a { color: var(--marca); }
.lateral li .sub { font-size: .76rem; padding-left: calc(.55rem + 6px); white-space: nowrap; }
.ponto { display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: 6px; flex: none; }
.ponto-ok { background: var(--ok); } .ponto-atencao { background: #d99a00; }
.ponto-erro { background: var(--erro); } .ponto-neutro { background: #9aa3ab; }

.kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--e4); margin-bottom: var(--e4); }
.kpi { background: var(--cartao); border: 1px solid var(--linha); border-radius: 12px; padding: var(--e3) var(--e4); display: grid; gap: var(--e1); align-content: start; }
.kpi .sub { font-size: .82rem; line-height: 1.3; }
.kpi strong { font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }

/* Gráfico: dia sem mensagem vira traço cinza (não barra verde de 1px). */
.grafico { width: 100%; height: auto; display: block; }
.grafico .barra { fill: var(--marca); opacity: .85; }
.grafico rect.barra[height="1"] { fill: var(--linha); opacity: 1; }
.grafico .rotulo-valor { font-size: 9px; font-weight: 600; fill: var(--texto); text-anchor: middle; }
.grafico .rotulo-dia { font-size: 8px; fill: var(--sub); text-anchor: middle; }

.tabela { width: 100%; border-collapse: collapse; table-layout: fixed; }
/* Colunas com largura definida (colgroup do server.js); contagem à direita, telefone à esquerda (é nome, não conta). */
.tabela col.c-nome { width: 26%; } .tabela col.c-telefone { width: 21%; } .tabela col.c-situacao { width: 19%; }
.tabela col.c-num { width: 13%; } .tabela col.c-quando { width: 15%; } .tabela col.c-acoes { width: 6%; }
.tabela-operacoes col.c-nome { width: 40%; } .tabela-operacoes col.c-num { width: 20%; }
.tabela th.num, .tabela td.num { text-align: right; }
.tabela td.acoes-linha { overflow: visible; text-align: right; padding: 6px var(--e2); vertical-align: middle; }
.tabela tr > th:last-child:has(.sr) { padding-inline: var(--e2); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Menu ⋯ de ações do número (tabela da operação e cabeçalho do número). Abre embaixo, alinhado à
   direita do ⋯, para dentro da tela. */
.menu-acoes { position: relative; display: inline-block; }
.menu-acoes > summary { list-style: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 8px;
  cursor: pointer; color: var(--sub); font-size: 1.2rem; line-height: 1; user-select: none; }
.menu-acoes > summary::-webkit-details-marker { display: none; }
.menu-acoes > summary:hover, .menu-acoes[open] > summary { background: var(--neutro-fundo); color: var(--texto); }
.menu-acoes .menu { position: absolute; right: 0; top: calc(100% + var(--e1)); z-index: 20; min-width: 200px; max-width: calc(100vw - 2 * var(--e3));
  display: grid; padding: var(--e1); background: var(--cartao); border: 1px solid var(--linha); border-radius: 12px;
  box-shadow: 0 8px 24px rgba(20, 30, 25, .14); text-align: left; }
.menu-acoes .menu a, .menu-acoes .menu button.item { display: block; width: 100%; padding: var(--e2) var(--e3); border-radius: 8px;
  color: var(--texto); text-decoration: none; font-size: .9rem; text-align: left; background: none; white-space: nowrap; }
.menu-acoes .menu form { margin: 0; }
.menu-acoes .menu a:hover, .menu-acoes .menu button.item:hover { background: var(--suave); color: var(--texto); }
.menu-acoes .menu a.perigo { color: var(--erro); border-top: 1px solid var(--linha); border-radius: 0 0 8px 8px; margin-top: var(--e1); }
.menu-acoes .menu a.perigo:hover { background: var(--erro-fundo); }

/* Números excluídos (operação): fechado por padrão, só uma linha. */
details.cartao.excluidos > summary { cursor: pointer; color: var(--sub); font-size: .88rem; font-weight: 600; }
details.cartao.excluidos[open] > summary { margin-bottom: var(--e3); }

/* Janela de excluir: a caixinha que apaga tudo tem cara de perigo. */
.janela label.marcar { display: flex; gap: var(--e2); align-items: flex-start; padding: var(--e3); border-radius: 8px;
  background: var(--erro-fundo); color: var(--texto); font-size: .9rem; cursor: pointer; }
.janela label.marcar input { width: 18px; height: 18px; margin: 2px 0 0; flex: none; accent-color: var(--erro); }
.tabela th { white-space: normal; }
.tabela th { text-align: left; font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; color: var(--sub); font-weight: 600;
  padding: var(--e3) var(--e4); border-bottom: 1px solid var(--linha); background: var(--suave); vertical-align: bottom; }
.tabela td { padding: var(--e3) var(--e4); border-bottom: 1px solid var(--linha); vertical-align: top; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.tabela td:first-child { white-space: normal; overflow-wrap: anywhere; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tr.clicavel { cursor: pointer; }
.tabela tr.clicavel:hover td { background: #f6faf7; }
.tabela a { text-decoration: none; }
.tabela td .sub { margin-top: 2px; }
.tabela .vazio { text-align: center; color: var(--sub); padding: var(--e8) var(--e4); white-space: normal; }
/* Tabela dentro de cartão com padding (Operações da empresa): encosta nas bordas do cartão. */
.cartao:not(.sem-padding) > .tabela { margin: 0 calc(-1 * var(--e4)); width: calc(100% + 2 * var(--e4)); }
.cartao:not(.sem-padding):has(> .tabela) { overflow-x: auto; }
.cartao > .tabela + .linha { margin-top: var(--e4); }

.janela { border: 0; border-radius: 12px; padding: var(--e6); width: min(480px, 92vw); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.janela::backdrop { background: rgba(20, 30, 25, .45); }
.janela .formulario { max-width: none; gap: var(--e4); }
.janela h2 { font-size: 1.1rem; }
.janela .acoes { justify-content: flex-end; margin-top: var(--e2); }
.janela .acoes .secundario { order: -1; }

/* A tabela vira lista quando a COLUNA fica estreita, não a tela: com a lateral ao lado, em 1024 px a
   coluna tem 636 px e 5 colunas não cabem (medido: título "CONVERSAS" passava da borda). */
.principal { container-type: inline-size; }
@container (max-width: 800px) {
  /* Números da operação: nome e situação em cima, o resto embaixo. */
    /* Em lista a tabela deixa de ser tabela: sem isto as larguras fixas do colgroup espremiam o nome
       (medido: "Tainara Suporte" com 41 px, uma letra por linha). */
    .cartao.sem-padding .tabela, .cartao.sem-padding .tabela tbody { display: block; width: 100%; }
    .cartao.sem-padding .tabela colgroup, .cartao.sem-padding .tabela thead { display: none; }
    .cartao.sem-padding .tabela tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--e3); row-gap: 2px;
      padding: var(--e3); border-bottom: 1px solid var(--linha); }
    .cartao.sem-padding .tabela tr:last-child { border-bottom: 0; }
    .cartao.sem-padding .tabela td { padding: 0; border: 0; white-space: normal; min-width: 0; text-align: left; overflow: visible; }
    .cartao.sem-padding .tabela td:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
    .cartao.sem-padding .tabela td:nth-child(3) { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; }
    .cartao.sem-padding .tabela td.acoes-linha { grid-column: 2; grid-row: 2 / span 3; justify-self: end; align-self: start; padding: 0; }
    .cartao.sem-padding .tabela td:nth-child(2),
    .cartao.sem-padding .tabela td:nth-child(4),
    .cartao.sem-padding .tabela td:nth-child(5) { grid-column: 1; font-size: .85rem; color: var(--sub); }
    .cartao.sem-padding .tabela td:nth-child(4)::before { content: "Conversas: "; }
    .cartao.sem-padding .tabela td:nth-child(5)::before { content: "Última mensagem: "; }
    .cartao.sem-padding .tabela td.vazio { grid-column: 1 / -1; grid-row: auto; padding: var(--e6) 0; color: var(--sub); }
    .cartao.sem-padding .tabela td.vazio::before { content: none; }
}
@container (max-width: 520px) {
  /* Operações da empresa: nome em cima, contagens numa linha embaixo. */
  .tabela-operacoes, .tabela-operacoes tbody { display: block; width: 100%; }
  .tabela-operacoes colgroup, .tabela-operacoes thead { display: none; }
  .tabela-operacoes tr { display: flex; flex-wrap: wrap; column-gap: var(--e3); row-gap: 2px; padding: var(--e3) var(--e4); border-bottom: 1px solid var(--linha); }
  .tabela-operacoes tr:last-child { border-bottom: 0; }
  .tabela.tabela-operacoes td { padding: 0; border: 0; text-align: left; font-size: .85rem; color: var(--sub); overflow: visible; }
  .tabela-operacoes td:first-child { flex-basis: 100%; font-size: 1rem; }
  /* Rótulo antes do número (CSS não faz plural: "1 números" ficava errado). */
  .tabela-operacoes td:nth-child(2)::before { content: "Números: "; }
  .tabela-operacoes td:nth-child(3)::before { content: "Conectados: "; }
  .tabela-operacoes td:nth-child(4)::before { content: "Mensagens em 7 dias: "; }
}

@media (max-width: 960px) {
  /* Sem lateral ao lado: a busca desce para a 2ª linha, no x do conteúdo e na largura toda. */
  .topo { grid-template-columns: max-content minmax(0, 1fr) auto auto; grid-template-areas: "marca empresas resumo quem" "busca busca busca busca"; row-gap: var(--e2); }
  .com-lateral { grid-template-columns: minmax(0, 1fr); }
  .lateral { position: static; max-height: none; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
}
@media (max-width: 640px) {
  .topo { padding: var(--e2) var(--e3); column-gap: var(--e3);
    grid-template-columns: max-content minmax(0, 1fr) auto; grid-template-areas: "marca resumo quem" "empresas empresas empresas" "busca busca busca"; }
  .resumo { justify-self: end; }
  .resumo > span:first-child:not(:only-child) { display: none; }
  /* No celular só o "Sair" (o nome é texto solto no HTML: some pelo tamanho da fonte). */
  .quem { padding-left: 0; border-left: 0; font-size: 0; gap: 0; }
  .quem button.link { font-size: .9rem; }
  .lateral.cartao { padding: 0; }
  .empresas-topo { margin: 0 calc(-1 * var(--e3)); padding: 0 var(--e3); }
  .empresas-topo a { padding: 6px 10px; }
  main { padding: var(--e4) var(--e3) var(--e6); }
  main.solo { padding-top: var(--e4); }
  h1 { font-size: 1.3rem; }
  .cartao { padding: var(--e3); }
  .cartao .lista { margin: 0 calc(-1 * var(--e3)) calc(-1 * var(--e3)); }
  .cartao .lista li, .lista li { padding: var(--e3); }
  .cartao:not(.sem-padding) > .tabela { margin: 0 calc(-1 * var(--e3)); width: calc(100% + 2 * var(--e3)); }
  .tabela th, .tabela td { padding: 10px var(--e3); }
  .cabeca .dir { justify-items: start; text-align: left; grid-auto-flow: column; align-items: center; }
  .cabeca > button { width: 100%; order: 3; }
  .linha input { min-width: 0; }
  .msg { max-width: 88%; }
  .kpi strong { font-size: 1.35rem; }
  .grafico .rotulo-dia { font-size: 13px; }
  .grafico .rotulo-valor { font-size: 14px; }
  /* Metade dos dias, sempre terminando em hoje (são 14 barras: as pares ficam). */
  .grafico g:nth-child(odd) .rotulo-dia { display: none; }
  .conectar { padding: var(--e4); }
  .conectar .duas { grid-template-columns: 1fr; }
  .janela { padding: var(--e4); }
  .janela .acoes button { flex: 1; }
}