/* =============================================================================
   Sistema visual da Ferramenta Comercial 7TEC
   =============================================================================

   As duas cores vêm do próprio arquivo do logotipo:

     #3D5361  azul-ardósia  — o corpo do "7TEC AUTOMAÇÃO"
     #EA4B4B  vermelho coral — a barra sobre o 7

   Uma decisão que vale explicar: o **coral é acento, não é a cor de ação**.
   No logotipo ele aparece como uma barra pequena sobre uma peça grande em
   ardósia — essa proporção é o que dá a ele força. Se o botão de salvar fosse
   vermelho, a tela inteira gritaria, e o vermelho perderia justamente o poder
   de chamar atenção quando precisa. Então: botões e cabeçalho em ardósia,
   coral reservado para o que precisa ser visto primeiro (o que venceu, o que
   está parado, a etapa atual).

   Sem fonte externa: a ferramenta não pode depender de servidor de terceiro
   para a tela abrir. A pilha do sistema resolve bem e carrega instantâneo.
   ========================================================================== */

:root {
  /* --- marca --- */
  --ardosia-900: #1E2A32;
  --ardosia-800: #2A3B47;
  --ardosia-700: #334757;
  --ardosia-600: #3D5361;   /* a cor do logotipo */
  --ardosia-500: #4E677A;
  --ardosia-400: #6B8194;
  --ardosia-300: #9CADBA;
  --ardosia-200: #C6D1DA;
  --ardosia-100: #E2E9EE;
  --ardosia-50:  #F1F5F7;

  --coral-700: #B93636;
  --coral-600: #D33F3F;
  --coral-500: #EA4B4B;     /* a cor do logotipo */
  --coral-200: #F6BFBF;
  --coral-100: #FBE3E3;

  /* Turquesa: identifica o módulo CRM. Fica entre o azul da marca e o verde,
     então harmoniza com a ardósia sem competir com o coral, que é o alarme. */
  --turquesa: #0FE3E4;

  /* AS CORES SÓLIDAS DE MARCA — as que NÃO viram com o tema, e isso é
     deliberado.
     -------------------------------------------------------------------------
     `--ardosia-600`, `--turquesa-escuro` e o coral clareiam no tema escuro
     porque lá eles são TINTA: texto escuro sobre papel escuro não se lê. Mas
     três peças do aplicativo usam essas mesmas cores como FUNDO PINTADO, com
     branco por cima — a faixa do cartão de entrada, o círculo das iniciais e
     o botão de ação sem volta. Se o fundo clareasse junto, o branco por cima
     sumiria: branco sobre `#9CB2C2` dá 1,9:1.
     Então a peça pintada tem token próprio, fixo nos dois temas. O branco
     sobre cada um deles: 8,05:1, 5,53:1 e 4,61:1. */
  --marca-ardosia: #3D5361;
  --marca-turquesa: #00747E;
  --perigo-cheio: #D33F3F;
  --perigo-cheio-forte: #B93636;
  /* Usado como TINTA sobre branco: precisa de luz baixa e saturação alta.
     A 55% de saturação ele saía como um azul-acinzentado de impressora — e a
     #00919C que o substituiu ainda dava só 3,80:1. Esta dá 5,0:1. */
  --turquesa-escuro: #00747E;

  /* --- superfícies --- */
  --fundo:  #F3F6F8;
  --papel:  #FFFFFF;
  --borda:  #DEE5EA;
  --borda-forte: #C6D1DA;

  /* --- texto --- */
  --tinta:  #1E2A32;
  --tinta-media: #4A5C68;
  /* 3,92:1 antes — e não é decoração: é o rótulo de campo, o cabeçalho de
     tabela e a legenda dos indicadores. O `secondaryLabel` do iOS fica em
     4,6:1 sobre fundo claro; este dá 4,8:1. */
  --suave: #5E6E7A;
  /* O TEXTO DE EXEMPLO DOS CAMPOS, em token e não cravado na regra.
     Ele é deliberadamente mais fraco que o texto de verdade — com o mesmo
     contraste, o campo pareceria já preenchido e a pessoa apagaria o exemplo
     achando que apagava a resposta. 3,50:1 sobre o papel claro. */
  --exemplo: #7C8B97;

  /* --- estados --- */
  /* As três cores de estado — verde, âmbar e vermelho — pelo mesmo critério
     das seções: fundo claríssimo, tinta viva.

     A tinta é a que faz a etiqueta ser lida a dois metros de distância, e era
     ela que estava lavada: um verde a 55% de saturação sobre um fundo verde
     claro não diz «deu certo», diz «alguma coisa aqui é esverdeada». O fundo
     e a borda seguem discretos de propósito — o pedido foi cor mais VIVA,
     não mais superfície colorida. */
  --ok-fundo: #E7F7EE;   --ok-borda: #A8E0C2;   --ok-tinta: #067A3E;

  /* O verde do interruptor ligado. UMA cor no aplicativo inteiro, e não a
     `--acento` que muda por seção: no iOS o interruptor é sempre da mesma
     cor, porque o que ele comunica é «ligado», e não «em que tela você
     está». Interruptor que muda de cor conforme a página faz a pessoa
     procurar significado onde não há.
     Medido: 3,3:1 contra o branco — acima dos 3,0 que um elemento gráfico
     precisa para ser visto por quem enxerga pouco. */
  --interruptor-ligado: #12A150;
  --interruptor-desligado: #8A96A1;
  --atencao-fundo: #FFF6E5; --atencao-borda: #F5D291; --atencao-tinta: #9A5B00;
  --erro-fundo: #FFEDEC; --erro-borda: #F8BDB9; --erro-tinta: #C4231A;

  /* --- forma ---
     Raios maiores e sombra mais rasa: é o que dá o ar de painel do macOS.
     Sombra forte sobre fundo claro parece cartão de papelão; o que o sistema
     da Apple faz é uma borda de um fio e um contorno quase imperceptível. */
  /* Dois desenhos guardados como dado: a lupa da busca e o chevron do menu
     suspenso. Em `url()` de dado, e não em arquivo, porque um ícone de 14
     pixels não vale uma ida ao servidor — e porque assim eles não podem
     faltar num deploy. */
  --lupa: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 2a8 8 0 105.3 14l5.4 5.4 1.4-1.4-5.4-5.4A8 8 0 0010 2zm0 2a6 6 0 110 12 6 6 0 010-12z'/%3E%3C/svg%3E");
  --chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23808C97'%3E%3Cpath d='M7.6 9.6a1 1 0 011.4 0L12 12.6l3-3a1 1 0 111.4 1.4l-3.7 3.7a1 1 0 01-1.4 0L7.6 11a1 1 0 010-1.4z'/%3E%3C/svg%3E");
  --raio-g: 12px;   /* cartões */
  /* O BALÃO DE CONVERSA tem raio próprio, e isso não é descuido: no iOS a
     bolha de mensagem é mais redonda que qualquer cartão — é o que a faz ser
     lida como fala e não como caixa. Nomeado para ser uma decisão escrita, e
     não um 14 solto que ninguém sabe se foi de propósito. */
  --raio-balao: 14px;
  --raio: 9px;      /* campos e botões */
  --raio-p: 6px;    /* etiquetas, itens pequenos */
  --sombra: 0 1px 1px rgba(30, 42, 50, 0.04), 0 1px 3px rgba(30, 42, 50, 0.05);
  --sombra-alta: 0 12px 32px rgba(30, 42, 50, 0.14), 0 2px 6px rgba(30, 42, 50, 0.06);
  /* 120ms é metade do que se percebe como movimento, e `ease` é simétrica —
     todo hover PISCAVA em vez de deslizar. A Apple usa saída suave em
     0,2-0,3s, que é o que faz a interface parecer que responde em vez de
     trocar de estado. */
  --transicao: 220ms cubic-bezier(0.2, 0, 0, 1);

  /* --- espaço ---
     Uma escala só, múltiplos de 4. O desalinhamento das telas vinha de cada
     margem ter sido escolhida na hora: 0.85rem aqui, 1.05rem ali, 0.9rem
     acolá. Com escala, tudo encosta na mesma linha invisível. */
  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;

  /* Altura única para tudo que se clica ou se digita. É o que faz um campo e
     o botão ao lado terminarem na mesma linha.

     2,35rem = 37,6px no computador, onde o alvo é o ponteiro do mouse e o que
     manda é a linha do formulário. NO CELULAR ESTE VALOR SOBE PARA 2,75rem
     (44px), que é o alvo de toque mínimo — ver o bloco `max-width: 640px`.
     Sem aquela linha, todo botão e todo campo do aplicativo ficavam 6px
     abaixo do mínimo no aparelho em que mais se toca neles. */
  --altura-controle: 2.35rem;

  /* A ALTURA DA SUB-ABA, E POR QUE ELA É UM TOKEN E NÃO UMA LINHA NA MÉDIA.
     -----------------------------------------------------------------------
     A sub-aba não usa `--altura-controle`: no computador ela é um segmento
     compacto, de altura dada só pelo recuo, e por isso o valor de mesa aqui
     é zero.

     No celular ela precisa dos 44px — e a primeira tentativa de entregá-los
     foi escrever `min-height: 2.75rem` dentro da média de 640px, contra o
     `min-height: 0` que a regra de mesa já declarava. As duas regras têm o
     MESMO seletor e a mesma força: `@media` não aumenta especificidade. No
     empate quem decide é a ordem no arquivo, a de mesa vinha quase quinhentas
     linhas depois, e a linha da média nunca pintou nada. Medido a 390px:
     38,9px na sub-aba interna e 33,2px na sub-aba estreita, que abaixo de
     1080px é a navegação principal da seção.

     Trocar a ordem dos blocos, ou pôr uma classe a mais no seletor da média,
     consertaria ESTE caso e deixaria a armadilha armada: a regra de mesa
     seguinte que alguém escrever para `.subabas` volta a ganhar. Por token
     não há disputa nenhuma a arbitrar — existe uma única declaração de
     `min-height` para a sub-aba no arquivo inteiro, e o que a média muda é o
     VALOR, em `:root`, onde ela é a última a falar. */
  --altura-subaba: 0;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

/* =============================================================================
   O TRILHO À ESQUERDA
   =============================================================================

   Substituiu a fileira de abas do topo em 04/09/2026. O motivo está escrito
   em base.html; aqui fica o que a folha de estilo precisa saber:

     * a largura é FIXA (232px), e não percentual. Navegação que muda de
       largura conforme a janela é navegação em que a pessoa não decora onde
       as coisas ficam — e decorar é o ponto de uma barra lateral;
     * ela ROLA sozinha quando não cabe (`overflow-y: auto`), e é isso que
       resolve o problema que a fileira horizontal não tinha como resolver:
       para baixo há sempre para onde ir;
     * `position: sticky` com `height: 100vh` a mantém parada enquanto a
       tela rola. Uma navegação que sobe junto com o conteúdo obriga a
       voltar ao topo para trocar de seção.

   ESTREITOU, VIRA SÓ ÍCONE — nunca some. A pessoa continua vendo em que
   seção está; o que ela perde é a palavra, não a referência.
   ========================================================================== */

body {
  display: flex;
  align-items: flex-start;
  min-height: 100vh;
}

.trilho {
  flex: 0 0 232px;
  width: 232px;
  align-self: stretch;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 0.9rem 0.7rem 0.7rem;
  background: var(--trilho-fundo);
  color: var(--trilho-texto);
  /* `hidden`, e não `auto`: quem rola é `.trilho-secoes`, logo abaixo. */
  overflow: hidden;
  z-index: 20;
}

/* O FILETE CORAL mora na área de conteúdo, e não no trilho.
   `backdrop-filter` faz do trilho o bloco-contêiner dos filhos `position:
   fixed` — o filete passava a ser posicionado dentro dele, caía fora dos
   232px e o `overflow-y: auto` o recortava. Não aparecia, e não dava erro
   nenhum: sumia. Aqui, preso a um elemento que não filtra nada, ele fica. */
/* O SEPARADOR DA LATERAL é um fio de cabelo, como no macOS.
   Era uma barra coral de 3px atravessando a janela inteira — assinatura
   forte, e nenhum aplicativo do sistema tem uma. O coral da marca continua
   no logotipo, nos avisos e no botão de perigo, que é onde ele significa
   alguma coisa. */
.area::before {
  content: "";
  position: fixed;
  top: 0; bottom: 0;
  left: 232px;
  width: 1px;
  background: var(--borda);
  pointer-events: none;
  z-index: 21;
}

.area {
  flex: 1 1 auto;
  min-width: 0;      /* sem isto, uma tabela larga empurra o trilho para fora */
}

.trilho-marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.55rem 0.9rem;
  text-decoration: none;
  flex-shrink: 0;
}
.trilho-marca .logo {
  height: 24px; width: auto; display: block;
  /* No claro a marca fica na cor dela; no escuro ela é branqueada, na regra
     de tema mais abaixo. Antes o `invert` era incondicional, porque o trilho
     era escuro sempre — e num trilho claro isso deixava o logotipo branco
     sobre cinza-pérola, ou seja, invisível. */
}
.trilho-marca .crm {
  height: 23px; width: auto; display: block;
  border-left: 1px solid var(--trilho-linha);
  padding-left: 0.6rem;
  box-sizing: content-box;
}

/* --- As oito seções ------------------------------------------------------ */

/* QUEM ROLA É A LISTA, e não o trilho inteiro.

   O trilho inteiro rolando levava o pé junto — a organização em que se está
   trabalhando e a conta saíam da tela assim que a lista crescia. E ela
   cresceu: com os produtos agrupados, a Configuração passa de vinte linhas, e
   o seletor de organização ficava abaixo da dobra numa janela de 980px. Trocar
   de organização sem querer é o erro mais caro desta ferramenta, e o controle
   que o evita não pode depender de rolar para achar.

   `min-height: 0` é o que faz isto funcionar: sem ele, um filho flex se
   recusa a encolher abaixo do próprio conteúdo e a rolagem nunca aparece. */
.trilho-secoes {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: 0.92rem;
}

.trilho-secoes > a {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  /* 38px de altura antes, depois 2,2rem — que são 35,2px, MENOS do que os 38
     que aquela mudança dizia estar corrigindo. Onde se toca, a Apple pede 44,
     e esta regra vale tanto no trilho estreito quanto na barra de abas do
     celular: 2,75rem = 44px. */
  min-height: 2.75rem;
  padding: 0.44rem 0.55rem;
  border-radius: var(--raio);
  color: var(--trilho-texto);
  text-decoration: none;
  white-space: nowrap;
}
/* O TILE COLORIDO DE CADA SEÇÃO.
   -------------------------------------------------------------------------
   É a peça que faz a lateral parecer os Ajustes do Sistema, e é a resposta
   exata ao pedido do gestor: «não precisa ser colorido, mas onde há cor ser
   mais vivo». A cor viva mora em dez quadradinhos de 22 pixels; o texto, o
   fundo e o resto da tela ficam neutros.

   Por que funciona melhor do que tingir o ícone solto: o quadrado preenchido
   dá à cor uma ÁREA. Um traço de 1,5px em turquesa lê-se como cinza a dois
   metros — a mesma cor num tile de 22px lê-se como turquesa. É por isso que
   a Apple desenhou os Ajustes assim, e não com ícones tingidos.

   `--secao-<codigo>` já existe para as dez seções; `data-secao` no próprio
   link é que escolhe qual. Uma seção nova sem cor declarada cai no cinza —
   feio, e não quebrado. */
.trilho-secoes > a .i {
  width: 22px; height: 22px; flex: none;
  padding: 3.5px;
  border-radius: var(--raio-p);
  box-sizing: border-box;
  background: var(--icone-secao-configuracao);
  color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22);
}
.trilho-secoes > a[data-secao="painel"] .i        { background: var(--icone-secao-painel); }
.trilho-secoes > a[data-secao="leads"] .i         { background: var(--icone-secao-leads); }
.trilho-secoes > a[data-secao="oportunidades"] .i { background: var(--icone-secao-oportunidades); }
.trilho-secoes > a[data-secao="empresas"] .i      { background: var(--icone-secao-empresas); }
.trilho-secoes > a[data-secao="prospeccao"] .i    { background: var(--icone-secao-prospeccao); }
.trilho-secoes > a[data-secao="agenda"] .i        { background: var(--icone-secao-agenda); }
.trilho-secoes > a[data-secao="agente"] .i        { background: var(--icone-secao-agente); }
.trilho-secoes > a[data-secao="copiloto"] .i      { background: var(--icone-secao-copiloto); }
.trilho-secoes > a[data-secao="avaliador"] .i     { background: var(--icone-secao-avaliador); }
.trilho-secoes > a[data-secao="propostas"] .i     { background: var(--icone-secao-propostas); }
.trilho-secoes > a[data-secao="comissao"] .i      { background: var(--icone-secao-comissao); }
.trilho-secoes > a[data-secao="configuracao"] .i  { background: var(--icone-secao-configuracao); }

/* NA SEÇÃO SELECIONADA o tile fica branco sobre a pílula colorida. Manter o
   tile na cor dele dentro de uma pílula da MESMA cor faria as duas se
   fundirem numa mancha só, e o ícone sumiria. */
.trilho-secoes > a.ativo .i {
  background: rgb(255 255 255 / 0.24);
  box-shadow: none;
}
.trilho-secoes > a:hover { background: var(--trilho-realce); }

/* A SELEÇÃO É UMA PÍLULA, e não um sublinhado.
   É o que o Finder e o Mail fazem: numa lista vertical, a linha inteira
   pintada é o que se acha de relance. Sublinhado embaixo, que servia na
   fileira horizontal, aqui se confunde com a divisa entre dois itens. */
.trilho-secoes > a.ativo {
  background: var(--trilho-selecao);
  color: var(--trilho-selecao-texto);
  font-weight: 600;
}
.trilho-secoes > a:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
}

/* --- As sub-seções, aninhadas -------------------------------------------- */

/* Recuadas e menores que a seção-mãe, com um filete à esquerda ligando as
   irmãs. A hierarquia tem de ser visível: duas listas com o mesmo peso são
   duas listas competindo, que é justamente o que a fileira dupla fazia. */
.trilho-filhas {
  display: flex;
  flex-direction: column;
  margin: 0.15rem 0 0.4rem 1.45rem;
  padding-left: 0.6rem;
  border-left: 1.5px solid rgb(255 255 255 / 0.14);
}
.trilho-filhas a {
  padding: 0.3rem 0.5rem;
  border-radius: var(--raio-p);
  color: var(--trilho-texto-suave);
  text-decoration: none;
  font-size: 0.855rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.trilho-filhas a:hover { background: var(--trilho-realce); color: var(--trilho-texto); }
/* A sub-seção ativa NÃO repete a pílula cheia da seção-mãe: duas pílulas
   preenchidas na mesma coluna competem, e a pessoa perde qual das duas diz
   onde ela está. Fica o texto na cor de destaque, com peso. */
/* O acento CRU sobre o trilho claro dava 2,25:1 em Oportunidades e 2,39:1 no
   Agente. A marca de «estou aqui» é o preenchimento tingido e o peso; a cor
   fica no tile do ícone, que é onde ela tem área para ser vista. */
.trilho-filhas a.ativo {
  color: var(--trilho-texto);
  font-weight: 650;
  background: color-mix(in srgb, var(--acento) 14%, transparent);
}

/* O nome do produto que encabeça um grupo de sub-abas: «Agente», e abaixo
   dele «Canais», «Atendentes», «Motor e chaves».

   Não é link e não pode parecer um: caixa alta pequena, cor fraca e sem área
   de clique. É o mesmo tratamento que o Finder dá a «Favoritos» e «Locais» na
   barra lateral — a pessoa lê como etiqueta e nem tenta clicar. */
.trilho-grupo {
  display: block;
  margin: 0.5rem 0 0.1rem;
  padding: 0 0.5rem;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--trilho-texto-fraco);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* O primeiro grupo não precisa do respiro de cima: já veio um do item pai. */
.trilho-filhas > .trilho-grupo:first-child { margin-top: 0.1rem; }
/* Item de grupo recua mais um degrau — é o que faz o «Agente → Canais» ser
   lido como hierarquia sem precisar de mais uma linha vertical. */
.trilho-filhas a.agrupada { padding-left: 0.9rem; }

/* --- O pé: organização e conta ------------------------------------------- */

.trilho-pe {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding-top: 0.7rem;
  border-top: 1px solid rgb(255 255 255 / 0.12);
}

/* A organização saiu da faixa que atravessava o topo de TODA tela para dizer
   uma coisa que muda uma vez por semana. Aqui ela fica junto da conta, que é
   a informação da mesma natureza — de quem é esta sessão. */
.trilho-organizacao { margin: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.trilho-organizacao .rotulo {
  font-size: 0.72rem;
  color: var(--trilho-texto-fraco);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-left: 0.55rem;
}
/* O seletor de organização vestia branco sobre branco depois que o trilho
   ficou claro: texto invisível num controle que troca o DONO dos dados na
   tela, que é o erro mais caro desta ferramenta. Agora ele veste o trilho. */
.trilho-organizacao select {
  width: 100%;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.32rem 0.5rem;
  color: var(--trilho-texto);
  background-color: var(--trilho-realce);
  border-color: var(--trilho-linha);
}
.trilho-organizacao select option { color: var(--tinta); }

.trilho .conta { display: block; }
.trilho .menu-conta > summary {
  gap: 0.55rem;
  padding: 0.3rem 0.5rem;
  border-radius: var(--raio);
}
.trilho .menu-conta > summary:hover { background: var(--trilho-realce); }
.trilho .conta-nome {
  font-size: 0.87rem;
  color: var(--trilho-texto);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* A gaveta abre para CIMA e para a direita: no pé do trilho, abrir para
   baixo a jogaria para fora da tela. */
.trilho .gaveta-conta {
  top: auto;
  bottom: calc(100% + 0.5rem);
  left: 0;
  right: auto;
}

/* As sub-seções desenhadas DENTRO da tela: escondidas enquanto o trilho as
   mostra. Esta regra tem de vir ANTES da média que a liga — mesma
   especificidade, e a última escrita é a que vale. Depois dela, o `display:
   flex` da média nunca pegava e a faixa não aparecia: um `display: none` a
   mais no fim do arquivo é o jeito silencioso de esconder uma navegação
   inteira. */
.subabas-estreitas { display: none; }
/* QUEBRA DE LINHA, e não rolagem horizontal.

   A faixa comum rola para o lado quando não cabe, e foi exatamente isso que
   o gestor viu: «nas configurações já está sumindo menu à direita». Aqui há
   espaço vertical de sobra — a faixa está dentro do conteúdo, não numa barra
   de altura fixa —, então ela desce uma linha em vez de esconder o fim.
   Nenhuma seção fica atrás de uma rolagem que ninguém percebe existir. */
/* A CLASSE DOBRADA NÃO É ENFEITE.
   `.subabas-estreitas` e `.subabas` têm a MESMA força, e o elemento tem as
   duas. Quando a força empata, quem vence é quem foi escrita depois — e
   `.subabas { display: inline-flex }` mora trezentas linhas abaixo. O
   `display: none` daqui perdia caladinho, e a faixa aparecia na tela larga
   junto com o trilho: as duas navegações ao mesmo tempo, dizendo a mesma
   coisa. Escrita com as duas classes, ela ganha por força e não por posição —
   e continua ganhando no dia em que alguém mexer na ordem do arquivo. */
.subabas.subabas-estreitas {
  display: none;   /* ligada só na média abaixo */
  flex-wrap: wrap;
  overflow-x: visible;
  mask-image: none;
  margin-bottom: 1.1rem;
}

/* --- Estreitou: só os ícones --------------------------------------------- *
 *
 * Como o Finder encolhido. A largura vira 60px, a palavra some e o `title`
 * a devolve ao passar o mouse. As sub-seções não cabem em 60px, então elas
 * ficam para a tela — que é onde a pessoa já está, e onde a seção ativa é
 * óbvia.
 * ------------------------------------------------------------------------ */
@media (max-width: 1080px) {
  .trilho { flex-basis: 60px; width: 60px; padding: 0.9rem 0.5rem 0.7rem; }
  .area::before { left: 60px; }
  .trilho-marca { justify-content: center; padding: 0.35rem 0 0.9rem; }
  .trilho-marca .crm { display: none; }
  /* O logotipo é uma palavra deitada: em 60px ele vazava para fora do
     trilho. Escala junto, mantendo a proporção. */
  .trilho-marca .logo { height: auto; width: 40px; }
  .trilho-secoes > a { justify-content: center; padding: 0.5rem 0; }
  .trilho-secoes > a span { display: none; }
  /* AS SUB-SEÇÕES VOLTAM PARA DENTRO DA TELA, e não somem.
     Elas não cabem em 60px, e escondê-las e pronto deixaria as doze seções
     da Configuração inalcançáveis numa janela de 1000px — um beco sem
     saída, que é pior do que a fileira que cortava. São a MESMA lista, do
     mesmo lugar; o que muda é onde ela é desenhada. */
  .trilho-filhas { display: none; }
  .subabas.subabas-estreitas { display: flex; }
  .trilho-organizacao .rotulo { display: none; }
  .trilho-organizacao select { font-size: 0.72rem; padding: 0.3rem 0.2rem; }
  .trilho .conta-nome { display: none; }
  .trilho .menu-conta > summary { justify-content: center; }
}

/* No celular o trilho deita: vira uma barra embaixo, como a de abas do iOS —
   o polegar alcança o pé da tela, nunca a lateral. */
@media (max-width: 640px) {
  body { display: block; }

  .trilho {
    flex-basis: auto; width: auto;
    position: fixed; top: auto; bottom: 0; left: 0; right: 0;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    gap: 0.2rem;
    /* A FAIXA SEGURA DO IPHONE. Sem `env(safe-area-inset-bottom)`, a barra
       fica com uma faixa morta embaixo e os ícones a dez pixels do indicador
       de início. Toda barra de abas do iOS estende o material até a borda e
       soma a faixa ao recuo. */
    padding: 0.3rem 0.4rem calc(0.3rem + env(safe-area-inset-bottom, 0px));
    overflow-x: auto;
    overflow-y: visible;
    /* Fio de cabelo e material translúcido, como a barra de abas do iOS —
       não a sombra difusa que estava aqui. */
    border-top: 1px solid var(--trilho-linha);
    box-shadow: none;
  }
  /* A BARRA NÃO RECORTA O QUE ABRE DE DENTRO DELA.
     -----------------------------------------------------------------------
     `overflow: hidden` é o certo no computador, onde quem rola é
     `.trilho-secoes`. No celular a barra é `fixed` no pé e o menu da conta
     abre PARA CIMA, para fora dela: com `hidden` a gaveta aparecia cortada
     pela metade, sem erro nenhum, só faltando.

     O material translúcido da barra (o `::before` com `backdrop-filter`) é o
     mesmo do computador e está escrito uma vez só, no `@supports` da seção do
     trilho — ele já vale em toda largura. Havia aqui uma cópia daquele bloco,
     com uma receita de cor um pouco diferente: `@media` não aumenta
     especificidade, o bloco de lá tem o mesmo seletor e vem depois no
     arquivo, e a cópia daqui nunca pintou um pixel. Medido a 390px, a barra
     já usava a receita de lá. Foi removida: uma regra que não desenha nada
     só serve para a próxima pessoa acreditar nela. */
  .trilho { overflow: visible; }
  .trilho::after { display: none; }
  .trilho-marca { display: none; }
  .area::before { display: none; }
  /* Deitada, a lista rola PARA O LADO — e a rolagem vertical que ela ganhou
     no computador tem de ser desfeita aqui, senão a barra de abas do celular
     ficaria com uma barra de rolagem de pé dentro dela. */
  .trilho-secoes {
    flex-direction: row; gap: 0.1rem;
    overflow-y: visible; overflow-x: auto; min-height: auto;
  }
  .trilho-secoes > a span { display: none; }
  .trilho-filhas { display: none; }
  .trilho-pe { border: 0; padding: 0; }
  .trilho-organizacao { display: none; }
  /* O RECUO DO PÉ TEM DE INCLUIR A FAIXA SEGURA.
     -----------------------------------------------------------------------
     A barra de abas mede 56px MAIS `env(safe-area-inset-bottom)` — ela soma a
     faixa ao próprio recuo, logo acima. Reservar só 3,5rem (56px) deixava a
     barra cobrindo os últimos ~34px de TODA página num iPhone com indicador
     de início: o último botão de todo formulário ficava debaixo dela. Os três
     outros lugares que se desviam da barra já usavam esta mesma conta. */
  .area { padding-bottom: calc(3.9rem + env(safe-area-inset-bottom, 0px)); }

  /* O ALVO DE TOQUE.
     -----------------------------------------------------------------------
     44px é a medida que a Apple pede e que este arquivo cita em seis lugares
     — e nenhuma regra a entregava no celular: `--altura-controle` valia
     2,35rem (37,6px) em toda largura, e é dela que saem a altura de todo
     botão e de todo campo. E as sub-abas, que abaixo de 1080px são a
     navegação principal da seção, traziam `min-height: 0` com 0,9rem de fonte
     e 0,34rem de recuo — 33px. Quem erra o toque numa sub-aba de 33px acaba
     na aba vizinha e não sabe que trocou de tela.

     A altura da sub-aba viaja por TOKEN, e não por uma segunda regra
     `.subabas a, .subabas button` escrita aqui dentro: escrita aqui, ela
     empataria em especificidade com a regra de mesa e perderia para ela pela
     ordem — foi exatamente o que aconteceu, e ficou assim sem que ninguém
     visse, porque a linha estava escrita e parecia cumprida. */
  :root {
    --altura-controle: 2.75rem;
    --altura-subaba: 2.75rem;
  }
}


/* =============================================================================
   Estrutura
   ========================================================================== */

/* 74rem, e não as 68rem de antes: o trilho levou 232px da largura, e a
   tabela de oportunidades passou a estourar por 29 pixels — a coluna
   «editar» ficava atrás de uma rolagem lateral que ninguém procura. A
   largura de LEITURA não muda: quem lê texto corrido usa `main.leitura`,
   que continua em 46rem. */
main { max-width: 74rem; margin: 0 auto; padding: 1.75rem 1.75rem 4rem; }
main.estreito { max-width: 27rem; }
/* Páginas de leitura corrida: largura de linha confortável, nem a caixa
   de login (27rem, curta demais para texto) nem a tela de trabalho
   (68rem, longa demais para os olhos acompanharem). */
main.leitura { max-width: 46rem; }
main.leitura h2 { margin-top: 1.8rem; }
main.leitura ul { padding-left: 1.2rem; }
main.leitura li { margin-bottom: 0.4rem; }

/* A BARRA DE FERRAMENTAS DA JANELA.
   -------------------------------------------------------------------------
   Era um `<h1>` solto boiando sobre o fundo, com os botões ao lado. Toda
   janela do macOS tem uma faixa no alto do painel de conteúdo — título à
   esquerda, ações à direita, um fio de cabelo embaixo — e ela FICA no lugar
   enquanto o conteúdo rola. É o que separa «uma janela com uma barra» de
   «uma página que começa com um título grande», e era a diferença que
   sobrava depois de arrumar a lateral.

   Grudenta e translúcida: o conteúdo passa POR BAIXO ao rolar, e é esse
   pequeno movimento que diz «isto está por cima». O desfoque satura antes de
   borrar porque borrar dessatura — sem isso o que passa embaixo fica
   cinzento e a barra parece suja. */
.cabecalho-pagina {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 15;
  margin: calc(var(--e5) * -1) calc(var(--e5) * -1) var(--e5);
  padding: 0.75rem var(--e5);
  min-height: 52px;
  background: color-mix(in srgb, var(--fundo) 82%, transparent);
  border-bottom: 1px solid var(--borda);
}
@supports (backdrop-filter: blur(1px)) {
  .cabecalho-pagina {
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
  }
}
/* O título da barra é menor do que era o `<h1>` solto: numa barra de
   ferramentas ele é o RÓTULO da janela, não a manchete da página. */
.cabecalho-pagina h1 { font-size: 1.18rem; font-weight: 640; }

/* O TÍTULO QUE SE EDITA NO LUGAR.
   ---------------------------------------------------------------------------
   Em repouso ele é um título: sem moldura, sem fundo, sem nada que diga
   «formulário». Passar o mouse desenha um contorno de um fio — a promessa de
   que dá para escrever ali —, e o foco assume a moldura inteira. É o nome do
   arquivo no Finder, e é o gesto que a pessoa tenta antes de procurar botão.

   O «Salvar» só existe com o campo em uso. Um botão parado ao lado de um
   título que quase nunca muda é ruído no canto em que a pessoa procura quando
   está perdida — e `:focus-within` resolve isso sem uma linha de script. */
.titulo-editavel { display: flex; align-items: center; gap: 0.5rem;
                   min-width: 0; flex: 1 1 auto; }
.titulo-editavel h1 { margin: 0; min-width: 0; flex: 1 1 auto; }
.titulo-editavel input {
  width: 100%;
  font: inherit; font-size: 1.18rem; font-weight: 640;
  letter-spacing: -0.021em;
  color: var(--tinta);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--raio-p);
  padding: 0.15rem 0.35rem;
  margin: 0 -0.35rem;
  text-overflow: ellipsis;
}
.titulo-editavel input::placeholder { color: var(--suave); font-weight: 560; }
.titulo-editavel input:hover { border-color: var(--borda); }
.titulo-editavel input:focus {
  outline: none;
  background: var(--papel);
  border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 18%, transparent);
}
/* `display: none` e não `opacity: 0`: assim o botão fica fora da ordem do
   teclado enquanto não serve, e o Tab a partir do campo cai nele no instante
   em que passa a servir. Quem prefere o teclado nem precisa dele — Enter no
   campo envia o formulário, porque ele é o único botão de envio aqui. */
.titulo-editavel > .botao { display: none; }
.titulo-editavel:focus-within > .botao { display: inline-flex; }

h1 { font-size: 1.45rem; font-weight: 680; margin: 0; letter-spacing: -0.021em; }
h2 { font-size: 1.02rem; font-weight: 660; margin: 0 0 var(--e3); letter-spacing: -0.012em; }
h3 { font-size: 0.92rem; font-weight: 660; margin: 0 0 var(--e2); letter-spacing: -0.008em; }
p  { margin: 0 0 var(--e3); }
p:last-child { margin-bottom: 0; }

/* A CAIXA É UMA LISTA AGRUPADA, e não um cartão pousado.
   -------------------------------------------------------------------------
   Decisão do gestor em 05/09/2026. Era fundo branco com borda E sombra em
   toda tela — o que a Apple fazia até o Yosemite e abandonou. Hoje, dos
   Ajustes ao iOS, o padrão é o «grouped inset»: um bloco de canto arredondado,
   sem sombra, com fio de cabelo separando o que está dentro.

   A diferença não é gosto: sombra sugere ELEVAÇÃO, e elevação deveria
   significar «isto está por cima» — uma folha, um menu, um alerta. Quando
   toda caixa da tela tem sombra, a palavra perde o sentido e a folha de
   confirmação deixa de se destacar de tudo o mais. Guardar a sombra para o
   que realmente flutua é o que faz ela funcionar quando aparece. */
.caixa {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  padding: var(--e5);
}

.caixa + .caixa { margin-top: var(--e4); }

/* Título da caixa com uma ação à direita — "Pessoas  + pessoa". Sem isto,
   cada tela inventava o seu jeito de encaixar o botão ao lado do título. */
.cabecalho-caixa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e3);
  margin-bottom: var(--e3);
}
.cabecalho-caixa h2 { margin: 0; }

a { color: var(--ardosia-600); text-decoration-color: var(--ardosia-300); }
a:hover { color: var(--coral-600); }

/* DENTRO DE UMA TABELA, o nome do registro não vem sublinhado.
   -------------------------------------------------------------------------
   Sublinhado é para link em meio a texto corrido, onde ele precisa se
   distinguir da prosa ao redor. Numa lista, a coluna inteira é clicável e o
   sublinhado só serrilha a leitura — o Finder, o Mail e as listas dos
   Ajustes não sublinham nada. O nome fica na tinta normal, em negrito, e a
   cor de destaque entra ao passar o mouse. */
table td a, .lista-registros a.corpo {
  color: var(--tinta);
  text-decoration: none;
  font-weight: 600;
}
table td a:hover { color: var(--acento); text-decoration: none; }

code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.88em;
  background: var(--ardosia-50);
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  padding: 0.08rem 0.35rem;
}

.suave { color: var(--suave); }
.rodape-nota { color: var(--suave); font-size: 0.87rem; margin-bottom: 0; }

/* =============================================================================
   Tela de entrada
   -----------------------------------------------------------------------------
   Foto da própria 7TEC ao fundo (o comboio no talhão, com o logotipo desenhado
   na lavoura), coberta por um véu em ardósia escura. O véu não é enfeite: sem
   ele o texto perde contraste sobre o céu claro do pôr do sol, e o formulário
   fica difícil de ler — que é o oposto do que uma tela de entrada precisa ser.

   O logotipo mora numa faixa dentro do cartão, em tamanho de assinatura. Ele
   não é o assunto da tela; o assunto é entrar.
   ========================================================================== */

.entrada {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  padding: 2rem 1.25rem;
  background-color: var(--ardosia-900);
  /* Três camadas sobre a foto, e cada uma resolve um problema:
     a vinheta escurece as bordas e joga o olho para o centro;
     o véu diagonal garante contraste onde o pôr do sol clareia demais;
     a foto entra por último, já como textura e não como assunto. */
  background-image:
    radial-gradient(125% 95% at 50% 44%, rgba(10, 16, 20, 0) 30%, rgba(10, 16, 20, 0.62) 100%),
    linear-gradient(160deg, rgba(24, 34, 41, 0.88) 0%, rgba(30, 42, 50, 0.66) 45%, rgba(20, 29, 35, 0.90) 100%),
    url("/static/fundo-entrada.jpg?v=1");   /* suba este número ao trocar a foto */
  background-size: cover;
  background-position: center 62%;
  background-repeat: no-repeat;
}

.cartao-entrada {
  width: 100%;
  max-width: 23.5rem;
  background: var(--papel);
  border-radius: var(--raio-g);
  overflow: hidden;
  box-shadow: var(--sombra-entrada);
}

.cartao-entrada .faixa {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.05rem 1.5rem 1rem;
  /* Peça PINTADA com o logotipo branco por cima: cor sólida de marca, fixa
     nos dois temas — ver `--marca-ardosia`. */
  background: var(--marca-ardosia);
  border-bottom: 3px solid var(--coral-500);
}

.cartao-entrada .faixa .logo {
  height: 24px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.cartao-entrada .faixa .crm {
  height: 36px;
  width: auto;
  display: block;
}

.cartao-entrada .corpo { padding: 1.6rem 1.5rem 1.7rem; }

.cartao-entrada h1 { font-size: 1.22rem; margin-bottom: 0.3rem; }

.entrada .assinatura {
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
  margin: 0;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

@media (max-width: 420px) {
  .cartao-entrada .faixa { padding: 0.85rem 1.15rem; }
  .cartao-entrada .corpo { padding: 1.25rem 1.15rem 1.4rem; }
}

/* =============================================================================
   Formulário
   ========================================================================== */

label {
  display: block;
  margin: var(--e4) 0 var(--e1);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--tinta-media);
}

label:first-of-type { margin-top: 0; }

/* `url` E `tel` ESTAVAM DE FORA, e a falta era invisível até alguém usar um.
   Do gestor em 11/09/2026: «o local onde eu colo o link do YouTube está muito
   estreito e desagradável visualmente». Não era a caixa do vídeo: era que
   TODO campo de endereço deste CRM nascia sem estilo nenhum — altura de
   navegador cru, borda de navegador cru, ao lado de campos estilizados.
   Quatro campos no sistema inteiro, e nenhum deles parecia com os vizinhos.
   A conferência de interface passou a cobrar que todo tipo usado nas telas
   esteja nesta lista. */
input[type="text"], input[type="email"], input[type="password"],
input[type="date"], input[type="time"], input[type="number"],
input[type="search"], input[type="url"], input[type="tel"],
select, textarea {
  width: 100%;
  /* Altura única para campo, seletor e botão. É o que resolve o
     desalinhamento: antes cada um tinha o seu padding e nenhum terminava na
     mesma linha do vizinho. */
  min-height: var(--altura-controle);
  padding: 0.42rem 0.65rem;
  font: inherit;
  font-size: 0.94rem;
  color: var(--tinta);
  background: var(--papel);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  box-shadow: inset 0 1px 1px rgba(30, 42, 50, 0.03);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
textarea { min-height: 4.5rem; padding-top: 0.5rem; line-height: 1.5; resize: vertical; }

/* O seletor do sistema com a setinha desenhada por nós: o padrão do
   navegador muda de altura entre Chrome e Safari e desalinha a linha. */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2rem;
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='none' stroke='%2372838F' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M3 4.6 6 7.6l3-3'/></svg>");
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--ardosia-500);
  box-shadow: 0 0 0 3.5px rgba(77, 103, 122, 0.18);
}

/* A barra de ações do formulário. Uma só, no fim, sempre com o mesmo lugar e
   a mesma ordem: cancelar à esquerda, salvar à direita. Antes cada tela
   punha o salvar onde desse, e em tela comprida ele sumia. */
.acoes-formulario {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--e2);
  margin-top: var(--e4);
  padding: var(--e3) var(--e4);
  background: var(--vidro-alto);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  position: sticky;
  bottom: var(--e3);
  z-index: 5;
  scroll-margin-bottom: var(--e4);
}
.acoes-formulario .botao, .acoes-formulario button { margin: 0; }
/* Um respiro entre o último cartão e a barra, para ela não parecer parte
   dele. */
.caixa + .acoes-formulario { margin-top: var(--e4); }
/* A barra fica colada no rodapé enquanto se rola. O espaço abaixo do
   formulário é o que impede o último campo de ficar escondido atrás dela. */
form:has(.acoes-formulario) { padding-bottom: 0.5rem; }
/* DENTRO DE UMA LISTA, a barra não gruda. Cada pedido de aprovação tem a
   sua, e com `sticky` dez pedidos empilhavam dez barras fixas no rodapé,
   uma sobre a outra. Grudar só faz sentido quando há UMA por tela. */
.lista-registros .acoes-formulario,
.caixa .caixa .acoes-formulario { position: static; }

/* E DENTRO DE UM CARTÃO, TAMBÉM NÃO GRUDA — a mesma razão, encontrada de
   novo em 08/09/2026, na tela do lead.
   ---------------------------------------------------------------------------
   A barra grudenta é uma barra DA PÁGINA: ela existe para que «Salvar» esteja
   sempre ao alcance num formulário longo, e isso só faz sentido quando há UMA
   por tela. A tela do lead tem duas — «o que se sabe» e «cadastrar» —, cada
   uma dentro do seu cartão, e as duas se colavam no rodapé ao mesmo tempo: a
   de baixo passou a cobrir os campos de Razão social e CNPJ da de cima.
   Ninguém consegue preencher um campo que tem um botão desenhado por cima.

   Dentro do cartão a barra vira o rodapé DELE: sem sombra e sem vidro, que
   são o que dizia «estou flutuando acima do conteúdo» — e aqui ela não está. */
.caixa .acoes-formulario {
  position: static;
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* O textarea estava de fora e o texto de exemplo dele saía escuro, com cara de
   conteúdo já digitado. */
/* O `--ardosia-300` dava 2,31:1: some numa tela de notebook com o brilho
   baixo, e o texto de exemplo é o que explica o campo. O `placeholderText`
   do iOS fica por volta de 3,5:1; o `#7C8B97` daqui dá 3,50:1 sobre o papel —
   medido, e não os «4,0:1» que esta nota afirmava. O piso menor é de
   propósito, e `ops/testar_contraste.py` o cobra: com o mesmo contraste do
   texto de verdade, o campo pareceria já preenchido. */
/* A CAIXA E A BOLINHA NA COR DA SEÇÃO.
   Sem `accent-color` elas vêm no azul padrão do navegador — que é a única
   coisa azul numa tela de Oportunidades âmbar, e a que mais chama atenção
   por isso. Uma linha, e os controles nativos passam a pertencer à tela. */
input[type="checkbox"], input[type="radio"] {
  accent-color: var(--acento);
  width: 1.05rem; height: 1.05rem;
}

input::placeholder, textarea::placeholder { color: var(--exemplo); }

/* CONTROLE DESABILITADO PRECISA PARECER DESABILITADO.
   -------------------------------------------------------------------------
   Não havia UMA regra `:disabled` no arquivo inteiro, e há `disabled` em oito
   telas. Como `.botao, button` declara `background`, `color` e
   `cursor: pointer` de autor, o estilo do navegador para desabilitado era
   sobrescrito: **o botão «Salvar e testar» desabilitado ficava idêntico ao
   habilitado**. A pessoa clicava e não acontecia nada — e o defeito parecia
   ser do sistema, não do estado do botão.

   O macOS renderiza controle desabilitado por volta de 30% de opacidade, com
   o cursor normal. A classe `.desligado` já fazia isso à mão; faltava ligá-la
   ao estado nativo. */
:disabled,
.botao[aria-disabled="true"] {
  opacity: 0.34;
  cursor: default;
  pointer-events: none;
  box-shadow: none;
}
/* O campo desabilitado não desbota junto: ele continua sendo LIDO. O que
   muda é o fundo, que diz «isto não se edita agora». */
input:disabled, select:disabled, textarea:disabled {
  opacity: 1;
  background: var(--ardosia-50);
  color: var(--suave);
  cursor: default;
}

.botao, button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: var(--altura-controle);
  padding: 0.35rem 0.95rem;
  font: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.006em;
  color: #fff;
  background: var(--ardosia-600);
  border: 1px solid var(--ardosia-600);
  border-radius: var(--raio);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--transicao), border-color var(--transicao);
}

.botao:hover, button:hover { background: var(--ardosia-700); border-color: var(--ardosia-700); color: #fff; }
.botao:active, button:active { background: var(--ardosia-800); }

button.largo, .botao.largo { width: 100%; margin-top: 1.4rem; }

/* Vale para <a class="botao secundario"> E para <button class="secundario">.
   Enquanto a regra falava só de `.botao`, todo botão secundário de verdade —
   «+ outro número», «retirar», «Recusar» — saía escuro, com o mesmo peso do
   botão principal ao lado. Dois botões iguais na mesma linha é a pessoa
   clicando no errado. */
.botao.secundario, button.secundario {
  color: var(--tinta);
  background: var(--papel);
  border-color: var(--borda-forte);
}
.botao.secundario:hover, button.secundario:hover {
  background: var(--ardosia-50);
  color: var(--tinta);
  border-color: var(--borda-forte);
}

/* =============================================================================
   Sub-abas: o controle segmentado dentro de uma seção
   =============================================================================
   Uma pílula de fundo com o item ativo em relevo — é o desenho do
   NSSegmentedControl. O ativo é branco com sombra rasa, e não colorido: cor
   forte aqui competiria com o coral, que nesta ferramenta significa alarme.
   ========================================================================== */

.subabas {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  margin-bottom: var(--e5);
  background: var(--ardosia-100);
  border-radius: var(--raio-g);
  max-width: 100%;
  overflow-x: auto;
}

/* Vale para <a> (abas que trocam de página, como na Configuração) e para
   <button> (abas que trocam de painel na mesma página). O desenho é o mesmo
   de propósito: para quem usa, é o mesmo gesto e a mesma coisa.

   E esta é a ÚNICA declaração de `min-height` da sub-aba no arquivo. O valor
   vem de `--altura-subaba`, que vale 0 no computador e 2,75rem (44px) no
   celular — trocado em `:root`, dentro da média. Nada aqui disputa com nada:
   não há uma segunda regra para a cascata arbitrar, e por isso não há como
   esta perder de novo. */
.subabas a,
.subabas button {
  flex: 0 0 auto;
  min-height: var(--altura-subaba);
  /* Com 44px de altura mínima no celular, o rótulo tem de ficar no meio da
     caixa e não grudado no topo dela. No computador a altura mínima é zero e
     a caixa continua sendo o recuo em volta do texto: centralizar não muda
     nada ali. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.34rem 0.9rem;
  border: none;
  border-radius: var(--raio);
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 550;
  color: var(--tinta-media);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: none;
  transition: background var(--transicao), color var(--transicao);
}

.subabas a:hover,
.subabas button:hover {
  color: var(--tinta);
  background: var(--vidro-alto);
  border: none;
}

.subabas a.ativa,
.subabas button.ativa,
.subabas button.ativa:hover {
  background: var(--papel);
  color: var(--tinta);
  box-shadow: var(--sombra-relevo);
}
.subabas a.ativa:hover { background: var(--papel); }

/* TERCEIRO NÍVEL — as seções dentro de uma sub-aba.
   Configuração → Copiloto → Método / Avaliação / Conhecimento / Motor.

   Foi preciso porque dois controles segmentados iguais, um ao lado do outro,
   viram uma fileira só: «Chaves | Planos | Copiloto | Método | Avaliação»
   parecia uma lista de cinco irmãos, e quem olhava perdia a informação de
   qual deles dizia onde estava. `display: inline-flex` no segundo nível é
   justamente o que os encosta na mesma linha.

   A saída de 05/09 foi mudar a FORMA do terceiro nível (aba sublinhada).
   Desfeita em 23/09/2026: com as seções no trilho, o segmentado interno é o
   único na tela do computador, e três desenhos para a mesma ação era o que
   fazia o CRM deixar de parecer um aplicativo do Mac. O que impede as duas
   fileiras de se encostarem agora é a LINHA PRÓPRIA — `display: flex` com
   `width: fit-content`, e não `inline-flex`. */
/* AS ABAS DENTRO DA TELA SÃO O MESMO CONTROLE SEGMENTADO — 23/09/2026.
   Havia aqui um segundo desenho, de abas sublinhadas («Motor | Chaves |
   Conhecimento»), e o CRM passou a ter três jeitos de trocar de parte: a
   lista do trilho, a pílula segmentada e o sublinhado da web. No celular os
   dois últimos apareciam empilhados. O macOS tem um só — o segmentado, como
   no topo de um painel de Ajustes — e é o que o kit visual manda. */
.subabas.internas {
  display: flex; width: fit-content; max-width: 100%;
  margin-bottom: var(--e5);
}

/* A contagem ao lado do rótulo — «Oportunidades 3». Diz o que tem dentro sem
   obrigar a abrir, que é o preço que uma aba cobra por esconder. */
.subabas .quantos {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0 0.32rem;
  border-radius: 999px;
  background: rgba(30, 42, 50, 0.1);
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--tinta-media);
}
.subabas .ativa .quantos { background: var(--ardosia-100); }

/* =============================================================================
   Avisos
   ========================================================================== */

/* BLOCO, e não flex.
   Enquanto isto foi `display: flex`, cada <b> e cada <a> dentro de um aviso
   virava um item de flex e ganhava a sua própria coluna — o texto saía
   fatiado em pedaços verticais, ilegível. Eu tinha remendado o sintoma com
   uma classe `.empilhado` em vez de consertar a causa, e o defeito voltou na
   primeira tela nova que escreveu um aviso com negrito dentro. */
.aviso {
  display: block;
  padding: 0.7rem 0.85rem;
  border: 1px solid;
  border-radius: var(--raio-p);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 1.1rem;
}
.aviso > p { margin: 0 0 0.5rem; }
.aviso > p:last-child { margin-bottom: 0; }

.aviso.bom     { background: var(--ok-fundo);      border-color: var(--ok-borda);      color: var(--ok-tinta); }
.aviso.atencao { background: var(--atencao-fundo); border-color: var(--atencao-borda); color: var(--atencao-tinta); }
.aviso.ruim    { background: var(--erro-fundo);    border-color: var(--erro-borda);    color: var(--erro-tinta); }

/* =============================================================================
   Etiquetas — etapas do funil, tipos, situações
   ========================================================================== */

.etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  background: var(--ardosia-100);
  /* `--tinta-media` e não `--ardosia-700`: a escada da marca é escura nos
     DOIS temas, e o fundo desta etiqueta vira com o tema. Texto escuro sobre
     fundo escuro é o que fazia a etapa da oportunidade sumir. */
  color: var(--tinta-media);
  border: 1px solid var(--ardosia-200);
  white-space: nowrap;
}

/* A coral segue a mesma regra dos estados: a família de cor é definida na
   paleta e vira junto com o tema, em vez de ficar clara nos dois. */
.etiqueta.acento  { background: var(--erro-fundo); color: var(--erro-tinta);
                    border-color: var(--erro-borda); }
/* «ruim» EXISTIA NO HTML E NÃO EXISTIA AQUI, e o resultado era o pior tipo de
   silêncio: o «falhou 3×» do painel do Avaliador — a única linha da tela que
   pede ação de alguém — saía com a roupa da etiqueta comum, cinza, do mesmo
   tom de «não avaliável». Classe que não existe no CSS não dá erro em lugar
   nenhum; ela só apaga a diferença que alguém quis marcar. */
.etiqueta.ruim    { background: var(--erro-fundo); color: var(--erro-tinta);
                    border-color: var(--erro-borda); }
.etiqueta.ok      { background: var(--ok-fundo);  color: var(--ok-tinta);  border-color: var(--ok-borda); }
.etiqueta.atencao { background: var(--atencao-fundo); color: var(--atencao-tinta); border-color: var(--atencao-borda); }
/* A neutra usava o fundo da PÁGINA, e no tema escuro isso é quase-preto
   dentro de um cartão que também é escuro: a etiqueta desaparecia. O
   `--ardosia-100` é a superfície de um degrau acima do papel nos dois temas,
   que é exatamente o que uma etiqueta discreta quer ser. */
.etiqueta.neutra  { background: var(--ardosia-100); color: var(--tinta-media);
                    border-color: var(--borda); }
.etiqueta.info    { background: color-mix(in srgb, var(--turquesa) 14%, var(--papel));
                    color: var(--turquesa-escuro);
                    border-color: color-mix(in srgb, var(--turquesa) 34%, var(--papel)); }

/* =============================================================================
   Números em destaque — a lista do dia, o indicador de vencidos
   ========================================================================== */

.numeros { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.85rem; }

.numero {
  background: var(--papel);
  border: 1px solid var(--borda);
  border-left: 3px solid var(--ardosia-400);
  border-radius: var(--raio);
  padding: 0.9rem 1.1rem;
  box-shadow: var(--sombra);
}

.numero.destaque { border-left-color: var(--coral-500); }

/* 0,72rem — 11,5px — e não 0,78. MAIÚSCULA COM ESPAÇAMENTO só funciona
   pequena: a Apple a usa em rótulo de seção, sempre abaixo de 12px, porque
   acima disso ela para de ser etiqueta e vira grito. «PRECISAM DE CONTATO
   HOJE» a 12,5px ao lado de um número grande competia com o número — e quem
   olha o painel está olhando o número. */
.numero .rotulo {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: var(--suave); font-weight: 600;
}
.numero .valor { font-size: 1.7rem; font-weight: 650; letter-spacing: -0.02em; line-height: 1.2; }
.numero .nota  { font-size: 0.82rem; color: var(--suave); }

/* =============================================================================
   Tabelas — lista de empresas, lista de oportunidades
   ========================================================================== */

.tabela-rolagem {
  overflow-x: auto;
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  background: var(--papel);
  box-shadow: var(--sombra);
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--papel);
  font-size: 0.9rem;
}

thead th {
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.055em;
  color: var(--suave);
  font-weight: 660;
  padding: 0.6rem 0.9rem;
  background: var(--ardosia-50);
  border-bottom: 1px solid var(--borda);
  white-space: nowrap;
}
thead th:first-child { border-top-left-radius: var(--raio-g); }
thead th:last-child  { border-top-right-radius: var(--raio-g); }

tbody td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--borda); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--ardosia-50); }

td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* =============================================================================
   Timeline da ficha da empresa
   ========================================================================== */

.linha-tempo { list-style: none; margin: 0; padding: 0 0 0 1.15rem; border-left: 2px solid var(--borda); }

.linha-tempo li { position: relative; padding: 0 0 1.25rem 0.35rem; }

.linha-tempo li::before {
  content: "";
  position: absolute;
  left: -1.63rem; top: 0.42rem;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ardosia-300);
  border: 2px solid var(--papel);
  box-shadow: 0 0 0 1px var(--borda);
}

.linha-tempo li.marco::before { background: var(--coral-500); }

.linha-tempo .quando { font-size: 0.79rem; color: var(--suave); font-variant-numeric: tabular-nums; }

/* =============================================================================
   Vazio
   ========================================================================== */

.vazio {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--suave);
  background: var(--papel);
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio);
}

/* =============================================================================
   Telas pequenas
   ========================================================================== */

@media (max-width: 640px) {
  main { padding: 1.25rem 1rem 3rem; }
  .caixa { padding: 1.15rem; }
}

/* =============================================================================
   Navegação por abas
   ========================================================================== */


/* -----------------------------------------------------------------------------
   O botão da conta

   Era «Ana Maria Souza · gestor   sair» em texto corrido, e com oito abas
   passou a ser empurrado por cima de «Configuração». Encolher a fonte já tinha
   sido feito duas vezes; a terceira seria ilegível.

   Agora são 32px fixos com as iniciais, e o texto todo mora na gaveta, que
   tem a largura que precisar. A barra volta a ter espaço para crescer.
   -------------------------------------------------------------------------- */
.menu-conta { position: relative; }
.menu-conta > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  border-radius: 999px;
}
.menu-conta > summary::-webkit-details-marker { display: none; }
.menu-conta .iniciais {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 999px;
  /* Iniciais brancas sobre o círculo: cor sólida de marca, fixa nos dois
     temas — ver `--marca-turquesa`. */
  background: var(--marca-turquesa);
  color: #fff;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.menu-conta > summary:hover .iniciais { filter: brightness(1.12); }
/* O foco precisa aparecer no CÍRCULO, não no summary invisível: quem navega
   por teclado tem que ver onde está. */
.menu-conta > summary:focus-visible { outline: none; }
.menu-conta > summary:focus-visible .iniciais {
  box-shadow: 0 0 0 2px var(--ardosia-600), 0 0 0 4px #fff;
}

.gaveta-conta {
  position: absolute;
  top: calc(100% + 0.7rem);
  right: 0;
  min-width: 220px;
  padding: 0.35rem;
  background: var(--papel);
  color: var(--tinta);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra-alta);
  z-index: 40;
}
.gaveta-conta .conta-cabeca {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.5rem 0.6rem 0.6rem;
  border-bottom: 1px solid var(--borda);
  margin-bottom: 0.3rem;
}
.gaveta-conta .conta-cabeca b { font-size: 0.92rem; }
.gaveta-conta .conta-cabeca .suave { font-size: 0.8rem; }
/* O nome da organização é o dado mais perigoso de errar num CRM que atende
   mais de uma empresa: destacado, e nunca cortado no meio. */
/* O NOME DA ORGANIZAÇÃO — o dado mais perigoso de errar num CRM — estava em
   `--turquesa` puro: 1,60:1 sobre branco, praticamente invisível. `--turquesa`
   é valor de FUNDO (é assim que ele é usado em toda parte, a 9-14% de
   mistura); como tinta ele precisa ser o escuro. */
.gaveta-conta .conta-org { color: var(--turquesa-escuro); font-weight: 600; }

/* Os destinos da gaveta, um por linha. Estavam escritos como `.topo .gaveta-
   conta a` e saíram junto com o cabeçalho quando o trilho entrou — sem eles
   os links viravam texto corrido, «Configuração Sair» na mesma linha, e o
   segundo era cortado pela borda da gaveta. */
.gaveta-conta a {
  display: block;
  padding: 0.45rem 0.6rem;
  border-radius: calc(var(--raio) - 2px);
  color: var(--tinta);
  text-decoration: none;
  font-size: 0.88rem;
}
.gaveta-conta a:hover { background: var(--ardosia-50); color: var(--tinta); }
.gaveta-conta a.sair { color: var(--coral-600, #b3402c); }


.trilha { font-size: 0.85rem; color: var(--suave); margin-bottom: 0.7rem; }
.trilha span { margin: 0 0.35rem; }

/* =============================================================================
   Barra de filtros
   ========================================================================== */

.filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem;
  background: var(--papel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--sombra);
  margin-bottom: 1rem;
}

.filtros .busca { flex: 1 1 20rem; position: relative; }
.filtros input[type="search"], .filtros select { width: 100%; }

/* O CAMPO DE BUSCA do macOS: cantos arredondados de verdade e a lupa dentro.
   -------------------------------------------------------------------------
   Era um retângulo igual a qualquer outro campo de texto — e busca não é um
   campo de texto qualquer: é o controle que a pessoa procura de relance, e
   ela procura pela lupa. O ícone entra pelo CSS, e não por mais um `<svg>`
   em cada template, para não depender de ninguém lembrar de pôr. */
.filtros .busca::before {
  content: "";
  position: absolute;
  left: 0.6rem; top: 50%;
  width: 14px; height: 14px;
  margin-top: -7px;
  background: var(--suave);
  -webkit-mask: var(--lupa) center / contain no-repeat;
  mask: var(--lupa) center / contain no-repeat;
  pointer-events: none;
}
.filtros input[type="search"] {
  padding-left: 2rem;
  border-radius: 999px;
}

/* MENU SUSPENSO, e não caixa de texto. O `select` nativo vem com a seta do
   sistema operacional em cada plataforma; padronizar aqui é o que faz os
   três filtros lado a lado parecerem irmãos. */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 1.9rem;
  background-image: var(--chevron);
  background-repeat: no-repeat;
  background-position: right 0.65rem center;
  background-size: 11px;
}
.filtros select { flex: 0 1 12rem; width: auto; }
.filtros button, .filtros .botao { margin-top: 0; flex: 0 0 auto; }

.caixa-marcar {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: 0;
  font-weight: 500;
  color: var(--tinta-media);
  /* `nowrap` estava fazendo a linha inteira escapar do cartão quando o texto
     era longo — foi assim que o "Usa o ÈPTÁ no dia a dia" saiu para fora da
     ficha. Quem não quebra é só a caixinha; o texto quebra. */
  white-space: normal;
  line-height: 1.4;
}
.caixa-marcar input {
  width: auto;
  min-height: 0;
  flex: 0 0 auto;
  margin-top: 0.18rem;
  box-shadow: none;
}
/* Dentro do grid do formulário a caixinha não é um campo: não ganha altura
   de controle nem o alinhamento pelo rodapé. */
.formulario > label.caixa-marcar { align-self: center; }

.paginacao {
  display: flex; align-items: center; justify-content: center;
  gap: 1rem; margin-top: 1rem;
}

/* =============================================================================
   Ficha da empresa: duas colunas
   ========================================================================== */

.colunas { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1rem; align-items: start; }
.coluna-principal > .caixa + .caixa,
.coluna-lateral   > .caixa + .caixa { margin-top: 1rem; }

@media (max-width: 900px) {
  .colunas { grid-template-columns: minmax(0, 1fr); }
}

/* A lista de dados da coluna da direita — o "inspetor" da ficha.

   O desalinhamento do print vinha de uma linha só: `dd { white-space: nowrap }`.
   O valor se recusava a quebrar, tomava a largura que precisasse, e espremia
   o rótulo até ele quebrar no meio ("Pontos / contratados"). Agora quem quebra
   é o valor, que é o texto variável; o rótulo fica inteiro.

   Um fio entre as linhas, como no inspetor do Finder: separa sem pesar. */
dl.dados {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: baseline;
  column-gap: 0;
  margin: 0;
  font-size: 0.9rem;
}
dl.dados dt, dl.dados dd {
  padding: 0.42rem 0;
  border-top: 1px solid var(--borda);
  line-height: 1.4;
}
dl.dados dt:first-of-type,
dl.dados dt:first-of-type + dd { border-top: none; }
dl.dados dt { color: var(--suave); padding-right: var(--e4); }
dl.dados dd {
  margin: 0;
  text-align: right;
  font-weight: 550;
  color: var(--tinta);
  overflow-wrap: anywhere;
}

/* Empilhada: rótulo em cima, valor embaixo, alinhados à esquerda. Para
   textos longos — endereço, política, justificativa. */
dl.dados.empilhada { display: block; }
dl.dados.empilhada dt {
  border-top: 1px solid var(--borda);
  padding: 0.55rem 0 0.05rem;
  font-size: 0.8rem;
}
dl.dados.empilhada dt:first-of-type { border-top: none; padding-top: 0; }
dl.dados.empilhada dd {
  border-top: none;
  padding: 0 0 0.15rem;
  text-align: left;
}

ul.pessoas { list-style: none; margin: 0; padding: 0; }
ul.pessoas li + li { margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--borda); }

/* Caixa de texto para editar prompt. Fonte de largura fixa porque o que se
   edita ali é texto alinhado à mão — listas com recuo, blocos separados por
   linha em branco, um exemplo de JSON. Em fonte proporcional o alinhamento
   desaparece e a pessoa passa a editar às cegas o arquivo mais importante do
   sistema. Menor e com entrelinha curta: cabe mais texto na tela sem rolar. */
/* O código de pareamento. Grande, espaçado e selecionável de propósito:
   ele vai ser lido numa tela e digitado noutra máquina, e é aí que se troca
   um caractere. O alfabeto já exclui I, O, zero e um (ver copiloto_motor);
   o tamanho e o espaçamento cuidam do resto. */
/* A lista numerada de passos de instalação. Existe como classe própria
   porque `ol` solto herda o recuo do navegador e cola no texto acima. */
ol.passos { margin: 0.6rem 0 1.1rem; padding-left: 1.4rem; line-height: 1.7; }
ol.passos li { margin-bottom: 0.45rem; }

/* A TRANSCRIÇÃO DA REUNIÃO
   Duas vozes e as dicas do copiloto no meio, na ordem em que aconteceram.
   O cliente à esquerda e o vendedor recuado: a assimetria é o que deixa
   percorrer a conversa sem ler o rótulo de cada linha. A dica tem a cor de
   acento e ocupa a largura toda — ela não é uma terceira voz da sala, é um
   comentário sobre a conversa. */
ol.transcricao { list-style: none; margin: 0; padding: 0; }

ol.transcricao .fala {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: 0.9rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--borda);
  align-items: baseline;
}

ol.transcricao .fala .marcador { color: var(--suave); font-size: 0.84rem; }
ol.transcricao .fala .marcador b { display: block; color: var(--tinta-media); }
ol.transcricao .fala.vendedor .dito { color: var(--tinta-media); }
ol.transcricao .fala.cliente .dito { color: var(--tinta); font-weight: 500; }

ol.transcricao .dica {
  margin: 0.5rem 0 0.7rem 10.4rem;
  padding: 0.6rem 0.9rem;
  background: color-mix(in srgb, var(--turquesa) 14%, var(--papel));
  border-left: 3px solid var(--turquesa-escuro);
  border-radius: var(--raio-p);
  font-size: 0.92rem;
}

/* --- Corrigir o que a máquina ouviu errado ---------------------------------

   «Corrigir» fica SEMPRE visível, só que apagado — numa transcrição de
   duzentas linhas, duzentos botões em destaque viram um paredão cinza e a
   conversa deixa de ser legível. Apagado ele não disputa a leitura e continua
   existindo para quem procura.

   O que ele não pode é aparecer só no hover. Esta é a tela onde alguém lê a
   própria reunião e vê uma frase que não disse; se o caminho de consertar
   depende de passar o mouse, em telefone e tablet ele simplesmente não
   existe, e a saída vira reclamar da nota depois.                          */
ol.transcricao .fala .acoes-fala { display: block; margin-top: 0.2rem; }
ol.transcricao .fala .acoes-fala > * {
  opacity: 0.55; transition: opacity var(--transicao);
}
ol.transcricao .fala:hover .acoes-fala > *,
ol.transcricao .fala:focus-within .acoes-fala > *,
ol.transcricao .fala .acoes-fala details[open] { opacity: 1; }

ol.transcricao .corrigir > summary,
ol.transcricao .original > summary {
  cursor: pointer;
  list-style: none;
  display: inline-block;
  font-size: 0.8rem;
  color: var(--turquesa-escuro);
}
ol.transcricao .corrigir > summary::-webkit-details-marker,
ol.transcricao .original > summary::-webkit-details-marker { display: none; }

/* Aberto, o «Corrigir» vira o título da gaveta — com a seta girada, para
   dizer que ele também é o jeito de fechar. Sem a seta ele parece um rótulo
   repetido dentro da própria caixa que abriu. */
ol.transcricao .corrigir > summary::before {
  content: "›"; display: inline-block; margin-right: 0.35rem;
  transition: transform var(--transicao);
}
ol.transcricao .corrigir[open] > summary::before { transform: rotate(90deg); }

ol.transcricao .corrigir[open] {
  display: block;
  margin: 0.5rem 0 0.7rem;
  padding: 0.7rem 0.9rem;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
}
ol.transcricao .corrigir[open] > summary { margin-bottom: 0.5rem; }
ol.transcricao .corrigir label { display: block; font-size: 0.84rem; }
/* A caixa de edição é campo de texto, não fala: sem o peso que a transcrição
   dá à voz do cliente, senão parece que já está em destaque por algum motivo. */
ol.transcricao .corrigir textarea { width: 100%; font-weight: 400; }
ol.transcricao .corrigir .gravar { margin-top: 0.5rem; }

/* Remover fica embaixo, separado por uma linha, e nunca ao lado de «gravar
   correção»: são o mesmo gesto de mão para consequências diferentes. */
ol.transcricao .remover-fala {
  display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;
  margin-top: 0.7rem; padding-top: 0.7rem;
  border-top: 1px solid var(--borda);
}
ol.transcricao .remover-fala input[type="text"] { flex: 1 1 14rem; margin: 0; }

/* A fala removida continua na tela, riscada. Sumir de vez tornaria impossível
   desfazer o clique errado, que é o mais comum de todos. */
ol.transcricao .fala.removida .texto {
  text-decoration: line-through;
  color: var(--suave);
}

ol.transcricao .original { display: inline; }
ol.transcricao .original .antes {
  margin-top: 0.35rem;
  padding: 0.5rem 0.75rem;
  background: var(--ardosia-50);
  border-left: 2px solid var(--borda-forte);
  border-radius: 0 var(--raio-p) var(--raio-p) 0;
  font-size: 0.88rem;
}

@media (max-width: 720px) {
  ol.transcricao .fala { grid-template-columns: 1fr; gap: 0.15rem; }
  ol.transcricao .fala .marcador b { display: inline; }
  ol.transcricao .dica { margin-left: 0; }
}

.codigo-pareamento {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-align: center;
  margin: 0.4rem 0 0.8rem;
  padding: 0.9rem 0.6rem;
  background: var(--fundo);
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio-p);
  user-select: all;
}

textarea.monoespacada {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.82rem;
  line-height: 1.45;
  tab-size: 2;
}

.mono { white-space: nowrap; font-variant-numeric: tabular-nums; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.88em; }

/* Vermelho só onde é alarme: a ação que venceu e a conta que parou. */
.atrasado { color: var(--coral-700); font-weight: 600; }
tbody tr.linha-alerta { box-shadow: inset 3px 0 0 var(--coral-500); }

.proximo-passo {
  margin-top: 0.35rem;
  padding: 0.4rem 0.6rem;
  background: var(--ardosia-50);
  border-left: 2px solid var(--turquesa-escuro);
  border-radius: 0 var(--raio-p) var(--raio-p) 0;
  font-size: 0.88rem;
}

/* Cartão de número que também é link */
a.numero { display: block; text-decoration: none; color: inherit; transition: box-shadow var(--transicao); }
/* Nenhuma lista do macOS LEVANTA a linha no hover — ela ganha preenchimento.
   E `--sombra-alta` é a sombra reservada à folha modal: usá-la aqui gastava
   justamente o sinal que faz a folha se destacar de tudo o mais. */
a.numero:hover { background: var(--ardosia-50); color: inherit; }
/* O cartão que está filtrando a lista (Leads, 01/10/2026). */
a.numero[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--turquesa-escuro); }

/* =============================================================================
   Prospecção: a fila e a tela de trabalho

   Duas decisões de forma que vêm de erro de operação, não de gosto:

   - Os botões de resultado são todos do mesmo tamanho, em duas fileiras de
     quatro. Antes o seletor de data ficava espremido numa célula e desalinhava
     a grade inteira, e fileira torta faz parecer que uns botões valem mais
     que outros.
   - O aviso de origem do telefone é grande e fica colado no número. Ele existe
     porque discar um número de confiança baixa sem saber em nome de quem ele
     foi achado é começar a ligação perdido.
   ========================================================================== */

.navegacao-fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap;
}
.navegacao-fila .passos { display: flex; gap: 0.5rem; }
.botao.desligado {
  opacity: 0.45; pointer-events: none;
  background: var(--papel); color: var(--suave); border-color: var(--borda);
}

/* --- os telefones ---------------------------------------------------------- */

ul.telefones { list-style: none; margin: 0 0 1.25rem; padding: 0; }
ul.telefones li + li { margin-top: 0.55rem; }

label.telefone {
  display: flex; gap: 0.7rem; align-items: flex-start;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--papel);
  cursor: pointer;
}
label.telefone:hover { border-color: var(--borda-forte); background: var(--ardosia-50); }
label.telefone:has(input:checked) {
  border-color: var(--turquesa-escuro);
  box-shadow: inset 3px 0 0 var(--turquesa-escuro);
  background: color-mix(in srgb, var(--turquesa) 8%, var(--papel));
}
label.telefone input { width: auto; margin-top: 0.25rem; flex: none; }
label.telefone .corpo { display: block; min-width: 0; flex: 1; }
label.telefone .linha-numero {
  display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
}
label.telefone .linha-numero b { font-size: 1.02rem; }
label.telefone .fonte {
  display: block; font-size: 0.79rem; margin-top: 0.2rem;
  overflow-wrap: anywhere;
}

.aviso-origem {
  display: block; margin-top: 0.55rem;
  padding: 0.6rem 0.75rem;
  background: var(--atencao-fundo);
  border: 1px solid var(--atencao-borda);
  border-radius: var(--raio-p);
  font-size: 0.86rem; color: var(--atencao-tinta);
  line-height: 1.45;
}
.aviso-origem em { display: block; margin-top: 0.3rem; }

/* --- os botões de resultado ------------------------------------------------ */

.rotulo-campo {
  display: block; font-size: 0.85rem; color: var(--suave); margin-bottom: 0.3rem;
}

/* CAMPO OBRIGATÓRIO, dito ANTES de enviar.
   -------------------------------------------------------------------------
   Havia 40 campos com `required` no aplicativo e nenhum indicador: a pessoa
   preenchia o formulário inteiro e só descobria a obrigatoriedade quando o
   navegador travava o envio. Descobrir a regra ao esbarrar nela é o oposto
   do que o macOS faz — lá o formulário diz o que espera antes de recusar.

   O asterisco fica no RÓTULO, e não no campo: é o rótulo que a pessoa lê ao
   varrer a tela decidindo o que preencher. E é `aria-hidden`, porque o
   leitor de tela já anuncia «obrigatório» pelo próprio `required` — sem
   isso, ele leria «asterisco» duas vezes. */
label:has(:required) > .rotulo-campo::after,
label:has(:required) > span:first-child::after {
  content: " *";
  color: var(--erro-tinta);
  font-weight: 700;
}
/* O `has` não alcança um `required` posto por JavaScript depois; para esses
   casos a tela marca o rótulo à mão com esta classe. */
.rotulo-campo.obrigatorio::after {
  content: " *";
  color: var(--erro-tinta);
  font-weight: 700;
}

.botoes-resultado {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
  margin-top: 1rem;
}
.botoes-resultado > button,
.botoes-resultado > details > summary { width: 100%; }

.botoes-resultado details { position: relative; }
.botoes-resultado summary { list-style: none; cursor: pointer; }
.botoes-resultado summary::-webkit-details-marker { display: none; }
.botoes-resultado details[open] > summary {
  background: var(--ardosia-700); color: #fff; border-color: var(--ardosia-700);
}

/* O painel flutua acima do resto: numa célula da grade ele espremeria os
   outros botões e desalinharia a fileira toda. */
.painel-data {
  position: absolute; z-index: 20; top: calc(100% + 0.4rem); left: 0;
  min-width: 17rem;
  padding: 0.9rem;
  background: var(--papel);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio);
  box-shadow: var(--sombra-alta);
  text-align: left;
}
.painel-data label { display: block; font-size: 0.85rem; color: var(--suave); }
.painel-data input { margin-bottom: 0.5rem; }
.painel-data button { width: 100%; }

@media (max-width: 720px) {
  .botoes-resultado { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .painel-data { left: auto; right: 0; }
}

/* --- detalhes recolhidos --------------------------------------------------- */

details.descartados { margin-top: 1rem; }
details.descartados summary { cursor: pointer; font-size: 0.86rem; }
details.descartados ul { margin: 0.5rem 0 0; padding-left: 1.2rem; font-size: 0.86rem; }

.coluna-lateral details > summary { list-style: none; cursor: pointer; }
.coluna-lateral details > summary::-webkit-details-marker { display: none; }

dl.dados dd.quebra { text-align: left; }

/* Na coluna lateral, rótulo e valor empilhados. Em 20rem de largura, o
   formato de duas colunas espreme o rótulo ("Sócio administrador" quebra em
   duas linhas) e o valor comprido — um endereço da ANP — escapa do cartão. */
dl.dados.empilhada dd {
  text-align: left; white-space: normal; overflow-wrap: anywhere;
}

/* --- formulários de cadastro ------------------------------------------------ */

.formulario {
  display: grid;
  /* Colunas que se acomodam sozinhas: em tela larga cabem duas, em tela
     estreita vira uma, sem media query e sem campo espremido. */
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--e3) var(--e4);
  align-items: end;
}
.formulario > label { display: block; min-width: 0; }
/* `largura-total` vale para qualquer filho direto, não só para <label>.
   As listas de telefone e e-mail da empresa são <div>, e enquanto esta
   regra falava só de label elas ficavam espremidas em meia coluna, com a
   etiqueta «fixo» caindo para a linha de baixo. */
.formulario > * { min-width: 0; }
.formulario > .largura-total { grid-column: 1 / -1; }
/* O QUE NÃO É CAMPO OCUPA A LINHA INTEIRA — 23/09/2026.
   A grade do formulário é feita para rótulos com campo. Tabela, parágrafo,
   aviso e fileira de botões caíam cada um numa coluna, lado a lado, e a
   tabela de horários do Atendente — que precisa de mais de 600px — era
   desenhada por cima do parágrafo e do botão da coluna vizinha (medido no ar
   a 1440 e a 1000px). Sem esta regra, cada tela nova com uma tabela dentro
   de um formulário repetiria o defeito. */
.formulario > table, .formulario > .tabela-rolagem, .formulario > p,
.formulario > .aviso, .formulario > .acoes, .formulario > h2,
.formulario > h3, .formulario > h4, .formulario > ul, .formulario > ol,
.formulario > fieldset, .formulario > details, .formulario > hr,
.formulario > pre, .formulario > .grade-escolhas { grid-column: 1 / -1; }
.formulario input, .formulario select, .formulario textarea { width: 100%; }
/* Caixinha e bolinha não são campos de texto: não esticam para a largura
   toda. Sem isto a caixinha ficava sozinha no meio da linha, com o texto
   escapando para fora do cartão. */
.formulario input[type="checkbox"],
.formulario input[type="radio"] { width: auto; }

fieldset.pessoa-nova {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 0.9rem 1rem 1.1rem;
  margin: 0 0 0.9rem;
}
fieldset.pessoa-nova legend { padding: 0 0.4rem; font-size: 0.85rem; }

@media (max-width: 720px) {
  .formulario { grid-template-columns: minmax(0, 1fr); }
}

/* --- grade de escolhas (caixinhas em fileira alinhada) ---------------------- */
/*
   NASCEU EM 22/09/2026, do gestor: «organize as caixas onde escolho o tipo de
   reunião para um alinhamento harmonioso, pois está feio».
   Estavam num `.filtros` com `flex-wrap`, que é a classe da BARRA DE FILTROS —
   feita para uma fileira de campos de larguras diferentes, não para oito
   opções irmãs. O resultado é o que ele viu: as caixinhas paravam onde o texto
   de cada rótulo acabava, então as colunas não existiam, e a segunda fileira
   começava torta em relação à primeira.
   A grade resolve pelo que as opções SÃO: iguais entre si. Colunas de mesma
   largura, que se acomodam sozinhas ao tamanho da tela — sem media query e
   sem uma opção sobrando sozinha no fim da fileira.
*/
.grade-escolhas {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
  gap: var(--e2) var(--e3);
  margin: var(--e2) 0 var(--e3);
}
.grade-escolhas > label {
  display: flex;
  align-items: center;
  gap: var(--e2);
  min-width: 0;
  /* MARGEM ZERO, E ESTA LINHA É O CONSERTO INTEIRO.
     Medido em 22/09/2026 no navegador: a folha dá a todo `label` de
     formulário `margin: 1rem 0 0.25rem` — que é o respiro certo entre um
     campo e o próximo, empilhados. Numa GRADE ela vira outra coisa: a
     primeira opção não leva a margem de cima (regra de `:first-child`) e
     por isso esticava para os 59px da fileira, enquanto as vizinhas ficavam
     com 39px e desciam 16px. Duas alturas na mesma fileira, e a primeira
     caixa desalinhada das outras duas — exatamente o que o gestor viu. */
  margin: 0;
  /* O alvo do clique é a caixa inteira, e não só os 16px da caixinha: numa
     grade de oito opções isso é a diferença entre marcar e errar. */
  padding: var(--e2) var(--e3);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--papel);
  font-weight: normal;
  cursor: pointer;
}
.grade-escolhas > label:has(input:checked) {
  /* A mesma mistura das etiquetas de informação desta folha, e não uma cor
     nova: marcado é destaque leve, e a borda cheia de turquesa sobre papel
     branco gritaria mais do que a informação vale. */
  border-color: color-mix(in srgb, var(--turquesa) 34%, var(--papel));
  background: color-mix(in srgb, var(--turquesa) 8%, var(--papel));
}
/* A opção já tomada por outro modelo continua LEGÍVEL, e só isso: apagá-la
   esconderia justamente o nome de quem a tomou, que é o que diz o que fazer. */
.grade-escolhas > label:has(input:disabled) {
  background: var(--fundo);
  cursor: default;
}
.grade-escolhas input[type="checkbox"] { width: auto; margin: 0; flex: none; }
.grade-escolhas .dono {
  margin-left: auto;
  font-size: 0.82rem;
  color: var(--suave);
  white-space: nowrap;
}

/* --- cartões de credencial -------------------------------------------------- */

.cabecalho-credencial {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
}
.acoes-credencial { display: flex; gap: 0.5rem; flex-shrink: 0; }
.acoes-credencial form { margin: 0; }

.acoes-cabecalho { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

.botao.compacto { padding: 0.3rem 0.7rem; font-size: 0.85rem; }

/* =============================================================================
   Texto que não cabe

   Endereço de site e e-mail não têm espaço em branco onde quebrar, então o
   navegador prefere estourar a caixa a partir a palavra. Num cartão de 20rem
   da coluna lateral isso vaza por cima do resto da tela — foi assim que o link
   de um site da lista da ANP, com 247 caracteres, apareceu por fora do quadro.

   `anywhere` para endereço, que pode quebrar em qualquer ponto sem prejuízo.
   `break-word` para texto corrido: ele só parte a palavra quando ela sozinha
   não cabe, o que preserva a leitura das frases.
   ========================================================================== */

.caixa a[href^="http"],
.caixa a[href^="mailto"],
ul.pessoas li,
ul.telefones .fonte,
details.descartados li,
dl.dados dd.quebra,
dl.dados.empilhada dd { overflow-wrap: anywhere; }
/* `.mono` DENTRO DE UMA CÉLULA OU DE UM INSPETOR pode quebrar (06/10/2026).
   `.mono` nasceu `nowrap` para CNPJ e valor em tabela; mas um CNPJ num
   inspetor estreito saía 7px do cartão, e um endereço de API no celular saía
   45px. Dentro da célula, quebrar é melhor do que vazar: o valor continua
   legível e nada é pintado por cima do vizinho. */
dl.dados dd.mono, td.mono, th.mono { white-space: normal; overflow-wrap: anywhere; }

.caixa p,
.linha-tempo li,
.aviso,
.aviso-origem,
td { overflow-wrap: break-word; }

/* A tabela precisa de layout fixo para respeitar a quebra: sem isto ela
   alarga a coluna até o texto caber e empurra a página inteira para o lado. */
table { table-layout: auto; }
td, th { min-width: 0; }

/* =============================================================================
   O cabeçalho em tela estreita

   Com cinco abas, a barra deixou de caber num celular e empurrava a PÁGINA
   INTEIRA para o lado — a pessoa rolava horizontalmente para ler qualquer
   coisa, não só o menu. Em vez de espremer os nomes, a barra passa a ocupar
   duas linhas e a fileira de abas rola sozinha, dentro dela.
   ========================================================================== */

@media (max-width: 480px) {
  /* O botão da conta já é só um círculo: não há o que encolher. A gaveta é
     que passa a ocupar quase a largura da tela, para o nome da organização
     caber inteiro. */
  .gaveta-conta { min-width: min(260px, calc(100vw - 2rem)); }
  .trilho-marca .crm { height: 20px; padding-left: 0.55rem; }
  .trilho-marca .logo { height: 21px; }
}

/* Bloco de comandos para copiar. Rola de lado dentro de si mesmo em vez de
   alargar a página, que é o que uma linha comprida de terminal faria. */
pre.comandos {
  margin: 0.6rem 0;
  padding: 0.7rem 0.9rem;
  background: var(--ardosia-900);
  color: #E8EEF2;
  border-radius: var(--raio-p);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.86rem;
  line-height: 1.6;
  overflow-x: auto;
}

/* O aviso normal é uma linha só, em flex. Quando ele carrega um bloco de
   comandos, vira empilhado: em flex o bloco disputa largura com o texto, a
   coluna de texto fica estreitíssima e "CHAVE_MESTRA" chega a quebrar no meio
   da palavra. */
/* `.empilhado` virou redundante quando `.aviso` deixou de ser flex. Fica
   como apelido para não quebrar os templates que já a escrevem. */

/* O RODAPÉ DA VERSÃO EXISTE PARA SER LIDO — e estava em `--ardosia-300`, que
   sobre o fundo da página dá 2,13:1. Um número que ninguém consegue ler não
   responde «qual código está rodando?», que é a única pergunta dele.
   `--suave` dá 4,85:1 sobre o mesmo fundo. */
.rodape-versao {
  text-align: center;
  padding: 1.5rem 1rem 2rem;
  font-size: 0.76rem;
  color: var(--suave);
  letter-spacing: 0.02em;
}

/* ---------------------------------------------------------------------
   Motor de busca: barra de andamento e a lista das cinco etapas
   --------------------------------------------------------------------- */
.barra {
  height: 0.6rem;
  background: var(--ardosia-50);
  border: 1px solid var(--borda);
  border-radius: 999px;
  overflow: hidden;
}
.barra > span {
  display: block;
  height: 100%;
  background: var(--turquesa-escuro);
  transition: width var(--transicao);
}

ol.lista-etapas { margin: 0; padding-left: 1.4rem; }
ol.lista-etapas li { margin-bottom: 0.8rem; }
ol.lista-etapas li > div { font-size: 0.86rem; margin-top: 0.15rem; }

/* ---------------------------------------------------------------------
   Vários telefones por pessoa, no cadastro feito a partir da ligação
   --------------------------------------------------------------------- */
.telefones-da-pessoa .marcaveis {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  margin-top: 0.3rem;
}
.telefones-da-pessoa .marcaveis .caixa-marcar { margin: 0; }
.telefones-da-pessoa .extras {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.telefones-da-pessoa .extras input { margin: 0; }
.telefones-da-pessoa .acrescentar-telefone {
  margin-top: 0.5rem;
  font-size: 0.85rem;
  padding: 0.35rem 0.7rem;
  background: var(--papel); color: var(--tinta);
  border: 1px solid var(--borda);
}
.telefones-da-pessoa .acrescentar-telefone:hover {
  background: var(--ardosia-50);
  /* `--ardosia-800` é uma cor de superfície escura, não de tinta: no tema
     escuro ela ficava 1,41:1 sobre o `--ardosia-50` — que lá também é
     escuro — e o botão sumia justamente ao passar o mouse. */
  color: var(--tinta);
  border-color: var(--borda);
}

/* ---------------------------------------------------------------------
   Corrigir e apagar
   --------------------------------------------------------------------- */
/* A caixa de apagar é vermelha porque apagar aqui é definitivo. Não é
   decoração: é o único aviso visual antes de uma ação sem volta. */
.caixa.perigo {
  border-color: var(--erro-borda);
  border-left: 3px solid var(--erro-tinta);
  background: var(--erro-fundo);
}
.caixa.perigo h2 { color: var(--erro-tinta); }

/* A área de apagar vira gaveta fechada.
   Ela é alta e mora no fim de toda tela de edição — aberta, era metade da
   rolagem que a pessoa fazia sem querer nada com ela. Fechada, some da
   rolagem E cobra um clique deliberado antes do vermelho, que é exatamente o
   que uma área destrutiva deve cobrar. Sem JavaScript: <details> é do
   próprio navegador. */
.gaveta-perigo > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--erro-tinta);
}
.gaveta-perigo > summary::-webkit-details-marker { display: none; }
.gaveta-perigo > summary::before {
  content: "›";
  font-size: 1.1rem;
  line-height: 1;
  transition: transform var(--transicao);
}
.gaveta-perigo[open] > summary::before { transform: rotate(90deg); }
.gaveta-perigo[open] > summary { margin-bottom: var(--e4); }
.caixa.perigo ul { margin: 0.4rem 0 0.8rem 1.1rem; }

button.perigo, .botao.perigo {
  background: var(--erro-tinta);
  border-color: var(--erro-tinta);
  color: #fff;
}
button.perigo:hover, .botao.perigo:hover {
  filter: brightness(0.9);
  background: var(--erro-tinta);
  border-color: var(--erro-tinta);
  color: #fff;
}

.linha-telefone {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.linha-telefone input[type="text"] { flex: 1 1 12rem; margin: 0; }
.linha-telefone input[type="radio"] { width: auto; margin: 0; }
/* A vaga do «fixo/celular» existe mesmo na linha que ainda não tem número.
   Sem ela a caixinha do WhatsApp de cada linha parava num lugar diferente,
   e a coluna ficava serrilhada. */
.linha-telefone .tipo-linha {
  flex: 0 0 4.2rem;
  display: inline-flex;
  justify-content: flex-start;
}

pre.retrato {
  background: var(--ardosia-50);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 0.6rem 0.8rem;
  font-size: 0.78rem;
  max-height: 18rem;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* ---------------------------------------------------------------------
   Agenda: grade de mês, semana e dia
   --------------------------------------------------------------------- */
/* A agenda precisa de mais largura que o resto da ferramenta: sete colunas
   dentro da largura de leitura viram sete tirinhas. */
main.larga { max-width: 1400px; }

.barra-agenda {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.9rem;
}
/* As regras do controle segmentado bastam; o que sobra aqui é só não deixar
   ele encolher quando o título do período for longo. A pintura antiga da
   opção ativa — fundo ardósia escuro, texto branco — saiu junto com os três
   botões soltos: era o desenho de um botão PRESSIONADO, e no segmentado a
   escolhida é a que fica em RELEVO, clara sobre o trilho cinza. São duas
   linguagens opostas, e a do macOS é a segunda. */
.barra-agenda .vistas { flex: 0 0 auto; }
.barra-agenda .titulo-periodo {
  flex: 1 1 auto;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 600;
}
.barra-agenda .navegacao { display: flex; gap: 0.3rem; }

.grade-agenda {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  overflow: hidden;
  background: var(--borda);
}
.grade-agenda .cabecalho-dias,
.grade-agenda .celulas {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px;
}
.grade-agenda .cabecalho-dias {
  background: var(--ardosia-50);
  border-bottom: 1px solid var(--borda);
}
.grade-agenda .cabecalho-dias > div {
  padding: 0.45rem 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--suave);
  text-align: center;
  background: var(--ardosia-50);
}
/* A CÉLULA CRESCEU JUNTO COM O COMPROMISSO. Com duas linhas por compromisso,
   6,5rem cortava o segundo do dia — e «vários compromissos no dia» é
   justamente o caso que motivou a mudança. */
.grade-agenda .celula {
  background: var(--papel);
  min-height: 9rem;
  padding: 0.3rem 0.35rem 0.45rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.grade-agenda.semana .celula { min-height: 16rem; }
.grade-agenda .celula.fora { background: var(--fundo); }
/* O dia do mês vizinho é secundário, não invisível: em `--ardosia-300` ele
   dava 2,13:1 sobre o fundo da célula de fora. `--suave` recua igual e lê. */
.grade-agenda .celula.fora .numero-dia { color: var(--suave); }
.grade-agenda .celula.hoje { background: color-mix(in srgb, var(--turquesa) 9%, var(--papel)); }
.grade-agenda .numero-dia {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--suave);
  text-align: right;
  padding: 0 0.15rem 0.15rem;
}
.grade-agenda .nome-do-dia { display: none; }
.grade-agenda .celula.hoje .numero-dia {
  color: var(--turquesa-escuro);
  font-weight: 700;
}

/* O compromisso, EM DUAS LINHAS. É botão porque clicar abre o detalhe aqui
   dentro — nunca manda para o Google.
   ---------------------------------------------------------------------------
   DUAS LINHAS DESDE 10/09/2026, e o pedido explica o que uma linha escondia.
   Da comercial: «quando ela marca com dois fusos aparece somente as horas e
   não dá pra ver pra que cliente é — principalmente quando tem vários
   compromissos no dia».

   Ela estava certa e o defeito era de aritmética de largura: numa célula de
   grade de mês cabem umas vinte letras. A marca de estado, «09:00», o rótulo
   do relógio do cliente e «14:00» comiam quase tudo, e o NOME — a única coisa
   que responde «com quem é isto?» — ficava com três letras e reticências.
   Duas horas e nenhum cliente é o pior corte possível: a hora ela já lê na
   posição da linha; o cliente, não tem de onde tirar.

   Agora as horas ficam na primeira linha e o nome tem a segunda inteira, com
   direito a duas linhas de texto antes de cortar. A célula cresceu para
   caber. */
button.compromisso, .dia-unico button.compromisso {
  /* `flex-wrap` e não `grid`: as horas dividem a primeira linha entre si, e o
     nome empurra a si mesmo para a segunda com `flex-basis: 100%`. Numa grade
     não daria para as duas horas ficarem lado a lado sem inventar colunas
     que ficam vazias quando o relógio do cliente é o mesmo. */
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  /* A regra geral `.botao, button` centraliza o conteúdo de todo botão desta
     base. Aqui isso estava escondido: com o nome ocupando o espaço que
     sobrava, não havia espaço para centralizar. Assim que ele desceu para a
     segunda linha, as horas foram para o meio da primeira. */
  justify-content: flex-start;
  gap: 0.1rem 0.3rem;
  width: 100%;
  margin: 0;
  padding: 0.2rem 0.35rem 0.26rem;
  border-radius: var(--raio-p);
  border: 1px solid transparent;
  font-size: 0.76rem;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  background: var(--ardosia-50);
  color: var(--tinta);
}
button.compromisso .marca { flex: 0 0 auto; font-size: 0.7rem; }
/* O DIA, que só existe fora do calendário: na ficha do cliente e no negócio,
   onde não há célula de dia nenhuma dizendo de quando é a linha. Fica mais
   apagado que a hora de propósito — numa lista curta a pergunta é «quando»,
   e a hora é a resposta fina; o dia é o enquadramento. */
button.compromisso .dia {
  flex: 0 0 auto;
  font-weight: 600; font-variant-numeric: tabular-nums;
  opacity: 0.75;
}
button.compromisso .hora {
  flex: 0 0 auto;
  font-weight: 600; font-variant-numeric: tabular-nums;
}
/* O NOME OCUPA A LARGURA INTEIRA, na linha de baixo, e pode usar duas linhas
   antes de cortar. É a única informação da grade que não dá para adivinhar
   pela posição da linha. */
button.compromisso .nome {
  flex: 1 1 100%;
  /* `white-space: normal` EXPLÍCITO, e sem ele nada disto funciona: a regra
     geral `.botao, button` põe `nowrap` em TODO botão desta base, e o valor
     desce por herança até aqui. O texto ficava numa linha só, transbordando
     de lado — e o `line-clamp` de duas linhas nunca chegava a ter uma segunda
     linha para contar. */
  white-space: normal;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 560;
}
/* O CLIENTE, na linha de baixo e por último a ser cortado. Mais discreto que
   o título de propósito: o título diz o que é o encontro, este diz com quem —
   e quando os dois têm o mesmo peso, a linha vira uma parede de texto que não
   se lê de relance. */
button.compromisso .cliente {
  flex: 1 1 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.72rem;
  opacity: 0.85;
}
/* A hora do cliente, quando o relógio dele é outro. Discreta de propósito: a
   hora que manda na grade é a de Brasília, porque é o dia de trabalho de quem
   está aqui. Esta é a que ela fala com o cliente. */
button.compromisso .outra-hora {
  flex: 0 0 auto;
  font-size: 0.72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  padding: 0 0.3rem;
  border-radius: var(--raio-p);
  background: rgba(30, 42, 50, 0.07);
}

/* AZUL o que ainda vai acontecer, VERDE o que já aconteceu (mais abaixo).
   Pedido da comercial em 28/08/2026, e é o gesto certo: bater o olho na
   semana e ver de relance quanto falta e quanto já rendeu.

   O turquesa saiu daqui porque ele é a cor da marca — usada no botão
   principal e na aba ativa. Repetido em toda a grade, deixava de apontar
   para coisa nenhuma.

   Não subiu para o Google: vermelho, o ÚNICO vermelho desta tela, para ele
   continuar significando alguma coisa quando aparecer. */
button.compromisso.futuro {
  background: color-mix(in srgb, var(--secao-agenda) 14%, var(--papel));
  color: color-mix(in srgb, var(--secao-agenda) 70%, var(--tinta));
  border-color: color-mix(in srgb, var(--secao-agenda) 34%, var(--papel));
}
button.compromisso.pendente {
  background: var(--erro-fundo); color: var(--erro-tinta); border-color: var(--erro-borda);
}
button.compromisso.do-crm { border-left: 3px solid var(--turquesa-escuro); }
button.compromisso:hover { filter: brightness(0.96); }

.dia-unico button.compromisso {
  font-size: 0.95rem;
  padding: 0.5rem 0.7rem;
  margin-bottom: 0.35rem;
  white-space: normal;
}
.dia-unico button.compromisso .nome { white-space: normal; }

/* A LISTA DE COMPROMISSOS FORA DA AGENDA — na ficha do cliente e na
   oportunidade. Aqui não há grade estreita disputando espaço, então o cartão
   pode respirar: é a mesma peça da agenda com o tamanho da vista de um dia. */
.lista-compromissos { display: flex; flex-direction: column; gap: 0.35rem; }
.lista-compromissos button.compromisso { font-size: 0.9rem; padding: 0.45rem 0.6rem; }
.lista-compromissos button.compromisso .nome { -webkit-line-clamp: 3; }
.lista-compromissos button.compromisso .cliente { font-size: 0.8rem; }

/* O detalhe */
dialog.detalhe-compromisso {
  width: min(34rem, calc(100vw - 2rem));
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.4rem 1.5rem;
  box-shadow: var(--sombra-alta);
  color: var(--tinta);
}
dialog.detalhe-compromisso::backdrop { background: rgba(15, 30, 40, 0.45); }
dialog.detalhe-compromisso h2 { margin: 0 2rem 0.2rem 0; font-size: 1.15rem; }
dialog.detalhe-compromisso .fechar { position: absolute; top: 0.6rem; right: 0.7rem; margin: 0; }
dialog.detalhe-compromisso .fechar button {
  background: none; border: none; color: var(--suave);
  font-size: 1rem; padding: 0.2rem 0.4rem; margin: 0;
}
dialog.detalhe-compromisso .fechar button:hover { background: var(--ardosia-50); color: var(--tinta); }
.descricao-compromisso {
  margin-top: 0.9rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--borda);
  font-size: 0.9rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.acoes-detalhe { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }
.acoes-detalhe form { margin: 0; }

@media (max-width: 900px) {
  /* No celular o mês vira lista: sete colunas de 5cm não se leem. Os dias sem
     nada somem, para a rolagem não ser toda de célula vazia. */
  .grade-agenda .cabecalho-dias { display: none; }
  .grade-agenda .celulas { grid-template-columns: 1fr; }
  .grade-agenda .celula { min-height: 0; }
  .grade-agenda.semana .celula { min-height: 0; }
  .grade-agenda .celula:not(:has(button.compromisso)) { display: none; }
  .grade-agenda .numero-dia { text-align: left; font-size: 0.86rem; }
  /* Na lista, o nome do dia substitui o número solto — "sexta, 28/08" diz o
     que "28" sozinho não diz quando não há a coluna em cima. */
  .grade-agenda .nome-do-dia { display: inline; text-transform: capitalize; }
  .grade-agenda .so-numero { display: none; }
  .grade-agenda .numero-dia { color: var(--tinta); font-weight: 700; }
  /* `.grade-agenda` no seletor, e não `button.compromisso` solto: escrito
     solto, esta linha empatava com `.dia-unico button.compromisso` e perdia
     — média não aumenta especificidade. Pior: a vista de UM dia não deve
     mesmo encolher no celular. Ela é a tela de tocar com o polegar; ali o
     compromisso maior está certo. Escopar diz isso em vez de deixar o
     conflito resolver por acidente. */
  .grade-agenda button.compromisso { font-size: 0.86rem; padding: 0.35rem 0.5rem; }
  .barra-agenda .titulo-periodo { order: -1; flex: 1 1 100%; text-align: left; }
}

.botao.compacto, button.compacto {
  padding: 0.2rem 0.55rem;
  font-size: 0.78rem;
}

.painel-data .linha-hora { display: flex; gap: 0.4rem; }
.painel-data .linha-hora input,
.painel-data .linha-hora select { margin: 0; }

/* ---------------------------------------------------------------------
   Lista de registros — o padrão de linha do macOS
   ---------------------------------------------------------------------
   Substitui tabela onde a tabela não cabe: dentro de uma ficha que já tem
   coluna lateral, sete colunas viram barra de rolagem horizontal e texto
   quebrado em quatro linhas. Numa lista, o texto longo fica com a largura
   inteira e os números continuam alinhados à direita.               */
ul.lista-registros { list-style: none; margin: 0; padding: 0; }
ul.lista-registros > li {
  display: flex;
  align-items: flex-start;
  gap: var(--e4);
  padding: var(--e3) 0;
  border-top: 1px solid var(--borda);
}
ul.lista-registros > li:first-child { border-top: none; padding-top: 0; }
ul.lista-registros .corpo { flex: 1 1 auto; min-width: 0; }
ul.lista-registros .linha-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e2);
  font-size: 0.84rem;
  margin-bottom: 0.2rem;
}
ul.lista-registros .assunto {
  font-weight: 560;
  line-height: 1.4;
  overflow-wrap: anywhere;
}
ul.lista-registros .valores {
  flex: 0 0 auto;
  text-align: right;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
  line-height: 1.5;
}
ul.lista-registros > li > .botao { flex: 0 0 auto; }

/* O PAINEL ABERTO OCUPA A FILEIRA INTEIRA — 22/09/2026, com a imagem da tela
   do gestor na mão: «tem inúmeras páginas do CRM dando problema de
   sobreposição».
   ---------------------------------------------------------------------------
   MEDIDO NO NAVEGADOR, a 1000px de largura, na tela de Atendentes: a linha
   útil tem 834px e os quatro filhos — o resumo do atendente e os três painéis
   (Editar, Horários, Cara e voz) — ficaram com 240px cada. A tabela de
   horários, que precisa de mais de 700px, **vazou 478px para fora da caixa
   dela** e foi desenhada por cima do painel vizinho. Não é sobreposição de
   camada: é uma fileira que não cabe, com `flex-wrap: nowrap`, espremendo
   filhos que não têm como encolher.

   `wrap` sozinho já conserta; a segunda linha é o que torna o conserto
   estável — um painel ABERTO leva a fileira inteira, então ele nunca divide
   largura com outro painel aberto, por mais coisa que alguém ponha dentro
   dele amanhã. Fechados, os três resumos continuam lado a lado, que é o
   desenho que estava certo.

   A tela também passa a abrir UM painel de cada vez (o `name=` dos
   `<details>`, no gabarito), e isso é conforto — não é o conserto. O conserto
   é este, e ele vale mesmo com os três abertos. */
ul.lista-registros > li { flex-wrap: wrap; }
ul.lista-registros > li > details[open] { flex: 1 1 100%; min-width: 0; }

@media (max-width: 640px) {
  ul.lista-registros > li { flex-wrap: wrap; }
  ul.lista-registros .valores { text-align: left; flex: 1 1 100%; }
}

/* ---------------------------------------------------------------------
   Contatos que o robô achou, na ficha da empresa
   --------------------------------------------------------------------- */
ul.achados { list-style: none; margin: 0; padding: 0; }
ul.achados > li {
  padding: var(--e2) 0;
  border-top: 1px solid var(--borda);
}
ul.achados > li:first-child { border-top: none; padding-top: 0; }
ul.achados .valor { font-weight: 560; overflow-wrap: anywhere; }
ul.achados .etiquetas {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--e1);
  margin-left: var(--e2);
  vertical-align: middle;
}
ul.achados .fonte { display: block; font-size: 0.8rem; margin-top: 0.1rem; }
ul.achados > li.errado .valor { text-decoration: line-through; color: var(--suave); }

/* Tela de edição: uma coluna só, com a barra de ações no fim. A coluna
   lateral com um botão "Voltar" era ruído — o "Cancelar" da barra faz o
   mesmo papel, e no lugar onde a pessoa já está olhando. */
.coluna-unica { max-width: 46rem; }

/* Uma largura mínima para a tabela: sem ela o navegador espreme a primeira
   coluna até a razão social quebrar em três linhas, enquanto sobra espaço
   vazio à direita. Com o mínimo, ou cabe inteira ou o cartão rola — e rolar
   é melhor do que ler um nome em três pedaços. */
.tabela-rolagem table { min-width: 48rem; }
.tabela-rolagem td a { overflow-wrap: normal; }

/* A caixinha dentro da barra de filtros não é um campo: não estica. */
.filtros .caixa-marcar { flex: 0 0 auto; margin: 0 var(--e2); }
.filtros { gap: var(--e2) var(--e3); align-items: center; }

/* Concluído: verde com ✓ quando aconteceu, cinza riscado com ✗ quando não.
   É a leitura do CRM antigo — bate o olho e sabe o que rendeu. */
button.compromisso.feito {
  background: var(--ok-fundo); color: var(--ok-tinta); border-color: var(--ok-borda);
}
button.compromisso.furou {
  background: var(--ardosia-50); color: var(--suave); border-color: var(--borda);
}
button.compromisso.furou .nome { text-decoration: line-through; }
/* Passou da hora, ainda sem retorno. Cinza, e NÃO âmbar: âmbar é a cor de
   alarme desta ferramenta, e o normal é que a reunião tenha acontecido —
   pintar o passado inteiro de alarme diz que algo deu errado quando não deu.
   A marca é ✓ como a do concluído: a forma diz «aconteceu», a cor diz o
   quanto se sabe. Verde é confirmado; cinza é presumido. */
button.compromisso.presumido {
  background: var(--ardosia-50);
  color: var(--tinta-media);
  border-color: var(--borda);
}
button.compromisso.presumido .marca { color: var(--ardosia-300); }

/* O dia inteiro é clicável para marcar. O ponteiro diz isso; o realce no
   número diz onde clicar sem transformar a grade num tabuleiro de botões. */
.grade-agenda .celula.clicavel { cursor: pointer; }
button.numero-dia {
  display: block;
  width: 100%;
  min-height: 0;
  background: none;
  border: none;
  box-shadow: none;
  color: var(--suave);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: right;
  padding: 0 0.15rem 0.15rem;
  cursor: pointer;
}
button.numero-dia:hover {
  background: none;
  color: var(--turquesa-escuro);
  border: none;
}
.grade-agenda .celula.hoje button.numero-dia { color: var(--turquesa-escuro); font-weight: 700; }
/* A MESMA REGRA DE `.celula.fora .numero-dia`, e ela VENCE aquela — o dia do
   mês vizinho vira botão quando a grade é clicável. Corrigir só a primeira
   deixava metade da agenda em 2,13:1 e a outra metade legível, sem que nada
   na tela dissesse por quê. */
.grade-agenda .celula.fora button.numero-dia { color: var(--suave); }

dialog.detalhe-compromisso .formulario { text-align: left; }
dialog.detalhe-compromisso h3 { margin-bottom: 0.4rem; }

.telefones-da-pessoa .extras-email { gap: 0.4rem; }
.telefones-da-pessoa .extras-email input { margin: 0; }

/* A gaveta de um plano: fechada mostra nome, preço e limite; aberta, os
   campos. É o resumo que faz a lista continuar sendo uma TABELA DE PREÇOS
   quando fechada — gaveta que esconde o preço obrigaria a abrir as sete para
   conferir a tabela, que é o oposto do que ela serve. */
.gaveta-plano > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
}
.gaveta-plano > summary::-webkit-details-marker { display: none; }
.gaveta-plano > summary::before {
  content: "›";
  align-self: center;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--suave);
  transition: transform var(--transicao);
}
.gaveta-plano[open] > summary::before { transform: rotate(90deg); }
.gaveta-plano .nome-plano {
  font-size: 1.02rem;
  font-weight: 660;
  letter-spacing: -0.012em;
}
.gaveta-plano .resumo-plano { margin-left: auto; font-size: 0.88rem; }
.gaveta-plano.inativo { opacity: 0.66; }
.gaveta-plano + .gaveta-plano { margin-top: var(--e3); }

/* Os painéis de aba: nascem visíveis e é o abas.js que esconde os outros.
   Sem script, a tela volta a ser a de antes — comprida, mas inteira. */
[data-painel][hidden] { display: none; }

/* -----------------------------------------------------------------------
   Convidados do compromisso

   As caixas vêm marcadas por padrão, então elas precisam ser fáceis de
   DESMARCAR: linha inteira clicável, alvo grande, nome em destaque e e-mail
   ao lado. Uma lista de caixas apertadas com o texto todo do mesmo tamanho
   é onde se desmarca a pessoa errada.
   -------------------------------------------------------------------- */
.linha-convidado {
  display: flex; align-items: flex-start; gap: 0.55rem;
  padding: 0.4rem 0.5rem; margin: 0.15rem 0;
  border-radius: var(--raio-p); cursor: pointer;
}
.linha-convidado:hover { background: var(--ardosia-50); }
.linha-convidado input[type="checkbox"] { width: auto; margin: 0.15rem 0 0; }
.linha-convidado .suave { display: block; font-size: 0.84rem; }

.contatos-da-empresa { margin: 0.3rem 0 0.6rem; }

/* No detalhe: quem foi convidado e o que respondeu. */
.detalhe-compromisso .convidado { margin-bottom: 0.35rem; }
.detalhe-compromisso .convidado .suave { font-size: 0.82rem; }

/* -----------------------------------------------------------------------
   A resposta do cliente ao convite

   Vive à DIREITA da linha, longe da marca da esquerda. A marca responde
   «isto aconteceu?»; isto responde «posso contar com isto?». São dois eixos,
   e o dia em que viraram o mesmo símbolo a agenda deixou de significar
   alguma coisa.

   «Recusou» é o único em vermelho, porque é o único que pede ação hoje.
   Confirmado é verde e discreto: é a notícia boa, e notícia boa não precisa
   gritar.
   -------------------------------------------------------------------- */
.compromisso .rsvp {
  margin-left: auto; flex: 0 0 auto;
  font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em;
  padding: 0.05rem 0.35rem; border-radius: 999px;
  text-transform: lowercase;
}
.compromisso .rsvp.confirmado { background: var(--ok-fundo); color: var(--ok-tinta); }
.compromisso .rsvp.recusou    { background: var(--erro-fundo); color: var(--erro-tinta); }
.compromisso .rsvp.parcial    { background: var(--atencao-fundo); color: var(--atencao-tinta); }

.detalhe-compromisso .resumo-rsvp { font-weight: 600; margin-bottom: 0.4rem; }
.detalhe-compromisso .resumo-rsvp.aceito { color: #1B6B3A; }
.detalhe-compromisso .resumo-rsvp.recusado { color: var(--erro-tinta); }
.detalhe-compromisso .resumo-rsvp.parcial { color: #8A5A08; }
.detalhe-compromisso .resumo-rsvp.sem_resposta { color: var(--suave); font-weight: 500; }
.detalhe-compromisso .resumo-rsvp .suave { font-weight: 400; }

/* -----------------------------------------------------------------------
   Tratativas: registrar e corrigir

   «Registrar tratativa» fica ANTES da lista e fechada. O gesto mais comum
   nesta tela é «acabei de falar com o cliente, quero anotar» — enterrada
   depois de duzentas linhas de histórico, ela existiria só para quem já
   sabe que existe. Fechada, não empurra o histórico para baixo.
   -------------------------------------------------------------------- */
details.caixa-interna { margin: 0 0 1rem; }
details.caixa-interna > summary {
  cursor: pointer; list-style: none; display: inline-block;
}
details.caixa-interna > summary::-webkit-details-marker { display: none; }
details.caixa-interna[open] > summary { margin-bottom: 0.8rem; }

.formulario-tratativa {
  padding: 0.9rem 1rem;
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
}
.formulario-tratativa label { display: block; }
.formulario-tratativa textarea { width: 100%; }
.linha-tratativa {
  display: flex; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.2rem;
}
.linha-tratativa label { flex: 1 1 11rem; }

/* «Corrigir» é apagado e só ganha contraste no hover — mas NUNCA some, para
   funcionar no toque. Mesma regra da transcrição da reunião. */
.linha-tempo .corrigir-tratativa { margin-top: 0.3rem; }
.linha-tempo .corrigir-tratativa > summary,
.linha-tempo .antes-tratativa > summary {
  cursor: pointer; list-style: none; display: inline-block;
  font-size: 0.8rem; color: var(--turquesa-escuro); opacity: 0.55;
  transition: opacity var(--transicao);
}
.linha-tempo li:hover .corrigir-tratativa > summary,
.linha-tempo li:focus-within .corrigir-tratativa > summary,
.linha-tempo .corrigir-tratativa[open] > summary { opacity: 1; }
.linha-tempo .antes-tratativa > summary { opacity: 1; }
.linha-tempo .corrigir-tratativa > summary::-webkit-details-marker,
.linha-tempo .antes-tratativa > summary::-webkit-details-marker { display: none; }
.linha-tempo .corrigir-tratativa > summary::before {
  content: "›"; display: inline-block; margin-right: 0.3rem;
  transition: transform var(--transicao);
}
.linha-tempo .corrigir-tratativa[open] > summary::before { transform: rotate(90deg); }
.linha-tempo .corrigir-tratativa[open] {
  padding: 0.7rem 0.9rem; margin-top: 0.5rem;
  background: var(--fundo); border: 1px solid var(--borda);
  border-radius: var(--raio-p);
}
.linha-tempo .corrigir-tratativa textarea,
.linha-tempo .corrigir-tratativa input[type="text"] {
  width: 100%; font-weight: 400;   /* campo de texto, não fala em destaque */
}
.linha-tempo .antes-tratativa .antes {
  margin-top: 0.35rem; padding: 0.5rem 0.75rem;
  background: var(--ardosia-50);
  border-left: 2px solid var(--borda-forte);
  border-radius: 0 var(--raio-p) var(--raio-p) 0;
  font-size: 0.88rem;
}

/* ------------------------------------------------------------------ *
 * Desempenho: as notas recentes e o placar do mês
 * ------------------------------------------------------------------ */

/* Três cartões lado a lado no desktop, empilhados no celular. `auto-fit` com
   `minmax` em vez de media query: a quebra acontece quando o conteúdo pede,
   não num número de pixels que envelhece. */
.notas-recentes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0.8rem;
}

.nota-cartao {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--borda, #d8dee3);
  border-radius: var(--raio);
  background: var(--papel);
  text-decoration: none;
  color: inherit;
}
.nota-cartao:hover { border-color: #3D5361; }
.nota-cartao.sem-nota { background: var(--ardosia-50); }

.nota-numero { font-size: 1.9rem; font-weight: 700; line-height: 1.1; }
.nota-escala { font-size: 0.95rem; font-weight: 400; opacity: 0.55; }
.nota-vazia  { font-size: 0.95rem; font-weight: 400; opacity: 0.55; }
.nota-pct    { font-size: 0.85rem; opacity: 0.7; }
.nota-quem   { font-weight: 600; margin-top: 0.3rem; }
.nota-quando { font-size: 0.82rem; opacity: 0.6; }

.placar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.8rem;
}

.placar-item {
  padding: 0.9rem 1rem;
  border: 1px solid var(--borda, #d8dee3);
  border-left-width: 4px;
  border-radius: var(--raio);
  background: var(--papel);
}
/* Verde e âmbar, não verde e vermelho: mês em andamento abaixo da meta é
   «ainda falta», não «reprovado». A cor não deve gritar antes da hora. */
.placar-item.ok    { border-left-color: var(--ios-verde); }
.placar-item.falta { border-left-color: var(--ios-laranja); }

.placar-rotulo  { display: block; font-size: 0.82rem; opacity: 0.65; }
.placar-numero  { display: block; font-size: 1.8rem; font-weight: 700; line-height: 1.2; }
.placar-detalhe { display: block; font-size: 0.82rem; opacity: 0.7; }

/* O aviso de que o número acima foi calculado sobre menos reuniões do que
   foram feitas. Fica opaco de propósito — é para ser lido, não para ser
   ignorado como o resto do detalhe. */
/* A tentativa de avaliação que a conferência recusou. Marcada na lateral para
   não ser confundida, de relance, com a avaliação que valeu. */
.caixa.recusada { border-left: 3px solid var(--ios-laranja); }

.placar-alerta {
  display: block; margin-top: 0.4rem; font-size: 0.78rem; line-height: 1.35;
  color: var(--ios-laranja); font-weight: 600;
}

.detalhe-faixas { margin-top: 0.9rem; }
.detalhe-faixas summary { cursor: pointer; font-size: 0.88rem; }
.tabela tr.linha-atual { background: var(--ok-fundo); font-weight: 600; }

.motivo-mes { font-size: 0.8rem; max-width: 26ch; }

details.reabrir summary { cursor: pointer; font-size: 0.85rem; }
details.reabrir form { display: flex; gap: 0.4rem; margin-top: 0.4rem; }
details.reabrir p { font-size: 0.8rem; max-width: 32ch; }

/* A tabela de faixas da Configuração: campos estreitos, sem esticar.
   O teto é o que impede os 9rem de virarem 9rem numa tela de 390px, onde o
   que passa da borda é cortado e não rola. Largura fixa sem teto é a forma
   mais comum deste defeito, e `ops/testar_celular.py` a persegue. */
.tabela.faixas input { width: 9rem; max-width: 100%; }
.grade-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1rem;
}
.grade-campos label, .campo-largo { display: block; font-weight: 600; }
.grade-campos input, .campo-largo input { width: 100%; margin-top: 0.25rem; }
.grade-campos .dica {
  display: block;
  font-weight: 400;
  font-size: 0.8rem;
  opacity: 0.7;
  margin-top: 0.3rem;
}
/* A AÇÃO PRIMÁRIA FICA SEMPRE NO MESMO CANTO.
   -------------------------------------------------------------------------
   Eram três posicionamentos convivendo: `.acoes-formulario` punha o botão à
   direita, numa barra colada no rodapé; `.acoes-rodape` punha à esquerda,
   rolando com a página; e `.acoes` — usado em onze lugares — não existia na
   folha de estilo, então caía em `display:block` e alinhava à esquerda por
   acidente. Telas de edição equivalentes usavam uma ou outra, e o botão
   «Salvar» mudava de lugar conforme a tela.

   No macOS a ação primária de uma folha fica no canto inferior direito,
   sempre. As três classes passam a ser a mesma barra; os nomes continuam
   porque estão escritos em quarenta templates, e renomear tudo de uma vez
   seria trocar um defeito visível por um risco invisível. */
.acoes-rodape, .acoes {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--e2);
  margin-top: var(--e4);
}
.acoes-rodape .botao, .acoes-rodape button,
.acoes .botao, .acoes button { margin: 0; }

/* ------------------------------------------------------------------ *
 * O resumo e a avaliação na ficha da reunião
 * ------------------------------------------------------------------ */

.nota-da-reuniao { padding-top: 1rem; padding-bottom: 1rem; }
.nota-cabeca { display: flex; align-items: center; gap: 1rem; }
.nota-grande { font-size: 2.6rem; font-weight: 700; line-height: 1; }
.nota-grande .nota-escala { font-size: 1.1rem; font-weight: 400; opacity: 0.5; }
.nota-lado { font-size: 0.9rem; }

/* Largura de leitura. Um resumo que atravessa a tela inteira é um resumo que
   ninguém lê até o fim — e este é o texto que vai para o cliente. */
.documento { max-width: 68ch; line-height: 1.55; }
.documento h3 { margin: 1.4rem 0 0.4rem; font-size: 1.05rem; }
.documento h4 { margin: 1.1rem 0 0.3rem; font-size: 0.95rem; }
.documento p { margin: 0.5rem 0; }
.documento ul { margin: 0.4rem 0 0.8rem 1.2rem; }
.documento li { margin: 0.2rem 0; }
/* A citação é a evidência: a frase literal da transcrição que sustenta a
   nota. Fica visualmente separada porque é ela que se discute. */
.documento blockquote {
  margin: 0.4rem 0 0.8rem;
  padding: 0.4rem 0.9rem;
  border-left: 3px solid var(--borda-forte);
  background: var(--ardosia-50);
  font-style: italic;
}
.rodape-doc { font-size: 0.78rem; margin-top: 1rem; }

/* «a confirmar»: o retorno que o CRM marcou sozinho e que ainda não convidou
   ninguém. Cor própria, diferente das pílulas de RSVP ao lado — aquelas
   respondem «o cliente vem?», esta responde «já pedi para ele vir?». */
.rsvp.a-confirmar {
  background: var(--atencao-fundo);
  color: var(--atencao-tinta);
  border: 1px solid var(--atencao-borda);
}

/* As duas obrigações do copiloto, na ficha da reunião. Verde e âmbar, e não
   verde e vermelho: «não avisou» é uma falta a corrigir na próxima, não uma
   reprovação — e elas não entram na nota de ninguém. */
.lista-obrigacoes { list-style: none; margin: 0; padding: 0; }
.lista-obrigacoes li {
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.5rem;
  border-left: 4px solid var(--borda-forte);
  background: var(--ardosia-50);
  border-radius: 0 6px 6px 0;
}
.lista-obrigacoes li.ok    { border-left-color: #2f8a4e; }
.lista-obrigacoes li.falta { border-left-color: #c08a2e; }
.lista-obrigacoes blockquote {
  margin: 0.4rem 0 0;
  padding-left: 0.8rem;
  border-left: 2px solid #d5dde3;
  font-style: italic;
}

/* ------------------------------------------------------------------ *
 * Mandar o resumo para o cliente
 * ------------------------------------------------------------------ */

.enviar-resumo {
  margin-top: 1.4rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--borda, #d8dee3);
}
.enviar-resumo h3 { margin: 0 0 0.8rem; font-size: 1rem; }

/* O que já saiu fica ACIMA do formulário, e não escondido embaixo: a
   pergunta que a pessoa faz ao abrir a ficha é «já mandei?», e a resposta
   tem que chegar antes do botão que manda de novo. */
.ja-enviado { margin-bottom: 1rem; font-size: 0.86rem; }
.ja-enviado > div {
  padding: 0.5rem 0.8rem;
  border-left: 3px solid var(--ok-borda);
  background: var(--ok-fundo);
  border-radius: 0 5px 5px 0;
  margin-bottom: 0.4rem;
}
.ja-enviado > div.falhou { border-left-color: var(--erro-borda); background: var(--erro-fundo); }

.form-envio fieldset {
  border: 1px solid var(--borda, #d8dee3);
  border-radius: var(--raio-p);
  padding: 0.8rem 1rem;
  margin: 0 0 0.9rem;
}
.form-envio legend { font-size: 0.82rem; opacity: 0.7; padding: 0 0.4rem; }
.marcavel {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.35rem 0;
  font-weight: 400;
}
.marcavel input { margin-top: 0.25rem; flex: none; }
.form-envio .acoes {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 1rem;
}
.form-envio .acoes .suave { font-size: 0.82rem; max-width: 46ch; }

/* =============================================================================
   CAMADA DE COR — 01/09/2026
   =============================================================================

   Pedido do gestor: mais cor, com o ar do macOS sem ser cópia. O que se
   copia de um sistema operacional não é a paleta — é o **jeito de organizar
   a luz**. Três ideias estruturais, e nenhuma delas é uma cor da Apple:

     1. CAMADAS. Existe um fundo (a mesa), e sobre ele superfícies que deixam
        o fundo transparecer de leve. É isso que faz uma janela parecer
        pousada sobre algo, em vez de desenhada num papel branco.

     2. HIERARQUIA POR SATURAÇÃO, NÃO POR PESO. Em vez de negrito e caixa
        alta para separar as coisas, cor. O que importa é colorido; o resto é
        cinza. Assim a tela fica cheia de informação e continua calma.

     3. UMA COR POR LUGAR. Cada aba tem a sua, sempre a mesma. Depois de uma
        semana a pessoa acha «Prospecção» pela mancha violeta antes de ler a
        palavra — e é isso que faz um menu de oito itens parar de custar
        tempo.

   As cores saem da marca, e não de outro sistema: a ardósia e o coral do
   logotipo abrem uma roda de matizes com a mesma saturação e a mesma
   luminosidade. Postas lado a lado elas parecem uma família, porque são: o
   que muda entre elas é só o ângulo no círculo de cor.
   ========================================================================== */

:root {
  /* A roda das seções. Todas na mesma faixa de saturação e luz — é o que faz
     oito cores diferentes não parecerem oito adesivos colados na tela. */
  /* Pedido do gestor em 05/09/2026: «quero cores mais vivas, similares às da
     Apple; acho os tons atuais muito opacos» — e, no mesmo fôlego, «não
     precisa ser colorido, mas onde há cor ser mais vivo». As duas frases
     juntas são a instrução inteira: **menos lugares com cor, e cor de
     verdade onde ela aparece.**

     O que mudou tecnicamente: a saturação. Os tons anteriores ficavam entre
     45% e 60% de saturação — a faixa que produz a sensação de «lavado» num
     monitor bom, porque é a faixa que uma tela desbotada produz sozinha. As
     cores de sistema do macOS e do iOS vivem acima de 85%, e é daí que vem a
     nitidez delas. A luminosidade eu segurei entre 45% e 55%: acima disso a
     cor fica bonita e ilegível sobre branco, que é o erro oposto.

     A roda continua sendo a mesma — os ângulos de matiz não mudaram, então
     as cores continuam parecendo uma família. O que subiu foi o volume. */
  /* O GLIFO BRANCO DENTRO DO TILE precisa de 3:1 — é o mínimo que a norma
     pede para elemento gráfico, e quatro destas cores ficavam abaixo dele
     (o âmbar de Oportunidades dava 2,48:1: o ícone virava uma mancha).
     Escurecidas só o necessário para o desenho aparecer. */
  --secao-painel:        #00929F;   /* turquesa — a cor do módulo */
  /* Púrpura — quem chegou e ainda não é nada. Escolhida pelo lugar VAZIO na
     roda: entre o violeta da Prospecção (258°) e o rosa do Avaliador (340°)
     havia um buraco, e no trilho ela cai entre o turquesa do Painel e o
     âmbar das Oportunidades — longe das duas vizinhas mais parecidas.
     Medido: 5,9:1 do glifo branco sobre ela, bem acima dos 3:1 que a norma
     pede para elemento gráfico. */
  --secao-leads:         #A32BAE;
  --secao-oportunidades: #C97400;   /* âmbar — o que está em jogo */
  --secao-empresas:      #0E8B44;   /* verde — a base que se acumula */
  --secao-prospeccao:    #8B5CF6;   /* violeta — o território novo */
  --secao-agenda:        #0069DB;   /* azul — o tempo */
  --secao-copiloto:      #0C8CA9;   /* ciano — irmão do painel */
  --secao-agente:        #009083;   /* menta — a conversa que chega */
  --secao-avaliador:     #E8336D;   /* rosa — a nota, que ninguém confunde */
  --secao-propostas:     #E5342A;   /* coral da marca — o que espera por você */
  --secao-aprovacoes:    #E5342A;   /* o mesmo: Aprovações é tela de Propostas */
  --secao-comissao:      #5B5BD6;   /* índigo — o mês fechado */
  --secao-configuracao:  #6B7280;   /* grafite — infraestrutura, não trabalho */

  /* O BRILHO DOS ÍCONES — o do logotipo oficial do WhatsApp (17/10/2026).
     -----------------------------------------------------------------------
     Pedido do gestor: «eu quero que a cor de todos os icones do crm estejam
     com o mesmo brilho dos icones do whatsapp oficial que acabamos de
     colocar. [...] tanto no modo escuro e no claro». E, sobre o menu
     lateral: «Sim, menu lateral também» — só a cor.

     Como foi medido (OKLCH, a escala de claridade que o olho percebe): o
     verde #25D366 do WhatsApp tem claridade 0,76 e croma 0,20. Cada cor
     abaixo é a MESMA MATIZ da seção, levada o mais perto possível disso:
     claridade até 0,76, sem deixar a croma cair abaixo de 95% do máximo que
     a matiz alcança. Verde, laranja, ciano, menta e púrpura chegam a 0,76;
     azul, índigo, violeta, rosa e coral param entre 0,63 e 0,70, porque
     acima disso viram pastel — perdem o «tom».

     IGUAIS NO CLARO E NO ESCURO, como o logotipo do WhatsApp e os ícones dos
     ajustes do macOS: não há troca destas cores no tema escuro.

     O GLIFO BRANCO fica entre 2,0:1 e 3,7:1 sobre elas — o mesmo patamar do
     telefone branco do próprio WhatsApp (1,98:1) e dos ajustes do macOS. O
     ícone é sempre acompanhado do nome escrito ao lado, e é `aria-hidden`:
     a informação nunca depende dele.

     A LUZ DO FUNDO DA TELA NÃO MUDOU: continua com `--secao-*`, acima. */
  --icone-secao-painel: #02C8DA;
  --icone-secao-leads: #F07BFB;
  --icone-secao-oportunidades: #FD9403;
  --icone-secao-empresas: #05D469;
  --icone-secao-prospeccao: #9973FF;
  --icone-secao-agenda: #2785FF;
  --icone-secao-copiloto: #03C5ED;
  --icone-secao-agente: #0ACCBB;
  --icone-secao-avaliador: #FF5B87;
  --icone-secao-propostas: #FF5D4D;
  --icone-secao-aprovacoes: #FF5D4D;
  --icone-secao-comissao: #7375FF;
  --icone-secao-configuracao: #979FAD;
  --icone-azul: #2785FF;
  --icone-verde: #05D469;
  --icone-menta: #0ACCBB;
  --icone-laranja: #FD9403;
  --icone-indigo: #7375FF;
  --icone-rosa: #FF5B87;
  --icone-roxo: #D07AFF;
  --icone-cinza: #9E9EA3;
  --icone-ciano: #03C5ED;
  --icone-turquesa: #02C8DA;
  --icone-violeta: #9973FF;
  --icone-coral: #FF5D4D;

  /* A cor da seção corrente. O `[data-secao]` no body a troca, e daí para
     baixo tudo que quiser um acento usa esta variável sem saber qual é. */
  --acento: var(--secao-painel);
  --acento-clara: color-mix(in srgb, var(--acento) 12%, var(--claro));
  --acento-borda: color-mix(in srgb, var(--acento) 28%, var(--claro));

  /* A mesa sob as janelas. Não é cinza puro: tem um véu do azul da marca,
     que é o que dá a sensação de haver luz vindo de algum lugar. */
  --mesa-topo: #EEF3F6;
  --mesa-base: #E6EDF2;

  --vidro: rgba(255, 255, 255, 0.72);
  --vidro-borda: rgba(255, 255, 255, 0.6);
  /* O branco que as superfícies escrevem à mão. Virou variável para o tema
     escuro poder trocá-lo num lugar só — antes eram trinta regras escrevendo
     `rgba(255,255,255,…)`, e cada uma seria um retângulo aceso no escuro. */
  /* O «branco» com que as cores são lavadas. É variável para o tema escuro
     poder lavá-las com o papel escuro: `color-mix(…, white)` no escuro
     devolveria justamente o retângulo aceso que se está tentando evitar. */
  /* AS CORES DO TRILHO SÃO DELE, e não da escada de cinzas.

     Ele é escuro nos DOIS temas — no claro por desenho, no escuro por
     consequência —, e a escada de cinzas vira de lado quando o tema muda:
     `--ardosia-100` é claro no tema claro e escuro no tema escuro, porque
     em toda a outra tela ela é SUPERFÍCIE. O texto do trilho estava escrito
     nela, e no tema escuro virou cinza-escuro sobre azul-escuro: as palavras
     do menu praticamente sumiam, e só apareciam ao passar o mouse.

     Sendo dele, ficam iguais nos dois temas — que é o que a pessoa espera de
     uma barra lateral que não muda de cor. E ficam claras de verdade: o
     mínimo aqui não é «dá para ler se procurar», é ler de relance.

     `--trilho-texto` sobre `--trilho-fundo` dá contraste 8,5:1; o suave, das
     sub-seções, 5,6:1. O limite da norma para texto pequeno é 4,5:1. */
  /* 05/09/2026 — O TRILHO PASSOU A ACOMPANHAR O TEMA.
     -----------------------------------------------------------------------
     Ele era uma placa ardósia nos DOIS temas, e essa era a coisa que mais
     afastava a ferramenta do Mac. Nenhum aplicativo do macOS tem barra
     lateral escura sobre conteúdo claro: Finder, Mail, Notas e Ajustes têm
     a lateral CLARA e translúcida no tema claro, e escura no escuro. Uma
     lateral escura sobre conteúdo branco é assinatura de aplicativo web, e o
     gestor sentiu isso antes de saber nomear: «não está com a mesma
     usabilidade da experiência Mac».

     A ardósia da marca não se perde — ela continua no logotipo, nos botões e
     no filete coral que separa o trilho do conteúdo. O que muda é o papel
     dela: era o fundo de uma barra, e barra lateral no macOS não tem cor
     própria, tem o material da janela.

     Os nomes dos tokens ficam: eles são lidos em vinte lugares, e trocá-los
     seria uma caçada por causa de um valor. */
  --trilho-fundo: #F2F4F7;
  --trilho-texto: #1E2A33;
  --trilho-texto-suave: #566572;
  /* 2,68:1 antes — e é ele que escreve o nome do grupo («AGENTE») e o rótulo
     do seletor de organização, os dois em caixa alta a ~11px. Texto pequeno
     em caixa alta é o que menos perdoa contraste baixo: 4,6:1. */
  --trilho-texto-fraco: #626E7A;
  --trilho-linha: rgba(0, 0, 0, 0.10);
  /* O realce de quem passa o mouse. Era branco translúcido, e branco sobre
     claro não realça nada. */
  --trilho-realce: rgba(0, 0, 0, 0.055);
  /* A PÍLULA DA SELEÇÃO — e aqui eu tinha errado a leitura do macOS.
     -----------------------------------------------------------------------
     Pus branco sobre a cor cheia da seção. É o que o macOS faz na janela EM
     FOCO com o azul de sistema, e eu generalizei para as onze cores. O
     resultado, medido: branco sobre o âmbar de Oportunidades dá **2,48:1**,
     sobre o menta do Agente **2,63:1**, sobre o turquesa do Painel **2,94:1**
     — contra os 4,5:1 que texto pequeno exige. Oito das onze seções ficaram
     com o rótulo mais visível da tela ilegível.

     O que a barra lateral do Finder no tema claro realmente faz é o oposto:
     **preenchimento TINGIDO a ~15% e rótulo escuro**, com o ícone mantendo a
     cor cheia dele. A cor viva continua onde ela funciona — no tile de 22
     pixels —, e o texto fica com 13:1.

     No escuro o preenchimento sobe, porque sobre fundo escuro um véu de 15%
     não se vê. */
  --trilho-selecao: color-mix(in srgb, var(--acento) 16%, transparent);
  --trilho-selecao-texto: var(--trilho-texto);
  --claro: #ffffff;
  --contraste: #000000;
  --mesa-meio: #E1EAF1;
  --halo-forca: 46%;
  --halo-ambar: 0.26;
  --halo-azul: 0.22;
  --vidro-alto: rgba(255, 255, 255, 0.90);
  --vidro-baixo: rgba(255, 255, 255, 0.72);
  --quina-forte: inset 0 1px 0 rgba(255, 255, 255, 0.90);
  --sombra-cor: rgba(30, 42, 50, 0.22);
  --sombra-cor-fraca: rgba(30, 42, 50, 0.05);

  /* AS ELEVAÇÕES, TODAS COM NOME. Estavam escritas à mão em sete lugares, e
     duas superfícies irmãs — a aba em relevo e o segmento em relevo —
     tinham sombras DIFERENTES para a mesma ideia. Nomear não é organização:
     é o que faz «o mesmo relevo» continuar sendo o mesmo quando alguém
     mexer num dos dois daqui a seis meses.

     Os valores são os que já valiam; nada muda de aparência hoje. */
  --sombra-relevo: 0 1px 2px rgba(30, 42, 50, 0.14);
  --sombra-flutuante: 0 12px 30px -10px rgba(16, 26, 32, 0.55);
  /* A folha que sobe da barra de abas joga sombra para CIMA — é a única, e
     por isso não sai de `--sombra-alta`. */
  --sombra-de-baixo: 0 -8px 24px rgb(0 0 0 / 0.18);
  /* O cartão de entrada é deliberadamente dramático: é a única tela sem
     trilho, sobre fundo escuro, e o cartão precisa flutuar de verdade. */
  --sombra-entrada: 0 20px 55px rgba(0, 0, 0, 0.42), 0 2px 6px rgba(0, 0, 0, 0.22);
  /* O botão do interruptor: pequeno, colado, quase sem espalhamento. */
  --sombra-botao: 0 1px 3px rgb(0 0 0 / 0.22), 0 1px 1px rgb(0 0 0 / 0.1);
  --botao-alto: color-mix(in srgb, var(--ardosia-600) 88%, var(--claro));
  --botao-baixo: var(--ardosia-600);
  --botao-alto-hover: color-mix(in srgb, var(--ardosia-700) 88%, var(--claro));
  --botao-baixo-hover: var(--ardosia-700);
}

body[data-secao="avaliador"]     { --acento: var(--secao-avaliador); }
body[data-secao="propostas"]     { --acento: var(--secao-propostas); }
body[data-secao="comissao"]      { --acento: var(--secao-comissao); }
body[data-secao="painel"]        { --acento: var(--secao-painel); }
body[data-secao="leads"]         { --acento: var(--secao-leads); }
body[data-secao="oportunidades"] { --acento: var(--secao-oportunidades); }
body[data-secao="empresas"]      { --acento: var(--secao-empresas); }
body[data-secao="prospeccao"]    { --acento: var(--secao-prospeccao); }
body[data-secao="agenda"]        { --acento: var(--secao-agenda); }
body[data-secao="copiloto"]      { --acento: var(--secao-copiloto); }
body[data-secao="agente"]        { --acento: var(--secao-agente); }
body[data-secao="aprovacoes"]    { --acento: var(--secao-aprovacoes); }
body[data-secao="configuracao"]  { --acento: var(--secao-configuracao); }

body[data-secao] {
  --acento-clara: color-mix(in srgb, var(--acento) 12%, var(--claro));
  --acento-borda: color-mix(in srgb, var(--acento) 28%, var(--claro));
}

/* --- A mesa ---------------------------------------------------------------
   Um degradê muito longo e muito discreto, mais um brilho difuso no alto,
   na cor da seção. É o que faz cada aba ter clima próprio sem que nada na
   tela mude de forma — e é o oposto de pintar a página inteira de uma cor,
   que cansa em dois minutos. */
/* O FUNDO É LISO, como o de uma janela do Mac.
   -------------------------------------------------------------------------
   Eram quatro degradês empilhados: um halo da cor da seção no alto à
   esquerda, um âmbar à direita, um azul embaixo e um degradê vertical por
   trás de tudo — a «mesa» sobre a qual as caixas pousavam.

   Cada um era defensável sozinho e juntos faziam uma coisa só: a tela parecia
   uma PÁGINA, não uma janela. Nenhuma janela do macOS tem fundo pintado; o
   conteúdo fica sobre o material do sistema, e o que dá profundidade é o
   contraste entre o fundo neutro e a superfície branca do conteúdo — não uma
   aguada colorida atrás.

   E havia um custo prático: o halo mudava de cor conforme a seção aberta, e
   com ele a leitura da mesma caixa branca mudava de tela para tela. */
body { background: var(--fundo); }

/* --- O cabeçalho, em vidro -------------------------------------------------
   Translúcido com desfoque: a página passa POR BAIXO dele ao rolar, e é
   esse pequeno movimento que diz «isto está por cima». `saturate` antes do
   blur porque desfocar dessatura — sem ele, o que passa por baixo fica
   cinzento e a barra parece suja.

   O `@supports` não é zelo excessivo: onde não há desfoque, a barra precisa
   ser OPACA. Uma barra translúcida sem blur deixa o texto da página
   atravessar as letras do menu, e aí o menu fica ilegível. */

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  /* O MATERIAL VAI NUM PSEUDO-ELEMENTO, e não no trilho.
     -----------------------------------------------------------------------
     `backdrop-filter` faz do elemento o BLOCO CONTÊINER de todo filho
     `position: fixed`. É a mesma armadilha que já tinha derrubado o filete
     coral — está anotada lá em cima —, e ela pegou de novo: o menu da conta é
     `fixed`, e com o filtro no trilho ele passava a ser posicionado DENTRO
     dos 232px dele. No celular a gaveta abria com 159px de largura, cortada,
     em vez dos 374 da tela. Nenhum erro; só uma gaveta pela metade.

     Atrás, num `::before`, o material é o mesmo e o trilho volta a ser uma
     caixa comum. */
  .trilho { background: transparent; }
  .trilho::before {
    content: "";
    position: absolute;
    inset: 0;
    /* Sai de `--trilho-fundo`, e não da escada de cinzas: assim a variável
       diz a verdade sobre a cor do trilho nos dois temas, em vez de haver
       uma cor declarada e outra desenhada. */
    background: color-mix(in srgb,
                color-mix(in srgb, var(--trilho-fundo) 92%, var(--acento)) 88%,
                transparent);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    z-index: -1;
    pointer-events: none;
  }
}

/* O separador da lateral era um degradê que descia — coral no alto, cor da
   seção embaixo — para dizer duas coisas ao mesmo tempo. Dizia, e nenhuma
   janela do macOS tem uma barra colorida atravessando a altura toda. Vira o
   fio de cabelo neutro definido lá em cima; a cor da seção continua onde ela
   trabalha: no tile do ícone e na pílula da seleção. */

/* --- O menu, em pastilhas -------------------------------------------------
   A aba corrente vira uma pastilha clara, do jeito que uma seleção se
   comporta numa barra lateral de sistema: o fundo é que marca, não um
   sublinhado. O ponto colorido à esquerda é a cor da seção — é ele que o
   olho encontra antes de a palavra ser lida. */
/* Com ícone, cada item ficou mais largo. O respiro entre eles encolhe para
   a fileira caber num notebook de 13 polegadas sem quebrar linha. */






/* --- Foco visível ---------------------------------------------------------
   Um halo na cor da seção, e não o contorno do navegador. Quem navega por
   teclado precisa ver onde está; quem não navega nunca vê isto. */
:focus-visible {
  outline: 2px solid color-mix(in srgb, var(--acento) 70%, transparent);
  outline-offset: 2px;
  /* SEM `border-radius` AQUI. A regra tinha um, e ele não estilizava o
     contorno: aplicava 6px ao PRÓPRIO elemento. Como `.botao` define 9px com
     a mesma especificidade e vem antes no arquivo, `:focus-visible` vencia —
     e cada botão ENCOLHIA OS CANTOS ao ser focado pelo Tab. O `outline` já
     segue a forma do elemento sozinho. */
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 16%, transparent);
}

/* --- As superfícies -------------------------------------------------------
   Um fio de luz no alto de cada cartão. É um pixel translúcido que imita a
   quina de uma peça de vidro pegando luz de cima — o mesmo truque que faz um
   botão de sistema parecer levemente abaulado em vez de chapado. */
.caixa {
  background: linear-gradient(180deg, var(--vidro-alto), var(--vidro-baixo)), var(--papel);
  border-color: color-mix(in srgb, var(--acento) 10%, var(--borda));
  /* Sem sombra: ver a nota em `.caixa`, acima. A quina clara no topo fica —
     ela não é elevação, é a luz que define a borda superior do material. */
  box-shadow: var(--quina-forte);
}

/* --- Os botões ------------------------------------------------------------
   Degradê de cima para baixo e uma linha clara no topo. É o que separa um
   botão de um retângulo pintado: a peça parece ter volume e, ao ser
   apertada, afunda. */
.botao, button {
  background: linear-gradient(180deg, var(--botao-alto) 0%, var(--botao-baixo) 100%);
  /* A BORDA SAI DO MESMO PAR DO FUNDO. Escrita como `--ardosia-600` lá em
     cima, ela virava um fio claro em volta do botão escuro no tema escuro —
     porque o 600 é tinta, e tinta clareia. */
  border-color: var(--botao-baixo);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22),
              0 1px 2px var(--sombra-cor);
}
.botao:hover, button:hover {
  background: linear-gradient(180deg, var(--botao-alto-hover) 0%, var(--botao-baixo-hover) 100%);
}
.botao:active, button:active {
  background: var(--ardosia-800);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.20);
  transform: translateY(0.5px);
}

.botao.secundario, button.secundario {
  background: linear-gradient(180deg, var(--vidro-alto) 0%, var(--papel) 100%);
  box-shadow: var(--quina), 0 1px 2px rgba(30, 42, 50, 0.08);
}
.botao.secundario:hover, button.secundario:hover {
  border-color: color-mix(in srgb, var(--acento) 45%, var(--borda));
  color: var(--acento);
}

/* --- As sub-abas ---------------------------------------------------------- */
.subabas a.ativa,
.subabas button.ativa,
.subabas button.ativa:hover {
  color: var(--acento);
  box-shadow: var(--quina), 0 1px 2px rgba(30, 42, 50, 0.10);
}

/* --- Os números do Painel -------------------------------------------------
   Cada um com uma faixa de cor no alto, e o número na cor da faixa. O que
   estava em cinza sobre branco agora se lê de longe: «quantos precisam de
   contato hoje» é a primeira pergunta do dia, e ela merece a cor mais forte
   da tela. */
.numeros .numero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg, var(--vidro-alto), var(--vidro-baixo)), var(--papel);
  border-color: var(--borda);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9),
              0 1px 2px rgba(30, 42, 50, 0.05),
              0 6px 16px -12px rgba(30, 42, 50, 0.25);
}
.numeros .numero::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 3px;
  background: var(--faixa, var(--ardosia-300));
}
.numeros .numero .valor { color: var(--faixa, var(--tinta)); }

/* A ordem é a do template, e ela é a ordem da urgência. */
.numeros .numero:nth-child(1) { --faixa: var(--coral-600); }
.numeros .numero:nth-child(2) { --faixa: #B8791F; }
.numeros .numero:nth-child(3) { --faixa: #2C6FB5; }
.numeros .numero:nth-child(4) { --faixa: #1F8E96; }

/* Sem urgência, sem alarme: zero pendência não pode ficar vermelho, senão a
   cor perde o significado no dia em que houver vinte. */
/* Substituída na camada do vidro, mais abaixo: apagar os QUATRO deixava a
   fileira inteira cinza numa base nova, e cor que nunca aparece não ensina
   nada. Só os dois primeiros — que são os alarmes — apagam. */

/* --- As etiquetas ---------------------------------------------------------
   Fundo tingido, texto na mesma cor escura, borda de um fio. Etiqueta
   chapada de cor forte briga com o texto ao redor; tingida, ela se lê como
   uma marca e não como um aviso. */
.etiqueta {
  border: 1px solid transparent;
  font-weight: 560;
  letter-spacing: 0.005em;
}
.etiqueta.ok      { background: var(--ok-fundo);      border-color: var(--ok-borda);      color: var(--ok-tinta); }
.etiqueta.acento  { background: var(--erro-fundo);    border-color: var(--erro-borda);    color: var(--erro-tinta); }
.etiqueta.ruim    { background: var(--erro-fundo);    border-color: var(--erro-borda);    color: var(--erro-tinta); }
.etiqueta.atencao { background: var(--atencao-fundo); border-color: var(--atencao-borda); color: var(--atencao-tinta); }
/* `--contraste`, e NÃO `black`.
   -------------------------------------------------------------------------
   O fundo destas duas é a cor da seção lavada com `--claro`, que no tema
   escuro vale `#1E272F`. O texto era lavado com preto LITERAL, que não vira
   com o tema: no escuro, fundo e texto escureciam juntos. Medido no
   navegador em 11/09/2026, tema escuro: **1,76:1** no cabeçalho de tabela e
   **1,87 a 2,31:1** na etiqueta neutra, contra os 4,5:1 que texto pequeno
   exige. São ~126 etiquetas neutras e ~38 cabeçalhos numéricos espalhados
   pelas telas — a palavra continuava lá, desenhada, e simplesmente não se
   lia.

   `--contraste` é preto no tema claro e branco no escuro. É o mesmo token
   que o rótulo do painel já usa, e é o que faz a tinta virar para o lado
   contrário do fundo em vez de acompanhá-lo.

   A proporção cai de 78% para 60% porque a conta de contraste é a mesma nos
   dois temas e 78% não sobrava margem em nenhum: com 60% o pior par do tema
   claro dá 7,04:1 e o pior do escuro 5,13:1. A etiqueta continua tingida da
   cor da seção — ela só deixa de ser tingida ao ponto de sumir. */
.etiqueta.neutra  {
  background: color-mix(in srgb, var(--acento) 9%, var(--claro));
  border-color: color-mix(in srgb, var(--acento) 22%, var(--claro));
  color: color-mix(in srgb, var(--acento) 60%, var(--contraste));
}

/* --- As tabelas -----------------------------------------------------------
   Cabeçalho tingido pela seção e linha de destaque na passagem do mouse. O
   zebrado sai: com cabeçalho colorido, ele vira ruído. */
.tabela thead th {
  background: color-mix(in srgb, var(--acento) 7%, var(--claro));
  /* Pelo mesmo motivo da etiqueta neutra, logo acima: era `black` literal, e
     no tema escuro o nome da coluna dava 1,76:1 sobre o próprio cabeçalho. */
  color: color-mix(in srgb, var(--acento) 60%, var(--contraste));
  border-bottom-color: color-mix(in srgb, var(--acento) 20%, var(--borda));
}
.tabela tbody tr:hover { background: color-mix(in srgb, var(--acento) 5%, var(--claro)); }

/* --- Os avisos ------------------------------------------------------------
   Uma barra de cor à esquerda, como uma marca de margem. A barra é o que
   permite distinguir os três tipos com o canto do olho, sem ler. */
.aviso { border-left: 3px solid color-mix(in srgb, var(--acento) 55%, var(--claro)); }
.aviso.bom     { border-left-color: var(--ok-tinta); }
.aviso.ruim    { border-left-color: var(--erro-tinta); }
.aviso.atencao { border-left-color: var(--atencao-tinta); }

/* --- O rodapé da versão ---------------------------------------------------
   ESTA REGRA VENCE a cor declarada em `.rodape-versao` lá em cima — é ela que
   pinta. A 40% de acento o pior caso ficava em 4,32:1 no claro
   (Oportunidades) e 4,41:1 no escuro (Leads): abaixo dos 4,5, num texto de
   12px que base.html diz existir justamente para ser lido. A 25% o pior caso
   sobe para 4,52:1 no claro e 5,04:1 no escuro, e o rodapé continua tingido
   pela seção. */
.rodape-versao { color: color-mix(in srgb, var(--acento) 25%, var(--suave)); }

/* --- Quem pediu menos movimento ------------------------------------------
   Preferência do sistema operacional, respeitada. Enjoo de movimento é uma
   condição real, e a animação aqui é decoração. */
@media (prefers-reduced-motion: reduce) {
  /* NÃO se apaga a animação de tudo.
     -----------------------------------------------------------------------
     Era `* { animation: none !important }`, e isso incluía o anel do botão
     ocupado — que, junto com o `color: transparent` que esconde o rótulo,
     deixava um botão VAZIO e parado. Quem pediu menos movimento ficava sem
     nenhum sinal de que a ação estava em curso.

     «Reduzir movimento» no iOS não desliga indicador de atividade: troca
     animação ESPACIAL (deslizar, escalar) por esmaecer. Some o que se move
     pela tela; fica o que gira no lugar, mais devagar. */
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }
  .botao:active, button:active { transform: none; }
  /* O que existe para dizer «estou trabalhando» continua girando. */
  .botao.ocupado::after, button.ocupado::after, .progresso {
    animation-duration: 2s !important;
    animation-iteration-count: infinite !important;
  }
}

/* =============================================================================
   Os ícones
   =============================================================================

   Tamanho em `em` e não em pixel: o ícone cresce e encolhe com o texto ao
   lado dele, em vez de ficar grande demais num rótulo pequeno e sumir num
   título. `vertical-align` de -0.14em porque o centro óptico de um glifo
   fica acima da linha de base — alinhar pelo meio matemático deixa o ícone
   parecendo alto.
   ========================================================================== */

.i {
  width: 1.06em;
  height: 1.06em;
  flex: none;
  vertical-align: -0.14em;
  /* Preenchido, não de traço: a 17px na tela, um contorno fino é quase nada
     de tinta e o que sobra parece rabisco. Silhueta é o que o olho reconhece
     antes de conseguir enxergar detalhe. */
  fill: currentColor;
}

/* No menu, o ícone substitui o ponto colorido: ele diz a mesma coisa (a cor
   da seção) e ainda diz O QUE é a seção. O ponto vira redundância. */

/* Nos rótulos dos números do Painel, o ícone toma a cor da faixa do cartão —
   a mesma do número grande. Duas peças na mesma cor leem-se como uma. */
/* O rótulo alinha pelo TOPO, não pelo meio: «Precisam de contato hoje» quebra
   em duas linhas e os outros três não. Alinhado pelo meio, o ícone do
   primeiro cartão desceria e a fileira perderia a linha comum. */
.numeros .numero .rotulo {
  display: flex;
  align-items: flex-start;
  gap: 0.34rem;
  min-height: 2.4em;
}
.numeros .numero .rotulo .i {
  color: var(--faixa, var(--ardosia-300));
  width: 1.15em; height: 1.15em;
  margin-top: 0.05em;
}

/* Dentro de um botão, o ícone vem antes do texto com um respiro pequeno. */
.botao .i, button .i { margin-right: 0.34rem; vertical-align: -0.16em; }

/* =============================================================================
   VIDRO CLARO — 01/09/2026
   =============================================================================

   Decisão do gestor depois de ver as três direções: a do Painel claro, com o
   efeito de vidro da direção A, mas com a cor mais viva sem chegar ao escuro
   dela. Este bloco é essa mistura, e ele vem DEPOIS da camada de cor porque
   refina o que ela já montou — nada aqui reescreve estrutura.

   O QUE FAZ UMA SUPERFÍCIE PARECER VIDRO, e é só isto:

     1. ela deixa passar. Branco a 100% é papel; a 76% é vidro leito sobre
        alguma coisa. Por isso o fundo ganhou mais cor: vidro sobre cinza não
        parece vidro, parece cinza;
     2. ela DESFOCA o que passa, e satura antes de desfocar. Desfocar
        dessatura — sem o `saturate`, a cor que atravessa chega lavada e a
        peça parece suja em vez de translúcida;
     3. ela tem um fio de luz na quina de cima. Um pixel branco a 90% é o que
        diz que a peça tem espessura.

   O `@supports` não é zelo: onde não há desfoque, a superfície precisa ficar
   OPACA. Translúcida sem desfoque deixa o texto de baixo atravessar as
   letras de cima, e a tela fica ilegível — que é bem pior que sem efeito.
   ========================================================================== */

:root {
  /* O branco do vidro. Abaixo de 0,72 o texto cinza começa a brigar com o
     que passa por trás; acima de 0,84 o efeito some. */
  --vidro-claro: rgba(255, 255, 255, 0.78);
  --vidro-fundo: rgba(255, 255, 255, 0.62);
  --quina: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

/* --- A luz por trás -------------------------------------------------------
   Três focos em vez de um: o da seção no alto à esquerda, um quente à
   direita e um frio embaixo. É a mistura deles que dá o que o vidro tem
   para filtrar — com um foco só, metade da tela fica cinza e o efeito
   aparece só num canto. */
/* O FUNDO É LISO, como o de uma janela do Mac.
   -------------------------------------------------------------------------
   Eram quatro degradês empilhados: um halo da cor da seção no alto à
   esquerda, um âmbar à direita, um azul embaixo e um degradê vertical por
   trás de tudo — a «mesa» sobre a qual as caixas pousavam.

   Cada um era defensável sozinho e juntos faziam uma coisa só: a tela parecia
   uma PÁGINA, não uma janela. Nenhuma janela do macOS tem fundo pintado; o
   conteúdo fica sobre o material do sistema, e o que dá profundidade é o
   contraste entre o fundo neutro e a superfície branca do conteúdo — não uma
   aguada colorida atrás.

   E havia um custo prático: o halo mudava de cor conforme a seção aberta, e
   com ele a leitura da mesma caixa branca mudava de tela para tela. */
body { background: var(--fundo); }

/* --- As superfícies ------------------------------------------------------- */
.caixa,
.numeros .numero,
.tabela-rolagem,
.vazio {
  background: var(--vidro-claro);
  border-color: color-mix(in srgb, var(--acento) 14%, var(--vidro-alto));
  box-shadow: var(--quina),
              0 1px 2px rgba(30, 42, 50, 0.04),
              0 22px 44px -30px color-mix(in srgb, var(--acento) 55%, rgba(30, 58, 72, 0.6));
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .caixa,
  .numeros .numero,
  .tabela-rolagem,
  .vazio {
    background: var(--vidro-fundo);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
  }
}

/* Um exemplo de código para quem vai programar contra esta porta.
   `pre-wrap` explícito e fonte própria: `.mono` é `white-space: nowrap` — ele
   nasceu para CNPJ e valor em tabela, coisas que não podem quebrar —, e com
   ele o JSON de exemplo saía numa linha só, atravessando a tela. */
.exemplo-json {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  margin: 0.4rem 0 0.8rem;
  padding: 0.7rem 0.85rem;
  border-radius: var(--raio-p);
  background: var(--vidro-alto);
  border: 1px solid var(--borda);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem;
  line-height: 1.5;
}

/* O AVISO DE FALHA: a prova se recolhe, a saída não.
   ---------------------------------------------------------------------------
   Duas correções moram nesta caixa, e a segunda desfez o exagero da primeira.

   Antes eram dois blocos vermelhos de meia tela, cada um com a resposta crua
   do fornecedor em inglês e entre chaves. Vermelho demais é o mesmo que
   vermelho nenhum — quando a tela inteira grita, nada nela chama atenção. A
   resposta foi recolher a caixa inteira atrás de uma seta.

   Recolher a caixa inteira levou junto o BOTÃO que tirava a reunião do
   travamento. Quem abriu a gaveta uma vez achava «num lugar bem ruim de
   achar»; quem não abriu não tinha saída nenhuma na tela.

   A regra que ficou, e que vale para toda falha desta base:

     · o SINAL forte é pequeno — a exclamação —, e a moldura é discreta;
     · o QUE HOUVE e o QUE FAZER ficam sempre visíveis;
     · a AÇÃO fica no fim da linha do aviso, que é onde ação de aviso mora
       nesta interface, e nunca dentro de um `<details>`;
     · a RESPOSTA CRUA do fornecedor é o único conteúdo recolhido, porque é
       evidência, e evidência não é aviso. */
/* GRADE, E NÃO ORDEM DO ARQUIVO. O HTML escreve as partes na ordem em que se
   LÊ — o que houve, o que fazer, o botão, a prova —, que é a ordem que o
   celular mostra e a que o leitor de tela fala. Na tela larga a grade traz o
   botão de volta para o alto à direita sem mexer no HTML. */
.falha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 0.8rem;
  align-items: start;
  border: 1px solid var(--erro-borda);
  border-radius: var(--raio);
  background: var(--erro-fundo);
  margin: 0.8rem 0;
  padding: 0.6rem 0.8rem 0.7rem;
}
/* A FILEIRA É ESCOLHIDA PELA GRADE, E NÃO NUMERADA À MÃO — 22/09/2026.
   -------------------------------------------------------------------------
   DEFEITO REAL, com a imagem da tela na mão: na ficha de uma reunião cuja
   gravação ainda não virou texto, DOIS PARÁGRAFOS APARECIAM IMPRESSOS UM
   POR CIMA DO OUTRO, ilegíveis.

   A causa é esta linha, e ela era exata: `grid-row: 2` pregava TODO
   `.falha-frase` na mesma célula. Aquele bloco tem duas frases — a que
   explica por que não há nota e a que explica a diferença entre «continuar»
   e «refazer do zero» — e duas ações, «Continuar a transcrição» e «Refazer
   do zero». Duas coisas na mesma célula de uma grade não brigam por espaço:
   **elas se empilham**, uma desenhada por cima da outra. O mesmo valia para
   os dois botões, em `grid-row: 1` da coluna 2.

   Numerar fileira à mão só funciona enquanto houver exatamente um elemento
   de cada classe — quer dizer, enquanto ninguém acrescentar a segunda frase
   que o bloco precisava ter. Com a coluna escrita e a fileira deixada à
   grade, o segundo parágrafo cai na fileira seguinte sozinho, e o terceiro
   também. É a regra que não volta a quebrar na próxima frase que alguém
   escrever aqui. */
.falha-linha  { grid-column: 1; grid-row: 1; }
.falha-frase  { grid-column: 1; }
.falha-prova  { grid-column: 1; }
.falha-acao   { grid-column: 2; justify-self: end; }
.falha-linha {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  font-size: 0.92rem;
  /* A linha divide altura com o botão ao lado. Sem o mínimo ela encolhe e
     cresce conforme o botão exista ou não, e duas fichas deixam de se
     parecer. */
  min-height: 2.1rem;
}
/* A exclamação. Redonda e cheia, como o sinal de alerta do iOS — e com o
   tamanho fixo em `rem` para não encolher junto com o texto. */
.marca-erro {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15rem; height: 1.15rem;
  border-radius: 50%;
  background: var(--erro-tinta); color: var(--papel);
  font-size: 0.8rem; font-weight: 700; line-height: 1;
}
.falha .motivo { color: var(--erro-tinta); }
/* A ação no fim da primeira linha: é o mesmo canto em que ela está na barra do
   cabeçalho, e procurar botão em dois cantos diferentes é o que faz uma tela
   parecer improvisada. */
.falha-acao { margin-left: auto; }
.falha-frase { margin: 0.4rem 0 0; }
.falha-prova { margin-top: 0.5rem; }
/* O resumo é DISCRETO de propósito: ele não disputa atenção com o botão ao
   lado. Quem quer a resposta do fornecedor procura por ela; quem quer sair do
   erro não deve tropeçar nela primeiro. */
.falha-prova > summary {
  display: inline-flex; align-items: center; gap: 0.3rem;
  cursor: pointer;
  list-style: none;
  font-size: 0.8rem; color: var(--suave);
}
.falha-prova > summary::-webkit-details-marker { display: none; }
.falha-prova > summary::before {
  content: "›";
  display: inline-block;
  font-size: 1rem; line-height: 1;
  transition: transform 0.15s ease;
}
.falha-prova[open] > summary::before { transform: rotate(90deg); }
.falha-prova > summary:focus-visible {
  outline: 2px solid var(--acento); outline-offset: 2px;
  border-radius: var(--raio-p);
}
/* A resposta crua rola dentro da própria caixa: ela pode ter dois mil
   caracteres, e um JSON de fornecedor esticando a página é como o defeito
   começou. */
.falha .resposta-crua {
  /* `.mono` é `white-space: nowrap`, porque nasceu para CNPJ e valor em
     tabela — coisas que não podem quebrar. Aqui é o contrário: uma resposta
     de fornecedor numa linha só vira uma barra de rolagem horizontal, e
     ninguém rola de lado para ler um erro. */
  white-space: pre-wrap;
  max-height: 9rem; overflow: auto;
  margin: 0.4rem 0 0;
  padding: 0.5rem 0.6rem;
  border-radius: var(--raio-p);
  background: var(--papel);
  border: 1px solid var(--erro-borda);
  font-size: 0.78rem; line-height: 1.45;
  overflow-wrap: anywhere;
}
/* NO CELULAR A AÇÃO DESCE, DEPOIS DA FRASE, e isso não é enfeite: espremido
   ao lado do título o botão fica pequeno demais para o polegar, e acima da
   frase ele convidaria a clicar antes de ler «ponha crédito na conta» — um
   clique que ainda ia falhar. Aqui a grade só deixa de mandar, e as partes
   caem na ordem em que o HTML as escreveu. */
@media (max-width: 640px) {
  .falha { grid-template-columns: minmax(0, 1fr); }
  .falha-acao { grid-column: 1; grid-row: 3; justify-self: stretch;
                margin: 0.6rem 0 0; }
  .falha-prova { grid-row: 4; }
  .falha-acao .botao { width: 100%; }
}

/* A CAIXA COM UM PAINEL ABERTO SOBE INTEIRA.
   ---------------------------------------------------------------------------
   RELATO DA COMERCIAL, 08/09/2026: na fila de discagem, abrir «Reunião
   marcada» mostrava o painel pela metade — o cartão de Histórico, que vem
   depois, era desenhado por cima dele. O painel tem `z-index: 20`, o
   Histórico não tem z-index nenhum, e mesmo assim o Histórico ganhava.

   A CAUSA É A LINHA LOGO ACIMA. `backdrop-filter` faz do elemento um CONTEXTO
   DE EMPILHAMENTO, e dentro de um contexto o z-index só compete com os irmãos
   de dentro. O 20 do painel vale entre os filhos do cartão de Telefones; lá
   fora, quem disputa com o Histórico é o CARTÃO, e ele não tem z-index — logo
   perde para quem vem depois na página. O painel foi junto.

   É a terceira vez que `backdrop-filter` cobra este pedágio nesta folha: já
   tinha ancorado o menu da conta dentro do trilho e a folha de ajuda dentro
   do cartão — as duas anotadas acima. Aqui o efeito é outro, mas a origem é a
   mesma, e por isso a regra é escrita para os TRÊS painéis flutuantes de uma
   vez, e não só para o que a comercial encontrou.

   Sobe pouco de propósito: 3 passa na frente dos cartões seguintes e continua
   passando POR BAIXO da barra de título grudada no topo (15) e do trilho.
   Painel que cobre a barra de navegação troca um defeito por outro. */
.caixa:has(details[open] > .painel-data),
.caixa:has(.menu-acoes[open]),
.caixa:has(.ajuda.aberta),
.caixa:has(.ajuda:hover),
.caixa:has(.ajuda:focus-visible) {
  position: relative;
  z-index: 3;
}

/* Caixa dentro de caixa volta a ser sólida. Vidro sobre vidro escurece o que
   está atrás duas vezes, e a peça de dentro fica mais suja que a de fora —
   que é o contrário do que a profundidade deveria dizer. */
.caixa .caixa,
.caixa .numero {
  background: var(--vidro-alto);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* --- Os quatro números: a pastilha de cor --------------------------------
   O ícone deixa de ser um desenho colorido ao lado do rótulo e vira uma
   PEÇA: quadrado arredondado, degradê de cima para baixo, fio de luz na
   quina e sombra TINGIDA da própria cor.

   A sombra tingida é o truque que mais rende. Sombra cinza faz a peça
   parecer papel recortado; sombra da cor dela faz parecer que a peça tem
   luz própria — e é isso que dá o brilho que se quer olhar. */
.numeros .numero { border-left-width: 1px; }
.numeros .numero::before { display: none; }

.numeros .numero .rotulo .i {
  width: 34px;
  height: 34px;
  padding: 7.5px;
  box-sizing: border-box;
  border-radius: var(--raio-g);
  color: #fff;
  margin-top: -0.15em;
  /* O ÍCONE no brilho do WhatsApp (17/10/2026); o número e o rótulo
     continuam em `--faixa`, que precisa de contraste de texto. */
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--faixa-icone, var(--faixa)) 74%, var(--claro)) 0%,
              var(--faixa-icone, var(--faixa)) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55),
              0 5px 12px -4px color-mix(in srgb, var(--faixa-icone, var(--faixa)) 85%, transparent);
}
.numeros .numero:nth-child(1) { --faixa-icone: var(--icone-coral); }
.numeros .numero:nth-child(2) { --faixa-icone: var(--icone-laranja); }
.numeros .numero:nth-child(3) { --faixa-icone: var(--icone-azul); }
.numeros .numero:nth-child(4) { --faixa-icone: var(--icone-turquesa); }

.numeros .numero .rotulo {
  gap: 0.6rem;
  color: color-mix(in srgb, var(--faixa) 72%, var(--contraste));
}

.numeros .numero .valor {
  letter-spacing: -0.035em;
  color: var(--faixa, var(--tinta));
}

/* Sem urgência, sem brilho — mas SÓ nos dois primeiros, que são os alarmes.
   «Oportunidades abertas» e «Empresas na base» não alarmam nada: são o
   tamanho da operação, e ficam coloridos sempre. Apagar os quatro deixava a
   fileira inteira cinza numa base nova, e aí a cor não dizia nada. */
.numeros .numero:nth-child(-n+2):not(.destaque) { --faixa: var(--ardosia-300); --faixa-icone: var(--icone-cinza); }
.numeros .numero:nth-child(-n+2):not(.destaque) .rotulo { color: var(--suave); }
.numeros .numero:nth-child(-n+2):not(.destaque) .valor { color: var(--ardosia-400); }

/* --- O cabeçalho fica um pouco mais vivo --------------------------------- */
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .trilho {
    background: color-mix(in srgb,
                color-mix(in srgb, var(--trilho-fundo) 86%, var(--acento)) 90%,
                transparent);
  }
}

/* --- As barras de progresso do desempenho -------------------------------
   Sulco escavado e barra com brilho no topo: o vão fundo é o que faz a
   barra parecer encaixada, e não desenhada por cima. */
.placar-item { background: var(--vidro-alto); }

/* --- As pílulas ----------------------------------------------------------- */
.etiqueta { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7); }

/* --- Onde o vidro NÃO entra ----------------------------------------------
   Campo de formulário fica sólido. Vidro atrás de um campo de texto faz o
   que está sendo digitado competir com o que passa por trás, e digitar é a
   última coisa que se pode dificultar numa ferramenta de trabalho. */
input, textarea { background: var(--papel); }
/* O `select` ganha o fundo com a seta JUNTO — `background` sozinho apagaria
   a imagem do chevron, e o menu suspenso voltaria a parecer caixa de texto.
   Foi o que aconteceu na primeira tentativa. */
select {
  background-color: var(--papel);
  background-image: var(--chevron);
}

/* A regra de comissão dita em uma frase, acima dos campos.
   Estava espalhada em quatro dicas de tamanhos diferentes debaixo de cada
   campo — e era isso que serrilhava a fileira: cada coluna terminava numa
   altura, e a linha de baixo da grade saía torta. Explicação que vale para
   os quatro campos pertence a um lugar só, e lida uma vez. */
.regra-em-palavras {
  background: var(--acento-clara, #EAF3F4);
  border: 1px solid var(--acento-borda, #C9E2E4);
  border-radius: var(--raio);
  padding: 0.85rem 1.05rem;
  margin: 0 0 1.1rem;
  max-width: 68ch;
}

/* E as dicas passam a ser de uma linha só, com altura reservada: com altura
   fixa, os quatro campos terminam na mesma linha mesmo quando um texto é
   maior que o outro. */
.grade-campos { align-items: start; }
/* A altura reservada embaixo de cada campo servia para as dicas terminarem
   na mesma linha. As dicas foram para o «?» do rótulo, então essa reserva
   virou espaço morto — e espaço morto é justamente o que o gestor pediu
   para tirar. */
.grade-campos .dica { min-height: 0; }

/* A margem que desalinhava a régua das metas.
   `label` tem `margin-top` para separar campos empilhados, e
   `label:first-of-type` a zera — o que funciona numa coluna e QUEBRA numa
   grade: só o primeiro campo perdia a margem, e a fileira inteira ficava
   16px mais baixa que ele. Foi o que o gestor viu como «bagunçado».

   Numa grade quem espaça é o `gap`. Margem por elemento dentro de grade é
   sempre briga — some com ela e o alinhamento volta sozinho. */
.grade-campos > label { margin: 0; }

/* ------------------------------------------------------------------ *
 * A lista de escolhas: rádios e caixas com explicação ao lado
 * ------------------------------------------------------------------ *
 * Existe porque a forma de fechar o mês não cabe num campo. São três
 * caminhos, e cada um tem uma consequência que só se descobre no fim do mês
 * — então a consequência fica escrita ao lado da opção, e não numa dica
 * embaixo que ninguém lê depois de já ter clicado.
 *
 * O rótulo inteiro é clicável, inclusive o texto explicativo: alvo pequeno
 * demais é a diferença entre configurar certo e configurar de novo. */
.escolha { display: grid; gap: 0.55rem; margin: 0.9rem 0 1rem; max-width: 68ch; }

.escolha .opcao {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.6rem;
  align-items: start;
  margin: 0;
  padding: 0.7rem 0.85rem;
  font-weight: 400;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--vidro-baixo);
  cursor: pointer;
}
.escolha .opcao:hover { border-color: var(--acento-borda, #C9E2E4); }

/* A opção escolhida fica marcada pela cor da seção, e não só pela bolinha:
   a bolinha tem 13px e some numa tela de reunião com o sol batendo. */
.escolha .opcao:has(input:checked) {
  border-color: var(--acento, #3D5361);
  background: var(--acento-clara, #EAF3F4);
}

.escolha .opcao > input { width: auto; margin: 0.2rem 0 0; }
.escolha .opcao > span { display: block; }
/* Só o TÍTULO da opção vira bloco. O `<b>` que aparece dentro da explicação
   é ênfase no meio da frase — e virava linha própria, quebrando o texto em
   três pedaços que pareciam três coisas diferentes. */
.escolha .opcao > span > b { display: block; font-weight: 600; }
.escolha .opcao .dica {
  display: block;
  font-size: 0.82rem;
  opacity: 0.75;
  margin-top: 0.2rem;
  min-height: 0;
}

/* O campo do dia mora dentro da própria opção do dia fixo. Fora dela, ele
   ficaria pedindo um número mesmo quando a escolha é «último dia útil» — e
   um campo obrigatório que não se aplica é como o formulário mente. */
.escolha .dia-fixo {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  font-size: 0.85rem;
}
.escolha .dia-fixo input { width: 4.5rem; max-width: 100%; margin: 0; }

/* Enquanto a escolha não for «dia fixo», o campo fica apagado e sem foco:
   continua visível (para se saber que existe) mas não convida a digitar. */
.escolha .opcao:not(:has(input:checked)) .dia-fixo { opacity: 0.45; }

/* ------------------------------------------------------------------ *
 * O dinheiro do mês, no topo do quadro
 * ------------------------------------------------------------------ *
 * O pedido que gerou isto não era de software: o vendedor precisa
 * ENXERGAR quanto vai ganhar, e não ficar fazendo conta. Daí três
 * decisões de desenho que não são enfeite:
 *
 *   1. O valor vem ANTES da média, das reuniões e dos pontos. Aqueles são
 *      o caminho; este é o destino, e é o destino que faz o caminho valer.
 *   2. O número é grande o bastante para ser lido de longe, com o corte
 *      tabular ligado — R$ 1.400,00 e R$ 1.600,00 precisam ter a mesma
 *      largura, senão o valor «pula» de um dia para o outro e a tela
 *      parece instável mesmo quando o dinheiro subiu.
 *   3. Quando não paga, o bloco não fica vermelho de alarme: fica neutro,
 *      com o valor que SERIA pago logo abaixo. Vermelho aqui pune; o
 *      número que se perdeu ensina. */
.dinheiro {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 1.1rem 1.2rem;
  margin: 0 0 1.2rem;
  background: linear-gradient(
    180deg,
    color-mix(in srgb, var(--acento, #3D5361) 10%, var(--claro)),
    color-mix(in srgb, var(--acento, #3D5361) 4%, var(--claro)));
}
.dinheiro.paga { border-color: var(--acento-borda, #C9E2E4); }
.dinheiro.nao-paga { background: var(--fundo, #F6F8F9); }

/* Mesma regra da `.numero .rotulo`: 13,6px em maiúscula espaçada é grito,
   não etiqueta. E o `opacity: 0.7` saiu junto — opacidade apaga a cor SEM
   dizer para qual, e o resultado não podia ser medido pela prova de
   contraste. `--suave` é a cor que a prova conhece. */
.dinheiro-rotulo {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--suave);
}
.dinheiro-numero {
  display: block;
  font-size: clamp(2.2rem, 6vw, 3.2rem);
  font-weight: 700;
  line-height: 1.05;
  margin: 0.15rem 0 0.35rem;
  font-variant-numeric: tabular-nums;
  color: var(--acento, #3D5361);
}
.dinheiro.nao-paga .dinheiro-numero { color: inherit; opacity: 0.45; }

.dinheiro-parcelas {
  display: block;
  font-size: 0.9rem;
  line-height: 1.5;
  max-width: 60ch;
}

/* Os passos: o que falta, dito em frases inteiras.
   Frase inteira e não rótulo-com-número porque «faltam 6 reuniões, restam 9
   dias úteis» é uma informação só — quebrada em dois cartões, vira duas, e
   a pessoa tem de juntar de novo na cabeça. */
.dinheiro-passos {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0.9rem 0 0;
  border-top: 1px solid var(--borda);
  display: grid;
  gap: 0.5rem;
  font-size: 0.92rem;
  line-height: 1.45;
  max-width: 70ch;
}
.dinheiro-passos li {
  display: grid;
  grid-template-columns: 1.15rem 1fr;
  gap: 0.55rem;
  align-items: start;
}
.dinheiro-passos svg {
  width: 1.15rem; height: 1.15rem;
  margin-top: 0.15rem;
  opacity: 0.6;
}

/* A tela do módulo desligado. Centrada e curta de propósito: não é um erro
   para investigar, é uma porta com placa. Texto comprido aqui faria parecer
   que a pessoa precisa fazer alguma coisa. */
.vazio-modulo { text-align: center; padding: 2.6rem 1.4rem; max-width: 52ch; margin: 0 auto; }
.vazio-modulo h2 { margin: 0.8rem 0 0.4rem; font-size: 1.15rem; }
.vazio-modulo p { margin: 0.5rem auto; }
.vazio-modulo .vazio-icone svg { width: 2.4rem; height: 2.4rem; opacity: 0.35; }
.vazio-modulo .acoes-rodape { margin-top: 1.6rem; }

/* ------------------------------------------------------------------ *
 * A faixa da organização
 * ------------------------------------------------------------------ *
 * Fora do cabeçalho de propósito. Lá dentro ela disputava espaço com oito
 * abas e perdia: virou uma fresta de 18px, com o nome da empresa invisível,
 * e ao ganhar largura passou por cima de «Configuração». Uma informação que
 * evita alguém trabalhar meia hora na empresa errada não pode ser a primeira
 * a ser esmagada — então ela tem a própria linha. */
.faixa-organizacao {
  background: color-mix(in srgb, var(--ardosia-600) 8%, var(--claro));
  border-bottom: 1px solid var(--borda);
}
.faixa-organizacao form {
  display: flex; align-items: center; gap: 0.6rem; margin: 0;
  max-width: var(--largura-pagina, 1200px);
  margin-inline: auto;
  padding: 0.45rem 1.5rem;
  font-size: 0.85rem;
}
.faixa-organizacao .rotulo { opacity: 0.7; }
.faixa-organizacao select { width: auto; min-width: 12rem; font-weight: 600; }

/* ------------------------------------------------------------------ *
 * A lista de módulos na ficha da organização
 * ------------------------------------------------------------------ */
.lista-modulos { display: grid; gap: 0.6rem; margin-top: 0.9rem; }
.modulo {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.85rem 1rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background: var(--vidro-baixo);
}
/* O ligado ganha a cor da seção, e não só uma etiqueta: numa lista de sete,
   varrer com o olho tem de bastar para saber o que está contratado. */
.modulo.ligado {
  border-color: var(--acento-borda, #C9E2E4);
  background: var(--acento-clara, #EAF3F4);
}
.modulo-texto b { display: block; }
.modulo-texto .dica {
  display: block; font-size: 0.82rem; opacity: 0.75; margin-top: 0.2rem;
  max-width: 62ch;
}
/* O aviso de dependência não é erro — é explicação antecipada. Cor de
   atenção, não de perigo: nada deu errado ainda.

   Estava em `var(--curso, #9E6A16)`, e `--curso` NUNCA FOI DECLARADO: o que
   pintava era sempre o literal do fallback, que por construção não vira com o
   tema — 3,51:1 sobre o papel escuro. `--atencao-tinta` é a cor de atenção de
   verdade, declarada nos dois temas: 5,43:1 no claro e 10,14:1 no escuro. */
.modulo-texto .aviso-preso { opacity: 1; color: var(--atencao-tinta); font-weight: 600; }
.modulo-acao form { margin: 0; }

.linha-vincular {
  display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: end;
  margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px solid var(--borda);
}
.linha-vincular label { font-weight: 600; font-size: 0.85rem; }
/* Fileira: quem espaça é o vão, não a margem de cada rótulo (06/10/2026 —
   o guarda das telas achou o segundo rótulo 16px abaixo do primeiro em
   Configuração → Organizações). */
.linha-vincular > label { margin: 0; }
.linha-vincular input, .linha-vincular select { margin-top: 0.25rem; }
.linha-vincular input[type="email"] { min-width: 18rem; }
tr.apagada td { opacity: 0.5; }

/* O cabeçalho já carrega oito abas; sem reservar espaço, o seletor de
   organização é o primeiro a ser esmagado pelo flex — virou uma fresta de
   18px na primeira medição, com o nome da empresa invisível dentro dela.
   Reservar aqui é mais barato que descobrir depois que alguém trabalhou
   meia hora na organização errada. */
.troca-org select { flex: 0 0 auto; min-width: 8.5rem; }
/* E o menu passa a poder encolher, que é o certo: aba com ícone continua
   reconhecível estreita; seletor sem texto não serve para nada. */

/* ------------------------------------------------------------------ *
 * O «?» que guarda a explicação
 * ------------------------------------------------------------------ *
 * As telas tinham 34 mil caracteres de explicação escritos à vista. Cada
 * texto se defendia sozinho; juntos, empurravam os campos para baixo e
 * faziam procurar o que preencher. Explicação que obriga a rolar para achar
 * o campo deixou de explicar.
 *
 * Três decisões de comportamento, e nenhuma é enfeite:
 *
 *   1. abre no PASSAR o mouse e no CLIQUE. Só hover não existe em celular;
 *      só clique é lento em quem tem mouse. Os dois custam o mesmo;
 *   2. o botão é focável pelo teclado (`tabindex`), então a explicação não
 *      é privilégio de quem usa mouse;
 *   3. em tela estreita o balão vira uma faixa no rodapé, largura inteira.
 *      Balãozinho ancorado num ícone, num celular, ou sai da tela ou fica
 *      com quatro palavras por linha. */
.ajuda {
  position: relative;
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  margin-left: 0.3rem;
  color: var(--acento, #3D5361);
  opacity: 0.45;
  cursor: help;
  border-radius: 50%;
}
.ajuda:hover, .ajuda:focus-visible, .ajuda.aberta { opacity: 1; }
.ajuda:focus-visible { outline: 2px solid var(--acento, #3D5361); outline-offset: 2px; }
.ajuda svg { width: 0.95rem; height: 0.95rem; display: block; }

.ajuda-bolha {
  position: absolute;
  z-index: 60;
  left: 50%;
  bottom: calc(100% + 0.5rem);
  transform: translateX(-50%);
  width: max-content;
  max-width: 34ch;
  padding: 0.7rem 0.85rem;
  border-radius: var(--raio);
  background: var(--ardosia-800);
  color: #EEF3F6;
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  text-transform: none;
  letter-spacing: 0;
  box-shadow: var(--sombra-flutuante);
  /* `visibility` e não `display`: com display:none o balão não tem tamanho,
     e o navegador não consegue decidir para que lado ele cabe. */
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.12s ease;
  /* FORA DO LAYOUT ENQUANTO FECHADO — 23/09/2026, também no computador.
     Invisível, o balão continuava com 34ch de largura; preso a um «?» perto
     da borda direita, ele empurrava a página 14 a 32px para o lado (Agente →
     Configuração, Nova oportunidade — medido no ar). `ajustar()` mede o
     balão já aberto, então `display` não atrapalha o reancoramento. */
  display: none;
}
.ajuda:hover .ajuda-bolha,
.ajuda:focus-visible .ajuda-bolha,
.ajuda.aberta .ajuda-bolha { visibility: visible; opacity: 1; display: block; }

/* A setinha, para o balão apontar de onde veio. */
.ajuda-bolha::after {
  content: "";
  position: absolute;
  top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #223540;
}

/* Perto da borda esquerda ou direita o balão é reancorado pelo JS, que põe
   uma destas classes — sem isso ele sai da tela em campo de canto. */
.ajuda-bolha.para-direita { left: 0; transform: none; }
.ajuda-bolha.para-direita::after { left: 0.8rem; transform: none; }
.ajuda-bolha.para-esquerda { left: auto; right: 0; transform: none; }
.ajuda-bolha.para-esquerda::after { left: auto; right: 0.8rem; transform: none; }

/* A folha do celular. Pendurada no corpo da página pelo JS, e não dentro do
   ícone, porque `position: fixed` dentro de um cartão com `backdrop-filter`
   ancora no CARTÃO — e a faixa abria fora da tela, justamente no aparelho
   onde a explicação mais faz falta. */
.ajuda-folha {
  position: fixed;
  z-index: 90;
  left: 0.75rem; right: 0.75rem; bottom: 0.75rem;
  padding: 0.95rem 1.05rem;
  border-radius: var(--raio);
  background: var(--ardosia-800);
  color: #EEF3F6;
  font-size: 0.92rem;
  line-height: 1.5;
  box-shadow: var(--sombra-flutuante);
}

@media (max-width: 700px) {
  /* No celular quem mostra é a folha; o balão preso ao ícone não aparece. */
  .ajuda:hover .ajuda-bolha,
  .ajuda:focus-visible .ajuda-bolha,
  .ajuda.aberta .ajuda-bolha { visibility: hidden; opacity: 0; display: none; }
  /* E AQUI ELE SAI DO LAYOUT DE VERDADE.
     -----------------------------------------------------------------
     `visibility: hidden` some da vista e continua ocupando lugar. O balão
     tem `width: max-content` e chega a 34ch; preso a um «?» que caiu perto
     da borda direita, ele atravessa a margem — invisível — e a página ganha
     rolagem horizontal num aparelho de 400px. O sintoma é aquele em que
     ninguém acredita: a tela «escorrega para o lado» e não há nada lá.

     Medido em 11/09/2026 no Painel → Custos: 454px de conteúdo numa tela de
     400. O `display: none` que a regra lá de cima evita existe por causa do
     JS que decide para qual lado o balão abre — e esse JS não roda no
     celular (`window.innerWidth <= 700` devolve cedo). Aqui, onde o balão
     nunca aparece, tirar do layout é a única coisa certa a fazer. */
  .ajuda-bolha { display: none; }
  /* E o alvo do dedo cresce: 15px de ícone é alvo de mouse, não de polegar. */
  .ajuda { padding: 0.35rem; margin-left: 0.1rem; }
}

/* ------------------------------------------------------------------ *
 * A grade de permissões
 * ------------------------------------------------------------------ *
 * Seções nas linhas, ações nas colunas — a forma que qualquer gestor
 * reconhece de outros sistemas, e que não precisa ser aprendida. Cada perfil
 * fica dobrado num `details`: sete perfis abertos ao mesmo tempo seriam sete
 * grades, e ninguém acha a que veio configurar. */
details.perfil {
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 0.8rem 1rem;
  margin-bottom: 0.6rem;
  background: var(--vidro-baixo);
}
details.perfil > summary {
  cursor: pointer;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem;
}
details.perfil[open] > summary { margin-bottom: 0.8rem; }
details.perfil > summary .suave { font-size: 0.82rem; }

.grade-permissoes th.num, .grade-permissoes td.num { text-align: center; }
.grade-permissoes input[type="checkbox"] { width: auto; margin: 0; }
/* Coluna de seção larga, colunas de verbo estreitas: o nome da seção é o que
   se lê, o resto é alvo de clique. */
.grade-permissoes th:first-child, .grade-permissoes td:first-child {
  width: 40%; min-width: 14rem;
}
@media (max-width: 700px) {
  /* A grade rola sozinha em vez de espremer sete colunas num celular. */
  .grade-permissoes { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ---------------------------------------------------------------------------
   USUÁRIOS
   --------------------------------------------------------------------------- */
/* O link do convite. Só aparece quando o e-mail não saiu, e precisa ser fácil
   de copiar inteiro — é longo, e um link de definir senha copiado pela metade
   leva a pessoa a uma página de «convite expirado» que não explica nada. */
.caixa-link { display: grid; gap: 0.5rem; }
.campo-link {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  background: var(--vidro-alto);
}

.linha-situacao {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 0.8rem;
}
.linha-situacao form { margin: 0; }

/* ---------------------------------------------------------------------------
   OS GRUPOS DA RÉGUA DE COMISSÃO
   ---------------------------------------------------------------------------
   A tela mistura três assuntos: o que a pessoa precisa bater, quanto ela
   recebe, e quando o mês fecha. Sem separação visual, o «quando fecha» cai no
   meio das duas parcelas de dinheiro e quebra a leitura justamente onde ela
   mais importa — o gestor está somando, e a tela o interrompe com calendário. */
h3.grupo-regua {
  margin: 1.6rem 0 0.6rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--linha, rgba(61, 83, 97, 0.16));
  font-size: 1.02rem; letter-spacing: 0.01em;
}
h3.grupo-regua:first-of-type { margin-top: 0.4rem; }
h4.grupo-regua-sub {
  margin: 1.1rem 0 0.5rem;
  font-size: 0.92rem; font-weight: 600;
  color: var(--suave);
}

/* A busca é o PRIMEIRO elemento da caixa, e `.linha-vincular` traz uma linha
   de separação em cima — que sem nada acima vira um risco solto no topo. */
.linha-vincular.no-topo { margin-top: 0; padding-top: 0; border-top: 0; }

/* Um campo sozinho numa grade de três colunas estica até a largura da tela e
   um valor em reais fica com dez centímetros de campo vazio à direita. */
.grade-campos.um-campo { grid-template-columns: minmax(0, 22rem); }

/* ---------------------------------------------------------------------------
   A REGRA DA FAIXA, À VISTA
   ---------------------------------------------------------------------------
   Esta é a exceção deliberada à regra de esconder explicação atrás do «?».
   A tabela de faixas é ambígua de um jeito que custa dinheiro: «a partir de
   100 → R$ 2,00» é lido por quase todo mundo como faixa de imposto, em que só
   o excedente muda de preço. Aqui não é: muda o preço do mês inteiro. Quem
   descobrisse a diferença descobriria no dia do pagamento, e explicação que
   evita erro de pagamento não pode depender de alguém passar o mouse. */
.regra-da-faixa {
  margin: 0 0 0.9rem;
  padding: 0.7rem 0.9rem;
  border-left: 3px solid var(--atencao-tinta, #b8860b);
  background: var(--atencao-fundo, rgba(255, 244, 214, 0.6));
  border-radius: 0 8px 8px 0;
  font-size: 0.88rem; line-height: 1.5;
}
/* A da meta de volume não é aviso: é delimitação. Nada dá errado por
   ignorá-la, ela só diz o que aquele campo NÃO é. */
.regra-da-faixa.neutra {
  border-left-color: var(--linha, rgba(61, 83, 97, 0.3));
  background: var(--vidro-alto);
}
.nota-faixa { margin: 0.6rem 0 0; font-size: 0.82rem; }

/* A coluna calculada: texto, não campo — para ninguém tentar digitar nela. */
.faixas td.de, .faixas td.ate {
  color: var(--suave);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* O «de» é calculado e por isso não é campo, mas continua sendo um número
   que a pessoa confere linha a linha — então tem peso de número, e não de
   texto de apoio. */
.faixas td.de { font-weight: 600; color: var(--tinta, inherit); }

/* ---------------------------------------------------------------------------
   O PAINEL: O DIA, A ESTEIRA E OS 30 DIAS
   --------------------------------------------------------------------------- */
/* O bloco «Hoje» é o único da tela sobre o qual a pessoa ainda pode agir —
   todo o resto é passado. Ganha uma borda quente para não se perder no meio
   dos cartões de histórico. */
/* Azul, e não coral: o coral é a cor de alarme desta aplicação, e depois que
   os indicadores ganharam cor ele gritava ao lado deles. Azul é a cor da
   prospecção, que é o assunto deste bloco. */
.caixa.hoje { border-left: 3px solid var(--ios-azul); }

.ritmo { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.ritmo li { display: flex; gap: 0.6rem; align-items: start; font-size: 0.9rem; }
.ritmo li .i { width: 1.05rem; height: 1.05rem; flex: none; margin-top: 0.15rem; opacity: 0.7; }

.tabela.esteira td:first-child { width: 30%; }
.tabela.esteira tr.esteira-topo td { background: rgba(61, 83, 97, 0.04); }
.tabela.esteira tr.esteira-fim td {
  background: rgba(61, 83, 97, 0.06);
  border-top: 2px solid var(--linha, rgba(61, 83, 97, 0.18));
}

/* O gráfico é feito de divs porque trinta barras não justificam uma
   biblioteca — e uma biblioteca a mais é uma coisa a mais que pode não
   carregar na tela que a pessoa abre todo dia de manhã.

   PREFIXO `grafico-` EM TUDO, e não `barra-`: a primeira versão chamava as
   colunas de `.barra`, e o `.barra > span` da barra de andamento do motor de
   busca — outro arquivo, outra tela, escrito meses antes — esticou o traço de
   3px da reunião para a altura inteira da coluna. Nada deu erro; o gráfico só
   ficou dizendo outra coisa. Nome genérico de classe é variável global. */
.grafico-dias {
  display: flex; align-items: flex-end; gap: 3px;
  height: 150px; margin-top: 0.4rem;
  padding-bottom: 1.1rem; position: relative;
}
.grafico-dia {
  flex: 1 1 0; min-width: 0; height: 100%;
  display: flex; flex-direction: column; justify-content: flex-end;
  align-items: stretch; position: relative;
}
.grafico-coluna {
  display: block; position: relative; min-height: 2px;
  background: linear-gradient(180deg, var(--ios-azul), color-mix(in srgb, var(--ios-azul) 55%, var(--claro)));
  border-radius: 3px 3px 0 0;
}
/* Houve reunião naquele dia: o traço fica no TOPO da coluna, e não numa
   coluna separada — o que importa é «neste dia de prospecção também houve
   reunião». */
.grafico-reuniao {
  position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--ios-indigo); border-radius: 3px 3px 0 0;
}
.grafico-venda {
  position: absolute; top: -0.55rem; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--ios-verde);
}
/* 0,6rem são 9,6px: é o texto menor do aplicativo, e por isso é o que menos
   pode ficar lavado. Estava em `var(--tinta-suave, …)` — token inexistente,
   logo sempre o literal, que dava 2,95:1 no tema escuro. */
.grafico-rotulo {
  position: absolute; bottom: -1.05rem; left: 0; right: 0;
  text-align: center; font-size: 0.6rem;
  color: var(--suave);
  overflow: hidden; white-space: nowrap;
}
@media (max-width: 760px) {
  /* Trinta rótulos não cabem num celular; a coluna continua contando a
     história, e o dia exato vive no title. */
  .grafico-rotulo { display: none; }
  .grafico-dias { padding-bottom: 0; height: 110px; }
}

/* ===========================================================================
   A PALETA DO PAINEL — no tom dos ícones do iOS
   ===========================================================================
   Sete matizes do conjunto de cores de sistema da Apple, escolhidas porque o
   gestor pediu «as cores e tons dos ícones do iOS» — e porque elas resolvem um
   problema real desta tela: são sete indicadores lado a lado, e sem cor a
   pessoa lê a posição em vez de ler o número. Cor aqui é IDENTIDADE de cada
   indicador, não decoração: o azul é sempre prospecção, o verde é sempre
   dinheiro, em todo lugar da tela.

   A ORDEM FOI CONFERIDA, e não escolhida por gosto. Índigo e roxo, vizinhos,
   ficam a ΔE 3,3 para quem tem protanopia — indistinguíveis. Trocando a ordem
   e afastando os dois, o pior par vizinho passa a ΔE 17,5, acima do piso. Foi
   medido, não estimado.

   AS COMBINAÇÕES DE MENOR CONTRASTE — verde, laranja e menta — só aparecem
   como fundo de ladrilho com glifo branco e SEMPRE ao lado do rótulo escrito.
   Nenhum número desta tela é dado só pela cor: o número mora em tinta de
   texto, como manda a regra, e a cor fica no ladrilho ao lado dele. Quem não
   distingue as matizes continua lendo a tela inteira.
   --------------------------------------------------------------------------- */
:root {
  --ios-verde:   #34C759;   /* dinheiro, venda ganha */
  --ios-azul:    #007AFF;   /* prospecção: conversas */
  --ios-menta:   #00C7BE;   /* o acumulado do mês */
  --ios-laranja: #FF9500;   /* tempo: dias úteis restantes */
  --ios-indigo:  #5856D6;   /* reuniões */
  --ios-rosa:    #FF2D55;   /* pontos de abastecimento */
  --ios-roxo:    #AF52DE;   /* a nota, a qualidade */
  --ios-cinza:   #8E8E93;   /* tentativa: esforço que ainda não virou nada */
}

/* O ladrilho. É a assinatura visual dos ícones do sistema da Apple: quadrado
   de cantos muito arredondados, gradiente vertical curto do tom claro para o
   base, e o glifo em branco. Sem o gradiente ele vira etiqueta colorida; com
   ele, vira ícone. */
.ladrilho {
  width: 2.1rem; height: 2.1rem; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 30%;
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--tom) 78%, var(--claro)),
              var(--tom));
  box-shadow: var(--sombra-relevo),
              inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.ladrilho .i { width: 1.15rem; height: 1.15rem; color: #fff; }

/* Os cartões de indicador ganham o tom em três lugares: o ladrilho, a borda
   da esquerda e um véu de fundo. O véu é fraco de propósito — 7% — porque o
   que precisa ter contraste é o NÚMERO, não o cartão. */
.placar-item.tom {
  border-left-color: var(--tom);
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--tom) 7%, var(--papel)),
              color-mix(in srgb, var(--tom) 2%, var(--papel)));
}
.placar-item .placar-cabeca {
  display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.45rem;
}
.placar-item .placar-cabeca .placar-rotulo { margin: 0; }
.placar-item.tom .placar-numero { color: var(--tinta); }

/* O estado (bateu / não bateu) continua sendo dito pela borda E por um
   texto — nunca só pela cor. Verde e âmbar, e não verde e vermelho: mês em
   andamento abaixo da meta é «ainda falta», não «reprovado». */
.placar-item.tom.ok    { border-left-color: var(--ios-verde); }
.placar-item.tom.falta { border-left-color: var(--ios-laranja); }

/* Os degraus da esteira, cada um com o seu ponto. O ponto repete a cor que o
   mesmo assunto tem no placar acima — quem vê azul na tabela sabe que é a
   mesma prospecção do cartão azul. */
.esteira .ponto {
  display: inline-block; width: 0.6rem; height: 0.6rem;
  border-radius: 50%; margin-right: 0.5rem;
  vertical-align: 0.02rem;
  background: var(--tom, var(--ios-cinza));
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
}
/* Nada de `display: flex` na célula: transformar um `td` em caixa flexível
   tira dele a largura que a tabela tinha calculado, e a coluna inteira se
   espreme — o rótulo quebrou em três linhas e o fundo da linha ficou pela
   metade. O ponto é `inline-block` e senta ao lado do texto sem mexer no
   layout da tabela. */

/* O título de cada bloco ganha o ladrilho do assunto dele. */
.caixa > h2.com-ladrilho {
  display: flex; align-items: center; gap: 0.6rem;
}

/* A legenda do gráfico. Existe porque a marca sozinha não identifica nada: o
   traço no topo da coluna e o ponto acima dela são formas diferentes, e forma
   sem nome é adivinhação. Cada amostra repete a cor da marca que descreve. */
.legenda-marca {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin-right: 1rem; white-space: nowrap;
  /* As três amostras têm alturas diferentes, e a linha de base de uma caixa
     `inline-flex` é a do PRIMEIRO item — a amostra. Cada legenda ficava numa
     altura (06/10/2026). Alinhar pelo meio da caixa, que é igual nas três. */
  vertical-align: middle;
}
.legenda-marca .amostra { display: inline-block; flex: none; }
.legenda-marca .amostra.coluna {
  width: 0.6rem; height: 0.8rem; border-radius: 2px 2px 0 0;
  background: linear-gradient(180deg, var(--ios-azul), color-mix(in srgb, var(--ios-azul) 55%, var(--claro)));
}
.legenda-marca .amostra.traco {
  width: 0.7rem; height: 3px; border-radius: 2px; background: var(--ios-indigo);
}
.legenda-marca .amostra.ponto-venda {
  width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--ios-verde);
}

/* --- O bloco do dinheiro, nas cores do painel -----------------------------
   Verde quando paga; âmbar, e não vermelho, quando ainda não paga. Mês em
   andamento abaixo da meta é «ainda falta», não «reprovado» — e o vermelho,
   nesta aplicação, é a cor do alarme. Cinza, que era o que havia antes,
   dizia «desligado»: quem abre o painel dia 2 e vê R$ 0,00 apagado entende
   que não tem chance, quando na verdade tem o mês inteiro.
   O valor continua com contraste de texto; a cor está no fundo e na borda. */
.dinheiro.paga {
  border-color: color-mix(in srgb, var(--ios-verde) 45%, var(--claro));
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--ios-verde) 14%, var(--claro)),
              color-mix(in srgb, var(--ios-verde) 4%, var(--claro)));
}
.dinheiro.paga .dinheiro-numero {
  color: color-mix(in srgb, var(--ios-verde) 72%, #06301A);
}
.dinheiro.nao-paga {
  border-color: color-mix(in srgb, var(--ios-laranja) 42%, var(--claro));
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--ios-laranja) 13%, var(--claro)),
              color-mix(in srgb, var(--ios-laranja) 3%, var(--claro)));
}
.dinheiro.nao-paga .dinheiro-numero {
  color: color-mix(in srgb, var(--ios-laranja) 65%, #3A2400);
  opacity: 1;
}
.dinheiro-passos svg { color: var(--ios-indigo); }

/* Um documento de conhecimento que sozinho passa de um quarto da instrução
   está competindo com o método pela atenção do modelo. O número vermelho é o
   aviso que faltava quando dois deles cresceram até pesar o dobro do método. */
.alerta-fatia { color: var(--erro-tinta, #A32E2E); }

/* A resposta que o copiloto deu e que não chegou à vendedora. Recolhida, em
   cinza, e sempre acompanhada do motivo: ela existe para o gestor entender o
   que o modelo tentou dizer, não para competir com as dicas que valeram. */
li.dica.descartada { opacity: 0.72; }
li.dica.descartada summary { cursor: pointer; font-size: 0.85rem; }
li.dica.descartada pre {
  white-space: pre-wrap; word-break: break-word;
  font-size: 0.8rem; margin: 0.5rem 0 0;
  padding: 0.6rem 0.8rem; border-radius: var(--raio);
  background: var(--ardosia-50, #F1F5F7);
  max-height: 22rem; overflow: auto;
}

/* O seletor de «painel de quem». O rótulo é o que faz o gestor descobrir que
   ele pode olhar o mês de outra pessoa — sem ele, o controle parecia a
   etiqueta do próprio login. */
.seletor-painel { gap: 0.45rem; padding: 0.3rem 0.6rem; flex-wrap: nowrap; }
.seletor-painel label { font-size: 0.82rem; color: var(--suave); white-space: nowrap; }

/* A gravação de campo esperando dono. Turquesa e não laranja: não é um erro,
   é um passo que falta — e o passo é de um clique. */
.caixa.confirmar-cliente { border-left: 3px solid var(--turquesa); }
.caixa.confirmar-cliente .filtros { flex-wrap: wrap; }
.subir-gravacao > summary { cursor: pointer; }

/* «Quem falou foi deduzido» com o botão de consertar na mesma linha. O aviso
   e a saída juntos: aviso sem saída ao lado é aviso que a pessoa lê e não
   sabe o que fazer com ele. */
.origem-atribuicao {
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
  margin: 0.6rem 0;
}
.origem-atribuicao form { margin: 0; }

/* O SELETOR DA REUNIÃO AO VIVO, no alto da aba Motor, no Copiloto.

   Pedido do dono do produto em 14/09/2026: «deveria ter um seletor ali
   mostrando que estou selecionando as duas funções na OpenAI ou uma em cada
   LLM», e logo em seguida «no fim não tem nada que confirme».

   O controle é o `.segmentado` que a agenda e a gaveta de aparência já usam —
   não há desenho novo aqui, só a largura e a linha de confirmação embaixo.
   Duas opções lado a lado que são alternativas entre si; dois botões soltos
   diriam «duas coisas que você pode fazer», que é outra frase. */
.arranjo-motor .segmentado { display: flex; max-width: 34rem; }
/* «Personalizado» é ESTADO, não botão: ele entra no segmentado com a mesma
   pinta da opção escolhida e sem cursor de clique. Um botão que não faz nada
   ao ser clicado é o que ensina a desconfiar dos outros dois. */
.arranjo-motor .segmentado > .estado {
  flex: 1;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 30px;
  padding: 0.28rem 0.7rem;
  font-size: 0.82rem; font-weight: 600;
  color: var(--tinta); background: var(--papel);
  border-radius: var(--raio-p);
  box-shadow: var(--sombra-relevo);
  white-space: nowrap; cursor: default;
}
/* A LINHA QUE CONFIRMA O FATO. Ela sai do que está GRAVADO, e é por isso que
   tem peso de texto e não de etiqueta: é a resposta à pergunta «e afinal,
   quem está fazendo o quê?», e não um enfeite do controle. */
.confirma-arranjo {
  margin: 0.7rem 0 0;
  font-size: 0.92rem;
  color: var(--tinta-media);
}
.confirma-arranjo b { color: var(--tinta); }
.confirma-arranjo .separa { color: var(--suave); padding: 0 0.15rem; }
/* O que ainda falta para essa escolha valer. Discreto e presente: o alarme de
   verdade é a faixa vermelha no alto da tela, que lê a mesma conta. */
.falta-arranjo {
  margin: 0.35rem 0 0;
  font-size: 0.85rem;
  color: var(--suave);
}

@media (max-width: 640px) {
  /* NO CELULAR CADA OPÇÃO OCUPA A LARGURA TODA E GANHA 44px de altura — a
     medida de um dedo, que a Apple pede. Os 30px de mesa vêm de
     `.segmentado > button`, que tem uma classe a menos: sem repetir o alvo
     com as duas classes aqui, a regra de mesa venceria por especificidade e a
     de celular seria decoração. É o defeito que `ops/testar_celular.py`
     existe para pegar.

     E `white-space: normal`: «Tudo na OpenAI» e «Uma em cada» lado a lado em
     390px saem cortadas no meio, e rótulo cortado num controle que grava é
     como se escolhe o outro sem querer. */
  .arranjo-motor .segmentado { flex-wrap: wrap; max-width: 100%; }
  .arranjo-motor .segmentado > button,
  .arranjo-motor .segmentado > .estado {
    flex: 1 1 100%;
    min-height: 44px;
    white-space: normal;
  }
}

/* A FAIXA DA VOZ: quem fala, e os quatro números do jeito de falar.

   Numa linha própria da tabela, e não numa coluna: só uma das funções tem
   voz, e uma coluna deixaria as outras seis com uma célula vazia por linha —
   célula vazia lê como «faltou preencher».

   Fundo levemente diferente para a faixa se ler como continuação da linha de
   cima, e não como uma sétima função. É o mesmo recurso das linhas de detalhe
   das listas do Finder. */
.faixa-da-voz > td {
  background: color-mix(in srgb, var(--acento) 5%, transparent);
  border-top: 0;
  padding-top: 0.2rem;
}
.ajustes-da-voz {
  display: flex; flex-wrap: wrap; gap: 0.9rem 1.2rem; align-items: flex-start;
}
.ajuste-voz { display: flex; flex-direction: column; gap: 0.15rem; }
/* NUMA FILEIRA QUEM ESPAÇA É O VÃO (06/10/2026): a mesma briga da régua das
   metas — `label { margin-top }` com `label:first-of-type { margin-top: 0 }`
   deixava «Estabilidade» 16px acima de «Semelhança», «Estilo» e «Velocidade».
   O guarda das telas agora mede «fileira em degrau». */
.ajustes-da-voz > label { margin: 0; }
.ajuste-voz .rotulo-campo { font-size: 0.78rem; }
.ajuste-voz input { width: 7rem; max-width: 100%; font-size: 0.9rem; }
.ajuste-voz.codigo { flex: 1 1 18rem; }
.ajuste-voz.codigo input { width: 100%; }
/* A faixa aceita, embaixo do campo. Escrita e não só no `min`/`max`: a trava
   do navegador só fala quando a pessoa já errou, e o que ela diz é uma frase
   do navegador, em inglês, que não explica de quem é a regra. */
.faixa-do-ajuste { font-size: 0.72rem; color: var(--suave); }

@media (max-width: 900px) {
  /* No celular a tabela vira pilha de cartões, e a faixa vira mais um cartão.
     Sem o fundo, ela se perderia como um cartão solto sem título. */
  .ajustes-da-voz { flex-direction: column; }
  /* `.ajuste-voz.codigo input` repetido aqui de propósito: sem ele, a regra
     de MESA — que tem duas classes e vence por especificidade — continuaria
     mandando no celular. Media query não soma especificidade, e este é o
     defeito que `ops/testar_celular.py` existe para pegar. */
  .ajuste-voz, .ajuste-voz input, .ajuste-voz.codigo input { width: 100%; }
}

/* A AMOSTRA DE VOZ. Largura cheia porque o tocador do navegador encolhe os
   controles até o botão de play virar um alvo pequeno demais para acertar —
   e este é um botão que se aperta várias vezes seguidas, comparando vozes. */
.amostra-de-voz { display: block; width: 100%; max-width: 34rem; }

/* AS CHAVES AGRUPADAS POR FERRAMENTA, na Configuração → Geral.

   O título é o que faz esta lista não ser a lista de 26 credenciais em fila
   que já existiu aqui: as duas chaves da OpenAI param de ser duas linhas
   parecidas uma sobre a outra e passam a estar sob nomes de produto
   diferentes. Por isso ele é grudado no grupo — margem embaixo bem menor que
   em cima — e o grupo inteiro tem respiro entre um e outro. É como o
   Ajustes do Sistema separa as seções de uma lista longa. */
.grupo-ferramenta { margin-top: 2rem; }
.grupo-ferramenta:first-of-type { margin-top: 1rem; }
.titulo-ferramenta {
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
  margin: 0 0 0.5rem; padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--borda);
  font-size: 1.05rem;
}
.titulo-ferramenta a { font-size: 0.82rem; margin-left: auto; }
/* Recolhido por módulo (25/09/2026): o título é o botão de abrir. */
summary.titulo-ferramenta { cursor: pointer; list-style: none; }
summary.titulo-ferramenta::-webkit-details-marker { display: none; }
summary.titulo-ferramenta::before {
  content: "›"; display: inline-block; width: 0.8rem;
  transition: transform 0.15s; color: var(--suave);
}
details[open] > summary.titulo-ferramenta::before { transform: rotate(90deg); }
.resumo-ferramenta { font-size: 0.85rem; font-weight: normal; }

/* O TOTAL DO EXTRATO, fora da tabela.

   Fora dela porque no celular a tabela vira uma pilha de cartões e o `<tfoot>`
   sairia como um cartão sem rótulo — um número solto, que é a pior forma de
   mostrar dinheiro. Aqui ele é uma linha com nome de um lado e valor do
   outro, e continua legível em qualquer largura. */
.total-extrato {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 0.8rem; flex-wrap: wrap;
  margin: 0.8rem 0 0; padding-top: 0.7rem;
  border-top: 1px solid var(--borda);
  font-size: 1.05rem;
}

/* O GASTO DO MÊS, EM REAIS — o primeiro número do Painel → Custos.

   Pedido do gestor em 11/09/2026: «preciso que os valores sejam obtidos
   automaticamente em consulta oficial ao painel da LLM e não uma estimativa
   de valor. E ainda preciso que isso mostre também o valor em reais».

   Ele é GRANDE, e o resto da tela não. A tela responde três perguntas —
   quanto, de onde veio, e de qual função foi —, e só a primeira é a que traz
   alguém aqui. Um número de fatura no mesmo corpo do texto ao redor obriga a
   procurar; do tamanho certo, ele é a primeira coisa que se lê e as outras
   duas continuam disponíveis para quem quiser.

   O botão fica NA MESMA LINHA, à direita, e não embaixo do número: «atualizar»
   é a ação que nasce de olhar o valor e achá-lo velho, e ela precisa estar
   onde o olho já está. No celular a linha quebra e ele desce inteiro — daí o
   `flex-wrap` em vez de duas colunas fixas. */
.fatura-topo {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--e4); flex-wrap: wrap;
}
.fatura-principal { min-width: 0; flex: 1 1 22rem; }
.fatura-rotulo {
  /* 0,75rem é o teto da maiúscula espaçada nesta casa, e `ops/testar_celular`
     cobra: acima disso ela para de ser etiqueta e vira grito — competindo com
     o número, que é o que a pessoa veio ver. */
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--suave);
  display: flex; align-items: center; gap: 0.35rem;
}
/* `tabular-nums` porque é dinheiro: sem ele os algarismos têm larguras
   diferentes e o valor dança a cada atualização da página. E o negativo do
   espaçamento é o que o macOS faz em número grande — no corpo grande, o
   espaçamento normal abre buracos entre os dígitos. */
.fatura-valor {
  font-size: 2.4rem; font-weight: 660; line-height: 1.15;
  letter-spacing: -0.025em; font-variant-numeric: tabular-nums;
  margin-top: 0.15rem;
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
}
.fatura-valor .etiqueta { font-size: 0.72rem; letter-spacing: 0; }
/* A PROCEDÊNCIA, em letra menor e logo embaixo. Ela não é enfeite: um número
   de dinheiro que não diz de onde veio é um número que ninguém confere — e
   foi exatamente esse o defeito que a leitura oficial veio consertar. */
.fatura-origem {
  margin: 0.35rem 0 0; color: var(--suave); font-size: 0.87rem;
  max-width: 62ch;
}
.fatura-acao {
  display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem;
  flex: 0 0 auto;
}
.fatura-acao .suave { font-size: 0.8rem; }
.fatura-acao button { margin: 0; }

/* COLAR A CHAVE SEM SAIR DA TELA.

   O aviso de que falta a chave de administração mora aqui, na tela onde a
   falta importa — então o campo mora aqui também. Uma linha no desktop, em
   coluna no celular: campo de chave é longo, e comprimir os três numa faixa
   estreita é o que faz a pessoa colar metade. */
.colar-chave {
  display: flex; flex-wrap: wrap; align-items: end; gap: 0.5rem;
  margin: 0.6rem 0 0;
}
.colar-chave label { flex: 0 0 100%; font-size: 0.84rem; }
.colar-chave input { flex: 1 1 18rem; min-width: 0; max-width: 100%; margin: 0; }
.colar-chave button { flex: 0 0 auto; margin: 0; }

/* O DIA A DIA DE CADA FORNECEDOR, DOBRADO.

   O total do fornecedor fica no cabeçalho, à vista; a lista de linhas é
   evidência. Aberta, dois fornecedores por um mês inteiro empurram a
   conferência e a tabela de preços para trezentas linhas abaixo — e quem
   abriu a tela para saber quanto vai pagar teria de rolar por cima da
   resposta que veio buscar.

   O triângulo nativo FICA: ele é o que diz que aquilo abre. As outras gavetas
   desta casa que o escondem têm um botão no lugar; aqui o rótulo é a própria
   frase, e sem marca nenhuma ela pareceria um título morto. */
details.dia-a-dia > summary { cursor: pointer; font-weight: 560; }
details.dia-a-dia[open] > summary { margin-bottom: 0.7rem; }
@media (max-width: 600px) {
  .fatura-valor { font-size: 1.9rem; }
  .fatura-acao { align-items: flex-start; }
}

/* A FILA DE SUBIDA. Uma linha por arquivo, com o estado dela à mostra.

   O estado é dito por TEXTO e mostrado por cor, nunca só por cor: quem não
   distingue verde de vermelho tem de conseguir ler a fila igual. A cor é o
   reforço, a palavra é a informação. */
.fila-subida {
  list-style: none; margin: 0.8rem 0 0; padding: 0;
  display: flex; flex-direction: column; gap: 0.3rem;
}
.fila-subida li {
  display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--borda); border-radius: var(--raio);
  background: var(--papel);
  font-size: 0.9rem;
}
.fila-subida li b {
  font-weight: 590;
  /* O nome do arquivo é longo e não pode empurrar o estado para fora da tela;
     mas cortado com reticências no fim, «Visita Fazenda Santa Clara 14-08.m4a»
     e «Visita Fazenda Santa Clara 15-08.m4a» viram a mesma linha. Então ele
     quebra em vez de sumir. */
  overflow-wrap: anywhere; min-width: 0;
}
.fila-subida .estado { margin-left: auto; white-space: nowrap; }
.fila-subida li.andando { border-color: var(--borda-forte); }
.fila-subida li.andando .estado { color: var(--tinta-media); }
.fila-subida li.pronto {
  border-color: var(--ok-borda); background: var(--ok-fundo);
}
.fila-subida li.pronto .estado { color: var(--ok-tinta); }
.fila-subida li.atencao {
  border-color: var(--atencao-borda); background: var(--atencao-fundo);
  color: var(--atencao-tinta);
}
.fila-subida li.ruim {
  border-color: var(--erro-borda); background: var(--erro-fundo);
}
.fila-subida li.ruim .estado { color: var(--erro-tinta); }
/* O estado do arquivo que falhou é uma frase, não um rótulo: ele explica o
   que fazer. Preso à direita numa linha só, ficaria cortado. */
.fila-subida li.ruim .estado { white-space: normal; }

/* Os dois botões da linha da reunião, lado a lado sem quebrar a coluna. */
.acoes-linha { white-space: nowrap; }
.acoes-linha .botao + form { margin-left: 0.35rem; }

/* Ver ou esconder as dicas do copiloto no meio da transcrição.
   Elas ajudam a julgar o copiloto e atrapalham quem está lendo a conversa —
   então ficam, e saem do caminho num clique. */
.alternar-dicas {
  font-size: 0.85rem; color: var(--suave); margin-right: 0.8rem;
  cursor: pointer; user-select: none;
}
.alternar-dicas input { margin-right: 0.3rem; vertical-align: middle; }
.sem-dicas li.dica { display: none; }

/* Avaliação acontecendo agora, na linha da lista. */
/* Como tinta, o escuro: o `--turquesa` vivo dá 1,60:1 sobre branco. Ele
   continua nos FUNDOS acima, que é onde ele foi feito para viver. */
.rodando { color: var(--turquesa-escuro); font-weight: 600; }
.rodando::after {
  content: "…"; display: inline-block; width: 1em; text-align: left;
  animation: reticencias 1.2s steps(4, end) infinite;
}
@keyframes reticencias { 0% { content: ""; } 33% { content: "."; } 66% { content: ".."; } 100% { content: "…"; } }
.aguardando { display: block; margin: 0 0 0.8rem; }

/* A avaliação que falhou, na lista. Vermelha e pequena: o número ao lado
   continua sendo o que vale, e o rótulo diz que a última tentativa não. */
.falhou { color: var(--coral-600, #b3402c); font-size: 0.75rem; font-weight: 600; }

/* O que a reunião apurou, esperando conferência.

   Fica no topo da ficha e precisa parecer trabalho a fazer, não decoração —
   daí a borda de destaque à esquerda, a mesma marca já usada em
   `.confirmar-cliente`. Uma linha por campo, com o valor numa caixa editável:
   corrigir na hora custa menos que aceitar errado e ir consertar depois. */
.apurado { margin: 0 0 var(--e4); }
.apurado > h2, .qualificacao > h2 { font-size: 1rem; margin: 0 0 0.4rem; }

/* Uma caixa só, com uma linha por campo. A primeira versão dava uma caixa a
   cada campo: com cinco campos, a ficha inteira ia para baixo da dobra e a
   pessoa perdia de vista de qual empresa estava falando. */
.lista-apurado {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--borda);
  border-left: 3px solid var(--turquesa);
  border-radius: var(--raio-p); background: var(--papel);
}
.lista-apurado > li { padding: 0.3rem 0.7rem; }
.lista-apurado > li + li { border-top: 1px solid var(--borda); }
.lista-apurado form {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
}
.lista-apurado label { min-width: 10rem; font-weight: 600; }
.lista-apurado input { flex: 1 1 12rem; min-width: 8rem; margin: 0; }
.lista-apurado .origem { font-size: 0.78rem; white-space: nowrap; }
.lista-apurado .botao { padding: 0.28rem 0.7rem; font-size: 0.85rem; }

/* Os fatos já confirmados que não têm coluna própria no cadastro. */
.qualificacao { margin: 0 0 var(--e4); }
.qualificacao-lista { margin: 0; }
.qualificacao-lista > div {
  display: flex; gap: 0.6rem; padding: 0.25rem 0;
  border-bottom: 1px solid var(--borda);
}
.qualificacao-lista dt { min-width: 11rem; font-weight: 600; margin: 0; }
.qualificacao-lista dd { margin: 0; }

/* =============================================================================
   O sistema responde — barra de progresso, botão ocupado, folha, voltar

   Escrito em 03/09/2026, a pedido do gestor: «quando eu vou excluir alguma
   coisa, ou quando eu quero abrir alguma coisa, ele não me dá uma indicação
   de que alguma coisa começou a rodar. Fica sempre uma sensação de que não
   aconteceu nada».

   Tudo aqui é acionado por `static/estado.js`, que ouve os eventos no
   documento inteiro. Nenhuma tela precisa saber que este bloco existe.
   ========================================================================== */

/* --- A barra de progresso, no topo de tudo -------------------------------- */
.progresso {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 9999;
  background: linear-gradient(90deg, var(--turquesa-escuro), var(--turquesa));
  box-shadow: 0 0 8px color-mix(in srgb, var(--turquesa) 60%, transparent);
  transition: width 0.22s ease-out, opacity 0.35s ease-out;
  pointer-events: none;
}
.progresso.indo-embora { opacity: 0; }

/* --- O botão que está trabalhando -----------------------------------------
   O rótulo some e um disco gira no lugar dele, mantendo a largura que o
   botão tinha. A largura congelada não é preciosismo: sem ela o botão
   encolhe, a linha da tabela se reorganiza e o sinal de progresso vira a
   tela pulando na cara de quem clicou. Quem congela é o `estado.js`, que
   mede o botão antes de marcá-lo. */
.botao.ocupado, button.ocupado {
  position: relative;
  cursor: progress;
  pointer-events: none;
  color: transparent;
}
.botao.ocupado::after, button.ocupado::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 0.95em; height: 0.95em; border-radius: 50%;
  border: 2px solid var(--papel); border-right-color: transparent;
  animation: rodopio 0.6s linear infinite;
}
/* No botão claro o disco branco seria invisível. */
.botao.secundario.ocupado::after, button.secundario.ocupado::after {
  border-color: var(--ardosia-600); border-right-color: transparent;
}
@keyframes rodopio { to { transform: rotate(360deg); } }

/* --- O botão perigoso -----------------------------------------------------
   Vermelho, e só onde a ação não tem volta. Se tudo o que é importante for
   vermelho, nada é — e a pessoa para de ler a cor. */
.botao.perigo, button.perigo {
  /* Vermelho CHEIO com branco por cima: é fundo pintado, e por isso sai do
     token sólido, que não clareia no tema escuro. */
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--perigo-cheio) 86%, var(--claro)) 0%,
              var(--perigo-cheio) 100%);
  border-color: var(--perigo-cheio);
  color: #fff;
}
.botao.perigo:hover, button.perigo:hover {
  background: var(--perigo-cheio-forte); border-color: var(--perigo-cheio-forte);
}

/* --- O «‹ Voltar» ---------------------------------------------------------
   Canto superior esquerdo, sempre no mesmo pixel, como no iPhone. Sem caixa,
   sem borda: é o chevron e a palavra. A área de clique é maior que o desenho
   — 44px é a medida que a Apple usa, e é a medida de um dedo. */
.voltar {
  display: inline-flex; align-items: center; gap: 0.15rem;
  margin: 0 0 0.5rem -0.35rem; padding: 0.3rem 0.35rem;
  font-size: 0.95rem; font-weight: 500; line-height: 1;
  color: var(--acento, var(--turquesa-escuro));
  text-decoration: none; border-radius: var(--raio-p);
  min-height: 1.9rem;
  transition: background var(--transicao), color var(--transicao);
}
.voltar:hover { background: var(--ardosia-50); text-decoration: none; }
.voltar:active { transform: translateX(-1px); }
.voltar::before {
  content: "‹"; font-size: 1.45em; line-height: 0.7; font-weight: 400;
  margin-top: -0.06em;
}

/* --- A folha de confirmação, ao estilo do macOS ---------------------------
   Desce sobre a tela, escurece o resto e traz duas saídas. Cancelar à
   esquerda e a ação à direita: no Mac o botão que confirma fica sempre no
   canto direito, e inverter isso faz a pessoa clicar no errado por reflexo. */
.folha {
  border: none; padding: 0; max-width: 26rem; width: calc(100% - 2.5rem);
  border-radius: var(--raio-g);
  background: var(--papel); color: var(--tinta);
  box-shadow: var(--sombra-alta);
  animation: folha-desce 0.18s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.folha::backdrop {
  background: rgba(24, 34, 41, 0.35);
  backdrop-filter: blur(2px);
}
@keyframes folha-desce {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
}
.folha h2 { margin: 0; padding: 1.4rem 1.5rem 0.4rem; font-size: 1.05rem; }
.folha p { margin: 0; padding: 0 1.5rem 0.2rem; color: var(--tinta-media); font-size: 0.92rem; }
.folha-acoes {
  display: flex; justify-content: flex-end; gap: 0.5rem;
  padding: 1.1rem 1.5rem 1.35rem;
}

/* --- O aviso que se apaga -------------------------------------------------
   Só o de confirmação. O de erro não tem esta classe e fica na tela até a
   pessoa sair dela: erro que some antes de ser lido é erro que ninguém
   conserta. */
.aviso.indo-embora {
  opacity: 0; transform: translateY(-4px);
  transition: opacity 0.45s ease, transform 0.45s ease;
}

/* Quem prefere a tela parada tem a tela parada. */
@media (prefers-reduced-motion: reduce) {
  .aviso.indo-embora, .folha { transition: none; animation: none; }
  /* `.progresso` e o anel do botão NÃO entram na lista: ver a nota na regra
     de cima. Indicador de atividade parado é pior do que indicador nenhum. */
}

/* A faixa de sub-abas ficou longa quando cada módulo ganhou a sua.
   Ela já rola na horizontal; o que faltava era DIZER que rola — num Mac a
   barra de rolagem fica escondida até alguém rolar, e uma aba invisível sem
   sinal nenhum é uma aba que não existe. A sombra na borda direita some
   sozinha quando se chega ao fim. */
.subabas {
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
}
.subabas::-webkit-scrollbar { display: none; }

/* =============================================================================
   O TEMA ESCURO
   =============================================================================

   Pedido do gestor em 04/09/2026. Três estados, e a diferença entre eles está
   em COMO cada um chega aqui:

     sistema  o `<html>` não tem atributo nenhum, e quem responde é
              `prefers-color-scheme` — o que o computador da pessoa anuncia;
     claro    `data-tema="claro"` no `<html>`, e ele VENCE a média. É o que
              permite a alguém com o macOS no escuro manter o CRM claro;
     escuro   `data-tema="escuro"`, e vale mesmo com o computador no claro.

   Daí os dois blocos abaixo dizerem a mesma coisa duas vezes. A média é
   escrita com `:not([data-tema="claro"])` porque, sem isso, quem escolhesse
   «claro» num computador escuro receberia o tema escuro assim mesmo — a
   escolha da pessoa tem de ganhar da preferência da máquina, sempre.

   O QUE MUDA, E O QUE NÃO MUDA
   -----------------------------
   Muda a escada dos cinzas claros (50, 100, 200), que no tema claro são
   SUPERFÍCIE e no escuro precisam ser escuras — senão cada faixa, etiqueta e
   sub-aba vira um retângulo branco no meio da tela.

   NÃO mudam o coral, o turquesa nem as cores das oito seções. Elas são a
   marca e a orientação: se a cor da Agenda fosse outra no escuro, a pessoa
   perderia a referência que ela levou semanas para decorar. O que muda é a
   quantidade de tinta ao redor delas, não elas.

   As bordas ficam um pouco mais claras que o papel, e não mais escuras. No
   escuro, separar duas superfícies com uma linha PRETA não funciona: o olho
   não a enxerga. Quem separa é a luz.
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --ardosia-50:  #1A2229;
    --ardosia-100: #222C34;
    --ardosia-200: #2E3A44;
    --ardosia-300: #7E909D;
    --ardosia-400: #94A6B3;
    --ardosia-500: #A9BAC6;
    /* O 600, O CORAL E O TURQUESA ESCURO TAMBÉM VIRAM — e não viravam.
       -------------------------------------------------------------------
       A escada parava no 500, e o 600 é justamente a cor de TODO LINK do
       sistema (`a { color: var(--ardosia-600) }`). Sobre o papel escuro, a
       cor do logotipo dá 2,02:1: o link ficava mais escuro que o texto ao
       redor, que é o contrário do que um link é. Pela mesma razão o coral
       (`a:hover`, «sair», «falhou», «atrasado») dava 2,83 a 3,53:1 e o
       turquesa usado como tinta (o nome da organização na gaveta, a
       etiqueta de informação, o dia de hoje na agenda, «rodando») dava
       2,44 a 2,95:1. Clareados aqui pelo mesmo critério de `--ok-tinta` e
       `--erro-tinta`: no escuro a tinta clareia e ganha saturação, senão
       vira cinza com vontade. Medidos sobre `--papel` #192128:
       7,41 / 7,13 / 6,41 / 8,97:1. */
    --ardosia-600: #9CB2C2;
    --coral-600: #FF8A80;
    --coral-700: #FF7A70;
    --turquesa-escuro: #3FD3DC;

    --fundo:  #10161B;
    --papel:  #192128;
    --borda:  #2C3841;
    --borda-forte: #3C4A55;

    --tinta:  #E8EFF4;
    --tinta-media: #B6C4CE;
    --suave:  #8B9BA7;
    /* O mesmo cinza do claro sobe para 4,65:1 sobre o papel escuro — ou seja,
       o exemplo ficaria com o contraste do texto de verdade e passaria a
       parecer resposta já digitada. Aqui ele dá 3,95:1. */
    --exemplo: #707F8B;

    /* Clareia no escuro pelo mesmo motivo de toda cor daqui: o verde de
       3,3:1 contra o branco cai para 1,9:1 contra o fundo escuro, e o
       interruptor ligado ficaria indistinguível do desligado. */
    --interruptor-ligado: #22A05B;
    --interruptor-desligado: #46545F;

    /* O índigo do iOS é cor de TINTA no ícone dos passos do recebimento, e
       sobre o papel escuro ele dá 2,88:1 — abaixo até do piso de elemento
       gráfico. Clareado pelo mesmo critério das outras tintas. 5,36:1. */
    --ios-indigo: #8C8AE8;

    /* No escuro a tinta clareia em vez de escurecer, e ganha saturação pelo
       mesmo motivo do claro: cor lavada sobre fundo escuro vira cinza com
       vontade. #79D6A2 lia-se «cinza esverdeado» a meio metro de distância. */
    --ok-fundo: #0F3021;   --ok-borda: #1D6640;   --ok-tinta: #45E88A;
    --atencao-fundo: #33260C; --atencao-borda: #6E5417; --atencao-tinta: #FFC24D;
    --erro-fundo: #33161A; --erro-borda: #732E2E; --erro-tinta: #FF7A70;

    --mesa-topo: #131A20;
    --mesa-meio: #0E151A;
    --mesa-base: #0C1216;
    /* Os halos de cor da mesa quase somem: no escuro, um véu de 46% de cor vira
       uma mancha lavada, e o que era clima vira sujeira. */
    --halo-forca: 15%;
    --halo-ambar: 0.07;
    --halo-azul: 0.07;

    --vidro: rgba(30, 41, 50, 0.72);
    --vidro-borda: rgba(255, 255, 255, 0.08);
    --vidro-claro: rgba(28, 38, 46, 0.82);
    --vidro-fundo: rgba(22, 30, 37, 0.68);
    --quina: inset 0 1px 0 rgba(255, 255, 255, 0.06);
    --vidro-alto: rgba(255, 255, 255, 0.045);
    --vidro-baixo: rgba(255, 255, 255, 0.015);
    --quina-forte: inset 0 1px 0 rgba(255, 255, 255, 0.055);

    /* «Misturar com branco» tem de virar «misturar com o papel escuro»: senão
       cada cor lavada devolve o retângulo aceso que se está tentando evitar. */
    --claro: #1E272F;
    --contraste: #ffffff;

    --sombra-cor: rgba(0, 0, 0, 0.5);
    --sombra-cor-fraca: rgba(0, 0, 0, 0.3);
    --sombra: 0 1px 1px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.36);
    --sombra-alta: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);

    /* No escuro o botão não pode ser a cor do trilho: ele sumiria dentro do
       fundo. Sobe dois degraus da escada, e continua sendo a mesma cor. */
    --botao-alto: #4A6375;
    --botao-baixo: #3D5361;
    --botao-alto-hover: #567185;
    --botao-baixo-hover: #47606F;

    /* O trilho escurece um degrau para não brilhar sobre a página quase preta.
       O TEXTO dele não muda — ver a nota em `--trilho-fundo`, no tema claro. */
    --trilho-fundo: #202B33;
    --trilho-texto: #E8EFF4;
    --trilho-texto-suave: #A9BAC6;
    /* O NOME DO GRUPO, em caixa alta a 11px, é texto — e `#7E909D` sobre o
       trilho escuro dá 4,37:1, abaixo dos 4,5 da norma. Caixa alta pequena é
       justamente o que menos perdoa cor fraca: não há forma de letra para
       ajudar a adivinhar a palavra. `#8798A5` dá 4,86:1. */
    --trilho-texto-fraco: #8798A5;
    --trilho-linha: rgba(255, 255, 255, 0.14);
    --trilho-realce: rgba(255, 255, 255, 0.07);
  /* Sobre fundo escuro um véu de 16% não se vê: a pílula ganha corpo. */
  --trilho-selecao: color-mix(in srgb, var(--acento) 30%, transparent);
    /* Sobre fundo escuro um véu de 16% não se vê: a pílula ganha corpo. */
    --trilho-selecao: color-mix(in srgb, var(--acento) 30%, transparent);
  }
}

/* A escolha explícita, que vence a média nos dois sentidos. Os valores são
   os mesmos de propósito: um dia em que os dois blocos discordem é um dia
   em que o tema depende de qual computador abriu a tela. */
:root[data-tema="escuro"] {
  --ardosia-50:  #1A2229;
  --ardosia-100: #222C34;
  --ardosia-200: #2E3A44;
  --ardosia-300: #7E909D;
  --ardosia-400: #94A6B3;
  --ardosia-500: #A9BAC6;
  /* Ver a nota do bloco acima: sem estes quatro, todo link, todo alarme
     coral e todo turquesa usado como tinta ficam entre 2,0 e 3,5:1 no
     escuro. Os valores são os mesmos de propósito. */
  --ardosia-600: #9CB2C2;
  --coral-600: #FF8A80;
  --coral-700: #FF7A70;
  --turquesa-escuro: #3FD3DC;

  --fundo:  #10161B;
  --papel:  #192128;
  --borda:  #2C3841;
  --borda-forte: #3C4A55;

  --tinta:  #E8EFF4;
  --tinta-media: #B6C4CE;
  --suave:  #8B9BA7;
  --exemplo: #707F8B;

  --interruptor-ligado: #22A05B;
  --interruptor-desligado: #46545F;

  --ios-indigo: #8C8AE8;

  --ok-fundo: #0F3021;   --ok-borda: #1D6640;   --ok-tinta: #45E88A;
  --atencao-fundo: #33260C; --atencao-borda: #6E5417; --atencao-tinta: #FFC24D;
  --erro-fundo: #33161A; --erro-borda: #732E2E; --erro-tinta: #FF7A70;

  --mesa-topo: #131A20;
  --mesa-meio: #0E151A;
  --mesa-base: #0C1216;
  /* Os halos de cor da mesa quase somem: no escuro, um véu de 46% de cor vira
     uma mancha lavada, e o que era clima vira sujeira. */
  --halo-forca: 15%;
  --halo-ambar: 0.07;
  --halo-azul: 0.07;

  --vidro: rgba(30, 41, 50, 0.72);
  --vidro-borda: rgba(255, 255, 255, 0.08);
  --vidro-claro: rgba(28, 38, 46, 0.82);
  --vidro-fundo: rgba(22, 30, 37, 0.68);
  --quina: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --vidro-alto: rgba(255, 255, 255, 0.045);
  --vidro-baixo: rgba(255, 255, 255, 0.015);
  --quina-forte: inset 0 1px 0 rgba(255, 255, 255, 0.055);

  /* «Misturar com branco» tem de virar «misturar com o papel escuro»: senão
     cada cor lavada devolve o retângulo aceso que se está tentando evitar. */
  --claro: #1E272F;
  --contraste: #ffffff;

  --sombra-cor: rgba(0, 0, 0, 0.5);
  --sombra-cor-fraca: rgba(0, 0, 0, 0.3);
  --sombra: 0 1px 1px rgba(0, 0, 0, 0.30), 0 1px 3px rgba(0, 0, 0, 0.36);
  --sombra-alta: 0 12px 32px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);

  /* No escuro o botão não pode ser a cor do trilho: ele sumiria dentro do
     fundo. Sobe dois degraus da escada, e continua sendo a mesma cor. */
  --botao-alto: #4A6375;
  --botao-baixo: #3D5361;
  --botao-alto-hover: #567185;
  --botao-baixo-hover: #47606F;

  /* O trilho escurece um degrau para não brilhar sobre a página quase preta.
     O TEXTO dele não muda — ver a nota em `--trilho-fundo`, no tema claro. */
  --trilho-fundo: #202B33;
  --trilho-texto: #E8EFF4;
  --trilho-texto-suave: #A9BAC6;
  --trilho-texto-fraco: #8798A5;
  --trilho-linha: rgba(255, 255, 255, 0.14);
  --trilho-realce: rgba(255, 255, 255, 0.07);
  /* Sobre fundo escuro um véu de 16% não se vê: a pílula ganha corpo. */
  --trilho-selecao: color-mix(in srgb, var(--acento) 30%, transparent);
}

/* =============================================================================
   O CONTROLE SEGMENTADO
   =============================================================================
   Escolha entre duas a cinco opções curtas e mutuamente exclusivas, todas à
   vista, com a escolhida em relevo. É o que o macOS usa nos Ajustes de
   Aparência e o que o Calendário usa para Dia / Semana / Mês.

   QUANDO USAR — e, mais importante, quando NÃO usar:

     • SIM quando os rótulos são curtos e paralelos entre si («Mês»,
       «Semana», «Dia»), e o conjunto cabe numa linha.
     • NÃO quando cada opção precisa de explicação, ou tem um campo dentro:
       aí o macOS usa rádios empilhados, e é o que a régua de fechamento de
       mês faz — três opções com um parágrafo cada e um campo «dia» dentro da
       terceira não cabem em três pastilhas.
     • NÃO para lista de tamanho variável («qual destes telefones é o
       principal»). Segmentado supõe conjunto fixo; a lista cresce.

   Escrito como componente, e não dentro de `.escolha-tema`: era o mesmo
   desenho em dois lugares e só um deles existia no CSS. Estava assim porque
   o seletor de aparência nasceu antes; a barra da Agenda, que precisava do
   mesmo controle, virou três botões soltos — e três botões soltos lado a
   lado não dizem que são alternativas entre si. */
.segmentado {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--ardosia-100);
  border-radius: var(--raio);
}
.segmentado > button,
.segmentado > a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0.28rem 0.7rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--tinta-media);
  background: none;
  border: 0;
  border-radius: var(--raio-p);
  box-shadow: none;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.segmentado > button:hover,
.segmentado > a:hover {
  background: var(--vidro-alto);
  color: var(--tinta);
}
.segmentado > button.ativo,
.segmentado > a.ativo {
  background: var(--papel);
  color: var(--tinta);
  font-weight: 600;
  box-shadow: var(--sombra-relevo);
}
.segmentado > button:focus-visible,
.segmentado > a:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 1px;
}
@media (prefers-reduced-motion: reduce) {
  .segmentado > button, .segmentado > a { transition: none; }
}

/* --- O seletor de aparência, na gaveta da conta --------------------------- */
.escolha-tema { margin: 0.35rem 0.1rem 0.45rem; }
.rotulo-tema {
  display: block;
  padding: 0 0.6rem 0.3rem;
  font-size: 0.72rem;
  color: var(--suave);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
/* Na gaveta ele ocupa a largura toda e aperta um pouco: são três palavras
   num menu de 220px, e não uma barra de ferramentas larga. */
.escolha-tema .segmentado { display: flex; }
.escolha-tema .segmentado > button {
  padding: 0.28rem 0.2rem;
  font-size: 0.79rem;
  min-height: 0;
}

/* =============================================================================
   ATENDIMENTO — a caixa de entrada e o fio
   ========================================================================== */

.lista-conversas { list-style: none; margin: 0; padding: 0; }
.lista-conversas li { border-bottom: 1px solid var(--borda); }
.lista-conversas li:last-child { border-bottom: 0; }
.lista-conversas a {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.8rem 0.9rem;
  color: inherit;
  text-decoration: none;
  border-radius: var(--raio);
}
.lista-conversas a:hover { background: var(--ardosia-50); }
.lista-conversas .corpo { flex: 1; min-width: 0; }
.lista-conversas .linha-topo {
  display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap;
}
.lista-conversas .previa {
  font-size: 0.87rem;
  color: var(--tinta-media);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 0.15rem;
}
.lista-conversas .quando {
  flex: 0 0 auto; text-align: right; font-size: 0.8rem;
  display: flex; flex-direction: column; gap: 0.1rem;
}
/* O cliente esperando há tempo demais. Uma faixa na borda, e não o fundo
   inteiro pintado: a lista com metade das linhas vermelhas deixa de ter
   urgência nenhuma. */
.lista-conversas li.atrasada { box-shadow: inset 3px 0 0 var(--coral-500); }

/* --- O fio --------------------------------------------------------------- */

.fio { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.fio .fala { display: flex; flex-direction: column; max-width: 78%; }
/* QUEM FALOU SE VÊ PELO LADO, e não só pelo rótulo embaixo. É a gramática de
   toda conversa em tela desde sempre, e ler quem falou é a primeira coisa
   que se faz ao abrir um fio — não pode custar uma leitura de legenda. */
/* `justify-self`, e não só `align-self`: o fio é uma GRADE, e numa grade o
   eixo de lado é o de `justify`. Só com `align-self` os dois lados caíam à
   esquerda — medido em 23/09/2026. */
.fio .fala.cliente { align-self: flex-start; justify-self: start; }
.fio .fala.agente,
.fio .fala.pessoa { align-self: flex-end; align-items: flex-end; justify-self: end; }
.fio .balao {
  padding: 0.55rem 0.8rem;
  border-radius: var(--raio-balao);
  background: var(--ardosia-100);
  color: var(--tinta);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.fio .fala.agente .balao,
.fio .fala.pessoa .balao {
  background: color-mix(in srgb, var(--acento) 16%, var(--papel));
  border: 1px solid color-mix(in srgb, var(--acento) 30%, var(--papel));
}
/* A pessoa e a máquina falam do mesmo lado — as duas são «nós» para o
   cliente — mas não são a mesma voz. O fio à esquerda do balão é o que
   responde «isso quem escreveu foi gente?» sem ler a legenda. */
.fio .fala.pessoa .balao { border-left: 3px solid var(--acento); }
.fio .assinatura { font-size: 0.76rem; margin-top: 0.2rem; }

.responder { display: flex; gap: 0.6rem; align-items: flex-end; }
.responder textarea { flex: 1; }

/* A busca da caixa de entrada não pode empurrar os dois seletores para outra
   linha: numa barra de filtros, o campo que cresce é o que quebra a fileira.
   Largura fixa e confortável, como o resto das buscas da casa. */
.lista-conversas ~ .filtros input[type=search],
.filtros input[type=search] { flex: 0 1 22rem; min-width: 12rem; }


/* ---------------------------------------------------------------------------
   A MARCA NO TEMA ESCURO
   ---------------------------------------------------------------------------
   Só aqui, e não sempre: com o trilho claro, um logotipo branqueado some.
   Duas regras porque a escolha explícita da pessoa tem de vencer a
   preferência do computador nos dois sentidos — a mesma razão do resto do
   arquivo. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .trilho-marca .logo { filter: brightness(0) invert(1); }
}
:root[data-tema="escuro"] .trilho-marca .logo { filter: brightness(0) invert(1); }


/* =============================================================================
   HOVER SÓ ONDE HÁ PONTEIRO
   =============================================================================

   Num aparelho de toque, `:hover` não é um estado passageiro: ele GRUDA
   depois do toque e só sai quando se toca em outro lugar. A linha da tabela
   fica destacada, o botão fica claro, e — o pior caso — o «Corrigir» da linha
   do tempo, cuja única revelação é o hover, exige um toque-fantasma antes do
   toque que vale.

   `@media (hover: hover)` é a pergunta certa: não «a tela é pequena?», e sim
   «existe um ponteiro que pode pairar?». Um iPad com mouse responde sim; um
   notebook com tela sensível ao toque responde conforme o que está em uso.
   ========================================================================== */
@media (hover: none) {
  tbody tr:hover { background: transparent; }
  .botao:hover, button:hover { filter: none; }
  /* O que só aparece no hover passa a estar sempre visível onde não há
     ponteiro: esconder atrás de um estado que não existe é esconder. */
  .linha-tempo li .corrigir-tratativa,
  .acoes-linha { opacity: 1; visibility: visible; }
}


/* =============================================================================
   OS AJUSTES DO CELULAR QUE PRECISAM VIR POR ÚLTIMO
   =============================================================================

   Media query não aumenta especificidade: `.cabecalho-pagina` dentro de um
   `@media` empata com `.cabecalho-pagina` fora dele, e quem vence é quem vem
   DEPOIS no arquivo. Estas duas regras precisam ganhar de declarações que
   estão lá embaixo, então moram aqui, no fim. É o preço de um arquivo único —
   e é mais barato do que caçar `!important` depois.
   ========================================================================== */
@media (max-width: 640px) {
  /* A BARRA DE FERRAMENTAS SANGRA ATÉ A BORDA, e a sangria tem de casar com o
     recuo do `main`, que muda no celular. A margem negativa era de 1,5rem
     contra um recuo de 1rem: a barra ficava 8px PARA FORA da tela de cada
     lado, a página inteira ganhava rolagem lateral, e a barra grudenta
     aparecia cortada. */
  .cabecalho-pagina {
    margin: -1.25rem -1rem 1.25rem;
    padding: 0.65rem 1rem;
    min-height: 44px;
    flex-wrap: nowrap;
  }
  /* A CONTAGEM SAI DA BARRA no celular. «5 empresas» é contexto, não ação, e
     no computador ela cabe ao lado do botão; aqui ela empurrava as ações para
     uma terceira linha — e barra de ferramentas de três andares não é barra,
     é cabeçalho de página. */
  .cabecalho-pagina .acoes-cabecalho > .suave { display: none; }
  .cabecalho-pagina .acoes-cabecalho {
    display: flex; gap: 0.4rem; align-items: center; flex-wrap: nowrap;
  }
  /* E o rótulo do botão secundário encolhe para o ícone: numa barra de 390px,
     duas ações escritas por extenso não cabem, e cortar o texto no meio é
     pior do que mostrar só o desenho. */
  .cabecalho-pagina .botao.secundario span,
  .cabecalho-pagina .acoes-cabecalho .botao.secundario { font-size: 0.82rem; }

  /* A BARRA DE AÇÕES SOBE ACIMA DA BARRA DE ABAS.
     `.acoes-formulario` gruda em `bottom: var(--e3)`, e a barra de abas do
     celular é `position: fixed; bottom: 0` com z-index maior — o botão
     «Salvar» ficava COBERTO em toda tela de edição, que é o defeito mais
     caro desta lista: a pessoa preenche o formulário e não acha como gravar.
     O `padding-bottom` da área não resolvia, porque `sticky` se ancora no
     scrollport e não no recuo. */
  .acoes-formulario {
    bottom: calc(3.9rem + env(safe-area-inset-bottom, 0px));
  }

  /* E a tabela larga rola DENTRO do contêiner dela, nunca empurrando a
     página. Sem isto, uma tabela de 48rem faz o documento inteiro medir mais
     que a tela. */
  body { overflow-x: hidden; }
}


/* =============================================================================
   A BARRA DE ABAS DO CELULAR
   =============================================================================

   No fim do arquivo pelo mesmo motivo do bloco acima: media query não aumenta
   especificidade, e estas regras precisam ganhar de declarações que estão
   mais abaixo.

   TRÊS COISAS QUE ESTAVAM ERRADAS, e as três se notam no primeiro uso:

     1. **sem rótulo.** `span { display: none }` deixava só o ícone. Toda barra
        de abas do iOS tem texto sob o desenho — e o texto também era o NOME
        ACESSÍVEL do link, porque o `<svg>` é `aria-hidden`: onze links «sem
        nome» para quem usa leitor de tela;
     2. **onze abas rolando para o lado.** A barra do iOS tem cinco, e a
        quinta é «Mais». Fileira que rola esconde metade da navegação atrás de
        um gesto que ninguém adivinha;
     3. **38 pixels de altura.** A medida de um dedo é 44.
   ========================================================================== */
.mais-abas { display: none; }

@media (max-width: 640px) {
  /* Quatro abas e a gaveta. Da quinta em diante, some da fileira. */
  .trilho-secoes > a:nth-of-type(n+5) { display: none; }
  .trilho-secoes { overflow-x: visible; justify-content: space-around; }

  .trilho-secoes > a,
  .mais-abas > summary {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    min-width: 3.6rem;
    min-height: 2.9rem;          /* 46px: a medida de um dedo, com folga */
    padding: 0.3rem 0.35rem;
    border-radius: var(--raio);
    text-decoration: none;
    color: var(--trilho-texto-suave);
    list-style: none;
    cursor: pointer;
  }
  .mais-abas > summary::-webkit-details-marker { display: none; }

  .trilho-secoes > a span,
  .mais-abas > summary span {
    display: block;
    font-size: 0.63rem;
    line-height: 1.1;
    max-width: 4.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .trilho-secoes > a .i,
  .mais-abas > summary .i { width: 20px; height: 20px; padding: 3px; }

  /* A ABA ATIVA no celular não é a pílula cheia do trilho: numa barra de
     abas o iOS marca com COR, no ícone e no rótulo, sem preencher a área. */
  .trilho-secoes > a.ativo, .mais-abas.ativo > summary {
    background: transparent;
    color: var(--trilho-texto);
    font-weight: 600;
  }

  .mais-abas { display: block; position: relative; }
  .mais-abas > summary .i { background: var(--secao-configuracao); }

  /* A LISTA DO «MAIS» é uma folha que sobe de baixo, como a do iOS. */
  .mais-abas[open] .mais-abas-lista {
    position: fixed;
    left: 0; right: 0;
    bottom: calc(3.9rem + env(safe-area-inset-bottom, 0px));
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(6rem, 1fr));
    gap: 0.2rem;
    padding: 0.6rem;
    background: var(--trilho-fundo);
    border-top: 1px solid var(--trilho-linha);
    box-shadow: var(--sombra-de-baixo);
    z-index: 21;
  }
  .mais-abas-lista a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.5rem;
    min-height: 2.75rem;
    border-radius: var(--raio);
    color: var(--trilho-texto);
    text-decoration: none;
    font-size: 0.85rem;
  }
  .mais-abas-lista a.ativo {
    background: color-mix(in srgb, var(--acento) 16%, transparent);
    font-weight: 600;
  }
  .mais-abas-lista a .i { width: 22px; height: 22px; padding: 3.5px; }
}


/* =============================================================================
   NO CELULAR, A TABELA VIRA LISTA
   =============================================================================

   Uma tabela de nove colunas num iPhone de 390px é uma tabela de 768px com
   rolagem lateral. O iOS nunca faz isso: lá, uma lista larga colapsa em
   célula empilhada — título em cima, e abaixo cada campo com o nome à
   esquerda e o valor à direita, separados por fio de cabelo.

   O rótulo vem do cabeçalho da coluna, copiado para cada `<td>` por
   `estado.js` na abertura da página. Sem JavaScript, a tabela volta a rolar
   para o lado — que é o comportamento de antes, e não uma tela quebrada.
   ========================================================================== */
@media (max-width: 640px) {
  .tabela-rolagem { overflow-x: visible; border: 0; background: transparent; }
  .tabela-rolagem table, table.tabela { min-width: 0; width: 100%; }

  /* O cabeçalho some: cada valor passa a levar o nome dele junto. */
  table.tabela thead, .tabela-rolagem table thead { display: none; }

  table.tabela, table.tabela tbody,
  .tabela-rolagem table, .tabela-rolagem tbody { display: block; }

  /* Cada linha é um cartão da lista agrupada. */
  table.tabela tbody tr, .tabela-rolagem tbody tr {
    display: block;
    background: var(--papel);
    border: 1px solid var(--borda);
    border-radius: var(--raio-g);
    padding: 0.7rem 0.85rem;
    margin-bottom: 0.55rem;
  }
  /* O RÓTULO DA TABELA CHAVE-VALOR (`tbody th`) vira a linha de cima do
     cartão, de ponta a ponta. Como célula solta dentro de uma linha em bloco,
     ele encolhia à largura do texto e o fio de baixo parava no meio do cartão
     (06/10/2026). */
  table.tabela tbody th, .tabela-rolagem tbody th {
    display: block; width: auto; padding-right: 0;
  }
  table.tabela tbody td, .tabela-rolagem tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.8rem;
    border: 0;
    border-top: 1px solid var(--borda);
    padding: 0.4rem 0;
    text-align: right;
  }
  /* O nome do campo à esquerda, em cinza — é o `data-rotulo` que o
     JavaScript copiou do cabeçalho. */
  table.tabela tbody td[data-rotulo]::before,
  .tabela-rolagem tbody td[data-rotulo]::before {
    content: attr(data-rotulo);
    color: var(--suave);
    font-size: 0.8rem;
    font-weight: 500;
    text-align: left;
    flex: 0 0 auto;
    text-transform: none;
    letter-spacing: 0;
  }
  /* O TÍTULO da célula: a primeira coluna, sozinha em cima, sem fio e sem
     rótulo — «Empresa: PONTE TESTE LTDA» diria duas vezes o que a pessoa já
     sabe que está olhando. */
  table.tabela tbody td.titulo-da-linha,
  .tabela-rolagem tbody td.titulo-da-linha {
    display: block;
    border-top: 0;
    padding: 0 0 0.35rem;
    text-align: left;
    font-weight: 600;
    font-size: 1rem;
  }
  /* Célula vazia não vira linha em branco com um rótulo solto. */
  table.tabela tbody td:empty, .tabela-rolagem tbody td:empty { display: none; }

  /* O CAMPO DENTRO DA CÉLULA PODE ENCOLHER — e sem esta linha ele não podia.
     ------------------------------------------------------------------------
     A célula virou `display: flex`, e todo item de flex nasce com
     `min-width: auto`: o mínimo dele é o tamanho «natural» do campo, que num
     `<input>` não tem nada a ver com a largura da tela. O rótulo à esquerda é
     `flex: 0 0 auto` e não cede; o campo não encolhia; e a conta estourava
     para fora da borda.

     Medido em 11/09/2026 num aparelho de 390px, na tabela de faixas de
     `/configuracao/metas`: o campo de preço terminava em **430px**, 40 além
     da borda. E `body` é `overflow-x: hidden` no celular — o que passa da
     borda não rola, é CORTADO: quem fosse escrever «1.250,00» não via os
     últimos dígitos do que digitou, e não havia gesto que trouxesse o resto
     de volta. Cortado é pior que rolagem lateral, porque nem sinal de que
     falta algo existe.

     `min-width: 0` devolve ao campo a permissão de ceder; `max-width: 100%`
     é o teto para o que declara largura própria em rem. */
  table.tabela tbody td input, table.tabela tbody td select,
  .tabela-rolagem tbody td input, .tabela-rolagem tbody td select {
    min-width: 0;
    max-width: 100%;
  }
}


/* A BARRA DE ABAS NÃO PODE SER MAIS LARGA QUE A TELA.
   -------------------------------------------------------------------------
   Cinco abas de 3,6rem mais a gaveta mais o botão da conta somavam 456px num
   aparelho de 390 — e como a barra é `position: fixed`, o excesso virava
   rolagem lateral da PÁGINA inteira, não da barra. Aqui as peças passam a
   poder encolher, e a fileira nunca ultrapassa a largura da tela. */
@media (max-width: 640px) {
  .trilho { max-width: 100vw; gap: 0.2rem; }
  .trilho-secoes { flex: 1 1 auto; min-width: 0; }
  .trilho-secoes > a, .mais-abas > summary { min-width: 0; flex: 1 1 0; }
  .trilho-pe { flex: 0 0 auto; }

  /* Fechada, a gaveta não ocupa espaço nenhum. Sem isto o navegador ainda
     reservava a caixa dela dentro da fileira. */
  .mais-abas:not([open]) .mais-abas-lista { display: none; }
}


/* A GAVETA DA CONTA, no celular, abre PARA CIMA e ancorada na tela.
   -------------------------------------------------------------------------
   Ela é `position: absolute; top: 100%` — desenhada para descer de um menu no
   topo. Com a barra de abas embaixo, ela descia para FORA da tela; e como
   está no canto direito de uma barra fixa, os 220px dela vazavam 206px à
   direita e a página inteira ganhava rolagem lateral.

   Aqui ela vira uma folha ancorada nas duas bordas, subindo de baixo — que é
   o que o iOS faz com um menu disparado da barra de abas.

   O SELETOR PRECISA DIZER `.trilho`. Escrito só como `.gaveta-conta`, esta
   regra perdia metade das linhas para a `.trilho .gaveta-conta` lá em cima —
   duas classes contra uma, e vir depois no arquivo não desempata isso. O
   sintoma era enganoso: `position` pegava (a regra de cima não fala de
   posição), `left` e `right` não pegavam, e a gaveta ficava com 159px
   espremida na borda. Uma regra que pega PELA METADE é pior de achar do que
   uma que não pega: o começo do efeito faz parecer que o seletor está certo. */
@media (max-width: 640px) {
  .trilho .gaveta-conta {
    position: fixed;
    top: auto;
    bottom: calc(3.9rem + env(safe-area-inset-bottom, 0px));
    left: 0.5rem;
    right: 0.5rem;
    min-width: 0;
    max-height: min(60vh, 420px);
    overflow-y: auto;
  }
}


/* =============================================================================
   O MENU «•••» DA BARRA DE FERRAMENTAS
   =============================================================================
   A barra não transborda mais: cabe o título, cabe a ação principal, e o que
   sobra mora aqui dentro. Ver a explicação larga em `estado.js`.

   Só existe no celular — no computador o script devolve as ações para a barra
   e apaga o menu, então não há estilo de mesa para escrever.
   ========================================================================== */
@media (max-width: 640px) {
  /* O TÍTULO CEDE ESPAÇO. Sem `min-width: 0`, um `<h1>` num flex não encolhe
     abaixo do próprio texto, e «Enriquecimento de contatos» sozinho já
     empurrava as ações para fora — o `nowrap` da barra não teria como
     ajudar. Aqui ele corta com reticências, que é o que a barra de navegação
     do iOS faz com um título comprido. */
  .cabecalho-pagina > h1 {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .cabecalho-pagina .acoes-cabecalho { min-width: 0; flex-shrink: 0; }

  .menu-acoes { position: relative; }
  .menu-acoes > summary {
    list-style: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px é o alvo de toque do iOS. Um «•••» de 24px é bonito e não se
       acerta com o polegar. */
    min-width: 44px;
    height: 34px;
    position: relative;
    padding: 0 0.5rem;
    border-radius: var(--raio-p, 8px);
    color: var(--suave);
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .menu-acoes > summary::-webkit-details-marker { display: none; }
  /* O ALVO DE TOQUE CRESCE SEM O DESENHO CRESCER. O «•••» tem 34px de altura
     porque a barra tem 44px e um botão de 44px dentro dela a faria crescer.
     Os 5px de cada lado ficam invisíveis e valem para o dedo: 34+10 = 44,
     que é a medida que a Apple pede. Aumentar o desenho para acertar o dedo
     é o erro comum; o certo é aumentar só a área. */
  .menu-acoes > summary::after {
    content: "";
    position: absolute;
    inset: -5px 0;
  }
  .menu-acoes[open] > summary { background: var(--ardosia-50); color: var(--tinta); }
  .menu-acoes > summary:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
  }

  /* A GAVETA ABRE ANCORADA NA BORDA DIREITA e para baixo: a barra fica no
     topo da tela, então há espaço embaixo — e é de lá que o menu do iOS
     desce. `max-width` com `calc` para ela nunca vazar pela esquerda numa
     tela de 320px. */
  .gaveta-acoes {
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    z-index: 45;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.15rem;
    min-width: 190px;
    max-width: calc(100vw - 2rem);
    padding: 0.35rem;
    background: var(--papel);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra-alta);
  }
  /* Dentro do menu as ações viram LINHAS, e não botões: uma pilha de botões
     desenhados é um teclado, não um menu. É a mesma forma da gaveta da
     conta, e a pessoa só precisa aprender um desenho. */
  .gaveta-acoes > .botao,
  .gaveta-acoes > .botao.secundario {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    width: 100%;
    min-height: 40px;
    margin: 0;
    padding: 0.45rem 0.6rem;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--tinta);
    font-size: 0.9rem;
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
  }
  .gaveta-acoes > .botao:hover,
  .gaveta-acoes > .botao.secundario:hover {
    background: var(--ardosia-50);
    color: var(--tinta);
  }
  .gaveta-acoes > .botao .i { color: var(--suave); flex-shrink: 0; }
}


/* =============================================================================
   TRÊS CORREÇÕES DE CELULAR ACHADAS NA FOTO, e não na leitura do código
   =============================================================================
   As três só apareceram ao olhar a tela de um iPhone. Nenhuma delas dá erro,
   nenhuma delas quebra teste: são defeitos de forma, e forma se confere
   olhando.
   ========================================================================== */
@media (max-width: 640px) {

  /* -------------------------------------------------------------------------
     1. A ABA SELECIONADA ERA A ÚNICA SEM COR — exatamente ao contrário do iOS
     -------------------------------------------------------------------------
     `.trilho-secoes > a.ativo .i { background: rgb(255 255 255 / .24) }` está
     CERTA no trilho do computador: lá o tile fica branco sobre a pílula
     colorida, senão cor sobre a mesma cor vira mancha. Só que no celular a
     pílula é transparente — e aí o branco a 24% sobre o fundo claro da barra
     produziu um tile fantasma. A aba onde a pessoa está era a apagada, e as
     outras quatro é que brilhavam.

     A barra de abas do iOS faz o oposto: a selecionada é a colorida, o resto
     é cinza. Escrito assim, as cores vivas que o gestor pediu continuam —
     elas só param de brigar entre si numa fileira de cinco.

     O `[data-secao]` no seletor não é enfeite: sem ele a regra tem uma classe
     a menos que a lista de cores lá em cima e perde. É o mesmo empate de
     especificidade que `ops/testar_celular.py` passou a vigiar. */
  .trilho-secoes > a[data-secao] .i,
  .mais-abas > summary .i {
    background: var(--trilho-texto-fraco);
    box-shadow: none;
  }
  .trilho-secoes > a[data-secao].ativo .i,
  .mais-abas.ativo > summary .i {
    background: var(--acento);
    box-shadow: none;
    /* O desenho é `currentColor`, e o `summary` ativo pinta a letra com o
       acento — a mesma cor do fundo. O «Mais» virava um quadrado liso
       (23/09/2026). Branco, como o desenho das outras abas. */
    color: #FFFFFF;
  }
  .trilho-secoes > a.ativo,
  .mais-abas.ativo > summary {
    color: var(--acento);
    font-weight: 600;
  }

  /* -------------------------------------------------------------------------
     2. AS SUB-ABAS APARECIAM ACIMA DO TÍTULO DA TELA
     -------------------------------------------------------------------------
     «A fila do dia | Campanhas | Curadoria» vinha antes de «Prospecção», e
     assim a faixa parecia pertencer à tela anterior. No iOS a ordem é fixa:
     volta, título, controle segmentado, conteúdo.

     No computador isso nunca apareceu porque a faixa fica escondida — o
     trilho mostra as sub-seções. O defeito nasceu junto com a barra de abas
     do celular e ficou dois meses à vista de quem abrisse o CRM no telefone.

     Resolvido com `order`, e não mexendo no template: a faixa é irmã do
     cabeçalho dentro do `main`, e ordenar irmãos é o que `order` faz. Quem
     não recebe `order` fica com zero e mantém a ordem escrita — então o
     conteúdo de cada tela continua onde está, sem uma linha por tela. */
  main {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  main > .voltar          { order: -3; }
  main > .cabecalho-pagina { order: -2; }
  main > .subabas.subabas-estreitas { order: -1; }

  /* E a faixa não quebra mais em duas linhas desalinhadas: vira uma fileira
     que rola, com as bordas esmaecidas dizendo que há mais de lado. Quatro
     sub-abas em 390px não cabem em uma linha, e a segunda linha com um item
     só é o desenho que faz a faixa parecer quebrada. */
  .subabas.subabas-estreitas {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    mask-image: linear-gradient(to right, transparent 0, #000 12px,
                                #000 calc(100% - 12px), transparent 100%);
  }
  .subabas.subabas-estreitas::-webkit-scrollbar { display: none; }
  .subabas.subabas-estreitas > a {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* -------------------------------------------------------------------------
     3. O TÍTULO DA TELA SUMIA QUANDO A BARRA TINHA UM FILTRO
     -------------------------------------------------------------------------
     No Painel o cabeçalho tem a data e o seletor «Painel de». Com
     `min-width: 0` no `<h1>` e `flex-shrink: 0` nas ações, o título encolhia
     até ZERO: a saudação desaparecia e a tela abria sem nome.

     `min-width: 0` continua necessário — sem ele o título não corta e empurra
     as ações para fora. O que faltava era o CHÃO: abaixo de 4,5rem ele para
     de encolher e quem cede é o resto. Título cortado se lê; título de
     largura zero não existe. */
  .cabecalho-pagina > h1 {
    min-width: 4.5rem;
    flex: 0 1 auto;
  }
  /* QUEM CEDE PRIMEIRO É O TÍTULO (15/10/2026). Com os dois encolhendo por
     igual, as ações também apertavam — e o conteúdo delas não quebra linha:
     em /prospeccao a 390px o «•••» saía 1px para fora da tela (medido no
     Chromium novo). O peso quase zero faz o título cortar primeiro; só
     quando ele chega ao chão de 4,5rem as ações cedem. */
  .cabecalho-pagina .acoes-cabecalho {
    min-width: 0;
    flex: 0 0.001 auto;
  }
  /* O rótulo «Painel de» sai: ele explica o seletor, e num seletor que já
     mostra um nome de pessoa a explicação cabe no `aria-label`, que é onde
     ela serve a quem precisa. Na tela, ele custava 70px dos 390. */
  .cabecalho-pagina .seletor-painel > label { display: none; }
}

@media (max-width: 640px) {
  /* O SELETOR DENTRO DA BARRA TAMBÉM CEDE. `min-width: 0` no pai não desce
     sozinho: cada filho de um flex tem `min-width: auto` e se recusa a
     encolher abaixo do próprio conteúdo. Um `<select>` com «Ana Maria» dentro
     media 154px fixos e empurrava a barra para 432px numa tela de 390.
     O teto em `vw` é o que garante que sobra tela para o título. */
  .cabecalho-pagina .filtros,
  .cabecalho-pagina .filtros select {
    min-width: 0;
    max-width: 46vw;
  }
  .cabecalho-pagina .filtros select { text-overflow: ellipsis; }
}


/* =============================================================================
   O INTERRUPTOR
   =============================================================================
   QUANDO É INTERRUPTOR E QUANDO É CAIXA — a regra, e não a lista:

     • INTERRUPTOR quando o campo é um ajuste que **vale sozinho e fica
       valendo**: «Porta ligada», «Perfil ligado», «Sábado conta como dia
       útil», «Este plano aparece para escolher». A pessoa está mudando o
       ESTADO de uma coisa que já existe.

     • CAIXA quando é escolha dentro de uma LISTA («quais permissões este
       perfil tem», «quais contatos convidar»), ou opção da ação que está
       prestes a acontecer («pesquisar de novo as já pesquisadas»). Aqui a
       pessoa está montando um conjunto, e o formato de lista com marca é o
       que o iOS usa — não o interruptor.

   A diferença não é enfeite: o interruptor promete efeito imediato e
   permanente. Usá-lo numa lista de seleção faz a pessoa achar que já ligou
   alguma coisa antes de ter salvo.

   POR DENTRO continua sendo um `<input type="checkbox">`. Não é um `<div>`
   com JavaScript: o formulário envia igual, funciona sem script, e o teclado
   já sabe operar. O `role="switch"` faz o leitor de tela anunciar «ligado /
   desligado» em vez de «marcado», que é a palavra certa para o que ele é.
   ========================================================================== */
.interruptor {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: 0;
  min-height: 44px;              /* o alvo de toque da Apple */
  font-weight: 500;
  color: var(--tinta);
  line-height: 1.35;
  cursor: pointer;
}
/* O TEXTO À ESQUERDA, O CONTROLE À DIREITA. É a linha de Ajustes do iOS, e a
   ordem importa: quem varre a tela lê o que a coisa é antes de ver como ela
   está. Invertido, a pessoa vê um verde e vai procurar a que ele se refere. */
/* `block`, e não coluna flex: um flex em coluna põe cada filho numa linha
   própria, e o «?» do `ajuda()` — que é um irmão do texto — descia sozinho
   para um andar embaixo do rótulo. Em bloco ele volta a correr junto com a
   frase, que é onde ele pertence. */
.interruptor > .interruptor-texto {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
}
.interruptor .interruptor-nota {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.82rem;
  font-weight: 400;
  color: var(--suave);
}

input.interruptor[type="checkbox"],
.interruptor > input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 auto;
  position: relative;
  width: 51px;                   /* 51 × 31, a medida do iOS */
  height: 31px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--interruptor-desligado);
  box-shadow: none;
  cursor: pointer;
  transition: background var(--transicao);
}
input.interruptor[type="checkbox"]::after,
.interruptor > input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 999px;
  background: #fff;
  box-shadow: var(--sombra-botao);
  transition: transform var(--transicao);
}
input.interruptor[type="checkbox"]:checked,
.interruptor > input[type="checkbox"]:checked {
  background: var(--interruptor-ligado);
}
input.interruptor[type="checkbox"]:checked::after,
.interruptor > input[type="checkbox"]:checked::after {
  transform: translateX(20px);
}
input.interruptor[type="checkbox"]:focus-visible,
.interruptor > input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
}
input.interruptor[type="checkbox"]:disabled,
.interruptor > input[type="checkbox"]:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.interruptor:has(input:disabled) { cursor: not-allowed; color: var(--suave); }

/* QUEM NÃO QUER ANIMAÇÃO NÃO VÊ ANIMAÇÃO. A regra do sistema vale aqui como
   vale no resto: para quem tem enjoo de movimento, um botão que desliza é
   desconforto, não charme. */
@media (prefers-reduced-motion: reduce) {
  input.interruptor[type="checkbox"],
  input.interruptor[type="checkbox"]::after,
  .interruptor > input[type="checkbox"],
  .interruptor > input[type="checkbox"]::after { transition: none; }
}

/* Dentro do grid do formulário o interruptor ocupa a linha inteira: ele já é
   rótulo e controle na mesma linha, e espremê-lo numa coluna devolveria o
   texto quebrado em três palavras por linha. */
/* `.formulario > label.interruptor`, e não `.interruptor` sozinho: a regra
   `.formulario > label { display: block }` tem duas partes contra uma e
   ganharia, deitando o interruptor — o texto em cima e o controle embaixo,
   que é o desenho de uma caixa de seleção e não o de um interruptor. */
.formulario > label.interruptor {
  display: flex;
  grid-column: 1 / -1;
  align-self: center;
}

/* Numa lista de interruptores, um filete separa as linhas — como a tabela de
   Ajustes do iOS. Sem ele, seis interruptores viram uma parede de verdes. */
.lista-interruptores {
  display: flex;
  flex-direction: column;
}
.lista-interruptores > .interruptor + .interruptor {
  border-top: 1px solid var(--borda);
}


/* =============================================================================
   A CONTA DENTRO DO «MAIS», no celular
   =============================================================================
   O script move o pé do trilho — organização e conta — para dentro da folha
   do «Mais», e devolve para o trilho no computador. Ver a explicação em
   `estado.js`. Aqui fica só o desenho dela nesse lugar novo.
   ========================================================================== */
@media (max-width: 640px) {
  /* A folha vira uma coluna: as seções em grade lá em cima, e a conta como
     um bloco separado embaixo, com um filete entre as duas coisas — porque
     são coisas de naturezas diferentes. Ir para «Comissão» é trabalho; sair
     do sistema não é. */
  .mais-abas[open] .mais-abas-lista {
    display: block;
    max-height: min(72vh, 520px);
    overflow-y: auto;
  }
  .mais-abas[open] .mais-abas-lista > a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
  }
  .mais-abas-lista > .trilho-pe {
    display: block;
    margin-top: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--trilho-linha);
  }
  /* Dentro da folha o nome volta a aparecer: o motivo de escondê-lo era a
     largura de 60px do trilho encolhido, e aqui há a tela inteira. */
  .mais-abas-lista .trilho-pe .conta-nome { display: block; }
  .mais-abas-lista .trilho-pe .menu-conta > summary {
    justify-content: flex-start;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0.35rem 0.5rem;
  }
  .mais-abas-lista .trilho-pe .trilho-organizacao .rotulo { display: block; }
}

@media (max-width: 640px) {
  /* OS LADRILHOS COLORIDOS TAMBÉM NA FOLHA. Na barra, cada seção tem o seu
     quadradinho de cor; dentro do «Mais» eles viravam glifos pretos soltos —
     as mesmas sete seções com duas identidades visuais, dependendo de por
     onde a pessoa chega. Aqui a cor é a da seção, e não cinza como na barra:
     na barra o cinza serve para a escolhida se destacar, e na folha não há
     escolhida — há uma lista. */
  .mais-abas-lista > a .i {
    padding: 3.5px;
    border-radius: var(--raio-p);
    color: #fff;
    background: var(--secao-configuracao);
  }
  .mais-abas-lista > a[data-secao="painel"] .i        { background: var(--secao-painel); }
  .mais-abas-lista > a[data-secao="leads"] .i         { background: var(--secao-leads); }
  .mais-abas-lista > a[data-secao="oportunidades"] .i { background: var(--secao-oportunidades); }
  .mais-abas-lista > a[data-secao="empresas"] .i      { background: var(--secao-empresas); }
  .mais-abas-lista > a[data-secao="prospeccao"] .i    { background: var(--secao-prospeccao); }
  .mais-abas-lista > a[data-secao="agenda"] .i        { background: var(--secao-agenda); }
  .mais-abas-lista > a[data-secao="agente"] .i        { background: var(--secao-agente); }
  .mais-abas-lista > a[data-secao="copiloto"] .i      { background: var(--secao-copiloto); }
  .mais-abas-lista > a[data-secao="avaliador"] .i     { background: var(--secao-avaliador); }
  .mais-abas-lista > a[data-secao="propostas"] .i     { background: var(--secao-propostas); }
  .mais-abas-lista > a[data-secao="comissao"] .i      { background: var(--secao-comissao); }
  /* A Configuração é o PADRÃO da regra acima, e mesmo assim está
     escrita aqui: «certo por acidente» é o que deixa de estar certo
     no dia em que alguém troca o padrão. E com ela a lista fica
     idêntica à do trilho, que é o que a prova confere. */
  .mais-abas-lista > a[data-secao="configuracao"] .i  { background: var(--secao-configuracao); }

  /* O FUNDO ESCURECE ATRÁS DA FOLHA. Sem isso ela não é uma folha: é um
     retângulo que apareceu em cima do conteúdo, sem dizer que o conteúdo
     está esperando. O iOS escurece, e escurecer é também o que informa que
     tocar fora fecha. */
  .mais-abas[open]::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 20;
    background: rgb(0 0 0 / 0.28);
  }
}

@media (max-width: 640px) {
  /* A BARRA DE ABAS FICA ACIMA DO ESCURECIMENTO. Sem isto, abrir o «Mais»
     escurecia também a própria barra que o disparou — e a aba «Mais»,
     apagada, parecia ter sido desligada pelo próprio toque. No iOS a barra
     continua acesa: é dela que a folha sai, e é nela que se toca de novo
     para fechar. */
  .trilho { z-index: 22; }
  /* E o escurecimento para no alto da barra, em vez de passar por baixo
     dela: cobrir o que não se pode cobrir é escurecer por escurecer. */
  .mais-abas[open]::before {
    bottom: calc(3.9rem + env(safe-area-inset-bottom, 0px));
  }
}


/* =============================================================================
   O «‹ VOLTAR» NÃO FICA MAIS DEBAIXO DA BARRA DE TÍTULO
   =============================================================================
   RELATO da comercial em 07/09/2026: «o nome EMPRESAS que fica acima da razão
   social está cortado, é onde eu deveria clicar para voltar, aí não tem como
   voltar — eu consegui clicando em cima do pedacinho que ficou visível».

   MEDIDO antes de mexer: o link ocupava de 28px a 58px e a barra de título
   começava em 42px. Dezesseis dos trinta pixels cobertos — e
   `elementFromPoint` no MEIO do link devolvia a barra, não o link. Só a faixa
   de cima respondia ao clique, que foi exatamente o que ela descreveu.

   A CAUSA é uma decisão certa aplicada sem exceção: a barra tem
   `margin-top: -1.5rem` para sangrar até a borda de cima da área, e é
   `position: sticky; z-index: 15`. Quando ela é o primeiro elemento da tela,
   isso está certo e é o que faz o material encostar no topo. Quando há um
   «‹ voltar» antes dela, ela sobe por cima dele.

   A CORREÇÃO é uma linha: havendo «voltar», a barra não puxa mais para cima.

   O QUE EU TENTEI ANTES E DESFIZ, para não alguém tentar de novo: fazer o
   «voltar» também grudento, formando uma cabeceira de duas linhas como a do
   macOS. Não funciona aqui — `.voltar` é um `<a>` do tamanho do texto (137px
   medidos), então a faixa grudenta virava uma tira estreita no meio da tela
   com o conteúdo rolando ao lado dela. Esticá-lo até a largura toda resolveria
   o desenho e criaria outro problema: um link de 1160px de largura, clicável
   em toda a faixa, levando embora quem só quis clicar no vazio.

   Então o chevron rola junto com a página, como qualquer conteúdo. Ele não
   fica mais coberto, que era o defeito. */
main:has(> .voltar) > .cabecalho-pagina { margin-top: 0; }

/* OS PASSOS DE LIGAR O AGENTE.
   A marca da esquerda diz o estado e só existem dois: feito e falta. O que
   falta fica em tinta cheia com o que fazer embaixo; o que está feito recua
   para o fundo — a tela existe para responder «o que falta», e o já feito
   compete com essa resposta. */
.passos-ligar { list-style: none; margin: 0; padding: 0; }
.passos-ligar li {
  padding: 0.7rem 0;
  border-top: 1px solid var(--borda);
}
.passos-ligar li:first-child { border-top: none; }
/* A MARCA FICA NA SUA COLUNA e o texto quebra do lado dela. Com
   `flex-wrap`, no celular o título descia para a linha de baixo e o «✓»
   ficava sozinho numa linha — 23/09/2026. */
.passos-ligar .passo-linha {
  display: flex; align-items: baseline; gap: 0.5rem;
}
.passos-ligar .passo-texto { flex: 1; min-width: 0; }
.passos-ligar .marca { flex: 0 0 auto; font-weight: 700; }
.passos-ligar li.feito { opacity: 0.62; }
/* `--verde` e `--ambar` não existem neste arquivo — nunca existiram. O que
   pintava era o literal do fallback, e literal não vira com o tema: o âmbar
   `#b8860b` dava 3,25:1 sobre o papel claro, abaixo do mínimo de 4,5. As duas
   cores de estado de verdade já estão declaradas nos dois temas. */
.passos-ligar li.feito .marca { color: var(--ok-tinta); }
.passos-ligar li.falta .marca { color: var(--atencao-tinta); }
.passos-ligar li p { margin: 0.35rem 0 0 1.3rem; }

/* AS PORTAS DO CONHECIMENTO — um cartão por fonte, lado a lado.
   Pedido de 11/09/2026: «cada uma das fontes tem que ter um botão próprio
   para carregar o conhecimento; ter que rolar a página até o final para fazer
   o upload de arquivos ou processar um vídeo é bem sem lógica». Em duas
   colunas no monitor, uma no celular, e cada cartão termina no botão dele. */
/* EM COLUNAS, e não em grade: numa grade, a linha inteira fica com a altura
   do cartão mais alto, e o cartão de arquivos — que tem três linhas — abria um
   buraco do tamanho do cartão de texto colado ao lado dele. Em coluna, cada
   cartão termina onde o conteúdo dele termina e o seguinte encosta. */
.portas-conhecimento { columns: 2; column-gap: 1rem; }
@media (max-width: 56rem) { .portas-conhecimento { columns: 1; } }
.portas-conhecimento .porta {
  break-inside: avoid;
  margin: 0 0 1rem;
  display: block;
}
.portas-conhecimento .porta h2 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.portas-conhecimento .porta p { margin: 0 0 0.8rem; }
.portas-conhecimento .porta .acoes { padding-top: 0.2rem; }
.portas-conhecimento .porta label { margin-bottom: 0.7rem; display: block; }
.portas-conhecimento .porta input[type="text"],
.portas-conhecimento .porta input[type="url"],
.portas-conhecimento .porta input[type="file"],
.portas-conhecimento .porta select,
.portas-conhecimento .porta textarea { width: 100%; }

/* O NÚMERO AO LADO DE «LEADS» NO TRILHO.
   Pedido da frente de Site, 19/09/2026: quem está com o CRM aberto vê a fila
   crescer sem abrir a tela. Cores próprias, iguais nos dois temas, pelo mesmo
   motivo do `--trilho-texto`: o trilho é escuro no claro e no escuro, então
   ele não pode depender da escada de cinzas, que vira de lado com o tema. */
.marca-de-fila {
  display: inline-block;
  min-width: 1.25rem;
  padding: 0 .35rem;
  margin-left: .4rem;
  border-radius: 999px;
  background: #E8543F;
  color: #FFFFFF;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.25rem;
  text-align: center;
}


/* =============================================================================
   AUDITORIA DE TELAS — 23/09/2026
   =============================================================================
   Do gestor: «as telas continuam se sobrepondo (…) estamos perdendo os
   padrões do macOS que havíamos implantado». Cada regra abaixo responde a um
   defeito MEDIDO — no ar, pelo navegador dele, ou na varredura de todas as
   telas em três larguras (`ops/testar_telas.py`). Moram juntas no fim porque
   precisam vencer o que veio antes, e juntas se leem como uma lista.
   ========================================================================== */

/* A FILEIRA DE NÚMEROS NÃO ENCOSTA NO CARTÃO DE BAIXO. Painel, Avaliador e a
   ficha da reunião: os quatro números colavam no cartão seguinte sem respiro
   nenhum — o espaço entre blocos só existia entre dois `.caixa`. */
.numeros { margin-bottom: var(--e4); }
.caixa + .aviso, .caixa + details, .caixa + form, .caixa + .numeros,
details + .caixa, form + .caixa { margin-top: var(--e4); }

/* O AVISO SEM TIPO TINHA BORDA DA COR DA LETRA — preta no claro, branca no
   escuro, um retângulo desenhado a caneta no meio da tela (Painel, Planos,
   Metas, Correio). O aviso neutro é informação: o fundo leve da seção e o
   fio da casa, como uma nota dos Ajustes. */
.aviso:not(.bom):not(.atencao):not(.ruim) {
  background: color-mix(in srgb, var(--acento) 6%, var(--papel));
  border-color: color-mix(in srgb, var(--acento) 22%, var(--borda));
  color: var(--tinta);
}

/* A LISTA DE CHAVES É A LISTA AGRUPADA DOS AJUSTES: um cartão, linhas
   separadas por um fio. Ver `_chaves.html`. */
.lista-chaves .linha-chave { padding: var(--e4) 0; }
.lista-chaves .linha-chave:first-child { padding-top: 0; }
.lista-chaves h2 + .linha-chave { padding-top: var(--e3); }
.lista-chaves .linha-chave + .linha-chave { border-top: 1px solid var(--borda); }
.lista-chaves .linha-chave:last-of-type { padding-bottom: var(--e3); }
.lista-chaves > form { margin-top: var(--e3); }

/* O CAMPO DE ARQUIVO COM A CARA DA CASA. O botão nativo do navegador é um
   retângulo cinza do sistema operacional, e em inglês no Chromium sem
   idioma — o rótulo em inglês no meio de uma tela em português. */
input[type="file"] { font: inherit; color: var(--suave); max-width: 100%; }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 560;
  margin-right: 0.75rem;
  padding: 0.45rem 0.9rem;
  border-radius: var(--raio-p);
  border: 1px solid var(--borda);
  background: var(--papel);
  color: var(--tinta);
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--ardosia-50); }

/* NADA DE FORMULÁRIO MAIS LARGO QUE A TELA. Um `<select>` mede a opção mais
   comprida («Todas as campanhas — 1 sem contato…») e empurrava a página 24 a
   140px para o lado no celular (Enriquecimento, ficha da reunião). */
select { max-width: 100%; }


@media (max-width: 640px) {
  /* A FRASE AO LADO DO TÍTULO SAI NO CELULAR, como a contagem já saía. Ela é
     contexto; ao lado do título, cortava o próprio título — «Copil…»,
     «Custos …», «Planos e p…». */
  .cabecalho-pagina > .suave { display: none; }
  .cabecalho-pagina > h1 { flex: 1 1 auto; }
  /* O título que vem dentro de um `<div>` (com o nome fantasia embaixo,
     como na ficha da empresa) também cede: sem isto o «Editar» saía 8px da
     tela. */
  .cabecalho-pagina > div:first-child { min-width: 0; flex: 1 1 0; }
  .cabecalho-pagina > div:first-child > h1 {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* E a etiqueta dentro da linha-cartão quebra, em vez de sair da tela
     («recusa até colar a chave», +119px em Agente → Configuração). */
  table.tabela td .etiqueta, .tabela-rolagem td .etiqueta,
  main .etiqueta { white-space: normal; max-width: 100%; }
  /* A célula-cartão quebra linha: campo e etiqueta um embaixo do outro, e
     não a etiqueta empurrada para fora da tela ao lado do campo. */
  table.tabela tbody td, .tabela-rolagem tbody td { flex-wrap: wrap; }
  /* Com o calendário virado lista, a dica de «clicar no dia da grade» fala
     de uma grade que não está lá. O botão «Marcar» ocupa o lugar dela. */
  .agenda-dica-grade { display: none; }
}
@media (min-width: 641px) {
  /* No computador a grade vazia já diz que não há nada. */
  .agenda-vazia { display: none; }
}

/* O CABEÇALHO DAS PÁGINAS ABERTAS (Sobre, Privacidade, Exclusão de dados).
   Não tinha estilo nenhum: as duas marcas saíam no tamanho natural do
   arquivo, e no celular a faixa passava 76px da tela. São as páginas que a
   Meta e o Google leem — as primeiras que alguém de fora vê. */
header.topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e4);
  max-width: 46rem; margin: 0 auto;
  padding: var(--e4) 1.75rem;
  border-bottom: 1px solid var(--borda);
}
header.topo .marca { display: inline-flex; align-items: center; gap: 0.6rem; min-width: 0; }
header.topo .marca img { height: 26px; width: auto; display: block; }
header.topo .conta a { font-weight: 560; }
@media (max-width: 640px) { header.topo { padding: 0.75rem 1rem; } }

/* QUANDO O TRILHO ROLA, A BORDA DE BAIXO ESMAECE — e o item cortado ao meio
   pelo rodapé deixa de parecer um desenho quebrado. É o que a barra lateral
   do macOS faz. Só no computador: no celular o trilho é a barra de abas. */
@media (min-width: 641px) {
  .trilho-secoes {
    mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 22px), transparent);
    padding-bottom: 18px;
  }
}

/* AS LISTAS DENTRO DE UM CARTÃO SÃO LINHAS, E NÃO CARTÕES — o resto da
   lista agrupada dos Ajustes. Os módulos da empresa eram sete cartões cinza
   dentro do cartão da tela (e com uma cor de fundo literal, `#EAF3F4`, que
   não virava no tema escuro); o campo de colar a chave era uma barra com
   borda e sombra dentro da linha da chave. */
.lista-modulos { gap: 0; }
.lista-modulos .modulo,
.lista-modulos .modulo.ligado {
  border: 0; border-radius: 0; background: transparent;
  padding: var(--e3) 0;
}
.lista-modulos .modulo + .modulo { border-top: 1px solid var(--borda); }
.lista-chaves .filtros {
  background: none; border: 0; box-shadow: none; padding: 0;
  margin: var(--e2) 0 0;
}

/* 0146 — o que a exclusão faz, dito antes do clique. */
.lista-efeitos { margin: 0.5rem 0 1rem; padding-left: 1.2rem; }
.lista-efeitos li { margin: 0.25rem 0; overflow-wrap: anywhere; }
.texto-perigo { color: var(--erro-tinta); }