/* ============================================================
   CRM JRK — o sistema visual novo: o estilo da EVF, com as cores da JRK

   Decidido com o Breno em 22/09/2026, parte por parte. O registro
   inteiro está em docs/superpowers/specs/2026-09-22-estilo-evf-no-crm-design.md.
   A referência é o sistema da EVF Stones (src/ui/tokens.css e
   sidebar.module.css), e o movimento conversa com o repositório de
   skills do Emil Kowalski, que o Breno pediu para usar junto.

   Só vale para a tela que declara <body data-visual="novo">. As outras
   continuam no crm.css até cada uma ser refeita, uma por uma, com ele
   olhando. Por isso nada aqui mexe em classe antiga.

   Três regras que vêm pagas pela EVF e não se discutem:
   1. CONTRASTE SE MEDE NA TELA, compondo as camadas. O vidro deixa o
      fundo aparecer, e na EVF um texto passava no cálculo e reprovava
      na tela. Os números abaixo foram medidos no navegador.
   2. VIDRO SÓ ONDE HÁ ALGO POR TRÁS. Sobre fundo parado ele vira cinza.
   3. ESTA FOLHA É A ÚNICA FONTE de cor, espaço, raio e sombra. Tela não
      crava cor.
   ============================================================ */

:root{
  /* ---------- a marca ---------- */
  /* Com texto em cima, SEMPRE o escuro: branco sobre #F05636 dá 3,45:1 e
     reprova. O vivo só onde ninguém lê por cima: ponto, progresso, anel. */
  --laranja:#F05636;
  --laranja-esc:#C93E22;
  /* O laranja de LETRA sobre fundo claro (o nome do vendedor, o preço, o
     número no selo). O #C93E22 dá 4,35:1 no selo claro e cai para 3,6 na
     sombra do balão laranja; este passa com folga nos dois. Medido. */
  --laranja-texto:#A3311A;
  /* A face das peças laranja. Desce do escuro para mais escuro, e nunca
     sobe: um degradê que clareia em cima derruba o branco para 4,2:1
     justamente na linha de cima do texto. */
  --laranja-face:linear-gradient(177deg,#C93E22 0%,#B3361C 100%);
  --laranja-relevo:inset 0 1px 0 rgba(255,255,255,.22);
  --laranja-sombra:0 4px 12px -5px rgba(160,48,22,.6);
  --asfalto:#232326;

  /* ---------- o campo por trás de tudo: pedra FRIA ----------
     A EVF usa pedra quente (#C7C2B7) porque é uma empresa de pedra. A JRK
     é grafite e asfalto: a mesma pedra, puxada para o frio dos cinzas
     dela. O valor foi medido para a lâmina de vidro se separar do campo
     como na EVF (1,55 lá; abaixo de 1,18 ela some). */
  --campo:#BDC0C4;

  /* ---------- tinta sobre superfície clara ---------- */
  --tinta:#16171A;
  --apoio:#45474D;
  /* O cinza mais fraco que ainda é texto. Medido sobre a parte mais
     transparente da lâmina, que é o pior caso: 4,6:1. O #64666D antigo
     passava no branco e caía para 4,3 no vidro. */
  --quieto:#56585F;
  /* marca que NÃO é texto: traço de ícone, ponto em repouso */
  --detalhe:#8A8D93;

  /* ---------- tinta sobre o asfalto ----------
     Medida contra o fundo COMPOSTO do menu, e não contra o asfalto puro.
     O item ativo é laranja; sobre ele só entra o branco. */
  --tinta-sobre-escuro:#F2F3F5;
  --apoio-sobre-escuro:#D0D2D7;
  --quieto-sobre-escuro:#AEB1B7;

  /* ---------- sinais: os pares que o CRM já usa ---------- */
  --ok-txt:#1F6B4A;    --ok-bg:#E6F2EB;
  --aten-txt:#83590C;  --aten-bg:#FAF1DF;
  --risco-txt:#A2302C; --risco-bg:#FAE9E7;
  --info-txt:#44546A;  --info-bg:#ECF0F4;

  /* ---------- LIQUID GLASS, igual ao da EVF ----------
     Quatro coisas fazem parecer vidro e não retângulo translúcido: o aro
     de luz no topo, o aro interno fraco, o brilho subindo da base e a
     saturação do que passa atrás. O degradê é de 177 graus e não 180: a
     luz parece vir de um ponto, e não de um plano infinito. */
  --vidro-face:linear-gradient(177deg,rgba(255,255,255,.76) 0%,rgba(255,255,255,.54) 100%);
  --vidro-face-erguida:linear-gradient(177deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.72) 100%);
  --vidro-face-controle:linear-gradient(177deg,rgba(255,255,255,.8) 0%,rgba(255,255,255,.56) 100%);
  /* A PEÇA QUE FLUTUA DENTRO DA LÂMINA (o estoque sobre a conversa) quase
     não deixa passar nada. Medido em 22/09/2026: vidro dentro de vidro não
     desfoca no Chrome. A lâmina já tem o desfoque dela, e a peça de dentro
     mostrava o texto da conversa NÍTIDO por trás da lista de carros.
     Tirando o desfoque da lâmina, o da peça voltava. Então quem está
     dentro da lâmina não conta com desfoque: a face é que protege a
     leitura, e o aro de luz e a sombra seguram o material. Opaca de vez:
     com 94% ainda sobrava um fantasma do texto de trás no estoque vazio. */
  --vidro-face-flutuante:linear-gradient(177deg,#FFFFFF 0%,#F6F7F8 100%);
  /* A JANELA GRANDE que abre no meio da tela (o estoque). Mora fora da
     lâmina, então o desfoque dela funciona; a face é mais densa que a da
     lâmina porque a janela carrega preço e foto sobre um fundo escurecido,
     e vidro ralo sobre escuro fica cinza. */
  --vidro-face-janela:linear-gradient(177deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.86) 100%);
  --vidro-borda:rgba(255,255,255,.58);
  --vidro-desfoque:blur(34px) saturate(185%) brightness(1.06);
  --vidro-relevo:
    inset 0 1.2px 0 rgba(255,255,255,.98), inset 0 0 0 1px rgba(255,255,255,.16),
    inset 0 -30px 46px -30px rgba(255,255,255,.7);
  --vidro-relevo-cartao:
    inset 0 1px 0 rgba(255,255,255,.95), inset 0 0 0 1px rgba(255,255,255,.14),
    inset 0 -22px 34px -24px rgba(255,255,255,.6);
  /* o reflexo que corre pelo topo da lâmina: a assinatura do material */
  --vidro-brilho:linear-gradient(177deg,rgba(255,255,255,.5),rgba(255,255,255,0));

  /* ---------- a moldura escura: o menu ---------- */
  --chrome-solido:#1D1D20;
  --vidro-face-menu:linear-gradient(177deg,rgba(33,33,36,.93) 0%,rgba(33,33,36,.87) 100%);
  --vidro-desfoque-menu:blur(30px) saturate(160%);
  --vidro-relevo-menu:
    inset 0 1.2px 0 rgba(242,243,245,.2), inset 0 0 0 1px rgba(242,243,245,.05),
    inset 0 -40px 60px -40px rgba(242,243,245,.12);
  --borda-menu:rgba(242,243,245,.13);
  --realce-menu:rgba(242,243,245,.07);
  --realce-menu-forte:rgba(242,243,245,.11);
  --sombra-menu:0 26px 56px -28px rgba(16,16,20,.55);

  /* a face das peças escuras (botão escuro, balão da Marina) */
  --asfalto-face:linear-gradient(177deg,#35353A 0%,#1D1D20 100%);
  --asfalto-relevo:inset 0 1px 0 rgba(242,243,245,.2);
  --asfalto-sombra:0 3px 10px -4px rgba(16,16,20,.5);

  /* ---------- traços ---------- */
  --linha:rgba(22,23,26,.09);
  --linha-forte:rgba(22,23,26,.15);
  --contorno-fraco:rgba(22,23,26,.08);

  /* ---------- profundidade ---------- */
  --elevacao-1:0 1px 2px rgba(22,23,26,.04), 0 4px 10px -6px rgba(22,23,26,.14);
  --elevacao-2:0 1px 2px rgba(22,23,26,.04), 0 14px 30px -18px rgba(22,23,26,.24);
  --elevacao-3:0 1px 2px rgba(22,23,26,.05), 0 26px 56px -30px rgba(22,23,26,.34);

  /* ---------- espaço: de 2 em 2, e o nome diz o valor ---------- */
  --espaco-2:2px;  --espaco-4:4px;  --espaco-6:6px;  --espaco-8:8px;
  --espaco-10:10px; --espaco-12:12px; --espaco-14:14px; --espaco-16:16px;
  --espaco-18:18px; --espaco-20:20px; --espaco-22:22px; --espaco-24:24px;
  --espaco-28:28px; --espaco-32:32px;

  /* ---------- raio ---------- */
  --r-chip:8px; --r-item:14px; --r-caixa:20px; --r-painel:22px; --r-menu:28px; --r-pilula:999px;

  /* ---------- letra ---------- */
  --fonte:'Plus Jakarta Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --t-rotulo:11.5px; --t-apoio:12.5px; --t-corpo:13.5px; --t-linha:14.5px;
  --t-painel:16px; --t-secao:19px; --t-titulo:22px;
  /* o número de destaque é grande e LEVE: grito não é sofisticação */
  --mostrador-peso:300; --mostrador-espacamento:-.042em;

  /* ---------- movimento ----------
     A curva-assinatura é a do Breno (~/.claude/rules/animacao-de-interface.md).
     A do Emil para interface (0.23, 1, 0.32, 1) é praticamente a mesma
     curva, então não há o que escolher. A da gaveta (0.32, 0.72, 0, 1),
     do Emil e da EVF, só abre e fecha o menu. */
  --curva:cubic-bezier(.16,1,.3,1);
  --curva-gaveta:cubic-bezier(.32,.72,0,1);
  /* aperto do botão: 100 a 160ms, pelo Emil. Troca de cor: 180ms, pelo Breno */
  --tempo-aperto:140ms; --tempo-rapido:180ms; --tempo-base:280ms;

  --menu-largura:244px; --menu-largura-estreito:68px;
  --z-suspenso:10; --z-fixo:20;

  /* ---------- os nomes antigos, para as janelas e avisos compartilhados ----------
     janela.js e avisos.js desenham peças com var(--card), var(--quieto)...
     Apontando os nomes antigos para os valores novos, elas chegam certas
     nesta tela sem ninguém mexer nelas. */
  --card:#FFFFFF; --card-suave:#F7F8F9; --canvas:var(--campo);
}

*{box-sizing:border-box;margin:0;padding:0}

/* ---------- o que faz parecer aplicativo no celular (skill mobile-native, do Emil) ----------
   Nenhum destes aparece no emulador do computador; todos aparecem no
   celular de verdade. */
html{
  -webkit-tap-highlight-color:transparent;  /* o clarão cinza em cada toque */
  -webkit-text-size-adjust:100%;             /* a letra que incha ao virar o celular */
  overscroll-behavior:none;                  /* puxar para atualizar no meio de uma conversa */
}
html,body{height:100%}

/* ---------- o campo é PEDRA, e não chapa de cor ----------
   Ruído em duas escalas, como na EVF: um veio lento que dá a variação de
   tom de uma placa polida, e um dente fino de textura. Ruído não cria
   faixa (é justamente o que destrói faixa), então aqui a profundidade vem
   da técnica que a regra do Breno manda usar no lugar do degradê radial. */
body[data-visual="novo"]{
  background-color:var(--campo);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23g)' opacity='0.055'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008' numOctaves='4' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='700' height='700' filter='url(%23v)' opacity='0.14'/%3E%3C/svg%3E");
  background-attachment:fixed,fixed;
  color:var(--tinta);
  font-family:var(--fonte);
  font-size:var(--t-corpo);
  line-height:1.45;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
  text-wrap:pretty;
}
/* O ponto de partida das peças nativas, com peso ZERO (tudo dentro do
   :where): qualquer classe da tela ganha dele. Com o body fora do
   :where, este reset tinha mais peso que .enviar e apagava o laranja. */
:where(body[data-visual="novo"]) :where(button,input,select,textarea){font:inherit;color:inherit}
:where(body[data-visual="novo"]) :where(button){background:none;border:none;cursor:pointer}
:where(body[data-visual="novo"]) :where(a){color:inherit;text-decoration:none}

/* O que está marcado como escondido (o atributo hidden) fica escondido,
   SEMPRE. Estilo de tela com display:flex passava por cima dele: foi
   assim que o filtro "De quem" aparecia para o vendedor e que a página
   de recuperar senha mostrava uma caixa de erro vazia, as duas no ar até
   22/09/2026. É a única regra desta folha com !important, e é por isso:
   nenhuma tela pode ganhar dela. */
body[data-visual="novo"] [hidden]{display:none!important}

/* O iPhone amplia a página inteira quando o campo tem letra menor que
   16px, e não desfaz ao sair do campo. Só em tela de toque: no
   computador o campo segue o tamanho do desenho. Proibir o zoom seria o
   conserto errado (acessibilidade); o certo é a letra. */
@media (pointer:coarse){
  body[data-visual="novo"] :where(input,select,textarea){font-size:16px}
}

/* Controle não se seleciona com o dedo; conteúdo sim. */
body[data-visual="novo"] :where(button,[role=button],.menu-item){
  -webkit-user-select:none;user-select:none;touch-action:manipulation;
}

/* ---------- foco sempre visível ----------
   O anel é o laranja vivo, que aqui pode: ninguém lê por cima dele.
   Com peso quase zero (o body dentro do :where): a peça que já desenha
   o próprio anel em volta (a pílula de busca, a caixa de escrever) tira
   este do campo de dentro, e não aparecem dois anéis juntos. Com o body
   fora do :where, foi exatamente isso que apareceu na foto da busca. */
:where(body[data-visual="novo"]) :focus-visible{
  outline:2px solid var(--laranja);outline-offset:2px;border-radius:10px;
}

/* ---------- ícones de traço fino ----------
   Traço 2 é o de biblioteca comum, e o Breno já reprovou ícone "muito
   simples". O traço fino é o que o conselho de design pede para a peça
   parecer desenhada. O CSS vence o atributo do próprio ícone. */
body[data-visual="novo"] svg[stroke-width]{stroke-width:1.75}

/* ============================================================
   A MOLDURA: menu de um lado, lâmina do outro

   A moldura ocupa a janela inteira e tem altura FIXA: quem rola é o
   conteúdo de dentro, e o menu fica parado, como ferramenta de mesa.
   A lâmina estica e o menu não, como o auto layout do Figma.
   ============================================================ */
.moldura{
  display:flex;gap:var(--espaco-16);padding:var(--espaco-16);
  height:100dvh;align-items:stretch;
}

/* A lâmina de vidro. Uma por tela, com a estrutura por dentro dela:
   cartão branco boiando sobre cinza é o que o Breno chamou de "cara de
   SaaS de 2005". O reflexo é a camada de cima do fundo, então fica
   parado enquanto o conteúdo corre, como um reflexo no vidro. */
.lamina{
  position:relative;flex:1 1 auto;min-width:0;min-height:0;
  display:flex;flex-direction:column;
  border-radius:var(--r-menu);
  background-image:var(--vidro-brilho),var(--vidro-face);
  background-size:100% 150px,100% 100%;
  background-position:top;background-repeat:no-repeat,repeat;
  border:1px solid var(--vidro-borda);
  box-shadow:var(--vidro-relevo),var(--elevacao-3);
  /* Nada fica escondido sem rolagem. Se o conteúdo passar da janela, a
     lâmina rola inteira; as colunas de dentro rolam cada uma a sua. */
  overflow-x:hidden;overflow-y:auto;
  container-type:inline-size;container-name:lamina;
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .lamina{-webkit-backdrop-filter:var(--vidro-desfoque);backdrop-filter:var(--vidro-desfoque)}
}

/* ============================================================
   O MENU LATERAL, para todos os perfis

   Asfalto de vidro flutuando sobre a pedra. Três estados, sem menu de
   hambúrguer: largo, só ícones (recolhido por escolha dela ou por falta
   de largura) e, no celular, uma barra em cima que corre de lado.
   ============================================================ */
.menu-lateral{
  position:relative;display:flex;flex-direction:column;gap:var(--espaco-2);
  width:var(--menu-largura);flex:0 0 var(--menu-largura);
  padding:var(--espaco-20) var(--espaco-12) var(--espaco-14);
  border-radius:var(--r-menu);
  background:var(--chrome-solido);
  border:1px solid var(--borda-menu);
  box-shadow:var(--vidro-relevo-menu),var(--sombra-menu);
  color:var(--apoio-sobre-escuro);
  transition:width var(--tempo-base) var(--curva-gaveta),flex-basis var(--tempo-base) var(--curva-gaveta);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .menu-lateral{
    background:var(--vidro-face-menu);
    -webkit-backdrop-filter:var(--vidro-desfoque-menu);backdrop-filter:var(--vidro-desfoque-menu);
  }
}
.menu-marca{display:flex;align-items:center;padding:var(--espaco-4) var(--espaco-10) var(--espaco-18);flex-shrink:0}
.menu-marca img{height:34px;width:auto;display:block}
/* No estreito, a logo inteira não cabe em 68px: fica só o símbolo da
   direita dela (a faixa laranja), recortado da mesma imagem. */
.menu-marca .menu-simbolo{display:none}

/* A lista do meio ocupa o que sobra e é ELA que rola quando a janela é
   baixa. Visto na EVF em janela de 480px: o nome e o botão de sair
   ficavam 100px abaixo do fundo. Agora a marca e o rodapé ficam parados
   e só a lista corre, como a lista de conversas do WhatsApp Web.
   O recuo negativo com respiro por dentro existe por causa da sombra do
   item ativo: caixa que rola corta o que passa dela. */
.menu-itens{
  flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:var(--espaco-2);
  margin:calc(var(--espaco-8) * -1) calc(var(--espaco-10) * -1);
  padding:var(--espaco-8) var(--espaco-10);
  overflow-y:auto;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:var(--borda-menu) transparent;
}
/* Nome do grupo em caixa baixa, peso 600, no tom quieto. A caixa alta
   com espaçamento largo que existia aqui é um dos clichês de máquina da
   lista do Breno. */
.menu-grupo{
  font-size:var(--t-rotulo);font-weight:600;color:var(--quieto-sobre-escuro);
  padding:var(--espaco-14) var(--espaco-12) var(--espaco-6);letter-spacing:.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.menu-grupo:first-child{padding-top:var(--espaco-2)}
.menu-item{
  display:flex;align-items:center;gap:var(--espaco-12);
  min-height:40px;padding:var(--espaco-8) var(--espaco-12);
  border-radius:var(--r-item);
  color:var(--apoio-sobre-escuro);font-size:var(--t-corpo);font-weight:500;letter-spacing:-.005em;
  transition:background-color var(--tempo-rapido) var(--curva),color var(--tempo-rapido) var(--curva),
             transform var(--tempo-aperto) var(--curva);
}
.menu-item svg{flex-shrink:0;opacity:.85}
.menu-rotulo{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* O número é cinza quieto, nunca bolha colorida: pedido da EVF, para não
   parecer notificação de rede social. Vale aqui pelo mesmo motivo. */
.menu-conta{
  flex:0 0 auto;font-size:var(--t-apoio);font-weight:600;color:var(--quieto-sobre-escuro);
  font-variant-numeric:tabular-nums;
}
.menu-item:active{transform:scale(.97)}
@media (hover:hover) and (pointer:fine){
  .menu-item:hover{background:var(--realce-menu);color:var(--tinta-sobre-escuro)}
  .menu-item:hover .menu-conta{color:var(--apoio-sobre-escuro)}
}
/* O item ativo é LARANJA, decisão do Breno ("mais presente"). Na EVF é
   uma pastilha clara; aqui a pastilha é da marca, com o branco que passa
   em cima dela. É o único ponto de cor do menu, então diz onde a pessoa
   está sem precisar de mais nada. */
.menu-item.menu-ativo,
.menu-item.menu-ativo:hover{
  background:var(--laranja-face);color:#fff;font-weight:600;
  box-shadow:var(--laranja-relevo),var(--laranja-sombra);
}
.menu-item.menu-ativo svg{opacity:1}
.menu-item.menu-ativo .menu-conta{color:#fff}
/* O crm.css (e as telas que copiaram o menu antigo) pintam .selo-item
   como bolha vermelha, e com display:grid, que ainda desfaz o [hidden]:
   a Home da loja mostrava um "0" em bolha. A classe continua no número
   porque é por ela que o crm.js preenche a contagem; aqui ela volta a
   ser só o número quieto, com peso para ganhar de qualquer tela. */
.menu-lateral .menu-item .selo-item{margin-left:0;min-width:0;height:auto;padding:0;border-radius:0;background:none;display:block}
.menu-lateral .menu-item .selo-item[hidden]{display:none}

/* as ferramentas do vendedor: buscar cliente e avisos (moravam na pílula do topo) */
.menu-ferramentas{display:flex;gap:var(--espaco-6);padding:0 var(--espaco-4) var(--espaco-12);flex-shrink:0}
.menu-redondo{
  position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:var(--r-pilula);
  background:var(--realce-menu);border:1px solid var(--borda-menu);color:var(--apoio-sobre-escuro);
  transition:background-color var(--tempo-rapido) var(--curva),color var(--tempo-rapido) var(--curva),
             transform var(--tempo-aperto) var(--curva);
}
.menu-redondo:active{transform:scale(.94)}
@media (hover:hover) and (pointer:fine){
  .menu-redondo:hover{background:var(--realce-menu-forte);color:var(--tinta-sobre-escuro)}
}
/* o ponto de aviso: laranja vivo, porque ninguém lê por cima de um ponto */
.menu-redondo .ponto-alerta{
  position:absolute;top:8px;right:9px;width:8px;height:8px;border-radius:50%;
  background:var(--laranja);box-shadow:0 0 0 2px var(--chrome-solido);
}

/* O rodapé: quem está usando. Tocar abre o perfil (e o sair), pelo
   avisos.js, que reconhece a classe rodape-lateral. */
.menu-lateral .rodape-lateral{
  display:flex;align-items:center;gap:var(--espaco-10);flex-shrink:0;text-align:left;
  margin-top:var(--espaco-8);padding:var(--espaco-12) var(--espaco-8) var(--espaco-4);
  border-top:1px solid var(--borda-menu);border-radius:0;cursor:pointer;
}
.menu-lateral .av-lateral{
  display:grid;place-items:center;width:32px;height:32px;flex:0 0 auto;border-radius:var(--r-pilula);
  background:var(--realce-menu-forte);border:1px solid var(--borda-menu);
  color:var(--tinta-sobre-escuro);font-size:var(--t-apoio);font-weight:700;
}
.menu-lateral .quem{display:flex;flex-direction:column;gap:var(--espaco-2);min-width:0}
.menu-lateral .nome-lateral{
  font-size:var(--t-apoio);font-weight:600;letter-spacing:-.01em;line-height:1.2;color:var(--tinta-sobre-escuro);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.menu-lateral .cargo-lateral{
  font-size:var(--t-rotulo);font-weight:500;line-height:1.2;color:var(--quieto-sobre-escuro);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.menu-lateral :focus-visible{outline-color:var(--laranja)}

/* A ALAVANCA de recolher mora na BORDA do menu, meio de fora, onde a mão
   procura: na divisa entre o menu e a lâmina. Sólida, e não de vidro:
   ela cavalga a borda, e cada metade translúcida pegaria uma cor. */
.menu-alavanca{
  position:absolute;top:30px;right:-12px;z-index:2;display:grid;place-items:center;
  width:24px;height:24px;border-radius:var(--r-pilula);
  background:var(--chrome-solido);border:1px solid var(--borda-menu);color:var(--apoio-sobre-escuro);
  box-shadow:0 2px 6px rgba(22,23,26,.24);
  transition:color var(--tempo-rapido) var(--curva),transform var(--tempo-aperto) var(--curva-gaveta);
}
.menu-alavanca svg{transition:transform var(--tempo-base) var(--curva-gaveta)}
.menu-alavanca:active{transform:scale(.92)}
@media (hover:hover) and (pointer:fine){
  .menu-alavanca:hover{color:var(--tinta-sobre-escuro);transform:scale(1.08)}
}
/* No tablet ela é tocada com o dedo: o desenho continua com 24px e a
   área de toque cresce para 44 por uma moldura invisível em volta. */
@media (max-width:820px){
  .menu-alavanca::after{content:'';position:absolute;inset:-11px}
}

/* ---------- RECOLHIDO: por escolha dela, ou por falta de largura ----------
   As mesmas regras nas duas situações. 1080px é onde a EVF recolhe
   sozinha: abaixo disso a lista de conversas e a conversa precisam do
   espaço mais que os nomes do menu. */
.menu-lateral.recolhido{width:var(--menu-largura-estreito);flex-basis:var(--menu-largura-estreito);
  padding:var(--espaco-18) var(--espaco-10) var(--espaco-14);align-items:center}
.menu-lateral.recolhido .menu-alavanca svg{transform:rotate(180deg)}
@media (max-width:1080px){
  .menu-lateral{width:var(--menu-largura-estreito);flex-basis:var(--menu-largura-estreito);
    padding:var(--espaco-18) var(--espaco-10) var(--espaco-14);align-items:center}
  /* recolher sozinho deixa a alavanca sem sentido: ela sai */
  .menu-alavanca{display:none}
}
@media (min-width:1081px){
  .menu-lateral.recolhido .menu-marca img{display:none}
  .menu-lateral.recolhido .menu-marca .menu-simbolo{display:block}
  .menu-lateral.recolhido :is(.menu-rotulo,.menu-conta,.menu-grupo,.quem){display:none}
  .menu-lateral.recolhido .menu-item{justify-content:center;padding:var(--espaco-10) 0;width:44px}
  .menu-lateral.recolhido .menu-marca{padding:var(--espaco-4) 0 var(--espaco-16)}
  .menu-lateral.recolhido .menu-ferramentas{flex-direction:column;padding:0 0 var(--espaco-10)}
  .menu-lateral.recolhido .menu-itens{align-items:center}
  .menu-lateral.recolhido .rodape-lateral{justify-content:center;padding:var(--espaco-12) 0 var(--espaco-4)}
  /* no estreito, o que sumiu vira a dica do próprio navegador (title) */
}
@media (max-width:1080px) and (min-width:721px){
  .menu-marca img{display:none}
  .menu-marca .menu-simbolo{display:block}
  .menu-lateral :is(.menu-rotulo,.menu-conta,.menu-grupo,.quem){display:none}
  .menu-item{justify-content:center;padding:var(--espaco-10) 0;width:44px;min-height:44px}
  .menu-marca{padding:var(--espaco-4) 0 var(--espaco-16)}
  .menu-ferramentas{flex-direction:column;padding:0 0 var(--espaco-10)}
  .menu-itens{align-items:center}
  .menu-lateral .rodape-lateral{justify-content:center;padding:var(--espaco-12) 0 var(--espaco-4)}
  .menu-redondo{width:44px;height:44px}
}
.menu-simbolo{width:26px;height:26px}

/* ---------- CELULAR: o menu sai da lateral e vira barra em cima ----------
   A barra corre de lado com o dedo. Marca e rodapé saem: o perfil
   continua a um toque, no último item da barra. */
@media (max-width:720px){
  .moldura{flex-direction:column;padding:var(--espaco-10);gap:var(--espaco-10);
    padding-top:max(var(--espaco-10),env(safe-area-inset-top));
    padding-bottom:max(var(--espaco-10),env(safe-area-inset-bottom))}
  .menu-lateral{
    flex-direction:row;align-items:center;width:100%;flex:0 0 auto;gap:var(--espaco-2);
    padding:var(--espaco-6);border-radius:var(--r-painel);overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;
  }
  .menu-lateral::-webkit-scrollbar{display:none}
  .menu-marca,.menu-alavanca{display:none}
  .menu-itens,.menu-ferramentas{display:contents}
  .menu-grupo{display:none}
  .menu-item{min-height:44px;padding:var(--espaco-10) var(--espaco-14);flex-shrink:0}
  .menu-item .menu-rotulo{overflow:visible}
  .menu-redondo{width:44px;height:44px;flex-shrink:0}
  .menu-lateral .rodape-lateral{margin:0;padding:0 var(--espaco-2);border-top:none;flex-shrink:0}
  .menu-lateral .rodape-lateral .quem{display:none}
  .menu-lateral .av-lateral{width:44px;height:44px}
}

/* ============================================================
   PEÇAS
   ============================================================ */

/* ---------- botão pílula ----------
   Aperto de 0,97 no :active, pelo Emil: a resposta vem no toque, e não
   quando o dedo sai. A elevação de 2px no ponteiro, pela regra do Breno,
   só com mouse de verdade: no toque ela ficaria presa depois do dedo. */
.botao{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--espaco-8);
  min-height:40px;padding:0 var(--espaco-16);border-radius:var(--r-pilula);
  font-size:var(--t-corpo);font-weight:600;letter-spacing:-.005em;white-space:nowrap;
  transition:transform var(--tempo-aperto) var(--curva),background-color var(--tempo-rapido) var(--curva),
             box-shadow var(--tempo-rapido) var(--curva),color var(--tempo-rapido) var(--curva);
}
.botao:active{transform:scale(.97)}
.botao:disabled{opacity:.5;cursor:default;transform:none}
.botao-principal{background:var(--laranja-face);color:#fff;box-shadow:var(--laranja-relevo),var(--laranja-sombra)}
.botao-escuro{background:var(--asfalto-face);color:var(--tinta-sobre-escuro);box-shadow:var(--asfalto-relevo),var(--asfalto-sombra)}
.botao-claro{
  background:var(--vidro-face-controle);color:var(--tinta);border:1px solid var(--vidro-borda);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),var(--elevacao-1);
}
@media (hover:hover) and (pointer:fine){
  .botao:not(:disabled):hover{transform:translateY(-2px)}
  .botao:not(:disabled):active{transform:translateY(-2px) scale(.97)}
  .botao-claro:not(:disabled):hover{background:#fff}
}
@media (max-width:820px){ .botao{min-height:44px} }

/* ---------- selo de situação: o par de sinal, com anel fino ---------- */
.selo{
  display:inline-flex;align-items:center;gap:var(--espaco-6);min-height:24px;padding:2px var(--espaco-10);
  border-radius:var(--r-pilula);font-size:var(--t-rotulo);font-weight:600;white-space:nowrap;text-wrap:nowrap;
}
.selo-ok{background:var(--ok-bg);color:var(--ok-txt);box-shadow:inset 0 0 0 1px rgba(31,107,74,.18)}
.selo-aten{background:var(--aten-bg);color:var(--aten-txt);box-shadow:inset 0 0 0 1px rgba(131,89,12,.18)}
.selo-risco{background:var(--risco-bg);color:var(--risco-txt);box-shadow:inset 0 0 0 1px rgba(162,48,44,.18)}
.selo-info{background:var(--info-bg);color:var(--info-txt);box-shadow:inset 0 0 0 1px rgba(68,84,106,.16)}
.selo-marca{background:#FBECE7;color:var(--laranja-texto);box-shadow:inset 0 0 0 1px rgba(201,62,34,.2)}

/* ---------- campo de busca: vidro claro em pílula ---------- */
.campo-busca{
  display:flex;align-items:center;gap:var(--espaco-8);min-height:40px;padding:0 var(--espaco-14);
  border-radius:var(--r-pilula);color:var(--quieto);
  background:var(--vidro-face-controle);border:1px solid var(--vidro-borda);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px var(--contorno-fraco);
}
.campo-busca input{flex:1;min-width:0;height:100%;min-height:38px;border:none;background:transparent;outline:none;
  font-size:var(--t-corpo);color:var(--tinta)}
.campo-busca input::placeholder{color:var(--quieto)}
.campo-busca:focus-within{box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 0 0 2px var(--laranja)}
@media (max-width:820px){ .campo-busca{min-height:44px} }

/* ============================================================
   AS JANELAS E OS AVISOS COMPARTILHADOS, no material novo

   janela.js (confirmar, transferir, desfecho) e avisos.js (perfil, sino)
   injetam o estilo deles na hora. Estas regras têm mais peso que as
   deles (o body entra no seletor) e só valem nas telas novas.
   ============================================================ */
body[data-visual="novo"] .jn-fundo{background:rgba(22,23,26,.36)}
body[data-visual="novo"] .jn,
body[data-visual="novo"] .pop{
  background:var(--vidro-face-erguida);border:1px solid var(--vidro-borda);
  box-shadow:var(--vidro-relevo-cartao),var(--elevacao-3);
}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  body[data-visual="novo"] .jn,
  body[data-visual="novo"] .pop{-webkit-backdrop-filter:var(--vidro-desfoque);backdrop-filter:var(--vidro-desfoque)}
}
body[data-visual="novo"] .jn{border-radius:var(--r-painel)}
body[data-visual="novo"] .pop{border-radius:var(--r-caixa)}
body[data-visual="novo"] .pop-pe{background:transparent}
body[data-visual="novo"] .pop-av{background:var(--laranja-face)}
body[data-visual="novo"] .jn-campo :is(input,select,textarea){
  background:rgba(255,255,255,.7);border:1px solid var(--linha-forte);
}
body[data-visual="novo"] .jn-campo :is(input,select,textarea):focus{border-color:transparent;box-shadow:0 0 0 2px var(--laranja)}
body[data-visual="novo"] .jn-bt{border-radius:var(--r-pilula)}
body[data-visual="novo"] .jn-bt-sim{background:var(--laranja-face);box-shadow:var(--laranja-relevo),var(--laranja-sombra)}
body[data-visual="novo"] .jn-bt-nao{background:var(--vidro-face-controle);border:1px solid var(--linha-forte)}
body[data-visual="novo"] .jn-bt:active{transform:scale(.97)}
@media (pointer:coarse){
  body[data-visual="novo"] .jn-campo :is(input,select,textarea){font-size:16px}
}

/* ---------- a faixa de problema do sistema (avisos.js) ----------
   O link dela tinha 17px de altura no celular, pequeno demais para o
   dedo: a régua pegou nas 13 telas de marketing e plataforma. Até 820px,
   onde existe toque, ele ganha os 44px. */
#faixa-do-sistema a{display:inline-flex;align-items:center}
@media (max-width:820px){ #faixa-do-sistema a{min-height:44px} }

/* ---------- menos movimento ----------
   Menos, e não zero (Emil): some o deslocamento, fica a troca de cor e
   de opacidade, que ajuda a entender o que mudou. */
@media (prefers-reduced-motion:reduce){
  body[data-visual="novo"] *,body[data-visual="novo"] *::before,body[data-visual="novo"] *::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-property:opacity,color,background-color,border-color!important;
    scroll-behavior:auto!important;
  }
}