/* Ferramentas do SeuLead (Conversões offline, Anúncios e Integrações): mesma
   direção visual do painel (registro carimbado, tinta verde, selo dourado,
   papel quente). Herda os tokens do app.css e por isso esta folha é curta de
   propósito: cor nova aqui seria uma segunda identidade no mesmo produto.

   CLASSE NOVA SÓ QUANDO NÃO EXISTE EQUIVALENTE. A moldura dos painéis é a
   .card do app.css; a tabela é .tab dentro de .tab-rolagem, e é de lá que ela
   herda de graça a virada para ficha empilhada abaixo de 760px (o rótulo vem
   do data-r de cada célula). O que mora aqui tem prefixo .fer- e não vaza. */

/* --------------------------------------------------------------- Corpo */
/* `min-width: 0` na cadeia inteira: a Central e o Tráfego vivem embutidos no
   <main> do painel, que é item de grid. Item de grid tem largura mínima
   automática igual ao conteúdo, então qualquer filho largo (tabela de campanha,
   fileira de KPI) empurra o main e faz a PÁGINA rolar de lado em vez de o
   próprio bloco rolar. É a mesma correção que a .tab-rolagem já carrega. */
.fer-embutido { display: block; min-width: 0; }
.fer-corpo { padding: 4px 0 8px; min-width: 0; }
.fer-vazio {
  color: var(--tinta2); font-size: 0.875rem; padding: 26px 16px; text-align: center;
  background: rgba(255, 253, 250, 0.55); border: 1px dashed var(--linha); border-radius: 12px;
  margin: 0 0 14px;
}
.fer-suave { color: var(--suave); }
.fer-mono {
  font-family: var(--f-mono); font-size: var(--t-micro); color: var(--suave);
  letter-spacing: 0.02em; word-break: break-all;
}

/* ------------------------------------------------------------ Cabeçalho */
/* Dieta de 31/08/2026 (pedido do dono, junto com o cabeçalho das Conversões):
   título menor, menos respiro vertical e a nota em corpo de legenda. O
   cabeçalho apresenta e sai da frente; quem ocupa a tela é o conteúdo. */
.fer-cabeca {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  margin: 0 0 10px; padding-bottom: 8px; border-bottom: 2px solid var(--linha);
}
.fer-cabeca-t {
  font-family: var(--f-display); font-size: 1.0625rem; font-weight: 700; color: var(--verde);
  margin: 0; flex: 1 1 auto; min-width: 0; letter-spacing: 0.1px; line-height: 1.25;
}
.fer-cabeca-a { flex: 0 0 auto; display: flex; gap: 8px; flex-wrap: wrap; }
.fer-cabeca .fer-selos, .fer-cabeca .fer-nota { flex: 1 1 100%; margin: 0; }
.fer-cabeca .fer-nota { font-size: 0.78rem; line-height: 1.45; max-width: 96ch; }
.fer-nota { font-size: 0.8125rem; color: var(--tinta2); margin: 0 0 12px; line-height: 1.5; }
.fer-nota--linha { margin: 0; align-self: center; }

/* ----------------------------------------------------------------- Selos */
.fer-selos { display: flex; gap: 6px 8px; flex-wrap: wrap; margin: 0 0 10px; }
.fer-selo {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: var(--t-micro); font-weight: 700; padding: 4px 10px; border-radius: 999px; letter-spacing: 0.3px;
}
.fer-selo b { font-family: var(--f-mono); font-size: var(--t-mini); font-weight: 700; font-variant-numeric: tabular-nums; }
.fer-selo--ok { background: rgba(29, 92, 71, 0.12); color: var(--ok); }
.fer-selo--espera { background: rgba(138, 107, 58, 0.14); color: var(--alerta); }
/* Atenção ≠ espera: a conta está ligada e lendo, mas o número não vem.
   Mesmo dourado da casa, fundo mais cheio e peso para não parecer "aguardando". */
.fer-selo--atencao { background: rgba(196, 122, 30, 0.2); color: var(--alerta); font-weight: 600; }

/* ------------------------------------------------------- Saldo das contas
   Cinco colunas no desktop (Situação, Conta, Saldo ou cobrança, Alerta,
   Editar); o resto mora no modal. Abaixo de 760px a linha vira ficha pelo
   .tab do app.css: o selo de situação é o título da ficha (sem rótulo), os
   valores em pares rótulo/valor e o botão no pé. */
.fer-saldo-n { font-family: var(--f-mono); font-size: 1rem; font-weight: 700; color: var(--verde); }
.fer-saldo-n--mudo { color: var(--tinta2); font-weight: 600; font-family: var(--f-display); font-size: var(--t-corpo); }
.fer-tab--saldo .fer-saldo-conta strong { font-size: var(--t-corpo); }
.fer-tab--saldo .fer-saldo-conta .fer-mono { word-break: normal; overflow-wrap: anywhere; }
.fer-tab--saldo tr.fer-saldo-risco td:first-child { box-shadow: inset 3px 0 0 var(--erro); }
.fer-tab--saldo th:first-child, .fer-tab--saldo td:first-child { min-width: 170px; }
.fer-tab--saldo td[data-r="Alerta"] { min-width: 130px; }
.fer-tab--saldo td[data-r="Situação"] > .fer-cel > .fer-dica { max-width: 28ch; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fer-bloco { margin-top: 20px; }
.fer-bloco-t { font-size: 15px; font-weight: 600; margin: 0 0 8px; color: var(--tinta2); }

/* O modal "Editar alerta": mesmo cartão da escolha de conta, com resumo da
   leitura em cima e os campos do MODELO da conta. Campos com 16px: abaixo
   disso o iOS dá zoom. */
.fer-modal--form { max-height: min(92vh, 760px); overflow-y: auto; overscroll-behavior: contain; gap: 10px; }
.fer-modal--form .fer-mono { word-break: normal; overflow-wrap: anywhere; }
.fer-modal-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.fer-modal-x { flex: 0 0 auto; width: 36px; height: 36px; border: 0; background: transparent; color: var(--tinta2); font-size: 1.4rem; line-height: 1; border-radius: 8px; cursor: pointer; }
.fer-modal-x:hover { background: rgba(12, 42, 33, 0.06); }
.fer-modal-x:focus-visible { outline: 2px solid var(--dourado); outline-offset: 1px; }
.fer-modal-resumo { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; margin: 0; padding: 10px 12px; background: var(--bg); border-radius: 10px; }
.fer-modal-resumo div { min-width: 0; }
.fer-modal-resumo dt { font-family: var(--f-mono); font-size: var(--t-micro); text-transform: uppercase; letter-spacing: 0.04em; color: var(--suave); }
.fer-modal-resumo dd { margin: 2px 0 0; font-weight: 600; font-size: var(--t-corpo); overflow-wrap: anywhere; }
.fer-modal-form { display: flex; flex-direction: column; gap: 12px; }
.fer-modal-campo { display: flex; flex-direction: column; gap: 5px; font-size: var(--t-nota); color: var(--tinta); }
.fer-modal-campo > span { font-weight: 600; }
.fer-modal-campo .fer-inp { width: 100%; font-size: 16px; }
.fer-modal-check { display: flex; align-items: flex-start; gap: 10px; min-height: 42px; font-weight: 600; font-size: var(--t-corpo); flex-wrap: wrap; }
.fer-modal-check input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; }
.fer-modal-check small { flex: 1 1 100%; font-weight: 400; margin-left: 30px; }
.fer-modal-fixo { margin: 0; font-size: var(--t-nota); color: var(--tinta2); line-height: 1.45; padding: 8px 10px; border-left: 3px solid var(--dourado); background: rgba(201, 169, 110, 0.12); border-radius: 0 8px 8px 0; }
.fer-modal-erro { margin: 0; color: var(--erro); font-size: var(--t-nota); }
.fer-modal-pe .fer-modal-espaco { flex: 1 1 auto; }

@media (max-width: 759px) {
  .fer-tab--saldo td[data-r="Situação"] { flex-direction: column; align-items: flex-start; gap: 4px; padding-bottom: 9px; border-bottom: 1px solid var(--linha); }
  .fer-tab--saldo td[data-r="Situação"]::before { content: none; }
  .fer-tab--saldo td[data-r="Situação"] > .fer-cel { align-items: flex-start; text-align: left; }
  .fer-tab--saldo td[data-r="Situação"] > .fer-cel > .fer-dica { max-width: none; }
  .fer-tab--saldo td[data-r="Conta"] > .fer-cel, .fer-tab--saldo td[data-r="Saldo ou cobrança"] > .fer-cel { align-items: flex-end; text-align: right; }
  .fer-tab--saldo tr.fer-saldo-risco td:first-child { box-shadow: none; }
  .fer-tab--saldo tr.fer-saldo-risco { border-left: 3px solid var(--erro); }
  .fer-tab--saldo td.acoes-cel { justify-content: stretch; }
  .fer-tab--saldo td.acoes-cel > .fer-cel-acoes { width: 100%; justify-content: stretch; }
  .fer-tab--saldo td.acoes-cel .fer-btn { flex: 1 1 0; }
  .fer-modal-pe .fer-modal-espaco { display: none; }
  .fer-modal-pe .fer-btn { flex: 1 1 auto; }
  /* No celular o cartão rola por dentro e o pé (Salvar) sumia abaixo da
     dobra: fica grudado embaixo, sobre o conteúdo que rola. */
  .fer-modal--form .fer-modal-pe { position: sticky; bottom: -14px; margin: 0 -16px -14px; padding: 10px 16px 14px; background: var(--branco); border-top: 1px solid var(--linha); }
}
/* A largura MÍNIMA de uma tabela larga vaza pelo rolador e empurra o <main>
   (item de grid com min-width automático): a página inteira ganhava rolagem
   horizontal em 1000px, mesmo com overflow-x:auto no rolador. Com contenção
   de tamanho na linha, o rolador deixa de reivindicar a largura da tabela e
   rola por dentro, que é o que ele sempre prometeu fazer. */
.fer-corpo .tab-rolagem { contain: inline-size; min-width: 0; }

/* De 760 a 1279px a linha ainda é linha, mas a barra lateral fixa (1000px+)
   deixa ~700px ao conteúdo: a coluna Alerta some (a regra está no modal). */
@media (min-width: 760px) and (max-width: 1279px) {
  .fer-tab--saldo th:nth-child(4), .fer-tab--saldo td[data-r="Alerta"] { display: none; }
}
@media (max-width: 599px) {
  .fer-modal--form { max-height: 94vh; }
}
.fer-selo--erro { background: rgba(161, 48, 36, 0.12); color: var(--erro); }
.fer-selo--neutro { background: rgba(12, 42, 33, 0.06); color: var(--tinta2); }

/* ------------------------------------------------------------ Pendências
   A caixa dourada pede providência; a vermelha anuncia o que já está ligado
   e gasta de verdade. Tom acompanha o fato. */
.fer-pendencia {
  background: #fff7e8; border-left: 4px solid var(--dourado-d); border-radius: 8px;
  padding: 12px 14px; font-size: 0.875rem; color: var(--dourado-tinta); line-height: 1.55; margin: 0 0 14px;
}
.fer-pendencia strong { color: var(--verde); }
.fer-pendencia--erro { background: rgba(161, 48, 36, 0.06); border-left-color: var(--erro); color: #7a2a20; }
.fer-pendencia--erro strong { color: var(--erro); }

/* ------------------------------------------------------------ Controles
   O que a pessoa preenche fica emoldurado (.card do app.css). Inputs em 16px
   por regra da casa: menor que isso o iOS aproxima a tela ao focar. */
.fer-painel { padding: 14px 15px; margin-bottom: 16px; }
.fer-painel h3 { font-family: var(--f-display); font-size: 0.9375rem; color: var(--verde); margin: 0 0 10px; }
.fer-linha { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 0 0 12px; }
.fer-linha:last-child, .fer-linha--rodape { margin-bottom: 0; }
.fer-campo { display: flex; flex-direction: column; gap: 5px; min-width: 0; flex: 1 1 200px; }
.fer-campo--cliente { flex: 1 1 210px; max-width: 340px; }
.fer-campo--largo { flex: 2 1 300px; }
.fer-campo--curto { flex: 0 1 190px; }
.fer-campo label, .fer-campo-r { font-size: 0.75rem; font-weight: 700; color: var(--tinta2); letter-spacing: 0.2px; }
.fer-campo input, .fer-campo select {
  font-family: inherit; font-size: 16px; color: var(--tinta);
  background: var(--branco); border: 1px solid var(--linha); border-radius: 9px;
  padding: 9px 11px; width: 100%; min-width: 0;
}
.fer-campo input:focus, .fer-campo select:focus {
  outline: 2px solid var(--dourado); outline-offset: 1px; border-color: var(--selo);
}
.fer-check {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  font-size: 0.875rem; color: var(--tinta); min-height: 42px; padding: 4px 0;
}
/* Tamanho e cor da caixa: regra global do app.css. */
.fer-check--ensaio { font-weight: 600; }

.fer-btn {
  font-family: inherit; font-size: 0.875rem; font-weight: 700; cursor: pointer;
  border-radius: 999px; padding: 10px 18px; min-height: 44px; border: 1px solid var(--verde);
  background: var(--verde); color: var(--creme); white-space: nowrap;
}
.fer-btn:hover { background: var(--verde2); }
.fer-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
.fer-btn--claro { background: transparent; color: var(--verde); }
.fer-btn--claro:hover { background: rgba(12, 42, 33, 0.06); }
.fer-btn--perigo { background: transparent; color: var(--erro); border-color: var(--erro); }
.fer-btn--perigo:hover { background: rgba(161, 48, 36, 0.08); }
.fer-btn--peq { padding: 7px 13px; font-size: 0.8125rem; }

/* Formulário aberto sob demanda (cliente das conversões, orçamento): moldura
   própria para dizer a que registro ele pertence. */
.fer-form {
  background: var(--branco); border: 1px solid var(--fio-forte); border-radius: 12px;
  padding: 14px 15px; margin: 12px 0 4px;
}
.fer-form h4 { font-family: var(--f-display); font-size: 0.9375rem; color: var(--verde); margin: 0 0 10px; }

/* ---------------------------------------------------- Modo ensaio x real
   REAL ligado não pode parecer só mais um chip: é a fronteira entre conferir
   e gastar o aprendizado do algoritmo do cliente. */
.fer-modo { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0 12px; }
.fer-modo-btn {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font-family: inherit; font-size: 0.875rem; font-weight: 700; cursor: pointer;
  border: 1.4px solid var(--linha); background: var(--branco); color: var(--tinta2);
  border-radius: 11px; padding: 10px 16px; min-width: 150px; text-align: left;
}
.fer-modo-btn span { font-size: var(--t-micro); font-weight: 400; color: var(--suave); line-height: 1.3; }
.fer-modo-btn.on { border-color: var(--verde); background: var(--verde); color: var(--creme); }
.fer-modo-btn.on span { color: rgba(244, 236, 216, 0.8); }
.fer-modo-btn--real.on { border-color: var(--erro); background: var(--erro); color: #fff; }
.fer-modo-btn--real.on span { color: rgba(255, 255, 255, 0.85); }

/* Confirmação digitada do modo real. */
.fer-confirma {
  background: rgba(161, 48, 36, 0.06); border: 1.4px solid rgba(161, 48, 36, 0.4);
  border-radius: 12px; padding: 14px 15px; margin: 0 0 16px;
  font-size: 0.875rem; color: var(--tinta); line-height: 1.55;
}
.fer-confirma strong { color: var(--erro); }
.fer-confirma .fer-linha { margin: 10px 0 0; }
.fer-confirma-inp {
  font-family: var(--f-mono); font-size: 16px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--erro); background: var(--branco); border: 1px solid rgba(161, 48, 36, 0.5);
  border-radius: 9px; padding: 9px 11px; width: 170px; max-width: 100%;
}
.fer-confirma-inp:focus { outline: 2px solid var(--erro); outline-offset: 1px; }

/* Resumo da rodada manual. */
.fer-resumo {
  background: rgba(29, 92, 71, 0.055); border-left: 3px solid var(--selo);
  border-radius: 0 8px 8px 0; padding: 11px 13px; margin-top: 12px;
  font-size: 0.85rem; color: var(--tinta2); line-height: 1.5;
}
.fer-resumo strong { color: var(--verde); }
.fer-resumo--real { background: rgba(161, 48, 36, 0.05); border-left-color: var(--erro); }
.fer-resumo--real strong { color: var(--erro); }
.fer-resumo .fer-selos { margin: 8px 0 0; }

/* ---------------------------------------------------------------- Tabelas
   .tab e .tab-rolagem vêm do app.css; aqui só o que é próprio destas células.
   Cada célula composta tem UM filho (.fer-cel): abaixo de 760px a célula vira
   flex com o rótulo do data-r à esquerda, e com três filhos soltos os três
   virariam colunas e a ficha desmontaria. */
.fer-tab { font-size: 0.85rem; }
.fer-tab td { vertical-align: top; }
.fer-cel { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.fer-cel-acoes { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.fer-motivo { font-size: var(--t-mini); color: var(--tinta2); line-height: 1.45; overflow-wrap: anywhere; max-width: 34ch; }
.fer-motivo-mini { font-size: var(--t-micro); color: var(--erro); line-height: 1.4; overflow-wrap: anywhere; }
.fer-erro-num { color: var(--erro); font-weight: 700; }

/* ------------------------------------------------------------- Sugestões */
.fer-reg {
  background: var(--branco); border: 1px solid var(--linha); border-radius: 11px;
  padding: 12px 14px; min-width: 0; margin: 0 0 10px;
}
.fer-reg-topo { display: flex; gap: 6px 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.fer-reg-topo b { font-size: 0.9375rem; color: var(--verde); overflow-wrap: anywhere; }
.fer-reg p { font-size: 0.875rem; color: var(--tinta); line-height: 1.5; margin: 0 0 8px; overflow-wrap: anywhere; }
.fer-reg .fer-selos { margin-bottom: 8px; }
.fer-exemplos { font-size: var(--t-mini); color: var(--tinta2); line-height: 1.5; margin: 0 0 8px; overflow-wrap: anywhere; }
.fer-exemplos i { font-style: normal; font-weight: 700; }
.fer-reg-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* ------------------------------------------------------------ Integrações */
/* -------------------------------------------------------- Diálogo do 428
   Pergunta com a frase do servidor. Tom dourado de atenção, nunca o vermelho
   de erro: 428 é "falta confirmar", não "quebrou". */
/* O diálogo do 428 virou o SLConfirmar do app (backlog 12): o cartão e o véu
   moram no app.css, junto do modal de ajuda. */

/* ------------------------------------------------------ Hover com ponteiro */
/* ------------------------------------------------------------- Celular
   Abaixo de 600px os controles empilham: meio botão colado no campo ao lado
   é alvo pequeno e faz a fileira parecer cortada. */
@media (max-width: 599px) {
  .fer-linha > .fer-btn { width: 100%; }
  .fer-campo, .fer-campo--cliente, .fer-campo--curto { flex: 1 1 100%; max-width: none; }
  .fer-modo-btn { flex: 1 1 100%; min-width: 0; }
  .fer-confirma-inp { width: 100%; }
  /* --nav-h saiu do :root do app (resíduo da bottom-nav removida). */
}

/* Ficha empilhada das tabelas: o app.css já vira a linha em cartão abaixo de
   760px; aqui só se acerta o que é próprio destas células. */
@media (max-width: 759px) {
  .fer-tab td > .fer-cel { align-items: flex-end; text-align: right; }
  .fer-tab td > .fer-cel-acoes { justify-content: flex-end; }
  .fer-motivo { max-width: none; }

  /* ------------------------------ Ficha de "Envio por cliente", compacta
     Sete células empilhadas davam ~300px por cliente, e dezessete clientes
     davam 5.212px numa tela de 6.463px: a lista ERA a tela. As sete viram
     quatro fileiras, sem tirar nada do que estava escrito:

       nome
       Google Ads | Meta | Lead convertido      (os tres destinos)
       Enviados | Com falha | Configurar        (numeros e a acao)

     O rotulo vai DEPOIS do valor (`order:2`), como na faixa de indicadores do
     resto do aplicativo: com o rotulo em cima, "Lead convertido" quebrando em
     duas linhas empurrava o selo dele para baixo e a fileira perdia o
     alinhamento. `flex-basis` precisa ser MAIOR que zero, senao a celula entra
     na linha do nome e fica com 0px de largura (base zero nunca estoura a
     linha, entao nunca quebra). */
  .fer-tab tr { display: flex; flex-wrap: wrap; }
  .fer-tab td { border-bottom: none; }
  /* O nome do cliente e o TITULO da ficha, nao um par rotulo/valor: sem isto
     saia "CLIENTE" a esquerda e o nome empurrado para a direita, como se o
     nome fosse mais um campo entre os outros seis. */
  .fer-cli-nome { flex: 1 1 100%; justify-content: flex-start; padding-bottom: 4px; }
  .fer-cli-nome::before { content: none; }
  .fer-cli-nome b { font-family: var(--f-display); font-size: .98rem; overflow-wrap: anywhere; }
  .fer-cli-dest,
  .fer-cli-num {
    flex: 1 1 30%; min-width: 0; flex-direction: column;
    align-items: flex-start; justify-content: flex-start; gap: 2px;
    padding: 9px 0 3px; text-align: left;
  }
  .fer-cli-dest::before,
  .fer-cli-num::before { order: 2; line-height: 1.25; letter-spacing: .01em; overflow-wrap: anywhere; }
  /* Os dois numeros e o botao dividem a MESMA fileira. A base dos numeros
     precisa ser pequena o bastante para o botao caber ao lado: com
     `flex-basis` de 26% eles ficavam com 153px cada e empurravam "Configurar"
     para uma quarta fileira, que custava 55px por cliente. */
  /* Base declarada nas TRES, e `min-width:0` na do botao. Com `flex:1 1 auto`
     a base do botao e a largura do conteudo dele, e o `min-width:auto` que um
     item de flex ganha de graca impedia a conta de fechar: ele ia para uma
     quarta fileira, que custava 55px por cliente. */
  .fer-cli-num { flex: 1 1 84px; }
  .fer-cli-acao { flex: 1 1 96px; min-width: 0; justify-content: flex-end; align-items: center; }
  /* Fio entre os dois blocos: sem ele os tres destinos e os dois numeros
     correm juntos e leem como uma fileira so de cinco coisas. O fio vai nas
     TRES celulas da segunda fileira, para atravessar a ficha inteira: em
     `:first-of-type` ele nao pegaria nenhuma, porque `of-type` conta o tipo do
     elemento (td) e nao a classe, e a primeira td e a do nome. */
  .fer-cli-num,
  .fer-cli-acao { border-top: 1px solid var(--linha-s); margin-top: 8px; padding-top: 11px; }
}

@media (min-width: 760px) {
  .fer-corpo { padding-bottom: 24px; }
  .fer-motivo { max-width: 44ch; }
}

/* --------------------------------------------------- Grade de configuração
   Campos de PESO diferente na mesma linha, cada um com o seu rótulo: o
   interruptor de ligar, a janela em dias e o modo de envio. Antes o
   interruptor era uma caixa de marcar solta ao lado do campo numérico e o
   modo vinha numa linha abaixo, sem rótulo: três decisões com a mesma cara. */
/* Colunas do TAMANHO do campo, não frações da largura da tela: um campo de
   três dígitos esticado a meia tela sugere que cabe um texto longo ali. */
.fer-grade { display: grid; grid-template-columns: minmax(150px, 210px) minmax(140px, 200px); gap: 12px 18px; margin: 0 0 12px; align-items: start; }
.fer-grade > .fer-campo { flex: none; max-width: none; }
@media (max-width: 599px) { .fer-grade { grid-template-columns: 1fr; } }
.fer-campo--liga .fer-check { min-height: 42px; font-weight: 700; }
/* CABEÇALHO ÚNICO E RASO da tela de Conversões (31/08/2026, segunda rodada:
   "mais slim, metade da altura"): título, selos e chips dividem a PRIMEIRA
   linha; a nota da tela é uma linha curta; e a configuração da agência é uma
   faixa de pares rótulo+controle em 34px, sem heading em fileira própria. */
.fer-conv-cabeca { padding: 10px 14px 10px; margin-bottom: 14px; }
.fer-conv-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.fer-conv-topo .fer-cabeca-t { flex: 0 1 auto; }
.fer-conv-topo .fer-selos { flex: 1 1 auto; margin: 0; }
.fer-conv-chips { min-width: 0; margin-left: auto; }
.fer-conv-chips .fer-kpis { margin: 0; }
.fer-conv-cabeca > .fer-nota { margin: 4px 0 0; font-size: 0.78rem; line-height: 1.45; max-width: 96ch; }
.fer-conv-fio { border-top: 1px solid var(--linha-s); margin: 8px 0; }
.fer-conv-h3 { font-family: var(--f-display); font-size: 0.9375rem; color: var(--verde); margin: 0 0 10px; }
.fer-corpo .fer-conv-h3::before {
  content: ''; display: inline-block; width: 6px; height: 6px; background: var(--dourado);
  border-radius: 1.5px; margin-right: 7px; vertical-align: 2px;
}
/* O heading vira LEGENDA da própria faixa: mesma tinta, corpo menor, sem
   fileira só para ele. */
.fer-conv-h3--linha { font-size: 0.8125rem; margin: 0; align-self: center; }

/* Configuração da agência em FAIXA ÚNICA (31/08/2026): interruptor, janela,
   modo e Salvar na mesma linha, alinhados pela base. A grade de duas colunas
   deixava dois terços do cartão vazios e o Salvar num rodapé só dele. */
.fer-agencia { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: stretch; margin: 0 0 8px; }
.fer-agencia .fer-campo { flex: 0 1 auto; justify-content: flex-start; }
.fer-campo--dias input { max-width: 110px; min-height: 42px; }
.fer-agencia .fer-modo { margin: 0; flex-wrap: nowrap; }
.fer-agencia .fer-modo-btn { min-height: 42px; padding: 5px 12px; }
.fer-agencia-acao { justify-content: flex-end; margin-left: auto; }
.fer-agencia-acao .fer-btn { min-height: 42px; }
.fer-nota--rente { margin-top: 2px; }
/* Variante SLIM (31/08/2026): cada campo deita (rótulo à esquerda do controle)
   e os controles descem para 34px no ponteiro fino. No dedo, o bloco coarse
   lá embaixo devolve os 46px de alvo. */
.fer-agencia--slim { align-items: center; gap: 8px 18px; margin: 0 0 4px; }
.fer-agencia--slim .fer-campo { flex-direction: row; align-items: center; gap: 7px; }
.fer-agencia--slim .fer-check { min-height: 34px; padding: 0; font-weight: 700; }
.fer-agencia--slim .fer-campo--dias input { max-width: 78px; min-height: 34px; padding: 5px 9px; }
.fer-agencia--slim .fer-modo { gap: 6px; }
.fer-agencia--slim .fer-modo-btn {
  flex-direction: row; align-items: center; min-width: 0; min-height: 34px;
  padding: 5px 14px; border-radius: 999px;
}
.fer-agencia--slim .fer-agencia-acao .fer-btn { min-height: 34px; padding: 6px 15px; font-size: 0.8125rem; }
@media (max-width: 719px) {
  .fer-agencia { gap: 10px 18px; }
  .fer-agencia .fer-modo { flex-wrap: wrap; }
  /* Duas classes: .fer-agencia .fer-campo (acima) empata em ordem e vencia
     com uma classe só, e o Salvar não esticava. */
  .fer-agencia .fer-agencia-acao { margin-left: 0; flex: 1 1 100%; }
  .fer-agencia .fer-agencia-acao .fer-btn { width: 100%; }
  /* No estreito a faixa slim volta a empilhar por campo, com a legenda em
     cima, senão os pares quebram no meio (rótulo numa linha, controle noutra). */
  .fer-agencia--slim .fer-conv-h3--linha { flex: 1 1 100%; }
  .fer-agencia--slim .fer-campo { flex: 1 1 100%; }
  /* Ensaio e Real são uma palavra cada desde a faixa slim: dividem a MESMA
     linha no celular, em vez de herdarem o empilhado dos botões de duas
     linhas. */
  .fer-agencia--slim .fer-modo { flex: 1 1 auto; }
  .fer-agencia--slim .fer-modo-btn { flex: 1 1 auto; }
}
/* Linha-formulário dentro da tabela de clientes: o form abre colado na linha
   que o chamou, e o fundo levemente tintado diz de quem ele é. */
.fer-cli-form-linha > td { padding: 0 10px 12px; background: var(--tinta-04, rgba(12, 42, 33, 0.03)); }
/* Na ficha do celular a fileira vira flex: a célula do form ocupa a linha inteira. */
.fer-cli-form-linha > td { flex: 1 1 100%; }
.fer-cli-form-linha .fer-form { margin: 0; }
/* O modo ocupa a linha inteira quando sobra espaço: são dois botões com
   descrição dentro, e espremidos em um terço a descrição vira quatro linhas. */
.fer-campo--modo { grid-column: 1 / -1; }

/* ----------------------------------------------------------- Rodada manual
   Fica colada na fila que alimenta. A frase ao lado do botão diz o que vai
   acontecer ANTES do clique, e não depois. */
.fer-rodada { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 12px; }
.fer-rodada-n { font-size: 0.8125rem; color: var(--tinta2); line-height: 1.45; flex: 1 1 240px; min-width: 0; }

/* ------------------------------------------------ Integrações: servidor
   Pré-requisito da carteira inteira, e por isso vem antes de tudo: enquanto
   uma chave estiver vazia, nenhum cliente conecta aquele provedor. Cartão
   pequeno, de leitura rápida, porque no dia a dia todos estão verdes e o que
   importa é enxergar de longe o que não está. */
.fer-chaves { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 205px), 1fr)); gap: 10px; }
.fer-chave {
  background: rgba(255, 253, 250, 0.6); border: 1px solid var(--linha); border-left: 3px solid var(--dourado-d);
  border-radius: 10px; padding: 10px 12px; min-width: 0;
}
.fer-chave.on { border-left-color: var(--ok); }
.fer-chave-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.fer-chave-id { display: flex; flex-direction: column; gap: 0; min-width: 0; }
.fer-chave-n { font-family: var(--f-display); font-size: 0.9375rem; font-weight: 700; color: var(--verde); line-height: 1.2; }
.fer-chave-id small { font-size: var(--t-micro); color: var(--suave); line-height: 1.3; }
.fer-chave-cab .fer-selo { flex: 0 0 auto; }
.fer-chave-d { font-size: var(--t-mini); color: var(--tinta2); line-height: 1.45; margin: 0; overflow-wrap: anywhere; }
/* A consequência da trava, em número, dentro do bloco da chave geral. Larga
   de propósito: .fer-motivo tem max-width de 34ch, que serve para motivo em
   célula de tabela e quebraria esta frase em quatro linhas. */
.fer-ra-travas { max-width: none; color: var(--alerta); font-weight: 600; margin: 0 0 8px; }

/* ----------------------------------------- Integrações: grade por cliente
   A largura é dividida entre o nome e os provedores: coluna de provedor
   estreita empurra o selo para baixo do motivo e a célula perde a leitura de
   relance, que é a única coisa que essa tabela precisa entregar. */
.fer-tab-integ th:first-child, .fer-tab-integ td:first-child { width: 22%; min-width: 130px; }
.fer-tab-integ td > .fer-cel { gap: 5px; align-items: flex-start; }
/* Providência é instrução, não defeito: sai na tinta de texto, e o vermelho
   fica reservado ao motivo que veio do provedor. */
.fer-dica { font-size: var(--t-micro); color: var(--tinta2); line-height: 1.4; overflow-wrap: anywhere; }
.fer-vence { font-size: var(--t-micro); color: var(--dourado-tinta); font-weight: 700; line-height: 1.4; }

/* O campo da conta de anúncio abre DENTRO da célula: era o conserto mais
   comum e o único que exigia trocar de tela. 16px no campo não é escolha
   estética, é o limite abaixo do qual o iOS dá zoom ao focar. */
.fer-conta-form { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 4px; }
.fer-inp {
  font-family: inherit; font-size: 16px; color: var(--tinta);
  background: var(--branco); border: 1px solid var(--linha); border-radius: 9px;
  padding: 8px 10px; width: 100%; min-width: 0;
}
.fer-inp:focus { outline: 2px solid var(--dourado); outline-offset: 1px; border-color: var(--selo); }
/* Botões da célula em fileira que quebra: são até quatro, e a coluna do
   provedor é estreita por natureza. */
.fer-tab-integ .fer-cel-acoes { justify-content: flex-start; gap: 6px; margin-top: 2px; }
.fer-tab-integ .fer-btn--peq { padding: 6px 11px; font-size: var(--t-mini); }
/* Nota do cabeçalho: o provedor está parado no servidor e a coluna inteira
   espera por isso. Fica na cabeça da coluna, e não repetida em cada linha. */
.fer-col-nota { display: block; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: var(--t-micro); color: var(--suave); margin-top: 2px; }
/* ---------------------------------------- Integrações: canais da agência
   Linha, e não cartão: são quatro itens sem ação nenhuma nesta tela, e quatro
   cartões só para dizer "Ativa" competiam em peso com a grade de clientes,
   que é onde o trabalho acontece. */
.fer-canais { display: flex; flex-direction: column; }
.fer-canal {
  display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--linha-s);
}
.fer-canal:last-child { border-bottom: none; }
.fer-canal-id { display: flex; flex-direction: column; gap: 1px; flex: 0 0 150px; min-width: 0; }
.fer-canal-id b { font-family: var(--f-display); font-size: 0.875rem; color: var(--verde); }
.fer-canal-id small { font-size: var(--t-micro); color: var(--suave); }
.fer-canal-d { flex: 1 1 260px; min-width: 0; font-size: 0.8125rem; color: var(--tinta2); line-height: 1.45; overflow-wrap: anywhere; }
.fer-canal .fer-selo { flex: 0 0 auto; margin-left: auto; }
/* Linha do WhatsApp (robô Ted): conexão geral do sistema com QR (30/08). O
   estado da conexão é a etiqueta da direita; alinha ao topo para o QR não
   empurrar o id e a etiqueta para o meio quando expande. */
.fer-canal--ted { align-items: flex-start; }
.fer-canal--ted > .tag { flex: 0 0 auto; margin-left: auto; }
.fer-ted-acao { display: flex; margin-top: 8px; }
.fer-ted-qr:not(:empty) { margin-top: 8px; }
.fer-ted-qr { text-align: center; }
.fer-ted-qr img { max-width: 100%; height: auto; border: 1px solid var(--linha); border-radius: 8px; }
.fer-ted-cod { letter-spacing: .18em; font-size: 1.4rem; margin: 6px 0; text-align: center; font-family: var(--f-mono, monospace); }

@media (hover: hover) {
  .fer-chave { transition: border-color 0.15s ease; }
  .fer-chave:hover { border-color: var(--fio-forte); }
}
@media (max-width: 599px) {
  .fer-canal-id { flex: 1 1 100%; }
  .fer-canal .fer-selo { margin-left: 0; }
}
/* Na ficha empilhada a célula alinha à direita (regra do .fer-tab). O botão de
   sincronizar acompanha, senão fica sozinho do lado errado da ficha. */
@media (max-width: 759px) {
  .fer-tab-integ td > .fer-cel { align-items: flex-end; text-align: right; }
  .fer-tab-integ td > .fer-cel-acoes { justify-content: flex-end; }
  .fer-tab-integ th:first-child, .fer-tab-integ td:first-child { width: auto; min-width: 0; }
}

/* ------------------------------------------------- Alvo de toque no dedo
   Medido no navegador a 390px: o botao pequeno destas telas ficava com 33px
   de altura, e sao ate quatro deles por celula na grade de Integracoes. A
   caixa de clique cresce para 44px; a fonte e o desenho ficam onde estao. */
@media (max-width:759px){
  .fer-btn--peq{min-height:44px}
  /* Mesma regra do X do modal do app (app.css): 36px reprova o alvo de toque,
     e este e o botao de SAIR. A margem negativa devolve o espaco ao cabecalho. */
  .fer-modal-x{min-width:44px;min-height:44px;margin:-4px -4px -4px 0}
}

/* Pelo APONTADOR, como o bloco coarse do app.css: tablet e largo e e tocado
   com o dedo. A seta do drill-down (26px, a interacao principal do trafego
   unificado) e o link "previa" (11px sublinhado) reprovavam os 44px. A folga
   de 46 e contra o subpixel, mesma licao do app.css. */
@media (any-pointer: coarse){
  .fer-exp{min-width:46px;min-height:46px}
  .fer-traf-abrir{display:inline-flex;align-items:center;min-height:46px;padding:0 8px;margin:-8px 0}
  /* 46, e não 44 cravado: no contexto móvel do verificador a caixa media
     43,98px e reprovava; botão abaixo da dobra não tem socorro do toque. */
  .fer-btn--peq{min-height:46px}
  .fer-agencia .fer-btn, .fer-agencia .fer-modo-btn{min-height:46px}
  /* A faixa slim desce a 34px no ponteiro fino; no dedo os controles dela
     (marcador de ligar, campo de dias e o Salvar, que precisa das TRÊS classes
     para empatar com a regra slim de 34px e vencer pela ordem) voltam ao alvo
     cheio. */
  .fer-agencia--slim .fer-check, .fer-agencia--slim .fer-campo--dias input{min-height:46px}
  .fer-agencia--slim .fer-agencia-acao .fer-btn{min-height:46px}
  .fer-modal-x{min-width:44px;min-height:44px;margin:-4px -4px -4px 0}
  /* O chip de KPI virou pílula de 29px (30/08/2026) e o tap abre o balão do
     data-nota. O ::after centrado NÃO serve aqui: a fileira rola na horizontal
     e o overflow-x:auto força clip vertical também, cortando a área estendida.
     No dedo, a pílula inteira cresce para os 44px da WCAG 2.5.5. */
  .fer-kpi{min-height:44px;align-items:center}
}

/* ------------------------------------------------ Modal de escolha de conta
   Abre ao voltar do consentimento iniciado na tela Integrações. A lista rola
   dentro do cartão; clicar na conta salva na hora. */
.fer-modal-fundo{position:fixed;inset:0;z-index:120;background:rgba(12,42,33,.45);display:flex;align-items:center;justify-content:center;padding:16px;overscroll-behavior:contain}
.fer-modal{background:var(--branco);border-radius:14px;border-top:4px solid var(--dourado);box-shadow:0 22px 55px rgba(0,20,15,.35);width:100%;max-width:440px;max-height:min(560px,86vh);display:flex;flex-direction:column;gap:8px;padding:18px 16px 14px}
.fer-modal-t{font-family:var(--f-display);color:var(--verde);font-size:1.05rem}
.fer-modal-lista{overflow-y:auto;border:1px solid var(--linha);border-radius:10px;padding:4px;min-height:96px}
.fer-conta-op{display:flex;flex-direction:column;gap:1px;width:100%;text-align:left;padding:9px 10px;border:0;border-radius:8px;background:none;font:inherit;color:var(--tinta);cursor:pointer}
.fer-conta-op b{font-size:var(--t-corpo)}
.fer-conta-op span{font-size:var(--t-mini);color:var(--suave);font-family:var(--f-mono)}
.fer-conta-op:hover{background:var(--creme)}
.fer-modal-pe{justify-content:flex-end;margin-top:2px}
/* Página do Facebook no modal de Lead Ads: a mesma linha da conta, com a caixa
   de marcação alinhada ao nome. Alvo de toque de 44px, padrão do app. */
.fer-pag-op{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;align-items:center;min-height:44px}
.fer-pag-op input{grid-row:1 / span 2;width:18px;height:18px;accent-color:var(--verde)}
.fer-pag-op b{grid-column:2}
.fer-pag-op span{grid-column:2}

/* ---- Relatórios automáticos (bill-048, 22/08/2026) */
.fer-abas { display: flex; gap: 6px; margin: 12px 0 10px; flex-wrap: wrap; }
.fer-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.fer-chips .fer-modal-check { margin: 0; }
.fer-chip { font-family: var(--f-mono, monospace); font-size: 12px; text-transform: none; }
.fer-chips-caixa { margin-top: 8px; }
.fer-textarea { min-height: 220px; font-family: var(--f-mono, monospace); font-size: 14px; line-height: 1.45; resize: vertical; }
.fer-previa { white-space: pre-wrap; word-break: break-word; font: inherit; font-size: 14px; line-height: 1.45; background: var(--fundo-2, #f6f3ec); border: 1px solid var(--linha, #e4ddcf); border-radius: 8px; padding: 10px 12px; margin: 8px 0 0; max-height: 360px; overflow: auto; }
.fer-previa--curta { max-height: 150px; font-size: 12px; }
.fer-modal--larga { max-width: 760px; }
.fer-modal--larga { max-width: 980px; max-height: min(94vh, 960px); }
/* SEÇÕES DO MODAL DE RELATÓRIO como etapas (02/09/2026, pedido do dono:
   "mais organizado e moderno"). O "1." solto no texto virou um marcador
   redondo no verde da casa; o subtítulo desce para a própria linha, apagado,
   em vez de disputar a linha do título. O conteúdo ganha um fio à esquerda
   que amarra visualmente cada etapa — o formulário longo passa a se ler como
   quatro blocos, não como um rolo de campos. */
.fer-ra-secao { font-family: var(--f-display); color: var(--verde); font-size: 1rem; margin: 18px 0 10px; padding-top: 14px; border-top: 1px solid var(--linha, #e4ddcf); display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.fer-ra-secao:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.fer-ra-secao small { font-weight: 400; font-family: var(--f-corpo, inherit); font-size: var(--t-micro); color: var(--suave); flex-basis: 100%; margin-top: -2px; }
.fer-ra-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--verde); color: var(--creme, #fffdfa); font-size: .72rem; font-weight: 700; flex: 0 0 auto; font-family: var(--f-mono); }
.fer-ra-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; align-items: start; }
.fer-ra-grade--2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.fer-ra-grade .fer-modal-campo, .fer-ra-grade--2 .fer-modal-campo { margin: 0; }
.fer-ra-dica { margin: 4px 0 8px; }
.fer-ra-destino { align-items: center; }
.fer-ra-numero { max-width: 220px; }
.fer-ra-texto { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.fer-previa--alta { min-height: 260px; max-height: 520px; margin-top: 0; }
/* Prévia do e-mail ao cliente: o HTML final, dentro de um quadro isolado. */
.fer-previa-email { width: 100%; height: 460px; margin-top: 8px; border: 1px solid var(--linha); border-radius: 10px; background: var(--branco); }
.fer-previa--modelo { max-height: 220px; font-size: 12.5px; }
.fer-modelos-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fer-modelo { display: flex; flex-direction: column; }
.fer-inp--alerta { outline: 2px solid var(--erro, #a13024); }
@media (max-width: 900px) { .fer-ra-texto { grid-template-columns: 1fr; } }
@media (max-width: 760px) { .fer-modelos-grade { grid-template-columns: 1fr; } }
/* `hidden` precisa vencer o display das classes de campo (o modal de
   relatório esconde dia do mês, N dias e número conforme a escolha). */
.fer-modal-campo[hidden], .fer-inp[hidden], .fer-chips [hidden] { display: none !important; }
/* Botões de ação em ícone (relatórios automáticos; candidatos mapeados em docs/MELHORIAS.md) */
.fer-btn--icone { width: 36px; height: 36px; min-width: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; }
.fer-btn--icone svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.fer-acoes-icones { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fer-ra-config { display: grid; grid-template-columns: auto minmax(180px, 1fr) minmax(180px, 1fr) auto; gap: 10px; align-items: end; margin-top: 10px; }
.fer-ra-config .fer-modal-campo { margin: 0; }
@media (max-width: 900px) { .fer-ra-config { grid-template-columns: 1fr 1fr; } .fer-ra-config > button:first-child { grid-column: 1 / -1; } }
@media (max-width: 560px) { .fer-ra-config { grid-template-columns: 1fr; } }

/* ------------------------------------- Tráfego e anúncios (unificada, 25/08) */
/* Sub-abas de plataforma: os chips do painel, com o Atualizar encostado à direita. */
.fer-plat-abas { margin: 0 0 12px; align-items: center; }
.fer-plat-atualizar { margin-left: auto; }
.fer-plat-alerta { color: var(--erro, #a13024); font-weight: 800; }
/* Cartões de KPI: as MESMAS métricas escolhidas para a tabela, na mesma ordem.
   Grade fluida: 10 cartões cabem sem virar a grade 2x2 do painel. */
/* UMA FILEIRA SÓ, e o número CENTRADO na caixa (25/08/2026, pedido do dono).
   O `auto-fill` antigo distribuía as dez métricas em duas ou três fileiras de
   alturas diferentes, e o olho perdia a linha de leitura no meio do caminho.
   `auto-fit` com um mínimo pequeno mantém a fileira única enquanto couber, e a
   rolagem lateral (abaixo) resolve a tela estreita sem espremer o número até
   ele quebrar em duas linhas. */
/* `min-width: 0` NÃO É ENFEITE, é o que segura a rolagem dentro da fileira.
   Dez colunas de mínimo 112px somam 1.120px de largura intrínseca. Sem o
   `min-width: 0`, o item de grid adota essa largura como mínimo, empurra o
   container e a PÁGINA INTEIRA passa a rolar de lado: o eixo de layout mediu
   174px de rolagem em 1366 e 730px em 360. Com ele, o excedente fica onde
   deveria, dentro do próprio `overflow-x` da fileira. */
/* UMA LINHA SÓ (30/08/2026, pedido do dono: "mais compacto e organizado").
   As caixas de duas faixas (rótulo em cima, número embaixo) ocupavam ~74px de
   altura; a fileira virou uma faixa única de CHIPS, rótulo e número lado a
   lado, que rola horizontalmente dentro do próprio contêiner quando não cabe.
   O chip em nowrap também encerra a saga do rótulo cortado ("CLIQUES NO ..."):
   inline, o rótulo sai INTEIRO sempre. */
.fer-kpis {
  display: flex; flex-wrap: nowrap; align-items: stretch;
  gap: 6px; margin: 0 0 12px; overflow-x: auto; overscroll-behavior-inline: contain;
  scrollbar-width: thin; padding-bottom: 2px;
  min-width: 0; max-width: 100%;
}
.fer-kpi {
  background: var(--cartao, #fffdfa); border: 1.4px solid var(--linha);
  border-radius: 999px; padding: 6px 12px; min-width: 0; flex: 0 0 auto;
  display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap;
}
.fer-kpi .l {
  font-size: 0.625rem; color: var(--tinta2); font-family: var(--f-mono);
  letter-spacing: 0.02em; text-transform: uppercase; line-height: 1.2;
}
.fer-kpi .n {
  font-family: var(--f-display); font-size: 0.98rem; font-weight: 800;
  color: var(--verde); line-height: 1.15; font-variant-numeric: tabular-nums;
}
.fer-kpi .f { font-size: var(--t-micro); color: var(--suave); line-height: 1.3; }
.fer-kpi--chave { border-color: var(--dourado, #c9a96e); }

/* COR SÓ NO NÚMERO, nunca no fundo da caixa.
   A primeira tentativa pintou o fundo de dourado e verde claros: numa fileira
   de dez, metade tingida e metade branca lê como erro de renderização, não como
   significado, porque a regra não está à vista. Colorindo só o número a fileira
   fica calma e o sentido continua: dourado é dinheiro que SAI (investimento e
   todo custo por alguma coisa), verde é RESULTADO que entra. Volume bruto
   (impressão, clique, CTR) fica neutro, porque não é custo nem retorno. */
.fer-kpi--custo .n { color: var(--dourado-tinta, #8a6b3a); }
.fer-kpi--resultado .n { color: var(--ok, #1d5c47); }
/* Sem dado: cinza, no MESMO corpo do número, para não mexer na linha de base.
   Classe própria porque `.vazio` já é o estado vazio de tela inteira do
   app.css, com borda tracejada: reusar o nome desenhava uma moldura pontilhada
   em volta do "--", que lia como campo de formulário por preencher. */
.fer-kpi .n--sem-dado { color: var(--suave); font-weight: 600; }

/* Barra de identificação da conta: número, campanhas e período. Fina e
   discreta de propósito, separada por fios: é contexto, não alerta. */
.fer-conta-barra {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px;
  margin: 0 0 12px; padding: 0 0 10px; border-bottom: 1px solid var(--linha);
  font-size: var(--t-nota); color: var(--tinta2);
}
.fer-conta-id { color: var(--suave); }
.fer-conta-id b {
  font-family: var(--f-mono); font-weight: 600; color: var(--tinta2);
  letter-spacing: 0.01em;
}
.fer-conta-fio { width: 1px; height: 14px; background: var(--linha); flex: 0 0 auto; }
@media (max-width: 480px) {
  /* Em tela estreita o fio some e a barra vira duas linhas legíveis, em vez de
     uma fileira apertada com separador no meio da quebra. */
  .fer-conta-fio { display: none; }
  .fer-conta-barra { gap: 2px 10px; }
}

/* As regras de cor do KPI vivem UMA vez só, junto da definição do cartão mais
   acima. Este bloco era a primeira tentativa (fundo tingido) e ficou aqui
   duplicado: por vir depois, ele vencia em cascata e devolvia o fundo colorido
   que a versão de cima tinha abandonado de propósito. */
/* .fer-kpis é flex desde os chips de uma linha (30/08/2026): a variação
   --resumo só muda o wrap, definido mais abaixo. */
/* Barra da tabela: busca à esquerda, organizador à direita. */
.fer-traf-barra {
  display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center;
  margin: 0 0 10px;
}
.fer-traf-barra #ferTrafBusca { flex: 1 1 180px; min-width: 140px; }
.fer-traf-conta { font-size: var(--t-micro); white-space: nowrap; }
/* Organizador de métricas: caixa suspensa presa ao botão. */
.fer-org { position: relative; display: inline-block; }
.fer-org-caixa {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  display: flex; flex-direction: column; gap: 2px; min-width: 220px; max-height: 320px;
  overflow: auto; padding: 10px 12px; background: var(--cartao, #fffdfa);
  border: 1.4px solid var(--fio-forte, var(--linha)); border-radius: 12px;
  box-shadow: 0 10px 24px rgba(12, 42, 33, 0.14);
}
.fer-org-t {
  font-size: var(--t-micro); color: var(--tinta2); font-family: var(--f-mono);
  text-transform: uppercase; letter-spacing: 0.02em; margin-bottom: 4px;
}
.fer-org-item { display: flex; gap: 8px; align-items: center; font-size: 0.85rem; padding: 2px 0; cursor: pointer; }
.fer-org-acoes { display: flex; gap: 6px; margin-top: 8px; }
/* Cabeçalho ordenável: botão nu dentro do th, seta só no ativo. */
.fer-th-btn {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  cursor: pointer; white-space: nowrap;
}
.fer-th-btn.on { color: var(--verde); font-weight: 800; }
.fer-traf-tab td.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fer-traf-tab th.num { text-align: right; }
.fer-traf-total td { border-top: 2px solid var(--fio-forte, var(--linha)); background: var(--papel, #f3efe5); }
.fer-traf-tipo { margin-right: 6px; }
@media (max-width: 760px) {
  /* No modo ficha a linha de total perde o sentido de coluna: vira cartão. */
  .fer-traf-total td { border-top: 0; }
  .fer-plat-atualizar { margin-left: 0; }
}

/* Responsivo da tela unificada (25/08 à noite): no celular os cartões viram
   grade de DOIS, a busca ocupa a linha inteira e o organizador vira folha
   presa embaixo (caixa suspensa de 220px estourava a janela de 390px). */
@media (max-width: 700px) {
  /* A fileira ÚNICA continua no celular, rolando de lado: é o mesmo gesto dos
     filtros em chip que o painel já usa, e mantém a comparação entre métricas
     numa linha de leitura só. Quebrar em grade de dois faria o número perder a
     vizinhança que dá sentido a ele (investimento ao lado do retorno). */
  .fer-kpis, .fer-kpis--resumo { gap: 5px; }
  .fer-kpi { padding: 5px 10px; }
  .fer-kpi .n { font-size: 0.9rem; }
  .fer-traf-barra { gap: 6px 10px; }
  .fer-traf-barra #ferTrafBusca { flex-basis: 100%; }
  .fer-org { position: static; }
  .fer-org-caixa {
    position: fixed; left: 10px; right: 10px; top: auto; bottom: 10px;
    max-height: 55vh; z-index: 80;
  }
}
/* O resumo do topo tem POUCOS chips: em vez de rolar, ele QUEBRA linha no
   celular (quatro chips visíveis leem melhor que uma faixa que esconde dois). */
.fer-kpis--resumo {
  flex-wrap: wrap;
  overflow-x: visible;
}

/* Modal de padrões de métricas (25/08): uma linha por padrão, nome + resumo à
   esquerda e as ações à direita, no mesmo cartão dos outros modais. */
.fer-pad-linha {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--linha);
}
.fer-pad-linha:last-of-type { border-bottom: 0; }
.fer-pad-info { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fer-pad-info b { font-size: var(--t-corpo); }
@media (max-width: 560px) {
  .fer-pad-linha { flex-wrap: wrap; }
  .fer-pad-linha .fer-cel-acoes { width: 100%; justify-content: stretch; }
  .fer-pad-linha .fer-btn { flex: 1 1 0; }
}

/* FICHA NA TELA DE TRÁFEGO (25/08, tarde): o mesmo vocabulário do painel.
   1. O número é o dono do cartão: a explicação saiu da linha de baixo e virou
      BALÃO no hover (data-nota) — tinta verde sobre o papel, como um carimbo
      de verso. O title segura o toque longo no celular.
   2. Toque aquece o papel (nunca eleva: grade selada corta o que sobe).
   3. Conteúdo entra em cascata curta, como as abas do painel. */
/* O balão em ::after foi APOSENTADO (25/08, mesmo dia): a fileira de KPIs tem
   overflow-x e o recortava; agora o balão é UM elemento no body (.sl-balao,
   app.css + app.js), imune a rolador e a empilhamento. Fica só o cursor. */
.fer-kpi[data-nota]{cursor:help}
.fer-kpi{transition:background .14s ease}
.fer-kpi:hover{background:rgba(201,169,110,.08)}
.fer-kpi--chave{box-shadow:inset 0 2.5px 0 var(--dourado)}
/* Cascata de entrada da tela unificada (keyframes sl-surgir vêm do app.css). */
[data-view="trafego"] #ferTrafAbas{animation:sl-surgir .32s ease both}
[data-view="trafego"] #ferTrafResumo{animation:sl-surgir .32s ease both .05s}
[data-view="trafego"] #ferTrafCorpo>*{animation:sl-surgir .32s ease both .1s}
[data-view="trafego"] #ferTrafCorpo>*:nth-child(2){animation-delay:.15s}
[data-view="trafego"] #ferTrafCorpo>*:nth-child(n+3){animation-delay:.2s}
[data-view="trafego"] #ferAdsNeg,[data-view="trafego"] #ferAdsOps{animation:sl-surgir .32s ease both .25s}
/* Linhas da tabela de campanhas com a meia-tinta da casa no toque. */
.fer-traf-tab tbody tr{transition:background .12s ease}
.fer-traf-tab tbody tr:hover td{background:rgba(201,169,110,.06)}
.fer-traf-tab tbody tr.fer-traf-total:hover td{background:var(--papel,#f3efe5)}
/* Título de cartão da tela com o quadradinho-carimbo, como o sec-tit da ficha. */
[data-view="trafego"] .fer-painel>h3::before{
  content:'';display:inline-block;width:6px;height:6px;background:var(--dourado);
  border-radius:1.5px;margin-right:7px;vertical-align:2px;
}
@media(prefers-reduced-motion:reduce){
  [data-view="trafego"] #ferTrafAbas,[data-view="trafego"] #ferTrafResumo,
  [data-view="trafego"] #ferTrafCorpo>*,[data-view="trafego"] #ferAdsNeg,
  [data-view="trafego"] #ferAdsOps,.fer-kpi[data-nota]:hover::after{animation:none}
}

/* Cartões da tela unificada acompanham o aumento do painel (25/08): número um
   degrau acima no desktop; o resumo do topo, que é a leitura de relance, dois. */
@media(min-width:701px){
  .fer-kpi{padding:13px 15px}
  .fer-kpi .n{font-size:1.35rem}
  .fer-kpis--resumo .fer-kpi{padding:15px 17px}
  .fer-kpis--resumo .fer-kpi .n{font-size:1.6rem}
}

/* FICHA NA TELA DE SALDO (25/08, tarde): mesmo vocabulário das demais.
   Cascata curta na entrada, carimbo nos títulos de bloco, meia-tinta na linha
   sob o cursor, e dois cartões com significado próprio: risco em tinta de
   erro, autonomia mais curta com o fio de ouro. */
[data-view="saldo"] #ferSaldoCorpo>*{animation:sl-surgir .32s ease both}
[data-view="saldo"] #ferSaldoCorpo>*:nth-child(2){animation-delay:.06s}
[data-view="saldo"] #ferSaldoCorpo>*:nth-child(n+3){animation-delay:.12s}
[data-view="saldo"] .fer-bloco-t::before{
  content:'';display:inline-block;width:6px;height:6px;background:var(--dourado);
  border-radius:1.5px;margin-right:7px;vertical-align:2px;
}
[data-view="saldo"] .fer-tab tbody tr{transition:background .12s ease}
[data-view="saldo"] .fer-tab tbody tr:hover td{background:rgba(201,169,110,.06)}
.fer-kpi--risco{border-color:var(--erro,#a13024)}
.fer-kpi--risco .n{color:var(--erro,#a13024)}
.fer-saldo-aut--risco{color:var(--erro,#a13024);font-weight:700}
@media(prefers-reduced-motion:reduce){[data-view="saldo"] #ferSaldoCorpo>*{animation:none}}

/* FICHA EM TODAS AS FERRAMENTAS (25/08, fim de tarde): Conversões e
   Integrações entram no mesmo vocabulário, e as regras que eram por tela
   viram REGRA DA CASA do módulo: cascata curta na entrada, quadradinho-carimbo
   nos títulos de cartão e meia-tinta dourada na linha sob o cursor. */
.fer-corpo>*{animation:sl-surgir .32s ease both}
.fer-corpo>*:nth-child(2){animation-delay:.05s}
.fer-corpo>*:nth-child(3){animation-delay:.1s}
.fer-corpo>*:nth-child(n+4){animation-delay:.15s}
.fer-corpo .fer-painel>h3::before{
  content:'';display:inline-block;width:6px;height:6px;background:var(--dourado);
  border-radius:1.5px;margin-right:7px;vertical-align:2px;
}
.fer-corpo .fer-tab tbody tr{transition:background .12s ease}
.fer-corpo .fer-tab tbody tr:hover td{background:rgba(201,169,110,.06)}
@media(prefers-reduced-motion:reduce){.fer-corpo>*{animation:none}}

/* CHAVE DE VIGILÂNCIA na linha do Saldo (26/08): botão e regra lado a lado,
   como a coluna Situação de Relatórios automáticos. A regra quebra para baixo
   quando a coluna aperta, e o botão nunca encolhe: é ele que se clica. */
.fer-saldo-alerta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.fer-saldo-alerta>.fer-btn{flex:0 0 auto}
.fer-saldo-alerta>span{min-width:0;overflow-wrap:anywhere}
/* "3 de 5": o total fica menor e ao lado, para o número que importa (quantas
   estão realmente vigiadas) continuar sendo o que se lê primeiro. */
.fer-kpi .fer-kpi-de{font-size:.55em;font-weight:600;color:var(--suave);margin-left:6px;letter-spacing:.02em}

/* TABELAS DO SALDO CENTRADAS (26/08, pedido do dono). Só no desktop: abaixo de
   759px a linha vira ficha (rótulo à esquerda, valor à direita) e centralizar
   ali desmancharia o par. O cabeçalho acompanha a célula, senão o título fica
   deslocado do dado que ele nomeia. */
@media (min-width: 760px) {
  [data-view="saldo"] .fer-tab th,
  [data-view="saldo"] .fer-tab td { text-align: center; }
  [data-view="saldo"] .fer-tab .fer-cel { align-items: center; text-align: center; }
  [data-view="saldo"] .fer-tab .fer-cel-acoes { justify-content: center; }
  [data-view="saldo"] .fer-saldo-alerta { justify-content: center; }
  /* A conta tem duas linhas (nome e provedor): centradas, elas continuam lendo
     como um bloco só, mas precisam de folga para não colar nas vizinhas. */
  [data-view="saldo"] .fer-tab--saldo .fer-saldo-conta { padding: 0 6px; }
  [data-view="saldo"] .fer-tab--saldo td[data-r="Situação"] > .fer-cel > .fer-dica { max-width: 32ch; }
}

/* INTEGRAÇÕES REORGANIZADA (27/08, pedido do dono): menos repetição, mais ar.
   A célula de provedor travado no servidor é um traço (a explicação mora no
   cabeçalho da coluna e no bloco "Chaves do servidor"); no celular ela SOME,
   porque ficha empilhada de "aguardando" quatro vezes por cliente era o que
   fazia a tela ter cinco telas de altura. */
.fer-tab-integ td.fer-cel-trava{color:var(--suave);text-align:center;font-weight:600}
.fer-tab-integ td[data-r="Cliente"] b{font-size:1.02rem;letter-spacing:.01em}
.fer-tab-integ .fer-cel > .tag{font-size:var(--t-mini)}
.fer-tab-integ .fer-cel .fer-mono{font-size:var(--t-micro);opacity:.85}
.fer-tab-integ .fer-acoes-icones{gap:8px}
.fer-tab-integ .fer-acoes-icones .fer-btn--icone{width:38px;height:38px;min-width:38px}
.fer-col-nota{display:block;font-weight:500;text-transform:none;letter-spacing:0;color:var(--suave);margin-top:2px}
@media (max-width: 759px) {
  .fer-tab-integ td.fer-cel-trava{display:none}
  .fer-tab-integ td[data-r="Cliente"] b{font-size:1.08rem}
  .fer-tab-integ .fer-cel > .tag{font-size:var(--t-corpo)}
  .fer-tab-integ .fer-cel .fer-mono{font-size:var(--t-mini)}
  /* Botões com dedo: 44px é o alvo mínimo confortável no toque. */
  .fer-tab-integ .fer-acoes-icones .fer-btn--icone{width:44px;height:44px;min-width:44px}
  .fer-tab-integ .fer-btn--peq{padding:10px 14px;font-size:var(--t-corpo)}
}
/* O hub de cartões do servidor respira melhor em telas médias: 2 colunas em
   vez de 4 espremidas. */
@media (min-width: 760px) and (max-width: 1180px) {
  .fer-integ-cartoes, .integ-hub .fer-grade { grid-template-columns: repeat(2, 1fr); }
}

/* DRILL-DOWN da tabela de Tráfego (28/08): a seta abre conjuntos e, dentro
   deles, anúncios — recuo crescente e fundo levemente afundado dizem o nível
   sem precisar de moldura. */
.fer-exp{flex:0 0 auto;width:26px;height:26px;border:1px solid var(--linha);border-radius:7px;background:#fff;cursor:pointer;font-size:12px;line-height:1;color:var(--tinta2)}
.fer-exp:hover{background:rgba(201,169,110,.12)}
.fer-exp--folha{border:0;background:none;cursor:default;color:var(--suave)}
.fer-cel--expansivel{flex-direction:row;align-items:flex-start;gap:8px}
.fer-traf-sub td{background:rgba(31,42,34,.025)}
.fer-traf-sub1 td:first-child{padding-left:26px}
.fer-traf-sub2 td{background:rgba(31,42,34,.05)}
.fer-traf-sub2 td:first-child{padding-left:52px}
@media (max-width: 759px){
  .fer-traf-sub1 td:first-child,.fer-traf-sub2 td:first-child{padding-left:12px}
  .fer-traf-sub{border-left:3px solid var(--dourado)}
  .fer-traf-sub2{border-left-color:var(--linha)}
}
/* Prévia do anúncio no nível expandido (28/08): thumb clicável + botão
   "prévia" abrindo o MODAL interno com o criativo (como no ERP). */
.fer-traf-previa-lk{flex:0 0 auto;line-height:0;padding:0;border:0;background:none;cursor:pointer}
.fer-traf-previa{width:44px;height:44px;object-fit:cover;border-radius:8px;border:1px solid var(--linha);background:rgba(31,42,34,.06);flex:0 0 auto}
.fer-traf-previa-lk:hover .fer-traf-previa{border-color:var(--dourado,#c9a96e)}
.fer-traf-abrir{padding:0;border:0;background:none;cursor:pointer;font-size:var(--t-mini,11px);color:var(--verde,#1d5c47);text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.fer-modal--previa{width:min(560px,calc(100vw - 32px))}
.fer-previa-area{display:flex;flex-direction:column;gap:10px;max-height:calc(88vh - 140px);overflow:auto}
.fer-previa-midia{width:100%;max-height:56vh;object-fit:contain;border-radius:10px;border:1px solid var(--linha);background:rgba(31,42,34,.05)}
.fer-previa-textos{display:flex;flex-direction:column;gap:6px}
.fer-previa-titulo{font-size:var(--t-corpo,14px)}
.fer-previa-corpo{margin:0;font-size:var(--t-corpo,13px);color:var(--tinta2,#4d5a52);white-space:pre-wrap}
/* SALDO v2 (29/08): o padrão visual da tela de Leads aplicado aqui — trilho
   de cor por estado (desktop: filete interno na 1ª célula; mobile: borda do
   cartão em que o tr se transforma), chips .ld-chip reaproveitados do app.css
   e filtros com contagem viva (.chip-n, também do app.css). */
.fer-tab--saldo tr.st-risco td:first-child, .fer-tab tr.st-risco td:first-child { box-shadow: inset 4px 0 0 var(--erro); }
.fer-tab--saldo tr.st-atencao td:first-child, .fer-tab tr.st-atencao td:first-child { box-shadow: inset 4px 0 0 var(--alerta); }
.fer-tab--saldo tr.st-falha td:first-child { box-shadow: inset 4px 0 0 var(--erro); }
.fer-tab--saldo tr.st-ok td:first-child { box-shadow: inset 4px 0 0 var(--selo); }
.fer-tab--saldo tr.st-off td:first-child { box-shadow: inset 4px 0 0 var(--suave); }
.fer-tab--saldo tr.st-mudo td:first-child { box-shadow: inset 4px 0 0 var(--linha); }
#ferSaldoFiltro { margin: 2px 0 10px; }
.fer-saldo-conta .lr-meta { margin-top: 5px; }
/* RELATÓRIOS AUTOMÁTICOS v2 (29/08): trilho "vai sair?" + filtros. */
#ferRelAutoFiltro { margin: 2px 0 10px; }
.fer-tab tr.st-ra-falha td:first-child { box-shadow: inset 4px 0 0 var(--erro); }
.fer-tab tr.st-ra-trava td:first-child { box-shadow: inset 4px 0 0 var(--alerta); }
.fer-tab tr.st-ra-ok td:first-child { box-shadow: inset 4px 0 0 var(--selo); }
.fer-tab tr.st-ra-off td:first-child { box-shadow: inset 4px 0 0 var(--suave); }
/* INTEGRAÇÕES v2 (29/08): trilho pelo pior estado do cliente + filtros. */
#ferIntegFiltro { margin: 2px 0 10px; }
.fer-tab-integ tr.st-tom-erro td:first-child { box-shadow: inset 4px 0 0 var(--erro); }
.fer-tab-integ tr.st-tom-atencao td:first-child { box-shadow: inset 4px 0 0 var(--alerta); }
.fer-tab-integ tr.st-tom-espera td:first-child { box-shadow: inset 4px 0 0 var(--dourado); }
.fer-tab-integ tr.st-tom-ok td:first-child { box-shadow: inset 4px 0 0 var(--selo); }
.fer-tab-integ tr.st-tom-neutro td:first-child { box-shadow: inset 4px 0 0 var(--linha); }
@media (max-width: 759px) {
  .fer-tab--saldo tr.st-risco, .fer-tab tr.st-risco { border-left: 4px solid var(--erro); }
  .fer-tab--saldo tr.st-atencao, .fer-tab tr.st-atencao { border-left: 4px solid var(--alerta); }
  .fer-tab--saldo tr.st-falha { border-left: 4px solid var(--erro); }
  .fer-tab--saldo tr.st-ok { border-left: 4px solid var(--selo); }
  .fer-tab--saldo tr.st-off { border-left: 4px solid var(--suave); }
  .fer-tab--saldo tr.st-mudo { border-left: 4px solid var(--linha); }
  .fer-tab--saldo tr.st-risco td:first-child, .fer-tab--saldo tr.st-atencao td:first-child,
  .fer-tab--saldo tr.st-falha td:first-child, .fer-tab--saldo tr.st-ok td:first-child,
  .fer-tab--saldo tr.st-off td:first-child, .fer-tab--saldo tr.st-mudo td:first-child,
  .fer-tab tr.st-risco td:first-child, .fer-tab tr.st-atencao td:first-child { box-shadow: none; }
  .fer-tab-integ tr.st-tom-erro { border-left: 4px solid var(--erro); }
  .fer-tab-integ tr.st-tom-atencao { border-left: 4px solid var(--alerta); }
  .fer-tab-integ tr.st-tom-espera { border-left: 4px solid var(--dourado); }
  .fer-tab-integ tr.st-tom-ok { border-left: 4px solid var(--selo); }
  .fer-tab-integ tr.st-tom-neutro { border-left: 4px solid var(--linha); }
  .fer-tab-integ tr[class*="st-tom-"] td:first-child { box-shadow: none; }
  .fer-tab tr.st-ra-falha { border-left: 4px solid var(--erro); }
  .fer-tab tr.st-ra-trava { border-left: 4px solid var(--alerta); }
  .fer-tab tr.st-ra-ok { border-left: 4px solid var(--selo); }
  .fer-tab tr.st-ra-off { border-left: 4px solid var(--suave); }
  .fer-tab tr[class*="st-ra-"] td:first-child { box-shadow: none; }
}

/* Modal das Páginas de Lead Ads reorganizado (28/08): busca, contador e as
   Páginas de BM sem papel visíveis porém travadas, com a instrução no title. */
.fer-modal--paginas{width:min(520px,calc(100vw - 32px))}
.fer-modal--paginas #ferPagBusca{margin:2px 0 8px}
.fer-modal--paginas .fer-modal-lista{max-height:46vh}
/* O id na frente não é enfeite: o app.css tem um label:has(>input[checkbox])
   global (0,2,2) que forçava flex e empilhava a caixa em cima do nome — só
   uma âncora de id vence sem !important. */
#ferPagLista .fer-pag-op{display:grid;grid-template-columns:auto 1fr;column-gap:10px;row-gap:1px;align-items:center;text-align:left}
#ferPagLista .fer-pag-op input{grid-row:1 / span 2;margin:0;width:16px;height:16px;accent-color:var(--verde,#1d5c47)}
#ferPagLista .fer-pag-op b,#ferPagLista .fer-pag-op span{grid-column:2;justify-self:start}
#ferPagLista .fer-pag-op--trava{grid-template-columns:1fr}
#ferPagLista .fer-pag-op--trava b,#ferPagLista .fer-pag-op--trava span{grid-column:1}
.fer-pag-cont{margin-right:auto;font-size:var(--t-mini);color:var(--tinta2)}
.fer-pag-divisor{margin:8px 2px 2px;padding-top:8px;border-top:1px dashed var(--linha);font-size:var(--t-micro);color:var(--tinta2);text-transform:uppercase;letter-spacing:.04em}
.fer-pag-op--trava{cursor:help;opacity:.62}
.fer-pag-op--trava b{text-decoration:line-through;text-decoration-thickness:1px;text-decoration-color:var(--suave)}
/* Os avisos e a lista dividem o cartão SEM estourar: o .fer-modal é uma
   coluna flex com teto (86vh) e filho de conteúdo não encolhe sozinho
   (min-height:auto) — sem estes limites, 8 avisos empurravam o rodapé para
   fora da tela e nada rolava. */
.fer-modal--paginas .fer-modal-lista{flex:1 1 auto;min-height:96px}
#ferPagAvisos{flex:0 0 auto;max-height:26vh;overflow-y:auto;margin-top:6px;display:flex;flex-direction:column;gap:4px}
#ferPagAvisos .fer-dica{margin:0}

/* ===== INTEGRAÇÕES NO DESKTOP (31/08/2026, pedido do dono) =================
   No MacBook a tela se espalhava de ponta a ponta: os cartões achatavam,
   rótulo/valor/ação ficavam longe uns dos outros e as faixas largas empilhadas
   liam como poluição. Como no gerenciador do Meta e nos demais ERPs, o conteúdo
   passa a viver numa COLUNA de largura confortável e os controles do desktop
   ganham densidade. ESCOPO deliberado: só esta tela (trafego/saldo têm tabelas
   que querem a largura toda) e só no PONTEIRO FINO com hover (mouse) — no toque
   os alvos de 44px continuam intactos (as regras coarse/estreito não são
   tocadas). */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  /* SEM cap de largura (revisão 31/08): o cap de 1200px condensava o conteúdo e
     deixava uma faixa morta à direita nas telas largas. A tela usa a largura
     inteira; o ganho de calma vem da DENSIDADE (botões/KPIs menores, colunas
     dormentes estreitas), não de estreitar a coluna. */

  /* Resumo do topo: o resumo tem só QUATRO indicadores, então no desktop eles
     ESTICAM para preencher a faixa inteira (barra de KPIs de dashboard) em vez
     de se amontoarem à esquerda deixando a direita vazia — aproveita a largura.
     Número um degrau abaixo do desktop padrão (que os inchava) e cantos de
     cartão, já que agora são caixas largas e não pílulas. */
  [data-view="integracoes"] .fer-kpis--resumo { gap: 12px; }
  [data-view="integracoes"] .fer-kpis--resumo .fer-kpi { flex: 1 1 0; padding: 12px 18px; border-radius: 14px; }
  [data-view="integracoes"] .fer-kpis--resumo .fer-kpi .n { font-size: 1.35rem; }

  /* Botões: o alvo de 44px é do dedo. No mouse os de texto afinam para 36px e
     os de ícone voltam aos ~34px que o próprio .fer-btn--icone já pede (a base
     .fer-btn min-height:44 vinha vencendo e deixava o ícone alto e estreito). */
  [data-view="integracoes"] .fer-corpo .fer-btn { min-height: 36px; padding: 8px 16px; }
  [data-view="integracoes"] .fer-corpo .fer-btn--peq { padding: 6px 13px; }
  [data-view="integracoes"] .fer-corpo .fer-btn--icone { width: 32px; height: 32px; min-height: 32px; padding: 0; }
  /* Quatro ações na célula do Meta (sincronizar, conta, páginas, desconectar):
     com a coluna mais estreita elas quebravam em duas linhas. Gap menor mantém
     o quarteto numa fileira só. */
  [data-view="integracoes"] .fer-corpo .fer-cel-acoes { gap: 5px; }

  /* Colunas dormentes (Instagram/YouTube "aguardando a chave"): a nota longa no
     cabeçalho inchava essas colunas VAZIAS (~180px cada) e espremia a coluna do
     Meta a ponto de as ações quebrarem. Com a nota em coluna estreita, elas
     cedem a largura para quem tem dado — some a quebra e a tela deixa de ser
     dominada por duas colunas paradas. */
  [data-view="integracoes"] .fer-tab-integ .fer-col-nota { display: block; max-width: 96px; white-space: normal; line-height: 1.25; }

  /* A descrição dos canais da agência não precisa esticar até o número: um teto
     de leitura aproxima o texto da etiqueta de estado e calma a faixa. */
  [data-view="integracoes"] .fer-canal-d { flex-basis: auto; max-width: 68ch; }
}
.fer-pag-avisos summary{cursor:pointer;font-size:var(--t-micro);color:var(--tinta2);user-select:none}
.fer-pag-avisos[open] summary{margin-bottom:4px}
.fer-pag-avisos .fer-dica{margin:0 0 4px}

/* INTERRUPTOR DE VIGILÂNCIA na coluna Alerta (01/09/2026, pedido do dono).
   Substitui o botão de texto "Vigiando"/"Desligada", cujo rótulo era o estado e
   ao mesmo tempo a ação — quem lia "Vigiando" não sabia se aquilo descrevia a
   conta ou o que aconteceria ao clicar.

   O olho ABRE e FECHA: ligado, o olho está inteiro e no verde da casa;
   desligado, um traço o risca e a cor cai para o neutro. O risco cresce por
   stroke-dashoffset, e não por opacidade, para que a mudança seja de FORMA e
   sobreviva a daltonismo e a tela sob sol. Herda .fer-btn--icone: mesmo
   tamanho, mesmo raio e mesmo foco visível do resto da casa. */
.fer-vigia { transition: color .22s ease, background-color .22s ease, border-color .22s ease; }
.fer-vigia svg { overflow: visible; }
.fer-vigia .fer-vigia-olho,
.fer-vigia .fer-vigia-iris { transition: transform .22s ease, opacity .22s ease; transform-origin: 12px 12px; }
.fer-vigia .fer-vigia-risco {
  stroke-dasharray: 24; stroke-dashoffset: 24;
  transition: stroke-dashoffset .26s cubic-bezier(.4, 0, .2, 1);
}
.fer-vigia.is-on { color: var(--branco); background: var(--selo); border-color: var(--selo); }
.fer-vigia.is-off { color: var(--tinta2); background: transparent; border-color: var(--linha); }
/* Desligado: o traço aparece e a íris encolhe — o olho "fecha". */
.fer-vigia.is-off .fer-vigia-risco { stroke-dashoffset: 0; }
.fer-vigia.is-off .fer-vigia-iris { transform: scale(.55); opacity: .5; }
.fer-vigia[disabled] { opacity: .6; cursor: progress; }

/* Movimento é enfeite aqui: o estado já se lê pela forma e pela cor. */
@media (prefers-reduced-motion: reduce) {
  .fer-vigia,
  .fer-vigia .fer-vigia-olho,
  .fer-vigia .fer-vigia-iris,
  .fer-vigia .fer-vigia-risco { transition: none; }
}

/* CHAVE GERAL RECOLHÍVEL (01/09/2026, pedido do dono). O bloco "Envio ao
   cliente" ocupava a primeira dobra com explicação e quatro controles que se
   mexem uma vez por ano, empurrando a lista de relatórios para fora da tela.
   Recolhido, sobra o que importa: o NOME e o ESTADO — e o estado tem de ficar
   à vista porque essa chave cala todos os relatórios da agência. */
.fer-chave-recolhe > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin: 0; padding: 2px 0;
}
.fer-chave-recolhe > summary::-webkit-details-marker { display: none; }
/* Mesma seta de .emk-grupo, para o recolhível não parecer de outro produto. */
.fer-chave-recolhe > summary::after {
  content: '\203A'; margin-left: 4px; color: var(--tinta2);
  font-size: 1.15rem; line-height: 1; transition: transform .18s ease;
}
.fer-chave-recolhe[open] > summary::after { transform: rotate(90deg); }
.fer-chave-recolhe > summary:focus-visible { outline: 2px solid var(--dourado); outline-offset: 3px; border-radius: 6px; }
.fer-chave-nota { display: block; margin: 6px 0 2px; font-size: var(--t-micro); color: var(--suave); line-height: 1.35; }
/* As travas ficam ACIMA do recolhível e sempre visíveis: são o que já está
   impedindo o envio, e aviso escondido não é aviso. */
.fer-chave > .fer-ra-travas { margin-top: 0; margin-bottom: 8px; }

@media (prefers-reduced-motion: reduce) {
  .fer-chave-recolhe > summary::after { transition: none; }
}


/* Destino como grupo segmentado, não três radios soltos no ar. */
.fer-ra-destino { align-items: center; gap: 6px 12px; padding: 8px 10px; background: rgba(12,42,33,.035); border-radius: 10px; }
.fer-ra-destino .fer-modal-check { margin: 0; }

/* TABELA DE SALDO CONDENSADA (02/09/2026, pedido do dono — a mesma densidade
   da tabela de relatórios automáticos). As linhas carregavam célula alta,
   chips com folga e botão de 36px; com 25 contas a tela virava rolagem. */
.fer-tab--saldo td { padding: 7px 10px; }
.fer-tab--saldo .fer-cel { gap: 1px; }
.fer-tab--saldo .fer-saldo-conta strong { font-size: var(--t-mini); }
.fer-tab--saldo .fer-saldo-conta .fer-dica { font-size: var(--t-micro); }
.fer-tab--saldo .lr-meta { margin-top: 1px; }
.fer-tab--saldo .ld-chip { padding: 1px 7px; font-size: var(--t-micro); }
.fer-tab--saldo .fer-saldo-alerta { gap: 6px; }
.fer-tab--saldo .fer-saldo-alerta > span { font-size: var(--t-micro); }
.fer-tab--saldo .fer-saldo-alerta .fer-btn--icone { width: 30px; height: 30px; min-width: 30px; min-height: 30px; }
.fer-tab--saldo .fer-btn--peq { min-height: 30px; padding-top: 4px; padding-bottom: 4px; }
/* No celular a tabela vira cartões empilhados: a condensação de 30px nos
   botões atrapalharia o toque — volta ao alvo de 44px lá. */
@media (max-width: 760px) {
  .fer-tab--saldo .fer-saldo-alerta .fer-btn--icone { width: 40px; height: 40px; min-width: 40px; min-height: 40px; }
  .fer-tab--saldo .fer-btn--peq { min-height: 38px; }
}

/* AÇÕES NUMA LINHA SÓ na tabela de relatórios (02/09/2026, pedido do dono).
   Na largura de um MacBook as outras colunas espremiam a célula de Ações
   abaixo dos ~204px que os cinco ícones pedem, e o wrap jogava Duplicar e
   Excluir para uma segunda linha — a fileira de ações é uma unidade e quebrada
   vira duas fileiras que se leem como ações de linhas diferentes. Ícone de
   32px + nowrap + largura mínima reservada na coluna. No layout empilhado do
   celular o wrap volta, porque lá é o alvo de toque que manda. */
@media (min-width: 761px) {
  .fer-tab--ra td.acoes-cel { min-width: 196px; }
  .fer-tab--ra .fer-acoes-icones { flex-wrap: nowrap; }
  .fer-tab--ra .fer-acoes-icones .fer-btn--icone { width: 32px; height: 32px; min-width: 32px; min-height: 32px; }
}

/* Alvo de toque do botao de modo/aba FORA da faixa de agencia (04/09/2026).
   A regra de 46px existia so como `.fer-agencia .fer-modo-btn`. A fita de abas
   dos Relatorios automaticos (Relatorios, Modelos, Historico, Cobranca do Ted)
   usa a mesma classe SEM a faixa de agencia por volta, e media 41px nos cinco
   tamanhos com dedo. A regra geral cobre as duas; a de dentro da faixa fica
   onde esta, porque ela tambem acerta o `.fer-btn` vizinho. */
@media (any-pointer: coarse){
  .fer-modo-btn{min-height:46px}
}