/* ============================================================================
 * ECOCHAT — a folha de estilo.
 *
 * ====================== AS TRES DECISOES QUE EXPLICAM O RESTO ======================
 *
 * 1. A CONVERSA IMITA O WHATSAPP, DE PROPOSITO.
 *    Pedido do dono (22/10/2026): *"preferencialmente, formato da janela de
 *    conversa seja muito semelhante ou identico ao WhatsApp. O mesmo estilo de
 *    conversa, o avatar mostrando a foto, o digitando, gravando um audio."*
 *    Nao e so gosto: o atendente que vem do WhatsApp Business nao precisa
 *    aprender nada, e o treinamento de um sistema novo e metade do custo de
 *    trocar de ferramenta. As cores das bolhas, o rabinho, o visto duplo e o
 *    fundo com textura sao os do WhatsApp porque e isso que o olho reconhece.
 *
 * 2. UMA FOLHA SO, SEM FRAMEWORK.
 *    Nenhum Tailwind, nenhum Bootstrap. O sistema roda na VPS do provedor e
 *    tem de abrir rapido no 4G de um tecnico em campo. Esta folha inteira pesa
 *    menos que o CSS de um framework antes de qualquer componente existir.
 *
 * 3. MOBILE E DESKTOP NA MESMA PAGINA, COM UM SO PONTO DE QUEBRA (900px).
 *    *"tem que ser desktop e mobile (...) com menus sanduiche."* Abaixo de
 *    900px a lista e a conversa viram DUAS TELAS que deslizam, como no
 *    aplicativo; acima, ficam lado a lado. Um ponto de quebra so, e nao
 *    quatro, porque cada ponto a mais e um estado novo para testar.
 * ========================================================================= */

:root {
  /* ---- as cores do WhatsApp, modo claro ---- */
  --fundo-app: #f0f2f5;
  --fundo-painel: #ffffff;
  --fundo-conversa: #efeae2;
  --bolha-entrada: #ffffff;
  --bolha-saida: #d9fdd3;
  --cabecalho: #f0f2f5;
  --verde: #008069;
  --verde-claro: #25d366;
  --verde-escuro: #005c4b;

  --texto: #111b21;
  --texto-fraco: #667781;
  --texto-fraquinho: #8696a0;
  --borda: #e9edef;
  --linha: #d1d7db;

  --alerta: #b8431f;
  --alerta-fundo: #fff4e5;
  --visto: #53bdeb;

  --sombra: 0 1px 3px rgba(11, 20, 26, 0.13);
  --sombra-alta: 0 10px 30px rgba(11, 20, 26, 0.2);

  /* A largura da coluna da fila + CRM. UM valor, usado com e sem a ficha —
     ver a nota em `#app`. */
  --coluna-fila: clamp(300px, 30%, 620px);

  --r: 8px;
  --r-bolha: 7.5px;
  --cabecalho-altura: 60px;

  /* O tipo e o do sistema: no Windows o atendente ve Segoe, no celular ve a do
     aparelho. Fonte baixada da web custaria um pedido e um pisca-pisca de
     texto no 4G, para ninguem notar a diferenca. */
  --fonte: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
}

/* ====== O MODO ESCURO VEM DO APARELHO, e da para forcar ======
 * `prefers-color-scheme` cobre quem nunca vai mexer em ajuste. O
 * `[data-tema]` cobre quem quer escolher — e a escolha e guardada no
 * navegador. Atendimento noturno em tela branca cansa, e isso nao e frescura:
 * e turno de 6 horas olhando para cá. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo-app: #111b21;
    --fundo-painel: #111b21;
    --fundo-conversa: #0b141a;
    --bolha-entrada: #202c33;
    --bolha-saida: #005c4b;
    --cabecalho: #202c33;
    --verde: #00a884;

    --texto: #e9edef;
    --texto-fraco: #8696a0;
    --texto-fraquinho: #667781;
    --borda: #222d34;
    --linha: #2a3942;

    --alerta: #ffb08a;
    --alerta-fundo: #3a2a1e;

    --sombra: 0 1px 3px rgba(0, 0, 0, 0.4);
    --sombra-alta: 0 10px 30px rgba(0, 0, 0, 0.6);
  }
}

:root[data-tema="escuro"] {
  --fundo-app: #111b21;
  --fundo-painel: #111b21;
  --fundo-conversa: #0b141a;
  --bolha-entrada: #202c33;
  --bolha-saida: #005c4b;
  --cabecalho: #202c33;
  --verde: #00a884;
  --texto: #e9edef;
  --texto-fraco: #8696a0;
  --texto-fraquinho: #667781;
  --borda: #222d34;
  --linha: #2a3942;
  --alerta: #ffb08a;
  --alerta-fundo: #3a2a1e;
  --sombra: 0 1px 3px rgba(0, 0, 0, 0.4);
  --sombra-alta: 0 10px 30px rgba(0, 0, 0, 0.6);
}

* { box-sizing: border-box; }

/* ====== O `hidden` TEM DE GANHAR DE TUDO ======
 *
 * Defeito achado em 23/10/2026, com o sistema já em uso: o atendente abria uma
 * conversa e a barra de digitar não aparecia — ou aparecia quando não devia.
 *
 * A causa: `hidden` é um atributo de HTML, e o navegador o aplica com uma regra
 * fraca (`[hidden] { display: none }`, na folha dele). Qualquer `display:` que
 * nós escrevermos para aquele elemento GANHA dela — então `#barra { display:
 * flex }` deixava a barra visível com `hidden` e tudo.
 *
 * Três elementos estavam assim (`#app`, `#barra`, `#conversa`), e cada um tinha
 * sido "consertado" com uma regra `#id[hidden]` própria — o que funciona e não
 * escala: o quarto elemento que ganhar `display:` volta a quebrar, e o defeito
 * aparece longe de onde nasceu.
 *
 * Esta regra resolve a classe inteira do problema, inclusive para o que ainda
 * não existe. É um dos poucos lugares em que `!important` é a resposta certa:
 * "escondido" não é uma sugestão. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  /* `overflow: hidden` no corpo: a pagina NUNCA rola. Rola a lista de conversas
     e rola a conversa, cada uma por si. Sem isto, no celular o teclado empurra
     a pagina inteira e o campo de texto sai da tela — o defeito classico de
     chat na web. */
  overflow: hidden;
  font-family: var(--fonte);
  font-size: 15px;
  color: var(--texto);
  background: var(--fundo-app);
  -webkit-text-size-adjust: 100%;
}

/* ============================================================ a moldura */

#app {
  display: grid;
  height: 100dvh;
  /* `100dvh` e nao `100vh`: no celular, `vh` conta a tela COM a barra do
     navegador, e ai o campo de digitar fica escondido atras dela. `dvh` e a
     altura que sobra de verdade. */
  /* ====== A COLUNA DA ESQUERDA NAO ENCOLHE ======
   *
   * Pedido do dono (25/10/2026): *"a coluna do CRM não deve ser reduzida, ela
   * deve manter o mesmo tamanho (...) quando eu abrir a conversa, ela não
   * reduzir. E apenas abrir o sidebar do outro lado."*
   *
   * O defeito era meu: eu tinha escrito 28% aqui e 24% na regra com ficha, e
   * 22% na de tela larga. Três números diferentes para a mesma coluna — e aí
   * ela mudava de tamanho conforme a ficha abria e fechava, com os cartões do
   * CRM pulando de lugar.
   *
   * `--coluna-fila` e UM valor só, usado nos três estados. Quem absorve a
   * diferença é a conversa, que é elástica por natureza. */
  grid-template-columns: var(--coluna-fila) 1fr;
  /* ====== A LINHA PRECISA SER DECLARADA, SENAO ELA CRESCE ======
   *
   * Esta e a causa raiz do campo de digitar que sumia (23/10/2026). Sem
   * `grid-template-rows`, a linha da grade e `auto` — ou seja, do tamanho do
   * CONTEUDO. Com vinte mensagens na conversa, a linha ficava mais alta que a
   * tela, e `height: 100dvh` no container nao impedia nada: o conteudo
   * simplesmente transbordava, levando a barra de digitar para baixo do
   * rodape.
   *
   * `minmax(0, 1fr)` diz duas coisas: a linha ocupa a altura toda (`1fr`) e
   * PODE encolher ate zero (`minmax(0, ...)`), que e o que permite aos filhos
   * rolarem por dentro em vez de esticar a grade. Sem o `0` no minimo, o `1fr`
   * sozinho ainda respeitaria o conteudo minimo e o defeito voltaria. */
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "lista conversa";
}

/* ====== A FICHA E A TERCEIRA COLUNA, E PRECISA DIZER ISSO ======
 *
 * Defeito achado em 23/10/2026. `#ficha` e o terceiro filho de uma grade de
 * DUAS colunas e nao declarava area nenhuma — entao, ao abrir, o navegador a
 * punha numa SEGUNDA LINHA, embaixo da lista, e a conversa inteira era
 * espremida para a metade de cima da tela.
 *
 * O `minmax` na primeira coluna entrou junto: com `30%` fixo, numa tela larga
 * a lista ficava com 500px de nome de cliente e sobrava pouco para a conversa;
 * numa estreita, ela sumia. */
/* DENTRO DE UM `min-width`, e nao solto. `#app.com-ficha` tem especificidade
   maior que o `#app` da regra do celular — solta, ela faria TRES COLUNAS num
   telefone de 390px. A media query resolve sem precisar de `!important`. */
@media (min-width: 1200px) {
  #app.com-ficha {
    grid-template-columns: var(--coluna-fila) minmax(0, 1fr) 320px;
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "lista conversa ficha";
  }
  #ficha { grid-area: ficha; }
}

/* ====== COM ESPAÇO, A FICHA GANHA AS DUAS COLUNAS ======
 *
 * 320px cabem uma coluna. Para o resumo à esquerda e os contratos à direita
 * (pedido de 25/10/2026) são precisos ~560px — abaixo disso cada coluna fica
 * com 150px e nome de plano não cabe.
 *
 * Por isso a largura só cresce a partir de 1500px, e abaixo disso a ficha
 * continua numa coluna só, empilhada. A conversa nunca fica com menos de 1fr:
 * ela é o que o atendente está fazendo. */
@media (min-width: 1500px) {
  #app.com-ficha { grid-template-columns: var(--coluna-fila) minmax(0, 1fr) 560px; }
}

@media (max-width: 900px) {
  #app {
    grid-template-columns: 100%;
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: "lista";
  }
  /* NO CELULAR SAO DUAS TELAS. A conversa entra deslizando por cima da lista;
     o botao de voltar a tira. `translateX` e nao `display:none` para a
     transicao existir — e porque esconder com `display` perde a posicao do
     rolamento da conversa. */
  #conversa {
    position: fixed;
    inset: 0;
    z-index: 30;
    transform: translateX(100%);
    transition: transform 0.22s ease;
  }
  body.na-conversa #conversa { transform: translateX(0); }
  .so-desktop { display: none !important; }
}

@media (min-width: 901px) {
  .so-mobile { display: none !important; }
}

/* ============================================================ coluna da esquerda */

#lista {
  grid-area: lista;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  background: var(--fundo-painel);
  border-right: 1px solid var(--borda);
}

.topo {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--cabecalho-altura);
  padding: 0 12px;
  background: var(--cabecalho);
  border-bottom: 1px solid var(--borda);
  flex: 0 0 auto;
}

.topo h1 {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- o botao redondo de icone, que repete em toda a interface ---- */
.icone {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--texto-fraco);
  cursor: pointer;
  font-size: 19px;
  line-height: 1;
  transition: background 0.12s;
}
.icone:hover { background: rgba(134, 150, 160, 0.16); }
.icone:active { background: rgba(134, 150, 160, 0.3); }
.icone[hidden] { display: none; }

/* ---- a busca ---- */
.busca {
  padding: 8px 12px;
  background: var(--fundo-painel);
  flex: 0 0 auto;
}
.busca input {
  width: 100%;
  padding: 9px 14px;
  border: 0;
  border-radius: 8px;
  background: var(--fundo-app);
  color: var(--texto);
  font: inherit;
  outline: none;
}
.busca input::placeholder { color: var(--texto-fraquinho); }

/* ---- as abas de filtro ---- */
.abas {
  display: flex;
  gap: 6px;
  padding: 2px 12px 10px;
  overflow-x: auto;
  flex: 0 0 auto;
  scrollbar-width: none;
}
.abas::-webkit-scrollbar { display: none; }

.aba {
  padding: 6px 13px;
  border: 0;
  border-radius: 14px;
  background: var(--fundo-app);
  color: var(--texto-fraco);
  font: inherit;
  font-size: 13.5px;
  white-space: nowrap;
  cursor: pointer;
}
.aba[aria-selected="true"] {
  background: color-mix(in srgb, var(--verde) 18%, transparent);
  color: var(--verde);
  font-weight: 500;
}

/* A lista plana de conversas virou o QUADRO em 23/10/2026 — as regras dela
   saíram daqui junto. O que ficou, logo abaixo, são o selo de não lidas e as
   etiquetas, que o cartão do quadro continua usando. */

/* ====== O CONTADOR DE NAO LIDAS E REDONDO, VERMELHO E PULSA ======
 *
 * Pedido do dono (26/10/2026): *"eu preciso que seja um badge redondo e que
 * ele tenha um pulsante para identificar e que ele fique na cor vermelha. Ele
 * tem que ser vermelho, independente de onde ele esteja (...) e tambem um
 * pulsante bem leve para nao pesar muito."*
 *
 * ====== POR QUE ESTE E REDONDO, SE OS OUTROS SAO QUADRADOS ======
 *
 * Nao e incoerencia: e a diferenca entre CONTAGEM e PENDENCIA.
 *
 * Os badges quadrados (botao de fila, cabecalho da coluna) dizem QUANTOS ha
 * ali. Sao informacao parada, e um quadrado assenta ao lado de um titulo sem
 * puxar o olho.
 *
 * Este diz que ALGUEM ESTA ESPERANDO RESPOSTA. E a unica coisa na tela que
 * pede acao agora, e por isso tem a forma e a cor que o olho acha sem
 * procurar — a mesma convencao de todo aplicativo de mensagem.
 *
 * VERMELHO SEMPRE. Antes ele era verde, e virava laranja quando o cartao
 * estava destacado. Duas cores para o mesmo fato faziam o atendente ter de
 * aprender a tabela; uma so nao exige aprender nada. */
/* ====== O BALAO E O PROPRIO BADGE ======
 *
 * Pedido do dono (26/10/2026): *"eu quero o balao como um badge com o contador
 * dentro e nao a pilula em volta."*
 *
 * Nao e SVG: sao tres cantos redondos e um quase reto
 * (`border-radius: 999px 999px 999px 4px`). O canto de baixo a esquerda e o
 * bico. Basta para o olho reconhecer a forma, nao custa arquivo nenhum, e o
 * numero fica numa caixa de texto normal — que e o que o deixa legivel a 11px.
 *
 * ====== ELE MORA DENTRO DO CARTAO ======
 *
 * Como expoente, meio cartao para fora, ele alargava a coluna e fazia a lista
 * rolar para o lado. Agora e irmao do horario, numa coluna propria alinhada a
 * direita: mesmo lugar em todo cartao, sem cobrir a hora e sem passar da
 * borda.
 *
 * A moldura segue o tema sozinha — `--fundo-painel` e branco no claro e escuro
 * no escuro — e existe porque o cartao em espera tem fundo alaranjado, e
 * vermelho encostado em laranja vibra. */
/* ====== O CONTADOR FICA NO PE DO CARTAO, NA COLUNA DA DIREITA ======
 *
 * Correcao do dono (26/10/2026): *"nao e exatamente embaixo do horario, mas e
 * mais abaixo, quase na margem, na mesma coluna."*
 *
 * Colado sob a hora ele brigava com ela; no pe do cartao, alinhado a direita,
 * fica no mesmo eixo vertical e no canto que o olho ja usa para a hora — mas
 * longe o bastante para as duas coisas se lerem separadas.
 *
 * `absolute` com `bottom`/`right` POSITIVOS: ele fica DENTRO da borda, entao
 * nao alarga a coluna nem faz a lista rolar para o lado — foi o estrago da
 * versao anterior. */
.q-cartao > .selo {
  position: absolute;
  right: 9px;
  bottom: 8px;
}

/* ====== O SELO DE NÃO LIDAS, MENOR ======
 * Pedido do dono (26/10/2026), junto com o do protocolo: *"no caso o badge
 * também, né, para ficar mais equilibrado, tá muito grande ali."*
 *
 * 19px de altura para um dígito era quase a altura de uma linha de texto do
 * cartão — o selo gritava mais que o nome do cliente. 16px com 9,5px de fonte
 * continua legível de longe (é cor forte sobre fundo claro, e o olho acha pela
 * cor antes de ler o número) e para de disputar a atenção.
 *
 * `min-width` IGUAL à altura: é o que faz um dígito dar um balão redondo em
 * vez de um oval — a mesma correção que o expoente do botão de fila levou. */
.selo {
  display: grid;
  place-items: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px 999px 999px 4px;
  background: var(--nao-lida);
  box-shadow: 0 0 0 1.5px var(--fundo-painel), 0 1px 2px rgba(0, 0, 0, .22);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  line-height: 1;
}

/* ====== O PULSO ======
 *
 * Ele e um ANEL num pseudo-elemento, e nao a animacao do proprio badge. Duas
 * razoes:
 *
 *   1. anima so `transform` e `opacity`, que a placa de video resolve sozinha.
 *      Animar `box-shadow` ou `width` obriga o navegador a recalcular layout a
 *      cada quadro, e numa lista de quinze cartoes isso aquece o computador do
 *      atendente a tarde inteira. Foi o "bem leve" que ele pediu.
 *   2. o numero dentro do badge nao se mexe — numero que pulsa fica dificil de
 *      ler, e ele existe para ser lido.
 *
 * Tres segundos entre pulsos: presente, sem virar pisca-pisca. */
.selo { position: relative; }
.selo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--nao-lida);
  animation: pulso-selo 3s ease-out infinite;
  /* ATRAS do selo: na frente, o anel que cresce cobriria o numero durante
     meio segundo a cada pulso. */
  z-index: -1;
  pointer-events: none;
}
@keyframes pulso-selo {
  0%   { transform: scale(1);    opacity: .55; }
  /* O anel cresce e some em meio segundo; os 2,5s seguintes sao de silencio.
     Animacao continua vira ruido num painel aberto o dia inteiro. */
  18%  { transform: scale(1.75); opacity: 0; }
  100% { transform: scale(1.75); opacity: 0; }
}

/* Quem pediu menos movimento no sistema nao ve o pulso — a cor e a forma ja
   dizem tudo que precisa ser dito. */
@media (prefers-reduced-motion: reduce) {
  .selo::after { animation: none; }
}

:root { --nao-lida: #e5342b; }
@media (prefers-color-scheme: dark) {
  /* No escuro o vermelho puro vibra contra o fundo; este e um pouco mais
     claro e menos saturado, e se le melhor. */
  :root:not([data-tema="claro"]) { --nao-lida: #ff5f52; }
}
:root[data-tema="escuro"] { --nao-lida: #ff5f52; }

/* O aviso de janela: a informacao mais importante da lista depois do nome.
   Quem nao ve isto escreve uma resposta que a Meta recusa. */
.etiqueta {
  flex: 0 0 auto;
  font-size: 11px;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--fundo-app);
  color: var(--texto-fraco);
  white-space: nowrap;
}
.etiqueta.janela-acabando { background: var(--alerta-fundo); color: var(--alerta); font-weight: 600; }
.etiqueta.janela-fechada { background: var(--alerta-fundo); color: var(--alerta); }
.etiqueta.fila { background: color-mix(in srgb, var(--verde) 14%, transparent); color: var(--verde); }

/* ---- o avatar ---- */
.avatar {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: 17px;
  color: #fff;
  background: var(--texto-fraquinho);
  overflow: hidden;
  user-select: none;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar.pequeno { width: 36px; height: 36px; font-size: 14px; }

/* ============================================================ a conversa */

#conversa {
  grid-area: conversa;
  display: flex;
  flex-direction: column;
  min-width: 0;
  /* Item de GRADE também não encolhe abaixo do conteúdo sem isto — a mesma
     regra do flexbox vale para grid. */
  min-height: 0;
  background: var(--fundo-conversa);
}

/* ====== O FUNDO COM TEXTURA, COMO O DO WHATSAPP ======
 * E um SVG embutido, e nao uma imagem baixada: duas linhas de CSS no lugar de
 * um pedido de rede de 30 KB, e ele se adapta ao modo escuro pela opacidade.
 * A textura nao e enfeite — ela separa visualmente a area de conversa do resto
 * da interface, que e o que faz o olho achar as bolhas depressa. */
/* ====== `min-height: 0` E O QUE MANTEM A BARRA NA TELA ======
 *
 * Defeito visto num print em 23/10/2026: com a conversa cheia, a barra de
 * digitar sumia para baixo do rodape — o dono relatou que "o campo esta mal
 * formatado" e que precisava diminuir muito o zoom.
 *
 * A causa e uma regra pouco obvia do flexbox: um item NAO ENCOLHE abaixo do
 * tamanho do proprio conteudo, por padrao (`min-height: auto`). Com vinte
 * mensagens, este painel cresce o quanto precisar, empurra o que vem depois, e
 * `overflow-y: auto` nunca chega a valer — nao ha o que rolar, porque o
 * elemento inteiro cresceu.
 *
 * `min-height: 0` libera o encolhimento, e `flex-basis: 0` faz a altura vir da
 * sobra em vez do conteudo. As duas juntas sao o que faz o painel rolar por
 * dentro e a barra ficar colada embaixo. */
#painel-mensagens {
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 6%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23000' stroke-opacity='.035' stroke-width='1.2'%3E%3Cpath d='M12 8c3 4 3 8 0 12M30 22c4 3 4 7 0 10M48 6c3 5 3 9 0 13M20 40c4 3 4 8 0 11M42 44c3 4 3 8 0 12'/%3E%3Ccircle cx='52' cy='32' r='2.5'/%3E%3Ccircle cx='8' cy='46' r='2'/%3E%3Ccircle cx='33' cy='6' r='1.8'/%3E%3C/g%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) #painel-mensagens { background-blend-mode: soft-light; opacity: 1; }
}

#conversa-topo {
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--cabecalho-altura);
  padding: 0 12px;
  background: var(--cabecalho);
  border-bottom: 1px solid var(--borda);
  flex: 0 0 auto;
}

#conversa-titulo { flex: 1 1 auto; min-width: 0; }
#conversa-titulo .nome {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* A segunda linha do cabecalho e onde aparece "digitando...", como no
   WhatsApp — e nao uma bolha extra, que empurraria a conversa. */
#conversa-titulo .sob {
  font-size: 12.5px;
  color: var(--texto-fraco);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#conversa-titulo .sob.ativo { color: var(--verde); }

/* ---- a bolha ---- */
.bolha-fora {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  margin-bottom: 8px;
}
/* ====== O AVATAR DE QUEM FALA ======
 *
 * Pedido do dono (26/10/2026): as iniciais de quem falou ao lado da bolha,
 * como no WhatsApp. Interno — o cliente ve a foto do perfil comercial, nao
 * isto.
 *
 * `row-reverse` na saida poe o avatar a DIREITA sem precisar de outro HTML: a
 * mesma marcacao serve aos dois lados, e so a ordem muda. */
.bolha-fora.saida { flex-direction: row-reverse; justify-content: flex-start; }

.bolha-avatar {
  flex: 0 0 auto;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  line-height: 1;
  user-select: none;
}
/* ====== O LUGAR RESERVADO ======
 *
 * Desde 27/10/2026 o avatar aparece uma vez por rodada, na ULTIMA bolha —
 * pedido do dono, e e como o WhatsApp faz. As bolhas anteriores da mesma
 * rodada levam este `vazio`: ele ocupa os 26px e nao se ve.
 *
 * `visibility: hidden` e nao `display: none` DE PROPOSITO: o segundo tiraria o
 * elemento da linha do flex e cada bolha sem avatar escorregaria 32px para o
 * lado, deixando a rodada em escada. */
.bolha-avatar.vazio { visibility: hidden; }

.bolha-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

/* No celular o avatar come largura que a bolha precisa mais. */
@media (max-width: 700px) {
  .bolha-avatar { width: 22px; height: 22px; font-size: 9px; }
}

/* ====== `white-space: pre-wrap` NAO PODE FICAR NA BOLHA ======
 *
 * Defeito achado com o sistema em uso, 23/10/2026, olhando um print: a palavra
 * "Chegou" ocupava um cartao de 130px de altura, e o dono teve de diminuir o
 * zoom do navegador para caber a conversa.
 *
 * A causa: `pre-wrap` preserva espaco em branco — e isso inclui a INDENTACAO
 * DO PROPRIO HTML. Cada quebra de linha e cada tabulacao do template virava
 * espaco de verdade dentro da bolha. O texto da mensagem ocupava duas linhas e
 * o resto era o recuo do meu codigo.
 *
 * O conserto: a bolha volta ao normal, e o `pre-wrap` fica SO no texto da
 * mensagem (`.bolha-texto`), que e o unico lugar onde ele e necessario — para
 * preservar as quebras de linha que o CLIENTE digitou. */
.bolha {
  position: relative;
  max-width: min(62ch, 76%);
  min-width: 76px;
  padding: 6px 9px 7px;
  border-radius: var(--r-bolha);
  background: var(--bolha-entrada);
  box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
  overflow-wrap: anywhere;
  line-height: 1.34;
  font-size: 14.2px;
}

.bolha-texto {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.saida .bolha { background: var(--bolha-saida); }

/* O RABINHO da primeira bolha de cada lado — o detalhe que faz o olho dizer
   "isto e WhatsApp". Feito com borda, sem imagem. */
.bolha-fora.primeira .bolha { border-top-left-radius: 0; }
.bolha-fora.saida.primeira .bolha { border-top-left-radius: var(--r-bolha); border-top-right-radius: 0; }

.bolha-fora.primeira .bolha::before {
  content: "";
  position: absolute;
  top: 0;
  left: -8px;
  width: 8px;
  height: 13px;
  background: var(--bolha-entrada);
  clip-path: polygon(0 0, 100% 0, 100% 100%);
}
.bolha-fora.saida.primeira .bolha::before {
  left: auto;
  right: -8px;
  background: var(--bolha-saida);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}

/* A hora e o visto ficam DENTRO da bolha, no canto, como no WhatsApp. O
   `float` reserva o espaco no fim do texto para a hora nao cobrir a ultima
   palavra — e o mesmo truque que o WhatsApp usa. */
.bolha-erro {
  display: flex;
  gap: 5px;
  align-items: flex-start;
  margin-top: 4px;
  padding-top: 4px;
  border-top: 1px solid color-mix(in srgb, var(--alerta) 25%, transparent);
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--alerta);
}
.bolha-erro .ic { flex: 0 0 auto; margin-top: 1px; }

.rodape-bolha {
  float: right;
  margin: 6px -4px -4px 8px;
  font-size: 11px;
  color: var(--texto-fraquinho);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  user-select: none;
}
.visto { font-size: 13px; line-height: 1; }
.visto.lida { color: var(--visto); }
.visto.falhou { color: var(--alerta); }

.autor {
  font-size: 12px;
  font-weight: 600;
  color: var(--verde);
  margin-bottom: 2px;
}

/* A tarja de dia ("Hoje", "Ontem"), centralizada. */
.dia {
  text-align: center;
  margin: 14px 0;
}
.dia span {
  background: var(--cabecalho);
  color: var(--texto-fraco);
  font-size: 12.5px;
  padding: 5px 12px;
  border-radius: var(--r);
  box-shadow: var(--sombra);
}

/* ====== O BOTAO DE COPIAR ======
 * Pedido do dono: *"quando colocar um QR Code, um link, ou alguma coisa
 * escrita, que eu tenha um botao de copiar (...) eu mandei um Pix pro cliente,
 * uma chave Pix, entao so o botaozinho de copiar."*
 *
 * ATENCAO, E ISTO ESTA NO README: este botao e DO NOSSO LADO. Ele serve ao
 * ATENDENTE (copiar a chave que o cliente mandou, ou reaproveitar a que ele
 * mesmo enviou). No WhatsApp DO CLIENTE nao da para pintar botao em mensagem
 * de texto — botao de copiar lá existe so em MODELO aprovado, do tipo
 * "copy code". Ver WHATSAPP-OFICIAL.md. */
.copiavel {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 4px;
  padding: 7px 8px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--texto) 6%, transparent);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 12.5px;
}
.copiavel code {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.copiar {
  flex: 0 0 auto;
  border: 0;
  border-radius: 5px;
  padding: 4px 9px;
  background: var(--verde);
  color: #fff;
  font: inherit;
  font-size: 11.5px;
  font-family: var(--fonte);
  cursor: pointer;
}
.copiar.feito { background: var(--texto-fraco); }

/* ---- a barra de digitar ---- */
#barra {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 12px;
  background: var(--cabecalho);
  flex: 0 0 auto;
  /* O recorte do iPhone come a barra de digitar sem isto. */
  padding-bottom: max(8px, env(safe-area-inset-bottom));
}

#texto {
  flex: 1 1 auto;
  min-height: 42px;
  max-height: 140px;
  padding: 11px 14px;
  border: 0;
  border-radius: 21px;
  background: var(--fundo-painel);
  color: var(--texto);
  font: inherit;
  resize: none;
  outline: none;
  line-height: 1.3;
}
#texto::placeholder { color: var(--texto-fraquinho); }
#texto:disabled { opacity: 0.6; cursor: not-allowed; }

#enviar {
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border: 0;
  border-radius: 50%;
  background: var(--verde);
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  display: grid;
  place-items: center;
}
#enviar:disabled { background: var(--texto-fraquinho); cursor: not-allowed; }

/* ====== ANEXAR, GRAVAR E COLAR ======
 *
 * Pedido do dono (27/10/2026): *"crie a opcao tambem de enviar audio, a opcao
 * de anexar um arquivo, a opcao de colar um print."*
 *
 * Os dois botoes novos usam o `.icone` de toda a casa, sem nada por cima: na
 * barra de digitar eles ficam ao lado do recado e do raio, e um estilo proprio
 * so faria o quarto botao parecer de outro sistema.
 *
 * O ESTADO DE GRAVANDO E A EXCECAO, e precisa ser visivel de longe: enquanto
 * ele piscar, o microfone da mesa esta aberto. */
#botao-microfone.gravando {
  background: var(--alerta-fundo);
  color: var(--alerta);
  animation: pulsa-gravando 1.1s ease-in-out infinite;
}
@keyframes pulsa-gravando {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}
/* Quem desligou animacao no sistema continua vendo a COR, que e o que informa;
   o pulso e reforco, e nao o recado. */
@media (prefers-reduced-motion: reduce) {
  #botao-microfone.gravando { animation: none; }
}

/* ====== A JANELA DE CONFERIR ANTES DE ENVIAR ======
 *
 * Arquivo que sai para o cliente nao volta, entao a previa e grande o
 * suficiente para a pessoa RECONHECER o que esta mandando. Um print trocado se
 * descobre olhando, e nao lendo o nome do arquivo. */
.midia-conferir {
  margin: 2px 0 14px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  overflow: hidden;
  background: var(--fundo-painel);
}
.midia-previa {
  display: block;
  width: 100%;
  /* 46vh deixa a legenda e os botoes a vista sem rolagem numa tela de
     notebook: previa que empurra o botao Enviar para fora da tela faz a pessoa
     rolar para confirmar, e e ai que ela confirma sem olhar. */
  max-height: 46vh;
  object-fit: contain;
  background: var(--fundo);
}
.midia-previa-audio {
  display: block;
  width: 100%;
  padding: 12px;
  box-sizing: border-box;
}
.midia-previa-arquivo {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px;
  color: var(--texto-fraco);
}
.midia-previa-arquivo b {
  display: block;
  color: var(--texto);
  font-size: 13.5px;
  /* Nome comprido quebra em vez de empurrar o cartao: "comprovante de pagamento
     outubro 2026 assinado.pdf" e um nome comum de verdade. */
  overflow-wrap: anywhere;
}
.midia-previa-arquivo span {
  font-size: 11.5px;
  color: var(--texto-fraco);
}
.midia-conferir-de {
  padding: 7px 11px;
  border-top: 1px solid var(--borda);
  font-size: 11px;
  color: var(--texto-fraco);
  overflow-wrap: anywhere;
}

/* ====== DE ONDE VEM O ANEXO ======
 *
 * Duas escolhas, lado a lado e do mesmo tamanho: nenhuma das duas e "a
 * principal". No celular elas empilham, porque dois cartoes de 50% num
 * telefone viram dois cartoes ilegiveis. */
.origem-anexo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 4px 0 12px;
}
.origem-opcao {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  text-align: center;
  padding: 16px 10px;
  border: 1px solid var(--borda);
  border-radius: var(--r);
  background: var(--fundo);
  font: inherit;
  color: var(--texto);
  cursor: pointer;
}
.origem-opcao:hover { border-color: var(--verde); background: color-mix(in srgb, var(--verde) 7%, transparent); }
.origem-opcao b { font-size: 13.5px; }
.origem-opcao span { font-size: 11.5px; color: var(--texto-fraco); line-height: 1.35; }
.origem-opcao svg { color: var(--verde); }

@media (max-width: 560px) {
  .origem-anexo { grid-template-columns: 1fr; }
  .origem-opcao { flex-direction: row; text-align: left; padding: 12px; }
  .origem-opcao b, .origem-opcao span { flex: 0 1 auto; }
}

/* ====== A GRADE DA BIBLIOTECA ======
 *
 * Cartao com miniatura, e nao lista de nomes: a pessoa reconhece a tabela de
 * precos pela imagem muito antes de ler "tabela-precos-2026". E a regra do
 * ESTILO.md — cartao, nao tabela. */
.bib-grade {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 9px;
  max-height: 46vh;
  overflow-y: auto;
  padding: 2px;
  margin-bottom: 10px;
}
.bib-cartao {
  display: flex;
  flex-direction: column;
  text-align: left;
  padding: 0;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--fundo);
  font: inherit;
  color: var(--texto);
  cursor: pointer;
  overflow: hidden;
}
.bib-cartao:hover:not(:disabled) { border-color: var(--verde); }
.bib-cartao:disabled { opacity: .45; cursor: not-allowed; }
.bib-thumb {
  width: 100%;
  height: 94px;
  object-fit: cover;
  display: block;
  background: var(--fundo-painel);
}
.bib-corpo { padding: 7px 8px 8px; min-width: 0; }
.bib-linha1 { display: flex; align-items: center; gap: 5px; margin-bottom: 3px; }
.bib-linha1 b {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bib-frase {
  font-size: 11.5px;
  color: var(--texto-fraco);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.bib-frase.fraca { font-style: italic; opacity: .6; }
.bib-usos { margin-top: 4px; font-size: 10.5px; color: var(--texto-fraco); opacity: .8; }

/* O aviso de janela fechada, acima da barra: nao da para esconder e nao da
   para ignorar, porque com ela fechada o texto nao sai. */
#aviso-janela {
  padding: 10px 14px;
  background: var(--alerta-fundo);
  color: var(--alerta);
  font-size: 13.5px;
  border-top: 1px solid var(--borda);
  flex: 0 0 auto;
}
#aviso-janela[hidden] { display: none; }

/* ============================================================ a ficha do cliente */

/* No desktop e uma terceira coluna; no celular e uma gaveta que sobe. A mesma
   marcacao serve aos dois — e por isso que a ficha e feita de "blocos" que o
   modulo manda, e nao de campos fixos. */
#ficha {
  background: var(--fundo-painel);
  border-left: 1px solid var(--borda);
  overflow-y: auto;
  padding: 14px;
}
#ficha[hidden] { display: none; }

@media (max-width: 1199px) {
  #ficha {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(360px, 92vw);
    z-index: 40;
    box-shadow: var(--sombra-alta);
  }
}

/* ============================================================ a ficha que dobra
 *
 * Cada bloco é um `<details>`: fechado mostra um resumo de uma linha, aberto
 * mostra tudo. Com cinco blocos abertos a coluna virava parede de texto.
 *
 * Linha de ficha NÃO é linha de tabela: é rótulo pequeno e fraco em cima do
 * valor quando o espaço aperta, lado a lado quando cabe. Tabela de duas colunas
 * numa coluna de 320px deixa o valor com 40px de largura. */
.bloco {
  margin-bottom: 10px;
  border: 1px solid var(--borda);
  border-top-width: 3px;
  border-top-style: solid;
  border-top-color: var(--borda);
  border-radius: var(--r);
  background: var(--fundo-painel);
  overflow: hidden;
}

.bloco > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.bloco > summary::-webkit-details-marker { display: none; }
/* ====== O HOVER NAO PODE APAGAR A COR DO CABECALHO ======
 *
 * Relato do dono (26/10/2026): *"quando o mouse passa por cima dele, ele fica
 * meio esbranquicado e fica bem feio (...) fica branco e a fonte ja e branca,
 * fica tudo mal feito."*
 *
 * Esta regra era de quando o cabecalho tinha fundo claro: um veu de 4% dava o
 * realce. Com o cabecalho agora SOLIDO, ela virou um estrago — `:hover` tem
 * mais peso que o seletor sem `:hover`, entao o `background` dela SUBSTITUIA a
 * cor do bloco por um veu quase transparente. Resultado: ao passar o mouse, a
 * cor sumia e sobrava texto branco sobre o fundo da pagina.
 *
 * O realce agora e `filter: brightness`, la embaixo, junto das cores solidas:
 * ele CLAREIA a propria cor em vez de troca-la, entao nunca pode apagar o
 * contraste com o texto. */
.bloco > summary:hover { filter: brightness(1.1); }
.bloco > summary:focus-visible { outline: 2px solid var(--verde); outline-offset: -2px; }

/* ====== MAIÚSCULAS NOS TÍTULOS DOS BLOCOS (26/10/2026) ======
 *
 * Pedido do dono: *"a mesma coisa para os títulos de resumo, contratos,
 * faturas, ordem de serviço, tudo maiúsculo."*
 *
 * `.bloco-nome` é o título de TODO bloco da ficha, então os quatro que ele
 * citou entram de uma vez — e o quinto, escrito amanhã, já nasce certo. É a
 * mesma decisão do `.rs-secao h4` e do `.rs-abas .aba`, que já eram maiúsculos:
 * agora a ficha inteira fala com uma voz só.
 *
 * O `letter-spacing` é maior aqui (.04em) que nos nomes das filas (.02em),
 * porque este texto não tem limite de linhas para respeitar — em caixa alta,
 * um pouco de espaço entre as letras é o que separa "FATURAS" de um borrão. */
.bloco-nome {
  font-size: 13px;
  font-weight: 650;
  flex: 0 0 auto;
  text-transform: uppercase;
  letter-spacing: .04em;
}
/* O resumo some quando o bloco abre: ali embaixo está a informação inteira, e
   repetir o começo dela no cabeçalho é ruído. */
.bloco-resumo {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 11.5px;
  color: var(--texto-fraquinho);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}
.bloco[open] .bloco-resumo { display: none; }
.bloco-seta { flex: 0 0 auto; opacity: .4; transition: transform .15s; display: inline-flex; }
.bloco[open] .bloco-seta { transform: rotate(90deg); }
/* ====== A FAIXA BRANCA ERA ESTA LINHA ======
 * Relato do dono (26/10/2026): *"botoes de cadastro e fidelidade que estao com
 * uma faixa branca dentro dele."*
 *
 * Era a borda de baixo do cabecalho: 1px na cor CLARA da borda, logo abaixo de
 * um cabecalho agora solido e escuro. Lia-se como um risco branco dentro do
 * botao. Com a cor do proprio bloco escurecida, ela separa sem aparecer. */
.bloco[open] > summary { border-bottom: 1px solid rgba(0, 0, 0, .18); }

.bloco-corpo { padding: 4px 0 2px; }

/* ====== O RÓTULO VAI ACIMA DO VALOR ======
 *
 * Pedido do dono (25/10/2026): *"a senha do Wi-Fi, sempre mostrando completo
 * numa única linha para não ficar quebrado, porque fica bem feio (...) ou
 * melhor ainda, você coloca acima do campo, assim fica mais fácil, mais
 * organizado."*
 *
 * Lado a lado, o rótulo comia 38% da coluna e sobravam ~160px para o valor —
 * largura em que "ml.t5e.r1e.anapatriciadeoliveira" quebra em três linhas e a
 * senha do Wi-Fi fica ilegível.
 *
 * Empilhado, o valor usa a largura toda e cabe inteiro. É também o padrão de
 * ficha que todo mundo conhece de formulário. */
.bloco-linha {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 6px 11px;
  font-size: 13px;
}
.bloco-linha + .bloco-linha { border-top: 1px solid color-mix(in srgb, var(--borda) 55%, transparent); }
.bloco-rotulo {
  color: var(--texto-fraquinho);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.bloco-valor {
  min-width: 0;
  overflow-wrap: anywhere;
  line-height: 1.35;
}
.bloco-linha.alerta .bloco-valor { color: var(--alerta); font-weight: 600; }

/* Um bloco DENTRO de outro (o Wi-Fi dentro do contrato) perde a moldura
   própria: duas bordas encaixadas viram uma moldura dupla, que é feia e não
   acrescenta nada. Fica a faixa colorida e um recuo. */
.bloco .bloco {
  margin: 6px 11px 8px;
  border-width: 1px;
  border-top-width: 2px;
  border-radius: 8px;
  background: var(--fundo-app);
}
.bloco .bloco > summary { padding: 7px 9px; }
.bloco .bloco .bloco-nome { font-size: 12px; }

@media (max-width: 560px) {
  .bloco-linha { flex-direction: column; gap: 1px; }
  .bloco-rotulo { flex: none; }
}

.bloco-acoes {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border-top: 1px solid var(--borda);
  background: var(--fundo-app);
}

/* ---- o recado interno ----
   Atravessa a conversa inteira, amarelado e centralizado: ele NÃO é fala de
   ninguém, é anotação da equipe. Desenhá-lo como bolha de saída faria o
   atendente achar, de relance, que aquilo foi enviado ao cliente — e num
   atendimento essa confusão custa caro. */
.recado-interno {
  margin: 10px auto;
  max-width: min(70ch, 86%);
  padding: 8px 11px;
  border-radius: 8px;
  border: 1px dashed #c9a227;
  background: color-mix(in srgb, #f0c040 16%, var(--fundo-painel));
  font-size: 13px;
  line-height: 1.4;
}
.recado-topo {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #a07c12;
  font-weight: 600;
  margin-bottom: 4px;
}
.recado-topo .icone { width: 18px; height: 18px; margin-left: auto; color: #a07c12; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .recado-interno { background: rgba(240, 192, 64, 0.1); }
  :root:not([data-tema="claro"]) .recado-topo { color: #e0b84a; }
}

/* ============================================================ a tela de atendimento
 *
 * Arranjo de 25/10/2026: botões de fila em cima, UMA fila à esquerda, o CRM à
 * direita. O cliente continua sendo atendido pela fila; o CRM é classificação
 * por cima, para gestão.
 *
 * A fila fica estreita e fixa; o CRM leva o resto e rola na horizontal se o
 * dono criar muitas colunas. */

/* ---- os botões das filas ----
 *
 * Quadrados, não pílulas, e TODOS cabem sem rolar — pedido do dono em
 * 25/10/2026: *"deixe esses botões num formato quadrado, sem ser pílula (...) e
 * que todos eles apareçam, sem precisar scrollar. Até porque não dá, aqui tá
 * estourando."*
 *
 * A grade de cinco colunas iguais é o que garante isso: cada botão leva um
 * quinto da largura e o texto quebra em duas linhas em vez de empurrar o
 * vizinho para fora. Fonte menor pelo mesmo motivo. */
#filas {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  padding: 2px 12px 10px;
  flex: 0 0 auto;
}

.fila-botao {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 3px;
  min-width: 0;
  min-height: 46px;
  padding: 6px 8px;
  border: 1px solid var(--borda);
  /* Quadrado de canto suave: 6px. Pílula (999px) saiu a pedido dele. */
  border-radius: 6px;
  border-left: 3px solid var(--borda);
  background: var(--fundo-painel);
  color: var(--texto-fraco);
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: border-color .12s, background .12s, color .12s;
}
/* ====== O RECORTE DE DUAS LINHAS E SO DO ROTULO ======
 *
 * Defeito que o dono fotografou (26/10/2026): *"esse badge, ele ta um lado
 * quadrado e o outro arredondado."*
 *
 * Nao era o `border-radius` — era CORTE. Esta regra pegava `span` solto, e o
 * badge mora dentro de um `<span class="fila-contas">`. Entao o
 * `overflow: hidden` do recorte de duas linhas clipava o anel branco do badge
 * no lado direito, e o `-webkit-line-clamp` ainda o tratava como texto.
 *
 * Um lado parecia arredondado (o esquerdo, intacto) e o outro reto (o direito,
 * cortado na borda do contêiner). Daí a impressão de deformado.
 *
 * `:not(.fila-contas)` devolve a regra ao rotulo, que e para quem ela foi
 * escrita. LICAO: seletor de elemento solto (`span`) dentro de um componente
 * alcanca tudo que vier a ser posto la dentro depois — inclusive o que nao
 * existia quando a regra foi escrita. */
/* ====== O RECORTE DE DUAS LINHAS E SO DO ROTULO, E AGORA ELE TEM NOME ======
 *
 * Esta regra ja me mordeu DUAS vezes, e da segunda o dono fotografou: o
 * expoente vermelho esticado atravessando o botao inteiro.
 *
 * Primeira versao: `span` solto — pegava o conteiner dos badges e cortava o
 * anel deles. Eu "consertei" com `:not(.fila-contas)`, que resolveu aquele
 * caso e deixou o furo aberto: quando criei o `.fila-expoente`, tambem um
 * span, ele passou a herdar `width: 100%` e virou uma faixa vermelha.
 *
 * LICAO: `:not()` remenda o caso conhecido; o que conserta e NOMEAR o alvo.
 * Agora a regra pede `.fila-nome` — o que entrar no botao amanha nao herda
 * nada por acidente. */
.fila-nome {
  /* Duas linhas no máximo: "Contato após expediente" cabe, e nada estoura. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 100%;
  /* ====== MAIÚSCULAS NOS NOMES DAS FILAS (26/10/2026) ======
   *
   * Pedido do dono: *"deixe tudo maiúsculo, os nomes (...) aguardando
   * atendimento, meus atendimentos, pós-expediente e finalizadas, tudo
   * maiúsculo. Sem quebrar em mais de duas linhas."*
   *
   * NO CSS, e não escrevendo os nomes em caixa alta em `FILAS`: aqueles mesmos
   * nomes viajam para a notificação do navegador e para o `title`, e lá o
   * maiúsculo grita. É a decisão que o `.rs-secao h4` já tomou neste arquivo —
   * *"o `uppercase` do CSS unifica sem o módulo ter de se preocupar"*.
   *
   * E AS DUAS LINHAS JÁ ESTAVAM GARANTIDAS pelo `line-clamp` acima — ele
   * passou a importar mais, porque maiúscula é mais larga que minúscula e
   * "AGUARDANDO ATENDIMENTO" ocupa duas linhas onde a versão normal ocupava
   * uma. O `letter-spacing` fica pequeno de propósito: em caixa alta ele abre
   * a palavra, e abrir demais empurraria para a terceira linha. */
  text-transform: uppercase;
  letter-spacing: .02em;
}
/* O contêiner dos badges nao recorta nada: o anel que destaca o badge precisa
   transbordar um pouco para ser visto. */
.fila-contas { overflow: visible; }
/* ====== AS FILAS EM COR SOLIDA ======
 *
 * Pedido do dono (26/10/2026): *"os cards da URA, aguardando, finalizados,
 * pos-expediente, etc., seja a cor solida. Ai voce so ajusta a cor da fonte
 * para ficar legal, tanto no escuro como no claro."*
 *
 * Antes a cor era so a borda e um fundo de 12%. Com seis botoes lado a lado,
 * seis tons pastel se parecem, e o olho tinha de LER para achar a fila — que e
 * justamente o que a cor deveria evitar.
 *
 * O TEXTO VAI EM BRANCO, e por isso os tons de `--cor` de cada fila sao
 * escolhidos escuros o bastante para dar contraste. Nos dois temas: cor solida
 * nao depende do fundo da pagina, entao ela se comporta igual no claro e no
 * escuro — e essa e metade da razao de ela ser melhor aqui. */
.fila-botao {
  background: var(--cor);
  border-color: var(--cor);
  border-left-color: var(--cor);
  color: #fff;
}
.fila-botao span { color: #fff; }

/* NAO ESCOLHIDA fica mais apagada, e nao de outra cor: assim a fila continua
   reconhecivel pela cor mesmo quando nao e a que esta aberta. */
.fila-botao:not([aria-selected="true"]) { opacity: .62; }
.fila-botao:hover { opacity: 1; filter: brightness(1.08); }

.fila-botao[aria-selected="true"] {
  opacity: 1;
  /* O anel marca a escolhida sem mexer na cor dela. */
  box-shadow: 0 0 0 2px var(--fundo-app), 0 0 0 4px var(--cor);
}
/* ====== O BADGE PRECISA SE DESTACAR DO CABECALHO ======
 *
 * Pedido do dono (26/10/2026): *"como o badge esta na mesma cor, precisa ter
 * um destaque. Entao coloca no circulo uma margem branca para destacar do
 * badge (...) para destacar o badge do cabecalho do card."*
 *
 * Com o botao agora em cor solida, o badge na MESMA cor sumia dentro dele. O
 * anel branco (a cor do painel, para funcionar nos dois temas) recorta o badge
 * do fundo — e o badge passa a ser branco com o numero na cor, que e o maior
 * contraste possivel sem inventar uma terceira cor. */
.fila-conta {
  /* ====== QUADRADO DE PONTAS SUAVES, E NAO PILULA ======
   *
   * Relato do dono (26/10/2026): *"ele ta num formato estranho, parece
   * deformado (...) eu acho melhor ele um quadrado com as pontas levemente
   * arredondadas, mas nao deformado do jeito que ta."*
   *
   * O defeito era `border-radius: 999px` com so o padding dando largura: com
   * UM digito saia um circulo apertado, com DOIS uma pilula esticada, e com
   * tres outra coisa. Tres formas para o mesmo elemento.
   *
   * `min-width` igual a `height` fixa a forma: um digito da um quadrado
   * perfeito, e so a partir de tres digitos ele cresce para o lado — e cresce
   * como retangulo, nao como pilula. */
  font-style: normal;
  font-size: 11px;
  font-weight: 800;
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 5px;
  background: var(--fundo-painel);
  color: var(--cor);
  box-shadow: 0 0 0 1.5px var(--fundo-painel);
  align-self: flex-end;
}

/* ---- a área: metade fila, metade CRM ---- */
#quadro {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  /* Meio a meio, como ele pediu: *"e ficar metade, metade. Não precisa esse
     tamanho todo para fila de atendimento."* */
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 12px 12px;
}

.q-fila, .q-coluna {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-top: 3px solid var(--cor);
  border-radius: var(--r);
}

.q-crm { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.q-crm-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px 7px;
  flex: 0 0 auto;
}
.q-crm-topo b { font-size: 12.5px; }
.q-crm-topo .ajuda { flex: 1 1 auto; margin: 0; font-size: 10.5px; }
.q-crm-topo .icone { width: 26px; height: 26px; }

/* ====== AS COLUNAS DO CRM EMPILHAM NA VERTICAL ======
 *
 * Pedido do dono: *"a coluna deve ficar na vertical e não na horizontal."*
 *
 * Com metade da tela e três ou quatro assuntos, lado a lado daria ~110px por
 * coluna — largura em que nome de cliente não cabe. Empilhadas, cada uma usa a
 * largura toda e rola por dentro; o conjunto rola na vertical conforme ele
 * cria mais. */
.q-crm-colunas {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* ====== AS COLUNAS DIVIDEM A ALTURA ======
 *
 * Pedido do dono (25/10/2026): *"o card dele deve ser proporcional à
 * quantidade, não deixar ali um vazio. Se tem um, ele vai ocupar toda a coluna.
 * Se tem dois, divide em dois."*
 *
 * `flex: 1 1 0` é o que faz isso: cada coluna pede zero de base e cresce em
 * partes iguais, então N colunas viram N fatias da altura — sem sobra no fim.
 * O `min-height` impede que oito colunas virem oito tirinhas ilegíveis; a
 * partir daí o conjunto rola. */
.q-crm-colunas .q-coluna {
  flex: 1 1 0;
  min-height: 110px;
}

.q-topo {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px 6px;
  flex: 0 0 auto;
  border-bottom: 1px solid var(--borda);
}
.q-topo b {
  font-size: 12px;
  font-weight: 650;
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* MAIÚSCULAS também no cabeçalho da coluna aberta — é o MESMO nome do botão
     da fila, e deixar um em caixa alta e o outro não faria parecer que são
     duas coisas. Aqui é uma linha só (`nowrap`), com reticências. */
  text-transform: uppercase;
  letter-spacing: .02em;
}
/* ====== O MESMO BADGE QUADRADO DOS BOTOES DE FILA ======
 *
 * Relato do dono (26/10/2026): *"ele ta num formato estranho, parece
 * deformado."* Eu havia consertado `.fila-conta` e esqueci desta — sao duas
 * classes para o mesmo elemento visual, em dois lugares da tela.
 *
 * O defeito era `border-radius: 999px` com a largura vindo so do padding: um
 * digito dava circulo apertado, dois davam pilula esticada. `min-width` igual
 * a `height` fixa a forma; so a partir de tres digitos ele cresce, e cresce
 * como retangulo. */
.q-conta {
  font-size: 10.5px;
  font-weight: 800;
  display: inline-grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 5px;
  color: var(--cor);
  background: color-mix(in srgb, var(--cor) 16%, transparent);
  flex: 0 0 auto;
}

.q-pilha {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 7px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  transition: background .12s, box-shadow .12s;
}
.q-pilha.sobre {
  background: color-mix(in srgb, var(--cor) 12%, transparent);
  box-shadow: inset 0 0 0 2px var(--cor);
  border-radius: 6px;
}

.q-vazia {
  padding: 12px 10px;
  text-align: center;
  color: var(--texto-fraco);
  font-size: 11.5px;
  line-height: 1.5;
}

.q-cartao {
  /* ====== O CARTAO NAO TRANSBORDA ======
   * Eu tinha posto `overflow: visible` para o selo subir para fora da borda, e
   * o dono viu o estrago: *"o card nao e para crescer, para scrollar
   * horizontal."* Elemento posicionado para fora alarga a coluna inteira.
   * O selo voltou para dentro — ver `.q-canto`. */
  position: relative;
  background: var(--fundo-painel);
  border: 1px solid var(--borda);
  border-radius: 9px;
  padding: 8px 9px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.q-cartao:hover { border-color: var(--cor); box-shadow: var(--sombra); }
.q-cartao[aria-current="true"] { border-color: var(--cor); box-shadow: inset 3px 0 0 var(--cor); }
.q-cartao.arrastando { opacity: .45; transform: scale(.98); }

.q-linha1 { display: flex; align-items: center; gap: 6px; min-width: 0; }
.q-canal { flex: 0 0 auto; display: inline-flex; opacity: .9; }
.q-canal.whatsapp { color: #25d366; }
.q-canal.instagram { color: #e1306c; }
.q-nome {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.q-hora { flex: 0 0 auto; font-size: 10px; color: var(--texto-fraco); }

.q-previa {
  font-size: 11.5px;
  color: var(--texto-fraco);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
.q-pe { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }

.etiqueta.fora-hora { background: color-mix(in srgb, #8e24aa 16%, transparent); color: #8e24aa; font-weight: 600; }
.etiqueta.crm-marca {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  background: color-mix(in srgb, var(--cor) 16%, transparent);
  color: var(--cor);
  font-weight: 600;
}

/* ====== O X QUE TIRA DO QUADRO ======
 *
 * Nasce quase invisivel e so acende no hover do cartao. A razao: ele mora
 * DENTRO de uma etiqueta pequena, e um X sempre aceso ali disputaria a atencao
 * com o nome da coluna, que e a informacao. Aceso no hover, ele aparece quando
 * a mao ja esta no cartao — e so entao serve para alguma coisa.
 *
 * `opacity` em vez de `display:none` porque assim o tamanho da etiqueta nao
 * muda quando o X aparece: etiqueta que cresce no hover empurra as vizinhas e
 * faz o alvo fugir do cursor. */
.etiqueta.crm-marca .crm-tirar {
  display: inline-grid;
  place-items: center;
  width: 15px;
  height: 15px;
  margin: 0 -2px 0 1px;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  opacity: 0;
  cursor: pointer;
  transition: opacity .12s, background .12s;
}
.q-cartao:hover .crm-tirar,
.q-cartao:focus-within .crm-tirar { opacity: .6; }
.etiqueta.crm-marca .crm-tirar:hover { opacity: 1; background: color-mix(in srgb, var(--cor) 28%, transparent); }

/* ---- estreito: a fila por cima, o CRM embaixo ---- */
@media (max-width: 1100px) {
  #quadro {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(160px, 44%) minmax(0, 1fr);
  }
}

/* Abaixo de 760px os cinco botoes nao cabem em cinco colunas sem virar
   duas letras cada. Viram duas fileiras, que e o unico jeito de continuarem
   TODOS visiveis — que e o que o dono pediu. */
@media (max-width: 760px) {
  #filas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ============================================================ a linha do tempo
 *
 * Aparece no modal de encerrar. Serve para o atendente lembrar o que aconteceu
 * sem rolar quarenta mensagens para tras — sem ela, o campo "o que foi feito"
 * seria preenchido com "resolvido" para sempre. */
.linha-tempo {
  background: var(--fundo-app);
  border: 1px solid var(--borda);
  border-radius: var(--r);
  padding: 10px 12px;
  margin-bottom: 14px;
}
.linha-tempo-topo {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-fraco);
  padding-bottom: 7px;
  margin-bottom: 7px;
  border-bottom: 1px solid var(--borda);
}
.linha-tempo-topo .ic { opacity: .7; }
.linha-tempo-item {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12.5px;
  padding: 2.5px 0;
}
.linha-tempo-item span:last-child { color: var(--texto-fraco); white-space: nowrap; }

/* ---- a lista de recados dentro do modal ---- */
.recados-lista {
  max-height: 48vh;
  overflow-y: auto;
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.nota-clicavel {
  display: block;
  width: 100%;
  text-align: left;
  font: inherit;
  cursor: pointer;
  border: 1px solid var(--borda);
  transition: border-color .12s, background .12s;
}
.nota-clicavel:hover { border-color: var(--verde); background: color-mix(in srgb, var(--verde) 6%, transparent); }
/* O da conversa que está aberta agora, para não se perder no meio dos outros. */
.nota-daqui { box-shadow: inset 3px 0 0 var(--verde); }

/* ============================================================ lista de cadastro
 *
 * Uma linha por item, com os botões à direita. É o contrário da tabela: sem
 * cabeçalho, sem colunas vazias, e funciona igual no celular. */
.item-lista {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--borda);
}
.item-lista:last-child { border-bottom: 0; }
.item-nome {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.item-lista.apagado .item-nome { opacity: .5; text-decoration: line-through; }
.item-lista .icone { width: 30px; height: 30px; flex: 0 0 auto; }

/* ====== A LISTA DOS APPS EXTERNOS ======
 * Mesma linha de `.item-lista`, dentro de uma moldura: aqui cada item tem duas
 * linhas de texto (permissoes, contagem, ultima falha) e sem a moldura a lista
 * encostava no titulo da tela.
 *
 * `desligado` nao e `apagado`: token desligado existe, recusa tudo e pode ser
 * religado. Riscar o nome diria que ele foi apagado — e aí ninguem procuraria
 * o botao de religar. */
.item-lista-area {
  border: 1px solid var(--borda);
  border-radius: 10px;
  overflow: hidden;
  background: var(--fundo-painel);
}
.item-lista-area .item-lista { align-items: flex-start; }
.item-lista.desligado { opacity: .62; }

/* ============================================================ figurinha
 *
 * Sem fundo de bolha, como no WhatsApp: a figurinha é recortada, e cor atrás
 * dela denuncia o recorte. O `so-figurinha` é posto por `pintarMensagens` só
 * quando não há legenda junto — com texto, a bolha volta, porque texto sem
 * fundo não se lê. */
.bolha.so-figurinha {
  background: transparent !important;
  box-shadow: none;
  padding: 0;
}
.bolha.so-figurinha .hora, .bolha.so-figurinha .visto { text-shadow: 0 1px 3px rgba(0,0,0,.5); }
.bolha-figurinha {
  display: block;
  width: 136px;
  height: 136px;
  object-fit: contain;
}

/* ============================================================ o áudio
 *
 * Desenhado à mão, e não com `<audio controls>`: o nativo muda de aparência em
 * cada navegador e ocupa ~300px numa bolha de 400. */
.zap-audio {
  --andado: 0%;
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 212px;
  padding: 2px 0;
}
.zap-play {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--verde);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.zap-play:hover { filter: brightness(1.08); }
.zap-meio { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

/* As barras são DECORAÇÃO, não a onda do som — ver a nota em `desenharOnda`.
   Quem marca o progresso de verdade é o trilho fino embaixo delas. */
.zap-onda {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 22px;
  cursor: pointer;
}
.zap-onda i {
  flex: 1 1 auto;
  min-width: 2px;
  background: currentColor;
  opacity: .32;
  border-radius: 1px;
}
.zap-onda::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--verde) 0 var(--andado),
    color-mix(in srgb, currentColor 22%, transparent) var(--andado) 100%
  );
}

.zap-arquivo-nome {
  font-size: 12.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.zap-pe {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  opacity: .72;
}
.zap-tempo { font-variant-numeric: tabular-nums; }
.zap-marca { display: inline-flex; align-items: center; gap: 3px; }
.zap-transcrever {
  margin-left: auto;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 10.5px;
  color: var(--verde);
  text-decoration: underline;
  cursor: pointer;
}
.zap-transcrever:disabled { opacity: .6; cursor: default; text-decoration: none; }

/* ====== A TRANSCRICAO CRESCE PARA BAIXO, NUNCA PARA O LADO ======
 *
 * Pedido do dono (26/10/2026): *"a transcricao, quando for feita, nao deve
 * alterar o tamanho do card (...) o card deve aumentar a altura e nao a
 * largura dele."*
 *
 * ====== O QUE ACONTECIA ======
 *
 * A bolha se ajusta ao conteudo (shrink-to-fit). Com so o player dentro, ela
 * nascia com a largura dele (~212px). Chegava a transcricao, e como texto
 * corrido pede a MAIOR largura que couber, a bolha saltava para o maximo — o
 * audio que estava bem desenhado virava um retangulo esticado, e as bolhas
 * vizinhas ficavam todas de tamanhos diferentes.
 *
 * ====== O TRUQUE, E POR QUE ELE FUNCIONA ======
 *
 * `width: 0` faz este bloco contribuir ZERO para a largura que a bolha calcula
 * — ou seja, quem decide a largura continua sendo o player de audio, sozinho.
 * Depois que a bolha ja escolheu a largura dela, `min-width: 100%` estica o
 * bloco de volta para preencher essa largura, e o texto quebra dentro dela.
 *
 * A ordem importa e e isso que resolve: primeiro ele nao opina na largura,
 * depois ele obedece a largura decidida. */
.zap-transcricao {
  display: flex;
  gap: 5px;
  width: 0;
  min-width: 100%;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
  font-size: 12.5px;
  line-height: 1.4;
  opacity: .88;
}
.zap-transcricao .ic { flex: 0 0 auto; margin-top: 2px; opacity: .6; }
/* O texto quebra dentro da largura herdada. `min-width: 0` e o que permite um
   filho de flex encolher abaixo do proprio conteudo — sem ele, uma palavra
   comprida (um link, um codigo) voltaria a empurrar a bolha. */
.zap-transcricao > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* ============================================================ respostas prontas
 *
 * Gavetas por grupo, e não tabela: o pedido do dono era arrastar a resposta
 * para dentro do grupo, e linha de tabela não se arrasta com naturalidade. */
.rp-gavetas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
  align-items: start;
}
.rp-gaveta {
  background: var(--fundo-painel);
  border: 1px solid var(--borda);
  border-top: 3px solid var(--cor);
  border-radius: var(--r);
  overflow: hidden;
}
.rp-gaveta-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--borda);
}
.rp-gaveta-topo b { flex: 1 1 auto; font-size: 13.5px; }
.rp-pilha { padding: 8px; display: flex; flex-direction: column; gap: 7px; min-height: 56px; }
.rp-pilha.sobre { background: color-mix(in srgb, var(--cor) 10%, transparent); }

.rp-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 8px;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 8px;
}
.rp-item.arrastando { opacity: .45; }
/* A alça do arrasto: `grab` só no ícone, porque o resto do cartão tem botões
   que a pessoa precisa clicar sem sair arrastando sem querer. */
.rp-pega { flex: 0 0 auto; opacity: .4; cursor: grab; display: inline-flex; }
.rp-item:active .rp-pega { cursor: grabbing; }
.rp-corpo { flex: 1 1 auto; min-width: 0; }
.rp-linha1 { display: flex; align-items: center; gap: 6px; margin-bottom: 2px; }
.rp-atalho { color: var(--verde); font-weight: 650; font-size: 12.5px; }
.rp-texto {
  font-size: 12.5px;
  color: var(--texto-fraco);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rp-item .icone { width: 28px; height: 28px; flex: 0 0 auto; }

/* ---- o menu de atalho, colado no botão ---- */
.prontas-grupo {
  padding: 7px 13px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--cor);
}
.prontas-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  font: inherit;
  padding: 9px 13px;
  cursor: pointer;
  color: var(--texto);
}
.prontas-item:hover { background: color-mix(in srgb, var(--verde) 10%, transparent); }
.prontas-atalho { flex: 0 0 auto; color: var(--verde); font-weight: 650; font-size: 13px; }
.prontas-texto {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--texto-fraco);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.prontas-item:disabled { opacity: .4; cursor: not-allowed; }
.prontas-item:disabled:hover { background: none; }

/* A ROLAGEM E SO DA LISTA. A barra de grupos e as acoes ficam parados nas
   pontas: acao que rola junto com a lista e acao que a pessoa nao acha. */
.prontas-rolo { flex: 1 1 auto; overflow-y: auto; min-height: 42px; }

/* ====== A BARRA DE GRUPOS, CENTRALIZADA ======
 *
 * Pedido do dono (27/10/2026): *"organizar por parte, como ja tem financeiro,
 * tecnico, so precisa dar uma cor (...) e centralizar as opcoes."*
 *
 * A cor vem do grupo (`--cor`), que o dono escolhe no cadastro — nao ha paleta
 * fixa aqui. Inativa, a ficha e so um tom da cor; ativa, ela e a cor, e o
 * contraste do texto passa a ser com branco. */
.prontas-barra {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px;
  padding: 8px 8px 7px;
  border-bottom: 1px solid var(--borda);
}
.prontas-chip {
  border: 1px solid color-mix(in srgb, var(--cor) 45%, transparent);
  background: color-mix(in srgb, var(--cor) 12%, transparent);
  color: var(--cor);
  font: inherit;
  font-size: 11.5px;
  font-weight: 650;
  padding: 3px 10px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1.5;
}
.prontas-chip.ativa { background: var(--cor); border-color: var(--cor); color: #fff; }

/* O selo do grupo na propria linha, para quando a barra esta aberta: a barra
   diz quais grupos existem, e o selo diz de qual e AQUELA resposta. */
.prontas-selo {
  flex: 0 0 auto;
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--cor);
  border: 1px solid color-mix(in srgb, var(--cor) 40%, transparent);
  border-radius: 4px;
  padding: 1px 5px;
}

/* A dica dos modos editar/remover. Ela existe porque, nesses modos, o clique
   faz outra coisa do que a pessoa aprendeu que ele faz — e isso tem de estar
   escrito, nao adivinhado pela cor. */
.prontas-dica {
  padding: 7px 13px;
  font-size: 11.5px;
  color: var(--texto-fraco);
  background: color-mix(in srgb, var(--verde) 8%, transparent);
  border-bottom: 1px solid var(--borda);
}
.prontas-dica.ruim {
  background: color-mix(in srgb, var(--alerta) 10%, transparent);
  color: var(--alerta);
}
#prontas.modo-remover .prontas-item:hover:not(:disabled) {
  background: color-mix(in srgb, var(--alerta) 12%, transparent);
}

.prontas-acoes {
  display: flex;
  gap: 2px;
  padding: 6px;
  border-top: 1px solid var(--borda);
  background: var(--fundo);
  border-radius: 0 0 10px 10px;
}
.prontas-acao {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 12px;
  color: var(--texto-fraco);
  padding: 6px 4px;
  border-radius: 7px;
  cursor: pointer;
}
.prontas-acao:hover { background: color-mix(in srgb, var(--verde) 10%, transparent); color: var(--texto); }
.prontas-acao.ativa { background: var(--verde); color: #fff; }

/* ============================================================ os gráficos
 *
 * As cores de série vivem aqui e em nenhum outro lugar — o JS dos gráficos usa
 * `var(--serie-N)`, então trocar a paleta é trocar estas seis linhas.
 *
 * Elas foram CONFERIDAS POR SCRIPT, não escolhidas no olho: separação para
 * daltonismo ΔE 9,2 no claro e 9,4 no escuro (piso 8), e para visão normal
 * 27,6 e 26,5 (piso 15). O passo escuro não é o claro clareado — é outro passo,
 * escolhido para o fundo escuro e conferido contra ele.
 *
 * O verde do tema não entra como cor de série de propósito: ele é a cor da
 * interface, e reusá-lo aqui faria procurar um significado que não há. */
:root {
  --serie-1: #2a78d6;
  --serie-2: #eb6834;
  --serie-3: #1baf7a;
  --g-grade: #e9edef;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --serie-1: #3987e5;
    --serie-2: #d95926;
    --serie-3: #199e70;
    --g-grade: #222d34;
  }
}
:root[data-tema="escuro"] {
  --serie-1: #3987e5;
  --serie-2: #d95926;
  --serie-3: #199e70;
  --g-grade: #222d34;
}

.g-cartao {
  background: var(--fundo-painel);
  border: 1px solid var(--borda);
  border-radius: var(--r);
  padding: 14px 16px 10px;
}
.g-cartao-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.g-cartao-topo h3 { margin: 0 0 2px; font-size: 14px; font-weight: 650; }
.g-cartao-topo .ajuda { margin: 0; }

/* A área rola na horizontal quando há muitos pontos — melhor que espremer
   trinta dias num espaço de dez e sobrepor os rótulos. */
.g-area { overflow-x: auto; overflow-y: hidden; }
.g-svg { display: block; height: auto; min-width: 100%; }

.g-grade { stroke: var(--g-grade); stroke-width: 1; }
/* Texto NUNCA veste a cor da série — ver a regra 5 em graficos.js. */
.g-eixo { fill: var(--texto-fraquinho); font-size: 10px; }
.g-valor { fill: var(--texto); font-size: 11px; font-weight: 650; }
.g-ponto { stroke: var(--fundo-painel); stroke-width: 2; }

.g-marca { cursor: default; }
.g-marca:hover, .g-marca:focus-visible { opacity: .82; outline: none; }
.g-marca:focus-visible .g-ponto { stroke: var(--texto); }

.g-legenda { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; }
.g-chave { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--texto-fraco); }
.g-chave i { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }

/* ---- barras deitadas ---- */
.g-barras { display: flex; flex-direction: column; gap: 9px; }
.g-barra-linha { display: flex; align-items: center; gap: 10px; font-size: 12.5px; }
.g-barra-nome {
  flex: 0 0 34%;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--texto-fraco);
}
.g-barra-trilho { flex: 1 1 auto; height: 10px; background: var(--g-grade); border-radius: 5px; overflow: hidden; }
.g-barra-fita { display: block; height: 100%; border-radius: 5px; }
.g-barra-valor { flex: 0 0 auto; font-weight: 650; font-variant-numeric: tabular-nums; }
.g-barra-extra { flex: 0 0 auto; color: var(--texto-fraquinho); font-size: 11.5px; min-width: 56px; text-align: right; }

.g-vazio { padding: 22px 10px; text-align: center; color: var(--texto-fraquinho); font-size: 12.5px; }

.g-tabela-caixa { margin-top: 10px; border-top: 1px solid var(--borda); padding-top: 8px; overflow-x: auto; }
.g-tabela { width: 100%; border-collapse: collapse; font-size: 12px; }
.g-tabela th, .g-tabela td { padding: 4px 8px; text-align: left; border-bottom: 1px solid var(--borda); }
.g-tabela th { color: var(--texto-fraco); font-weight: 600; }
.g-tabela td { font-variant-numeric: tabular-nums; }

/* ---- os números grandes do topo ---- */
.g-placar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(138px, 1fr));
  gap: 12px;
}
.g-ficha {
  background: var(--fundo-painel);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--cor, var(--serie-1));
  border-radius: var(--r);
  padding: 11px 13px;
}
.g-ficha-num { font-size: 25px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.g-ficha-nome { font-size: 11.5px; color: var(--texto-fraco); margin-top: 2px; }
.g-ficha-sob { font-size: 11px; color: var(--texto-fraquinho); margin-top: 3px; }

.g-grade-cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
}

/* O bloco que ainda está lendo o roteador: mesma moldura dos outros, para não
   dar um salto de layout quando o conteúdo chegar no lugar dele. */
.bloco-carregando { opacity: .7; }
.bloco-carregando h3::after {
  content: "";
  display: inline-block;
  width: 9px;
  height: 9px;
  margin-left: 7px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: girar .7s linear infinite;
  vertical-align: baseline;
}
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .bloco-carregando h3::after { animation: none; }
}

/* ---- a cor de cada tipo de bloco da ficha ----
 *
 * ====== A FAIXA VIROU CABECALHO INTEIRO (26/10/2026) ======
 *
 * Era uma faixa de 3px no topo. O dono pediu cor solida no cabecalho, e ai a
 * faixa deixou de ter funcao — pior, virou defeito: ela ficava na cor clara da
 * borda ACIMA do cabecalho colorido, e aparecia como *"uma barra branca"* no
 * relato dele. Agora a borda de cima veste a mesma cor do cabecalho, de modo
 * que a cor comeca na primeira linha do bloco.
 *
 * O valor vem de `--cor-bloco`, definido por tipo la embaixo; `var(--borda)` e
 * a reserva para bloco sem tipo. */
.bloco { border-top-width: 3px; border-top-style: solid; border-top-color: var(--cor-bloco, var(--borda)); }
.bloco-aviso h3 { color: var(--alerta); }

/* ---- as anotações da equipe, no topo da ficha ---- */
.bloco-nota { border-top-color: #8e24aa; }
.bloco-nota h3 { display: flex; align-items: center; gap: 6px; }
.nota-escrever { padding: 10px 12px 8px; display: flex; flex-direction: column; gap: 7px; }
.nota-escrever textarea {
  width: 100%;
  font: inherit;
  font-size: 13px;
  padding: 8px 10px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--fundo-app);
  color: var(--texto);
  resize: vertical;
  min-height: 48px;
}
.nota-escrever textarea:focus { outline: 2px solid var(--verde); outline-offset: -1px; }
.nota-escrever .botao { align-self: flex-end; }

.nota-item { padding: 8px 12px; border-top: 1px solid var(--borda); }
.nota-item-topo {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--texto-fraquinho);
  margin-bottom: 3px;
}
.nota-item-topo b { color: var(--texto-fraco); font-weight: 600; }
.nota-item-topo span { flex: 1 1 auto; }
.nota-item-topo .icone { width: 22px; height: 22px; opacity: .5; }
.nota-item-topo .icone:hover { opacity: 1; }
.nota-item-texto { font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; white-space: pre-wrap; }

/* =========================================================================
 * RECONSTRUÍDO EM 25/10/2026
 *
 * Este bloco foi reescrito depois de uma substituição minha que apagou ~750
 * linhas por engano: o recorte ia de `.bloco {` até `.bloco-acoes {`, e entre
 * os dois havia formulários, botões, modal, tela de entrada, gaveta e a mídia
 * dentro da bolha — não só o que eu queria trocar.
 *
 * Reconstruído a partir do que o HTML e o JS referenciam, conferindo seletor
 * por seletor. Segue o `ESTILO.md`. Pode haver diferença de alguns pixels em
 * relação ao original; a forma e o comportamento são os mesmos.
 * ========================================================================= */

/* ---- botões ---- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 16px;
  border: 0;
  border-radius: var(--r);
  background: var(--verde);
  color: #fff;
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: filter .12s, opacity .12s;
}
.botao:hover { filter: brightness(1.08); }
.botao:active { filter: brightness(.94); }
.botao:disabled { opacity: .55; cursor: default; filter: none; }
.botao:focus-visible { outline: 2px solid var(--verde); outline-offset: 2px; }

.botao.fraco {
  background: transparent;
  color: var(--texto-fraco);
  border: 1px solid var(--borda);
}
.botao.fraco:hover { background: color-mix(in srgb, var(--texto) 5%, transparent); filter: none; }

.botao.perigo { background: var(--alerta); color: #fff; }
.botao.miudo { padding: 6px 11px; font-size: 12.5px; }
/* Apagar nao tem o peso de Salvar: fica como texto vermelho num botao fraco,
   no corpo do modal, longe da dupla Salvar/Cancelar. */
.botao.fraco.perigo { background: transparent; border-color: color-mix(in srgb, var(--alerta) 45%, transparent); color: var(--alerta); }
.botao.fraco.perigo:hover { background: color-mix(in srgb, var(--alerta) 12%, transparent); }

/* Botao de icone pequeno, do tamanho de um titulo de coluna. */
.icone.miudo { width: 24px; height: 24px; opacity: .55; }
.icone.miudo:hover { opacity: 1; }

.linha-botoes { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.espaco { flex: 1 1 auto; }

/* ---- o botão redondo só de ícone ---- */
.icone:focus-visible { outline: 2px solid var(--verde); outline-offset: -1px; }
.icone .ic { pointer-events: none; }

/* ---- formulário ---- */
.campo { margin-bottom: 14px; }
.campo label {
  display: block;
  margin-bottom: 5px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texto-fraco);
}
.campo input,
.campo select,
.campo textarea {
  width: 100%;
  font: inherit;
  font-size: 14px;
  padding: 10px 12px;
  border: 1px solid var(--borda);
  border-radius: var(--r);
  background: var(--fundo-painel);
  color: var(--texto);
}
.campo textarea { resize: vertical; min-height: 76px; line-height: 1.45; }
.campo input:focus,
.campo select:focus,
.campo textarea:focus { outline: 2px solid var(--verde); outline-offset: -1px; border-color: transparent; }

.ajuda { font-size: 11.5px; color: var(--texto-fraquinho); line-height: 1.45; margin-top: 4px; }
.erro { color: var(--alerta); font-size: 13px; }

/* ---- cartão, vazio e número grande ---- */
.cartao {
  background: var(--fundo-painel);
  border: 1px solid var(--borda);
  border-radius: var(--r);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.cartao-secao {
  font-size: 12px;
  font-weight: 700;
  color: var(--texto-fraquinho);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin: 18px 0 8px;
}

.vazio { padding: 40px 24px; text-align: center; color: var(--texto-fraco); font-size: 14px; line-height: 1.6; }
.vazio .emoji { font-size: 34px; display: block; margin-bottom: 10px; }

.numerao { font-size: 28px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.numerao-rotulo { font-size: 12px; color: var(--texto-fraco); margin-top: 3px; }

/* ---- tabela que vira cartão no celular ---- */
.grade { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.grade th, .grade td { padding: 9px 10px; text-align: left; border-bottom: 1px solid var(--borda); }
.grade th { color: var(--texto-fraco); font-weight: 600; font-size: 12px; }
.grade tr:last-child td { border-bottom: 0; }
@media (max-width: 700px) {
  .grade, .grade thead, .grade tbody, .grade tr, .grade th, .grade td { display: block; }
  .grade thead { display: none; }
  .grade tr { border-bottom: 1px solid var(--borda); padding: 8px 0; }
  .grade td { border: 0; padding: 3px 10px; }
  /* O cabeçalho da coluna vira rótulo na frente do valor — é o que mantém a
     tabela legível sem rolagem horizontal. */
  .grade td::before { content: attr(data-r) " "; color: var(--texto-fraquinho); font-size: 11px; }
}

/* ---- a dica atrás do título ---- */
.dica { display: inline-flex; align-items: center; gap: 5px; }
.dica-corpo {
  background: var(--fundo-app);
  border: 1px solid var(--borda);
  border-radius: var(--r);
  padding: 11px 13px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--texto-fraco);
  margin: 8px 0 14px;
}
.dica-corpo b { color: var(--texto); }

/* ---- modal: formulário nunca nasce aberto ---- */
#veu {
  position: fixed;
  inset: 0;
  background: rgba(11, 20, 26, .45);
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s;
}
body.modal-aberto #veu, body.gaveta-aberta #veu { opacity: 1; pointer-events: auto; }

#modal {
  position: fixed;
  z-index: 70;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -46%);
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100dvh - 60px);
  overflow-y: auto;
  background: var(--fundo-painel);
  border-radius: 12px;
  box-shadow: var(--sombra-alta);
  padding: 20px 22px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s, transform .18s;
}
body.modal-aberto #modal { opacity: 1; pointer-events: auto; transform: translate(-50%, -50%); }
#modal h3 { margin: 0 0 12px; font-size: 16px; }
@media (prefers-reduced-motion: reduce) {
  #modal, #veu, #recado { transition: none; }
}

/* ---- recados (o aviso que sobe no rodapé) ---- */
#recado {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 16px);
  z-index: 80;
  max-width: min(420px, calc(100vw - 32px));
  padding: 11px 16px;
  border-radius: 10px;
  background: var(--texto);
  color: var(--fundo-painel);
  font-size: 13px;
  line-height: 1.4;
  box-shadow: var(--sombra-alta);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
#recado.aparece { opacity: 1; transform: translate(-50%, 0); }
#recado.ruim { background: var(--alerta); color: #fff; }

/* ---- a tela de entrada ---- */
#entrada {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: var(--fundo-app);
  padding: 20px;
}
.caixa-entrada {
  width: min(380px, 100%);
  background: var(--fundo-painel);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 28px 26px;
  box-shadow: var(--sombra);
}
.caixa-entrada h1 { margin: 0 0 4px; font-size: 21px; }
.caixa-entrada .botao { width: 100%; margin-top: 4px; }

.aviso-ensaio {
  margin-top: 16px;
  padding: 9px 11px;
  border-radius: var(--r);
  background: var(--alerta-fundo);
  color: var(--alerta);
  font-size: 11.5px;
  line-height: 1.45;
}

/* ---- a gaveta (menu sanduíche) ---- */
#gaveta {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 65;
  width: min(290px, 84vw);
  background: var(--fundo-painel);
  border-right: 1px solid var(--borda);
  transform: translateX(-102%);
  transition: transform .2s;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
body.gaveta-aberta #gaveta { transform: none; }
@media (prefers-reduced-motion: reduce) { #gaveta { transition: none; } }

#gaveta .topo { border-bottom: 1px solid var(--borda); }
#gaveta-nome { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.gaveta-item {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 11px 16px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 14px;
  color: var(--texto);
  text-align: left;
  cursor: pointer;
}
.gaveta-item:hover { background: color-mix(in srgb, var(--texto) 5%, transparent); }
.gaveta-item .ic { color: var(--texto-fraco); flex: 0 0 auto; }
.gaveta-item .emoji { font-size: 18px; width: 22px; text-align: center; }

/* ---- a tela cheia dos menus ---- */
#tela-cheia {
  position: fixed;
  inset: 0;
  z-index: 55;
  background: var(--fundo-app);
  display: flex;
  flex-direction: column;
}
#tela-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--cabecalho-altura);
  padding: 0 12px;
  background: var(--cabecalho);
  border-bottom: 1px solid var(--borda);
  flex: 0 0 auto;
}
#tela-titulo { font-size: 16px; font-weight: 600; flex: 1 1 auto; }
.folha {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px;
  max-width: 980px;
  width: 100%;
  margin: 0 auto;
}

/* ---- o nome do WhatsApp, pequeno ao lado do nosso ---- */
.nome-whats { font-size: 12px; font-weight: 400; color: var(--texto-fraquinho); }

/* ---- mídia dentro da bolha ---- */
.bolha-foto {
  display: block;
  max-width: 100%;
  width: 260px;
  border-radius: 6px;
  margin-bottom: 3px;
}
.bolha-video {
  display: block;
  max-width: 100%;
  width: 280px;
  border-radius: 6px;
  margin-bottom: 3px;
}
.bolha-arquivo {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 11px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--texto) 7%, transparent);
  color: inherit;
  text-decoration: none;
  font-size: 13px;
  margin-bottom: 3px;
}
.bolha-arquivo span { color: var(--texto-fraquinho); font-size: 11px; margin-left: auto; }
.midia-aviso {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--texto-fraco);
  font-style: italic;
  padding: 3px 0;
}

/* ---- o cartão do contato (gaveta da direita) ---- */
#cartao {
  position: fixed;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 60;
  width: min(330px, 88vw);
  background: var(--fundo-painel);
  border-left: 1px solid var(--borda);
  box-shadow: var(--sombra-alta);
  overflow-y: auto;
  padding: 14px 16px;
}

/* ---- o copiável (Pix, linha digitável) ---- */
.copiar:hover { background: var(--verde); border-color: var(--verde); color: #fff; }
.copiar.enviar { background: var(--verde); color: #fff; }
.copiar.enviar:hover { filter: brightness(1.08); color: #fff; }
.copiar:disabled { opacity: .5; cursor: default; }


/* ---- a tarja de dia e o recado interno, na conversa ---- */

/* ---- a vitrine de extensões ---- */
.vitrine { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; }
.vitrine-grupo { margin-bottom: 20px; }
.ext-icone { color: var(--verde); margin-bottom: 7px; }
.ext-nome { font-size: 14px; font-weight: 650; margin-bottom: 3px; }
.ext-cat { font-size: 11px; color: var(--texto-fraquinho); text-transform: uppercase; letter-spacing: .04em; }
.ext-explica { font-size: 12.5px; color: var(--texto-fraco); line-height: 1.45; margin: 6px 0 10px; }
.ext-pe { display: flex; align-items: center; gap: 8px; }
.ext-ok { color: var(--verde); font-size: 12px; font-weight: 600; }

.conf-erro { color: var(--alerta); font-size: 12.5px; margin-top: 6px; }

/* ---- o quadro antigo do CRM (tela própria) ---- */
.crm-quadro { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; align-items: start; }
.crm-coluna {
  background: var(--fundo-painel);
  border: 1px solid var(--borda);
  border-top: 3px solid var(--cor);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  max-height: 62vh;
}
.crm-coluna-topo { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border-bottom: 1px solid var(--borda); }
.crm-coluna-topo b { flex: 1 1 auto; font-size: 14px; }
.crm-bolota { width: 10px; height: 10px; border-radius: 50%; background: var(--cor); flex: 0 0 auto; }
.crm-conta {
  font-size: 11px;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: 999px;
  color: var(--cor);
  background: color-mix(in srgb, var(--cor) 16%, transparent);
}
.crm-coluna-dica { padding: 6px 12px; font-size: 11.5px; color: var(--texto-fraquinho); }
.crm-pilha { flex: 1 1 auto; min-height: 56px; overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.crm-pilha.sobre { background: color-mix(in srgb, var(--cor) 10%, transparent); }
.crm-fora { opacity: .5; }
.crm-vazia { padding: 14px 8px; text-align: center; color: var(--texto-fraquinho); font-size: 12px; }
.crm-cartao {
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 9px;
  padding: 9px 10px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.crm-cartao:hover { box-shadow: var(--sombra); }
.crm-cartao:active { cursor: grabbing; }
.crm-cartao-topo { display: flex; align-items: center; gap: 8px; }
.crm-nome { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.crm-sob { font-size: 11px; color: var(--texto-fraquinho); }
.crm-previa {
  font-size: 12px;
  color: var(--texto-fraco);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.crm-pe { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }

/* ---- a nota antiga (lista do CRM) ---- */
.nota {
  background: var(--fundo-app);
  border-radius: 8px;
  padding: 9px 11px;
  margin-bottom: 8px;
}
.nota-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 11px; color: var(--texto-fraquinho); margin-bottom: 3px; }
.nota-texto { font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }

/* ---- o emblema da tela vazia (era emoji; virou SVG) ---- */
.vazio .emblema-vazio {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto 12px;
  opacity: .45;
}
.vazio .emblema-vazio svg { width: 100%; height: 100%; }

/* ---- a marca de canal: preenchida, não em traço ---- */
.ic.marca { flex: 0 0 auto; }

/* ---- o campo de data no cabeçalho da coluna Finalizadas ---- */
.q-dia {
  font: inherit;
  font-size: 11px;
  padding: 2px 5px;
  border: 1px solid var(--borda);
  border-radius: 6px;
  background: var(--fundo-painel);
  color: var(--texto);
  max-width: 124px;
}

/* ---- quem vai receber, na tela de iniciar conversa ---- */
.nc-alvo {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 11px;
  margin-bottom: 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--verde) 10%, transparent);
  color: var(--texto);
  font-size: 13px;
}
.nc-alvo .ic { color: var(--verde); flex: 0 0 auto; }
#nc-escolhido .campo { margin-bottom: 10px; }
#nc-escolhido .linha-botoes { justify-content: flex-end; }

/* ====== QUEM FALOU E ESTÁ ESPERANDO RESPOSTA ======
 *
 * Pedido do dono (25/10/2026): *"sempre que alguém falar alguma coisa, o badge
 * sobe e coloque uma cor para destacar o cliente que está falando, que está
 * aguardando uma resposta."*
 *
 * O selo de não lidas sozinho é pequeno demais — numa coluna de quinze cartões
 * ele se perde. A faixa à esquerda e o fundo levemente tingido fazem o cartão
 * saltar de relance, que é como o atendente varre a fila.
 *
 * NÃO é a cor da coluna: é o laranja de "precisa de você", igual em todas as
 * colunas. A cor da coluna diz ONDE ele está; esta diz que ele está ESPERANDO,
 * e as duas perguntas são diferentes. */
.q-cartao.esperando {
  border-left: 3px solid var(--espera);
  background: color-mix(in srgb, var(--espera) 7%, var(--fundo-painel));
}
.q-cartao.esperando .q-nome { font-weight: 700; }
/* O selo NAO muda de cor aqui: ele e vermelho em qualquer lugar, por decisao
   do dono em 26/10/2026. O laranja continua sendo do CARTAO — a faixa e o
   fundo —, que e outra informacao: a cor do cartao diz "este esta esperando",
   e o selo diz "ha tantas mensagens sem ler". */

:root { --espera: #f0a500; }
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) { --espera: #ffb300; }
}
:root[data-tema="escuro"] { --espera: #ffb300; }

/* ====== O CABEÇALHO DA FICHA: ETIQUETA MIÚDA, DEPOIS O CLIENTE ======
 *
 * Pedido do dono (26/10/2026): *"esse nome ficha do cliente pode ficar bem
 * pequenininho e bem mais acima. Abaixo dele a gente coloca o avatar com o
 * nome e o telefone daquele cliente. Fica melhor. Onde está a ficha do cliente
 * atualmente, que aí vai ter mais espaço lá no cabeçalho para colocar outras
 * coisas que sejam necessárias."*
 *
 * Ele está certo sobre a hierarquia, e o que havia era o contrário dela: o
 * nome do MÓVEL em 15px e o nome da PESSOA em lugar nenhum. Agora "Ficha do
 * cliente" é etiqueta de 8,5px — do mesmo tamanho dos rótulos lá dentro,
 * porque é o que ela é — e os três ícones subiram para a mesma linha, o que
 * devolveu uma linha inteira de cabeçalho. */
.ficha-topo { margin-bottom: 10px; }
.ficha-titulo {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-bottom: 6px;
}
.ficha-titulo b {
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--texto-fraquinho);
}
.ficha-titulo .icone.miudo { width: 26px; height: 26px; }

/* ====== E ENTÃO SAI DO CABEÇALHO DA CONVERSA ======
 *
 * Pedido do dono (26/10/2026): *"não precisa manter o avatar, o nome e o
 * número de telefone do cliente lá em cima não, no cabeçalho não, na coluna da
 * conversa. Ele fica abaixo do ficha do cliente apenas."*
 *
 * Ele está certo: com a identidade na ficha, o alto da conversa repetia avatar,
 * nome e telefone a dois dedos de distância — e o que se repete para de ser
 * lido. Sai, e a barra fica para as AÇÕES do atendimento (encerrar,
 * transferir, tags, histórico), que é o que ele mesmo pediu ali.
 *
 * ====== MAS SÓ QUANDO A FICHA ESTÁ À VISTA ======
 *
 * `#app.com-ficha` é posto e tirado por `mostrarFicha`. A condição não é
 * "tela larga": a ficha também fica recolhida por escolha do atendente (o
 * puxador da borda) e no celular ela não aparece de jeito nenhum.
 *
 * Esconder o nome por tamanho de tela deixaria o atendente com uma conversa
 * SEM NOME nenhum nesses dois casos — e aí ele responde sem saber com quem
 * fala. Amarrado à ficha, o nome volta ao alto da conversa no exato momento em
 * que ela sai de cena. Nunca duplicado, nunca ausente.
 *
 * E o `min-width` por cima disso porque `com-ficha` é posto em QUALQUER
 * largura, enquanto as três colunas só existem a partir de 1200px. Sem ele,
 * uma ficha aberta num telefone esconderia o nome lá também — onde a ficha
 * ocupa a tela inteira e o nome não está em lugar nenhum. */
@media (min-width: 1200px) {
  #app.com-ficha #conversa-avatar,
  #app.com-ficha #conversa-titulo {
    display: none;
  }
}

/* ====== QUEM É ESTE CLIENTE ======
 * Avatar, nome com o lápis, telefone, protocolo, e o botão de vincular. */
.ficha-quem {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 9px;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--fundo-painel);
}
.fq-texto { flex: 1 1 auto; min-width: 0; }
.fq-linha { display: flex; align-items: center; gap: 5px; min-width: 0; }
.fq-nome {
  font-size: 14px;
  font-weight: 650;
  color: var(--texto);
  /* Nome comprido corta em vez de empurrar o lápis e o vincular para fora. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* O nome do WhatsApp fica à vista, pequeno — regra antiga do dono: é o que
   deixa claro de onde veio o nome grande. */
.fq-whats {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 10.5px;
  color: var(--texto-fraquinho);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fq-linha .icone.miudo {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  opacity: .6;
}
.fq-linha .icone.miudo:hover { opacity: 1; }
.fq-sob { margin-top: 2px; gap: 7px; }
.fq-fone {
  font-size: 11.5px;
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
}

/* ====== O PROTOCOLO ======
 * Pedido do dono (26/10/2026): *"preciso que você gere um protocolo sempre que
 * o cliente entrar em contato e que esse protocolo apareça logo na ficha do
 * cliente."*
 *
 * É BOTÃO, e não texto: protocolo existe para ser ditado ao cliente e colado
 * no chamado. Um clique e ele está na área de transferência.
 *
 * `tabular-nums` porque o número é o que o olho procura, e dígitos de larguras
 * diferentes fazem a coluna dançar entre uma ficha e outra. */
.fq-protocolo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  /* Na linha do título, encostado nele: o protocolo é DESTE atendimento, e
     ficar junto do nome do móvel é o que diz isso sem escrever. */
  margin-left: 2px;
  padding: 1px 6px;
  border: 1px solid color-mix(in srgb, var(--verde) 28%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--verde) 9%, transparent);
  color: var(--verde);
  cursor: pointer;
  font: inherit;
}
.fq-protocolo:hover { background: color-mix(in srgb, var(--verde) 17%, transparent); }
/* MENOR AINDA, a pedido do dono (26/10/2026): *"pode diminuir um pouco mais a
   fonte do protocolo?"*. Ele tem razao — o protocolo nao e lido a cada
   atendimento, e so quando o cliente pergunta. Fica a vista, legivel quando
   procurado, e sem competir com o nome do cliente logo abaixo. */
.fq-prot-rot {
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  opacity: .75;
}
.fq-prot-n {
  font-size: 9.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* O rótulo é fixo ("Vincular cliente") a pedido do dono, então não precisa
   mais de largura máxima nem de corte: ele não muda de tamanho. O verde diz
   que há vínculo; quem é o cliente está no resumo, logo abaixo. */
#vincular-ficha { flex: 0 0 auto; white-space: nowrap; }
#vincular-ficha.fq-vinculado {
  border-color: color-mix(in srgb, var(--verde) 35%, transparent);
  color: var(--verde);
}

/* ====== O CADASTRO DE AGORA, NO MODAL DE VINCULAR ======
 * Uma linha por vínculo, com o botão de desvincular na ponta. */
.vinc-agora { display: flex; flex-direction: column; gap: 6px; }
.vinc-linha {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--borda);
  border-radius: 8px;
}
.vinc-quem { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.vinc-quem b { font-size: 13px; }
.vinc-quem span { font-size: 11px; color: var(--texto-fraco); }

/* O copiável dentro de uma linha empilhada ocupa a largura toda — é o que faz
   a senha do Wi-Fi e o login PPPoE caberem numa linha só. */
.bloco-valor .copiavel { width: 100%; }
.bloco-valor .copiavel code { font-size: 12px; }

/* ---- os dois números do botão de fila ----
 *
 * O cinza diz QUANTOS atendimentos há; o laranja, quantos estão esperando
 * resposta agora. Mesma cor do cartão destacado, para o olho ligar os dois. */
.fila-contas { display: flex; align-items: center; gap: 3px; align-self: flex-end; }
/* O de ESPERANDO mantem o proprio amarelo — ele quer ser visto acima de tudo —
   mas ganha o mesmo anel, para nao se fundir com o botao colorido. */
.fila-conta.esperando {
  background: var(--espera);
  color: #3a2a00;
  /* ====== DUAS SOMBRAS NUMA DECLARACAO SO ======
   * Havia duas linhas de `box-shadow` aqui, e a segunda APAGAVA a primeira —
   * o anel branco do badge sumia justamente no que mais precisa ser visto.
   * Em CSS, duas declaracoes da mesma propriedade nao se somam: a ultima
   * vence. Camadas de sombra se escrevem separadas por virgula.
   *
   * De dentro para fora: o anel claro que recorta do botao colorido, e depois
   * o halo amarelo que diz "tem gente esperando". */
  box-shadow:
    0 0 0 1.5px var(--fundo-painel),
    0 0 0 3.5px color-mix(in srgb, var(--espera) 45%, transparent);
}

/* O telefone é a segunda linha do cabeçalho e precisa ser LIDO — o atendente
   dita esse número no telefone. Antes dividia espaço com o aviso de janela e
   saía em cinza miúdo. */
#conversa-sob {
  font-size: 12.5px;
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* ============================================================ o resumo
 *
 * O único bloco que nasce aberto, e o primeiro que o olho encontra — por isso
 * veste cor em vez do cinza dos outros. Seções com título minúsculo e valores
 * correndo logo abaixo: cabe o dobro de informação na mesma altura que as
 * linhas de rótulo-e-valor ocupavam. */
/* ====== A TARJA BRANCA ERA UM CHOQUE DE NOMES ======
 *
 * DEFEITO QUE EU LEVEI TRES RELATOS PARA ACHAR. O dono dizia, e com razao:
 * *"tem uma tarja branca dentro do card do cadastro e da fidelidade, no
 * titulo."*
 *
 * A causa: `bloco-resumo` nomeava DUAS coisas diferentes.
 *
 *   1. o <span> da linha de resumo, que existe no cabecalho de TODO bloco;
 *   2. o <details> do bloco Resumo em si.
 *
 * Esta regra foi escrita para o item 2 — o fundo verde-claro do cartao de
 * resumo. Mas o seletor pegava tambem o item 1, e pintava aquele fundo claro
 * no <span> que atravessa o cabecalho de Cadastro, de Fidelidade, de todos.
 * Sobre um cabecalho agora solido e escuro, aquilo virou uma tarja clara.
 *
 * O bloco passou a usar `bloco-resumo-cor`, que e so dele. LICAO: classe que
 * nomeia um TIPO DE BLOCO e classe que nomeia uma PARTE do bloco nao podem
 * compartilhar prefixo sem sufixo que as separe. */
.bloco-resumo-cor {
  border-top-color: var(--verde);
  background: color-mix(in srgb, var(--verde) 5%, var(--fundo-painel));
}
.bloco-resumo-cor > summary:hover { filter: brightness(1.08); }
.bloco-resumo-cor .bloco-nome { color: #fff; }

.rs-corpo { padding: 2px 0 6px; }
.rs-secao { padding: 7px 11px; }
.rs-secao + .rs-secao { border-top: 1px solid color-mix(in srgb, var(--borda) 60%, transparent); }
.rs-secao h4 {
  margin: 0 0 4px;
  text-align: left;
  /* MAIUSCULAS em todos os titulos de secao do resumo — pedido do dono em
     26/10/2026. Ja estava em `text-transform`, mas FINANCEIRO e ORDENS DE
     SERVICO chegavam com acento e capitalizacao propria do modulo; o
     `uppercase` do CSS unifica sem o modulo ter de se preocupar. */
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-fraquinho);
}

/* ====== O RESUMO ALINHADO ======
 *
 * Relato do dono (25/10/2026): *"tá meio bagunçado. Quem é, tá do lado
 * direito, o Paulo Henrique tá como se fosse no meio, aí o CPF, o título tá
 * para um canto e o outro tá na metade."*
 *
 * A causa: `flex-wrap` com rótulo e valor em linha. Rótulos de tamanhos
 * diferentes (CPF/CNPJ vs. TELEFONE DO CADASTRO) empurravam o valor para
 * posições diferentes em cada linha, e os longos quebravam para baixo.
 *
 * Agora é GRADE: coluna de rótulo com largura fixa, coluna de valor alinhada,
 * botão de copiar sempre na mesma posição à direita. Tudo em prumo. */
/* ====== A FICHA E UM CARTAO, NAO UMA PLANILHA ======
 *
 * Pedido do dono (26/10/2026): *"remova esse estilo de tabela, eu quero algo
 * mais parecendo um card com as informacoes e ocupando o menos espaco
 * possivel (...) bota o nome do cliente, o nome, o titulo, nome, depois o nome
 * do cliente. Ai aproveite mais o espaco, ao inves de voce sair criando varias
 * linhas na tabela."*
 *
 * ANTES: uma LINHA por campo, rotulo a esquerda e valor a direita. Oito campos
 * = oito linhas = a ficha inteira rolando. E a coluna fixa de rotulo obrigava
 * a largura a caber no rotulo mais comprido, desperdicando o resto.
 *
 * AGORA: cada campo e uma CELULA — rotulo pequeno em cima, valor embaixo — e as
 * celulas se arrumam em quantas colunas couberem. Oito campos viram duas
 * linhas de quatro. A altura cai para um terco, e nada fica escondido.
 *
 * `auto-fill` com `minmax(118px, 1fr)` faz isso sem media query: ficha
 * estreita poe duas por linha, larga poe quatro. O 118px e a largura de
 * "134.944.757-92", o valor mais comprido que aparece ali. */
.rs-grade {
  display: grid;
  /* 104px, e nao 118: com a coluna da ficha em ~250px, 118 so deixava CABER
     duas celulas por linha. Em 104, telefone, e-mail e endereco dividem a
     mesma linha numa ficha larga — que foi o pedido do dono em 26/10/2026 —
     e continuam legiveis porque o valor quebra dentro da propria celula. */
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 7px 10px;
  align-items: start;
}

.rs-item { min-width: 0; }

/* Campo de valor comprido — endereco, login PPPoE, uma lista de vantagens —
   ocupa a largura inteira. Numa celula de 118px ele quebraria em cinco linhas,
   e cinco linhas de uma coisa so fazem o bloco parecer desarrumado. */
.rs-item.forte-largura { grid-column: 1 / -1; }

/* Varios valores sob o mesmo rotulo (as vantagens da fidelidade) viram uma
   lista enxuta, e nao o rotulo repetido quatro vezes. */
.rs-lista { display: flex; flex-direction: column; gap: 1px; }
.rs-lista > i { font-style: normal; }
.rs-lista > i::before { content: "‚2 "; color: var(--texto-fraquinho); }

/* O campo em DESTAQUE (o nome, o valor em aberto) ocupa a linha inteira: ele e
   o titulo do cartao, nao um campo entre outros. */
.rs-item.forte { grid-column: 1 / -1; }
.rs-item.forte .rs-valor { font-size: 15px; font-weight: 650; line-height: 1.25; }

/* ====== O NUMERO DO CONTRATO, AO LADO DO TITULO ======
 *
 * Pedido do dono (26/10/2026): *"so basta um [nome Contrato] e informar o do
 * lado dele (...) num card pequeno, um tamanho pequeno, na mesma fonte."*
 *
 * "Na mesma fonte" e literal: nada de monoespacada aqui. O que muda e o
 * TAMANHO e a caixa — ela nasce dentro de um `h4` em maiusculas de 9,5px, e
 * `text-transform: none` e o que impede o `#2740` de virar outra coisa em
 * idioma nenhum. */
.rs-nota {
  margin-left: 6px;
  padding: 1px 5px;
  border: 1px solid var(--borda);
  border-radius: 4px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  color: var(--texto-fraco);
  background: var(--fundo-painel);
  /* O numero nao herda o espacamento de titulo de secao: em `#2740` aquele
     `.06em` abria buracos entre os digitos. */
  font-variant-numeric: tabular-nums;
  vertical-align: baseline;
}

/* ====== A SECAO COMPACTA: O NOME DO PLANO EM FONTE MENOR ======
 *
 * Pedido do dono (26/10/2026): *"o nome do plano no contrato, no resumo, e
 * ordem de servico tambem (...) esta muito grande."*
 *
 * Por que uma classe e nao mexer em `.rs-item.forte` direto: aquele 15px e o
 * NOME DO CLIENTE no cadastro e o VALOR EM ABERTO no financeiro, e os dois
 * devem continuar grandes — sao o que o atendente procura primeiro. O que
 * incomodava era "PLANO - VALEU - 18GB" com o mesmo peso de um titulo. */
.rs-compacto .rs-item.forte .rs-valor { font-size: 12.5px; font-weight: 600; }
/* ====== E NA SECAO COMPACTA, OS CAMPOS TAMBEM ======
 *
 * Pedido do dono (26/10/2026): *"tudo pequeno, eu quero tudo pequeno, com
 * informacoes bem resumidas (...) e caso eu queira visualizar melhor, eu vou
 * no contrato do cliente, no EcoApps."*
 *
 * Essa ultima frase e o que autoriza encolher: esta secao nao e a ficha do
 * contrato, e um resumo para o atendente responder sem trocar de aba. Os 12px
 * de `.rs-valor` continuam valendo no resto do resumo, onde moram o nome do
 * cliente e o endereco. */
.rs-compacto .rs-valor { font-size: 11px; }
.rs-compacto .rs-rotulo { font-size: 8.5px; }
.rs-compacto .rs-grade { gap: 5px 8px; }
.rs-item.alerta .rs-valor { color: var(--alerta); font-weight: 650; }

.rs-rotulo {
  display: block;
  /* EXPLICITO, e nao por omissao. Relato do dono (26/10/2026): *"os titulos
     estao para um lado e o nome e as informacoes estao para o outro. Tem que
     ficar tudo para o lado esquerdo."* O alinhamento a direita veio de uma
     versao anterior desta regra; declarar `left` aqui impede que ele volte por
     heranca de qualquer pai. */
  text-align: left;
  color: var(--texto-fraquinho);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.3;
  margin-bottom: 1px;
  /* ====== O ROTULO NAO QUEBRA MAIS ======
   * Pedido do dono (26/10/2026): *"eu nao quero nesse estilo, eu quero a linha
   * reta."* Rotulo que quebra em duas linhas deixa a celula mais alta que as
   * vizinhas, e a fileira inteira sai torta.
   *
   * Agora ele fica numa linha so e, se nao couber, termina em reticencias — e
   * os rotulos do resumo foram encurtados no modulo justamente para caberem.
   * O VALOR continua quebrando a vontade: e ele que nao pode ser cortado. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rs-valor {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  /* 12px: um ponto a menos que antes, de proposito. O dono autorizou — *"pode
     ate diminuir mais a fonte, se for necessario"* — e e o que faz tres campos
     caberem lado a lado sem quebrar o endereco em quatro linhas. */
  font-size: 12px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

/* ====== CADA CONTRATO TEM UM OLHO AO LADO ======
 *
 * Pedido do dono (26/10/2026): o botao "ver dados" saiu de baixo da lista e
 * virou um olho na propria linha do contrato. A linha passou a ser um `div`
 * com dois botoes dentro, porque botao dentro de botao e HTML invalido. */
/* ====== O OLHO ENTROU PARA DENTRO DO CARTAO ======
 * Pedido do dono (26/10/2026): *"esse olho que esta do lado de fora, coloca
 * para dentro do card, que assim da mais espaco."*
 *
 * Fora, ele tirava 34px da largura de TODA a coluna — e a coluna e estreita.
 * Dentro, ele ocupa um canto que ja estava vazio. */
.ct-linha { display: block; }
.ct-linha .ct-opcao { width: 100%; position: relative; }

.ct-olho-dentro {
  position: absolute;
  top: 6px;
  right: 6px;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--texto) 6%, transparent);
  color: var(--texto-fraco);
  cursor: pointer;
}
.ct-olho-dentro:hover { background: var(--verde); color: #fff; }

/* ====== O BOTAO DE COPIAR PRECISA SER VISTO ======
 * Relato do dono (25/10/2026): *"ele esta com a fonte branca, entao ta bem
 * ruim de enxergar."* Ele herdava `color` do contexto e sumia sobre o fundo
 * claro. Agora tem cor propria, moldura e fundo. */
.rs-copiavel { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.rs-copiavel > span { min-width: 0; overflow-wrap: anywhere; }
.rs-copiavel .copiar {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 1px solid var(--borda);
  border-radius: 5px;
  background: var(--fundo-painel);
  color: var(--texto-fraco);
}
.rs-copiavel .copiar:hover { background: var(--verde); border-color: var(--verde); color: #fff; }
.rs-copiavel .copiar.feito { background: var(--verde); border-color: var(--verde); color: #fff; }

/* ---- os botões com nome no cabeçalho da conversa ---- */
.botao.com-nome { gap: 5px; padding: 5px 10px; font-size: 12px; }
.botao.com-nome .ic { opacity: .8; }

/* ---- o puxador da ficha, na borda direita ----
 *
 * Fica quase invisível até o mouse chegar perto. É o que impede que uma ficha
 * desafixada vire um recurso que some: sem ele, ninguém descobre que basta
 * passar o mouse na borda. */
#puxador-ficha {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  width: 10px;
  height: 92px;
  border: 0;
  border-radius: 7px 0 0 7px;
  background: color-mix(in srgb, var(--verde) 40%, transparent);
  cursor: pointer;
  padding: 0;
  transition: width .14s, background .14s;
}
#puxador-ficha:hover, #puxador-ficha:focus-visible {
  width: 22px;
  background: var(--verde);
  outline: none;
}
#puxador-ficha::after {
  content: "";
  display: block;
  width: 2px;
  height: 34px;
  margin: 0 auto;
  border-radius: 2px;
  background: #fff;
  opacity: .75;
}
#puxador-ficha[hidden] { display: none; }

/* O alfinete marcado fica verde — é o estado normal, e precisa parecer ligado. */
/* ====== A SETA DIZ O ESTADO ======
 *
 * Pedido do dono (25/10/2026): *"quando ele tá solto, ele aponta pro lado
 * esquerdo. Quando tá fixo, ele aponta para baixo."*
 *
 * É o mesmo `seta_direita` girado — um SVG, dois estados, e a animação do
 * giro mostra a mudança no próprio clique. Cor só não bastava: quem não
 * distingue verde de cinza ficava sem saber em que estado estava. */
#fixar-ficha svg { transition: transform .18s ease; }
#fixar-ficha[aria-pressed="true"] { color: var(--verde); }
#fixar-ficha[aria-pressed="true"] svg { transform: rotate(90deg); }   /* fixa  → para baixo */
#fixar-ficha[aria-pressed="false"] svg { transform: rotate(180deg); } /* solta → para a esquerda */
#fixar-ficha[aria-pressed="true"]:hover { background: color-mix(in srgb, var(--verde) 14%, transparent); }

/* ---- o visto: cinza, cinza-cinza, azul. Como no WhatsApp ----
 *
 * ====== ISTO DESFAZ UMA DECISÃO DELE, E ELE MANDOU DESFAZER ======
 *
 * Em 25/10/2026 o dono pediu o contrário: *"pinta de vermelho quando uma
 * mensagem ainda não foi visualizada e coloque um pulsante curto."* Era
 * vermelho com três pulsos, e a razão escrita aqui era boa — o cinza de
 * "entregue" e o de "enviada" são quase iguais, e o atendente mandava o Pix
 * sem perceber que o cliente nunca abriu.
 *
 * Em 26/10/2026 ele reviu: *"o check da mensagem quando chega para o cliente,
 * que ainda ele não visualizou, é cinza. Uma cinza quando não chega para o
 * cliente, duas cinzas quando chega e azul quando visualiza."*
 *
 * Vale o último. E a razão dele é mais forte que a minha: este é o código que
 * TODO MUNDO já sabe ler, porque é o do WhatsApp. Um tique vermelho pulsando
 * não existe em nenhum chat do mundo — quem senta na cadeira pela primeira vez
 * tem de aprender um sinal novo, e no meio de um atendimento vermelho se lê
 * como ERRO, não como "ainda não leu".
 *
 * O que distingue "enviada" de "entregue" continua sendo o NÚMERO de tiques
 * (um contra dois), que é o que o WhatsApp usa — e não a cor. */
.visto.nao-vista { color: var(--nao-visto); }
:root { --nao-visto: var(--texto-fraquinho); }

/* ---- a escolha do toque ---- */
.toques { display: flex; flex-direction: column; gap: 7px; }
.toque {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: 1px solid var(--borda);
  border-radius: 9px;
  background: var(--fundo-painel);
  font: inherit;
  color: var(--texto);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.toque:hover { border-color: var(--verde); }
.toque.escolhido {
  border-color: var(--verde);
  background: color-mix(in srgb, var(--verde) 8%, transparent);
}
.toque-topo { display: flex; align-items: center; gap: 7px; font-size: 13.5px; }
.toque-explica { font-size: 11.5px; color: var(--texto-fraco); line-height: 1.4; }

.aviso-ok {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 12px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--verde) 10%, transparent);
  color: var(--verde);
  font-size: 13px;
  font-weight: 600;
}

/* ============================================================ a ficha
 *
 * Desenho de 25/10/2026: *"manter a coluna resumo e contratos, somente elas,
 * numa primeira faixa (...) qualquer outra coluna, que ela pegue as duas
 * colunas."*
 *
 * FAIXA DE CIMA, lado a lado: resumo (quem é, quanto deve) e contratos (qual
 * assinatura está em jogo). São as duas perguntas que abrem todo atendimento,
 * e cabem lado a lado porque ambas são curtas.
 *
 * ABAIXO, largura inteira: cadastro, faturas, fidelidade, ordens, Wi-Fi. Todas
 * têm linhas compridas — CPF, endereço, senha de Wi-Fi, linha digitável — que
 * em meia largura quebram em três e viram sopa.
 *
 * O APROVEITAMENTO DO ESPAÇO foi pedido explicitamente: *"aproveite o máximo
 * desse espaço, pode colocar letras menores"*. Daí a fonte mais curta e o
 * respiro mais apertado aqui dentro que no resto do sistema. */
#ficha-corpo { display: flex; flex-direction: column; gap: 10px; }

/* ====== OS DOIS CARTOES DE CIMA TEM O MESMO TAMANHO ======
 *
 * Pedido do dono (26/10/2026): *"o tamanho do card, eles devem ser iguais, o
 * do resumo e o do contratos (...) para que fique num padrao so, e o de
 * contratos tambem, mesmo que tenha menos opcoes."*
 *
 * `align-items: start` deixava cada coluna com a altura do proprio conteudo —
 * com 5 contratos de um lado e 6 campos do outro, os dois cartoes terminavam
 * em alturas diferentes e a faixa ficava com um degrau no meio.
 *
 * `stretch` iguala as duas, e o `height: 100%` no bloco faz ele PREENCHER a
 * coluna em vez de so ocupar o topo dela — sem isso o degrau continuaria,
 * agora dentro de uma coluna da altura certa. */
.ficha-faixa {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}
.ficha-coluna { min-width: 0; display: flex; flex-direction: column; }
.ficha-faixa .ficha-coluna > .bloco {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
/* O corpo do bloco cresce para ocupar a sobra; o cabecalho fica do tamanho
   dele. Assim o cartao mais curto nao fica com um vazio no meio, e sim com o
   conteudo em cima e a sobra embaixo, que e como se le. */
.ficha-faixa .ficha-coluna > .bloco > .bloco-corpo,
.ficha-faixa .ficha-coluna > .bloco > .rs-corpo { flex: 1 1 auto; }
#ficha-resto { display: flex; flex-direction: column; gap: 8px; }

/* Abaixo de 1500px a ficha volta a ter uma coluna só: a faixa empilha. */
@media (max-width: 1500px) {
  .ficha-faixa { grid-template-columns: 1fr; }
}

/* ---- mais denso aqui dentro ---- */
#ficha .bloco { margin-bottom: 0; }
#ficha .bloco > summary { padding: 7px 10px; }
#ficha .bloco-nome { font-size: 12px; }
#ficha .bloco-linha { padding: 4px 10px; font-size: 12px; }
#ficha .bloco-rotulo { font-size: 9.5px; }
#ficha .rs-item { font-size: 12px; }
#ficha .rs-item.forte { font-size: 13px; }
#ficha .rs-secao { padding: 6px 10px; }

.ficha-esperando {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 14px 12px;
  border: 1px dashed var(--borda);
  border-radius: var(--r);
  color: var(--texto-fraquinho);
  font-size: 12px;
}
.ficha-esperando .ic { opacity: .6; }

/* ---- os contratos, como botões de escolha ----
 *
 * Linha não se clica, e a escolha aqui tem consequência: o Wi-Fi e o consumo
 * logo abaixo são DO CONTRATO ESCOLHIDO. Num cliente com duas internets,
 * escolher errado faz ditar a senha da casa errada. */
.ct-lista { display: flex; flex-direction: column; gap: 5px; padding: 7px 9px 9px; }
.ct-opcao {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  text-align: left;
  padding: 6px 8px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--fundo-painel);
  font: inherit;
  color: var(--texto);
  cursor: pointer;
  transition: border-color .12s, background .12s;
}
.ct-opcao:hover { border-color: #5c6bc0; }
.ct-opcao.escolhido {
  border-color: #5c6bc0;
  background: color-mix(in srgb, #5c6bc0 10%, transparent);
  box-shadow: inset 2px 0 0 #5c6bc0;
}
/* Contrato cancelado continua à vista — o cliente pode estar ligando por causa
   dele — mas apagado, para não ser confundido com o que está no ar. */
.ct-opcao.inativo { opacity: .55; }
.ct-ic { flex: 0 0 auto; color: #5c6bc0; display: inline-flex; }
/* ====== O NOME DO PLANO E PEQUENO, E NUMA LINHA SO ======
 *
 * Pedido do dono (26/10/2026): *"o nome do plano, ele ta muito grande, pode
 * diminuir ele numa unica linha e pode deixar pequeno, nao quero nada
 * exagerado."*
 *
 * Nomes de plano aqui chegam a 30 caracteres ("PLANO PREMIUM 1 - 100 MEGA -
 * 2026") e em 11px eles terminavam em reticencias — o atendente via "100
 * MEG..." e tinha de passar o mouse para saber o resto.
 *
 * A 10px cabem, e o tamanho esta certo para o que eles sao: o plano e
 * SUBTITULO do contrato, nao o titulo. Quem manda na linha e "Internet" ou
 * "Telefonia", que e o que o cliente diz ao telefone. */
.ct-texto { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0; }
.ct-nome { font-size: 12px; font-weight: 650; line-height: 1.25; }
.ct-sob {
  font-size: 10px;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--texto-fraco);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---- as abas dentro de um bloco da ficha ---- */
.abas-dentro { padding: 8px 9px 6px; gap: 5px; }
.abas-dentro .aba { padding: 4px 10px; font-size: 11.5px; border-radius: 6px; }
.aba-corpo { padding-bottom: 2px; }
.aba-corpo[hidden] { display: none; }

/* O botão de usar o nome do cadastro: discreto, ao lado do nome. Só aparece
   quando o nome do ERP é diferente do que está em uso. */
.rs-aplicar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 0;
  background: none;
  padding: 1px 4px;
  font: inherit;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--verde);
  cursor: pointer;
  border-radius: 5px;
}
.rs-aplicar:hover { background: color-mix(in srgb, var(--verde) 14%, transparent); }

/* ---- a mensagem que o sistema acabou de achar ----
 *
 * O pisca fecha o trabalho de "levar até lá": rolar até o ponto e não marcar
 * nada deixa o atendente procurando qual das vinte bolhas era.
 *
 * Ele ACABA. Marca que fica vira decoração permanente e, na próxima busca, o
 * atendente não sabe qual das duas é a de agora. */
.bolha-fora.achada .bolha,
.recado-interno.achada {
  animation: achei 2.4s ease-out 1;
}
@keyframes achei {
  0%, 60% { box-shadow: 0 0 0 3px var(--verde-claro); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .bolha-fora.achada .bolha, .recado-interno.achada { box-shadow: 0 0 0 3px var(--verde-claro); animation: none; }
}

/* ====== TÍTULOS DE COLUNA EM COR SÓLIDA ======
 *
 * Pedido do dono (25/10/2026): *"o título aguardando atendimento com a coluna,
 * eu quero que ele tenha cor sólida. Da mesma forma, a cor sólida para os
 * títulos do CRM."*
 *
 * A faixa de 3px no topo some quando a coluna está cheia — o olho vai para os
 * cartões e o cabeçalho vira só um texto cinza. Em cor sólida, cada coluna se
 * identifica de longe, que é como se varre um quadro. */
.q-fila > .q-topo,
.q-coluna > .q-topo {
  background: var(--cor);
  border-bottom: 0;
  border-radius: 5px 5px 0 0;
}
.q-fila > .q-topo b,
.q-coluna > .q-topo b { color: #fff; }

/* ====== O BADGE E A ENGRENAGEM PRECISAM SER VISTOS SOBRE A COR ======
 *
 * Relato do dono (26/10/2026): *"do lado do badge da quantidade de clientes
 * tem tambem a engrenagem, e ele nao esta identificavel, esta muito apagado
 * por causa da cor do badge, entao tem que ter um destaque."*
 *
 * O badge estava em branco a 22% — um veu sobre a cor, nao um contraste. E a
 * engrenagem herdava `.icone.miudo`, que e opacidade 55%: sobre um cabecalho
 * escuro ela praticamente sumia.
 *
 * Agora o badge e BRANCO SOLIDO com o numero na cor da coluna: e a maior
 * diferenca possivel sem inventar uma terceira cor, e e a mesma solucao dos
 * botoes de fila — uma linguagem so para o mesmo elemento. */
.q-fila > .q-topo .q-conta,
.q-coluna > .q-topo .q-conta {
  background: #fff;
  color: var(--cor);
}

/* A ENGRENAGEM em branco quase cheio, com alvo de clique proprio no hover.
   Ela so aparece para quem pode mexer na coluna, entao quando esta na tela
   precisa ser achavel de primeira. */
.q-coluna > .q-topo .icone.miudo {
  opacity: .85;
  color: #fff;
  border-radius: 5px;
}
.q-coluna > .q-topo .icone.miudo:hover {
  opacity: 1;
  background: rgba(255, 255, 255, .22);
}
.q-fila > .q-topo .q-dia {
  background: rgba(255, 255, 255, .9);
  border-color: transparent;
  color: #111b21;
}

/* ====== O CARTAO QUE VIRA IMAGEM ======
 * O canvas ja desenha a propria moldura e o proprio fundo claro — ver
 * web/imagem.js e o porque de ele nao seguir o tema. Aqui so se cuida do
 * espaco em volta. */
.janela-cartao {
  display: flex;
  justify-content: center;
  padding: 4px 0;
}
.janela-cartao canvas {
  box-shadow: 0 1px 6px rgba(0, 0, 0, .14);
}

/* ====== CABECALHO DE BLOCO EM COR SOLIDA ======
 *
 * Pedido do dono (26/10/2026): *"de cor, cor solida para cada cabecalho do
 * titulo de resumo, contrato, cadastro, fidelidade."*
 *
 * Antes a cor do tipo era uma faixa fina na borda de cima. Em cinco blocos
 * empilhados ela virava um detalhe que ninguem via. Solida, o olho acha
 * "Faturas" sem ler nada — que e o ponto de ter cor por assunto.
 *
 * O texto vai em BRANCO sobre a cor, e por isso cada tom aqui e ESCURO: sao
 * tons escolhidos para dar contraste de pelo menos 4.5:1 com o branco, nos
 * dois temas. Pastel com texto branco em cima nao se le. */
/* ====== TODO BLOCO PRECISA TER UMA COR ======
 *
 * DEFEITO QUE EU INTRODUZI em 26/10/2026 e que o dono viu na mesma hora:
 * *"botoes que nao estao aparecendo mais (...) com uma faixa branca dentro
 * dele."*
 *
 * Eu havia escrito `var(--cor-bloco, var(--fundo-fraco))`, e `--fundo-fraco`
 * NAO EXISTE neste arquivo. Numa variavel inexistente a declaracao inteira e
 * descartada, entao o fundo ficava transparente — e com `color: #fff` por
 * cima, o titulo do bloco virava texto branco sobre fundo claro. Invisivel.
 *
 * A licao: `var(--x, var(--y))` so protege se `--y` existir. A reserva tem de
 * ser um valor literal, ou — como aqui — a variavel tem de ter um padrao
 * declarado no proprio elemento. */
.bloco { --cor-bloco: #4b5a63; }

.bloco > summary {
  background: var(--cor-bloco);
  color: #fff;
  border-radius: 8px 8px 0 0;
  padding: 7px 10px;
}
.bloco > summary .bloco-nome { color: #fff; font-weight: 650; }
.bloco > summary .bloco-resumo { color: rgba(255, 255, 255, .82); }
.bloco > summary .bloco-seta { color: rgba(255, 255, 255, .9); }
.bloco > summary:hover { filter: brightness(1.08); }

.bloco-resumo-cor { --cor-bloco: #1f7a5a; }
.bloco-fatura     { --cor-bloco: #b45309; }
.bloco-ordem      { --cor-bloco: #6d4bb8; }
.bloco-cadastro   { --cor-bloco: #37618f; }
.bloco-rede       { --cor-bloco: #2a6f97; }
.bloco-aviso      { --cor-bloco: #a33a2e; }
.bloco-neutro     { --cor-bloco: #4b5a63; }
.bloco-pagar      { --cor-bloco: #1b6b63; }
.bloco-fidelidade { --cor-bloco: #9a5b1b; }
.bloco-beneficio  { --cor-bloco: #1b6b63; }

/* ====== LENDO, SEM PISCAR ======
 *
 * Pedido do dono (26/10/2026): *"ele nao tem que fechar e mostrar lendo ou
 * carregando. Ele tem que se manter ali e pode dar um feedback de carregando."*
 *
 * O conteudo antigo fica, esmaecido e sem receber clique; a linha do contrato
 * que foi clicada pulsa. Assim nada salta de lugar, e mesmo assim da para ver
 * que o sistema esta trabalhando.
 *
 * `pointer-events: none` e parte do recado: clicar duas vezes enquanto o ERP
 * responde dispararia duas leituras, e a segunda chegaria por cima da
 * primeira. */
.ficha-lendo { opacity: .55; pointer-events: none; transition: opacity .12s; }

.ct-opcao.lendo { position: relative; }
.ct-opcao.lendo::after {
  content: "";
  position: absolute;
  inset: auto 8px 6px auto;
  width: 12px;
  height: 12px;
  border: 2px solid color-mix(in srgb, var(--verde) 35%, transparent);
  border-top-color: var(--verde);
  border-radius: 50%;
  animation: girando .6s linear infinite;
}
@keyframes girando { to { transform: rotate(360deg); } }

/* Quem prefere menos movimento nao ve a roda girar — so o esmaecido. */
@media (prefers-reduced-motion: reduce) {
  .ct-opcao.lendo::after { animation: none; }
}

/* ====== A SITUACAO DA FATURA, EM COR ======
 *
 * Pedido do dono (25/10/2026): *"voce deixa com um tom alaranjado. Se tiver
 * vencido, e um tom vermelho. E pagas com tom verde (...) cancelada tudo
 * vermelho, paga verde para diferenciar."*
 *
 * A cor entra na BORDA ESQUERDA e no valor, nunca no fundo da linha: fundo
 * colorido atras de texto derruba o contraste exatamente onde esta o numero
 * que importa.
 *
 * E a cor nao carrega a informacao sozinha — o vencimento escrito continua na
 * linha. Quem nao distingue laranja de vermelho le "venc. 20/10" e chega na
 * mesma conclusao. */
.bloco-linha.e-aviso,
.bloco-linha.e-alerta,
.bloco-linha.e-ok {
  border-left: 3px solid var(--tom);
  padding-left: 7px;
  border-radius: 0 4px 4px 0;
}
.bloco-linha.e-aviso  { --tom: #d97706; }
.bloco-linha.e-alerta { --tom: var(--alerta); }
.bloco-linha.e-ok     { --tom: #1baf7a; }

.bloco-linha.e-aviso .bloco-valor  { color: #b45309; font-weight: 600; }
.bloco-linha.e-alerta .bloco-valor { color: var(--alerta); font-weight: 600; }
.bloco-linha.e-ok .bloco-valor     { color: #15795a; }

/* No tema escuro os tons de texto precisam clarear para manter contraste. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .bloco-linha.e-aviso .bloco-valor { color: #f0a94c; }
  :root:not([data-tema="claro"]) .bloco-linha.e-ok .bloco-valor { color: #4fd1a5; }
}
:root[data-tema="escuro"] .bloco-linha.e-aviso .bloco-valor { color: #f0a94c; }
:root[data-tema="escuro"] .bloco-linha.e-ok .bloco-valor { color: #4fd1a5; }

/* ====== A ORDEM DE SERVICO E UM CARTAO ======
 *
 * Pedido do dono (26/10/2026): *"precisa estar mais organizada tambem, mas com
 * mais detalhes."*
 *
 * A faixa de cor a esquerda repete a lingua das faturas: laranja aberta,
 * vermelho cancelada, verde encerrada. Um sistema, uma lingua de cor.
 *
 * E a cor nunca vai sozinha: a palavra da situacao esta escrita a direita do
 * tipo, em todo cartao. */
.os-cartao {
  border: 1px solid var(--borda);
  border-left: 3px solid var(--tom, var(--borda));
  border-radius: 6px;
  padding: 8px 10px;
  margin-bottom: 7px;
  background: var(--fundo-painel);
}
.os-cartao:last-child { margin-bottom: 0; }
.os-cartao.e-aviso  { --tom: #d97706; }
.os-cartao.e-alerta { --tom: var(--alerta); }
.os-cartao.e-ok     { --tom: #1baf7a; }

.os-topo {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 5px;
}
/* 12px e nao 13px: mesmo pedido do dono sobre o resumo. O tipo da ordem
   ("INSTALACAO", "MUDANCA DE ENDERECO") e um rotulo, e nao o titulo da tela —
   o que o atendente procura no cartao e a DATA. */
.os-tipo { font-size: 12px; font-weight: 650; min-width: 0; overflow-wrap: anywhere; }
.os-situacao {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--tom);
}
.os-assunto {
  font-size: 12px;
  color: var(--texto-fraco);
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}
/* A grade do resumo serve aqui tal e qual: rotulo pequeno em cima, valor
   embaixo, tantas colunas quantas couberem. Um padrao so para os dois. */
.os-campos { margin-bottom: 6px; }

/* ====== A DESCRICAO NASCE DOBRADA ======
 * Ela tem cinco linhas do que o tecnico mediu. Aberta por padrao, empurraria
 * as outras ordens para fora da tela — e quem abriu "Ordens" quase sempre quer
 * a DATA, nao o laudo. */
.os-mais > summary {
  cursor: pointer;
  font-size: 11px;
  color: var(--verde);
  list-style: none;
  padding: 2px 0;
}
.os-mais > summary::-webkit-details-marker { display: none; }
.os-mais > summary::before { content: "+ "; font-weight: 700; }
.os-mais[open] > summary::before { content: "‘2 "; }
.os-texto {
  font-size: 12px;
  line-height: 1.45;
  color: var(--texto-fraco);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  padding: 4px 0 2px;
}
.os-protocolo {
  margin-top: 5px;
  font-size: 10px;
  color: var(--texto-fraquinho);
  letter-spacing: .02em;
}

/* ====== O CARTAO CLASSIFICADO VESTE A COR DA COLUNA ======
 *
 * Pedido do dono (26/10/2026): *"se eu pegar um deles e marco como instalacao,
 * ele vai ficar com o card na cor da instalacao, porem vai ficar abaixo dos
 * que nao tem nenhuma marcacao."*
 *
 * A cor entra na BORDA ESQUERDA e numa lavagem de fundo de 7%, nunca chapada:
 * o cartao tem nome, previa e etiquetas em cima, e fundo saturado atras de
 * texto derruba o contraste de tudo isso de uma vez.
 *
 * E a cor nao carrega sozinha a informacao — a etiqueta com o NOME da coluna
 * continua no pe do cartao, para quem nao distingue as cores e para quem tem
 * duas colunas de tons parecidos. */
.q-cartao.classificado {
  border-left: 3px solid var(--cor-crm, var(--borda));
  background: color-mix(in srgb, var(--cor-crm) 7%, var(--fundo-painel));
}
.q-cartao.classificado:hover {
  background: color-mix(in srgb, var(--cor-crm) 13%, var(--fundo-painel));
}

/* ====== O MODAL DE LER E DITAR (Wi-Fi, linha, franquia) ======
 *
 * Pedido do dono (26/10/2026): *"escreva nomes maiores (...) e diminua o
 * tamanho do modal na largura dele."*
 *
 * Este modal existe para o atendente DITAR a senha ao telefone ou copia-la.
 * Por isso o valor e grande e o rotulo e pequeno: o rotulo serve para achar o
 * campo, o valor e o que se le em voz alta. */
.modal-estreito { width: min(400px, calc(100vw - 32px)) !important; }

.jc-campos { display: flex; flex-direction: column; gap: 2px; }

.jc-campo {
  padding: 8px 10px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--texto) 4%, transparent);
}
.jc-campo.alerta {
  background: color-mix(in srgb, var(--alerta) 10%, transparent);
  color: var(--alerta);
}

.jc-rotulo {
  display: block;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--texto-fraquinho);
  margin-bottom: 2px;
}

.jc-linha { display: flex; align-items: center; gap: 8px; }

.jc-valor {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 15px;
  line-height: 1.3;
  font-weight: 600;
  overflow-wrap: anywhere;
}
/* ====== SENHA EM FONTE MONOESPACADA ======
 * E a unica em que 'l' e '1', 'O' e '0' nao se confundem. Ditar senha errada
 * por causa da fonte e um chamado a mais — e o cliente culpa o provedor. */
.jc-valor.mono {
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  font-size: 14.5px;
  letter-spacing: .02em;
}

/* Alvo de dedo, e nao um icone de 12px: este botao e usado com o telefone na
   outra mao. */
.jc-copiar {
  flex: 0 0 auto;
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--fundo-painel);
  color: var(--texto-fraco);
  cursor: pointer;
}
.jc-copiar:hover { background: var(--verde); border-color: var(--verde); color: #fff; }
.jc-copiar.feito { background: var(--verde); border-color: var(--verde); color: #fff; }

/* ====== AS TAGS DE ATENDIMENTO ======
 *
 * No cartao elas sao pequenas e coloridas; na escolha sao alvos de clique.
 * A cor identifica o grupo de assunto, e o NOME esta sempre escrito — cor
 * sozinha nao diz "financeiro" a ninguem, e duas tags do mesmo grupo tem tons
 * parecidos de proposito. */
.etiqueta.tag-atend {
  background: color-mix(in srgb, var(--cor) 16%, transparent);
  color: var(--cor);
  font-weight: 600;
}

.tags-grupos { display: flex; flex-direction: column; gap: 12px; margin-bottom: 4px; }
.tags-grupo h4 {
  margin: 0 0 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--texto-fraquinho);
}
.tags-lista { display: flex; flex-wrap: wrap; gap: 6px; }

.tag-escolha {
  padding: 6px 11px;
  border: 1px solid var(--borda);
  border-radius: 999px;
  background: var(--fundo-painel);
  color: var(--texto-fraco);
  font-size: 12.5px;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.tag-escolha:hover { border-color: var(--cor); color: var(--cor); }
/* MARCADA tem fundo da cor e nao so borda: numa lista de doze, a diferenca
   entre marcada e nao marcada precisa ser vista de longe, sem comparar. */
.tag-escolha[aria-pressed="true"] {
  background: var(--cor);
  border-color: var(--cor);
  color: #fff;
  font-weight: 600;
}

/* ====== RESPIRO DENTRO DOS CARTOES DA FICHA ======
 *
 * Relato do dono (26/10/2026): *"esta muito colado na margem as informacoes de
 * nome e telefone na aba de cadastro. A fidelidade do mesmo jeito."*
 *
 * O corpo do bloco tinha 4px em cima e nada nos lados — o texto encostava na
 * borda. 10px nos lados e o mesmo respiro que o resumo ja tinha, e o que faz
 * os tres cartoes parecerem da mesma familia. */
#ficha .bloco-corpo { padding: 8px 10px 10px; }

/* ====== A FIDELIDADE COMO CONQUISTA: TRES CARTOES ======
 *
 * Pedido do dono (26/10/2026): *"vai ficar tres cards: o nivel, moedas e
 * giros."*
 *
 * Eles sao iguais em tamanho e dividem a largura por igual — sao tres medidas
 * do mesmo assunto, e dar destaque a uma faria o olho ler as outras como
 * secundarias.
 *
 * ====== E IGUAIS NA COR TAMBEM (26/10/2026) ======
 *
 * O nivel tinha fundo dourado cheio; os outros dois, a mesma cor lavada.
 * Pedido do dono: *"o botao da fidelidade, que tem um nivel na aba fidelidade,
 * voce mantem a mesma cor dos demais, moedas e giros, porque ele esta com uma
 * cor diferente."*
 *
 * Ele esta certo, e isso derruba a justificativa que estava escrita aqui. O
 * cartao cheio nao chamava atencao por o nivel importar mais: ele chamava
 * atencao por ser OUTRO desenho no meio de tres medidas do mesmo assunto. O
 * nivel ja e lido primeiro porque esta primeiro. */
.fid-topo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-bottom: 9px;
}

.fid-cartao {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 9px 4px;
  border-radius: 10px;
  line-height: 1;
  min-width: 0;
}
.fid-nivel,
.fid-moedas,
.fid-giros {
  background: color-mix(in srgb, #b4791f 13%, var(--fundo-painel));
  color: var(--texto);
  border: 1px solid color-mix(in srgb, #b4791f 30%, transparent);
}

.fid-n {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.02em;
  /* Numero grande que nao cabe (9.740) encolhe em vez de estourar o cartao. */
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fid-r {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  opacity: .78;
}

/* ====== AS VANTAGENS EM GRUPO COM NOME, E NAO EM PILULAS ======
 *
 * Pedido do dono (26/10/2026): *"faca um arranjo melhor para essas pilulas da
 * fidelidade. Nao gostei desse estilo nao. Eu acho que e melhor tirar da
 * pilula e dar cor para eles, mas contanto que mostre que sao beneficios, e o
 * de fidelidade mostre descontos (...) porque ta meio feio esses badges. Ta
 * meio estranho esses botoes de pilula, essas informacoes de mudanca de
 * endereco, visita, enfim. Precisa ficar de uma forma mais organizada."*
 *
 * O ERRO ERA A FORMA, E ELE E MEU. Pilula promete etiqueta de uma palavra;
 * "Prioridade de atendimento tecnico" numa pilula vira um comprimido torto, e
 * quatro deles em fila quebrada nao tem nem alinhamento nem ordem — nem onde
 * pendurar o valor ("Gratis", "R$ 10,00/mes"). E pilula verde ao lado de badge
 * verde dizia que eram a mesma coisa, quando sao duas bem diferentes.
 *
 * Agora: moldura com cabecalho, faixa de cor na esquerda, e cada item numa
 * LINHA — nome a esquerda, valor a direita. A coluna da direita fica alinhada,
 * entao da para ver o que e gratis correndo o olho, sem ler nome nenhum.
 *
 * A COR MORA NO GRUPO (`--tom`), nao no item: verde para o que ele tem de
 * graca, azul para o que ele paga a menos. */
.fid-grupo {
  margin-top: 9px;
  border: 1px solid color-mix(in srgb, var(--tom) 22%, transparent);
  border-left: 3px solid var(--tom);
  border-radius: 8px;
  overflow: hidden;
  background: color-mix(in srgb, var(--tom) 5%, transparent);
}
.fid-grupo-topo {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 9px;
  background: color-mix(in srgb, var(--tom) 11%, transparent);
  color: var(--tom);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.fid-grupo-topo .ic { flex: 0 0 auto; opacity: .85; }
.fid-grupo-nome { flex: 1 1 auto; min-width: 0; }
/* Quantos sao, sem precisar contar. */
.fid-grupo-conta {
  flex: 0 0 auto;
  min-width: 15px;
  padding: 1px 4px;
  border-radius: 999px;
  text-align: center;
  letter-spacing: 0;
  background: color-mix(in srgb, var(--tom) 20%, transparent);
}
.fid-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 5px 9px;
  font-size: 11.5px;
  line-height: 1.35;
}
/* Fio entre itens, e nao moldura em cada um: separa sem virar oito caixas. */
.fid-item + .fid-item { border-top: 1px solid color-mix(in srgb, var(--tom) 13%, transparent); }
.fid-item-nome { flex: 1 1 auto; min-width: 0; color: var(--texto); }
.fid-item-valor {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--tom);
  font-variant-numeric: tabular-nums;
}

.fid-grupo.e-ok   { --tom: #15795a; }
.fid-grupo.e-info { --tom: #1f6ab0; }
.fid-grupo.e-aviso { --tom: #a65c05; }

/* No escuro os tres clareiam: #15795a sobre #111b21 nao se le. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .fid-grupo.e-ok { --tom: #4fd1a5; }
  :root:not([data-tema="claro"]) .fid-grupo.e-info { --tom: #6fc0f0; }
  :root:not([data-tema="claro"]) .fid-grupo.e-aviso { --tom: #f0a94c; }
}
:root[data-tema="escuro"] .fid-grupo.e-ok { --tom: #4fd1a5; }
:root[data-tema="escuro"] .fid-grupo.e-info { --tom: #6fc0f0; }
:root[data-tema="escuro"] .fid-grupo.e-aviso { --tom: #f0a94c; }

/* ====== O QUE FALTA FICA ESCRITO ======
 * Pedido do dono (26/10/2026): *"se nao tiver, voce deixa escrito la que
 * precisa buscar no endpoint na API do EcoApps, para que o outro agente
 * consiga fazer e saber o que ele precisa."*
 *
 * Campo que some nao vira tarefa de ninguem. Campo que diz "falta a rota X"
 * vira — e quem abre a ficha entende por que o numero nao esta la. */
.bloco-falta {
  display: flex;
  gap: 6px;
  margin-top: 9px;
  padding: 7px 9px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--espera, #f0c040) 16%, transparent);
  font-size: 11px;
  line-height: 1.45;
  color: var(--texto-fraco);
}
.bloco-falta .ic { flex: 0 0 auto; margin-top: 1px; opacity: .8; }

/* ====== O EXPOENTE DO BOTAO DE FILA ======
 *
 * Pedido do dono (26/10/2026): o numero de quem esta esperando sai de dentro
 * do botao e vira um balao no canto de cima. Dois numeros iguais lado a lado
 * nao diziam qual era qual; separados por posicao e por forma, a duvida acaba.
 *
 * `position: absolute` em cima do botao, e por isso o botao precisou de
 * `position: relative` e de um respiro acima — que e a outra metade do pedido
 * dele: *"voce vai precisar descer um pouco mais esses cards, porque esta
 * pegando muito na margem do cabecalho."* */
.fila-botao { position: relative; overflow: visible; }

/* ====== O EXPOENTE DO BOTAO DE FILA ======
 * Relato do dono (26/10/2026): *"la no card dos atendimentos da URA,
 * aguardando atendimento, ele esta esticado."*
 *
 * Estava mesmo: `min-width` de 17 com padding de 4 de cada lado dava 25px de
 * largura para 17 de altura — um oval. Com o padding em 2 e a largura minima
 * igual a altura, um digito da um balao redondo, e so dois ou mais o alargam. */
.fila-expoente {
  position: absolute;
  top: -7px;
  right: -6px;
  display: grid;
  place-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 2px;
  /* O mesmo balao do selo, so que menor — tres cantos redondos e o bico em
     baixo a esquerda. Uma forma so para o mesmo significado nos dois lugares. */
  border-radius: 999px 999px 999px 4px;
  background: var(--nao-lida);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  /* O anel na cor do fundo da pagina recorta o expoente do botao colorido —
     sem ele, vermelho sobre verde escuro some. */
  box-shadow: 0 0 0 1.5px var(--fundo-app);
  pointer-events: none;
}

/* O MESMO PULSO DO SELO, pela mesma razao: anel num pseudo-elemento, animando
   so transform e opacity, para nao custar layout a cada quadro. */
.fila-expoente::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--nao-lida);
  animation: pulso-selo 3s ease-out infinite;
  z-index: -1;
}
@media (prefers-reduced-motion: reduce) {
  .fila-expoente::after { animation: none; }
}

/* ====== O RESPIRO QUE O EXPOENTE PEDIU ======
 * Com o balao subindo 7px acima do botao, a fileira precisava sair de junto do
 * cabecalho — senao ele encosta na borda e fica cortado. */
#filas { margin-top: 9px; overflow: visible; }

/* ====== A PAGINACAO DE CINCO EM CINCO ======
 *
 * Pedido do dono (26/10/2026): *"fica muita informacao (...) coloca paginacao
 * de 5 em 5, senao pode crescer demais, fica um negocio meio feio."*
 *
 * O rodape e discreto de proposito: ele nao e conteudo, e so o jeito de
 * alcancar o conteudo. Por isso fonte pequena, sem moldura, e as setas sem
 * fundo ate o hover. */
.pg-pe {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid color-mix(in srgb, var(--borda) 60%, transparent);
}

.pg-conta {
  font-size: 10.5px;
  color: var(--texto-fraquinho);
  letter-spacing: .02em;
}
.pg-conta b { color: var(--texto-fraco); font-weight: 700; }
/* O total vem depois, menor: e contexto, nao a posicao atual. */
.pg-conta i { font-style: normal; opacity: .75; margin-left: 4px; }

.pg-botao {
  display: inline-grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: var(--texto-fraco);
  cursor: pointer;
}
.pg-botao:hover:not(:disabled) {
  border-color: var(--borda);
  background: var(--fundo-painel);
  color: var(--texto);
}
/* DESLIGADO, e nao escondido: botao que some faz o outro pular de lugar, e a
   pessoa erra o clique seguinte. */
.pg-botao:disabled { opacity: .3; cursor: default; }

/* A seta de "anteriores" e a mesma de voltar, entao nao precisa girar; a de
   "proximos" e a seta para a direita, que ja aponta certo. */
.pg-item[hidden] { display: none; }

/* ====== OS CARTOES DOS BENEFICIOS ======
 *
 * Pedido do dono (26/10/2026): *"um card distinguindo cada item (...) fica
 * muito colado um do outro."*
 *
 * Mesma anatomia dos cartoes de ordem de servico, de proposito: faixa de cor a
 * esquerda, titulo em cima, campos numa grade embaixo. Duas telas que mostram
 * listas parecidas nao podem ter desenhos diferentes — quem aprende uma tem de
 * ja saber ler a outra. */
/* ====== CARTAO BAIXO: DUAS OU TRES LINHAS ======
 *
 * Pedido do dono (26/10/2026): *"eu quero que ele seja pequeno. Nao quero um
 * card com altura muito alta. Tenta colocar no maximo em 2 linhas, o que nao
 * for, no maximo 3."*
 *
 * Com sete descontos na aba, cada cartao alto empurra o resto para fora da
 * tela e vira rolagem — e a aba existe justamente para ver os sete de relance.
 *
 * O que encolheu: padding menor, titulo numa linha so com reticencias, e os
 * campos numa fileira horizontal em vez de grade. Tres campos cabem lado a
 * lado; o quarto quebra, e ai sao tres linhas, que e o teto que ele deu. */
.bf-cartao {
  border: 1px solid var(--borda);
  border-left: 3px solid var(--tom, var(--borda));
  border-radius: 7px;
  padding: 6px 9px;
  margin-bottom: 5px;
  background: var(--fundo-painel);
}
.bf-cartao:last-child { margin-bottom: 0; }
.bf-cartao.e-ok      { --tom: #1baf7a; }
.bf-cartao.e-aviso   { --tom: #d97706; }
.bf-cartao.e-alerta  { --tom: var(--alerta); }
.bf-cartao.e-neutro  { --tom: #4b5a63; }

.bf-topo {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 7px;
  margin-bottom: 3px;
}

/* A origem do desconto (Fidelidade, Roleta, Loja, Indicacao) na cor da faixa
   do cartao: a mesma cor dizendo a mesma coisa em dois lugares. */
.bf-marca {
  flex: 0 0 auto;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--tom) 15%, transparent);
  color: var(--tom);
}
.bf-titulo {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  font-weight: 650;
  line-height: 1.3;
  /* UMA LINHA SO: titulo de desconto tem 46 caracteres e quebrava em duas,
     dobrando a altura do cartao. O texto inteiro fica no `title`. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* O VALOR a direita, na cor da faixa: e o numero que o atendente procura, e
   ele deve ser achavel sem ler o titulo. */
.bf-valor {
  flex: 0 0 auto;
  font-size: 12.5px;
  font-weight: 750;
  color: var(--tom);
  white-space: nowrap;
}

/* A grade dos campos aqui e mais apertada que na ficha: sao tres ou quatro
   campos curtos dentro de um cartao pequeno. */
/* ====== OS CAMPOS NUMA FILEIRA, NAO NUMA GRADE ======
 * A grade dava uma celula por campo e empilhava; na fileira, tres campos
 * curtos dividem a mesma linha. O rotulo encolheu para caber ao lado do valor,
 * em vez de ficar acima dele — e aqui isso funciona porque sao campos de duas
 * ou tres palavras. */
.bf-campos {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  align-items: baseline;
}
.bf-campos .rs-item { display: inline-flex; align-items: baseline; gap: 4px; min-width: 0; }
.bf-campos .rs-rotulo { margin: 0; font-size: 8.5px; }
.bf-campos .rs-valor { font-size: 11px; }

/* ====== O CODIGO DO RESGATE NUMA LINHA SO ======
 * Pedido do dono (26/10/2026): *"coloque o codigo do resgate numa unica linha,
 * ao inves de quebrar ele em 3."*
 *
 * Ele tem 34 caracteres (`resgate-1792286371387-euh4p2`) e com
 * `overflow-wrap: anywhere` quebrava em tres. Aqui ele corta com reticencias —
 * ninguem le esse codigo na tela, copia. O botao de copiar leva o valor
 * inteiro, que e o que importa. */
.bf-campos .rs-copiavel > span {
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A linha da equipe com a foto ao lado do nome: a cara ajuda a achar a pessoa
   numa lista de quinze mais depressa que o nome escrito. */
.eq-linha { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.eq-linha .avatar { flex: 0 0 auto; }

/* ====== A TELA DE CONSUMO DA LINHA ======
 *
 * Pedido do dono (26/10/2026), com prints da central do cliente: *"eu quero
 * com grafico, percentual, um negocio mais organizado, bem parecido como e no
 * aplicativo do cliente."*
 *
 * A mudanca que importa nao e de enfeite: a central mostra o que RESTA, e eu
 * mostrava o que foi usado. Sao a mesma conta e perguntas opostas — o cliente
 * liga para saber quanto ainda tem. Por isso o numero grande e o disponivel, e
 * o usado virou barra. */
.cs { display: flex; flex-direction: column; gap: 7px; }

/* ---- o chip ---- */
.cs-chip {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 11px;
  background: linear-gradient(135deg, #5b3fb8, #7d4bc4);
  color: #fff;
}
.cs-chip-ic { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,.18); }
.cs-chip-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.cs-chip-n { font-size: 15.5px; font-weight: 750; letter-spacing: -.01em; }
.cs-chip-plano { font-size: 10.5px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cs-situacao {
  flex: 0 0 auto;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
}
.cs-situacao.boa { background: rgba(27,175,122,.95); color: #fff; }
.cs-situacao.ruim { background: rgba(229,52,43,.95); color: #fff; }
.cs-chip .copiar { background: rgba(255,255,255,.18); border: 0; color: #fff; }
.cs-chip .copiar:hover { background: rgba(255,255,255,.34); }

/* ---- renovacao e vencimento, lado a lado ----
 * Duas datas que se confundem: a franquia renova no aniversario da linha, a
 * fatura vence no dia do contrato. Lado a lado, com rotulo em cada uma, nao ha
 * como ler uma pela outra. */
.cs-datas { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 6px; }
.cs-data {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 7px 9px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--verde) 9%, transparent);
}
.cs-data-r {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--texto-fraquinho);
}
.cs-data b { font-size: 14px; font-weight: 750; line-height: 1.15; }
.cs-data i { font-style: normal; font-size: 10px; color: var(--texto-fraco); }

/* ---- os dados ---- */
.cs-dados {
  padding: 10px 11px;
  border-radius: 11px;
  background: linear-gradient(135deg, #1f6fb2, #2a8fc4);
  color: #fff;
}
.cs-dados-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cs-dados-nome { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 650; }
.cs-dados-pct { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.22); }
.cs-grande { font-size: 25px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; }
.cs-grande small { font-size: 12px; font-weight: 600; opacity: .85; margin-left: 6px; letter-spacing: 0; }
.cs-de { font-size: 11px; opacity: .85; margin-top: 2px; }

.cs-trilho { height: 7px; border-radius: 999px; background: rgba(255,255,255,.26); overflow: hidden; margin: 8px 0 2px; }
.cs-trilho.grosso { height: 10px; }
.cs-trilho > i { display: block; height: 100%; border-radius: 999px; background: #fff; }

/* ---- voz e SMS ---- */
.cs-medidores { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.cs-medidor {
  padding: 8px 9px;
  border-radius: 11px;
  border: 1px solid color-mix(in srgb, var(--cor) 32%, transparent);
  background: color-mix(in srgb, var(--cor) 8%, var(--fundo-painel));
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.cs-medidor-nome { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-fraquinho); }
.cs-medidor-n { font-size: 17px; font-weight: 800; color: var(--cor); letter-spacing: -.02em; line-height: 1.1; }
.cs-medidor-u { font-size: 10.5px; color: var(--texto-fraco); }
.cs-medidor .cs-trilho { background: color-mix(in srgb, var(--cor) 18%, transparent); margin: 6px 0 3px; }
.cs-medidor .cs-trilho > i { background: var(--cor); }
.cs-medidor-pe { font-size: 10px; color: var(--texto-fraquinho); }

/* ---- a serie por dia ---- */
.cs-serie { border: 1px solid var(--borda); border-radius: 10px; padding: 8px 9px; }
.cs-serie-topo { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; font-size: 12px; }
.cs-serie-topo span { font-size: 10.5px; color: var(--texto-fraquinho); }

/* ====== OS DOIS LADOS DA SUBTRACAO, COM NOME ======
 *
 * Relato do dono (26/10/2026): *"voce marca ali usado, para ficar claro,
 * porque eu nao sei quanto que ta, se foi consumido 1,5 giga ou se falta 1,5
 * giga."*
 *
 * O painel antigo tinha UM numero grande sem rotulo e o outro em letra miuda
 * embaixo. Quem olha de relance ve um numero e nao sabe de que lado da
 * subtracao ele esta — e e a mesma conta para duas perguntas opostas.
 *
 * Agora os dois tem rotulo, nas duas pontas da mesma linha, e a barra fica
 * entre eles: o desenho sozinho diz qual cresce. */
.cs-par { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.cs-lado { display: flex; flex-direction: column; min-width: 0; }
.cs-lado.direita { text-align: right; }
.cs-lado-r {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .85;
}
.cs-lado b { font-size: 18px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }

/* ====== A FRANQUIA DENTRO DO RESUMO: BARRA FINA, E NAO CARTAO ======
 *
 * Aqui morava `.cs-mini`, que encolhia o painel inteiro do modal para caber no
 * resumo. Saiu por correcao do dono (26/10/2026): *"eu nao pedi para voce
 * colocar o card completo, mas apenas as informacoes (...) senao ia ficar do
 * jeito que eu nao queria, de crescer mais."*
 *
 * O que ficou sao tres linhas: os dois lados com rotulo, a barra, e o total. */
.rs-fr { margin-top: 6px; }
.rs-fr-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  font-weight: 650;
}
.rs-fr-topo i {
  font-style: normal;
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto-fraquinho);
  margin-right: 2px;
}
.rs-fr-topo b { font-size: 10px; font-weight: 800; color: var(--texto-fraco); }
.rs-fr-topo .direita { text-align: right; }

.rs-fr-trilho {
  height: 5px;
  margin: 4px 0 3px;
  border-radius: 999px;
  background: var(--fundo-fraco, rgba(127, 127, 127, .18));
  overflow: hidden;
}
.rs-fr-trilho > i { display: block; height: 100%; border-radius: 999px; background: var(--verde); }
/* A 90% a barra muda de cor: e o ponto em que o atendente precisa AVISAR, e
   nao so informar. */
.rs-fr-trilho.cheio > i { background: var(--alerta); }

.rs-fr-pe { font-size: 9px; color: var(--texto-fraquinho); }

/* ====== O MODAL DO WI-FI ======
 *
 * Pedido do dono (26/10/2026): *"deixa ele mais bonito, mais elegante."*
 *
 * O desenho sai do uso, nao do gosto: ele existe para DITAR a senha ao
 * telefone ou cola-la na conversa. Entao rede e senha ganham cartao proprio e
 * fonte grande, e o resto (aparelho, IP, login PPPoE) vira rodape miudo —
 * aquilo e consulta tecnica, nao e o que se dita ao cliente. */
.wf { display: flex; flex-direction: column; gap: 7px; }

.wf-cartao {
  padding: 10px 12px;
  border-radius: 11px;
  background: linear-gradient(135deg, #1f6fb2, #2a8fc4);
  color: #fff;
}
/* A SENHA em verde: ela e a resposta, e ter cor propria faz o olho ir direto
   nela quando o modal abre. */
.wf-cartao.mono { background: linear-gradient(135deg, #12795f, #1aa37c); }

.wf-rotulo {
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: .82;
  margin-bottom: 2px;
}
.wf-linha { display: flex; align-items: center; gap: 9px; }
.wf-valor {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 19px;
  font-weight: 750;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
/* MONOESPACADA na senha: e a unica fonte em que 'l' e '1', 'O' e '0' nao se
   confundem. Ditar senha errada por causa da fonte e um chamado a mais. */
.wf-cartao.mono .wf-valor {
  font-family: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, monospace;
  letter-spacing: .04em;
}
.wf-cartao .jc-copiar {
  background: rgba(255, 255, 255, .2);
  border-color: transparent;
  color: #fff;
}
.wf-cartao .jc-copiar:hover { background: rgba(255, 255, 255, .36); }

.wf-erro {
  display: flex;
  gap: 8px;
  padding: 11px 12px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--alerta) 12%, transparent);
  color: var(--alerta);
  font-size: 12.5px;
  line-height: 1.45;
}

/* ---- o rodape tecnico ---- */
.wf-resto {
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 4px 9px;
}
.wf-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
}
.wf-item + .wf-item { border-top: 1px solid color-mix(in srgb, var(--borda) 55%, transparent); }
.wf-item-r {
  flex: 0 0 92px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto-fraquinho);
}
.wf-item-v { flex: 1 1 auto; min-width: 0; font-size: 12px; overflow-wrap: anywhere; }
.jc-copiar.miudo { width: 24px; height: 24px; border-radius: 6px; }

/* ====== A SITUACAO DO CONTRATO ======
 * Pedido do dono (26/10/2026): ela aparece em TODOS, e nao so nos que nao
 * estao ativos — ausencia de aviso tambem e o que se ve quando o dado nao
 * veio, e o atendente precisa saber que esta ativo, nao deduzir. */
.ct-sit {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
}
.ct-sit.boa   { background: color-mix(in srgb, #1baf7a 18%, transparent); color: #15795a; }
.ct-sit.media { background: color-mix(in srgb, #d97706 20%, transparent); color: #a65c05; }
.ct-sit.ruim  { background: color-mix(in srgb, var(--alerta) 16%, transparent); color: var(--alerta); }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .ct-sit.boa { color: #4fd1a5; }
  :root:not([data-tema="claro"]) .ct-sit.media { color: #f0a94c; }
}
:root[data-tema="escuro"] .ct-sit.boa { color: #4fd1a5; }
:root[data-tema="escuro"] .ct-sit.media { color: #f0a94c; }

/* O badge de desconto da fidelidade virou a linha "Desconto de fidelidade"
   dentro do grupo Descontos, logo acima. Ver o porque lá. */

/* ====== O CARTAO DO CONTRATO ======
 * Tres linhas: servico (ou COMBO), plano, situacao. O olho no canto, dentro.
 * O padding da direita abre espaco para ele nao cobrir o texto. */
.ct-opcao { padding-right: 36px; align-items: flex-start; }
/* ====== OS ICONES DE SERVICO, EMPILHADOS ======
 * Pedido do dono (26/10/2026): um abaixo do outro, com espaco para ate tres.
 * Largura FIXA: assim o cartao de um contrato simples e o de um combo tem a
 * mesma forma, e a coluna de texto comeca sempre no mesmo lugar. */
.ct-ics {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  flex: 0 0 22px;
  padding-top: 1px;
}
.ct-ics .ct-ic {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  /* A reserva, para servico que nao casar com nenhum dos quatro: solida
     tambem, para nao destoar dos vizinhos. */
  background: #4b5a63;
  color: #fff;
}

.ct-texto { gap: 2px; }

/* COMBO/MULTI: a palavra em destaque e os servicos ao lado, para o atendente
   nao ler "Telefonia" num contrato que tambem tem internet. */
.ct-pacote {
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--texto-fraquinho);
  margin-left: 5px;
}

/* A situacao embaixo do plano, e nao ao lado do nome — pedido do dono. */
/* Os badges numa fileira sob o plano: situacao do contrato e, quando houver,
   o aviso de que o streaming nao foi ativado. */
.ct-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.ct-badges .ct-sit { margin: 0; }

/* ====== AS ABAS DENTRO DO RESUMO ======
 * Pedido do dono (26/10/2026): o contrato escolhido mostra o plano por
 * servico, em ate tres abas. Menores que as abas dos blocos, porque o resumo e
 * um cartao estreito e elas dividem a largura com o conteudo. */
/* ====== AS ABAS DO CONTRATO SAO BOTOES, EM TRES COLUNAS ======
 *
 * Pedido do dono (26/10/2026): *"o botao tem que ter um tamanho unico (...)
 * voce divide em 3, porque quando tiver os 3 do combo vai ficar cada um na sua
 * coluna. Quando tiver 2, duas colunas; quando tiver 1, uma — mas proporcional
 * como se tivessem 3."*
 *
 * A grade e SEMPRE de tres colunas, e as abas ocupam as primeiras. Assim um
 * contrato de internet tem o botao com um terco da largura, e um combo tem
 * tres do mesmo tamanho — a largura de cada um nao muda conforme quantos sao,
 * que e o que faz a ficha parecer a mesma em qualquer cliente. */
.rs-abas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0 0 6px;
  border: 0;
  padding: 0;
}
.rs-abas .aba {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 4px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--fundo-painel);
  color: var(--texto-fraquinho);
  min-width: 0;
}
.rs-abas .aba span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ESCOLHIDA veste a cor do servico — as mesmas do EcoApps. */
.rs-abas .aba[aria-selected="true"] { border-color: currentColor; }
.rs-abas .aba.s-internet[aria-selected="true"]  { background: var(--serv-internet-fundo);  color: var(--serv-internet); }
.rs-abas .aba.s-telefonia[aria-selected="true"] { background: var(--serv-telefonia-fundo); color: var(--serv-telefonia); }
.rs-abas .aba.s-tv[aria-selected="true"]        { background: var(--serv-tv-fundo);        color: var(--serv-tv); }
.rs-abas .aba.s-combo[aria-selected="true"]     { background: var(--serv-combo-fundo);     color: var(--serv-combo); }

/* ====== O TOPO DO MODAL, COM O X ======
 * Pedido do dono (26/10/2026): o X no alto, e nada de sobra nas laterais.
 *
 * O padding de 22px fazia sentido num modal de formulario, onde os campos
 * precisam de respiro. Num modal que mostra CARTOES — consumo, Wi-Fi — ele
 * virava uma moldura vazia em volta de um conteudo que ja tem a sua propria
 * margem. */
.modal-topo {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}
.modal-topo h3 { flex: 1 1 auto; min-width: 0; margin: 0; }
.modal-x {
  flex: 0 0 auto;
  margin: -4px -4px 0 0;
  color: var(--texto-fraco);
}
.modal-x:hover { background: color-mix(in srgb, var(--alerta) 12%, transparent); color: var(--alerta); }

/* ====== SEM SOBRA NAS LATERAIS NO MODAL QUE SO MOSTRA ======
 * O conteudo (cartoes de consumo, de Wi-Fi) ja traz a propria margem; o
 * padding do modal so acrescentava uma faixa vazia. */
.modal-estreito { padding: 14px 14px 16px !important; }
.modal-estreito .modal-topo { margin-bottom: 8px; }
.modal-estreito h3 { font-size: 15px; }

/* ====== O NUMERO DO CONTRATO ======
 * Pedido do dono (26/10/2026): *"bem pequeno ao lado do titulo, so para a
 * gente saber e se orientar."* Ele e endereco, nao e titulo — por isso 9px e
 * cor fraca: esta la para quem procura, sem disputar o olho com o servico. */
.ct-num {
  font-style: normal;
  font-size: 9px;
  font-weight: 700;
  color: var(--texto-fraquinho);
  margin-left: 4px;
  vertical-align: baseline;
}

/* ====== TUDO UM PONTO MENOR NA FICHA ======
 *
 * Relato do dono (26/10/2026): *"tem muita coisa grande aqui (...) Visita esta
 * muito grande. Pode diminuir para poder mostrar essas informacoes que eu to
 * te pedindo."*
 *
 * A ficha ganhou campos ao longo do dia — contrato, ciclo, vencimento,
 * franquia, ordem de servico — e os tamanhos vieram de quando ela tinha
 * metade disso. Aqui tudo desce um ponto, sem mexer na hierarquia: o que era
 * maior continua maior.
 *
 * O piso e 10px: abaixo disso deixa de ser texto e vira ruido cinza. */
#ficha .ct-nome { font-size: 11.5px; }
#ficha .ct-sob { font-size: 9.5px; }
#ficha .rs-valor { font-size: 11.5px; }
#ficha .rs-item.forte .rs-valor { font-size: 13.5px; }
#ficha .rs-rotulo { font-size: 8.5px; }
#ficha .bloco-nome { font-size: 11.5px; }
#ficha .bloco-resumo { font-size: 10.5px; }

/* A ordem de servico era a mais alta: o tipo em 13px e os campos em grade. */
#ficha .os-tipo { font-size: 11.5px; }
#ficha .os-assunto { font-size: 10.5px; }
#ficha .os-campos .rs-valor { font-size: 10.5px; }
#ficha .os-cartao { padding: 6px 9px; margin-bottom: 5px; }
#ficha .os-texto { font-size: 11px; }
#ficha .os-protocolo { font-size: 9px; }

/* E os cartoes de beneficio acompanham. */
#ficha .bf-titulo { font-size: 11.5px; }
#ficha .bf-valor { font-size: 11.5px; }
#ficha .bf-campos .rs-valor { font-size: 10.5px; }

/* ====== AS CORES DE SERVICO VIERAM DO ECOAPPS ======
 *
 * Pedido do dono (26/10/2026): *"coloque as cores que ja existem de cada tipo
 * de servico. Busque tambem no EcoApps."*
 *
 * Copiadas de `web/styles.css` do EcoApps, onde elas vivem como
 * `--area-internet`, `--area-telefonia`, `--area-tv` e `--bloco-combo`. Os
 * tons escuros sao o traco e o texto; os claros, o fundo.
 *
 * Mesma cor nos dois sistemas pelo mesmo motivo dos icones: o atendente olha
 * os dois lado a lado o dia inteiro, e cor diferente para o mesmo servico faz
 * ele parar para conferir se e a mesma coisa. */
:root {
  --serv-internet: #0b6fa4;
  --serv-internet-fundo: #dbeefc;
  --serv-telefonia: #1c6f55;
  --serv-telefonia-fundo: #d9f3e7;
  --serv-tv: #6b3fa0;
  --serv-tv-fundo: #ece3fb;
  --serv-combo: #a3386a;
  --serv-combo-fundo: #fde5ef;
}

/* No tema escuro o FUNDO claro nao serve — ele brigaria com o painel. O traco
   fica, e o fundo vira uma lavagem da propria cor. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --serv-internet-fundo: color-mix(in srgb, #0b6fa4 24%, transparent);
    --serv-telefonia-fundo: color-mix(in srgb, #1c6f55 24%, transparent);
    --serv-tv-fundo: color-mix(in srgb, #6b3fa0 24%, transparent);
    --serv-combo-fundo: color-mix(in srgb, #a3386a 24%, transparent);
  }
}
:root[data-tema="escuro"] {
  --serv-internet-fundo: color-mix(in srgb, #0b6fa4 24%, transparent);
  --serv-telefonia-fundo: color-mix(in srgb, #1c6f55 24%, transparent);
  --serv-tv-fundo: color-mix(in srgb, #6b3fa0 24%, transparent);
  --serv-combo-fundo: color-mix(in srgb, #a3386a 24%, transparent);
}

/* O icone de cada servico veste a cor dele, no cartao do contrato. */
/* ====== COR SOLIDA NOS ICONES DO CONTRATO ======
 *
 * Pedido do dono (26/10/2026): *"eu quero cores solidas, nao quero
 * esmaecido."*
 *
 * Eu tinha posto a cor no traco sobre um fundo lavado. Ele esta certo para
 * este caso: o icone tem 14px, e a 14px um traco colorido sobre fundo pastel
 * se le como cinza. Com o fundo CHEIO e o traco branco, o servico se reconhece
 * de relance — e e exatamente o que a coluna de icones existe para fazer. */
.ct-ics .ct-ic.s-internet  { background: var(--serv-internet);  color: #fff; }
.ct-ics .ct-ic.s-telefonia { background: var(--serv-telefonia); color: #fff; }
.ct-ics .ct-ic.s-tv        { background: var(--serv-tv);        color: #fff; }
.ct-ics .ct-ic.s-combo     { background: var(--serv-combo);     color: #fff; }

/* O contrato ESCOLHIDO nao repinta mais os icones: a cor deles diz o servico,
   e o realce da escolha e a moldura do cartao. Duas coisas, dois sinais. */
.ct-opcao.escolhido .ct-ics .ct-ic { filter: none; }

/* E as abas do contrato, no resumo, levam a mesma cor quando escolhidas. */
.rs-abas .aba[aria-selected="true"] { color: var(--texto); }

/* ====== O PAREAMENTO DO WHATSAPP NÃO OFICIAL ======
   O QR e o passo a passo lado a lado: quem está com o celular na mão precisa
   dos dois no mesmo olhar. Abaixo de 560px eles empilham, com o código em
   cima — é ele que a câmera procura. */
.zap-estado { margin-top: 10px; }
.zap-qr {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 16px;
  align-items: center;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid var(--borda);
  border-radius: var(--r);
  background: var(--fundo-painel);
}
/* Fundo branco SEMPRE, inclusive no tema escuro: leitor de QR espera preto
   sobre branco, e invertido muitos celulares simplesmente não leem. */
.zap-qr img { background: #fff; padding: 8px; border-radius: 6px; display: block; }
.zap-qr ol { margin: 0; }
@media (max-width: 560px) {
  .zap-qr { grid-template-columns: 1fr; }
  .zap-qr img { margin: 0 auto; }
}