/* =============================================================================
   A CAMADA APPLE — 23/09/2026
   =============================================================================
   Do gestor, com o CRM já no ar: «Quero ter a sensação clara de que abri um
   app Apple. Estou achando muito fraco esse visual e muito pouco parecido com
   a Apple.»

   A auditoria da véspera consertou o que se sobrepunha. Esta folha cuida do
   que faz um aplicativo PARECER da Apple, e a lista é curta — foi medindo a
   tela ao lado dos Ajustes, do Mail e do Finder que ela saiu:

     1. UMA COR DE DESTAQUE SÓ, a do sistema. O CRM pintava cada seção de uma
        cor — a barra lateral, os cabeçalhos de tabela, as etiquetas e os
        botões do Avaliador ficavam rosa; os de Propostas, vermelhos. Nenhum
        aplicativo da Apple faz isso: as cores ficam nos ÍCONES da barra
        lateral (como nos Ajustes), e todo o resto usa o mesmo azul. As cores
        das seções continuam — nos ícones, onde elas ajudam a achar.
     2. CINZAS NEUTROS, os da Apple. A escada era ardósia (cinza azulado da
        marca), e cinza azulado é assinatura de painel web. Os da Apple são
        neutros e quentes: #F5F5F7, #E5E5EA, #6E6E73, #1D1D1F.
     3. SUPERFÍCIES LISAS. Nada de degradê, vidro fosco e halo nos cartões:
        cartão branco, fio de cabelo, sombra quase imperceptível, cantos de
        12px. O material translúcido fica só onde a Apple o usa — na barra de
        ferramentas e na barra lateral.
     4. O BOTÃO PRINCIPAL É AZUL, os outros são brancos. O escuro (ardósia)
        era o botão de aplicativo corporativo.
     5. TIPOGRAFIA DE SISTEMA NA ESCALA DO MAC: 14px no corpo, títulos
        semibold com a letra um pouco mais junta, números grandes em SF
        arredondada (a do Saúde e do Tempo de Uso).
     6. LISTAS AGRUPADAS: linhas com fio de cabelo, rótulo à esquerda, valor
        à direita, cabeçalho de tabela em caixa normal e cinza.

   Esta folha vem DEPOIS de base.css e só troca aparência: nenhuma regra aqui
   muda o que aparece ou onde — o que foi medido na auditoria de telas
   continua medido (`ops/testar_telas.py` roda sobre as duas folhas).

   A COR DE DESTAQUE MORA EM UM LUGAR: `--sistema-azul`. Trocar por outra
   (o turquesa da marca, por exemplo) é mudar duas linhas — a do claro e a do
   escuro.
   ========================================================================== */

:root {
  /* O azul de LETRA e o azul de FUNDO são dois: #0066CC é o dos links da
     Apple na web e dá 5,2:1 sobre o cinza da mesa (o #0071E3 dava 4,31,
     abaixo dos 4,5 que texto pequeno pede); #0071E3 é o do botão, com a
     letra branca a 4,7:1. */
  --sistema-azul: #0066CC;
  --sistema-azul-fundo: #0071E3;    /* o fundo do botão principal */
  --sistema-azul-forte: #0062C4;
  --sistema-verde: #34C759;
  --sistema-vermelho: #D70015;

  --fundo: #F5F5F7;
  --papel: #FFFFFF;
  --claro: #FFFFFF;
  --borda: #E5E5EA;
  --borda-forte: #D2D2D7;
  --tinta: #1D1D1F;
  --tinta-media: #3A3A3C;
  --suave: #6E6E73;
  --exemplo: #8E8E93;

  --ardosia-50:  #F5F5F7;
  --ardosia-100: #EBEBF0;
  --ardosia-200: #D2D2D7;
  --ardosia-300: #AEAEB2;
  --ardosia-400: #8E8E93;
  --ardosia-500: #636366;
  --ardosia-600: #48484A;
  --ardosia-700: #3A3A3C;
  --ardosia-800: #2C2C2E;
  --ardosia-900: #1C1C1E;

  --ok-fundo: #E9F8EE;      --ok-borda: #BFEACC;      --ok-tinta: #1B7F37;
  --atencao-fundo: #FFF4E0; --atencao-borda: #FFD9A0; --atencao-tinta: #8F4E00;
  --erro-fundo: #FFEEF0;    --erro-borda: #FFC7CD;    --erro-tinta: #C4001A;
  --interruptor-ligado: #34C759;
  --interruptor-desligado: #D1D1D6;

  --raio-g: 12px;
  --raio: 8px;
  --raio-p: 6px;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.04);
  --sombra-relevo: 0 1px 2px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
  --sombra-alta: 0 10px 30px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06);
  --quina: none;
  --quina-forte: none;
  --vidro-alto: #FFFFFF;
  --vidro-baixo: #FFFFFF;

  --trilho-fundo: rgba(236, 236, 240, 0.86);
  --trilho-texto: #1D1D1F;
  --trilho-texto-suave: #3A3A3C;
  --trilho-texto-fraco: #636366;     /* 5,1:1 sobre a lateral (o #86868B dava 3,1) */
  --trilho-linha: rgba(0, 0, 0, 0.08);
  --trilho-realce: rgba(0, 0, 0, 0.05);

  --anel-foco: 0 0 0 3.5px color-mix(in srgb, var(--sistema-azul) 32%, transparent);
}

/* O ESCURO DO MAC — as mesmas ideias com os valores do modo escuro: janela
   #1E1E1E, cartões um degrau acima, azul mais claro para ler sobre escuro. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --sistema-azul: #3894FF;
    --sistema-azul-fundo: #0A6BDB;
    --sistema-azul-forte: #0A5FC4;
    --sistema-verde: #30D158;
    --sistema-vermelho: #FF6961;
    --fundo: #161618;
    --papel: #232325;
    --claro: #232325;
    --borda: #38383A;
    --borda-forte: #48484A;
    --tinta: #F5F5F7;
    --tinta-media: #D1D1D6;
    --suave: #98989D;
    --exemplo: #7C7C80;
    --ardosia-50:  #2C2C2E;
    --ardosia-100: #333336;
    --ardosia-200: #3A3A3C;
    --ardosia-300: #7C7C80;
    --ardosia-400: #98989D;
    --ardosia-500: #AEAEB2;
    --ardosia-600: #C7C7CC;
    --ardosia-700: #D1D1D6;
    --ardosia-800: #E5E5EA;
    --ok-fundo: #10301B;      --ok-borda: #1E5C33;      --ok-tinta: #4CD964;
    --atencao-fundo: #33250A; --atencao-borda: #664A14; --atencao-tinta: #FFB340;
    --erro-fundo: #3A1417;    --erro-borda: #6B2328;    --erro-tinta: #FF6961;
    --interruptor-ligado: #30D158;
    --interruptor-desligado: #48484A;
    --sombra: 0 1px 2px rgba(0, 0, 0, 0.35);
    --sombra-relevo: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 0.5px rgba(255, 255, 255, 0.06);
    --vidro-alto: #232325;
    --vidro-baixo: #232325;
    --trilho-fundo: rgba(40, 40, 42, 0.88);
    --trilho-texto: #F5F5F7;
    --trilho-texto-suave: #D1D1D6;
    --trilho-texto-fraco: #8E8E93;
    --trilho-linha: rgba(255, 255, 255, 0.09);
    --trilho-realce: rgba(255, 255, 255, 0.06);
  }
}
:root[data-tema="escuro"] {
  --sistema-azul: #3894FF;
  --sistema-azul-fundo: #0A6BDB;
  --sistema-azul-forte: #0A5FC4;
  --sistema-verde: #30D158;
  --sistema-vermelho: #FF6961;
  --fundo: #161618;
  --papel: #232325;
  --claro: #232325;
  --borda: #38383A;
  --borda-forte: #48484A;
  --tinta: #F5F5F7;
  --tinta-media: #D1D1D6;
  --suave: #98989D;
  --exemplo: #7C7C80;
  --ardosia-50:  #2C2C2E;
  --ardosia-100: #333336;
  --ardosia-200: #3A3A3C;
  --ardosia-300: #7C7C80;
  --ardosia-400: #98989D;
  --ardosia-500: #AEAEB2;
  --ardosia-600: #C7C7CC;
  --ardosia-700: #D1D1D6;
  --ardosia-800: #E5E5EA;
  --ok-fundo: #10301B;      --ok-borda: #1E5C33;      --ok-tinta: #4CD964;
  --atencao-fundo: #33250A; --atencao-borda: #664A14; --atencao-tinta: #FFB340;
  --erro-fundo: #3A1417;    --erro-borda: #6B2328;    --erro-tinta: #FF6961;
  --interruptor-ligado: #30D158;
  --interruptor-desligado: #48484A;
  --sombra: 0 1px 2px rgba(0, 0, 0, 0.35);
  --sombra-relevo: 0 1px 2px rgba(0, 0, 0, 0.45), 0 0 0 0.5px rgba(255, 255, 255, 0.06);
  --vidro-alto: #232325;
  --vidro-baixo: #232325;
  --trilho-fundo: rgba(40, 40, 42, 0.88);
  --trilho-texto: #F5F5F7;
  --trilho-texto-suave: #D1D1D6;
  --trilho-texto-fraco: #8E8E93;
  --trilho-linha: rgba(255, 255, 255, 0.09);
  --trilho-realce: rgba(255, 255, 255, 0.06);
}

/* A ALTURA DOS CONTROLES NA ESCALA DO MAC — só no computador. No celular
   vale a de base.css, os 44px do dedo. */
@media (min-width: 641px) {
  :root { --altura-controle: 2.125rem; }
}

/* 1. UMA COR DE DESTAQUE SÓ. Vence o `body[data-secao=…]` de base.css pela
   mesma especificidade, por vir depois. */
body, body[data-secao] {
  --acento: var(--sistema-azul);
  --acento-clara: color-mix(in srgb, var(--sistema-azul) 10%, var(--papel));
  --acento-borda: color-mix(in srgb, var(--sistema-azul) 28%, var(--papel));
  --botao-alto: var(--sistema-azul-fundo);
  --botao-baixo: var(--sistema-azul-fundo);
  --botao-alto-hover: var(--sistema-azul-forte);
  --botao-baixo-hover: var(--sistema-azul-forte);
}

/* 2 e 5. A MESA E A LETRA. */
body {
  background: var(--fundo);
  font-size: 14px;
  line-height: 1.47;
  letter-spacing: -0.006em;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue",
               "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
h1 { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.022em; }
h2 { font-size: 1.07rem; font-weight: 600; letter-spacing: -0.014em; }
h3 { font-size: 0.95rem; font-weight: 600; letter-spacing: -0.01em; }
a { color: var(--acento); text-decoration: none; }
a:hover { color: var(--acento); text-decoration: underline; text-underline-offset: 2px; }
table td a, .lista-registros a.corpo { color: var(--tinta); }
table td a:hover { color: var(--acento); }
.suave { color: var(--suave); }

/* A BARRA LATERAL — a dos Ajustes. Material translúcido, sem cor própria;
   os ícones coloridos em quadrados arredondados; a seleção em azul cheio
   com a letra branca. */
/* O material vai no `::before` (ver base.css: filtro no próprio trilho
   prende a gaveta da conta dentro dele). Aqui só a cor muda: sem o véu da
   cor da seção, que deixava a lateral azulada. */
.trilho { background: var(--trilho-fundo); }
.trilho::before { background: var(--trilho-fundo); }
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .trilho { background: transparent; }
}
/* A barra de ferramentas da tela vive DENTRO da janela, e a caixa de
   seleção dela («Painel de …») não é um cartão: sem moldura. */
.cabecalho-pagina .filtros {
  background: none; border: 0; box-shadow: none; padding: 0; margin: 0;
}
.area::before { background: var(--trilho-linha); }
@media (min-width: 1001px) {
  .trilho-secoes { gap: 1px; }
  .trilho-secoes > a {
    min-height: 2.05rem;
    padding: 0.28rem 0.5rem;
    border-radius: 7px;
    font-size: 0.93rem;
    font-weight: 500;
    color: var(--trilho-texto);
  }
  .trilho-secoes > a .i { width: 22px; height: 22px; border-radius: 6px; }
  .trilho-secoes > a:hover { background: var(--trilho-realce); }
  .trilho-secoes > a.ativo {
    background: var(--sistema-azul-fundo);
    color: #FFFFFF;
    font-weight: 600;
    box-shadow: none;
  }
  /* Com sub-seções abertas, quem fica azul é a sub-seção — como no Finder,
     só UMA linha é a seleção. A seção-mãe fica em negrito, sem fundo. */
  /* O ÍCONE DA SEÇÃO ESCOLHIDA CONTINUA NA COR DELA — como nos Ajustes, o
     quadradinho colorido fica colorido dentro da seleção azul. */
  .trilho-secoes > a[data-secao="painel"].ativo .i { background: var(--icone-secao-painel); }
  .trilho-secoes > a[data-secao="leads"].ativo .i { background: var(--icone-secao-leads); }
  .trilho-secoes > a[data-secao="oportunidades"].ativo .i { background: var(--icone-secao-oportunidades); }
  .trilho-secoes > a[data-secao="empresas"].ativo .i { background: var(--icone-secao-empresas); }
  .trilho-secoes > a[data-secao="prospeccao"].ativo .i { background: var(--icone-secao-prospeccao); }
  .trilho-secoes > a[data-secao="agenda"].ativo .i { background: var(--icone-secao-agenda); }
  .trilho-secoes > a[data-secao="agente"].ativo .i { background: var(--icone-secao-agente); }
  .trilho-secoes > a[data-secao="copiloto"].ativo .i { background: var(--icone-secao-copiloto); }
  .trilho-secoes > a[data-secao="avaliador"].ativo .i { background: var(--icone-secao-avaliador); }
  .trilho-secoes > a[data-secao="propostas"].ativo .i { background: var(--icone-secao-propostas); }
  .trilho-secoes > a[data-secao="comissao"].ativo .i { background: var(--icone-secao-comissao); }
  .trilho-secoes > a[data-secao="configuracao"].ativo .i { background: var(--icone-secao-configuracao); }
  .trilho-secoes > a.ativo:has(+ .trilho-filhas) {
    background: transparent;
    color: var(--trilho-texto);
  }
  .trilho-filhas { gap: 1px; padding-left: 0.35rem; }
  .trilho-filhas a {
    border-radius: 6px;
    /* 1,25rem e não 1,95rem (01/10/2026): com a Configuração inteira no
       trilho, «WhatsApp e Instagram» cortava em reticências. */
    padding: 0.24rem 0.5rem 0.24rem 1.25rem;
    font-size: 0.88rem;
    color: var(--trilho-texto-suave);
  }
  .trilho-filhas a:hover { background: var(--trilho-realce); color: var(--trilho-texto); }
  .trilho-filhas a.ativo {
    background: var(--sistema-azul-fundo);
    color: #FFFFFF;
    font-weight: 600;
  }
  .trilho-grupo {
    padding-left: 1.25rem;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-transform: none;
    color: var(--trilho-texto-fraco);
  }
}

/* A BARRA DE FERRAMENTAS DA JANELA: material, fio de cabelo, título curto. */
.cabecalho-pagina {
  background: color-mix(in srgb, var(--fundo) 78%, transparent);
  border-bottom: 1px solid var(--borda);
}
.cabecalho-pagina h1 { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; }
.cabecalho-pagina > .suave { font-size: 0.86rem; }
.voltar { color: var(--acento); font-weight: 500; }

/* 3. OS CARTÕES: brancos, lisos, fio de cabelo. */
.caixa {
  background: var(--papel);
  border: 1px solid color-mix(in srgb, var(--tinta) 7%, transparent);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
}
.caixa h2 { font-size: 1.02rem; }

/* OS NÚMEROS — os cartões do Saúde: ícone e nome na cor, o número grande em
   SF arredondada na cor da letra. Só o que é alarme fica colorido. */
.numeros { gap: 0.75rem; }
.numeros .numero {
  background: var(--papel);
  border: 1px solid color-mix(in srgb, var(--tinta) 7%, transparent);
  border-left-width: 1px;
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  padding: 0.9rem 1rem;
}
.numeros .numero::before { display: none; }
/* O nome do número em cinza secundário: colorido, ele ficava abaixo de
   4,5:1 em quatro das cores (medido na tela pintada, nos dois temas). A cor
   do assunto fica no ladrilho do ícone, que é elemento gráfico (3:1). */
.numeros .numero .rotulo {
  font-size: 0.74rem; font-weight: 600; letter-spacing: 0;
  text-transform: none; color: var(--suave);
}
.numeros .numero .valor {
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  font-size: 1.85rem; font-weight: 700; letter-spacing: -0.02em;
  color: var(--tinta);
}
.numeros .numero.destaque .valor { color: var(--faixa, var(--tinta)); }
.numeros .numero .nota { color: var(--suave); font-size: 0.8rem; }

/* 4. OS BOTÕES. O principal é azul e liso; o secundário é branco com fio;
   o de perigo é vermelho. Cantos de 8px, texto 14px médio. */
.botao, button {
  background: var(--sistema-azul-fundo);
  border: 1px solid transparent;
  color: #FFFFFF;
  font-size: 0.93rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  border-radius: var(--raio);
  padding: 0.3rem 0.9rem;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
  transition: background 120ms ease, box-shadow 120ms ease, transform 80ms ease;
}
.botao:hover, button:hover {
  background: var(--sistema-azul-forte);
  border-color: transparent;
  color: #FFFFFF;
  text-decoration: none;
}
.botao:active, button:active {
  background: var(--sistema-azul-forte);
  box-shadow: none;
  transform: scale(0.985);
}
.botao.secundario, button.secundario {
  background: var(--papel);
  color: var(--tinta);
  border: 1px solid color-mix(in srgb, var(--tinta) 14%, transparent);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
}
.botao.secundario:hover, button.secundario:hover {
  background: color-mix(in srgb, var(--tinta) 4%, var(--papel));
  color: var(--tinta);
  border-color: color-mix(in srgb, var(--tinta) 18%, transparent);
}
.botao.perigo, button.perigo {
  background: #E0352B; color: #FFFFFF; border-color: transparent;
}
.botao.perigo:hover, button.perigo:hover { background: #C42B22; }
.botao.compacto, button.compacto {
  font-size: 0.85rem; padding: 0.15rem 0.7rem; min-height: 1.75rem;
}

/* OS CAMPOS: brancos, fio fino, anel de foco azul como o do Mac. */
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 {
  background-color: var(--papel);
  border: 1px solid color-mix(in srgb, var(--tinta) 16%, transparent);
  border-radius: 7px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02) inset;
  font-size: 0.93rem;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--sistema-azul);
  box-shadow: var(--anel-foco);
}
input[type="checkbox"], input[type="radio"] { accent-color: var(--sistema-azul); }
:focus-visible { outline-color: var(--sistema-azul); }

/* O CONTROLE SEGMENTADO do Mac: trilho cinza, o escolhido branco em relevo,
   a letra na cor da letra — e não na cor de destaque. */
.subabas {
  background: color-mix(in srgb, #767680 12%, transparent);
  border-radius: 9px;
  padding: 2px;
  gap: 0;
}
.subabas a, .subabas button {
  border-radius: 7px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--tinta);
  padding: 0.26rem 0.9rem;
}
.subabas a:hover, .subabas button:hover { background: transparent; color: var(--tinta); }
.subabas a.ativa, .subabas button.ativa, .subabas button.ativa:hover,
.subabas a.ativa:hover {
  background: var(--papel);
  color: var(--tinta);
  font-weight: 600;
  box-shadow: var(--sombra-relevo);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .subabas a.ativa,
  :root:not([data-tema="claro"]) .subabas button.ativa { background: #636366; }
}
:root[data-tema="escuro"] .subabas a.ativa,
:root[data-tema="escuro"] .subabas button.ativa { background: #636366; }

/* 6. AS TABELAS: lista do Mac — cabeçalho cinza em caixa normal, linhas
   separadas por fio de cabelo, destaque cinza ao passar o mouse. */
table { font-size: 0.93rem; background: transparent; }
thead th, .tabela thead th {
  background: transparent;
  color: var(--suave);
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  border-bottom: 1px solid var(--borda);
  padding: 0.5rem 0.75rem;
}
tbody td { border-bottom: 1px solid var(--borda); padding: 0.62rem 0.75rem; }
tbody tr:hover, .tabela tbody tr:hover {
  background: color-mix(in srgb, var(--tinta) 3%, transparent);
}
.tabela-rolagem { background: transparent; border: 0; }

/* AS ETIQUETAS: cápsulas tingidas, sem borda — as de Lembretes e Mail. */
.etiqueta {
  border: 0;
  border-radius: 999px;
  padding: 0.08rem 0.55rem;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0;
}
.etiqueta.neutra {
  background: color-mix(in srgb, #767680 14%, transparent);
  color: var(--tinta-media);
}
.etiqueta.info {
  background: color-mix(in srgb, var(--sistema-azul) 12%, var(--papel));
  color: var(--sistema-azul);
}
.etiqueta.ok      { background: var(--ok-fundo);      color: var(--ok-tinta); }
.etiqueta.atencao { background: var(--atencao-fundo); color: var(--atencao-tinta); }
.etiqueta.ruim,
.etiqueta.acento  { background: var(--erro-fundo);    color: var(--erro-tinta); }

/* OS AVISOS: faixa tingida de cantos redondos, sem a barra na margem. */
.aviso {
  border: 0;
  border-radius: 10px;
  padding: 0.75rem 0.95rem;
  box-shadow: none;
}
.aviso.bom     { background: var(--ok-fundo);      color: var(--ok-tinta); }
.aviso.atencao { background: var(--atencao-fundo); color: var(--atencao-tinta); }
.aviso.ruim    { background: var(--erro-fundo);    color: var(--erro-tinta); }
.aviso:not(.bom):not(.atencao):not(.ruim) {
  background: color-mix(in srgb, #767680 10%, transparent);
  color: var(--tinta);
  border: 0;
}

/* A BARRA DE FILTROS: sem cartão próprio — os campos soltos em cima da
   lista, como a busca do Mail e do Finder. Dentro de um cartão ela era um
   cartão dentro do cartão. */
.filtros {
  background: none; border: 0; box-shadow: none;
  padding: 0; border-radius: 0;
}

/* OS PAINÉIS ABRÍVEIS: a setinha de divulgação do Finder. */
details > summary { cursor: pointer; }

/* O BALÃO DA CONVERSA: o do Mensagens — cinza de quem escreveu, azul de nós. */
.fio .balao { border-radius: 18px; padding: 0.5rem 0.85rem; border: 0; }
.fio .fala.cliente .balao { background: color-mix(in srgb, #767680 14%, var(--papel)); }
.fio .fala.agente .balao,
.fio .fala.pessoa .balao {
  background: var(--sistema-azul-fundo);
  color: #FFFFFF;
  border: 0;
}
.fio .fala.pessoa .balao { box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.55); }

/* O PONTO DE AJUDA: o «?» cinza dos Ajustes, sem a cor da seção. */
.ajuda { color: var(--ardosia-400); }

/* A LISTA DE CONVERSAS E A DE REGISTROS: linhas do Mail. */
.lista-conversas a:hover,
ul.lista-registros > li:hover { background: color-mix(in srgb, var(--tinta) 3%, transparent); }

/* O CELULAR: a barra de abas do iOS — ícone e rótulo na cor de destaque só
   na aba escolhida, o resto cinza. O desenho das abas já é esse; aqui só a
   cor sai da seção e vai para o azul do sistema. */

/* OS PLACARES DO PAINEL: cartão liso, sem a faixa grossa colorida à
   esquerda nem o véu tingido — o ladrilho colorido já diz o assunto. */
.placar { gap: 0.75rem; }
.placar-item, .placar-item.tom, .placar-item.ok, .placar-item.falta,
.placar-item.tom.ok, .placar-item.tom.falta {
  background: var(--papel);
  border: 1px solid color-mix(in srgb, var(--tinta) 7%, transparent);
  border-left-width: 1px;
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
}
.placar-item .placar-numero {
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  letter-spacing: -0.02em;
}
.caixa.hoje { border-left: 1px solid color-mix(in srgb, var(--tinta) 7%, transparent); }

/* O CELULAR, NA ESCALA DO iPHONE ---------------------------------------- */
@media (max-width: 640px) {
  /* O título grande do iOS: a tela diz onde se está em letra de manchete,
     logo abaixo do «‹ Voltar». */
  .cabecalho-pagina h1 { font-size: 1.45rem; letter-spacing: -0.025em; }
  /* Os números em dois por linha, como os widgets da tela de início — um
     por linha fazia o Painel começar com quatro cartões do tamanho da tela. */
  .numeros, .placar { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
  .numeros .numero, .placar-item { padding: 0.75rem 0.8rem; }
  .numeros .numero .valor { font-size: 1.6rem; }
  /* A barra de filtros: busca na linha inteira, seletores dois a dois. */
  .filtros { gap: 0.5rem; }
  .filtros > input[type="search"], .filtros > input[type="text"] { flex: 1 1 100%; }
  .filtros > select { flex: 1 1 calc(50% - 0.5rem); min-width: 0; }
}

/* O NÚMERO DE LEADS NA BARRA DE ABAS É O DO iOS: uma bolinha vermelha no
   canto do ícone, e não uma terceira linha dentro da aba. Empilhado, ele
   crescia a barra de 62 para 67px sempre que havia lead novo — e o fim de
   cada tela ficava escondido atrás dela (medido pelo `testar_interface` com
   dois leads na fila; no ar há três). */
@media (max-width: 640px) {
  .trilho-secoes > a { position: relative; }
  .trilho-secoes > a .marca-de-fila {
    position: absolute;
    top: 2px;
    left: calc(50% + 4px);
    margin: 0;
    min-width: 1.05rem;
    line-height: 1.05rem;
    font-size: 0.66rem;
    padding: 0 0.28rem;
    box-shadow: 0 0 0 2px var(--papel);
  }
}

/* A LISTA SOLTA NA MESA GANHA O CARTÃO BRANCO — a lista agrupada. Tabela que
   não está dentro de um cartão (Oportunidades, Lista do dia, Prospecção)
   ficava desenhada direto sobre o cinza, e a linha não tinha onde morar. */
main > .tabela-rolagem, main > table.tabela, main > table {
  background: var(--papel);
  border: 1px solid color-mix(in srgb, var(--tinta) 7%, transparent);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  overflow: hidden;
}
main > .tabela-rolagem { overflow-x: auto; }
main > .tabela-rolagem > table, main > table { background: transparent; }
@media (max-width: 640px) {
  /* No celular a tabela vira cartões — cada linha é o seu. */
  main > .tabela-rolagem, main > table.tabela, main > table {
    background: transparent; border: 0; box-shadow: none; overflow: visible;
  }
}

/* AS PÁGINAS ABERTAS (Sobre, Privacidade, Exclusão) NÃO TÊM A JANELA DO
   APLICATIVO: o `body` em fileira de base.css — trilho à esquerda, conteúdo
   à direita — punha o cabeçalho, o texto e o rodapé lado a lado. */
body:has(> header.topo) { display: block; }
body:has(> header.topo) > footer { text-align: center; padding: 1.5rem 1rem 2.5rem; }

/* A PERGUNTA ANTES DE APAGAR É O ALERTA DO macOS: estreito, centralizado,
   título em negrito no meio, os dois botões do mesmo tamanho lado a lado —
   e o material translúcido de uma janela de sistema. */
.folha {
  max-width: 19.5rem;
  border-radius: 14px;
  text-align: center;
  background: color-mix(in srgb, var(--papel) 90%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(30px);
  backdrop-filter: saturate(180%) blur(30px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28), 0 0 0 0.5px rgba(0, 0, 0, 0.12);
}
.folha::backdrop { background: rgba(0, 0, 0, 0.22); backdrop-filter: none; }
.folha h2 { padding: 1.35rem 1.25rem 0.35rem; font-size: 0.98rem; font-weight: 700; }
.folha p { padding: 0 1.25rem 0.2rem; font-size: 0.86rem; color: var(--tinta-media); }
.folha-acoes {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
  padding: 1rem 1.25rem 1.25rem;
}
.folha-acoes .botao { width: 100%; }

/* HOJE NO CALENDÁRIO É O DO APP CALENDÁRIO: o número do dia num círculo
   vermelho, e a célula sem tinta. O turquesa sobre a célula tingida dava
   4,4:1 (medido pelo `testar_telas`). */
.grade-agenda .celula.hoje { background: var(--papel); }
.grade-agenda .celula.hoje .numero-dia .so-numero,
.grade-agenda .celula.hoje button.numero-dia .so-numero {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.6rem; height: 1.6rem; padding: 0 0.3rem;
  border-radius: 999px;
  background: #D70015; color: #FFFFFF; font-weight: 700;
}

/* =============================================================================
   O CELULAR COMO UM APP DO iPHONE (segunda passada, 23/09)
   ========================================================================== */
@media (max-width: 640px) {
  /* A BARRA DE ABAS DO iOS: cinco colunas iguais, o desenho solto (sem o
     quadrado colorido, que é coisa da lateral do Mac), cinza quando parado e
     azul na aba aberta. Antes o «Mais» ficava espremido no canto com 32px e
     «Oportunidades» saía cortado. */
  .trilho-secoes {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0;
    width: 100%;
  }
  .trilho-secoes > a, .mais-abas > summary {
    min-width: 0;
    padding: 0.3rem 0.1rem 0.2rem;
    gap: 0.12rem;
    color: var(--trilho-texto-fraco);
    font-weight: 500;
  }
  .trilho-secoes > a[data-secao] .i,
  .mais-abas > summary .i,
  .trilho-secoes > a[data-secao].ativo .i,
  .mais-abas.ativo > summary .i {
    width: 26px; height: 26px; padding: 1px;
    background: none; box-shadow: none;
    color: inherit;
    stroke-width: 1.9;
  }
  .trilho-secoes > a.ativo, .mais-abas.ativo > summary,
  .trilho-secoes > a.ativo:hover {
    color: var(--sistema-azul);
    background: transparent;
    font-weight: 600;
  }
  .trilho-secoes > a:hover { background: transparent; }
  .trilho-secoes > a span, .mais-abas > summary span {
    font-size: 0.625rem;
    max-width: 100%;
    letter-spacing: 0;
  }
  .trilho-secoes > a .marca-de-fila { left: calc(50% + 6px); top: 1px; }

  /* O CONTROLE SEGMENTADO DO iOS ocupa a largura e divide em partes iguais.
     O esfumado nas pontas (feito para avisar que dá para rolar) apagava as
     bordas do controle mesmo quando tudo cabia. */
  .subabas.subabas-estreitas {
    -webkit-mask-image: none; mask-image: none;
  }
  .subabas.subabas-estreitas > a, .subabas.subabas-estreitas > button {
    flex: 1 0 auto;
    justify-content: center;
    text-align: center;
  }

  /* O CABEÇALHO DO PAINEL: a saudação inteira na primeira linha (o iOS nunca
     corta o título grande com «…»), a data e o «Painel de» logo abaixo. */
  .cabecalho-pagina:has(.seletor-painel) { flex-wrap: wrap; row-gap: 0.5rem; }
  .cabecalho-pagina:has(.seletor-painel) > h1 {
    flex: 1 1 100%;
    white-space: normal; overflow: visible; text-overflow: clip;
  }
  .cabecalho-pagina:has(.seletor-painel) .acoes-cabecalho {
    flex: 1 1 100%; display: flex; align-items: center; gap: 0.5rem;
    justify-content: space-between;
  }
  .cabecalho-pagina .etiqueta { white-space: nowrap; }
  .cabecalho-pagina .seletor-painel select { max-width: 13rem; }

  /* A LINHA DA TABELA QUE VIROU CARTÃO: o valor fica inteiro à direita.
     Com a célula em `flex`, cada pedaço do valor virava um item separado —
     «52» no meio e «/27» na ponta; «vencida há 21 dias» caía à esquerda,
     longe da ação a que pertence. Em bloco, com o nome do campo flutuando à
     esquerda, o valor corre junto como um texto só. */
  table.tabela tbody td, .tabela-rolagem tbody td {
    display: block;
    text-align: right;
  }
  table.tabela tbody td[data-rotulo]::before,
  .tabela-rolagem tbody td[data-rotulo]::before {
    float: left;
    margin-right: 0.8rem;
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI",
                 Roboto, Arial, sans-serif;
  }
  table.tabela tbody td::after, .tabela-rolagem tbody td::after {
    content: ""; display: block; clear: both;
  }
}

/* O NÚMERO É PRETO, e só o alarme ganha cor. base.css apagava para cinza os
   dois primeiros cartões de QUALQUER fileira de números — pensado para o
   Painel, mas valendo também em Leads, onde «Novos: 2» saía cinza-claro como
   se fosse coisa desligada. */
.numeros .numero:nth-child(-n+2):not(.destaque) .valor { color: var(--tinta); }

/* O CONTROLE SEGMENTADO NÃO ESFUMA A PONTA. O esfumado avisava que a faixa
   rolava — mas pintava sempre, e o controle parecia cortado mesmo cabendo
   inteiro. No Mac o segmentado cabe; quando não cabe, o segmento cortado já
   diz que há mais. E ele não encosta no cartão de cima. */
.subabas { -webkit-mask-image: none; mask-image: none; }
main > .subabas:not(.subabas-estreitas) { margin-top: 0.5rem; }

/* O TÍTULO DA TELA com o peso do título de janela do Mac. */
@media (min-width: 641px) {
  .cabecalho-pagina h1 { font-size: 1.375rem; letter-spacing: -0.022em; }
}

/* NA LATERAL, O ITEM DE GRUPO NA MESMA COLUNA DOS OUTROS. base.css recuava
   o item agrupado para 0,9rem — MENOS do que os itens soltos (1,95rem) —, e
   «Configuração» debaixo de «Prospecção» saía à esquerda do próprio título
   do grupo. */
@media (min-width: 1001px) {
  .trilho-filhas a.agrupada { padding-left: 1.25rem; }
  .trilho-grupo { margin-top: 0.6rem; }
}

/* O TEXTO LOGO ABAIXO DE UMA LISTA não encosta nela. */
main > .tabela-rolagem + p, main > table + p,
main > .tabela-rolagem + .suave, main > table + .suave { margin-top: 0.75rem; }

/* A CAIXA DE ENTRADA É A LISTA DO MAIL: um cartão branco com as conversas
   separadas por fio de cabelo — e não linhas soltas sobre o cinza da mesa. */
main > .lista-conversas {
  background: var(--papel);
  border: 1px solid color-mix(in srgb, var(--tinta) 7%, transparent);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  padding: 0.25rem;
}
main > .lista-conversas li { border-bottom-color: color-mix(in srgb, var(--tinta) 8%, transparent); }

/* OS PONTOS EM DINHEIRO, no cartão de Pontos do painel: duas linhas de
   rótulo à esquerda e valor à direita, como a lista de um recibo — o vendido
   e o que seriam os esperados. A projeção em azul, que é a cor de «se». */
.placar-dinheiro {
  display: block;
  margin-top: 0.65rem;
  padding-top: 0.55rem;
  border-top: 1px solid color-mix(in srgb, var(--tinta) 8%, transparent);
  font-size: 0.82rem;
}
.placar-dinheiro-linha {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 0.6rem; line-height: 1.6;
}
.placar-dinheiro-linha > span { color: var(--suave); }
.placar-dinheiro-linha b { font-variant-numeric: tabular-nums; color: var(--tinta); }
.placar-dinheiro-linha.projecao b { color: var(--sistema-azul); }
.placar-dinheiro-nota { display: block; color: var(--suave); font-size: 0.76rem; }

/* O RESUMO DO DINHEIRO — o cartão deitado sob os quatro do placar. Uma
   grade de quatro colunas (rótulo, meta, pontos, total) com duas linhas que
   se leem como conta. Os números alinhados à direita, em algarismos de
   largura fixa, para as colunas baterem como num extrato. A linha de hoje em
   verde quando paga; a projeção em azul, a cor de «se». */
.resumo-dinheiro {
  margin-top: 0.9rem;
  background: var(--papel);
  border: 1px solid color-mix(in srgb, var(--tinta) 7%, transparent);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.resumo-cabeca, .resumo-linha {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr));
  gap: 1rem;
  align-items: center;
  padding: 0.7rem 1.1rem;
}
.resumo-cabeca {
  padding-top: 0.6rem; padding-bottom: 0.45rem;
  font-size: 0.74rem; font-weight: 600; color: var(--suave);
  border-bottom: 1px solid color-mix(in srgb, var(--tinta) 7%, transparent);
}
.resumo-cabeca span { text-align: right; }
.resumo-linha + .resumo-linha {
  border-top: 1px solid color-mix(in srgb, var(--tinta) 7%, transparent);
}
.resumo-rotulo { font-weight: 600; font-size: 0.9rem; color: var(--tinta); }
.resumo-rotulo small {
  display: block; font-weight: 400; font-size: 0.78rem; color: var(--suave);
  margin-top: 0.1rem;
}
.resumo-valor {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-size: 1rem; color: var(--tinta);
}
.resumo-valor.total {
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, sans-serif;
  font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em;
}
.resumo-linha.paga .resumo-valor.total { color: var(--ok-tinta); }
.resumo-linha.nao-paga .resumo-valor { color: var(--suave); }
.resumo-linha.projecao { background: color-mix(in srgb, var(--sistema-azul) 5%, var(--papel)); }
.resumo-linha.projecao .resumo-valor.total { color: var(--sistema-azul); }

/* No celular a conta deita em duas colunas: o rótulo na linha inteira, e
   cada valor com o nome dele em cima. O cabeçalho some — cada número já
   leva o seu. */
@media (max-width: 640px) {
  .resumo-cabeca { display: none; }
  .resumo-linha { grid-template-columns: 1fr 1fr; gap: 0.5rem 0.8rem; padding: 0.8rem 0.9rem; }
  .resumo-rotulo { grid-column: 1 / -1; }
  .resumo-valor { text-align: left; }
  .resumo-valor::before {
    content: attr(data-rotulo);
    display: block; font-size: 0.72rem; color: var(--suave);
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
    font-weight: 500;
  }
  .resumo-valor.total { grid-column: 1 / -1; }
}

/* ==========================================================================
   COMPROMISSO: REUNIÃO OU TAREFA, E A JANELA DE DETALHE — 24/09/2026

   Do gestor: «mude a cor quando for reunião e quando for tarefa, para uma
   identificação visual na grade» · «melhore o visual do compromisso marcado,
   está muito poluído e de difícil leitura» · «quando abrir o compromisso,
   esteja escrito o tipo que ela escolheu».

   DUAS CORES, E SÓ DUAS. Azul é reunião (visita ou call) — é o azul que a
   agenda já usava para «ainda vai acontecer», então a grade de quem só marca
   reunião não muda. Roxo é ligação ou tarefa: nenhuma outra coisa nesta tela
   é roxa, e ele não é âmbar nem vermelho, que aqui querem dizer «atenção».

   A FAIXA DA ESQUERDA diz o tipo em qualquer estado; o FUNDO segue dizendo o
   estado (verde feito, cinza passou, vermelho não subiu). No que ainda vai
   acontecer, o fundo também toma a cor do tipo — é a semana que ela olha
   para se organizar.
   ========================================================================== */
:root {
  --cor-reuniao: #0071E3;  --cor-reuniao-texto: #0066CC;
  --cor-tarefa:  #AF52DE;  --cor-tarefa-texto:  #8944AB;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --cor-reuniao: #0A84FF;  --cor-reuniao-texto: #409CFF;
    --cor-tarefa:  #BF5AF2;  --cor-tarefa-texto:  #DA8FFF;
  }
}
:root[data-tema="escuro"] {
  --cor-reuniao: #0A84FF;  --cor-reuniao-texto: #409CFF;
  --cor-tarefa:  #BF5AF2;  --cor-tarefa-texto:  #DA8FFF;
}

button.compromisso.tipo-reuniao,
button.compromisso.tipo-tarefa { border-left-width: 3px; border-left-style: solid; }
button.compromisso.tipo-reuniao { border-left-color: var(--cor-reuniao); }
button.compromisso.tipo-tarefa  { border-left-color: var(--cor-tarefa); }
button.compromisso.futuro.tipo-tarefa {
  background: color-mix(in srgb, var(--cor-tarefa) 13%, var(--papel));
  color: color-mix(in srgb, var(--cor-tarefa-texto) 82%, var(--tinta));
  border-color: color-mix(in srgb, var(--cor-tarefa) 32%, var(--papel));
  border-left-color: var(--cor-tarefa);
}

/* A legenda, uma linha discreta acima da grade: sem ela a cor é um código
   que só quem pediu conhece. */
.legenda-tipos {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.3rem 1rem;
  margin: -0.35rem 0 0.6rem; font-size: 0.78rem; color: var(--suave);
}
.legenda-tipos .legenda::before {
  content: ""; display: inline-block; width: 0.6rem; height: 0.6rem;
  border-radius: 2px; margin-right: 0.35rem; vertical-align: -0.05rem;
  background: var(--cor-reuniao);
}
.legenda-tipos .legenda.tarefa::before { background: var(--cor-tarefa); }

/* --- A janela ----------------------------------------------------------- */
dialog.detalhe-compromisso {
  width: min(31rem, calc(100vw - 2rem));
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
  padding: 1.25rem 1.35rem 1rem;
  border-radius: 14px;
}
.cabeca-compromisso h2 {
  margin: 0 2rem 0.2rem 0;
  font-size: 1.2rem; line-height: 1.3; font-weight: 650; letter-spacing: -0.012em;
}
.quando-compromisso {
  color: var(--suave); font-size: 0.92rem; font-variant-numeric: tabular-nums;
}

/* O tipo, em cima do título, na cor da faixa do cartão. */
.chip-tipo {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin: 0 2rem 0.5rem 0; padding: 0.16rem 0.6rem 0.18rem;
  border-radius: 999px;
  font-size: 0.76rem; font-weight: 600; letter-spacing: 0.005em;
  background: color-mix(in srgb, var(--suave) 13%, var(--papel));
  color: var(--tinta-media);
}
.chip-tipo::before {
  content: ""; width: 0.5rem; height: 0.5rem; border-radius: 50%;
  background: currentColor;
}
.chip-tipo[hidden] { display: none; }
.chip-tipo.reuniao {
  background: color-mix(in srgb, var(--cor-reuniao) 13%, var(--papel));
  color: var(--cor-reuniao-texto);
}
.chip-tipo.tarefa {
  background: color-mix(in srgb, var(--cor-tarefa) 14%, var(--papel));
  color: var(--cor-tarefa-texto);
}

/* As três ações do dia, lado a lado e do mesmo tamanho. O botão cujo
   formulário está aberto fica marcado — ele não some, fecha o que abriu. */
.acoes-principais { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.acoes-principais:empty { display: none; }
.acoes-principais > .botao,
.acoes-principais > button { flex: 1 1 0; min-width: 7rem; margin: 0; }
.acoes-principais > p { flex: 1 1 100%; margin: 0 0 0.1rem; font-size: 0.85rem; }
.acoes-principais > [aria-expanded="true"] {
  background: color-mix(in srgb, var(--sistema-azul) 12%, var(--papel));
  border-color: color-mix(in srgb, var(--sistema-azul) 38%, var(--papel));
  color: var(--sistema-azul);
}

.caixa-confirmar {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  margin-top: 0.9rem; padding: 0.75rem 0.85rem;
  border-radius: 10px;
  background: var(--atencao-fundo); border: 1px solid var(--atencao-borda);
}
.caixa-confirmar[hidden] { display: none; }
.caixa-confirmar p { flex: 1 1 100%; margin: 0; font-size: 0.86rem; color: var(--atencao-tinta); }
.caixa-confirmar form { margin: 0; }

.concluido-compromisso {
  margin-top: 0.9rem; padding: 0.6rem 0.8rem; border-radius: 10px;
  background: var(--ok-fundo); color: var(--ok-tinta); font-size: 0.9rem;
}
dialog.detalhe-compromisso .aviso { margin: 0.9rem 0 0; font-size: 0.86rem; }

/* Concluir e corrigir: um painel de cada vez, logo abaixo dos botões. */
dialog.detalhe-compromisso .painel-acao {
  margin-top: 0.9rem; padding: 0.9rem 1rem 1rem;
  border-radius: 12px;
  background: var(--ardosia-50); border: 1px solid var(--borda);
}
dialog.detalhe-compromisso .painel-acao h3 { margin: 0 0 0.5rem; font-size: 0.95rem; }
.fim-do-painel { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.8rem; }
.fim-do-painel button { margin: 0; }

/* Os dados: rótulo à esquerda, valor à direita, um fio entre as linhas — o
   inspetor do Calendário. Era rótulo em cima e valor embaixo, tudo em
   negrito, e cada dado custava duas linhas. */
dl.ficha-compromisso {
  display: block; margin: 1rem 0 0; font-size: 0.9rem;
  border-top: 1px solid var(--borda);
}
dl.ficha-compromisso > div {
  display: grid; grid-template-columns: 6rem minmax(0, 1fr);
  gap: 0.15rem 0.75rem; padding: 0.55rem 0;
  border-bottom: 1px solid var(--borda);
}
dl.ficha-compromisso dt,
dl.ficha-compromisso dd { border: none; padding: 0; margin: 0; }
dl.ficha-compromisso dt { color: var(--suave); }
dl.ficha-compromisso dd { text-align: left; font-weight: 450; color: var(--tinta); }
dl.ficha-compromisso .convidado {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 0.5rem; margin-bottom: 0.2rem;
}
dl.ficha-compromisso .resumo-rsvp { font-size: 0.84rem; margin-bottom: 0.3rem; }

/* A anotação na gaveta. */
.notas-compromisso { margin-top: 0.8rem; }
.notas-compromisso > summary {
  cursor: pointer; padding: 0.2rem 0;
  font-size: 0.86rem; font-weight: 500; color: var(--suave);
}
.notas-compromisso .descricao-compromisso {
  margin-top: 0.35rem; padding: 0.65rem 0.8rem;
  border-top: none; border-radius: 10px;
  background: var(--ardosia-50);
  font-size: 0.86rem; line-height: 1.5; color: var(--tinta-media);
  max-height: 14rem; overflow-y: auto;
}

/* A arrumação no rodapé: pequena, com cara de link, e «Excluir» em
   vermelho. Continua tudo lá — só deixou de disputar o olho com o que
   importa. */
.acoes-secundarias {
  gap: 0.1rem 0.2rem; margin-top: 1rem; padding-top: 0.6rem;
  border-top: 1px solid var(--borda);
}
.acoes-secundarias:empty { display: none; }
.acoes-secundarias .botao,
.acoes-secundarias button {
  background: none; border: none; box-shadow: none;
  min-height: 0; margin: 0; padding: 0.3rem 0.45rem;
  font-size: 0.84rem; font-weight: 500; color: var(--sistema-azul);
}
.acoes-secundarias .botao:hover,
.acoes-secundarias button:hover {
  background: color-mix(in srgb, var(--sistema-azul) 9%, transparent);
}
.acoes-secundarias button.perigo-texto { color: var(--sistema-vermelho); }
.acoes-secundarias button.perigo-texto:hover {
  background: color-mix(in srgb, var(--sistema-vermelho) 9%, transparent);
}

/* O «Corrigir» em duas colunas: dia e hora, duração e relógio, tipo e
   empresa lado a lado. Numa coluna só eram nove campos empilhados, e a
   janela virava uma rolagem comprida. */
dialog.detalhe-compromisso .painel-acao .formulario {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem 0.75rem;
}
dialog.detalhe-compromisso .painel-acao label { margin: 0; }
dialog.detalhe-compromisso .painel-acao > label { display: block; margin-bottom: 0.6rem; }
@media (max-width: 420px) {
  dialog.detalhe-compromisso .painel-acao .formulario { grid-template-columns: minmax(0, 1fr); }
}

/* «Como foi a ligação» só aparece com «Ligação» escolhida na tratativa
   (24/09/2026). Sem `:has`, o campo fica sempre à vista — e o servidor
   ignora nos outros tipos, então nada se perde. */
.formulario-tratativa:has(select[name="tipo"] option[value="ligacao"]:not(:checked)) .so-ligacao {
  display: none;
}

/* =============================================================================
   A LISTA DE AJUSTES — revisão de telas de 01/10/2026
   =============================================================================
   A lista agrupada dos ajustes do macOS: um cartão, linhas com fio de cabelo,
   ícone colorido num quadrado arredondado à esquerda, nome e detalhe no
   meio, estado à direita e a seta «›» dizendo que a linha abre outra tela.
   Usada em Configuração → Integrações; serve a qualquer lista de «o que está
   ligado e onde se resolve». */
.lista-ajustes {
  list-style: none; margin: 0 0 1rem; padding: 0;
  background: var(--papel);
  border: 1px solid color-mix(in srgb, var(--tinta) 7%, transparent);
  border-radius: var(--raio-g);
  box-shadow: var(--sombra);
  overflow: hidden;
}
.lista-ajustes > li + li .linha-ajuste { border-top: 1px solid var(--borda); }
.linha-ajuste {
  display: flex; align-items: center; gap: 0.75rem;
  min-height: 48px; padding: 0.6rem 0.9rem;
  color: var(--tinta); text-decoration: none;
}
.linha-ajuste:hover { background: color-mix(in srgb, var(--tinta) 4%, transparent); }
.linha-ajuste:focus-visible { outline: 2px solid var(--sistema-azul); outline-offset: -2px; }
.linha-ajuste::after {
  content: "›"; color: var(--ardosia-400); font-size: 1.25rem; line-height: 1;
}
.icone-ajuste {
  flex: none; width: 28px; height: 28px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #FFFFFF; background: var(--icone-cinza);
}
.icone-ajuste .i { width: 17px; height: 17px; }
.icone-whatsapp { background: var(--icone-verde); }
.icone-instagram { background: var(--icone-rosa); }
.icone-site { background: var(--icone-indigo); }
.icone-meta { background: var(--icone-azul); }
.icone-retorno { background: var(--icone-ciano); }
.icone-google { background: var(--icone-laranja); }
.texto-ajuste { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.nome-ajuste { font-weight: 500; }
.detalhe-ajuste {
  color: var(--suave); font-size: 0.85rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 480px) {
  .detalhe-ajuste { white-space: normal; }
}

/* O FIO DA CONVERSA numa janela de altura fixa, que abre na última fala
   (`fio.js`). A resposta fica logo abaixo, à vista, sem rolar a página. */
[data-fio] {
  max-height: min(62vh, 640px);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 0.25rem;
  scrollbar-gutter: stable;
}
[data-fio]:focus-visible { outline: 2px solid var(--sistema-azul); outline-offset: 2px; border-radius: 8px; }

/* «MAIS OPÇÕES» — a técnica de expansão (revisão de telas, 01/10/2026).
   O triângulo de divulgação do Mac: o campo que se usa todo dia fica à
   vista; o que se ajusta uma vez fica a um clique, dentro do mesmo
   formulário, e é enviado junto mesmo fechado. */
details.mais-opcoes { margin: 0.8rem 0 0; }
details.mais-opcoes > summary {
  list-style: none; display: inline-flex; align-items: center; gap: 0.4rem;
  color: var(--sistema-azul); font-weight: 500; font-size: 0.9rem;
  cursor: pointer; padding: 0.2rem 0; user-select: none;
}
details.mais-opcoes > summary::-webkit-details-marker { display: none; }
details.mais-opcoes > summary::before {
  content: ""; width: 0; height: 0;
  border-left: 5px solid currentColor;
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  transition: transform 0.15s ease;
}
details.mais-opcoes[open] > summary::before { transform: rotate(90deg); }
details.mais-opcoes[open] > summary { margin-bottom: 0.7rem; }
details.mais-opcoes > .conteudo-opcoes {
  border-left: 2px solid var(--borda); padding-left: 0.9rem;
}


/* =============================================================================
   A LUZ DA SEÇÃO NO FUNDO DA TELA — 17/10/2026
   =============================================================================
   Do gestor: «Era pra manter exatamente o mesmo layout anterior e apenas
   adicionar uma sombra na tela como se fosse uma luz na cor do menu no fundo
   da pagina. Nao precisa mudar a cor dos botoes.»

   SÓ ISTO. Botões, links, seleção do trilho e o trilho inteiro continuam como
   estavam (azul do sistema; os quadradinhos coloridos). O que entra é um
   brilho suave, na cor do quadradinho da seção aberta, pintado NA MESA — o
   fundo atrás dos cartões. Os cartões são brancos e opacos, então a letra
   não muda de contraste em lugar nenhum.

   Na `.area`, e não no `body`: o trilho é translúcido, e com o brilho no
   `body` ele apareceria tingido por trás do vidro — e o pedido foi deixar o
   menu como estava. `background-attachment: fixed` prende a luz na janela:
   rolar a página não a leva embora.

   Uma luz forte no canto de cima, à direita (onde fica o título e o botão da
   tela), e um reflexo mais fraco embaixo, à esquerda. No escuro a luz é um
   pouco mais forte, porque sobre o fundo quase preto a mesma dose some.
   Tela sem seção (login, erro) fica sem luz. */
body[data-secao="painel"] { --cor-secao: var(--secao-painel); }
body[data-secao="leads"] { --cor-secao: var(--secao-leads); }
body[data-secao="oportunidades"] { --cor-secao: var(--secao-oportunidades); }
body[data-secao="empresas"] { --cor-secao: var(--secao-empresas); }
body[data-secao="prospeccao"] { --cor-secao: var(--secao-prospeccao); }
body[data-secao="agenda"] { --cor-secao: var(--secao-agenda); }
body[data-secao="copiloto"] { --cor-secao: var(--secao-copiloto); }
body[data-secao="agente"] { --cor-secao: var(--secao-agente); }
body[data-secao="avaliador"] { --cor-secao: var(--secao-avaliador); }
body[data-secao="propostas"] { --cor-secao: var(--secao-propostas); }
body[data-secao="aprovacoes"] { --cor-secao: var(--secao-aprovacoes); }
body[data-secao="comissao"] { --cor-secao: var(--secao-comissao); }
body[data-secao="configuracao"] { --cor-secao: var(--secao-configuracao); }
.area {
  /* A ALTURA DA JANELA, no mínimo: numa tela curta a `.area` terminava no
     fim do conteúdo, e a luz parava ali com uma borda reta. */
  min-height: 100vh;
  background:
    radial-gradient(70rem 34rem at 100% 0%,
                    color-mix(in srgb, var(--cor-secao, transparent) 26%, transparent), transparent 72%),
    radial-gradient(60rem 30rem at 0% 100%,
                    color-mix(in srgb, var(--cor-secao, transparent) 12%, transparent), transparent 70%);
  background-attachment: fixed;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .area {
    background:
      radial-gradient(70rem 34rem at 100% 0%,
                      color-mix(in srgb, var(--cor-secao, transparent) 30%, transparent), transparent 72%),
      radial-gradient(60rem 30rem at 0% 100%,
                      color-mix(in srgb, var(--cor-secao, transparent) 14%, transparent), transparent 70%);
    background-attachment: fixed;
  }
}
:root[data-tema="escuro"] .area {
  background:
    radial-gradient(70rem 34rem at 100% 0%,
                    color-mix(in srgb, var(--cor-secao, transparent) 30%, transparent), transparent 72%),
    radial-gradient(60rem 30rem at 0% 100%,
                    color-mix(in srgb, var(--cor-secao, transparent) 14%, transparent), transparent 70%);
  background-attachment: fixed;
}
/* No celular o menu é a barra de abas, de vidro, embaixo: o reflexo de baixo
   apareceria tingido atrás dela. Fica só a luz de cima. */
@media (max-width: 640px) {
  .area, :root:not([data-tema="claro"]) .area, :root[data-tema="escuro"] .area {
    background:
      radial-gradient(40rem 26rem at 100% 0%,
                      color-mix(in srgb, var(--cor-secao, transparent) 26%, transparent), transparent 72%);
    background-attachment: scroll;
  }
}