/* ===========================================================================
   Atendimento do Laboratório Interpartner: a folha de estilo.
   ---------------------------------------------------------------------------
   Refeita em 19/09/2026 (pedido do Luiz: "mais bonito, sem cara de IA").

   O que saiu: o fundo escuro com brilhos, a serifa de exibição, os cartões com
   sombra grande e canto de 26px, os rótulos em caixa alta espaçada, os pontos no
   meio do texto. Eram os tiques de painel gerado, e não diziam nada sobre um
   laboratório.

   O que entrou: uma ficha de laboratório. Superfície branca sobre um fundo
   cinza-esverdeado frio (a bancada de inox, não o granito escuro), bordas de um
   pixel em vez de sombra, o verde da marca só onde ele trabalha (ação principal,
   estado ativo, a nossa fala), e UMA tampa colorida na borda de cada conversa da
   fila, como a tampa do tubo de amostra: verde em dia, âmbar passou da meta,
   vermelho passou do dobro. Montserrat (a fonte do site) nos títulos, botões e
   menu; Roboto no texto e nos números. Duas famílias, com papéis diferentes.

   Cor, espaço, raio e fonte só por variável. Nada de cor solta no meio do arquivo.
   Contraste conferido nos pares que importam: texto pequeno sobre branco 5,4:1;
   texto do menu sobre o verde escuro 9:1; vermelho de alerta sobre o claro 6,3:1.
   =========================================================================== */

@font-face { font-family: 'Montserrat'; src: url('/fontes/montserrat.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Roboto'; src: url('/fontes/roboto.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }
@font-face { font-family: 'Roboto Mono'; src: url('/fontes/robotomono.woff2') format('woff2'); font-weight: 100 700; font-display: swap; }

:root {
  /* a marca (site da Interpartner) */
  --verde: #008d45;
  --verde-tinta: #06703a;       /* texto sobre branco: 5,2:1 */
  --verde-vidro: #e4f3ea;       /* a nossa fala, o estado ativo */
  --verde-borda: #bfe0cc;
  --verde-claro: #61ce70;
  --verde-escuro: #052e19;

  /* a bancada */
  --fundo: #f2f5f3;
  --papel: #ffffff;
  --papel2: #f6f8f7;
  --linha: #dbe2de;
  --linha2: #eaefec;
  --tinta: #17231d;
  --aco: #5b6b62;               /* texto de apoio: 5,4:1 */
  --aco2: #8c9992;

  /* o trilho do menu */
  --rail: #0e2f1f;
  --rail-2: #0a2417;
  --rail-txt: #d9e7de;
  --rail-txt2: #93b09f;
  --rail-fio: rgba(255, 255, 255, .09);
  --rail-ativo: rgba(255, 255, 255, .10);

  /* estados */
  --ambar: #8a5a06;
  --ambar-claro: #fbf1dd;
  --ambar-borda: #edd6a4;
  --perigo: #b42318;
  --perigo-claro: #fcebe9;
  --perigo-borda: #f1c3bd;
  --agua: #1d5b86;
  --agua-claro: #e7f0f7;

  /* forma */
  --r-sm: 6px; --r-md: 10px; --r-lg: 14px;
  --r-xs: 4px; --r-xl: 14px;
  --sombra-gaveta: 0 24px 60px -24px rgba(9, 20, 14, .5), 0 2px 6px rgba(9, 20, 14, .10);
  --gap: 16px;
  --toque: 44px;
  --fonte-titulo: Montserrat, Roboto, system-ui, sans-serif;
  --fonte-texto: Roboto, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonte-mono: 'Roboto Mono', ui-monospace, monospace;
  --largura-menu: 248px;
  --altura-abas: 60px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-tema=claro]) {
    --fundo: #0f1613; --papel: #161f1a; --papel2: #1b2620;
    --linha: #2a3730; --linha2: #222d27;
    --tinta: #e7eee9; --aco: #a3b1a9; --aco2: #7b8a82;
    --verde-vidro: #173324; --verde-borda: #235c3a; --verde-tinta: #7dd8a2;
    --rail: #0a1f14; --rail-2: #08180f;
    --ambar-claro: #2a2011; --ambar: #e8c079; --ambar-borda: #4a3a1a;
    --perigo-claro: #2d1a17; --perigo: #f3a79d; --perigo-borda: #4d2a25;
    --agua-claro: #13242e; --agua: #93c5e6;
    --sombra-gaveta: 0 24px 60px -24px rgba(0, 0, 0, .9), 0 2px 6px rgba(0, 0, 0, .4);
  }
}

/* ----------------------------------------------------------------- base --- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; color: var(--tinta); background: var(--fundo);
  font: 14px/1.5 var(--fonte-texto);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, button, .bt, .selo, th, .rot, .abas button, kbd { font-family: var(--fonte-titulo); }
h1 { font-size: 22px; font-weight: 700; margin: 0; letter-spacing: -.01em; line-height: 1.2; }
h2 { font-size: 17px; font-weight: 700; margin: 26px 0 10px; letter-spacing: -.005em; }
h3 { font-size: 13.5px; font-weight: 700; margin: 18px 0 8px; color: var(--aco); }
p { margin: 0 0 8px; text-wrap: pretty; }
a { color: var(--verde-tinta); }
button, input, textarea, select { font: inherit; color: inherit; }
code { font-family: var(--fonte-mono); font-size: .92em; background: var(--papel2); border-radius: var(--r-xs); padding: 1px 5px; }
.num, .val, .quando, .rodape, .numero, td.n, .n { font-variant-numeric: tabular-nums; }
.rot { font-size: 12.5px; font-weight: 600; color: var(--aco); }
.sub { color: var(--aco); font-size: 13.5px; }
.dica { color: var(--aco); font-size: 12.5px; }
.dica.erro { color: var(--perigo); }

::selection { background: var(--verde-vidro); color: var(--tinta); }
:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; border-radius: var(--r-xs); }
* { scrollbar-width: thin; scrollbar-color: var(--linha) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--linha); border-radius: 20px; border: 3px solid transparent; background-clip: content-box; }
[hidden] { display: none !important; }

/* --------------------------------------------------------------- chassi --- */
/* `--altura-visivel` só existe com o teclado do celular aberto (js/teclado.js). */
#chassi { display: grid; grid-template-columns: var(--largura-menu) 1fr; height: var(--altura-visivel, 100dvh); }
main { overflow: hidden; display: grid; grid-template-rows: auto auto minmax(0, 1fr); min-width: 0; }
main > .banda-aberta { grid-row: 1; }
main > .cabeca-vista { grid-row: 2; display: none; }
main > .cabeca-vista.ativa { display: flex; }
main > .vista, main > .rolagem { grid-row: 3; }
.banda-aberta {
  margin: 14px 22px 0; padding: 10px 14px; border-radius: var(--r-md);
  background: var(--ambar-claro); border: 1px solid var(--ambar-borda); color: var(--ambar); font-size: 13px;
}

/* o trilho do menu */
.coluna {
  background: var(--rail); color: var(--rail-txt); display: flex; flex-direction: column;
  padding: 14px 12px 12px; gap: 10px; border-right: 1px solid var(--rail-fio); min-height: 0;
}
.marca { display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 0 6px; }
.marca img { width: 96px; height: auto; }
.marca span { font: 600 12px/1 var(--fonte-titulo); color: var(--rail-txt2); letter-spacing: .02em; }
.linha-estado {
  font-size: 12px; background: rgba(255, 255, 255, .05); border: 1px solid var(--rail-fio);
  border-radius: var(--r-md); padding: 8px 10px; line-height: 1.3;
}
.linha-estado .topo { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.linha-estado .meta { color: var(--rail-txt2); font-size: 11.5px; margin-top: 3px; }
.bolinha { width: 8px; height: 8px; border-radius: 50%; background: var(--aco2); flex: none; }
.bolinha.viva { background: var(--verde-claro); box-shadow: 0 0 0 3px rgba(97, 206, 112, .18); }
.bolinha.morta { background: #f0907f; box-shadow: 0 0 0 3px rgba(240, 144, 127, .18); }

#menu { display: flex; flex-direction: column; gap: 2px; flex: 1; overflow-y: auto; min-height: 0; padding-right: 2px; }
.grupo-menu { font: 600 10.5px/1 var(--fonte-titulo); color: var(--rail-txt2); padding: 10px 10px 4px; }
.grupo-menu:first-child { padding-top: 0; }
#menu button, #menu a {
  background: none; border: 0; text-align: left; padding: 6px 10px; border-radius: var(--r-sm);
  color: var(--rail-txt); cursor: pointer; text-decoration: none;
  display: flex; align-items: flex-start; gap: 10px; position: relative;
}
#menu .i { width: 18px; height: 18px; flex: none; opacity: .8; margin-top: 1px; }
#menu .rotulo { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
#menu .nome { font: 600 12.5px/1.25 var(--fonte-titulo); }
#menu .explica { font-size: 11px; line-height: 1.25; color: var(--rail-txt2); }
#menu button:hover, #menu a:hover { background: rgba(255, 255, 255, .06); }
#menu button.atual, #menu a.atual { background: var(--rail-ativo); }
#menu button.atual::before, #menu a.atual::before {
  content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--verde-claro);
}
#menu button.atual .i, #menu a.atual .i { opacity: 1; color: var(--verde-claro); }
#menu b {
  background: var(--verde-claro); color: var(--verde-escuro); border-radius: 20px; padding: 1px 7px;
  font: 700 11px/1.6 var(--fonte-titulo); font-variant-numeric: tabular-nums; align-self: flex-start;
}
#menu b:empty { display: none; }

.eu { border-top: 1px solid var(--rail-fio); padding: 10px 8px 0; font-size: 12.5px; }
.eu .quem-sou { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.eu #euNome { font-weight: 600; }
.eu .papel { font: 600 10.5px/1 var(--fonte-titulo); color: var(--rail-txt2); border: 1px solid var(--rail-fio); border-radius: 20px; padding: 4px 8px; }
.eu .acoes { display: flex; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.eu a, .eu .lisa { color: var(--rail-txt2); font-size: 12px; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.eu a:hover, .eu .lisa:hover { color: var(--rail-txt); }
.eu .versao { margin-top: 6px; color: var(--rail-txt2); font: 600 11px var(--fonte-titulo); opacity: .8; }

/* Tela baixa (notebook): as frases do menu saem e ficam no title; os 12 itens cabem. */
@media (min-width: 901px) and (max-height: 840px) {
  #menu .explica { display: none; }
  #menu button, #menu a { padding: 7px 10px; }
}

/* as abas do celular: só aparecem abaixo de 900px */
.abas-celular { display: none; }

/* ------------------------------------------------------ cabeça da tela --- */
.cabeca-vista {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 18px 22px 12px;
}
.cabeca-vista .titulo { min-width: 0; }
.cabeca-vista .explica { color: var(--aco); font-size: 13.5px; margin: 3px 0 0; }
.cabeca-vista .acoes-da-tela { display: flex; gap: 8px; flex: none; align-items: center; }
.cabeca-vista .hoje { color: var(--aco); font-size: 13px; }
.cabeca-vista .hoje::first-letter { text-transform: uppercase; }

/* --------------------------------------------------------------- vistas --- */
.vista { display: none; height: 100%; min-height: 0; }
.vista.ativa { display: grid; }
.vista[data-vista=atendimento].ativa {
  grid-template-columns: minmax(300px, 352px) minmax(400px, 1fr);
  gap: 14px; padding: 0 22px 18px;
}
.vista[data-vista=atendimento].ativa.com-copiloto {
  grid-template-columns: minmax(280px, 320px) minmax(380px, 1fr) minmax(290px, 340px);
}
@media (min-width: 1560px) {
  .vista[data-vista=atendimento].ativa,
  .vista[data-vista=atendimento].ativa.com-copiloto { grid-template-columns: 340px minmax(520px, 1fr) 360px; }
}
.rolagem { overflow: auto; padding: 4px 22px 72px; }
.rolagem > h2 { color: var(--tinta); }
.rolagem > h1 { margin: 12px 0 6px; }   /* só nas páginas sem cabeça própria (403, avisos) */
.rolagem > h1 + p.sub, .rolagem > p.sub { max-width: 78ch; margin-bottom: 16px; }

/* a superfície: todo painel de conteúdo é uma ficha branca com borda de um pixel */
.painel-fila, .painel-conversa, .painel-copiloto, .cartao-numero, .rolagem table, .barras, .agente, .cartao-lista, .cartao-linha, .card, .ajuste, .ficha-branca {
  background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-md);
}

/* estado vazio */
.vazio {
  color: var(--aco); padding: 30px 20px; text-align: center; font-size: 13.5px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.vazio::before { content: ''; width: 36px; height: 36px; border-radius: 50%; border: 2px dashed var(--linha); }
.rolagem > .vazio { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-md); }

/* ----------------------------------------------------------------- fila --- */
.painel-fila { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.cabeca-cartao { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 14px 16px 0; }
.cabeca-cartao h2 { margin: 0; font-size: 15px; }
.cabeca-cartao .conta { color: var(--aco2); font-size: 12px; }
.busca { padding: 10px 16px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.busca input[type=search], .cartao-lista input[type=search] {
  flex: 1 1 100%; min-width: 0; width: 100%; height: 38px;
  padding: 0 12px 0 34px; border: 1px solid var(--linha); border-radius: var(--r-sm);
  color: var(--tinta); font-size: 13.5px; background: var(--papel2) no-repeat 11px 50% / 15px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238c9992' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E");
}
.busca input[type=search]:focus, .cartao-lista input[type=search]:focus { border-color: var(--verde); outline: none; background-color: var(--papel); }
.busca input::placeholder { color: var(--aco2); }
.caixinha {
  font-size: 12.5px; color: var(--aco); cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 7px; min-height: 30px;
  padding: 0 10px 0 8px; border: 1px solid var(--linha); border-radius: 20px; background: var(--papel);
}
.caixinha:hover { border-color: var(--aco2); color: var(--tinta); }
.caixinha input[type=checkbox], .caixinha input[type=radio] { width: 14px; height: 14px; margin: 0; accent-color: var(--verde); flex: none; cursor: pointer; }
.caixinha:has(input:checked) { background: var(--verde-vidro); border-color: var(--verde-borda); color: var(--verde-tinta); font-weight: 600; }

/* as abas da fila: um seletor para o trabalho de agora, e a linha de apoio embaixo */
.abas { padding: 10px 16px 10px; }
.abas-trabalho { display: flex; flex-wrap: wrap; gap: 2px; background: var(--papel2); border: 1px solid var(--linha); border-radius: var(--r-sm); padding: 3px; }
.abas-trabalho button {
  flex: 1 1 auto; min-width: 0; background: none; border: 0; border-radius: 4px; padding: 7px 8px; cursor: pointer;
  color: var(--aco); font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
}
.abas-trabalho button:hover { color: var(--tinta); }
.abas-trabalho button.atual { background: var(--papel); color: var(--tinta); box-shadow: 0 1px 2px rgba(9, 20, 14, .10); }
.abas-trabalho button span { background: var(--verde); color: #fff; border-radius: 20px; padding: 0 6px; font-size: 10.5px; line-height: 1.6; }
.abas-trabalho button:not(.atual) span { background: var(--aco2); }
.abas-apoio { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.abas-apoio i { display: none; }
.abas-apoio button {
  background: var(--papel); border: 1px solid var(--linha); border-radius: 20px; padding: 0 10px; min-height: 26px;
  cursor: pointer; color: var(--aco); font-size: 11.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px;
}
.abas-apoio button:hover { color: var(--tinta); border-color: var(--aco2); }
.abas-apoio button.atual { background: var(--verde-vidro); border-color: var(--verde-borda); color: var(--verde-tinta); }
.abas-apoio button span { font-size: 10.5px; font-weight: 700; background: var(--papel2); border-radius: 20px; padding: 1px 6px; color: var(--aco); }
.abas-apoio button.atual span { background: var(--verde-borda); color: var(--verde-tinta); }

.lista { overflow: auto; flex: 1; border-top: 1px solid var(--linha2); }
.grupo { color: var(--aco2); font: 600 11.5px var(--fonte-titulo); padding: 12px 16px 4px; }

/* a conversa na fila: a TAMPA colorida na borda diz o estado */
.cartao {
  display: grid; grid-template-columns: 36px 1fr; gap: 12px; width: 100%; text-align: left;
  background: none; border: 0; border-bottom: 1px solid var(--linha2); padding: 12px 16px 12px 18px; cursor: pointer; position: relative;
}
.cartao::before { content: ''; position: absolute; left: 6px; top: 12px; bottom: 12px; width: 4px; border-radius: 2px; background: var(--linha); }
.cartao.estado-ok::before { background: var(--verde); }
.cartao.estado-passou::before { background: var(--ambar); }
.cartao.estado-estourou::before { background: var(--perigo); }
.cartao.estado-ia::before { background: var(--verde-borda); }
.cartao:hover { background: var(--papel2); }
.cartao.aberto { background: var(--verde-vidro); }
.retrato {
  width: 36px; height: 36px; border-radius: 50%; background: var(--verde-escuro); color: #dff0e4;
  display: grid; place-items: center; font: 700 12px var(--fonte-titulo); border: 0; letter-spacing: .02em;
}
.cartao.aberto .retrato { background: var(--verde); color: #fff; }
.retrato .i { width: 18px; height: 18px; }
.cartao .corpo { min-width: 0; }
.cartao .topo { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.cartao .nome { font: 600 14px var(--fonte-titulo); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartao .quando { font-size: 12px; color: var(--aco2); white-space: nowrap; }
.cartao .previa { color: var(--aco); font-size: 13px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cartao .selos { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; align-items: center; }

.selo {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 20px; background: var(--linha2); color: var(--aco); border: 1px solid transparent; white-space: nowrap;
}
.selo.verde { background: var(--verde-vidro); color: var(--verde-tinta); border-color: var(--verde-borda); }
.selo.ambar { background: var(--ambar-claro); color: var(--ambar); border-color: var(--ambar-borda); }
.selo.perigo { background: var(--perigo-claro); color: var(--perigo); border-color: var(--perigo-borda); }
.selo.agua { background: var(--agua-claro); color: var(--agua); }

/* a régua da espera */
.regua { margin-top: 7px; display: block; }
.regua .trilho { height: 4px; border-radius: 2px; background: var(--linha2); position: relative; overflow: hidden; display: block; }
.regua .nivel { position: absolute; inset: 0 auto 0 0; background: var(--verde); border-radius: 2px; }
.regua .nivel.passou { background: var(--ambar); }
.regua .nivel.estourou { background: var(--perigo); }
.regua .texto { font-size: 12px; color: var(--aco); margin-top: 4px; display: block; }
.regua .texto.estourou { color: var(--perigo); font-weight: 600; }
.regua.respondida .texto { color: var(--verde-tinta); }
.atalhos-teclado { padding: 8px 16px; color: var(--aco2); font-size: 11.5px; border-top: 1px solid var(--linha2); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
kbd { font: 600 10.5px var(--fonte-mono); background: var(--papel2); border: 1px solid var(--linha); border-radius: 4px; padding: 1px 5px; color: var(--aco); }

/* ------------------------------------------------------------- conversa --- */
.painel-conversa { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.painel-conversa .nada { margin: auto; text-align: center; color: var(--aco); display: grid; gap: 4px; justify-items: center; padding: 28px; max-width: 420px; }
.painel-conversa .nada img { opacity: .35; margin-bottom: 10px; }
.painel-conversa .nada strong { font: 700 16px var(--fonte-titulo); color: var(--tinta); }
.painel-conversa .nada p { font-size: 13.5px; }
.cabeca { padding: 10px 14px; border-bottom: 1px solid var(--linha2); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.cabeca .quem { display: flex; gap: 10px; align-items: center; min-width: 0; }
.cabeca .retrato { width: 36px; height: 36px; font-size: 12px; }
.cabeca h2 { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.2; }
.cabeca .telefone { color: var(--aco); font-size: 12.5px; }
.cabeca .botoes { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.cabeca .botoes .bt { padding: 7px 12px; font-size: 12.5px; }
.com-copiloto .cabeca [data-acao=copilotoColuna] { display: none; }
.cabeca .voltar { display: none; padding: 7px 10px; }
.cabeca .voltar .i { width: 18px; height: 18px; }

.tempo {
  overflow: auto; padding: 14px 16px 10px; flex: 1; display: flex; flex-direction: column; gap: 8px; background: var(--papel2);
}
.tempo > :first-child { margin-top: auto; }
.tempo .antes-de-tudo { align-self: center; font-size: 12.5px; margin-bottom: 4px; }
.dia { align-self: center; font: 600 11px var(--fonte-titulo); color: var(--aco); background: var(--papel); border: 1px solid var(--linha); border-radius: 20px; padding: 2px 10px; margin: 8px 0 2px; }
.bolha {
  max-width: min(600px, 82%); padding: 9px 13px 7px; border-radius: var(--r-md); background: var(--papel);
  border: 1px solid var(--linha); overflow-wrap: anywhere; font-size: 14px; line-height: 1.5;
}
.bolha.cliente { align-self: flex-start; border-bottom-left-radius: var(--r-xs); }
.bolha.agente { align-self: flex-end; background: var(--verde-vidro); border-color: var(--verde-borda); border-bottom-right-radius: var(--r-xs); }
.bolha.atendente { align-self: flex-end; background: var(--verde-escuro); border-color: var(--verde-escuro); color: #fff; border-bottom-right-radius: var(--r-xs); }
.bolha.sistema { align-self: center; background: var(--linha2); border-color: transparent; font-size: 13px; }
.bolha.falhou { background: var(--perigo-claro); color: var(--perigo); border-color: var(--perigo-borda); }
.bolha .texto, .nota .texto { display: block; white-space: pre-wrap; }
.bolha .rodape { font-size: 11px; margin-top: 4px; display: flex; gap: 8px; align-items: center; color: var(--aco2); }
.bolha.atendente .rodape { color: #cfe3d6; }
.bolha.falhou .rodape { color: var(--perigo); }
.nota { align-self: center; max-width: 84%; border: 1px dashed var(--ambar-borda); background: var(--ambar-claro); color: var(--ambar); border-radius: var(--r-md); padding: 8px 12px; font-size: 13px; }
.nota .rodape { font-size: 11px; opacity: .85; margin-top: 3px; }
.evento { align-self: center; font-size: 11.5px; color: var(--aco); text-align: center; max-width: 80%; }

.estado-conversa {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 6px 16px; border-top: 1px solid var(--linha2);
  background: var(--papel); font-size: 12.5px; color: var(--aco);
}
.estado-conversa .forte { font-weight: 600; color: var(--tinta); }
.estado-conversa .depois { margin-left: auto; }
.estado-conversa .lisa { color: var(--verde-tinta); font-weight: 600; }
.estado-conversa .alerta { color: var(--perigo); font-weight: 600; cursor: help; }
.estado-conversa.atrasada { background: var(--perigo-claro); color: var(--perigo); border-top-color: var(--perigo-borda); }
.estado-conversa.atrasada .forte, .estado-conversa.atrasada .lisa { color: var(--perigo); }
.estado-conversa.calma { background: var(--papel); }
.fitas { padding: 0 16px; }
.fita { margin: 10px 0 0; padding: 9px 12px; border-radius: var(--r-sm); background: var(--ambar-claro); border: 1px solid var(--ambar-borda); color: var(--ambar); font-size: 13px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.fita.verde { background: var(--verde-vidro); border-color: var(--verde-borda); color: var(--verde-tinta); }
.fita.perigo { background: var(--perigo-claro); border-color: var(--perigo-borda); color: var(--perigo); }
.fita .lisa { color: inherit; font-weight: 700; }

/* mídia dentro da bolha */
.bolha.com-midia { max-width: min(420px, 82%); }
.midia { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.midia-audio { width: 100%; max-width: 340px; height: 40px; }
.midia-foto { display: block; border-radius: var(--r-sm); overflow: hidden; line-height: 0; }
.midia-foto img, .midia-video { display: block; width: 100%; max-height: 320px; object-fit: cover; border-radius: var(--r-sm); background: var(--linha2); }
.midia.figurinha .midia-foto img { max-height: 132px; width: auto; object-fit: contain; background: none; }
.midia-arquivo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; background: var(--papel2); border: 1px solid var(--linha); border-radius: var(--r-sm); padding: 9px 11px; }
.midia-arquivo:hover { border-color: var(--verde); }
.midia-arquivo .i { width: 22px; height: 22px; flex: none; color: var(--verde-tinta); }
.midia-arquivo strong { display: block; font-size: 13px; word-break: break-word; }
.midia-rot { font-size: 11px; color: var(--aco2); }
.midia-rot.aviso { color: var(--ambar); }
.midia-espera { font-size: 12px; color: var(--aco2); font-style: italic; }
.midia-leitura { border-left: 3px solid var(--verde); background: var(--verde-vidro); border-radius: 0 var(--r-xs) var(--r-xs) 0; padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; }
.midia-leitura .rot { color: var(--verde-tinta); font-size: 11px; }
.midia-leitura .texto { font-size: 13px; }
.bolha.atendente .midia-leitura { background: rgba(255, 255, 255, .12); border-left-color: #fff; }
.bolha.atendente .midia-leitura .rot { color: #cfe3d6; }

/* escrever */
.escrever { border-top: 1px solid var(--linha2); padding: 8px 14px 12px; background: var(--papel); }
.escrever .ferramentas { display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; }
.escrever .ferramentas .bt { padding: 5px 9px; font-size: 12px; }
.caixa-escrever { display: flex; align-items: flex-end; gap: 6px; background: var(--papel2); border: 1px solid var(--linha); border-radius: var(--r-md); padding: 4px 6px 4px 4px; }
.caixa-escrever:focus-within { border-color: var(--verde); background: var(--papel); }
.caixa-escrever.travada { opacity: .7; }
.caixa-escrever textarea { flex: 1; min-width: 0; border: 0; background: none; padding: 8px; resize: none; height: 40px; min-height: 40px; max-height: 170px; line-height: 1.5; color: var(--tinta); }
.caixa-escrever textarea:focus { outline: none; }
.botoes-arquivo { display: flex; gap: 2px; flex: none; padding-bottom: 2px; }
button.so-icone { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: none; color: var(--aco); cursor: pointer; padding: 0; }
button.so-icone .i { width: 20px; height: 20px; }
button.so-icone:hover:not(:disabled) { background: var(--verde-vidro); color: var(--verde-tinta); }
button.so-icone:disabled { opacity: .35; cursor: not-allowed; }
button.so-icone.gravando { background: var(--perigo); color: #fff; }
.gravando { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 9px 12px; background: var(--perigo-claro); border: 1px solid var(--perigo-borda); border-radius: var(--r-sm); color: var(--perigo); font-size: 13px; }
.gravando .bt { margin-left: auto; }
.gravando .lisa { color: var(--perigo); }
.ponto-gravando { width: 10px; height: 10px; border-radius: 50%; background: var(--perigo); flex: none; animation: pulsar 1.1s ease-in-out infinite; }
@keyframes pulsar { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
.bt.enviar-na-caixa { flex: none; align-self: flex-end; padding: 8px 16px; }
.escrever .atalhos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.sem-sinal { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; background: var(--ambar-claro); border: 1px solid var(--ambar-borda); border-left: 3px solid var(--ambar); color: var(--ambar); border-radius: var(--r-sm); padding: 8px 12px; font-size: 13px; }
.sem-sinal span { flex: 1; min-width: 180px; }

/* -------------------------------------------------------------- botões --- */
button.bt, a.bt {
  background: var(--verde); color: #fff; border: 1px solid var(--verde); border-radius: var(--r-sm); padding: 8px 14px;
  cursor: pointer; font: 600 13px var(--fonte-titulo); text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; line-height: 1.3;
}
button.bt:hover, a.bt:hover { background: var(--verde-tinta); border-color: var(--verde-tinta); }
button.bt:active { transform: translateY(1px); }
button.bt:disabled { background: var(--linha); border-color: var(--linha); color: var(--aco2); cursor: not-allowed; }
button.bt .i, a.bt .i { width: 15px; height: 15px; flex: none; }
button.bt.claro, a.bt.claro { background: var(--papel); color: var(--tinta); border-color: var(--linha); }
button.bt.claro:hover, a.bt.claro:hover { background: var(--papel2); border-color: var(--aco2); }
button.bt.perigo { background: var(--perigo); border-color: var(--perigo); }
button.bt.fantasma { background: none; color: var(--aco); border-color: transparent; font-weight: 600; padding: 6px 8px; }
button.bt.fantasma:hover { background: var(--papel2); color: var(--tinta); }
button.lisa { background: none; border: 0; color: var(--verde-tinta); cursor: pointer; padding: 2px; text-decoration: underline; text-underline-offset: 2px; font-size: inherit; }
.so-icone-texto { padding: 6px 10px; font-size: 12.5px; }
.so-icone-texto .i { width: 16px; height: 16px; }

/* ------------------------------------------------------------- copiloto --- */
.painel-copiloto { overflow: auto; padding: 14px 16px 40px; }
.copiloto-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.copiloto-cabeca .rot { font-size: 13px; font-weight: 700; color: var(--tinta); }
.copiloto-cabeca .lisa { text-decoration: none; font-size: 18px; color: var(--aco2); }
.nota-copiloto { display: flex; gap: 14px; align-items: center; margin-top: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--papel2); border: 1px solid var(--linha); }
.nota-copiloto .numero { font: 700 36px/1 var(--fonte-titulo); letter-spacing: -.02em; }
.nota-copiloto .numero i { font: 500 13px var(--fonte-texto); color: var(--aco2); }
.nota-copiloto strong { display: block; font: 700 12.5px var(--fonte-titulo); }
.nota-copiloto p { margin: 3px 0 0; font-size: 13px; color: var(--aco); }
.nota-copiloto.bom { background: var(--verde-vidro); border-color: var(--verde-borda); color: var(--verde-tinta); }
.nota-copiloto.atencao { background: var(--ambar-claro); border-color: var(--ambar-borda); color: var(--ambar); }
.nota-copiloto.ruim { background: var(--perigo-claro); border-color: var(--perigo-borda); color: var(--perigo); }
.nota-copiloto.bom p, .nota-copiloto.atencao p, .nota-copiloto.ruim p { color: inherit; }
.nota-copiloto.lendo .numero, .nota-copiloto.vazia .numero { color: var(--aco2); }
.nota-copiloto.atualizando { opacity: .7; }
.painel-copiloto h3 { margin: 18px 0 8px; padding-top: 12px; border-top: 1px solid var(--linha2); }
.pontos { display: flex; flex-direction: column; gap: 6px; }
.ponto { padding: 9px 11px; border-radius: var(--r-sm); background: var(--papel2); border: 1px solid var(--linha); border-left: 3px solid var(--linha); font-size: 13px; }
.ponto.ruim { border-left-color: var(--perigo); }
.ponto.bom { border-left-color: var(--verde); color: var(--aco); }
.ponto strong { font-weight: 600; }
.ponto .melhorar { margin-top: 4px; color: var(--aco); }
.passo { padding: 10px 12px; border-radius: var(--r-sm); background: var(--verde-vidro); border: 1px solid var(--verde-borda); color: var(--verde-tinta); font-size: 13px; }
.acoes-copiloto { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.acoes-copiloto .bt { flex: 1; }
.sugestoes { display: flex; flex-direction: column; gap: 6px; }
.sugestao { padding: 10px 11px; border-radius: var(--r-sm); background: var(--papel2); border: 1px solid var(--linha); border-left: 3px solid var(--verde-claro); font-size: 13px; }
.sugestao strong { display: block; font: 600 11.5px var(--fonte-titulo); color: var(--aco); }
.sugestao .texto { margin: 4px 0 8px; }
.sugestao .bt { padding: 5px 10px; font-size: 12px; }
dl.medido { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13px; }
dl.medido dt { color: var(--aco); }
dl.medido dd { margin: 0; text-align: right; font-weight: 500; overflow-wrap: anywhere; }
.copiloto-leu { align-items: flex-start; margin-bottom: 12px; }
.copiloto-leu .pedido { margin-top: 6px; font-weight: 400; color: var(--tinta); font-style: italic; }

/* ---------------------------------------------------------------- ficha --- */
.painel-ficha, .ficha-completa { overflow: auto; }
.painel-ficha h3, .ficha-completa h3 { margin: 18px 0 8px; padding-top: 12px; border-top: 1px solid var(--linha2); }
.painel-ficha h3:first-child, .ficha-completa h3:first-child { padding-top: 0; border-top: 0; margin-top: 0; }
.ficha-topo .val { font: 700 32px/1 var(--fonte-titulo); margin: 6px 0 4px; color: var(--verde-tinta); }
.ficha-topo .val i { font: 500 13px var(--fonte-texto); color: var(--aco); }
.ficha-topo p { color: var(--aco); font-size: 13.5px; }
.painel-ficha dl, .ficha-completa dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 13.5px; }
.painel-ficha dt, .ficha-completa dt { color: var(--aco); }
.painel-ficha dd, .ficha-completa dd { margin: 0; overflow-wrap: anywhere; text-align: right; font-weight: 500; }
.painel-ficha table, .ficha-completa table { border: 1px solid var(--linha2); border-radius: var(--r-sm); }
.cartao-claro { background: var(--papel2); border: 1px solid var(--linha); border-radius: var(--r-sm); padding: 10px 12px; font-size: 13px; }
.cartao-claro + .cartao-claro { margin-top: 6px; }
.cartao-claro.falha { background: var(--perigo-claro); border-color: var(--perigo-borda); color: var(--perigo); }
.cartao-claro.no-ar { background: var(--verde-vidro); border-color: var(--verde-borda); color: var(--verde-tinta); font-weight: 600; }
.lista-cartoes > .cartao-claro { margin-bottom: 6px; }

/* -------------------------------------------------------------- painéis --- */
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.cartao-numero, .card { padding: 14px 16px 14px; display: flex; flex-direction: column; cursor: default; }
.cartao-numero[data-indicador] { cursor: pointer; }
.cartao-numero[data-indicador]:hover { border-color: var(--verde); }
.cartao-numero .val, .card .val { order: -1; font: 700 32px/1 var(--fonte-titulo); letter-spacing: -.02em; margin: 0 0 8px; display: flex; align-items: baseline; gap: 3px; }
.cartao-numero .val i, .card .val i { font: 600 13px var(--fonte-texto); color: var(--aco); }
.cartao-numero.principal { grid-column: span 2; background: var(--verde-vidro); border-color: var(--verde-borda); }
.cartao-numero.principal .val { font-size: 44px; color: var(--verde-tinta); }
.cartao-numero.principal.alerta { background: var(--perigo-claro); border-color: var(--perigo-borda); }
.cartao-numero.principal.alerta .val { color: var(--perigo); }
.cartao-numero .rot, .card .rot { color: var(--tinta); font-size: 13px; font-weight: 600; }
.cartao-numero .nota-pe, .card .nota { color: var(--aco); font-size: 12.5px; margin-top: 4px; }
.cartao-numero .toque-explica { font-size: 11px; color: var(--aco2); margin-top: 6px; }
.cartao-numero[data-indicador]:hover .toque-explica { color: var(--verde-tinta); }
.faixa-espera {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 12px; padding: 12px 16px;
  border-radius: var(--r-md); background: var(--perigo-claro); border: 1px solid var(--perigo-borda); color: var(--perigo);
}
.faixa-espera strong { font: 700 15px var(--fonte-titulo); }
.faixa-espera span { color: var(--aco); font-size: 13px; display: block; }
.faixa-espera .bt { background: var(--perigo); border-color: var(--perigo); }
.rolagem table, table.tabela { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; }
th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--linha2); font-size: 13.5px; vertical-align: middle; }
th { color: var(--aco); font: 600 12px var(--fonte-titulo); background: var(--papel2); }
td.num, th.num, td.n, th.n { text-align: right; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--papel2); }
.barras { display: flex; align-items: flex-end; justify-content: center; gap: 6px; height: 150px; padding: 14px; }
.barras .col { flex: 1 1 0; max-width: 54px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; height: 100%; }
.barras .col i { display: block; border-radius: 3px 3px 0 0; min-height: 2px; }
.barras .col i.entrada { background: var(--verde); }
.barras .col i.ia { background: var(--verde-claro); }
.barras .col i.equipe { background: var(--agua); }
.legenda { display: flex; gap: 16px; color: var(--aco); font-size: 12.5px; margin-top: 8px; flex-wrap: wrap; }
.legenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-right: 6px; }
.legenda i.entrada { background: var(--verde); }
.legenda i.ia { background: var(--verde-claro); }
.legenda i.equipe { background: var(--agua); }
.explica-indicador { margin-top: 12px; padding: 12px 14px; border-radius: var(--r-md); background: var(--papel); border: 1px solid var(--verde-borda); font-size: 13.5px; }
.explica-indicador h3 { margin: 0 0 6px; color: var(--tinta); }
.explica-indicador dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 6px 12px; }
.explica-indicador dt { color: var(--aco); font-weight: 600; }
.explica-indicador dd { margin: 0; }

/* ---------------------------------------------------------------- linhas --- */
.cartao-linha { padding: 16px 18px; margin-top: 6px; }
.cartao-linha .linha-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.cartao-linha .val { font: 700 24px/1.1 var(--fonte-titulo); margin: 6px 0 4px; color: var(--verde-tinta); }
.cartao-linha.fria .val { color: var(--perigo); }
.cartao-linha .nota-pe { color: var(--aco); font-size: 13px; }
.linha-numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin: 16px 0 4px; padding-top: 14px; border-top: 1px solid var(--linha2); }
.linha-numeros .numero { font: 700 24px/1 var(--fonte-titulo); margin: 6px 0; }
.linha-numeros .numero i { font: 500 13px var(--fonte-texto); color: var(--aco); }
.linha-numeros .numero.ok { color: var(--verde-tinta); }
.linha-numeros .numero.atencao { color: var(--ambar); }
.linha-numeros .numero.ruim { color: var(--perigo); }
.linha-numeros p { color: var(--aco); font-size: 13px; margin: 0; }
.linha-numeros.sem-borda { margin-top: 0; padding-top: 0; border-top: 0; }
.linha-riscos { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--linha2); }
.linha-riscos ul { margin: 8px 0 0; padding-left: 20px; }
.linha-riscos li { margin-bottom: 6px; font-size: 13.5px; color: var(--aco); }
.linha-riscos strong { color: var(--tinta); }
.cabeca-secao { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.linhas { display: grid; gap: 12px; margin-top: 6px; }
.cartao-linha.fora { opacity: .7; }
.cartao-linha .linha-acao { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; flex: none; }
.cartao-linha .linha-acao .acoes-miudas { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.cartao-linha .linha-acao .lisa { font-size: 12px; text-decoration: none; color: var(--aco); font-weight: 600; border: 1px solid var(--linha); border-radius: 20px; padding: 0 10px; min-height: 28px; display: inline-flex; align-items: center; background: var(--papel); }
.cartao-linha .linha-acao .lisa:hover { color: var(--verde-tinta); border-color: var(--verde-borda); background: var(--verde-vidro); }
.escolha-modo { display: flex; gap: 8px; flex-wrap: wrap; margin: 14px 0 4px; }
.passos { margin: 8px 0 12px; padding-left: 22px; font-size: 13.5px; color: var(--aco); }
.passos li { margin-bottom: 4px; }
.passos strong { color: var(--tinta); }
.qr-caixa { display: grid; place-items: center; padding: 14px; background: #fff; border-radius: var(--r-md); border: 1px solid var(--linha); }
.qr-caixa img { display: block; width: 264px; height: 264px; image-rendering: pixelated; }
.codigo-pareamento { margin-top: 14px; font: 700 30px var(--fonte-mono); letter-spacing: .24em; text-align: center; }
.tabela-pessoas td .lisa { font-size: 12.5px; }

/* --------------------------------------------------------------- contatos --- */
.cartao-lista { overflow: hidden; margin-top: 6px; }
.cartao-lista .cabeca-cartao { align-items: center; padding: 14px 16px 6px; gap: 16px; }
.cartao-lista .busca-linha { flex: 1; min-width: 220px; }
.filtros-linha { display: flex; gap: 10px; flex-wrap: wrap; padding: 4px 16px 12px; }
.tabela-contatos { border: 0; border-radius: 0; }
.tabela-contatos .celula-contato { display: flex; align-items: center; gap: 12px; }
.tabela-contatos .nome { font: 600 14px var(--fonte-titulo); }
.tabela-contatos .selos { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 3px; }
.tabela-contatos .apagado { color: var(--aco2); font-size: 11.5px; }
.tabela-contatos .pilha { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.tabela-contatos .retrato { width: 34px; height: 34px; }
.tabela-contatos .nome.sem-nome { color: var(--aco2); font-style: italic; font-weight: 500; }
.tabela-contatos .retrato.sem-nome { background: var(--papel2); color: var(--aco); box-shadow: inset 0 0 0 1px var(--linha); }
.tabela-contatos td.telefone { white-space: nowrap; }
.pe-lista { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--linha2); color: var(--aco); font-size: 13px; }
.rolar { overflow-x: auto; }

/* ----------------------------------------------------- instruções da IA --- */
.agente { padding: 16px 18px; margin-bottom: 12px; }
.agente-topo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.agente-topo h2 { margin: 0; font-size: 16px; }
.agente > p.sub { margin: 2px 0 10px; }
.agente details.fixo { margin-bottom: 10px; font-size: 13px; }
.agente details.fixo summary { cursor: pointer; color: var(--verde-tinta); }
.agente details.fixo pre, .trecho { white-space: pre-wrap; font: 12px/1.5 var(--fonte-mono); background: var(--papel2); border: 1px solid var(--linha); border-radius: var(--r-sm); padding: 10px 12px; margin: 8px 0 0; max-height: 260px; overflow: auto; }
.agente textarea.papel { width: 100%; min-height: 220px; resize: vertical; padding: 12px 14px; line-height: 1.55; border: 1px solid var(--linha); border-radius: var(--r-sm); background: var(--papel2); font: 12.5px/1.55 var(--fonte-mono); }
.agente.mexido textarea.papel { border-color: var(--ambar); background: var(--ambar-claro); }
.agente-pe { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.agente-pe .botoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.atencao-instrucao { margin: 4px 0 16px; max-width: 92ch; }

/* ------------------------------------------------------ gaveta e recado --- */
.gaveta { position: fixed; inset: 0; background: rgba(9, 20, 14, .45); display: flex; align-items: center; justify-content: center; padding: 18px; z-index: 30; animation: aparecer .12s ease-out; }
.gaveta .caixa { background: var(--papel); border-radius: var(--r-lg); padding: 22px; width: min(540px, 100%); box-shadow: var(--sombra-gaveta); max-height: 88vh; overflow: auto; animation: subir .16s ease-out both; }
.gaveta .caixa.larga { width: min(760px, 100%); }
.gaveta h2 { margin: 0 0 6px; font-size: 18px; }
.gaveta .pe { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; position: sticky; bottom: -22px; background: var(--papel); padding: 12px 0; margin-bottom: -12px; border-top: 1px solid var(--linha2); }
.gaveta label { display: block; font-size: 12.5px; color: var(--aco); margin-top: 12px; }
.gaveta input, .gaveta textarea, .gaveta select { width: 100%; padding: 9px 11px; border: 1px solid var(--linha); border-radius: var(--r-sm); background: var(--papel2); margin-top: 5px; }
.gaveta input:focus, .gaveta textarea:focus, .gaveta select:focus { border-color: var(--verde); outline: none; background: var(--papel); }
.gaveta ul { margin: 8px 0; padding-left: 20px; }
.gaveta li { margin-bottom: 4px; }
.gaveta h3 { margin: 16px 0 6px; color: var(--tinta); }
.papeis-escolha, .telas-marcar { display: grid; gap: 6px; margin-top: 6px; }
.telas-marcar { max-height: 42vh; overflow: auto; }
.gaveta .papel-op, .gaveta .tela { display: flex; align-items: flex-start; gap: 9px; width: 100%; margin: 0; padding: 8px 10px; border-radius: var(--r-sm); text-align: left; min-height: 0; }
.gaveta .papel-op input, .gaveta .tela input { margin-top: 2px; }
.gaveta .papel-op strong, .gaveta .tela strong { display: block; font-size: 13px; color: var(--tinta); }
.gaveta .papel-op i, .gaveta .tela i { font-style: normal; font-size: 12px; color: var(--aco); }
.gaveta .papel-op:has(input:checked) strong, .gaveta .tela:has(input:checked) strong { color: var(--verde-tinta); }
textarea.recado { width: 100%; margin-top: 10px; font-size: 13px; }
.nada.sem-tela { margin: 10vh auto; max-width: 440px; text-align: center; }
.passos-instalar { margin: 12px 0 0; padding-left: 20px; }
.passos-instalar li { margin-bottom: 8px; }
.recado-ambar { margin-top: 14px; background: var(--ambar-claro); border: 1px solid var(--ambar-borda); border-left: 3px solid var(--ambar); color: var(--ambar); border-radius: var(--r-sm); padding: 10px 12px; font-size: 13px; line-height: 1.45; }
.faixa-versao { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 45; display: flex; align-items: center; gap: 14px; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-md); padding: 10px 12px 10px 16px; box-shadow: var(--sombra-gaveta); font-size: 13.5px; }
.aviso-flutuante { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); background: var(--verde-escuro); color: #fff; padding: 11px 18px; border-radius: var(--r-md); z-index: 40; box-shadow: var(--sombra-gaveta); font-size: 13.5px; max-width: 90vw; animation: subir .16s ease-out both; }
.aviso-flutuante.ruim { background: var(--perigo); }
@keyframes subir { from { opacity: 0; transform: translate(-50%, 6px); } to { opacity: 1; transform: translate(-50%, 0); } }
.gaveta .caixa { animation-name: subirCaixa; }
@keyframes subirCaixa { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ------------------------------------------------------------ a Ajuda ------
   A gaveta de ajuda da tela: três abas (passo a passo, perguntas, pergunte), o
   assistente e o botão do tour. É a mesma peça do Gôndola, com a pele da casa. */
.gaveta .caixa.ajuda-caixa { width: min(680px, 100%); padding: 0; display: flex; flex-direction: column; max-height: 88vh; }
.ajuda-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px 0; }
.ajuda-cabeca h2 { margin: 0; }
.ajuda-cabeca .sub { margin: 2px 0 0; }
.ajuda-abas { display: flex; gap: 2px; padding: 12px 20px 0; border-bottom: 1px solid var(--linha2); }
.ajuda-abas button { background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; cursor: pointer; font: 600 13px var(--fonte-titulo); color: var(--aco); margin-bottom: -1px; }
.ajuda-abas button.atual { color: var(--verde-tinta); border-bottom-color: var(--verde); }
.ajuda-corpo { padding: 16px 20px 20px; overflow: auto; flex: 1; min-height: 0; }
.ajuda-corpo ol.passos { margin: 0; padding-left: 22px; color: var(--tinta); font-size: 14px; }
.ajuda-corpo ol.passos li { margin-bottom: 8px; }
.faq { padding: 10px 0; border-bottom: 1px solid var(--linha2); font-size: 13.5px; }
.faq:last-child { border-bottom: 0; }
.faq b { display: block; font: 600 13.5px var(--fonte-titulo); margin-bottom: 3px; }
.faq .resposta { color: var(--aco); }
.ajuda-pe { display: flex; gap: 8px; justify-content: space-between; align-items: center; flex-wrap: wrap; padding: 12px 20px; border-top: 1px solid var(--linha2); background: var(--papel2); border-radius: 0 0 var(--r-lg) var(--r-lg); }
.ajuda-pe .links { display: flex; gap: 12px; font-size: 13px; flex-wrap: wrap; }
.assistente { display: flex; flex-direction: column; gap: 10px; }
.assistente .baloes { display: flex; flex-direction: column; gap: 8px; min-height: 80px; }
.balao { padding: 9px 12px; border-radius: var(--r-md); font-size: 13.5px; max-width: 92%; border: 1px solid var(--linha); }
.balao--pessoa { align-self: flex-end; background: var(--verde-vidro); border-color: var(--verde-borda); border-bottom-right-radius: var(--r-xs); }
.balao--sistema { align-self: flex-start; background: var(--papel2); border-bottom-left-radius: var(--r-xs); }
.balao--sistema b { display: block; font: 600 13px var(--fonte-titulo); margin-bottom: 3px; }
.balao .outras { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chip { background: var(--papel); border: 1px solid var(--linha); border-radius: 20px; padding: 4px 10px; font-size: 12px; cursor: pointer; color: var(--verde-tinta); }
.chip:hover { border-color: var(--verde); }
.assistente form { display: flex; gap: 6px; }
.assistente form input { flex: 1; margin: 0; }
.sugestoes-ajuda { display: flex; flex-wrap: wrap; gap: 6px; }

/* o tour guiado: véu com um buraco no alvo e o cartão que explica */
.tour-veu { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
.tour-luz { position: fixed; border-radius: var(--r-md); box-shadow: 0 0 0 9999px rgba(9, 20, 14, .55), 0 0 0 3px var(--verde-claro); transition: all .18s ease-out; z-index: 51; pointer-events: none; }
.tour-cartao { position: fixed; z-index: 52; width: min(340px, calc(100vw - 32px)); background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-md); padding: 14px 16px; box-shadow: var(--sombra-gaveta); pointer-events: auto; }
.tour-cartao .passo-de { font: 600 11.5px var(--fonte-titulo); color: var(--aco); }
.tour-cartao h3 { margin: 4px 0 4px; color: var(--tinta); font-size: 15px; }
.tour-cartao p { font-size: 13.5px; color: var(--aco); margin: 0; }
.tour-cartao .pe { display: flex; gap: 8px; justify-content: space-between; margin-top: 12px; align-items: center; }
.tour-cartao .pe .lisa { color: var(--aco); }

/* ----------------------------------------------------------- treinamento --- */
.treinamento-grade { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 16px; align-items: start; }
.aulas { display: flex; flex-direction: column; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-md); overflow: hidden; }
.aula { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--linha2); background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; cursor: pointer; width: 100%; }
.aula:last-child { border-bottom: 0; }
.aula:hover { background: var(--papel2); }
.aula .ordem { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 700 12px var(--fonte-titulo); background: var(--papel2); border: 1px solid var(--linha); color: var(--aco); }
.aula.concluida .ordem { background: var(--verde); border-color: var(--verde); color: #fff; }
.aula .titulo-aula { font: 600 14px var(--fonte-titulo); }
.aula .resumo-aula { color: var(--aco); font-size: 13px; margin-top: 2px; }
.aula .minutos { color: var(--aco2); font-size: 12px; white-space: nowrap; }
.aula-aberta { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-md); padding: 20px 22px; }
.aula-aberta h2 { margin: 0 0 4px; font-size: 20px; }
.aula-aberta .blocos p { font-size: 15px; line-height: 1.6; margin: 0 0 12px; max-width: 70ch; }
.fixar { margin-top: 18px; padding: 14px 16px; border-radius: var(--r-md); background: var(--papel2); border: 1px solid var(--linha); }
.fixar h3 { margin: 0 0 8px; color: var(--tinta); }
.opcoes { display: grid; gap: 6px; }
.opcoes button { text-align: left; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-sm); padding: 10px 12px; cursor: pointer; font-size: 14px; }
.opcoes button:hover { border-color: var(--verde); }
.opcoes button.certa { background: var(--verde-vidro); border-color: var(--verde); }
.opcoes button.errada { background: var(--perigo-claro); border-color: var(--perigo-borda); }
.opcoes button.marcada { background: var(--verde-vidro); border-color: var(--verde); font-weight: 600; }
.explica-fixar { margin-top: 10px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--verde-vidro); border: 1px solid var(--verde-borda); color: var(--verde-tinta); font-size: 13.5px; }
.explica-fixar.errou { background: var(--ambar-claro); border-color: var(--ambar-borda); color: var(--ambar); }
.prova-caixa { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-md); padding: 18px; position: sticky; top: 0; }
.prova-caixa .grande { font: 700 28px/1 var(--fonte-titulo); margin: 6px 0; }
.prova-caixa .progresso { height: 6px; border-radius: 3px; background: var(--linha2); overflow: hidden; margin: 10px 0; }
.prova-caixa .progresso i { display: block; height: 100%; background: var(--verde); }
.questao { padding: 14px 0; border-bottom: 1px solid var(--linha2); }
.questao:last-child { border-bottom: 0; }
.questao .enunciado { font: 600 14.5px var(--fonte-titulo); margin: 0 0 8px; }
.certificado-caixa { padding: 14px 16px; border-radius: var(--r-md); background: var(--verde-vidro); border: 1px solid var(--verde-borda); color: var(--verde-tinta); }
.certificado-caixa b { display: block; font: 700 15px var(--fonte-titulo); }
.tabela-treinamento .barrinha { height: 6px; border-radius: 3px; background: var(--linha2); overflow: hidden; min-width: 90px; }
.tabela-treinamento .barrinha i { display: block; height: 100%; background: var(--verde); }

/* -------------------------------------------------------------- chamados --- */
.lista-chamados { display: flex; flex-direction: column; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-md); overflow: hidden; }
.chamado-linha { display: grid; grid-template-columns: 56px 1fr auto; gap: 12px; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--linha2); background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; cursor: pointer; width: 100%; }
.chamado-linha:last-child { border-bottom: 0; }
.chamado-linha:hover { background: var(--papel2); }
.chamado-linha .numero { font: 600 13px var(--fonte-mono); color: var(--aco); }
.chamado-linha .titulo-chamado { font: 600 14px var(--fonte-titulo); }
.chamado-linha .meta { color: var(--aco); font-size: 12.5px; margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; }
.situacao-pill { display: inline-flex; align-items: center; gap: 6px; font: 600 11.5px var(--fonte-titulo); padding: 3px 9px; border-radius: 20px; border: 1px solid var(--linha); background: var(--papel2); color: var(--aco); white-space: nowrap; }
.situacao-pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--aco2); }
.situacao-pill.aberto::before { background: var(--perigo); }
.situacao-pill.em_analise::before { background: var(--ambar); }
.situacao-pill.resolvido::before { background: var(--verde); }
.situacao-pill.nao_vai_fazer::before { background: var(--aco2); }
.filtros-chamados { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }
.chamado-conversa { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.msg-chamado { padding: 9px 12px; border-radius: var(--r-md); border: 1px solid var(--linha); background: var(--papel2); font-size: 13.5px; max-width: 92%; white-space: pre-wrap; }
.msg-chamado.minha { align-self: flex-end; background: var(--verde-vidro); border-color: var(--verde-borda); }
.msg-chamado.situacao { align-self: center; background: none; border: 0; color: var(--aco); font-size: 12.5px; text-align: center; white-space: normal; }
.msg-chamado .rodape { display: block; font-size: 11px; color: var(--aco2); margin-top: 3px; }
.prints-chamado { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.prints-chamado a { display: block; border: 1px solid var(--linha); border-radius: var(--r-md); overflow: hidden; background: var(--papel2); line-height: 0; }
.prints-chamado img { width: 128px; height: 96px; object-fit: cover; display: block; }
.prints-chamado a:hover { border-color: var(--verde); }
.campo-print i { display: block; color: var(--aco); font-size: 12px; margin-top: 4px; font-style: normal; }
.campo-print input[type=file] { font-size: 13px; }
.chamado-descricao { white-space: pre-wrap; background: var(--papel2); border: 1px solid var(--linha); border-radius: var(--r-md); padding: 12px 14px; font-size: 14px; }
.tipo-escolha { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; margin-top: 6px; }

/* -------------------------------------------------------------- qualidade --- */
.nota-pill { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font: 700 15px var(--fonte-titulo); background: var(--papel2); border: 1px solid var(--linha); }
.nota-pill.bom { background: var(--verde-vidro); color: var(--verde-tinta); border-color: var(--verde-borda); }
.nota-pill.atencao { background: var(--ambar-claro); color: var(--ambar); border-color: var(--ambar-borda); }
.nota-pill.ruim { background: var(--perigo-claro); color: var(--perigo); border-color: var(--perigo-borda); }
.lista-notas { display: flex; flex-direction: column; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-md); overflow: hidden; }
.linha-nota { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--linha2); background: none; border-left: 0; border-right: 0; border-top: 0; text-align: left; cursor: pointer; width: 100%; }
.linha-nota:last-child { border-bottom: 0; }
.linha-nota:hover { background: var(--papel2); }
.linha-nota .contato-nota { font: 600 14px var(--fonte-titulo); }
.linha-nota .frase { color: var(--aco); font-size: 13px; }
.linha-nota .meta { color: var(--aco2); font-size: 12px; white-space: nowrap; }
.distribuicao { display: flex; height: 10px; border-radius: 5px; overflow: hidden; background: var(--linha2); margin-top: 10px; }
.distribuicao i { display: block; height: 100%; }
.distribuicao i.bom { background: var(--verde); }
.distribuicao i.atencao { background: var(--ambar); }
.distribuicao i.ruim { background: var(--perigo); }
.repetidos { display: flex; flex-direction: column; gap: 6px; }
.repetido { display: flex; gap: 12px; align-items: center; padding: 9px 12px; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-sm); font-size: 13.5px; }
.repetido b { font: 700 14px var(--fonte-titulo); color: var(--perigo); min-width: 28px; text-align: right; }
.repetido.bom b { color: var(--verde-tinta); }
.periodo { display: inline-flex; gap: 2px; background: var(--papel2); border: 1px solid var(--linha); border-radius: var(--r-sm); padding: 3px; }
.periodo button { background: none; border: 0; border-radius: 4px; padding: 6px 12px; cursor: pointer; font: 600 12.5px var(--fonte-titulo); color: var(--aco); }
.periodo button.atual { background: var(--papel); color: var(--tinta); box-shadow: 0 1px 2px rgba(9, 20, 14, .10); }

/* ------------------------------------------------ central de ajuda (vista) --- */
.central-ajuda { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cartao-ajuda { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-md); padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; text-align: left; cursor: pointer; }
.cartao-ajuda:hover { border-color: var(--verde); }
.cartao-ajuda h3 { margin: 0; color: var(--tinta); font-size: 14.5px; }
.cartao-ajuda p { margin: 0; color: var(--aco); font-size: 13px; }
.cartao-ajuda .pe-cartao { display: flex; gap: 8px; margin-top: 4px; font-size: 12px; color: var(--verde-tinta); }
.faixa-ajuda { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: center; padding: 16px 18px; border-radius: var(--r-md); background: var(--verde-escuro); color: #fff; margin-bottom: 16px; }
.faixa-ajuda h2 { margin: 0 0 4px; color: #fff; font-size: 17px; }
.faixa-ajuda p { margin: 0; color: #cfe3d6; font-size: 13.5px; }
.faixa-ajuda .acoes { display: flex; gap: 8px; flex-wrap: wrap; }
.faixa-ajuda .bt.claro { background: rgba(255, 255, 255, .1); color: #fff; border-color: rgba(255, 255, 255, .25); }
.faixa-ajuda .bt.claro:hover { background: rgba(255, 255, 255, .18); }
.glossario-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 8px 16px; }
.glossario-lista div { padding: 8px 0; border-bottom: 1px solid var(--linha2); font-size: 13.5px; }
.glossario-lista b { font: 600 13.5px var(--fonte-titulo); display: block; }

/* ---------------------------------------------- páginas do servidor (painel) --- */
.pagina-do-servidor .rolagem { padding-top: 8px; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.card .val { font-size: 30px; }
.card .rot { font-size: 13px; }
.card-problema { margin: 10px 0; }
.card-problema-titulo { font-weight: 600; margin: 4px 0; }
.barra { height: 8px; background: var(--linha2); border-radius: 4px; overflow: hidden; margin-top: 10px; display: block; }
.barra i { display: block; height: 100%; background: var(--verde); }
.barra i.alerta { background: var(--ambar); }
.barra i.perigo { background: var(--perigo); }
.dias { display: flex; align-items: flex-end; gap: 3px; height: 140px; background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-md); padding: 14px; }
.dias div { flex: 1; background: var(--verde); border-radius: 3px 3px 0 0; min-height: 2px; }
.aviso { background: var(--ambar-claro); border: 1px solid var(--ambar-borda); border-left: 3px solid var(--ambar); padding: 10px 14px; border-radius: var(--r-sm); margin: 12px 0; color: var(--ambar); font-size: 13.5px; }
.aviso.perigo { background: var(--perigo-claro); border-color: var(--perigo-borda); border-left-color: var(--perigo); color: var(--perigo); }
.aviso.ok { background: var(--verde-vidro); border-color: var(--verde-borda); border-left-color: var(--verde); color: var(--verde-tinta); }
.msg { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-md); padding: 8px 12px; margin: 6px 0; max-width: 80%; white-space: pre-wrap; font-size: 13.5px; }
.msg.cliente { margin-right: auto; }
.msg.agente, .msg.atendente { margin-left: auto; background: var(--verde-vidro); border-color: var(--verde-borda); }
.msg small { display: block; color: var(--aco); font-size: 11.5px; }
form.linha { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin: 12px 0; }
.pagina-do-servidor label { display: flex; flex-direction: column; font-size: 12.5px; color: var(--aco); gap: 5px; }
.pagina-do-servidor input, .pagina-do-servidor select { font: inherit; padding: 9px 11px; border: 1px solid var(--linha); border-radius: var(--r-sm); background: var(--papel2); color: var(--tinta); }
.pagina-do-servidor form button, .pagina-porta button { font: 600 13px var(--fonte-titulo); padding: 9px 14px; border: 1px solid var(--verde); border-radius: var(--r-sm); background: var(--verde); color: #fff; cursor: pointer; }
.pagina-do-servidor form button:hover, .pagina-porta button:hover { background: var(--verde-tinta); }
.pagina-do-servidor form button.sec { background: var(--papel); color: var(--tinta); border-color: var(--linha); }
.tag { display: inline-block; font: 600 11px var(--fonte-titulo); padding: 2px 8px; border-radius: 20px; background: var(--ambar-claro); color: var(--ambar); margin-right: 6px; }
.tag.bloqueia { background: var(--perigo-claro); color: var(--perigo); }
.ajuste { padding: 16px 18px; margin: 0 0 12px; }
.ajuste-cabeca { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ajuste-cabeca h2 { margin: 0; font-size: 16px; }
.ajuste-valor { font: 700 24px/1 var(--fonte-titulo); color: var(--verde-tinta); white-space: nowrap; }
.ajuste-valor i { font: 500 13px var(--fonte-texto); color: var(--aco); margin-left: 5px; }
.ajuste .explica { color: var(--tinta); margin: 10px 0 0; max-width: 80ch; font-size: 14px; }
.ajuste .acontece { color: var(--aco); margin: 6px 0 0; max-width: 80ch; font-size: 13.5px; }
.ajuste form.linha { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--linha2); }
.ajuste .barra { max-width: 420px; }
.atalhos-painel { margin: 8px 0 0; padding-left: 20px; color: var(--aco); }
.atalhos-painel li { margin-bottom: 6px; }
details summary { cursor: pointer; color: var(--verde-tinta); }

/* ---------------------------------------------------- as telas de porta ---
   Entrar, escolher quem é (painel aberto) e trocar a senha. A marca branca vive
   sobre o verde escuro da casa; a caixa é a mesma ficha branca do resto. */
.pagina-porta { min-height: 100dvh; margin: 0; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: var(--rail); color: var(--tinta); }
.porta { width: min(400px, 100%); }
.porta .marca-porta { display: block; width: 150px; height: auto; margin: 0 auto 22px; padding: 0; }
.porta .caixa { background: var(--papel); border-radius: var(--r-lg); padding: 28px 26px; border: 1px solid var(--linha); }
.porta h1 { font-size: 20px; text-align: center; margin: 0 0 6px; }
.porta .sub { font-size: 13.5px; line-height: 1.45; text-align: center; margin: 0 0 6px; }
.porta form { margin: 12px 0 0; }
.porta label { display: block; font: 600 12px var(--fonte-titulo); color: var(--aco); margin-top: 14px; }
.porta input { width: 100%; box-sizing: border-box; margin-top: 6px; padding: 11px 12px; font: inherit; font-size: 16px; background: var(--papel2); border: 1px solid var(--linha); border-radius: var(--r-sm); color: var(--tinta); }
.porta input:focus { outline: none; border-color: var(--verde); background: var(--papel); }
.porta button { width: 100%; margin-top: 18px; padding: 12px; font-size: 14px; }
.porta .erro { background: var(--perigo-claro); border: 1px solid var(--perigo-borda); border-left: 3px solid var(--perigo); color: var(--perigo); padding: 10px 13px; border-radius: var(--r-sm); font-size: 13.5px; margin: 0 0 14px; }
.porta .pe { text-align: center; font-size: 12.5px; line-height: 1.45; color: var(--aco); margin: 16px 0 0; }
.pessoas { display: grid; gap: 8px; margin-top: 14px; }
.pessoas button { margin-top: 0; text-align: left; padding: 12px 14px; background: var(--papel2); color: var(--tinta); border: 1px solid var(--linha); font-size: 13.5px; }
.pessoas button:hover { background: var(--verde-vidro); border-color: var(--verde-borda); color: var(--verde-tinta); }

/* ---------------------------------------------- a página de sem conexão --- */
.fora-do-ar { min-height: 100dvh; margin: 0; display: flex; align-items: center; justify-content: center; padding: 24px 16px; background: var(--rail); }
.fora-do-ar main { width: min(390px, 100%); text-align: center; }
.fora-do-ar img { width: 150px; height: auto; margin: 0 auto 22px; display: block; }
.fora-do-ar .caixa { background: var(--papel); border-radius: var(--r-lg); padding: 26px 24px; text-align: left; border: 1px solid var(--linha); }
.fora-do-ar h1 { font-size: 20px; margin-bottom: 8px; }
.fora-do-ar p { font-size: 14px; }
.fora-do-ar a.bt { margin-top: 12px; }


/* --------------------------------------------------- o Plano de ação (v14) ---
   A fila do que a casa precisa decidir. Cada linha tem NOME à esquerda e o botão que
   resolve à direita; no celular tudo empilha e o botão vira largura cheia, porque é
   nele que se toca. Nada de tabela: a decisão não é uma célula, é uma frase com botão. */
.plano-cabeca { display: flex; align-items: center; gap: 10px; margin: 26px 0 2px; font-size: 17px; }
.plano-cabeca.ruim { color: var(--perigo); }
.plano-cabeca .tag { margin: 0; }
.plano-sub { color: var(--aco); font-size: 13.5px; margin: 0 0 12px; max-width: 80ch; }
.plano-busca { margin-bottom: 4px; }
.plano-busca label { flex: 1 1 260px; max-width: 420px; }
.plano-busca input { width: 100%; }
.plano-busca .bt { align-self: end; }

.plano-tipo { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-md); padding: 16px 18px; margin: 0 0 12px; }
.plano-tipo h3 { margin: 0; font-size: 15px; }
.plano-efeito { margin: 6px 0 0; font-size: 14px; color: var(--tinta); max-width: 80ch; }
.plano-efeito strong { color: var(--perigo); font-size: 16px; }
.plano-tipo:not(.bloqueia) .plano-efeito strong { color: var(--tinta); }
.plano-ajuda { margin: 4px 0 0; color: var(--aco); font-size: 13px; max-width: 80ch; }
.plano-mais { margin: 10px 0 0; color: var(--aco); font-size: 12.5px; }

.decisoes { list-style: none; margin: 12px 0 0; padding: 0; }
.decisao { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; padding: 12px 0; border-top: 1px solid var(--linha2); }
.decisao:first-child { border-top: 0; padding-top: 4px; }
.decisao-nome { flex: 1 1 240px; font-weight: 600; font-size: 14px; }
.decisao-nome small { display: block; font-weight: 400; color: var(--aco); font-size: 12.5px; margin-top: 2px; }
.decisao-detalhe { flex: 1 1 100%; margin: 0; color: var(--aco); font-size: 13px; }
.decisao-acoes { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; margin-left: auto; }
.decisao-acoes form.acao { display: flex; align-items: end; gap: 6px; margin: 0; }
.decisao-acoes .campo-preco { flex-direction: row; align-items: center; gap: 4px; color: var(--tinta); font-size: 13px; }
.decisao-acoes .campo-preco input { width: 96px; }
.decisao-acoes .campo-lista textarea, .decisao-acoes .campo-lista input { min-width: 220px; font: inherit; padding: 9px 11px; border: 1px solid var(--linha); border-radius: var(--r-sm); background: var(--papel2); color: var(--tinta); }
.decisao-acoes .campo-item select { max-width: 280px; }
.decisao-acoes .campo-arquivo input { max-width: 230px; }

.plano-vazio { color: var(--aco); font-size: 13.5px; background: var(--papel); border: 1px dashed var(--linha); border-radius: var(--r-md); padding: 16px 18px; margin: 0 0 12px; }
.plano-limpo { background: var(--verde-vidro); border: 1px solid var(--verde-borda); border-radius: var(--r-md); padding: 22px 20px; margin: 16px 0; }
.plano-limpo h2 { margin: 0 0 6px; color: var(--verde-tinta); font-size: 18px; }
.plano-limpo p { margin: 0; color: var(--tinta); font-size: 14px; }
.plano-feito { list-style: none; margin: 8px 0 0; padding: 0; }
.plano-feito li { padding: 8px 0; border-bottom: 1px solid var(--linha2); font-size: 13.5px; color: var(--aco); }
.plano-feito strong { color: var(--tinta); }

/* ------------------------------------------------------------ o celular ---
   Medido no Chrome de verdade em 390x844. Abaixo de 900px o menu lateral some e
   entram as abas de baixo, como em qualquer aplicativo; a conversa aberta esconde
   as abas (é o que o WhatsApp faz) e o teclado não briga com elas. */
@media (max-width: 1180px) {
  .vista[data-vista=atendimento].ativa.com-copiloto { grid-template-columns: minmax(266px, 306px) 1fr; }
  .vista[data-vista=atendimento].ativa.com-copiloto .painel-copiloto { display: none; }
  .treinamento-grade { grid-template-columns: 1fr; }
  .prova-caixa { position: static; }
}
@media (max-width: 900px) {
  #chassi { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .coluna { display: none; }
  main { grid-row: 1; padding-top: env(safe-area-inset-top); }
  .abas-celular {
    grid-row: 2; display: flex; justify-content: space-around; align-items: stretch; gap: 2px;
    background: var(--papel); border-top: 1px solid var(--linha); padding: 4px 6px calc(4px + env(safe-area-inset-bottom));
    min-height: var(--altura-abas);
  }
  .abas-celular button, .abas-celular a {
    flex: 1 1 0; min-width: 0; background: none; border: 0; border-radius: var(--r-sm); padding: 6px 4px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--aco); text-decoration: none; position: relative; min-height: var(--toque);
  }
  .abas-celular .i { width: 22px; height: 22px; }
  .abas-celular span { font: 600 10.5px/1 var(--fonte-titulo); white-space: nowrap; }
  .abas-celular .atual { color: var(--verde-tinta); }
  .abas-celular .atual .i { color: var(--verde); }
  .abas-celular b { position: absolute; top: 2px; right: calc(50% - 20px); background: var(--perigo); color: #fff; border-radius: 20px; padding: 0 5px; font: 700 10px/1.6 var(--fonte-titulo); }
  .abas-celular b:empty { display: none; }
  body.mostra-conversa .abas-celular, body.teclado-aberto .abas-celular { display: none; }
  body.mostra-conversa #chassi { grid-template-rows: minmax(0, 1fr); }
  /* a gaveta "Mais": o menu inteiro, com as descrições */
  .gaveta .caixa.mais-caixa #menu { display: flex; flex-direction: column; gap: 2px; }
  .mais-caixa .grupo-menu { color: var(--aco); padding: 12px 8px 4px; }
  .mais-caixa #menu button, .mais-caixa #menu a { color: var(--tinta); min-height: var(--toque); }
  .mais-caixa #menu .explica { color: var(--aco); }
  .mais-caixa #menu button.atual, .mais-caixa #menu a.atual { background: var(--verde-vidro); }
  .mais-caixa #menu .i { color: var(--verde-tinta); opacity: 1; }
  .mais-caixa .eu { border-top: 1px solid var(--linha2); color: var(--tinta); }
  .mais-caixa .eu .papel { color: var(--aco); border-color: var(--linha); }
  .mais-caixa .eu a, .mais-caixa .eu .lisa, .mais-caixa .eu .versao { color: var(--aco); }
  .mais-caixa .linha-estado { background: var(--papel2); border-color: var(--linha); color: var(--tinta); }
  .mais-caixa .linha-estado .meta { color: var(--aco); }

  .cabeca-vista { padding: 12px 14px 8px; gap: 8px; }
  .cabeca-vista h1 { font-size: 18px; }
  .cabeca-vista .explica { display: none; }
  .cabeca-vista .hoje { display: none; }
  .so-icone-texto span { display: none; }
  .so-icone-texto { width: 38px; height: 38px; padding: 0; justify-content: center; }
  .so-icone-texto .i { width: 18px; height: 18px; }
  .vista[data-vista=atendimento].ativa, .vista[data-vista=atendimento].ativa.com-copiloto { grid-template-columns: 1fr; padding: 0 8px 8px; }
  body.mostra-conversa .cabeca-vista[data-tela=atendimento] { display: none; }
  .painel-fila, .painel-conversa, .painel-copiloto { display: none; }
  body.mostra-fila .painel-fila { display: flex; }
  body.mostra-conversa .painel-conversa { display: flex; border-radius: var(--r-md); }
  /* 🚨 No celular o copiloto toma o lugar da conversa (o × devolve a conversa). A regra
     de 1180px acima esconde a coluna do copiloto na tela média, e por especificidade ela
     vencia esta: o botão Copiloto no celular abria uma tela em BRANCO (pego no print do
     manual, 19/09/2026; existia desde a v10). */
  body.mostra-copiloto .painel-copiloto,
  body.mostra-copiloto .vista[data-vista=atendimento].ativa.com-copiloto .painel-copiloto { display: block; border-radius: var(--r-md); }
  body.mostra-copiloto .painel-conversa { display: none; }
  .atalhos-teclado { display: none; }
  .bolha { max-width: 90%; }
  .cabeca .voltar { display: inline-flex; min-height: var(--toque); min-width: var(--toque); }
  .rolagem { padding: 4px 12px 24px; }
  .cartao-numero.principal { grid-column: span 1; }
  .cartao-numero .val { font-size: 30px; }
  .cartao-numero.principal .val { font-size: 40px; }
  .agente { padding: 14px; }

  /* alvo de toque: 44px é o que o polegar acerta */
  button.so-icone { width: var(--toque); height: var(--toque); }
  button.bt, a.bt, .escrever .atalhos button, .abas-trabalho button, .abas-apoio button, .aula, .chamado-linha { min-height: var(--toque); }
  .escrever .ferramentas .bt { padding: 10px 10px; font-size: 12.5px; }
  .escrever { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .faixa-espera { bottom: calc(24px + env(safe-area-inset-bottom)); }
  .aviso-flutuante { bottom: calc(var(--altura-abas) + 12px + env(safe-area-inset-bottom)); }
  body.mostra-conversa .aviso-flutuante { bottom: calc(18px + env(safe-area-inset-bottom)); }
  .caixa-escrever { flex-wrap: wrap; }
  .caixa-escrever textarea { flex: 1 0 100%; }
  .botoes-arquivo { margin-right: auto; }
  .bt.enviar-na-caixa { align-self: center; }
  .escrever .ferramentas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .escrever .ferramentas::-webkit-scrollbar { display: none; }
  .escrever .ferramentas .bt { flex: none; }
  .gaveta { align-items: flex-end; padding: 0; }
  .gaveta .caixa, .gaveta .caixa.larga, .gaveta .caixa.ajuda-caixa { width: 100%; max-height: 92dvh; border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .gaveta .caixa { padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); }
  .gaveta .caixa.ajuda-caixa { padding: 0; }
  .ajuda-pe { border-radius: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }
  .tour-cartao { left: 16px !important; right: 16px; width: auto; }
  .central-ajuda { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  /* O "Mais" das páginas do servidor é um <details>, porque ali não roda script. A
     lista sobe acima da barra de abas, como a gaveta do app. */
  .abas-celular .mais-sem-script { flex: 1 1 0; min-width: 0; position: relative; }
  .abas-celular .mais-sem-script summary {
    list-style: none; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 3px;
    color: var(--aco); padding: 6px 4px; min-height: var(--toque); border-radius: var(--r-sm);
  }
  .abas-celular .mais-sem-script summary::-webkit-details-marker { display: none; }
  .abas-celular .mais-sem-script[open] summary { color: var(--verde-tinta); background: var(--verde-vidro); }
  .abas-celular .mais-lista {
    position: absolute; bottom: calc(100% + 6px); right: 0; min-width: 232px;
    background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r-md);
    box-shadow: var(--sombra-gaveta); padding: 6px; display: flex; flex-direction: column; gap: 2px; z-index: 30;
  }
  .abas-celular .mais-lista a {
    flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px;
    padding: 10px 12px; color: var(--tinta); text-align: left;
  }
  .abas-celular .mais-lista a span { font: 500 14px/1.2 var(--fonte-texto); white-space: normal; }
  .decisao-acoes { margin-left: 0; width: 100%; }
  .decisao-acoes form.acao { flex: 1 1 100%; }
  .decisao-acoes form.acao button { flex: 1; }
  .decisao-acoes .campo-lista textarea, .decisao-acoes .campo-lista input, .decisao-acoes .campo-item select, .decisao-acoes .campo-arquivo input { min-width: 0; max-width: none; width: 100%; }
  .decisao-acoes label { flex: 1; }
  .plano-tipo { padding: 14px 14px; }
}
/* 🚨 Campo com letra menor que 16px faz o iPhone dar ZOOM sozinho ao ser tocado: a tela
   fica torta e é preciso fechar o teclado e voltar. É regra do Safari, não escolha de
   estilo, e por isso vale para TODO campo, inclusive os que têm tamanho próprio. Este
   bloco é o último `@media (max-width: 900px)` da folha de propósito: test/pwa.test.mjs
   lê a primeira regra dele. */
@media (max-width: 900px) {
  input, textarea, select, .busca input[type=search], .caixa-escrever textarea,
  .gaveta input, .gaveta textarea, .gaveta select, textarea.recado, .agente textarea.papel, .porta input { font-size: 16px; }
}
@media (display-mode: standalone) { .eu .acoes { flex-wrap: wrap; } }
body.teclado-aberto .faixa-espera, body.teclado-aberto .aviso-flutuante, body.teclado-aberto .atalhos-teclado { display: none; }