/* Camada de VIDRO do painel (23/10, pedido do Gustavo: "elementos de vidro,
   com blur, bem startup"). Carrega depois de z_refinamento (ordem alfabetica
   do bundle :app) e antes de zz_nativo.

   Tres ideias, nesta ordem:
     1. o fundo da pagina e a LOGO do B Service gigante, em desfoque forte, que
        flutua devagar atras de tudo (23/10, pedido do Gustavo): sem nada atras,
        o vidro nao tem o que desfocar. A trama de pontos e a faixa de luz que
        havia aqui, e as bolas coloridas antes delas, foram rejeitadas;
     2. os paineis de cima (barra lateral, caminho, cartoes) viram vidro:
        fundo translucido + `backdrop-filter` + um filete de luz na borda;
     3. quem nao tem `backdrop-filter`, ou pediu menos transparencia no
        sistema, recebe superficies solidas -- nunca texto sobre fundo que o
        navegador nao sabe desfocar.

   Tudo consome os tokens semanticos (--bc-*) e deriva deles com color-mix:
   trocar a cor da conta (--conta-cor) ou o tema continua funcionando sem
   tocar aqui. Sem `style=""` (CSP). */

/* A barra lateral flutuante ocupa margem + largura da tela (a partir de 761 px),
   e a logo do fundo se centra no que SOBRA ao lado dela (23/10). Os dois
   lugares leem os mesmos numeros. */
:root {
  --vd-lateral-margem: 12px;
  --vd-lateral-largura: 264px;
  --vd-lateral-recolhida: 72px;
}

body.painel {
  --vd-blur: blur(18px) saturate(1.5);
  --vd-vidro: rgba(255, 255, 255, .56);
  --vd-vidro-forte: rgba(255, 255, 255, .78);
  --vd-borda: rgba(255, 255, 255, .85);
  --vd-borda-avatar: rgba(255, 255, 255, .9);
  --vd-brilho: inset 0 1px 0 rgba(255, 255, 255, .75);
  --vd-sombra-leve: inset 0 1px 0 rgba(255, 255, 255, .8), 0 10px 24px -16px rgba(16, 34, 26, .28);
  /* Cliente esperando resposta: o unico tom quente do painel. */
  --vd-espera-fundo: rgba(245, 181, 10, .24);
  --vd-espera-borda: rgba(214, 150, 0, .45);
  --vd-espera-tinta: #7a4f00;
  --vd-sombra: inset 0 1px 0 rgba(255, 255, 255, .8),
               0 22px 44px -26px color-mix(in srgb, var(--bc-primary) 55%, transparent),
               0 2px 8px rgba(16, 34, 26, .05);
  --vd-sombra-alta: inset 0 1px 0 rgba(255, 255, 255, .9),
                    0 30px 56px -26px color-mix(in srgb, var(--bc-primary) 65%, transparent),
                    0 4px 12px rgba(16, 34, 26, .07);

  background-color: var(--bc-bg);
}
body.painel[data-theme="escuro"] {
  --vd-vidro: rgba(23, 39, 31, .52);
  --vd-vidro-forte: rgba(33, 57, 43, .72);
  --vd-borda: rgba(255, 255, 255, .10);
  --vd-borda-avatar: rgba(255, 255, 255, .16);
  --vd-brilho: inset 0 1px 0 rgba(255, 255, 255, .08);
  --vd-sombra-leve: inset 0 1px 0 rgba(255, 255, 255, .09), 0 10px 24px -14px rgba(0, 0, 0, .6);
  --vd-espera-fundo: rgba(242, 193, 78, .14);
  --vd-espera-borda: rgba(242, 193, 78, .38);
  --vd-espera-tinta: #f2c14e;
  --vd-sombra: inset 0 1px 0 rgba(255, 255, 255, .09),
               0 22px 44px -24px rgba(0, 0, 0, .65);
  --vd-sombra-alta: inset 0 1px 0 rgba(255, 255, 255, .12),
                    0 30px 56px -24px rgba(0, 0, 0, .75);
}

/* ── o fundo: a logo gigante em desfoque forte ───────────────────────────
   A camada mora no `<html>` (`html::before`), e NAO no `<body>`: o Turbo troca
   o corpo da pagina a cada navegacao, e uma animacao no corpo recomeca do zero
   toda vez ("trava e reinicia", 23/10). O `<html>` fica; a animacao segue de
   onde estava. No recarregamento completo (F5) o html tambem e novo, entao
   fundo_controller.js poe `--fundo-fase`: o atraso negativo que devolve a
   animacao a fase do relogio, e o fundo nao da salto.

   So `transform` anima (a camada ja desfocada e so movida, na placa de video).
   A logo e a de marca (`brand/bc-service-simbolo.png`): grande, no centro da
   tela, com o desfoque forte que a deixa de "luz" e nao de desenho. */
html::before { content: none; }
html:has(body.painel)::before {
  content: "";
  position: fixed; z-index: -1; pointer-events: none;
  /* centrada na area ao lado da barra lateral, nao na tela inteira */
  top: 0; bottom: 0; right: 0; margin: auto;
  left: calc(var(--vd-lateral-margem) + var(--vd-lateral-largura));
  width: 56vh; height: 62vh;
  transition: left .3s var(--bc-ease);
  background: url("/assets/brand/bc-service-simbolo-7020ee34.png") center / contain no-repeat;
  filter: blur(17px) saturate(.9);
  opacity: .34;
  transform-origin: 60% 40%;
  animation: vd-flutua 48s ease-in-out infinite alternate;
  animation-delay: var(--fundo-fase, 0ms);
  will-change: transform;
}
html:has(body.painel[data-theme="escuro"])::before { opacity: .26; }
/* lateral recolhida (so os icones): o centro acompanha */
html:has(body.painel--recolhida)::before { left: calc(var(--vd-lateral-margem) + var(--vd-lateral-recolhida)); }
@keyframes vd-flutua {
  from { transform: translate3d(-5%, 3%, 0) scale(1) rotate(-3deg); }
  to   { transform: translate3d(3%, -3%, 0) scale(1.07) rotate(2deg); }
}
@media (max-width: 760px) {
  html:has(body.painel)::before,
  html:has(body.painel--recolhida)::before { left: 0; width: 74vw; height: 82vw; filter: blur(15px) saturate(.9); opacity: .32; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(body.painel)::before { animation: none; }
}

/* ── caminho e data: flutuando, sem faixa ─────────────────────────────────
   A barra superior deixou de ser uma faixa de ponta a ponta com linha embaixo
   (23/10, pedido do Gustavo: "nao precisa do recorte, pode deixar
   flutuando"). Agora e so o caminho e a data, cada um numa capsula de vidro
   solta sobre a pagina, alinhada com a lateral flutuante. A faixa em si nao
   pega clique (`pointer-events: none`); so as capsulas pegam. */
.painel .painel__barra-superior {
  position: sticky; top: 12px; z-index: 20;
  height: auto; margin: 12px 38px 0; padding: 0;
  background: none; border: 0;
  pointer-events: none;
}
body.painel:has(.conversas) .painel__barra-superior { flex: 0 0 auto; }
.painel .painel__caminho,
.painel .painel__barra-superior time {
  pointer-events: auto;
  padding: 9px 16px; border-radius: 999px;
  background: var(--vd-vidro);
  border: 1px solid var(--vd-borda);
  backdrop-filter: var(--vd-blur);
  -webkit-backdrop-filter: var(--vd-blur);
  box-shadow: var(--vd-sombra-leve);
}
.painel__caminho-lista {
  display: flex; align-items: center; gap: 10px;
  min-width: 0; margin: 0; padding: 0; list-style: none;
}
.painel__caminho-item { display: flex; min-width: 0; }
.painel__caminho-sep { color: var(--bc-ink-faint); }
.painel__caminho-link {
  border-radius: 6px; color: var(--bc-ink-mut); text-decoration: none; white-space: nowrap;
  transition: color .15s;
}
.painel__caminho-link:hover { color: var(--bc-ink); text-decoration: underline; text-underline-offset: 3px; }
/* As acoes da tela (na inbox: encerrar e o estado do numero) vao na MESMA linha do caminho,
   entre ele e a data. Com pouco espaco a barra quebra em duas linhas, nunca estoura.
   `min-width: 0` e `flex: 0 1 auto`: conversas.css fixa `.conversas__acoes-do-topo` em
   `flex: 0 0 auto` (nao encolhe), e sem isto o `flex-wrap` abaixo nunca disparava -- as pilulas
   estouravam a barra entre 761 e ~890 px (achado da revisao de 23/10). */
.painel .painel__barra-superior:has(.painel__barra-acoes) { flex-wrap: wrap; row-gap: 8px; }
.painel__barra-acoes { display: flex; align-items: center; margin-left: auto; min-width: 0; max-width: 100%; pointer-events: auto; }
.painel__barra-acoes .conversas__acoes-do-topo { flex: 0 1 auto; min-width: 0; gap: .6rem; flex-wrap: wrap; justify-content: flex-end; }
.painel__barra-acoes .conversa__encerrar,
.painel__barra-acoes .conversa__guia-ddd-botao,
.painel__barra-acoes .conversas__estado-do-numero {
  padding: 9px 14px; border-radius: 999px;
  background: var(--vd-vidro-forte); border: 1px solid var(--vd-borda);
  backdrop-filter: var(--vd-blur); -webkit-backdrop-filter: var(--vd-blur);
  box-shadow: var(--vd-sombra-leve);
  color: var(--bc-ink-soft); font-size: .8125rem;
  /* o <button> nao herda a fonte do corpo e o <span> sim: sem isto as duas pilulas saem de
     alturas e tipografias diferentes na mesma fileira */
  font-family: inherit; line-height: 1.4;
}
.painel__barra-acoes .conversa__guia-ddd-botao:hover,
.painel__barra-acoes .conversa__encerrar:not(.conversa__encerrar--desabilitado):hover { background: var(--vd-vidro-forte); border-color: color-mix(in srgb, var(--bc-primary) 45%, var(--vd-borda)); }
/* "Encerrar as minhas" sem motivo cadastrado: a regra acima (0,2,0) vencia a de conversas.css
   (0,1,0) e a pilula apagada ficava na cor normal */
.painel__barra-acoes .conversa__encerrar--desabilitado { color: var(--bc-ink-mut); cursor: not-allowed; }
/* Com as acoes na barra, a data e a primeira a sair quando o espaco aperta: sozinha na segunda
   linha ela so atrapalhava. Caminho (~264 px) + acoes (~540 px com "(1642)") + data (~100 px) +
   gaps pedem ~950 px de barra, ou seja, ~1300 px de janela; 1360 px deixa folga. */
@media (max-width: 1360px) {
  .painel .painel__barra-superior:has(.painel__barra-acoes) time { display: none; }
}
@media (max-width: 760px) {
  .painel .painel__barra-superior { margin: 10px 14px 0; height: auto; padding: 0; }
  .painel .painel__caminho, .painel .painel__barra-superior time { padding: 7px 13px; }
  /* sem espaco para o nome da conta: ficam so os niveis da tela */
  .painel__caminho-item:first-child, .painel__caminho-sep:nth-child(2) { display: none; }
  /* as acoes da tela (encerrar, estado do numero) nunca couberam NA LINHA do caminho no celular, e a solucao antiga foi escondê-las -- com
     elas iam "Encerrar as minhas (N)", "Encerrar todas" (admin) e o aviso "Nenhum numero ativo" (achado de UI/UX, 10/11/2026). Agora
     descem para uma linha propria, abaixo do caminho, so na LISTA de conversas (sem `.conversa` dentro de `.conversas`; `:has()` nao aceita
     outro `:has()` dentro, entao a regra esconde quando HA conversa, e nao mostra quando nao ha): com uma conversa
     aberta o celular precisa de toda a altura para a conversa, e la elas voltam a ficar escondidas. Fica aqui, e nao em conversas.css,
     porque a regra de `display: flex` acima e deste arquivo e o ultimo a falar ganha. */
  .painel .painel__barra-acoes { display: flex; flex: 1 1 100%; margin-left: 0; }
  body.painel:has(.conversas .conversa) .painel__barra-acoes { display: none; }
  .painel .painel__barra-acoes .conversas__acoes-do-topo { justify-content: flex-start; }
  .painel .painel__barra-acoes .conversa__encerrar, .painel .painel__barra-acoes .conversa__guia-ddd-botao, .painel .painel__barra-acoes .conversas__estado-do-numero { min-height: 44px; display: inline-flex; align-items: center; }
  /* O "WhatsApp conectado" (estado bom) so ocupa uma linha da tela estreita; "Nenhum numero ativo" (o problema) continua aparecendo. */
  .painel .painel__barra-acoes .conversas__estado-do-numero:has(.conversas__status-ponto--ativo) { display: none; }
}

/* ── barra lateral: painel flutuante de vidro verde ────────────────────── */
@media (min-width: 761px) {
  .painel .painel__lateral {
    /* 264px, e nao os 242px de antes: "Suporte ao cliente" com o selo ao lado
       nao cabia e virava "Suporte ao clie...". A barra recolhida (72px) tem
       seletor mais forte e continua valendo. */
    flex-basis: var(--vd-lateral-largura);
    top: var(--vd-lateral-margem); height: calc(100dvh - 2 * var(--vd-lateral-margem));
    margin: var(--vd-lateral-margem) 0 var(--vd-lateral-margem) var(--vd-lateral-margem);
    border-radius: 24px;
    background: linear-gradient(155deg,
      color-mix(in srgb, var(--bc-lateral-bg-2) 95%, transparent),
      color-mix(in srgb, var(--bc-lateral-bg) 96%, transparent) 45%,
      color-mix(in srgb, var(--bc-lateral-bg-3) 97%, transparent));
    border: 1px solid rgba(255, 255, 255, .08);
    backdrop-filter: blur(22px) saturate(1.4);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12),
                0 28px 56px -30px color-mix(in srgb, var(--bc-lateral-bg-3) 85%, transparent);
  }
}

/* ── os outros cartoes do painel entram no mesmo vidro ─────────────────── */
.painel .numeros__card,
.painel .convites__form {
  background: var(--vd-vidro);
  border-color: var(--vd-borda);
  backdrop-filter: var(--vd-blur);
  -webkit-backdrop-filter: var(--vd-blur);
  box-shadow: var(--vd-sombra);
}

/* ── os cartoes das outras telas (23/10, pedido do Gustavo) ───────────────
   Inicio, Dashboard, Desempenho, Avaliacoes, Configuracoes, Disparo manual,
   Mensagens Automaticas, Gastos, Equipe, Convites, Numeros, Templates... A inbox
   de Conversas e o Suporte ao cliente NAO entram (a inbox e a proxima rodada).

   Tres regras que o mapeamento de todas as telas mostrou e que valem aqui:
   1. VIDRO NAO ANINHA. Quem ja e vidro (cartao, painel, tabela, formulario)
      desfoca a pagina; o que mora DENTRO dele so ganha uma pelicula translucida,
      sem `backdrop-filter` (um filtro dentro de outro so enxergaria o pai).
   2. TEXTO CORRIDO E TABELA USAM O VIDRO FORTE (--vd-vidro-forte, 78%): o
      desfoque da logo atras nao pode disputar com a leitura.
   3. O QUE PRECISA FICAR SOLIDO FICA: cabecalho e coluna fixos de tabela
      (Desempenho e Dashboard), campos de digitar, botoes, modais, bolhas, as
      faixas coloridas dos avisos (so as outras tres bordas viram vidro).

   `animation: none` nos cartoes: a entrada com `opacity 0 -> 1` (e o `both`
   que segurava o transform) fazia o desfoque do filho so enxergar o pai por
   450 ms e matava o `:hover` com `translateY`. */
:root { --vd-raio-cartao: 18px; }

/* vidro padrao: cartoes com pouco texto */
.painel .inicio__estado-item,
.painel .inicio__acao,
.painel .dashboard__kpi,
.painel .desempenho__kpi,
.painel .avaliacoes__cartao,
.painel .configuracoes__link {
  background: var(--vd-vidro);
  border: 1px solid var(--vd-borda);
  border-radius: var(--vd-raio-cartao);
  backdrop-filter: var(--vd-blur);
  -webkit-backdrop-filter: var(--vd-blur);
  box-shadow: var(--vd-sombra);
  animation: none;
}
.painel .configuracoes__item { animation: none; }

/* o cartao em destaque (Grupos de atendimento; KPI em destaque): o tom verde
   por cima do vidro, e nao mais misturado com o fundo opaco */
.painel .inicio__estado-item--destaque,
.painel .dashboard__kpi--destaque {
  background: linear-gradient(115deg,
    color-mix(in srgb, var(--bc-primary) 20%, var(--vd-vidro-forte)),
    color-mix(in srgb, var(--bc-primary) 7%, var(--vd-vidro-forte)));
  border-color: color-mix(in srgb, var(--bc-primary) 32%, var(--vd-borda));
}
.painel .inicio__estado-item--destaque .inicio__estado-legenda,
.painel .dashboard__kpi--destaque .dashboard__kpi-legenda { color: var(--bc-ink-soft); }

/* hover: sobe um pouco e o vidro adensa */
.painel .inicio__estado-item:hover,
.painel .inicio__acao:hover,
.painel .configuracoes__link:hover {
  background: var(--vd-vidro-forte);
  border-color: color-mix(in srgb, var(--bc-primary) 45%, var(--vd-borda));
  box-shadow: var(--vd-sombra-alta);
}
.painel .inicio__estado-item:hover { transform: translateY(-3px); }
.painel .inicio__estado-item--destaque:hover {
  background: linear-gradient(115deg,
    color-mix(in srgb, var(--bc-primary) 26%, var(--vd-vidro-forte)),
    color-mix(in srgb, var(--bc-primary) 11%, var(--vd-vidro-forte)));
}

/* vidro forte: texto corrido, tabelas, avisos e formularios de leitura */
.painel .inicio__painel,
.painel .dashboard__grafico-card,
.painel .desempenho__grafico-card,
.painel .disparos__guia,
.painel .desempenho__motivos,
.painel .desempenho__ajuda,
.painel .dashboard__dia,
.painel .chaves__form,
.painel .painel__tabela,
.painel .avaliacoes__tabela,
.painel [data-controller="gastos-grafico"],
.painel [data-bloco="busca-por-telefone"] > .painel__vazio,
.painel #desempenho-conteudo > .desempenho__vazio,
.painel .dois-fatores__passos,
.painel section > .painel__vazio {
  background: var(--vd-vidro-forte);
  border-color: var(--vd-borda);
  border-radius: var(--vd-raio-cartao);
  backdrop-filter: var(--vd-blur);
  -webkit-backdrop-filter: var(--vd-blur);
  box-shadow: var(--vd-sombra);
}
.painel .dashboard__dia { border-color: color-mix(in srgb, var(--bc-primary) 45%, var(--vd-borda)); }

/* avisos e alertas: a faixa colorida da esquerda (primaria, de atencao ou de
   perigo) NAO e tocada -- so as outras tres bordas e o fundo */
.painel .inicio__aviso {
  background: var(--vd-vidro-forte);
  border-top-color: var(--vd-borda);
  border-right-color: var(--vd-borda);
  border-bottom-color: var(--vd-borda);
  backdrop-filter: var(--vd-blur);
  -webkit-backdrop-filter: var(--vd-blur);
  box-shadow: var(--vd-sombra-leve);
}
/* O aviso da INBOX (`.conversa__flash`, dentro do composer) NAO entra: a inbox e a
   proxima rodada, e o vidro vazava para la (verificacao de 23/10). */
.painel .painel__flash--aviso:not(.conversa__flash) {
  color: color-mix(in oklab, var(--bc-ok) 78%, var(--bc-ink));
  background: color-mix(in oklab, var(--bc-ok) 12%, var(--vd-vidro-forte));
  backdrop-filter: var(--vd-blur);
  -webkit-backdrop-filter: var(--vd-blur);
}
.painel .painel__flash--alerta:not(.conversa__flash) {
  background: color-mix(in oklab, var(--bc-danger) 8%, var(--vd-vidro-forte));
  backdrop-filter: var(--vd-blur);
  -webkit-backdrop-filter: var(--vd-blur);
}
body.painel[data-theme="escuro"] .painel__flash--alerta:not(.conversa__flash) {
  color: color-mix(in srgb, var(--bc-danger) 60%, #fff);
}
/* Falha de envio sobre a bolha de saida VERDE no escuro: o vermelho puro media 3,55:1; misturado a 60% com branco, 5,3:1. */
body.painel[data-theme="escuro"] :is(.redes__aviso--erro, .conversa__bolha-status--falhou) {
  color: color-mix(in srgb, var(--bc-danger) 60%, #fff);
}
.painel .chaves__token-novo {
  background: color-mix(in oklab, var(--bc-warn) 16%, var(--vd-vidro-forte));
  backdrop-filter: var(--vd-blur);
  -webkit-backdrop-filter: var(--vd-blur);
}

/* tabelas: cabecalho e passagem do mouse viram pelicula, nao faixa chapada.
   (As de Desempenho e do Dashboard, com cabecalho e coluna fixos, ficam
   solidas: o conteudo que rola passa por baixo.) */
.painel .painel__tabela th { background: color-mix(in srgb, var(--bc-primary) 7%, transparent); }
.painel .painel__tabela th,
.painel .painel__tabela td { border-bottom-color: color-mix(in srgb, var(--bc-line) 65%, transparent); }
.painel .painel__tabela tbody tr:hover { background: color-mix(in srgb, var(--bc-primary) 9%, transparent); }

/* o que mora DENTRO de um vidro: pelicula, sem desfoque proprio */
.painel .inicio__numero {
  background: color-mix(in srgb, var(--vd-vidro-forte) 62%, transparent);
  border-color: color-mix(in srgb, var(--vd-borda) 70%, transparent);
}
.painel .inicio__painel .painel__vazio { background: none; border: 0; box-shadow: none; }
.painel .disparos__formato {
  background: color-mix(in srgb, var(--vd-vidro-forte) 55%, transparent);
  border-color: color-mix(in srgb, var(--bc-line) 80%, transparent);
}

/* ── ajustes que a verificacao de todas as telas pediu (23/10) ──────────
   Seis agentes mediram contraste (cor do texto contra o fundo REAL amostrado do
   print), cantos, vidro em dobro e sobras opacas, no claro, no escuro e no
   celular. O que apareceu, e como foi resolvido: */

/* 1. O cinza de apoio e o brilho da logo atras: no claro, o texto pequeno
   (legendas, rotulos, "vazio") caia para 3,4 a 4,4:1. Escurecer os TOKENS (e nao
   cada seletor) conserta 58 textos de uma vez. O `:not` e obrigatorio: sem ele
   empata com o seletor do escuro. Verde de "ok" e ambar de "atencao" tambem. */
body.painel:not([data-theme="escuro"]) {
  --bc-ink-mut: #4b6054;
  --bc-ink-faint: #5a7064;
  --bc-ok: #0c6a43;
  --bc-warn: #865a07;
  /* o anel de foco verde-claro dava 2,3:1 sobre o vidro branco (minimo 3:1) */
  --bc-focus: var(--bc-primary);
}
/* Link em verde da marca sobre vidro: um tom mais fundo (claro) ou mais claro (escuro). */
body.painel { --vd-link: color-mix(in srgb, var(--bc-primary) 66%, var(--bc-ink)); }
.painel .inicio__painel-link,
.painel .dashboard__unidade,
.painel .dashboard__grafico-tipo button[aria-pressed="true"],
.painel .dashboard__tabela-rolagem td button,
.painel .painel__legenda a,
.painel .painel__olho a,
.painel .painel__tabela a:not(.reguas__selo),
.painel .avaliacoes__tabela td a,
.painel .templates__nome,
.painel .dois-fatores__link,
.painel .grupos__abrir,
.painel .grupos__canal,
.painel .grupos__atalho b,
.painel .numeros__card-link,
.painel .equipe__avatar,
.painel .painel__conteudo > section:not(.suporte, .conversas, .redes) p > a:not([class]) { color: var(--vd-link); }
body.painel:not([data-theme="escuro"]) .grupos__card-padrao { color: var(--bc-ok); }
.painel .disparos__variavel { color: color-mix(in srgb, var(--bc-primary) 60%, var(--bc-ink)); }
.painel ::placeholder { color: var(--bc-ink-mut); opacity: 1; }

/* 2. A faixa do formulario de Tokens ocupava a linha toda, sem respiro. */
.painel .chaves__form { padding: 10px; width: fit-content; max-width: 100%; }

/* 3. Defeitos antigos que o vidro deixou a vista. */
.painel .dashboard__dia[hidden] { display: none; }
.painel .disparos__guia-aviso,
.painel .desempenho__aviso,
.painel .dashboard__aviso { color: var(--vd-espera-tinta); }
.painel .inicio__fila--atencao .inicio__fila-valor,
.painel .inicio__fila--atencao .inicio__fila-nome { color: var(--vd-espera-tinta); }
.painel blockquote.disparos__bolha { margin-bottom: 1rem; }
.painel .convites__form fieldset {
  border: 1px solid var(--bc-line);
  border-radius: 12px;
  background: color-mix(in srgb, var(--vd-vidro-forte) 45%, transparent);
}
.painel .dois-fatores__form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.painel .dois-fatores__form input[type="submit"] {
  width: fit-content; max-width: 100%; white-space: normal; padding: .72rem 1rem; cursor: pointer;
  font: inherit; font-weight: 600;
  color: var(--bc-primary-ink); background: var(--bc-primary);
  border: 0; border-radius: var(--bc-raio);
}
.painel .dois-fatores__passos { padding: 22px 24px 22px 36px; }
/* tabelas largas estouravam a PAGINA com a lateral flutuante (276 px): rolam por
   dentro, como ja fazem no celular. As genericas ate 1100 px; as das mensagens
   automaticas (9 e 7 colunas) ate 1320 px. */
@media (min-width: 761px) and (max-width: 1100px) {
  .painel .painel__tabela { display: block; overflow-x: auto; }
}
@media (min-width: 761px) and (max-width: 1320px) {
  .painel .painel__tabela.reguas__tabela--compacta,
  .painel .painel__tabela.reguas__tabela--cartoes { display: block; overflow-x: auto; }
}
/* os 3 graficos do detalhe do Desempenho pedem 300 px cada: empilham antes */
.painel .desempenho__graficos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.painel .desempenho__grafico-card { min-width: 0; }
@media (max-width: 1100px) { .painel .desempenho__graficos { grid-template-columns: 1fr; } }
.painel .desempenho__nome { margin: 0 0 1rem; }
.painel .avaliacoes__tabela tbody tr:last-child td { border-bottom-color: transparent; }
.painel .chaves__form input[type="text"] { min-width: min(26rem, 100%); }
.painel .painel__tabela .button_to button:not([class]) {
  font: inherit; color: var(--bc-ink-mut); background: none; border: 0; padding: 0; cursor: pointer;
}
.painel .painel__tabela .button_to button:not([class]):hover { color: var(--bc-danger); text-decoration: underline; }

/* o botao "Adicionar nota" do Suporte tem texto escuro FIXO sobre --bc-warn: com o
   ambar mais fundo do claro, o contraste caiu para 2,3:1 */
body.painel:not([data-theme="escuro"]) .suporte__composer--nota input[type="submit"] { color: #fff; }

/* etiquetas translucidas ficaram sobre vidro (mais claro e esverdeado que o fundo de
   antes): no escuro o texto sobe um tom; no claro o ambar usa a tinta de "atencao". */
body.painel[data-theme="escuro"] :is(.reguas__situacao--parada, .reguas__contato--falhou) {
  color: color-mix(in srgb, var(--bc-danger) 60%, #fff);
}
body.painel[data-theme="escuro"] :is(.reguas__situacao--ativa, .reguas__contato--ativa,
  .reguas__contato--respondeu, .convites__estado--aprovado) { color: color-mix(in srgb, var(--bc-ok) 65%, #fff); }
body.painel[data-theme="escuro"] :is(.reguas__situacao--pausada, .reguas__situacao--simulacao,
  .reguas__contato--aguardando_decisao) { color: color-mix(in srgb, var(--bc-warn) 70%, #fff); }
body.painel:not([data-theme="escuro"]) :is(.reguas__situacao--pausada, .reguas__situacao--simulacao,
  .reguas__contato--aguardando_decisao) { color: var(--vd-espera-tinta); }
@media (max-width: 640px) {
  .painel .avaliacoes__tabela .avaliacoes__comentario { min-width: 14rem; }
}

/* 4. O caminho do topo: capsula mais firme (passa por cima de conteudo verde) e,
   no celular, os niveis encolhem com reticencias em vez de se sobrepor. */
.painel .painel__caminho,
.painel .painel__barra-superior time { background: var(--vd-vidro-forte); }
.painel .painel__barra-superior time { color: var(--bc-ink-soft); }
/* os niveis de cima mantem o nome; so o ULTIMO (onde a pessoa esta) encolhe com
   reticencias. No celular pequeno a data sai da capsula para dar lugar. */
.painel__caminho-item { min-width: 0; }
.painel__caminho-item:not(:last-child) { flex-shrink: 0; }
.painel__caminho-link { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.painel__caminho-item:last-child :is(a, strong) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 480px) { .painel .painel__barra-superior time { display: none; } }

/* 5. No celular a logo cobre o cabecalho e o texto solto da tela: mais leve. */
@media (max-width: 760px) {
  html:has(body.painel)::before { opacity: .26; }
}

/* ── ajustes da terceira rodada de verificacao (23/10) ───────────────────── */

/* tokens: o escuro ganha um tom no cinza de apoio (o neon translucido atras clareia o fundo) */
body.painel[data-theme="escuro"] { --bc-ink-mut: #a9bdaf; }

/* textos que ficaram a 4,2-4,5:1 */
.painel .configuracoes__nota,
.painel .convites__dica,
.painel .desempenho__parte--sem-base { color: var(--bc-ink-mut); }
body.painel:not([data-theme="escuro"]) .dashboard__kpi-icone { color: color-mix(in srgb, var(--bc-primary) 80%, #000); }
.painel .painel__raiz-legenda,
.painel .painel__nav-secao { color: color-mix(in srgb, var(--bc-lateral-ink-mut) 82%, #fff); }

/* o caminho de 3 niveis nao cabia entre 761 e 1100 px (a lateral flutuante ocupa 276 px):
   o ultimo nivel, que diz onde a pessoa esta, sumia. Mesmo tratamento do celular: sem o
   nome da conta; e a data sai ate 900 px. */
@media (min-width: 761px) and (max-width: 1100px) {
  .painel__caminho-item:first-child, .painel__caminho-sep:nth-child(2) { display: none; }
}
@media (min-width: 761px) and (max-width: 900px) {
  .painel .painel__barra-superior time { display: none; }
}

/* tabela que vira bloco para rolar por dentro: a primeira coluna absorve a sobra, para a
   faixa do cabecalho e as divisorias irem ate a borda do cartao */
@media (max-width: 1100px) {
  .painel :is(.painel__tabela, .avaliacoes__tabela):not(.reguas__tabela--compacta, .reguas__tabela--cartoes)
    :is(th, td):first-child { width: 100%; }
}

/* "R$ 0,0000" quebrava em duas linhas nos 3 cartoes de Gastos entre 761 e 1199 px */
@media (min-width: 761px) and (max-width: 1199px) {
  .painel .inicio__estado-item dd { font-size: clamp(1.6rem, 2.4vw + .4rem, 3rem); white-space: nowrap; }
}

/* defeitos antigos de uma linha */
.painel .painel__codigo { overflow-wrap: anywhere; }
body.painel:has(.conversas) .painel__conteudo > .painel__flash { margin: 8px 38px 12px; }

/* ── sem vidro: superficie solida ──────────────────────────────────────── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.painel, body.painel[data-theme="escuro"] { --vd-vidro: var(--bc-surface); --vd-vidro-forte: var(--bc-surface); }
  .painel .painel__caminho, .painel .painel__barra-superior time { background: var(--bc-surface); }
}
@media (prefers-reduced-transparency: reduce) {
  body.painel, body.painel[data-theme="escuro"] { --vd-vidro: var(--bc-surface); --vd-vidro-forte: var(--bc-surface); --vd-blur: none; }
  .painel .painel__caminho, .painel .painel__barra-superior time { background: var(--bc-surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .painel .painel__lateral { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .painel .numeros__card, .painel .convites__form,
  .grupos__atalho, .grupos__card { backdrop-filter: none; -webkit-backdrop-filter: none; }
}