/* Messenger Impulser - identidade PortSolution (navy / teal / creme). Sem CDN. */
:root {
  --navy: #0B2A4A;
  --navy-2: #123A63;
  --teal: #1FA39E;
  --teal-esc: #17827E;
  --creme: #F4EFE3;
  --papel: #FFFFFF;
  --linha: #E2DED2;
  --texto: #16232F;
  --suave: #6B7A88;
  --alerta: #C6553C;
  --ok: #3E8E5A;
  --raio: 12px;
  --raio-p: 9px;
  /* Sombras em camada, de leve: e o que separa o cartao do fundo sem precisar
     de borda grossa. A escura e redefinida no tema escuro (sombra preta nao
     aparece em fundo preto - la o relevo vem da borda clara). */
  --sombra: 0 1px 2px rgba(11,42,74,.05), 0 4px 12px rgba(11,42,74,.06);
  --sombra-alta: 0 2px 6px rgba(11,42,74,.07), 0 12px 28px rgba(11,42,74,.10);
  --fonte: "Outfit", "Inter", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  --mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--fonte);
  background: var(--creme);
  color: var(--texto);
  font-size: 14px;
  overflow: hidden;               /* quem rola e o conteudo de cada aba */
}

/* barras de rolagem finas e discretas em todo o sistema */
* { scrollbar-width: thin; scrollbar-color: #98A7BA transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: #98A7BA; border-radius: 8px; border: 2px solid var(--creme);
}
*::-webkit-scrollbar-thumb:hover { background: #7A8AA1; }

.oculto { display: none !important; }

/* ------------------------------------------------------------ marca */
.marca { display: flex; align-items: center; gap: 10px; }
.marca strong { display: block; letter-spacing: .09em; font-size: 15px; }
.marca small { display: block; color: var(--suave); font-size: 11px; }
.lateral .marca strong { color: #fff; }
.lateral .marca small { color: #A9BDD1; }

.marca-sinal {
  width: 26px; height: 26px; border-radius: 8px; flex: none;
  background: var(--teal);
  position: relative;
}
.marca-sinal::after {
  content: ""; position: absolute; inset: 8px 7px 7px 8px;
  border: 2px solid #fff; border-radius: 6px 6px 2px 6px;
}

/* ------------------------------------------------------------ login */
.login {
  min-height: 100vh; display: grid; place-items: center;
  background: radial-gradient(1100px 520px at 50% -10%, #16406B 0%, var(--navy) 60%);
}
.cartao-login {
  width: 340px; background: var(--papel); padding: 28px; border-radius: 14px;
  box-shadow: 0 24px 60px rgba(0,0,0,.35); display: grid; gap: 14px;
}
.cartao-login .marca { margin-bottom: 6px; }
/* o cadastro e alto: quando nao cabe na tela, ele mesmo rola */
#form-cadastro {
  max-height: calc(100vh - 64px); overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
}

label { display: grid; gap: 5px; font-size: 12px; color: var(--suave); font-weight: 600; }
input, textarea, select {
  font-family: var(--fonte); font-size: 14px; color: var(--texto);
  padding: 9px 11px; border: 1px solid var(--linha); border-radius: 8px;
  background: #fff; width: 100%;
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus {
  outline: 2px solid var(--teal); outline-offset: 1px; border-color: var(--teal);
}
.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.botao {
  font-family: var(--fonte); font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 9px 16px; border-radius: var(--raio-p); border: 1px solid transparent;
  transition: background .14s ease, border-color .14s ease, color .14s ease,
              transform .14s ease, box-shadow .14s ease;
}
.botao:active { transform: translateY(1px); }
.botao.primario { background: var(--teal); color: #fff; box-shadow: var(--sombra); }
.botao.primario:hover { background: var(--teal-esc); box-shadow: var(--sombra-alta); }
.botao.vazado { background: transparent; border-color: var(--linha); color: var(--navy); }
.botao.vazado:hover { border-color: var(--teal); color: var(--teal-esc); }
.botao.perigo { background: transparent; border-color: #E4C4BB; color: var(--alerta); }
.botao.perigo:hover { background: #FBF0ED; border-color: var(--alerta); }
.botao:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.botao[disabled] { opacity: .55; cursor: not-allowed; transform: none; }
.erro { color: var(--alerta); font-size: 12px; min-height: 16px; margin: 0; }

/* ------------------------------------------------------- menu lateral */
.lateral {
  width: 232px; background: var(--navy); color: #fff;
  display: flex; flex-direction: column; gap: 4px; padding: 14px 10px 10px;
  overflow-y: auto; overflow-x: hidden; transition: width .16s ease;
}
.lateral .marca { padding: 0 6px 14px; }
.lateral .marca-texto { overflow: hidden; }
.lateral .marca strong { display: block; font-size: 13.5px; letter-spacing: .2px; }

.abas { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.aba {
  background: transparent; border: 0; color: #B9CADB; cursor: pointer;
  font-family: var(--fonte); font-size: 13px; padding: 9px 11px; border-radius: 9px;
  display: flex; align-items: center; gap: 11px; text-align: left; width: 100%;
  white-space: nowrap;
}
/* Os icones sao SVG desenhado a traco: acompanham a cor do texto sozinhos e
   nao dependem de fonte de icone nenhuma (o app tem de abrir offline). */
.aba svg, .recolher svg, .abrir-menu svg {
  width: 18px; height: 18px; flex: none; fill: none;
  stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.aba span { overflow: hidden; text-overflow: ellipsis; }
.aba { position: relative; transition: background .14s ease, color .14s ease; }
.aba:hover { color: #fff; background: rgba(255,255,255,.08); }
.aba.ativa { color: #fff; background: var(--teal); font-weight: 600; }
.aba:focus-visible, .recolher:focus-visible, .abrir-menu:focus-visible {
  outline: 2px solid var(--teal); outline-offset: 1px;
}

.recolher {
  background: transparent; border: 0; color: #7F97AE; cursor: pointer; margin-top: 6px;
  font-family: var(--fonte); font-size: 12px; padding: 8px 11px; border-radius: 9px;
  display: flex; align-items: center; gap: 11px; width: 100%;
}
.recolher:hover { color: #fff; background: rgba(255,255,255,.07); }

/* recolhido: so os icones. O rotulo continua no DOM (leitor de tela) */
body.menu-recolhido .lateral { width: 60px; }
body.menu-recolhido .aba span,
body.menu-recolhido .recolher span,
body.menu-recolhido .marca-texto { display: none; }
body.menu-recolhido .aba, body.menu-recolhido .recolher { justify-content: center; }
body.menu-recolhido .recolher svg { transform: rotate(180deg); }

.veu-lateral { display: none; }
.abrir-menu {
  background: transparent; border: 0; color: #fff; cursor: pointer;
  padding: 6px; border-radius: 8px; display: flex;
}
.abrir-menu:hover { background: rgba(255,255,255,.1); }
.so-celular { display: none; }

/* ------------------------------------------------------------ topo */
.topo {
  height: 56px; background: var(--navy); color: #fff;
  display: flex; align-items: center; gap: 14px; padding: 0 16px;
  border-left: 1px solid rgba(255,255,255,.08);
}
.titulo-tela {
  flex: 1; margin: 0; font-size: 15px; font-weight: 600; letter-spacing: .2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.topo-direita { display: flex; align-items: center; gap: 12px; }
.topo-direita .usuario { font-size: 12px; color: #C8D8E7;
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; padding: 3px 6px; border-radius: 999px; }
.topo-direita .usuario:hover { background: rgba(255,255,255,.1); color: #fff; }
.topo-direita .usuario:focus-visible { outline: 2px solid var(--teal); }

/* ------------------------------------------------ foto do colaborador */
.foto-pessoa {
  border-radius: 50%; object-fit: cover; flex: none; display: inline-grid;
  place-items: center; background: var(--teal); color: #fff; font-weight: 700;
  box-shadow: 0 0 0 1px rgba(0,0,0,.06);
}
/* sem foto: as iniciais, para a linha nunca ficar com um buraco */
.foto-pessoa.sem-foto { letter-spacing: .02em; }
.pessoa { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pessoa strong { display: block; }
.foto-acoes { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.topo .botao.vazado { border-color: rgba(255,255,255,.28); color: #fff; }

.pino { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #A9BDD1; }
.pino i { width: 8px; height: 8px; border-radius: 50%; background: #C9A227; display: block; }
.pino.on i { background: #4BC08A; }
.pino.off i { background: #E06B4F; }

/* ------------------------------------------------------------ paineis */
/* Esqueleto: menu a esquerda, barra fina em cima e a tela ocupando o resto.
   Quem controla a altura e o grid - nada de calc(100vh - 56px) espalhado, que
   era o que quebrava toda vez que a barra de cima mudava de tamanho. */
#app:not(.oculto) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto minmax(0, 1fr);
  height: 100vh;
}
#app > .faixa-visita { grid-column: 1 / -1; }
#app > .lateral { grid-row: 2 / 4; }
#app > .topo { grid-column: 2; }
.painel { display: none; grid-column: 2; grid-row: 3; min-height: 0; }
.painel.ativo { display: grid; }

/* No celular a lateral sai do grid e vira gaveta por cima da tela: roubar
   232px da largura da conversa nao cabe num telefone. Este bloco vem DEPOIS
   das regras de cima de proposito - mesma especificidade, quem vem depois
   ganha; antes, a coluna 2 do desktop voltava a valer no celular. */
@media (max-width: 900px) {
  .so-celular { display: flex; }
  #app > .lateral {
    position: fixed; top: 0; bottom: 0; left: 0; z-index: 60; width: 240px;
    transform: translateX(-100%); transition: transform .18s ease;
    box-shadow: 0 0 40px rgba(0,0,0,.35);
  }
  body.menu-aberto #app > .lateral { transform: none; }
  /* recolhido e coisa de tela grande: na gaveta o rotulo sempre aparece */
  body.menu-recolhido #app > .lateral { width: 240px; }
  body.menu-recolhido .aba span,
  body.menu-recolhido .recolher span,
  body.menu-recolhido .marca-texto { display: block; }
  body.menu-recolhido .aba, body.menu-recolhido .recolher { justify-content: flex-start; }
  .lateral .recolher { display: none; }
  body.menu-aberto .veu-lateral {
    display: block; position: fixed; inset: 0; z-index: 50; background: rgba(6,18,30,.5);
  }
  #app:not(.oculto) { grid-template-columns: minmax(0, 1fr); }
  #app > .topo { grid-column: 1; }
  .painel { grid-column: 1; }
  .topo { border-left: 0; }
}

/* faixa do super admin administrando a empresa de um cliente */
.faixa-visita {
  height: 34px; display: flex; align-items: center; justify-content: center; gap: 12px;
  background: #E0A63C; color: #3A2A08; font-size: 12.5px; padding: 0 12px;
}
.faixa-visita b { font-weight: 700; }
.faixa-visita .botao.vazado {
  border-color: rgba(58,42,8,.35); color: #3A2A08; padding: 3px 10px; font-size: 12px;
}
.empresa-acoes { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
#painel-atendimentos.ativo { grid-template-columns: 310px 1fr 290px; }
.conteudo {
  overflow-y: auto; overflow-x: hidden;
  padding: 24px 28px 60px;
  width: 100%; max-width: 1150px; margin: 0 auto;   /* centralizado */
}

/* ------------------------------------------------------------ lista */
.coluna-lista {
  background: var(--vidro-2); border-right: 1px solid var(--linha);
  /* filtros, sino das propostas, busca, legenda, analistas e a lista (que
     ocupa o resto). UMA FAIXA POR FILHO: item que sobra do grid-template cai
     numa faixa implicita e a lista deixa de crescer. */
  display: grid; grid-template-rows: auto auto auto auto auto 1fr; min-height: 0;
}

/* --------------------------------------------- chamado do robo
   O robo entregou uma conversa a este analista e espera ele iniciar. */
.chamado-fundo {
  position: fixed; inset: 0; z-index: 60; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(11,42,74,.55); backdrop-filter: blur(2px);
}
.chamado {
  background: #fff; border-radius: 14px; padding: 22px 24px; max-width: 380px;
  width: 100%; box-shadow: 0 18px 50px rgba(0,0,0,.28); text-align: center;
}
.chamado h3 { margin: 0 0 10px; font-size: 15px; }
.chamado-quem { font-size: 20px; font-weight: 700; margin: 0 0 2px; }
.chamado-acoes { display: flex; gap: 8px; justify-content: center; margin: 16px 0 8px; }
.chamado-aviso { font-size: 11px; margin: 0; }

/* ------------------------------------------------------ analistas
   Quem esta com qual cliente. A equipe atende toda pelo mesmo numero. */
.analistas { border-top: 1px solid var(--linha); margin: 4px 0 0; min-height: 0; }
.analistas-topo {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  width: 100%; padding: 7px 12px; background: none; border: 0; cursor: pointer;
  font-family: var(--fonte); font-size: 11px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--suave);
}
.analistas-topo b { font-weight: 700; text-transform: none; letter-spacing: 0; }
.analistas-topo::after { content: '\25B2'; font-size: 8px; }
.analistas.fechado .analistas-topo::after { content: '\25BC'; }
.analistas-lista { padding: 0 8px 8px; max-height: 30vh; overflow: auto; }
.analistas.fechado .analistas-lista { display: none; }
.analista { margin-bottom: 6px; }
/* Nome + foto + estado nao cabem numa linha so nesta coluna estreita: o nome
   fica em cima e o resto (online / em curso / feitos hoje) numa segunda linha,
   alinhado com ele. A seta e a foto ocupam as duas linhas, na esquerda. */
.analista-nome {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  font-size: 12px; padding: 5px 4px; background: none; border: 0; cursor: pointer;
  font-family: var(--fonte); color: inherit; border-radius: var(--raio-p);
}
.analista-nome:hover { background: rgba(0,0,0,.04); }
.analista-nome .seta { flex: none; width: 9px; font-size: 9px; color: var(--suave);
  line-height: 1; }
.analista-nome .seta::before { content: '\25B8'; }
.analista.aberto .analista-nome .seta::before { content: '\25BE'; }
.analista-txt { min-width: 0; flex: 1; display: grid; gap: 2px; }
.analista-txt strong {
  font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.analista-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* fechado mostra so o nome e os numeros; aberto abre a lista de atendimentos */
.analista-corpo { display: none; padding-left: 4px; }
.analista.aberto .analista-corpo { display: block; }
.analista-secao {
  font-size: 10px; color: var(--suave); text-transform: uppercase;
  letter-spacing: .04em; padding: 5px 2px 3px;
}
/* "2 em curso" e "livre" nao podem ter a mesma cor: quem bate o olho na coluna
   precisa achar na hora quem esta ocupado e quem esta parado. */
.analista-nome .quantos { font-size: 10px; color: var(--suave); }
.analista-nome .quantos.ocupado { color: var(--teal-esc); font-weight: 700; }
.analista-nome .quantos.livre { color: var(--ok); font-weight: 700; }
.analista-nome .quantos.parado { color: var(--suave); }
:root:not([data-tema="claro"]) .analista-nome .quantos.ocupado { color: var(--ciano); }
:root:not([data-tema="claro"]) .analista-nome .quantos.livre { color: var(--lima); }

/* esta logado agora? a palavra vai escrita, nao so a cor */
.selo-login {
  font-size: 9px; text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
  border-radius: 10px; padding: 1px 6px; flex: none; display: inline-flex;
  align-items: center; gap: 4px; white-space: nowrap;
}
.selo-login::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor;
}
.selo-login.on { background: #E3F1E9; color: #1E6B45; }
.selo-login.off { background: #EFEDE8; color: #7A7468; }
/* no menu do cliente, mas ainda sem login: a fila dele existe e precisa aparecer */
.selo-login.sem { background: transparent; color: #8A8377; border: 1px dashed #C3BDB1; }
.selo-login.sem::before { background: transparent; border: 1px dashed currentColor; }
.analista-conversa {
  display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  background: #fff; border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 5px 9px; margin-bottom: 3px; cursor: pointer;
  font-family: var(--fonte); font-size: 12px; color: inherit;
}
.analista-conversa:hover { border-color: var(--teal); }
.analista-conversa.ativo { border-color: var(--navy); box-shadow: inset 3px 0 0 var(--teal); }
.analista-conversa .quem { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.analista-conversa .quando { margin-left: auto; font-size: 10px; color: var(--suave); }
.analista-conversa .nao-lidas {
  background: var(--teal); color: #fff; border-radius: 9px; padding: 0 5px;
  font-size: 10px; font-weight: 700; flex: none;
}
.filtros { display: flex; flex-wrap: wrap; gap: 4px; padding: 10px 10px 4px; }
.filtro {
  border: 1px solid var(--linha); background: #fff; border-radius: 20px;
  padding: 5px 11px; font-size: 12px; cursor: pointer; font-family: var(--fonte);
  color: var(--suave);
}
.filtro.ativo { background: var(--navy); border-color: var(--navy); color: #fff; }
.filtro b { font-weight: 700; margin-left: 3px; }
.busca { margin: 8px 10px; width: calc(100% - 20px); }
.lista { overflow: auto; padding: 0 8px 12px; }

.item {
  background: #fff; border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 10px 12px; margin-bottom: 6px; cursor: pointer;
}
.item:hover { border-color: var(--teal); }
.item.ativo { border-color: var(--navy); box-shadow: inset 3px 0 0 var(--teal); }
.item .cabeca { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; }
.item .nome { font-weight: 600; font-size: 13px; }
.item .hora { font-size: 10px; color: var(--suave); }
.item .previa {
  font-size: 12px; color: var(--suave); margin-top: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.selo {
  font-size: 10px; padding: 2px 7px; border-radius: 20px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em;
}
/* robo = azul, em atendimento = verde, na fila = amarelo/laranja/vermelho */
.selo.bot { background: #DCE9F7; color: #1B4F8A; }
.selo.fila { background: #FBE9C8; color: #8A6516; }
.selo.atendimento { background: #D7F0E4; color: #1E6B45; }
.selo.finalizada { background: #EDEAE1; color: var(--suave); }
.selos { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.etiqueta { font-size: 10px; background: #E6F3F2; color: var(--teal-esc); padding: 2px 7px;
  border-radius: 20px; }

/* ------------------------------------------- temperatura da espera na fila */
.etiqueta.espera { font-weight: 700; }
.etiqueta.espera.nova { background: #FBE9C8; color: #8A6516; }        /* amarelo */
.etiqueta.espera.atencao { background: #FBDCC0; color: #A3541A; }     /* laranja */
.etiqueta.espera.critica { background: #F7D3CE; color: #A3291A; }     /* vermelho */

/* faixa colorida na lateral do item, para ler a fila de relance */
.item.espera-nova { border-left: 4px solid #E0A82E; }
.item.espera-atencao { border-left: 4px solid #E07B2E; }
.item.espera-critica { border-left: 4px solid #C63A2A; background: #FFF7F6; }
.item.espera-critica .nome { color: #A3291A; }
.item.espera-critica .etiqueta.espera { animation: piscar 1.6s ease-in-out infinite; }
@keyframes piscar { 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) {
  .item.espera-critica .etiqueta.espera { animation: none; }
}

/* legenda das cores, abaixo dos filtros */
.legenda-fila { display: flex; gap: 10px; flex-wrap: wrap; padding: 0 12px 8px;
  font-size: 10px; color: var(--suave); }
.legenda-fila span { display: inline-flex; align-items: center; gap: 4px; }
.legenda-fila i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

/* ------------------------------------------------------------ conversa */
.coluna-conversa { display: grid; grid-template-rows: auto 1fr auto; min-height: 0;
  background: var(--papel); }
.conversa-topo {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid var(--linha);
}
.conversa-topo strong { display: block; font-size: 15px; }
.conversa-topo small { color: var(--suave); font-size: 12px; }
.acoes { display: flex; gap: 6px; flex-wrap: wrap; }

/* A tela da conversa precisa ser mais ESCURA que os baloes, senao branco sobre
   quase-branco desaparece. Medido: com o creme antigo (#F9F6F0 resultante) o
   balao do cliente ficava a 1,08:1 do fundo — invisivel. Agora 1,58:1, e cada
   balao ainda tem contorno e sombra propria. */
.mensagens {
  overflow: auto; padding: 18px 22px;
  background: linear-gradient(180deg, #C7D3E3, #BDCBDE);
  display: flex; flex-direction: column; gap: 8px;
}
.vazio { margin: auto; text-align: center; color: var(--suave); }
.vazio p { font-size: 15px; margin: 0 0 4px; color: var(--navy); }
.vazio span { font-size: 12px; }

.balao {
  max-width: 66%; padding: 9px 12px; border-radius: 12px; font-size: 13px;
  line-height: 1.45; white-space: pre-wrap; word-break: break-word;
  border: 1px solid #8FA3BC; background: #fff;
  box-shadow: 0 1px 2px rgba(15,31,51,.10), 0 3px 8px rgba(15,31,51,.08);
}
.balao.cliente { align-self: flex-start; border-bottom-left-radius: 3px; }
.balao.bot { align-self: flex-end; background: #DEEBFB; border-color: #7FA3CE;
  border-bottom-right-radius: 3px; }
.balao.atendente { align-self: flex-end; background: #C6EFDD; border-color: #4FB495;
  border-bottom-right-radius: 3px; }
.balao .rodape { font-size: 10px; color: var(--suave); margin-top: 5px; }
.balao .autor {
  display: inline-block; font-size: 11px; font-weight: 700; color: var(--teal-esc);
  margin-bottom: 3px;
}
.balao.bot .autor { color: var(--navy-2); }

/* ------------------------------------------------------------ compositor */
.compositor { border-top: 1px solid var(--linha); padding: 10px 18px 14px; position: relative; }
.assinatura-previa {
  font-size: 11px; color: var(--suave); margin-bottom: 6px; min-height: 16px;
}
.assinatura-previa b { color: var(--teal-esc); font-family: var(--mono); }
.linha-compositor { display: flex; gap: 8px; align-items: flex-end; }
.linha-compositor textarea { flex: 1; }
.rapidas-flutuante {
  position: absolute; bottom: 78px; left: 18px; right: 18px; background: #fff;
  border: 1px solid var(--linha); border-radius: var(--raio); max-height: 190px;
  overflow: auto; box-shadow: 0 12px 30px rgba(11,42,74,.16);
}
.rapidas-flutuante div { padding: 8px 12px; cursor: pointer; font-size: 12px; }
.rapidas-flutuante div:hover { background: #F1F7F6; }
.rapidas-flutuante code { color: var(--teal-esc); font-family: var(--mono); margin-right: 8px; }

/* ------------------------------------------------------------ ficha */
.coluna-ficha { background: var(--vidro-2); border-left: 1px solid var(--linha); overflow: auto;
  padding: 14px; }
.bloco { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 13px; margin-bottom: 10px; display: grid; gap: 8px; box-shadow: var(--sombra); }
.bloco h3 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--suave); }
.bloco.simulador { border-color: var(--teal); }
.coletados { font-size: 12px; display: grid; gap: 4px; }
.coletados span { color: var(--suave); }
.coletados b { font-family: var(--mono); color: var(--navy-2); font-size: 11px; }

/* ------------------------------------------------------------ secoes */
.cabecalho-secao { display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; margin-bottom: 14px; }
.cabecalho-secao h2 { margin: 0 0 3px; font-size: 19px; color: var(--navy); }
.cabecalho-secao p { margin: 0; color: var(--suave); font-size: 13px; max-width: 620px; }
code { font-family: var(--mono); background: #EDEAE1; padding: 1px 5px; border-radius: 4px;
  font-size: 12px; }

.cartoes { display: grid; gap: 10px; }
.cartao { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 16px; display: grid; gap: 10px; box-shadow: var(--sombra); }
.cartao h3 { margin: 0 0 4px; font-size: 14px; color: var(--navy); }
.cartao .linha { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.cartao .meta { font-size: 12px; color: var(--suave); }
.linha-check { display: flex; align-items: center; gap: 8px; flex-direction: row;
  color: var(--texto); font-size: 13px; }
.linha-check input { width: auto; }

/* ------------------------------------------------------------ fluxo */
.grade-fluxo { display: grid; grid-template-columns: 300px 1fr; gap: 16px; align-items: start; }
.mapa { display: grid; gap: 6px; }
.no {
  background: #fff; border: 1px solid var(--linha); border-left: 4px solid var(--navy);
  border-radius: 8px; padding: 9px 11px; cursor: pointer;
}
.no:hover { border-color: var(--teal); }
.no.ativo { box-shadow: 0 0 0 2px var(--teal); }
.no .chave { font-family: var(--mono); font-size: 11px; color: var(--teal-esc); }
.no .titulo { font-size: 13px; font-weight: 600; }
.no .tipo { font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--suave); }
.no[data-tipo="menu"] { border-left-color: var(--teal); }
.no[data-tipo="pergunta"] { border-left-color: #C9A227; }
.no[data-tipo="documentos"] { border-left-color: #7B61C4; }
.no[data-tipo="transferir"] { border-left-color: var(--alerta); }
.no[data-tipo="encerrar"] { border-left-color: var(--suave); }
.editor { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 16px; display: grid; gap: 10px; }
.editor .dica { color: var(--suave); margin: 0; }
.opcao { display: grid; grid-template-columns: 70px 1fr 150px 34px; gap: 6px; align-items: center; }
.opcao input, .opcao select { padding: 7px 9px; font-size: 13px; }
.remover { border: 1px solid var(--linha); background: #fff; border-radius: 7px; cursor: pointer;
  color: var(--alerta); font-size: 15px; line-height: 1; padding: 6px 0; }

/* ------------------------------------------------------------ relatorios */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px;
  margin-bottom: 16px; }
.kpi { background: #fff; border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 16px; box-shadow: var(--sombra); }
.kpi b { display: block; font-size: 26px; color: var(--navy); line-height: 1.1; }
/* Tom do numero pelo SIGNIFICADO, nao pela posicao: verde = esta bom, ambar =
   olhe para isto, vermelho = ja e problema. Uma faixa da cor na esquerda para
   quem nao distingue bem as cores continuar separando os cartoes. */
.kpi.ok b { color: var(--ok); }
.kpi.atencao b { color: #8A6516; }
.kpi.ruim b { color: var(--alerta); }
.kpi.ok, .kpi.atencao, .kpi.ruim { border-left-width: 4px; }
.kpi.ok { border-left-color: var(--ok); }
.kpi.atencao { border-left-color: #C9A227; }
.kpi.ruim { border-left-color: var(--alerta); }
:root:not([data-tema="claro"]) .kpi.ok b { color: var(--lima); }
:root:not([data-tema="claro"]) .kpi.atencao b { color: var(--ambar); }
:root:not([data-tema="claro"]) .kpi.ruim b { color: var(--coral); }
:root:not([data-tema="claro"]) .kpi.ok { border-left-color: var(--lima); }
:root:not([data-tema="claro"]) .kpi.atencao { border-left-color: var(--ambar); }
:root:not([data-tema="claro"]) .kpi.ruim { border-left-color: var(--coral); }
.kpi span { font-size: 11px; color: var(--suave); text-transform: uppercase;
  letter-spacing: .05em; }
.grade-relatorio { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.barra { display: grid; gap: 3px; margin-bottom: 9px; }
.barra .rotulo { display: flex; justify-content: space-between; font-size: 12px; }
.barra .trilho { height: 7px; background: #EDEAE1; border-radius: 6px; overflow: hidden; }
.barra .preenche { height: 100%; background: var(--teal); }

.tabela { width: 100%; border-collapse: collapse; font-size: 12px; }
.tabela td, .tabela th { padding: 7px 8px; border-bottom: 1px solid var(--linha);
  text-align: left; }
.tabela th { color: var(--suave); font-size: 11px; text-transform: uppercase; }

/* Acompanhando o atendimento de outra pessoa: a faixa precisa saltar aos olhos.
   Sem ela, alguem responde achando que a conversa e sua e dois analistas falam
   com o mesmo cliente ao mesmo tempo. */
/* o cabecalho da conversa e `display:block`, entao a faixa ja cai na sua
   propria linha - so precisa do respiro em cima */
.faixa-acompanhando {
  margin: 10px 0 0; padding: 7px 12px; font-size: 12.5px;
  background: #FFF4E0; border: 1px solid #E9C97F; border-radius: var(--raio-p);
  color: #6B4E12;
}
:root:not([data-tema="claro"]) .faixa-acompanhando {
  background: rgba(251,191,36,.12); border-color: rgba(251,191,36,.45);
  color: var(--ambar);
}

/* ---------------------------------------------------------- clientes */
.grade-clientes { display: grid; grid-template-columns: 340px minmax(0, 1fr);
  gap: 16px; align-items: start; }
.lista-clientes { display: grid; gap: 8px; }
.item-cliente {
  display: grid; gap: 5px; text-align: left; width: 100%; cursor: pointer;
  background: var(--papel); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 12px 13px; font-family: var(--fonte);
  color: inherit; box-shadow: var(--sombra);
}
.item-cliente:hover { border-color: var(--teal); }
.item-cliente.ativo { border-color: var(--teal); box-shadow: var(--sombra-alta); }
.item-cliente strong { font-size: 13.5px; }
/* o protocolo e para ser LIDO em voz alta no telefone: fonte de largura fixa,
   para o numero nao dancar de linha em linha */
.protocolo { font-family: var(--mono); font-size: 11.5px; color: var(--teal-esc);
  background: #EAF5F4; border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.protocolo.grande { font-size: 15px; padding: 6px 12px; }
:root:not([data-tema="claro"]) .protocolo {
  background: rgba(34,211,238,.12); color: var(--ciano);
}
.ficha-cliente h4 { margin: 16px 0 6px; font-size: 12px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--suave); }
.cabeca-cliente { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; }
.cabeca-cliente h3 { margin: 0; }
.rotulo-campo { color: var(--suave); width: 40%; }
.campos-cliente { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px 14px; }
.campo-cliente { gap: 3px; }
.campo-cliente .origem { font-size: 10.5px; color: var(--suave); font-weight: 400; }
/* campo corrigido pela equipe: a barra na esquerda diz, de longe, que aquele
   valor nao e o que o cliente escreveu */
.campo-cliente.corrigido input { border-left: 3px solid #C9A227; }
.campo-cliente.corrigido .origem { color: #8A6516; }
:root:not([data-tema="claro"]) .campo-cliente.corrigido .origem { color: var(--ambar); }
:root:not([data-tema="claro"]) .campo-cliente.corrigido input {
  border-left-color: var(--ambar);
}
.docs-cliente { display: grid; gap: 6px; }
.docs-cliente .anexo-doc { display: flex; justify-content: space-between; gap: 10px; }

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

/* ------------------------------------------------------------- podio */
.podio-caixa { gap: 14px; }
.cabeca-podio { display: grid; gap: 6px; }
.cabeca-podio h3 { margin: 0; }
.ordenar-podio { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.ordenar-podio .botao { padding: 5px 11px; font-size: 12px; }
.ordenar-podio .botao.ativo { background: var(--teal); border-color: var(--teal);
  color: #fff; }

/* palanque de verdade: o campeao no meio e mais alto que os dois lados */
.podio { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px;
  align-items: end; }
.degrau { display: grid; justify-items: center; gap: 6px; text-align: center;
  background: var(--creme); border: 1px solid var(--linha); border-radius: var(--raio);
  padding: 14px 8px; }
.degrau.vazio { background: transparent; border: 0; }
.degrau strong { font-size: 13px; line-height: 1.2; }
.degrau .valor { font-size: 12px; color: var(--suave); }
.degrau .medalha { font-size: 20px; line-height: 1; }
.degrau.lugar-1 { padding: 22px 8px; border-color: var(--teal);
  box-shadow: var(--sombra-alta); }
.degrau.lugar-1 strong { font-size: 15px; }

@media (max-width: 720px) {
  /* no celular o palanque vira lista: 1o, 2o, 3o, na ordem que se le */
  .podio { grid-template-columns: 1fr; }
  .degrau { grid-template-columns: auto 1fr auto; justify-items: start;
    text-align: left; align-items: center; padding: 10px 12px; }
  .degrau.lugar-1 { order: -1; padding: 12px; }
  .degrau.lugar-3 { order: 1; }
}

.estado-conexao { background: #F1F7F6; border: 1px solid #CFE6E4; border-radius: 8px;
  padding: 10px 12px; font-size: 13px; }
.previa-assinatura { background: #F7F5EE; border: 1px dashed var(--linha); border-radius: 8px;
  padding: 10px 12px; font-size: 13px; white-space: pre-wrap; }

/* ------------------------------------------------------------ aviso */
.aviso {
  position: fixed; right: 18px; bottom: 18px; background: var(--navy); color: #fff;
  padding: 11px 16px; border-radius: 9px; font-size: 13px; z-index: 40;
  box-shadow: 0 14px 34px rgba(11,42,74,.32);
}
.aviso.ruim { background: var(--alerta); }

@media (max-width: 1180px) {
  #painel-atendimentos.ativo { grid-template-columns: 260px 1fr; }
  .coluna-ficha { display: none; }
  .grade-relatorio, .grade-fluxo { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.no .liga { font-size: 10px; color: var(--suave); margin-top: 4px; font-family: var(--mono); }

/* ------------------------------------------------------------ conexao v2 */
.qr-caixa { text-align: center; padding: 18px; background: #fff;
  border: 1px solid var(--linha); border-radius: 12px; margin-bottom: 16px; }
/* tamanho natural: reduzir o QR borra os quadradinhos e a camera nao le */
.qr-caixa img { width: auto; max-width: 100%; image-rendering: pixelated; }
.qr-caixa p { color: var(--tinta-fraca); font-size: 13px; margin-top: 10px; }
.cartao code { background: var(--creme); padding: 2px 6px; border-radius: 6px;
  font-size: 12px; }
.cartao h3 { font-family: 'Sora', sans-serif; font-size: 15px;
  color: var(--navy); margin-bottom: 10px; }


/* --------------------------------------------------------- administracao */
/* painel de numeros da plataforma (contratadas, em teste, vencidas...) */
.painel-numeros { display: grid; gap: 10px; margin: 14px 0 4px;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.painel-numeros .numero { background: var(--papel); border: 1px solid var(--linha);
  border-radius: var(--raio); padding: 12px 14px; }
.painel-numeros .numero b { display: block; font-size: 24px; color: var(--navy);
  line-height: 1.1; }
.painel-numeros .numero span { font-size: 11px; color: var(--suave); }
.painel-numeros .numero.ok b { color: #1E6B45; }
.painel-numeros .numero.fila b { color: #8A6516; }
.painel-numeros .numero.ruim b { color: #A3291A; }

.empresa-cartao { margin-bottom: 14px; }
.renovacao { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linha); }
.renovacao label { margin: 0; font-size: 12px; }
.renovacao input { width: 110px; }
.renovacao .meta { flex: 1 1 240px; margin: 0; }
.empresa-topo { display: flex; justify-content: space-between; gap: 14px;
  align-items: flex-start; }
.selo { font-size: 11px; padding: 2px 8px; border-radius: 999px; margin-left: 6px;
  vertical-align: middle; font-family: 'Inter', sans-serif; font-weight: 600; }
.selo.ok { background: #e2f5f0; color: #0d7a63; }
.selo.ruim { background: #fbe9e7; color: #b3392c; }
.separador { border-top: 1px solid var(--linha); margin: 14px 0; }


/* --------------------------------------------------------------- notas */
.balao.nota { background: #FAEEB8; border: 1px dashed #A8862A; color: #574611;
  align-self: center; max-width: 82%; }
.balao.nota .autor { color: #8a7420; }
.etiqueta.espera { background: #fbe9e7; color: #b3392c; }


/* --------------------------------------------------------------- painel */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px; margin-bottom: 16px; }
.kpi { background: #fff; border: 1px solid var(--linha); border-radius: 12px;
  padding: 12px 14px; }
.kpi b { display: block; font-family: 'Sora', sans-serif; font-size: 22px;
  color: var(--navy); }
.kpi span { font-size: 12px; color: var(--tinta-fraca); }
.paineis-graficos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.paineis-graficos .cartao { min-height: 210px; }
.paineis-graficos svg { width: 100%; height: auto; display: block; }
@media (max-width: 900px) { .paineis-graficos { grid-template-columns: 1fr; } }
.legenda { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px;
  font-size: 12px; color: var(--tinta-fraca); }
.legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 5px; }

.ponto-cor { display: inline-block; width: 12px; height: 12px; border-radius: 4px;
  vertical-align: baseline; margin-right: 4px; }

.qr-espera { padding: 34px 16px; color: var(--tinta-fraca); font-size: 14px;
  border: 2px dashed var(--linha); border-radius: 10px; background: var(--creme); }
.estado-conexao .pino { margin-right: 8px; }


/* ------------------------------------------------- sem estouro lateral */
.cartao { max-width: 100%; }
.cartao code { word-break: break-all; white-space: normal; }
.conteudo img, .conteudo svg { max-width: 100%; }
.conteudo table { width: 100%; }
.tabela-rolagem { overflow-x: auto; }
#tabela-envios { display: block; overflow-x: auto; }
.empresa-topo { flex-wrap: wrap; }
.qr-caixa img { max-width: 100%; }
@media (max-width: 720px) {
  .kpis { grid-template-columns: repeat(2, 1fr); }
  .dupla { grid-template-columns: 1fr; }
}

.codigo-pareamento { text-align: center; font-family: var(--mono); font-size: 34px;
  letter-spacing: 8px; background: var(--creme); border: 1px solid var(--linha);
  border-radius: 10px; padding: 14px; margin: 10px 0; color: var(--navy);
  font-weight: 700; }


/* ------------------------------------------------------ entrega/simulador */
.entrega { font-size: 10px; padding: 1px 7px; border-radius: 9px; margin-left: 6px; }
.entrega.ok { background: #edf1f5; color: #55677a; }
.entrega.pendente { background: #fdf3d7; color: #8a6d1a; }
.entrega.erro { background: #fbe9e7; color: #b3392c; font-weight: 700; }
.entrega.simulado { background: #e8e4f5; color: #5b4a9e; }
.faixa-simulador { background: #5b4a9e; color: #fff; text-align: center;
  padding: 7px 10px; font-size: 12.5px; }


/* ------------------------------------------ seguranca: setup, 2FA, licenca */
.centro { text-align: center; }
.cartao-login .meta { font-size: 11.5px; color: var(--suave); margin: 0; }
.cartao-login a { color: var(--teal-esc); text-decoration: none; font-weight: 600; }
.cartao-login a:hover { text-decoration: underline; }

.cartao-setup { width: 420px; max-height: 92vh; overflow-y: auto; }

.passos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px;
  font-size: 12.5px; color: var(--suave); }
.passos li { display: flex; align-items: center; gap: 8px; }
.passos li i { width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 2px solid var(--linha); background: #fff; }
.passos li.atual { color: var(--navy); font-weight: 700; }
.passos li.atual i { border-color: var(--teal); box-shadow: 0 0 0 3px #d8f0ee; }
.passos li.feito { color: var(--ok); }
.passos li.feito i { background: var(--ok); border-color: var(--ok); position: relative; }
.passos li.feito i::after { content: ""; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px; border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(42deg); }

.passo-caixa { display: grid; gap: 10px; border-top: 1px solid var(--linha);
  padding-top: 12px; }
.qr-2fa { text-align: center; background: var(--creme); border: 1px solid var(--linha);
  border-radius: 10px; padding: 10px; }
/* tamanho natural: encolher o QR borra os quadradinhos e a camera nao le */
.qr-2fa img { width: auto; max-width: 100%; image-rendering: pixelated; }
#setup-segredo { font-family: var(--mono); font-size: 12px; word-break: break-all;
  background: var(--creme); padding: 2px 5px; border-radius: 5px; }

.chave { font-family: var(--mono); font-size: 16px; letter-spacing: 2px;
  text-align: center; }
.keys-geradas { margin-top: 12px; display: grid; gap: 6px; }
.keys-geradas .chave-item { font-family: var(--mono); font-size: 15px; letter-spacing: 1px;
  background: var(--creme); border: 1px dashed var(--teal); border-radius: 8px;
  padding: 9px 12px; color: var(--navy); font-weight: 700; }

.selo-licenca { font-size: 11px; padding: 3px 9px; border-radius: 999px;
  background: rgba(255,255,255,.14); color: #E4EEF7; white-space: nowrap; }
.selo-licenca.aviso { background: #FBE9C8; color: #8A6516; font-weight: 700; }
.selo-licenca.ruim { background: #b3392c; color: #fff; font-weight: 700; }
.selo.expirada { background: #fbe9e7; color: #b3392c; }
.selo.disponivel { background: #E8EEF4; color: var(--navy-2); }




/* --------------------------------------------------------------
   Estrutura destes componentes vale nos DOIS temas. A pintura
   especifica do tema escuro continua logo abaixo e sobrepoe esta.
   -------------------------------------------------------------- */
.cartao-login.inclina { transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0); transition: transform .12s linear; }
@media (prefers-reduced-motion: reduce) {
  .cartao-login, .cartao-login.inclina { transform: none; }
}
.opcao .volta { display: flex; align-items: center; gap: 3px; font-size: 11px; margin: 0; color: var(--tx-2); white-space: nowrap; }
.opcao .volta input { width: auto; }
.mover { border: 1px solid var(--borda); background: var(--vidro); color: var(--tx); border-radius: 7px; cursor: pointer; width: 26px; height: 26px; font-size: 10px; line-height: 1; padding: 0; }
.mover:hover:not(:disabled) { border-color: var(--ciano); color: var(--ciano); }
.mover:disabled { opacity: .3; cursor: default; }
.previa-menu { margin-top: 12px; padding: 12px; border-radius: 12px; background: rgba(34,211,238,.07); border: 1px dashed rgba(34,211,238,.4); }
.previa-titulo { font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #7DD3FC; font-weight: 700; }
.balao-previa { margin-top: 8px; padding: 11px 13px; border-radius: 14px 14px 14px 4px; background: linear-gradient(150deg, rgba(139,92,246,.26), rgba(20,28,50,.9)); border: 1px solid rgba(139,92,246,.45); color: var(--tx); font-size: 13px; line-height: 1.55; white-space: normal; }
.balao-previa b { color: #A5F3FC; }
.opcoes-resumo { display: grid; gap: 2px; margin-top: 6px; }
.opcoes-resumo span { font-size: 11px; color: var(--tx-2); }
.opcoes-resumo b { display: inline-grid; place-items: center; min-width: 16px; height: 16px; border-radius: 5px; background: rgba(139,92,246,.28); color: #DDD6FE; font-size: 10px; margin-right: 5px; }
.cartao.numerado { position: relative; padding-left: 46px; }
.cartao.numerado .ordem { position: absolute; left: 12px; top: 14px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--gradiente); color: #fff; font-weight: 800; font-size: 13px; box-shadow: 0 3px 10px rgba(139,92,246,.45); }
@media (max-width: 900px) {
  .opcao select, .opcao .volta, .mover, .remover { grid-column: 2; }
}
.risco-selo { display: grid; place-items: center; min-width: 82px; height: 62px; border-radius: 14px; font-weight: 800; text-transform: uppercase; font-size: 13px; letter-spacing: .06em; }
.risco.ok .risco-selo { background: rgba(163,230,53,.18); color: #BEF264; border: 1px solid rgba(163,230,53,.5); box-shadow: 0 0 26px rgba(163,230,53,.28); }
.risco.fila .risco-selo { background: rgba(251,191,36,.18); color: #FCD34D; border: 1px solid rgba(251,191,36,.5); box-shadow: 0 0 26px rgba(251,191,36,.3); }
.risco.ruim .risco-selo { background: rgba(244,63,94,.2); color: #FDA4AF; border: 1px solid rgba(244,63,94,.55); box-shadow: 0 0 30px rgba(244,63,94,.4); animation: alerta 2.2s ease-in-out infinite; }
.protecoes { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
/* ==========================================================================
   TEMA AURORA - escuro, vidro, neon e 3D
   Fica por ultimo de proposito: repinta superficie (cor, sombra, brilho,
   movimento) sem mexer em grid, tamanho ou posicao. Apagar deste ponto em
   diante devolve o tema claro antigo, inteiro e funcionando.
   ========================================================================== */
:root:not([data-tema="claro"]) {
  /* base */
  --esc-0: #05070F;         /* fundo do espaco */
  --esc-1: #0A0F1F;         /* superficie */
  --esc-2: #111931;         /* superficie elevada */
  --vidro: rgba(255,255,255,.045);
  --vidro-2: rgba(255,255,255,.075);
  --borda: rgba(148,178,255,.14);
  --borda-forte: rgba(148,178,255,.28);
  /* texto */
  --tx: #E9EEFB;
  --tx-2: #9AACCB;
  /* acentos vivos */
  --violeta: #8B5CF6;
  --ciano: #22D3EE;
  --rosa: #F472B6;
  --lima: #A3E635;
  --ambar: #FBBF24;
  --coral: #FB7185;
  --gradiente: linear-gradient(120deg, var(--violeta), var(--ciano) 55%, var(--rosa));
  /* elevacao */
  --sombra-1: 0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.32);
  --sombra-2: 0 8px 22px rgba(0,0,0,.46), 0 20px 50px rgba(0,0,0,.4);
  --sombra-3: 0 20px 50px rgba(0,0,0,.55), 0 50px 100px rgba(0,0,0,.5);
  --neon-v: 0 0 0 1px rgba(139,92,246,.5), 0 6px 22px rgba(139,92,246,.5);
  --neon-c: 0 0 0 1px rgba(34,211,238,.45), 0 6px 22px rgba(34,211,238,.42);
  --curva: cubic-bezier(.22,.61,.36,1);
  /* reescreve os nomes antigos para o tema novo valer em todo canto */
  --navy: #0A0F1F; --navy-2: #111931;
  --teal: var(--ciano); --teal-esc: #0891B2;
  --creme: #0A0F1F; --papel: #0E1526; --linha: rgba(148,178,255,.14);
  --texto: #E9EEFB; --suave: #9AACCB;
  --alerta: var(--coral); --ok: var(--lima);
}

/* ------------------------------------------------------------- o espaco */
:root:not([data-tema="claro"]) body {
  background: var(--esc-0);
  color: var(--tx);
}
:root:not([data-tema="claro"]) body::before {            /* aurora que anda devagar atras de tudo */
  content: ""; position: fixed; inset: -30%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38% 40% at 18% 22%, rgba(139,92,246,.42), transparent 62%),
    radial-gradient(36% 38% at 82% 16%, rgba(34,211,238,.34), transparent 64%),
    radial-gradient(42% 44% at 62% 88%, rgba(244,114,182,.28), transparent 66%),
    radial-gradient(34% 36% at 12% 82%, rgba(163,230,53,.16), transparent 66%);
  filter: blur(38px);
  animation: aurora 26s var(--curva) infinite alternate;
}
:root:not([data-tema="claro"]) body::after {             /* grade tenue, da sensacao de profundidade */
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(148,178,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(148,178,255,.045) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(100% 80% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(100% 80% at 50% 0%, #000 20%, transparent 78%);
}
@keyframes aurora {
  0%   { transform: translate3d(0,0,0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(3%,-2%,0) rotate(6deg) scale(1.12); }
  100% { transform: translate3d(-3%,3%,0) rotate(-5deg) scale(1.06); }
}

:root:not([data-tema="claro"]) *::-webkit-scrollbar-thumb { background: rgba(148,178,255,.26); border: 2px solid transparent;
  background-clip: content-box; }
:root:not([data-tema="claro"]) *::-webkit-scrollbar-thumb:hover { background: var(--violeta); background-clip: content-box; }
:root:not([data-tema="claro"]) * { scrollbar-color: rgba(148,178,255,.3) transparent; }

/* --------------------------------------------------- login / cadastro 3D */
:root:not([data-tema="claro"]) .login {
  background: transparent; perspective: 1600px; overflow: hidden;
  padding: 28px 16px;
}
:root:not([data-tema="claro"]) .login::before {          /* faixa de luz da mesa */
  content: ""; position: absolute; width: 900px; height: 900px; border-radius: 50%;
  /* violeta e ciano, as MESMAS do cartao: repintar isto de verde-teal foi
     erro meu e quebrava a leitura ao trocar de tema */
  background: conic-gradient(from 0deg, transparent, rgba(139,92,246,.50),
              transparent 28%, rgba(34,211,238,.45), transparent 58%,
              rgba(91,75,196,.38), transparent 88%);
  filter: blur(58px); opacity: .55; pointer-events: none;
  animation: girar 24s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

:root:not([data-tema="claro"]) .cartao-login {
  position: relative; z-index: 1;
  background: linear-gradient(165deg, rgba(20,28,50,.88), rgba(10,15,31,.94));
  border: 1px solid var(--borda-forte);
  border-radius: 20px;
  box-shadow: var(--sombra-3), inset 0 1px 0 rgba(255,255,255,.09);
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  transform-style: preserve-3d;
  transition: transform .35s var(--curva), box-shadow .35s var(--curva);
  animation: entrar3d .7s var(--curva) both;
}
@keyframes entrar3d {
  from { opacity: 0; transform: translateY(26px) rotateX(12deg) scale(.94); }
  to   { opacity: 1; transform: none; }
}
:root:not([data-tema="claro"]) .cartao-login::before {   /* borda viva */
  content: ""; position: absolute; inset: -1px; border-radius: 21px; z-index: -1;
  background: var(--gradiente); opacity: .55; filter: blur(9px);
  animation: respirar 5s ease-in-out infinite;
}
@keyframes respirar { 50% { opacity: .95; filter: blur(15px); } }
:root:not([data-tema="claro"]) .cartao-login > * { transform: translateZ(26px); }
:root:not([data-tema="claro"]) .cartao-login .marca { transform: translateZ(50px); }
:root:not([data-tema="claro"]) .cartao-setup { max-height: 92vh; overflow-y: auto; }

/* selo da marca com volume e brilho */
:root:not([data-tema="claro"]) .marca-sinal {
  background: var(--gradiente); background-size: 200% 200%;
  box-shadow: 0 6px 18px rgba(139,92,246,.6), inset 0 1px 0 rgba(255,255,255,.5);
  animation: desliza 6s ease infinite;
}
@keyframes desliza { 50% { background-position: 100% 50%; } }
:root:not([data-tema="claro"]) .marca strong {
  background: linear-gradient(100deg, #fff, #BFD4FF 40%, var(--ciano));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root:not([data-tema="claro"]) .marca small { color: var(--tx-2); }
:root:not([data-tema="claro"]) .lateral .marca strong { color: transparent; }
:root:not([data-tema="claro"]) .lateral .marca small { color: var(--tx-2); }

/* ------------------------------------------------------------ lateral */
:root:not([data-tema="claro"]) .lateral {
  background: linear-gradient(180deg, rgba(16,23,42,.96), rgba(10,15,31,.98));
  border-right: 1px solid var(--borda);
}
:root:not([data-tema="claro"]) .recolher { color: var(--tx-2); }
:root:not([data-tema="claro"]) .recolher:hover { color: #fff; background: var(--vidro-2); }

/* --------------------------------------------------------------- topo */
:root:not([data-tema="claro"]) .topo {
  background: linear-gradient(100deg, rgba(14,21,38,.94), rgba(20,28,50,.86));
  border-bottom: 1px solid var(--borda);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 8px 30px rgba(0,0,0,.5); position: relative; z-index: 5;
}
:root:not([data-tema="claro"]) .topo::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--gradiente); background-size: 200% 100%; opacity: .9;
  animation: desliza 7s linear infinite;
}
:root:not([data-tema="claro"]) .aba {
  color: var(--tx-2); position: relative;
  transition: color .2s var(--curva), transform .2s var(--curva),
              background .2s var(--curva);
}
/* menu na vertical: o item anda para o LADO, nao para cima */
:root:not([data-tema="claro"]) .aba:hover { color: #fff; background: var(--vidro-2); transform: translateX(2px); }
:root:not([data-tema="claro"]) .aba.ativa {
  color: #fff; font-weight: 700; background: var(--vidro-2);
  box-shadow: var(--neon-v);
}
/* e a marca do item aberto vira um risco na esquerda, colado na borda */
:root:not([data-tema="claro"]) .aba.ativa::after {
  content: ""; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--gradiente);
}
:root:not([data-tema="claro"]) .topo-direita .usuario { color: var(--tx-2); }
:root:not([data-tema="claro"]) .pino { color: var(--tx-2); }
:root:not([data-tema="claro"]) .pino i { box-shadow: 0 0 10px currentColor; }
:root:not([data-tema="claro"]) .pino.on i { background: var(--lima); box-shadow: 0 0 12px rgba(163,230,53,.9); }
:root:not([data-tema="claro"]) .pino.off i { background: var(--coral); box-shadow: 0 0 12px rgba(251,113,133,.9); }

/* ---------------------------------------------------------- superficies */
:root:not([data-tema="claro"]) .coluna-lista, :root:not([data-tema="claro"]) .coluna-ficha {
  background: rgba(10,15,31,.62); backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px); border-color: var(--borda);
}
:root:not([data-tema="claro"]) .coluna-conversa { background: rgba(7,11,24,.5); }
:root:not([data-tema="claro"]) .cartao, :root:not([data-tema="claro"]) .bloco, :root:not([data-tema="claro"]) .editor, :root:not([data-tema="claro"]) .kpi, :root:not([data-tema="claro"]) .no, :root:not([data-tema="claro"]) .painel-numeros .numero, :root:not([data-tema="claro"]) .estado-conexao {
  background: linear-gradient(165deg, rgba(23,32,56,.72), rgba(12,18,34,.78));
  border: 1px solid var(--borda); border-radius: 14px;
  box-shadow: var(--sombra-1);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform .3s var(--curva), box-shadow .3s var(--curva),
              border-color .3s var(--curva);
}
:root:not([data-tema="claro"]) .cartao:hover, :root:not([data-tema="claro"]) .bloco:hover, :root:not([data-tema="claro"]) .kpi:hover, :root:not([data-tema="claro"]) .painel-numeros .numero:hover {
  transform: translateY(-4px);
  border-color: var(--borda-forte); box-shadow: var(--sombra-2);
}
:root:not([data-tema="claro"]) .cartao h3, :root:not([data-tema="claro"]) .bloco h3, :root:not([data-tema="claro"]) .cabecalho-secao h2 { color: var(--tx); }
:root:not([data-tema="claro"]) .cabecalho-secao p, :root:not([data-tema="claro"]) .cartao .meta, :root:not([data-tema="claro"]) .meta, :root:not([data-tema="claro"]) .vazio span, :root:not([data-tema="claro"]) .no .chave { color: var(--tx-2); }
:root:not([data-tema="claro"]) .separador { border-color: var(--borda); }

/* -------------------------------------------------- lista de conversas */
:root:not([data-tema="claro"]) .item {
  background: linear-gradient(160deg, rgba(24,33,58,.7), rgba(13,19,36,.75));
  border: 1px solid var(--borda); border-radius: 13px;
  box-shadow: var(--sombra-1);
  transition: transform .22s var(--curva), box-shadow .22s var(--curva),
              border-color .22s var(--curva);
}
:root:not([data-tema="claro"]) .item .nome { color: var(--tx); }
:root:not([data-tema="claro"]) .item .hora, :root:not([data-tema="claro"]) .item .previa { color: var(--tx-2); }
:root:not([data-tema="claro"]) .item:hover {
  transform: translateY(-3px) scale(1.012);
  border-color: var(--borda-forte); box-shadow: var(--sombra-2);
}
:root:not([data-tema="claro"]) .item.ativo {
  border-color: transparent;
  box-shadow: inset 3px 0 0 var(--ciano), var(--neon-c), var(--sombra-2);
  background: linear-gradient(160deg, rgba(34,211,238,.14), rgba(13,19,36,.8));
}
:root:not([data-tema="claro"]) .filtro {
  background: var(--vidro); border-color: var(--borda); color: var(--tx-2);
  transition: all .2s var(--curva);
}
:root:not([data-tema="claro"]) .filtro:hover { color: var(--tx); border-color: var(--borda-forte); transform: translateY(-1px); }
:root:not([data-tema="claro"]) .filtro.ativo {
  background: var(--gradiente); border-color: transparent; color: #fff; font-weight: 700;
  box-shadow: var(--neon-v);
}
:root:not([data-tema="claro"]) .legenda-fila { color: var(--tx-2); }
:root:not([data-tema="claro"]) .legenda-fila i { box-shadow: 0 0 8px currentColor; }

/* --------------------------------------- selos e temperatura de espera */
:root:not([data-tema="claro"]) .selo, :root:not([data-tema="claro"]) .etiqueta {
  border: 1px solid transparent; box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
:root:not([data-tema="claro"]) .selo.bot { background: rgba(56,132,255,.2); color: #93C5FD; border-color: rgba(56,132,255,.4); }
:root:not([data-tema="claro"]) .selo.atendimento { background: rgba(52,211,153,.18); color: #6EE7B7;
  border-color: rgba(52,211,153,.42); box-shadow: 0 0 14px rgba(52,211,153,.28); }
:root:not([data-tema="claro"]) .selo.fila { background: rgba(251,191,36,.18); color: #FCD34D;
  border-color: rgba(251,191,36,.42); }
:root:not([data-tema="claro"]) .selo.finalizada { background: rgba(148,178,255,.1); color: var(--tx-2); }
:root:not([data-tema="claro"]) .selo.ok { background: rgba(163,230,53,.16); color: #BEF264; border-color: rgba(163,230,53,.4); }
:root:not([data-tema="claro"]) .selo.ruim, :root:not([data-tema="claro"]) .selo.expirada { background: rgba(251,113,133,.16); color: #FDA4AF;
  border-color: rgba(251,113,133,.42); }
:root:not([data-tema="claro"]) .selo.disponivel { background: rgba(34,211,238,.14); color: #67E8F9; }
:root:not([data-tema="claro"]) .etiqueta { background: rgba(139,92,246,.16); color: #C4B5FD;
  border-color: rgba(139,92,246,.34); }

:root:not([data-tema="claro"]) .etiqueta.espera.nova { background: rgba(251,191,36,.18); color: #FCD34D;
  border-color: rgba(251,191,36,.45); }
:root:not([data-tema="claro"]) .etiqueta.espera.atencao { background: rgba(251,146,60,.2); color: #FDBA74;
  border-color: rgba(251,146,60,.5); box-shadow: 0 0 14px rgba(251,146,60,.35); }
:root:not([data-tema="claro"]) .etiqueta.espera.critica { background: rgba(244,63,94,.22); color: #FDA4AF;
  border-color: rgba(244,63,94,.55); box-shadow: 0 0 18px rgba(244,63,94,.5); }

:root:not([data-tema="claro"]) .item.espera-nova { border-left: 3px solid var(--ambar); }
:root:not([data-tema="claro"]) .item.espera-atencao { border-left: 3px solid #FB923C;
  box-shadow: -6px 0 22px rgba(251,146,60,.22), var(--sombra-1); }
:root:not([data-tema="claro"]) .item.espera-critica {
  border-left: 3px solid #F43F5E;
  background: linear-gradient(160deg, rgba(244,63,94,.16), rgba(13,19,36,.8));
  box-shadow: -8px 0 28px rgba(244,63,94,.35), var(--sombra-1);
  animation: alerta 2.2s ease-in-out infinite;
}
:root:not([data-tema="claro"]) .item.espera-critica .nome { color: #FDA4AF; }
@keyframes alerta {
  50% { box-shadow: -12px 0 40px rgba(244,63,94,.6), var(--sombra-2); }
}

/* ---------------------------------------------------------- conversa */
:root:not([data-tema="claro"]) .conversa-topo {
  background: rgba(14,21,38,.7); border-bottom: 1px solid var(--borda);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
:root:not([data-tema="claro"]) .conversa-topo strong { color: var(--tx); }
:root:not([data-tema="claro"]) .conversa-topo small { color: var(--tx-2); }
:root:not([data-tema="claro"]) .balao {
  border-radius: 16px; border: 1px solid var(--borda);
  background: linear-gradient(160deg, rgba(28,38,64,.8), rgba(16,23,42,.85));
  color: var(--tx); box-shadow: var(--sombra-1);
  animation: subir .34s var(--curva) both;
}
@keyframes subir { from { opacity: 0; transform: translateY(12px) scale(.98); } }
:root:not([data-tema="claro"]) .balao.bot {
  background: linear-gradient(150deg, rgba(139,92,246,.24), rgba(20,28,50,.85));
  border-color: rgba(139,92,246,.4);
}
:root:not([data-tema="claro"]) .balao.atendente {
  background: linear-gradient(150deg, rgba(34,211,238,.22), rgba(16,30,48,.85));
  border-color: rgba(34,211,238,.4);
}
:root:not([data-tema="claro"]) .balao.nota {
  background: linear-gradient(150deg, rgba(251,191,36,.2), rgba(30,26,16,.85));
  border: 1px dashed rgba(251,191,36,.55); color: #FDE68A;
}
:root:not([data-tema="claro"]) .balao.nota .autor { color: #FCD34D; }
:root:not([data-tema="claro"]) .balao .rodape { color: var(--tx-2); }
:root:not([data-tema="claro"]) .balao.bot .autor { color: #C4B5FD; }
:root:not([data-tema="claro"]) .compositor { border-top: 1px solid var(--borda); background: rgba(10,15,31,.66);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
:root:not([data-tema="claro"]) .rapidas-flutuante { background: var(--esc-2); border: 1px solid var(--borda-forte);
  box-shadow: var(--sombra-2); }
:root:not([data-tema="claro"]) .rapidas-flutuante div:hover { background: var(--vidro-2); }
:root:not([data-tema="claro"]) .rapidas-flutuante code { color: var(--ciano); }
:root:not([data-tema="claro"]) .vazio p { color: var(--tx-2); }

/* -------------------------------------------------------------- botoes */
:root:not([data-tema="claro"]) .botao {
  transition: transform .16s var(--curva), box-shadow .2s var(--curva),
              background .22s var(--curva), color .2s var(--curva);
  position: relative; overflow: hidden;
}
:root:not([data-tema="claro"]) .botao.primario {
  background: var(--gradiente); background-size: 200% 200%; color: #fff;
  box-shadow: var(--neon-v); font-weight: 700; letter-spacing: .01em;
}
:root:not([data-tema="claro"]) .botao.primario:hover {
  background-position: 100% 50%; transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(139,92,246,.7), 0 12px 32px rgba(139,92,246,.62);
}
:root:not([data-tema="claro"]) .botao.primario::after {          /* brilho que atravessa no hover */
  content: ""; position: absolute; inset: 0; transform: translateX(-120%);
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
}
:root:not([data-tema="claro"]) .botao.primario:hover::after { animation: varrer .8s var(--curva); }
@keyframes varrer { to { transform: translateX(120%); } }
:root:not([data-tema="claro"]) .botao.vazado {
  background: var(--vidro); border-color: var(--borda-forte); color: var(--tx);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
:root:not([data-tema="claro"]) .botao.vazado:hover { border-color: var(--ciano); color: var(--ciano);
  transform: translateY(-2px); box-shadow: var(--neon-c); }
:root:not([data-tema="claro"]) .botao.perigo { background: rgba(251,113,133,.12); border-color: rgba(251,113,133,.5);
  color: #FDA4AF; }
:root:not([data-tema="claro"]) .botao.perigo:hover { background: rgba(251,113,133,.22); transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(251,113,133,.4); }
:root:not([data-tema="claro"]) .botao:active { transform: translateY(1px) scale(.99); }
:root:not([data-tema="claro"]) .topo .botao.vazado { border-color: var(--borda-forte); color: #fff; }

/* ---------------------------------------------------------- formularios */
:root:not([data-tema="claro"]) label { color: var(--tx-2); }
:root:not([data-tema="claro"]) input, :root:not([data-tema="claro"]) textarea, :root:not([data-tema="claro"]) select {
  background: rgba(8,13,26,.75); border: 1px solid var(--borda); color: var(--tx);
  border-radius: 10px;
  transition: border-color .2s var(--curva), box-shadow .2s var(--curva),
              background .2s var(--curva);
}
:root:not([data-tema="claro"]) input::placeholder, :root:not([data-tema="claro"]) textarea::placeholder { color: #6B7C9C; }
:root:not([data-tema="claro"]) input:focus, :root:not([data-tema="claro"]) textarea:focus, :root:not([data-tema="claro"]) select:focus {
  outline: none; border-color: var(--ciano); background: rgba(10,17,34,.92);
  box-shadow: 0 0 0 3px rgba(34,211,238,.2), 0 0 20px rgba(34,211,238,.24);
}
:root:not([data-tema="claro"]) select option { background: var(--esc-2); color: var(--tx); }
:root:not([data-tema="claro"]) code, :root:not([data-tema="claro"]) .cartao code { background: rgba(34,211,238,.1); color: #67E8F9;
  border-radius: 6px; padding: 1px 5px; }
:root:not([data-tema="claro"]) .erro { color: #FDA4AF; }

/* ------------------------------------------------------ numeros / KPIs */
:root:not([data-tema="claro"]) .kpi b, :root:not([data-tema="claro"]) .painel-numeros .numero b {
  background: var(--gradiente); -webkit-background-clip: text; background-clip: text;
  color: transparent; font-weight: 800;
}
:root:not([data-tema="claro"]) .kpi span, :root:not([data-tema="claro"]) .painel-numeros .numero span { color: var(--tx-2); }
:root:not([data-tema="claro"]) .painel-numeros .numero, :root:not([data-tema="claro"]) .kpi { position: relative; overflow: hidden; }
:root:not([data-tema="claro"]) .painel-numeros .numero::before, :root:not([data-tema="claro"]) .kpi::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 2px;
  background: var(--gradiente);
}
:root:not([data-tema="claro"]) .painel-numeros .numero.ok b { background: linear-gradient(120deg, #BEF264, #34D399);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
:root:not([data-tema="claro"]) .painel-numeros .numero.fila b { background: linear-gradient(120deg, #FCD34D, #FB923C);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
:root:not([data-tema="claro"]) .painel-numeros .numero.ruim b { background: linear-gradient(120deg, #FDA4AF, #F43F5E);
  -webkit-background-clip: text; background-clip: text; color: transparent; }

/* -------------------------------------------------------------- tabelas */
:root:not([data-tema="claro"]) .tabela td, :root:not([data-tema="claro"]) .tabela th { border-bottom: 1px solid var(--borda); color: var(--tx); }
:root:not([data-tema="claro"]) .tabela th { color: var(--tx-2); letter-spacing: .06em; }
:root:not([data-tema="claro"]) .tabela tr { transition: background .18s var(--curva); }
:root:not([data-tema="claro"]) .tabela tr:hover td { background: var(--vidro); }
:root:not([data-tema="claro"]) .barra .trilho { background: var(--vidro-2); border-radius: 20px; }
:root:not([data-tema="claro"]) .barra .preenche { background: var(--gradiente); border-radius: 20px;
  box-shadow: 0 0 14px rgba(139,92,246,.55); }
:root:not([data-tema="claro"]) .barra .rotulo { color: var(--tx-2); }

/* ---------------------------------------------------------- automacao */
:root:not([data-tema="claro"]) .no { border-left-width: 3px; }
:root:not([data-tema="claro"]) .no .titulo { color: var(--tx); }
:root:not([data-tema="claro"]) .no .tipo { color: var(--tx-2); }
:root:not([data-tema="claro"]) .no:hover { transform: translateY(-3px) translateX(2px); }
:root:not([data-tema="claro"]) .no.ativo { box-shadow: var(--neon-v), var(--sombra-2); border-color: transparent;
  background: linear-gradient(160deg, rgba(139,92,246,.2), rgba(13,19,36,.82)); }
:root:not([data-tema="claro"]) .no[data-tipo="menu"] { border-left-color: var(--violeta); }
:root:not([data-tema="claro"]) .no[data-tipo="pergunta"] { border-left-color: var(--ciano); }
:root:not([data-tema="claro"]) .no[data-tipo="documentos"] { border-left-color: var(--rosa); }
:root:not([data-tema="claro"]) .no[data-tipo="transferir"] { border-left-color: var(--ambar); }
:root:not([data-tema="claro"]) .no[data-tipo="encerrar"] { border-left-color: var(--coral); }
:root:not([data-tema="claro"]) .aviso { background: rgba(34,211,238,.1); border: 1px solid rgba(34,211,238,.3);
  color: #A5F3FC; border-radius: 12px; }
:root:not([data-tema="claro"]) .aviso.ruim { background: rgba(251,113,133,.12); border-color: rgba(251,113,133,.4);
  color: #FDA4AF; }
:root:not([data-tema="claro"]) .entrega.ok { background: rgba(163,230,53,.16); color: #BEF264; }
:root:not([data-tema="claro"]) .entrega.pendente { background: rgba(251,191,36,.16); color: #FCD34D; }
:root:not([data-tema="claro"]) .entrega.erro { background: rgba(244,63,94,.18); color: #FDA4AF; }
:root:not([data-tema="claro"]) .entrega.simulado { background: rgba(148,178,255,.12); color: var(--tx-2); }
:root:not([data-tema="claro"]) .qr-caixa img { border-radius: 14px; box-shadow: var(--sombra-2), 0 0 40px rgba(139,92,246,.4);
  background: #fff; padding: 8px; }
:root:not([data-tema="claro"]) .qr-caixa p { color: var(--tx-2); }
:root:not([data-tema="claro"]) .codigo-pareamento { background: var(--vidro); border: 1px solid var(--borda-forte);
  color: var(--ciano); border-radius: 12px; text-shadow: 0 0 18px rgba(34,211,238,.7); }

/* ---------------------------------------------- entrada dos conteudos */
:root:not([data-tema="claro"]) .painel.ativo > .conteudo { animation: surgir .42s var(--curva) both; }
:root:not([data-tema="claro"]) .painel.ativo .cartao { animation: surgir .5s var(--curva) both; }
:root:not([data-tema="claro"]) .painel.ativo .cartao:nth-child(2) { animation-delay: .06s; }
:root:not([data-tema="claro"]) .painel.ativo .cartao:nth-child(3) { animation-delay: .12s; }
:root:not([data-tema="claro"]) .painel-numeros .numero { animation: surgir .5s var(--curva) both; }
:root:not([data-tema="claro"]) .painel-numeros .numero:nth-child(2) { animation-delay: .05s; }
:root:not([data-tema="claro"]) .painel-numeros .numero:nth-child(3) { animation-delay: .1s; }
:root:not([data-tema="claro"]) .painel-numeros .numero:nth-child(4) { animation-delay: .15s; }
:root:not([data-tema="claro"]) .painel-numeros .numero:nth-child(5) { animation-delay: .2s; }
:root:not([data-tema="claro"]) .painel-numeros .numero:nth-child(6) { animation-delay: .25s; }
@keyframes surgir {
  from { opacity: 0; transform: translateY(14px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* inclinacao 3D do cartao de login, guiada pelo mouse (o JS passa as vars) */
:root:not([data-tema="claro"]) .cartao-login.inclina {
  transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform .12s linear;
}

/* quem prefere menos movimento nao ve animacao nenhuma */
@media (prefers-reduced-motion: reduce) {
  :root:not([data-tema="claro"]) *, :root:not([data-tema="claro"]) *::before, :root:not([data-tema="claro"]) *::after { animation: none !important; transition: none !important; }
  :root:not([data-tema="claro"]) .cartao-login, :root:not([data-tema="claro"]) .cartao-login.inclina { transform: none; }
  :root:not([data-tema="claro"]) body::before { animation: none; }
}

/* --------------------------------- acertos de contraste no tema escuro
   Estas regras vinham do tema claro com cor fixa (branco, creme, navy) e
   ficariam ilegiveis no escuro. Aqui cada uma volta a ter contraste. */
:root:not([data-tema="claro"]) .chave { color: var(--ciano); text-shadow: 0 0 16px rgba(34,211,238,.55); }
:root:not([data-tema="claro"]) .keys-geradas .chave-item {
  background: rgba(34,211,238,.09); border: 1px dashed rgba(34,211,238,.55);
  color: #A5F3FC; text-shadow: 0 0 14px rgba(34,211,238,.4);
}
:root:not([data-tema="claro"]) .estado-conexao { background: rgba(34,211,238,.08); border-color: rgba(34,211,238,.28);
  color: var(--tx); }
:root:not([data-tema="claro"]) .previa-assinatura, :root:not([data-tema="claro"]) .assinatura-previa {
  background: var(--vidro); border: 1px dashed var(--borda-forte); color: var(--tx);
}
:root:not([data-tema="claro"]) .assinatura-previa b, :root:not([data-tema="claro"]) .no .chave, :root:not([data-tema="claro"]) .coletados b { color: var(--ciano); }
:root:not([data-tema="claro"]) .qr-espera { background: var(--vidro); border: 2px dashed var(--borda-forte);
  color: var(--tx-2); }
:root:not([data-tema="claro"]) #setup-segredo { background: rgba(139,92,246,.14); color: #C4B5FD; }
:root:not([data-tema="claro"]) .rapidas-flutuante div { color: var(--tx); }
:root:not([data-tema="claro"]) .remover { background: rgba(251,113,133,.12); border-color: rgba(251,113,133,.4);
  color: #FDA4AF; }
:root:not([data-tema="claro"]) .editor .dica, :root:not([data-tema="claro"]) .coletados span, :root:not([data-tema="claro"]) .item .hora { color: var(--tx-2); }
:root:not([data-tema="claro"]) .vazio p { color: var(--tx); }
:root:not([data-tema="claro"]) .selo-licenca { background: var(--vidro-2); color: var(--tx); border: 1px solid var(--borda); }
:root:not([data-tema="claro"]) .selo-licenca.aviso { background: rgba(251,191,36,.18); color: #FCD34D;
  border-color: rgba(251,191,36,.45); }
:root:not([data-tema="claro"]) .selo-licenca.ruim { background: rgba(244,63,94,.2); color: #FDA4AF;
  border-color: rgba(244,63,94,.5); }
:root:not([data-tema="claro"]) .opcao input, :root:not([data-tema="claro"]) .opcao select { background: rgba(8,13,26,.75); }
:root:not([data-tema="claro"]) .linha-check { color: var(--tx-2); }
:root:not([data-tema="claro"]) .legenda { color: var(--tx-2); }
:root:not([data-tema="claro"]) .mapa { scrollbar-color: rgba(148,178,255,.3) transparent; }

/* ================= LEGIBILIDADE + CENA DE IA NO LOGIN =================
   O tema escuro tinha texto e superficies fracos demais. Aqui o contraste
   sobe (texto mais claro, bordas mais firmes, vidro menos transparente) e
   o fundo do login ganha a cena de rede neural. */
:root:not([data-tema="claro"]) {
  --tx: #F4F7FF;                       /* era #E9EEFB */
  --tx-2: #C2D2EE;                     /* era #9AACCB - principal ganho */
  --vidro: rgba(255,255,255,.07);
  --vidro-2: rgba(255,255,255,.11);
  --borda: rgba(160,190,255,.24);      /* era .14 */
  --borda-forte: rgba(160,190,255,.42);
  --texto: #F4F7FF; --suave: #C2D2EE; --linha: rgba(160,190,255,.24);
  /* sombra preta some em fundo preto: aqui o relevo vem da borda clara, e a
     sombra so afunda a base do cartao de leve */
  --sombra: 0 1px 2px rgba(0,0,0,.35), 0 6px 18px rgba(0,0,0,.28);
  --sombra-alta: 0 10px 28px rgba(0,0,0,.45);
}

/* superficies mais solidas: o texto para de "boiar" no fundo */
:root:not([data-tema="claro"]) .cartao, :root:not([data-tema="claro"]) .bloco, :root:not([data-tema="claro"]) .editor, :root:not([data-tema="claro"]) .kpi, :root:not([data-tema="claro"]) .no, :root:not([data-tema="claro"]) .painel-numeros .numero, :root:not([data-tema="claro"]) .estado-conexao {
  background: linear-gradient(165deg, rgba(30,41,71,.9), rgba(16,23,42,.93));
}
/* o degrau usa --creme, que nao existe no escuro: sem isto o podio sairia
   bege no meio do tema escuro */
:root:not([data-tema="claro"]) .degrau {
  background: linear-gradient(165deg, rgba(30,41,71,.9), rgba(16,23,42,.93));
  border-color: var(--borda);
}
:root:not([data-tema="claro"]) .degrau.vazio { background: none; border: 0; }
:root:not([data-tema="claro"]) .degrau.lugar-1 { border-color: var(--ciano); }
:root:not([data-tema="claro"]) .ordenar-podio .botao.ativo {
  background: var(--violeta); border-color: var(--violeta); color: #fff;
}
:root:not([data-tema="claro"]) .item { background: linear-gradient(160deg, rgba(31,42,72,.9), rgba(17,24,44,.93)); }
:root:not([data-tema="claro"]) .item:hover { background: linear-gradient(160deg, rgba(38,51,86,.95), rgba(20,28,50,.95)); }
:root:not([data-tema="claro"]) .coluna-lista, :root:not([data-tema="claro"]) .coluna-ficha { background: rgba(10,15,31,.82); }
:root:not([data-tema="claro"]) .analista-conversa {
  background: linear-gradient(160deg, rgba(31,42,72,.9), rgba(17,24,44,.93));
  color: var(--tx);
}
:root:not([data-tema="claro"]) .analista-conversa:hover {
  background: linear-gradient(160deg, rgba(38,51,86,.95), rgba(20,28,50,.95));
}
:root:not([data-tema="claro"]) .analista-conversa .quando,
:root:not([data-tema="claro"]) .analista-nome .quantos,
:root:not([data-tema="claro"]) .analista-secao,
:root:not([data-tema="claro"]) .analistas-topo { color: var(--tx-2); }
:root:not([data-tema="claro"]) .analista-nome:hover { background: rgba(255,255,255,.06); }
:root:not([data-tema="claro"]) .chamado {
  background: linear-gradient(165deg, rgba(30,41,71,.98), rgba(16,23,42,.99));
  color: var(--tx);
}
:root:not([data-tema="claro"]) .selo-login.on { background: rgba(30,107,69,.28); color: #8FE0B4; }
:root:not([data-tema="claro"]) .selo-login.off { background: rgba(255,255,255,.09); color: #B4BCCB; }
:root:not([data-tema="claro"]) .selo-login.sem { color: #99A2B4; border-color: rgba(255,255,255,.28); }
:root:not([data-tema="claro"]) .analista-nome strong { color: var(--tx); }
:root:not([data-tema="claro"]) .conversa-topo, :root:not([data-tema="claro"]) .compositor { background: rgba(12,18,34,.9); }
:root:not([data-tema="claro"]) .balao { background: linear-gradient(160deg, rgba(36,48,80,.95), rgba(22,30,54,.96)); }
:root:not([data-tema="claro"]) input, :root:not([data-tema="claro"]) textarea, :root:not([data-tema="claro"]) select { background: rgba(6,10,22,.9); }
:root:not([data-tema="claro"]) .tabela td { color: var(--tx); }
:root:not([data-tema="claro"]) .cabecalho-secao p, :root:not([data-tema="claro"]) .meta, :root:not([data-tema="claro"]) .cartao .meta { color: var(--tx-2); }
:root:not([data-tema="claro"]) .item .previa, :root:not([data-tema="claro"]) .item .hora, :root:not([data-tema="claro"]) label, :root:not([data-tema="claro"]) .legenda-fila { color: var(--tx-2); }
:root:not([data-tema="claro"]) .aba { color: #CFDCF5; }

/* titulos com um pouco mais de presenca */
:root:not([data-tema="claro"]) .cabecalho-secao h2 { font-size: 20px; letter-spacing: -.01em; }
:root:not([data-tema="claro"]) .cartao h3, :root:not([data-tema="claro"]) .bloco h3 { letter-spacing: .01em; }

/* -------------------------------------- o grafico de mercado no login */
:root:not([data-tema="claro"]) .login::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("/fundo-login.svg") center center / cover no-repeat;
  opacity: .95;
  /* escurece as pontas para o cartao no meio continuar destacado */
  mask-image: radial-gradient(120% 100% at 50% 50%, #000 35%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.25) 100%);
  -webkit-mask-image: radial-gradient(120% 100% at 50% 50%, #000 35%, rgba(0,0,0,.55) 70%, rgba(0,0,0,.25) 100%);
  animation: aproximar 40s var(--curva) infinite alternate;
}
@keyframes aproximar {
  from { transform: scale(1) translateY(0); }
  to   { transform: scale(1.07) translateY(-10px); }
}
/* o anel girando fica mais discreto para nao competir com a cena */
:root:not([data-tema="claro"]) .login::before { opacity: .3; }

/* o cartao de login precisa se destacar da cena: mais solido e com sombra */
:root:not([data-tema="claro"]) .cartao-login {
  background: linear-gradient(165deg, rgba(17,25,47,.96), rgba(8,13,27,.985));
  border-color: rgba(160,190,255,.5);
  box-shadow: var(--sombra-3), 0 0 90px rgba(139,92,246,.4),
              inset 0 1px 0 rgba(255,255,255,.14);
}
:root:not([data-tema="claro"]) .cartao-login .meta, :root:not([data-tema="claro"]) .cartao-login label { color: #CBD8F2; }
:root:not([data-tema="claro"]) .cartao-login a { color: #7DD3FC; text-decoration: none; font-weight: 600; }
:root:not([data-tema="claro"]) .cartao-login a:hover { color: #A5F3FC; text-decoration: underline; }

/* ================= CORRECAO DE LEGIBILIDADE DO LOGIN =================
   O brilho gradiente ficava ATRAS de um cartao translucido e vazava por
   cima do texto - dai a sensacao de "lavado". Agora o cartao e solido e o
   brilho vira sombra externa, que nunca passa por cima do conteudo. */
:root:not([data-tema="claro"]) .cartao-login::before { display: none; }        /* nada de gradiente por tras */

:root:not([data-tema="claro"]) .cartao-login {
  background: #0C1425;                          /* solido: sem vazamento */
  border: 1px solid rgba(160,190,255,.34);
  box-shadow:
    0 0 0 1px rgba(139,92,246,.28),
    0 26px 60px rgba(0,0,0,.72),
    0 0 70px rgba(34,211,238,.2);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
:root:not([data-tema="claro"]) .cartao-login::after {                          /* so um fio de luz no topo */
  content: ""; position: absolute; top: 0; left: 18px; right: 18px; height: 2px;
  border-radius: 2px; background: var(--gradiente); opacity: .9;
}

/* texto do login com contraste alto de verdade */
:root:not([data-tema="claro"]) .cartao-login label { color: #D7E3FA; font-size: 12.5px; font-weight: 700;
  letter-spacing: .02em; }
:root:not([data-tema="claro"]) .cartao-login .meta { color: #B9CAE8; }
:root:not([data-tema="claro"]) .cartao-login .marca small { color: #9FB4D8; }
:root:not([data-tema="claro"]) .cartao-login strong { font-size: 16px; }
:root:not([data-tema="claro"]) .cartao-login a { color: #67E8F9; }
:root:not([data-tema="claro"]) .cartao-login a:hover { color: #A5F3FC; }
:root:not([data-tema="claro"]) .cartao-login input, :root:not([data-tema="claro"]) .cartao-login select, :root:not([data-tema="claro"]) .cartao-login textarea {
  background: #060A16; border: 1px solid rgba(160,190,255,.3); color: #F4F7FF;
  font-size: 14.5px;
}
:root:not([data-tema="claro"]) .cartao-login input:focus {
  border-color: #38E8FF; box-shadow: 0 0 0 3px rgba(56,232,255,.24);
}
:root:not([data-tema="claro"]) .cartao-login .erro { color: #FCA5A5; font-weight: 600; }
:root:not([data-tema="claro"]) .cartao-login .botao.primario { font-size: 14px; padding: 11px 15px; }

/* a cena atras fica mais calma perto do centro, para o cartao respirar */
:root:not([data-tema="claro"]) .login::after {
  opacity: .8;
  mask-image: radial-gradient(closest-side circle at 50% 50%,
              rgba(0,0,0,.18) 0%, rgba(0,0,0,.5) 26%, #000 62%);
  -webkit-mask-image: radial-gradient(closest-side circle at 50% 50%,
              rgba(0,0,0,.18) 0%, rgba(0,0,0,.5) 26%, #000 62%);
}
:root:not([data-tema="claro"]) .login::before { opacity: .16; }

/* ========== O GRAFICO DE MERCADO TAMBEM DENTRO DO SISTEMA ==========
   O mesmo grafico do login vai para o fundo das telas de trabalho, bem
   discreto: da a identidade sem atrapalhar a leitura, porque as colunas
   e cartoes continuam solidos por cima. */
:root:not([data-tema="claro"]) #app::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("/fundo-login.svg") center center / cover no-repeat;
  opacity: .22;
  animation: derivar 90s var(--curva) infinite alternate;
}
@keyframes derivar {
  from { transform: scale(1.04) translate(0, 0); }
  to   { transform: scale(1.12) translate(-1.5%, -1%); }
}

/* o miolo dos paineis fica levemente translucido para a cena aparecer */
:root:not([data-tema="claro"]) .painel { background: rgba(5,7,15,.55); }
:root:not([data-tema="claro"]) #painel-atendimentos.ativo { background: transparent; }
:root:not([data-tema="claro"]) .coluna-conversa { background: rgba(7,11,24,.62); }
:root:not([data-tema="claro"]) .mensagens { background: transparent; }

/* faixa de luz no topo de cada aba de conteudo */
:root:not([data-tema="claro"]) .conteudo > .cabecalho-secao:first-child { position: relative; }
:root:not([data-tema="claro"]) .conteudo > .cabecalho-secao:first-child::before {
  content: ""; position: absolute; left: -28px; top: -10px; width: 120px; height: 3px;
  border-radius: 3px; background: var(--gradiente); opacity: .85;
}

/* ------------- acertos finos de encaixe -------------- */
/* a legenda cabia em duas linhas: aperta o espacamento e o texto */
:root:not([data-tema="claro"]) .legenda-fila { gap: 7px; padding: 0 10px 7px; font-size: 9.5px; }
:root:not([data-tema="claro"]) .legenda-fila i { width: 7px; height: 7px; }

/* as abas cortavam "Equipe" em telas de 1440: cabem todas agora */
:root:not([data-tema="claro"]) .topo { gap: 10px; padding: 0 12px; }
:root:not([data-tema="claro"]) .aba { padding: 7px 9px; font-size: 12.5px; }
:root:not([data-tema="claro"]) .topo-direita { gap: 8px; }
:root:not([data-tema="claro"]) .topo-direita .usuario { font-size: 11.5px; }
@media (max-width: 1180px) {
  :root:not([data-tema="claro"]) .aba { padding: 7px 7px; font-size: 12px; }
  :root:not([data-tema="claro"]) .topo-direita .usuario { display: none; }
}

/* ============ EDICAO SIMPLES: NUMERACAO E PREVIA DO MENU ============ */
/* cada opcao do menu numa linha: numero, texto, destino e os controles */
:root:not([data-tema="claro"]) .opcao {
  display: grid;
  grid-template-columns: 30px 1fr 150px auto auto auto auto;
  gap: 6px; align-items: center; margin-bottom: 6px;
}
:root:not([data-tema="claro"]) .opcao .numero {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  background: var(--gradiente); color: #fff; font-weight: 800; font-size: 13px;
  box-shadow: 0 3px 10px rgba(139,92,246,.45);
}
:root:not([data-tema="claro"]) .opcao .volta {
  display: flex; align-items: center; gap: 3px; font-size: 11px; margin: 0;
  color: var(--tx-2); white-space: nowrap;
}
:root:not([data-tema="claro"]) .opcao .volta input { width: auto; }
:root:not([data-tema="claro"]) .mover {
  border: 1px solid var(--borda); background: var(--vidro); color: var(--tx);
  border-radius: 7px; cursor: pointer; width: 26px; height: 26px; font-size: 10px;
  line-height: 1; padding: 0;
}
:root:not([data-tema="claro"]) .mover:hover:not(:disabled) { border-color: var(--ciano); color: var(--ciano); }
:root:not([data-tema="claro"]) .mover:disabled { opacity: .3; cursor: default; }
:root:not([data-tema="claro"]) .remover { width: 26px; height: 26px; padding: 0; font-size: 15px; line-height: 1; }

/* previa: o menu exatamente como chega no WhatsApp */
:root:not([data-tema="claro"]) .previa-menu {
  margin-top: 12px; padding: 12px; border-radius: 12px;
  background: rgba(34,211,238,.07); border: 1px dashed rgba(34,211,238,.4);
}
:root:not([data-tema="claro"]) .previa-titulo {
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #7DD3FC;
  font-weight: 700;
}
:root:not([data-tema="claro"]) .balao-previa {
  margin-top: 8px; padding: 11px 13px; border-radius: 14px 14px 14px 4px;
  background: linear-gradient(150deg, rgba(139,92,246,.26), rgba(20,28,50,.9));
  border: 1px solid rgba(139,92,246,.45); color: var(--tx);
  font-size: 13px; line-height: 1.55; white-space: normal;
}
:root:not([data-tema="claro"]) .balao-previa b { color: #A5F3FC; }
:root:not([data-tema="claro"]) .dica { font-size: 11.5px; color: var(--tx-2); margin: 2px 0 8px; line-height: 1.5; }

/* numeros nas opcoes dentro do mapa de blocos */
:root:not([data-tema="claro"]) .opcoes-resumo { display: grid; gap: 2px; margin-top: 6px; }
:root:not([data-tema="claro"]) .opcoes-resumo span { font-size: 11px; color: var(--tx-2); }
:root:not([data-tema="claro"]) .opcoes-resumo b {
  display: inline-grid; place-items: center; min-width: 16px; height: 16px;
  border-radius: 5px; background: rgba(139,92,246,.28); color: #DDD6FE;
  font-size: 10px; margin-right: 5px;
}

/* cartoes numerados (respostas automaticas e rapidas) */
:root:not([data-tema="claro"]) .cartao.numerado { position: relative; padding-left: 46px; }
:root:not([data-tema="claro"]) .cartao.numerado .ordem {
  position: absolute; left: 12px; top: 14px;
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  background: var(--gradiente); color: #fff; font-weight: 800; font-size: 13px;
  box-shadow: 0 3px 10px rgba(139,92,246,.45);
}

@media (max-width: 900px) {
  :root:not([data-tema="claro"]) .opcao { grid-template-columns: 26px 1fr; grid-auto-flow: row; }
  :root:not([data-tema="claro"]) .opcao select, :root:not([data-tema="claro"]) .opcao .volta, :root:not([data-tema="claro"]) .mover, :root:not([data-tema="claro"]) .remover { grid-column: 2; }
}

/* ================= ESCUDO ANTI-BANIMENTO ================= */
:root:not([data-tema="claro"]) .risco { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
:root:not([data-tema="claro"]) .risco-selo {
  display: grid; place-items: center; min-width: 82px; height: 62px; border-radius: 14px;
  font-weight: 800; text-transform: uppercase; font-size: 13px; letter-spacing: .06em;
}
:root:not([data-tema="claro"]) .risco.ok .risco-selo { background: rgba(163,230,53,.18); color: #BEF264;
  border: 1px solid rgba(163,230,53,.5); box-shadow: 0 0 26px rgba(163,230,53,.28); }
:root:not([data-tema="claro"]) .risco.fila .risco-selo { background: rgba(251,191,36,.18); color: #FCD34D;
  border: 1px solid rgba(251,191,36,.5); box-shadow: 0 0 26px rgba(251,191,36,.3); }
:root:not([data-tema="claro"]) .risco.ruim .risco-selo { background: rgba(244,63,94,.2); color: #FDA4AF;
  border: 1px solid rgba(244,63,94,.55); box-shadow: 0 0 30px rgba(244,63,94,.4);
  animation: alerta 2.2s ease-in-out infinite; }
:root:not([data-tema="claro"]) .risco b { font-size: 15px; }
:root:not([data-tema="claro"]) .risco p { margin: 3px 0 0; }

:root:not([data-tema="claro"]) .protecoes { display: grid; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
:root:not([data-tema="claro"]) .protecao {
  display: flex; gap: 9px; align-items: flex-start; padding: 9px 11px; border-radius: 11px;
  background: var(--vidro); border: 1px solid var(--borda);
}
:root:not([data-tema="claro"]) .protecao i {
  width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: none;
}
:root:not([data-tema="claro"]) .protecao.on i { background: #A3E635; box-shadow: 0 0 10px rgba(163,230,53,.9); }
:root:not([data-tema="claro"]) .protecao.off i { background: #6B7C9C; }
:root:not([data-tema="claro"]) .protecao.off { opacity: .62; }
:root:not([data-tema="claro"]) .protecao b { display: block; font-size: 12.5px; color: var(--tx); }
:root:not([data-tema="claro"]) .protecao span { font-size: 11px; color: var(--tx-2); }

/* ------------------------------------------------ anexos na conversa */
:root:not([data-tema="claro"]) .balao .anexo-foto { display: block; margin-bottom: 6px; }
:root:not([data-tema="claro"]) .balao .anexo-foto img { max-width: 260px; max-height: 320px; border-radius: 10px;
  display: block; }
:root:not([data-tema="claro"]) .balao .anexo-video { max-width: 280px; border-radius: 10px; display: block;
  margin-bottom: 6px; }
:root:not([data-tema="claro"]) .balao audio { width: 250px; max-width: 100%; display: block; margin-bottom: 6px; }
:root:not([data-tema="claro"]) .balao .anexo-doc { display: inline-block; margin-bottom: 6px; padding: 8px 12px;
  border: 1px dashed currentColor; border-radius: 10px; text-decoration: none;
  font-size: 12.5px; opacity: .95; }
:root:not([data-tema="claro"]) .balao .transcricao { font-size: 12.5px; line-height: 1.45; margin-bottom: 4px;
  padding: 7px 9px; border-radius: 9px; background: rgba(127,127,127,.14); }
:root:not([data-tema="claro"]) .balao .transcricao.pendente { opacity: .65; font-style: italic; }

/* ------------------------------------------------ corretor automatico */
:root:not([data-tema="claro"]) .linha-corretor { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 6px; font-size: 11.5px; }
:root:not([data-tema="claro"]) .linha-corretor .linha-check { font-size: 11.5px; opacity: .85; }
:root:not([data-tema="claro"]) .corretor-aviso { font-size: 11.5px; opacity: .8; font-style: italic;
  padding: 2px 8px; border-radius: 8px; background: rgba(127,127,127,.16); }

/* ==================================================================
   PAINEL - graficos e tempo real
   Cores das series: slots 1-3 do palette validado (blue/orange/aqua),
   nos passos do tema escuro, que e o tema deste sistema.
   ================================================================== */
:root:not([data-tema="claro"]) .paineis-graficos .cartao.larga { grid-column: 1 / -1; }
:root:not([data-tema="claro"]) .viz, :root:not([data-tema="claro"]) [id^="graf-"] { position: relative; }
:root:not([data-tema="claro"]) [id^="graf-"] {
  --serie-1: #3987e5; --serie-2: #d95926; --serie-3: #199e70;
  --viz-fundo: #0E1526;
}
:root:not([data-tema="claro"]) .viz-svg { width: 100%; height: auto; display: block; overflow: visible; }
:root:not([data-tema="claro"]) .viz-grade { stroke: rgba(148,178,255,.12); stroke-width: 1; }
:root:not([data-tema="claro"]) .viz-mira { stroke: rgba(148,178,255,.35); stroke-width: 1; stroke-dasharray: 3 3; }
:root:not([data-tema="claro"]) .viz-eixo { font-size: 9.5px; fill: var(--suave); }
:root:not([data-tema="claro"]) .viz-rotulo { font-size: 11px; fill: var(--texto); }
:root:not([data-tema="claro"]) .viz-valor { font-size: 10.5px; fill: var(--texto); font-weight: 600; }
:root:not([data-tema="claro"]) .viz-svg [data-dica] { cursor: default; }
:root:not([data-tema="claro"]) .viz-svg rect[data-dica]:hover { filter: brightness(1.15); }
:root:not([data-tema="claro"]) .viz-dica {
  position: absolute; z-index: 5; pointer-events: none;
  background: rgba(10,15,31,.96); border: 1px solid var(--borda-forte);
  border-radius: 10px; padding: 7px 10px; font-size: 11.5px; line-height: 1.6;
  box-shadow: 0 10px 26px rgba(0,0,0,.5); max-width: 240px;
}
:root:not([data-tema="claro"]) .viz-chave { display: block; }
:root:not([data-tema="claro"]) .viz-chave i { display: inline-block; width: 8px; height: 8px; border-radius: 3px;
  margin-right: 5px; }
:root:not([data-tema="claro"]) .tabela-vix { width: 100%; border-collapse: collapse; font-size: 12px; }
:root:not([data-tema="claro"]) .tabela-vix th { text-align: left; font-weight: 600; color: var(--suave);
  padding: 5px 8px 5px 0; border-bottom: 1px solid var(--linha); font-size: 11px; }
:root:not([data-tema="claro"]) .tabela-vix td { padding: 6px 8px 6px 0; border-bottom: 1px solid rgba(148,178,255,.07); }

/* ------------------------------------------------------- tempo real */
:root:not([data-tema="claro"]) .tempo-real { margin-bottom: 14px; }
:root:not([data-tema="claro"]) .cabeca-tempo-real { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px; }
:root:not([data-tema="claro"]) .cabeca-tempo-real h3 { margin: 0; display: flex; align-items: center; gap: 8px; }
:root:not([data-tema="claro"]) .cabeca-tempo-real .meta { margin-left: auto; font-size: 11px; }
:root:not([data-tema="claro"]) .pulsa { width: 9px; height: 9px; border-radius: 50%; background: var(--lima, #A3E635);
  box-shadow: 0 0 0 0 rgba(163,230,53,.6); animation: pulsar 2s infinite; }
@keyframes pulsar {
  70% { box-shadow: 0 0 0 9px rgba(163,230,53,0); }
  100% { box-shadow: 0 0 0 0 rgba(163,230,53,0); }
}
:root:not([data-tema="claro"]) .kpis-vivo { margin-bottom: 12px; }
:root:not([data-tema="claro"]) .colunas-tempo-real { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
:root:not([data-tema="claro"]) .colunas-tempo-real h4 { margin: 0 0 8px; font-size: 12px; color: var(--suave);
  text-transform: uppercase; letter-spacing: .06em; }
:root:not([data-tema="claro"]) .lista-vivo { display: grid; gap: 6px; max-height: 260px; overflow: auto; }
:root:not([data-tema="claro"]) .item-vivo { display: flex; align-items: center; gap: 10px; justify-content: space-between;
  padding: 8px 10px; border-radius: 10px; background: var(--vidro);
  border: 1px solid var(--borda); font-size: 12px; }
:root:not([data-tema="claro"]) .item-vivo b { display: block; }
:root:not([data-tema="claro"]) .item-vivo .meta { font-size: 10.5px; }
:root:not([data-tema="claro"]) .item-vivo.atencao { border-color: rgba(251,191,36,.45); }
:root:not([data-tema="claro"]) .item-vivo.critico { border-color: rgba(244,63,94,.5); }
:root:not([data-tema="claro"]) .item-vivo.apagado { opacity: .55; }
:root:not([data-tema="claro"]) .tempo-vivo { font-family: var(--mono); font-size: 11.5px; white-space: nowrap; }
:root:not([data-tema="claro"]) .ponto { display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  margin-right: 6px; }
:root:not([data-tema="claro"]) .ponto.on { background: #A3E635; }
:root:not([data-tema="claro"]) .ponto.off { background: #64748B; }
@media (max-width: 900px) {
  :root:not([data-tema="claro"]) .colunas-tempo-real { grid-template-columns: 1fr; }
}

/* ==================================================================
   TEMA CLARO - o segundo padrao de cor.
   A base do arquivo (antes do tema aurora) ja e clara; aqui entram so
   os componentes criados depois dela, que nasceram dentro do bloco
   escuro e por isso ficariam sem estilo no claro.
   ================================================================== */
:root[data-tema="claro"] {
  color-scheme: light;
  /* nomes de variavel que nasceram no tema escuro, agora com valor claro -
     assim as regras compartilhadas pelos dois temas resolvem certo aqui */
  /* tons frios: o fundo do tema claro deixou de ser bege (ver bloco adiante) */
  --esc-0: #DDE4EE; --esc-1: #FFFFFF; --esc-2: #EDF1F7;
  --vidro: #FFFFFF; --vidro-2: #EDF1F7;
  --borda: rgba(11,42,74,.14); --borda-forte: rgba(11,42,74,.26);
  --tx: #16283C; --tx-2: #5A6B80;
  --ciano: #0E7490; --violeta: #5B4BC4; --lima: #16A34A; --coral: #DC2626;
  --sombra-2: 0 6px 18px rgba(11,42,74,.10);
  --sombra-3: 0 14px 34px rgba(11,42,74,.14);
  --gradiente: linear-gradient(120deg, #2a78d6, #1baf7a);
}
:root[data-tema="claro"] body { background: var(--creme); }

/* graficos: mesmos slots do palette, nos passos do tema claro */
:root[data-tema="claro"] [id^="graf-"] {
  --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a;
  --viz-fundo: #FFFFFF;
}
:root[data-tema="claro"] .viz-grade { stroke: rgba(11,42,74,.12); }
:root[data-tema="claro"] .viz-mira { stroke: rgba(11,42,74,.35); }
:root[data-tema="claro"] .viz-eixo { fill: #6B7280; }
:root[data-tema="claro"] .viz-rotulo,
:root[data-tema="claro"] .viz-valor { fill: #1F2937; }
:root[data-tema="claro"] .viz-dica {
  background: #FFFFFF; border: 1px solid var(--linha); color: var(--texto);
  box-shadow: 0 10px 26px rgba(11,42,74,.18);
}
:root[data-tema="claro"] .tabela-vix th { border-bottom-color: var(--linha); }
:root[data-tema="claro"] .tabela-vix td { border-bottom: 1px solid rgba(11,42,74,.08); }

/* tempo real */
:root[data-tema="claro"] .item-vivo {
  background: #FFFFFF; border: 1px solid var(--linha);
}
:root[data-tema="claro"] .item-vivo.atencao { border-color: #F59E0B; }
:root[data-tema="claro"] .item-vivo.critico { border-color: #DC2626; }
:root[data-tema="claro"] .pulsa { background: #16A34A;
  box-shadow: 0 0 0 0 rgba(22,163,74,.5); }
:root[data-tema="claro"] .ponto.on { background: #16A34A; }
:root[data-tema="claro"] .ponto.off { background: #9CA3AF; }
:root[data-tema="claro"] .colunas-tempo-real h4 { color: var(--suave); }

/* anexos e corretor */
:root[data-tema="claro"] .balao .transcricao { background: rgba(11,42,74,.07); }
:root[data-tema="claro"] .corretor-aviso { background: rgba(11,42,74,.08); }
@media (max-width: 900px) {
  :root[data-tema="claro"] .colunas-tempo-real { grid-template-columns: 1fr; }
  :root[data-tema="claro"] .paineis-graficos { grid-template-columns: 1fr; }
}

/* horario de atendimento */
.bloco-horario { border: 1px solid var(--linha); border-radius: 12px; padding: 12px;
  display: grid; gap: 8px; }
.bloco-horario h4 { margin: 0; font-size: 13px; }
.dias-semana { display: flex; gap: 10px; flex-wrap: wrap; }
.dias-semana .linha-check { font-size: 12px; }

/* colegas chamados para o atendimento */
.participantes-chat { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 11.5px; color: var(--suave); padding: 0 14px 6px; }
.participantes-chat:empty { display: none; }
.convidado { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 9px;
  border-radius: 999px; border: 1px solid var(--linha); font-size: 11px; }
.convidado .tirar { background: none; border: 0; color: inherit; cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0 4px; opacity: .7; }
.convidado .tirar:hover { opacity: 1; color: var(--alerta, #DC2626); }

/* ==================================================================
   TEMA CLARO - mesma alma do escuro, em luz, com CONTRASTE.
   As animacoes sao as mesmas (@keyframes sao globais); o que muda e a
   paleta. Regra que guiou os valores: fundo com definicao (nao branco
   lavado), cartao solido, texto escuro de verdade e os efeitos em
   segundo plano, discretos, sem competir com o conteudo.
   ================================================================== */
:root[data-tema="claro"] {
  /* Medido: com #EDF1F7 de fundo o cartao branco ficava a 1,13:1 — praticamente
     o mesmo tom, e a tela inteira lia como uma chapa so. O fundo desceu para
     dar profundidade e a divisoria subiu para realmente delimitar. */
  --creme: #DDE4EE;          /* fundo geral: 1,28:1 sob o cartao branco */
  --papel: #FFFFFF;          /* superficie dos cartoes */
  --linha: #AEBCCE;          /* divisoria: 1,93:1 no branco (era 1,40:1) */
  --texto: #0F1F33;          /* tinta principal: 16,6:1 no branco */
  --suave: #4E6076;          /* tinta secundaria: 7:1 no branco */
  --navy: #0B2A4A; --navy-2: #123A63;
  --tx: #0F1F33; --tx-2: #4E6076;
  /* borda-forte fecha os 3:1 que a WCAG 1.4.11 pede para contorno de
     componente (campos, botoes) — antes estava em 1,26:1 */
  --borda: #AEBCCE; --borda-forte: #8695AB;
  --vidro: #FFFFFF; --vidro-2: #EDF1F7;
  --ciano: #0E7490; --violeta: #5B4BC4; --lima: #15803D; --coral: #C2410C;
  --alerta: #C2410C; --ok: #15803D;
  --sombra-2: 0 6px 18px rgba(15,31,51,.10);
  --sombra-3: 0 16px 38px rgba(15,31,51,.16);
  --gradiente: linear-gradient(120deg, #5B4BC4, #0E7490);
  /* No claro o relevo do cartao vinha quase so da borda. Com a sombra mais
     presente, o branco se descola do fundo sem precisar de contorno grosso. */
  --sombra: 0 1px 2px rgba(15,31,51,.06), 0 4px 14px rgba(15,31,51,.10);
  --sombra-alta: 0 2px 6px rgba(15,31,51,.10), 0 14px 34px rgba(15,31,51,.16);
}
:root[data-tema="claro"] body { background: var(--creme); color: var(--texto); }

/* efeitos de fundo: presentes, porem discretos - o conteudo vem primeiro */
:root[data-tema="claro"] body::before {
  content: ""; position: fixed; inset: -30%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38% 40% at 18% 22%, rgba(91,75,196,.16), transparent 62%),
    radial-gradient(36% 38% at 82% 16%, rgba(14,116,144,.14), transparent 64%),
    radial-gradient(42% 44% at 62% 88%, rgba(219,112,147,.10), transparent 66%);
  filter: blur(44px);
  animation: aurora 26s cubic-bezier(.22,.61,.36,1) infinite alternate;
}
:root[data-tema="claro"] body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(15,31,51,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,31,51,.055) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(100% 80% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(100% 80% at 50% 0%, #000 20%, transparent 78%);
}

/* ------------------------------------------------------ login claro */
/* MESA DE OPERACOES. Antes era `transparent`, caindo no fundo quase branco do
   body: o cartao branco nao tinha de onde se destacar e a tela lia como uma
   chapa. Agora o login tem fundo proprio, escuro e da marca — o cartao branco
   passa a flutuar com contraste de sobra, e o tema do sistema continua claro
   assim que a pessoa entra. */
/* MESA DE OPERACOES.
   Duas correcoes sobre a primeira versao: as cores eram verde-teal enquanto o
   cartao usa violeta -> ciano (#5B4BC4 -> #0E7490) no fio do topo e nos halos,
   entao fundo e cartao pareciam de projetos diferentes; e o fundo era uma
   chapa lisa, que le como "sem vida". Agora a paleta e a MESMA do cartao e ha
   tres camadas de profundidade: gradiente, grao e luz que respira. */
:root[data-tema="claro"] .login {
  background:
    /* grao finissimo: e ele que tira o aspecto de plastico do degrade */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"),
    radial-gradient(1100px 720px at 82% 6%,  rgba(34,211,238,.22),  transparent 60%),
    radial-gradient(1000px 780px at 10% 96%, rgba(91,75,196,.30),   transparent 62%),
    radial-gradient(760px 520px at 50% 52%,  rgba(14,116,144,.16),  transparent 70%),
    linear-gradient(158deg, #14245C 0%, #0E2148 34%, #0B1B37 68%, #070F24 100%);
  background-blend-mode: overlay, normal, normal, normal, normal;
  perspective: 1600px; overflow: hidden; padding: 28px 16px;
}
/* duas luzes que respiram, uma violeta e uma ciano, em ritmos diferentes:
   e o descompasso entre elas que faz a tela parecer viva */
:root[data-tema="claro"] .login::before {
  content: ""; position: absolute; inset: -35%;
  background:
    radial-gradient(closest-side, rgba(91,75,196,.55), transparent 70%) 18% 78% / 62% 62% no-repeat,
    radial-gradient(closest-side, rgba(34,211,238,.42), transparent 70%) 84% 14% / 54% 54% no-repeat;
  filter: blur(50px); pointer-events: none;
  animation: respirar 22s ease-in-out infinite alternate;
}
@keyframes respirar {
  from { transform: translate3d(-4%, -3%, 0) scale(1);    opacity: .78; }
  to   { transform: translate3d(4%, 3%, 0)  scale(1.14); opacity: 1; }
}
/* o conteudo fica acima das duas camadas de luz */
:root[data-tema="claro"] .login > * { position: relative; z-index: 1; }
:root[data-tema="claro"] .login::before { z-index: 0; }
/* O grafico de mercado ao fundo. Sobe de .38 para .55: sobre o fundo escuro
   ele nao compete mais com o texto, entao pode aparecer de verdade. */
:root[data-tema="claro"] .login::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("/fundo-login.svg") center center / cover no-repeat;
  opacity: .55;
  mask-image: radial-gradient(130% 105% at 50% 50%, rgba(0,0,0,.30) 20%,
              #000 58%, rgba(0,0,0,.75) 100%);
  -webkit-mask-image: radial-gradient(130% 105% at 50% 50%, rgba(0,0,0,.30) 20%,
              #000 58%, rgba(0,0,0,.75) 100%);
  animation: aproximar 40s cubic-bezier(.22,.61,.36,1) infinite alternate;
}
/* o botao de tema fica sobre fundo escuro nesta tela, nos dois temas */
:root[data-tema="claro"] #botao-tema-login { color: #DCE9F9; border-color: rgba(220,233,249,.35); }
:root[data-tema="claro"] #botao-tema-login:hover { border-color: #7BE8C4; color: #7BE8C4; }
/* Cartao SOLIDO. O brilho vem de box-shadow, e nao de um ::before com
   z-index negativo: dentro de um contexto de empilhamento aquele brilho
   era pintado POR CIMA do cartao e lavava o formulario inteiro. */
/* O cartao precisa PESAR: branco sobre fundo quase branco, com borda de 1px
   clarinha, ele sumia no meio da tela. Sombra mais funda, borda mais definida
   e um fio de luz no topo dao o contorno sem tirar a leveza. */
:root[data-tema="claro"] .cartao-login {
  position: relative; z-index: 1;
  /* o fio colorido do topo vem como GRADIENTE do proprio fundo: um
     pseudo-elemento exigiria overflow:hidden, e overflow quebra o
     preserve-3d que da a inclinacao ao cartao */
  background:
    linear-gradient(90deg, #5B4BC4, #0E7490) top left / 100% 4px no-repeat,
    #FFFFFF;
  border: 1px solid var(--borda-forte);
  border-radius: 20px;
  box-shadow: 0 32px 72px rgba(15,31,51,.30), 0 8px 20px rgba(15,31,51,.14),
              0 0 0 1px rgba(91,75,196,.16), 0 0 64px rgba(14,116,144,.20);
  transform-style: preserve-3d;
  transition: transform .35s cubic-bezier(.22,.61,.36,1),
              box-shadow .35s cubic-bezier(.22,.61,.36,1);
  animation: entrar3d .7s cubic-bezier(.22,.61,.36,1) both;
}
:root[data-tema="claro"] .cartao-login::before { content: none; }
:root[data-tema="claro"] .cartao-login > * { transform: translateZ(26px); }
:root[data-tema="claro"] .cartao-login .marca { transform: translateZ(50px); }
:root[data-tema="claro"] .cartao-login label,
:root[data-tema="claro"] .cartao-login .meta { color: var(--suave); }
:root[data-tema="claro"] .cartao-login strong { color: var(--texto); }
:root[data-tema="claro"] .cartao-login input,
:root[data-tema="claro"] .cartao-login select {
  background: #FFFFFF; border: 1px solid var(--borda-forte); color: var(--texto);
}
:root[data-tema="claro"] .cartao-login a { color: #0E5F8A; font-weight: 600; }
:root[data-tema="claro"] .marca-sinal {
  background: var(--gradiente); background-size: 200% 200%;
  box-shadow: 0 6px 16px rgba(91,75,196,.30), inset 0 1px 0 rgba(255,255,255,.5);
  animation: desliza 6s ease infinite;
}
:root[data-tema="claro"] .botao.primario {
  background: var(--gradiente); color: #fff; border: 0;
  box-shadow: 0 8px 18px rgba(91,75,196,.26);
}
:root[data-tema="claro"] .botao.primario:hover { filter: brightness(1.07); }
:root[data-tema="claro"] .botao.vazado {
  background: #FFFFFF; color: var(--texto); border: 1px solid var(--borda-forte);
}
:root[data-tema="claro"] .botao.vazado:hover { border-color: var(--ciano); color: var(--ciano); }
@media (prefers-reduced-motion: reduce) {
  :root[data-tema="claro"] body::before,
  :root[data-tema="claro"] .login::before,
  :root[data-tema="claro"] .login::after { animation: none; }
}

/* --------------------------- componentes novos, no tema claro --------- */
:root[data-tema="claro"] [id^="graf-"] {
  --serie-1: #2a78d6; --serie-2: #eb6834; --serie-3: #1baf7a;
  --viz-fundo: #FFFFFF;
}
:root[data-tema="claro"] .viz-grade { stroke: rgba(15,31,51,.14); }
:root[data-tema="claro"] .viz-mira { stroke: rgba(15,31,51,.40); }
:root[data-tema="claro"] .viz-eixo { fill: var(--suave); }
:root[data-tema="claro"] .viz-rotulo,
:root[data-tema="claro"] .viz-valor { fill: var(--texto); }
:root[data-tema="claro"] .viz-dica {
  background: #FFFFFF; border: 1px solid var(--borda-forte); color: var(--texto);
  box-shadow: var(--sombra-3);
}
:root[data-tema="claro"] .tabela-vix th { border-bottom-color: var(--linha); }
:root[data-tema="claro"] .tabela-vix td { border-bottom: 1px solid rgba(15,31,51,.08); }
:root[data-tema="claro"] .item-vivo { background: #FFFFFF; border: 1px solid var(--linha); }
:root[data-tema="claro"] .item-vivo.atencao { border-color: #D97706; }
:root[data-tema="claro"] .item-vivo.critico { border-color: #DC2626; }
:root[data-tema="claro"] .pulsa { background: #15803D; box-shadow: 0 0 0 0 rgba(21,128,61,.5); }
:root[data-tema="claro"] .ponto.on { background: #15803D; }
:root[data-tema="claro"] .ponto.off { background: #94A3B8; }
:root[data-tema="claro"] .balao .transcricao { background: rgba(15,31,51,.07); }
:root[data-tema="claro"] .corretor-aviso { background: rgba(15,31,51,.08); }
:root[data-tema="claro"] .convidado { border-color: var(--linha); }
:root[data-tema="claro"] .bloco-horario { border-color: var(--linha); }
@media (max-width: 900px) {
  :root[data-tema="claro"] .colunas-tempo-real { grid-template-columns: 1fr; }
  :root[data-tema="claro"] .paineis-graficos { grid-template-columns: 1fr; }
}

/* ------------------------------------------------- botao de tema (sol/lua)
   Mesmo botao redondo nos dois lugares: no topo do sistema e no canto da tela
   de login. So o icone muda - sol quando esta claro, lua quando esta escuro. */
.botao-tema {
  display: inline-grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%; cursor: pointer; padding: 0; flex: none;
  background: var(--vidro, transparent); color: var(--texto);
  border: 1px solid var(--linha);
  transition: transform .2s ease, border-color .2s ease, color .2s ease;
}
.botao-tema:hover { transform: rotate(-18deg) scale(1.06); border-color: currentColor; }
.botao-tema svg { display: block; }
#botao-tema-login { position: absolute; top: 18px; right: 18px; z-index: 3; }

/* =====================================================================
   TOPO DA CONVERSA - quem e, onde esta, e o que fazer agora.

   Tres leituras, de cima para baixo: (1) avatar + nome + etiqueta de estado,
   (2) as acoes agrupadas por natureza, cada grupo com a sua cor. O objetivo e
   nao precisar ler os botoes para saber o que cada um faz.
   ===================================================================== */
.conversa-topo {
  display: block;                       /* era flex lado a lado, embolava tudo */
  padding: 12px 18px 10px;
}
.conversa-quem { display: flex; align-items: center; gap: 11px; }
.conversa-titulo { min-width: 0; flex: 1; }
.conversa-titulo strong { display: block; font-size: 15px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conversa-titulo small { color: var(--suave); font-size: 12px; }

.avatar-contato {
  width: 40px; height: 40px; flex: none; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .02em;
  background: var(--teal);
}

/* etiqueta de estado: a resposta para "onde essa conversa esta?" */
.estado-conversa {
  flex: none; font-size: 11.5px; font-weight: 700; letter-spacing: .02em;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
  border: 1px solid transparent;
}
.estado-conversa.e-bot { background: #DCE9F7; color: #1B4F8A; border-color: #BCD6EF; }
.estado-conversa.e-fila { background: #FBE9C8; color: #8A6516; border-color: #EFD69F; }
.estado-conversa.e-fila.atencao { background: #FBDCC0; color: #8A4A16; border-color: #EFC69F; }
.estado-conversa.e-fila.critica { background: #F7D6D0; color: #9B3524; border-color: #EAB8AE; }
.estado-conversa.e-atende { background: #D7F0E4; color: #1E6B45; border-color: #B2E0CA; }
.estado-conversa.e-fim { background: #EDEAE1; color: var(--suave); border-color: var(--linha); }

/* ------------------------------------------------ grupos de acao */
.acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-top: 10px; }
.grupo-acoes { display: flex; gap: 6px; align-items: center; position: relative; }
.grupo-acoes + .grupo-acoes::before {
  content: ""; width: 1px; height: 20px; background: var(--linha);
  margin: 0 4px 0 -2px; flex: none;
}
.grupo-acoes.fim { margin-left: auto; }

.botao.acao {
  display: inline-flex; align-items: center; gap: 7px;
  font-weight: 600; font-size: 12.5px; padding: 7px 12px;
  background: var(--papel); border: 1px solid var(--linha); color: var(--texto);
}
.botao.acao .ico {
  width: 15px; height: 15px; flex: none; fill: none;
  stroke: currentColor; stroke-width: 2; stroke-linecap: round;
  stroke-linejoin: round; opacity: .95;
}
/* O `select` global e width:100% (formularios das outras abas); aqui ele e um
   botao, entao volta a ter a largura do proprio texto. A seta e desenhada por
   nos - a nativa some com appearance:none. */
select.botao.acao {
  appearance: none; -webkit-appearance: none;
  width: auto; max-width: 200px; padding-right: 27px;
  background-color: var(--papel);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%236B7A88' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
  background-size: 11px 11px;
}

/* Uma unica acao forte por tela: a que a pessoa quase sempre quer clicar. */
.botao.acao.acao-assumir {
  background: var(--ok); border-color: var(--ok); color: #fff;
  box-shadow: 0 1px 2px rgba(62,142,90,.35);
}
.botao.acao.acao-assumir:hover { background: #35784B; border-color: #35784B; }

/* O resto so pinta a borda e o icone: da para varrer com o olho sem ler. */
.botao.acao.acao-transferir { border-color: #B7D2EC; color: #1B4F8A; }
.botao.acao.acao-transferir:hover { border-color: #1B4F8A; }
.botao.acao.acao-colega { border-color: #B3E0DD; color: var(--teal-esc); }
.botao.acao.acao-colega:hover { border-color: var(--teal-esc); }
.botao.acao.acao-fila,
.botao.acao.acao-devolver { border-color: #EFD69F; color: #8A6516; }
.botao.acao.acao-fila:hover,
.botao.acao.acao-devolver:hover { border-color: #B4832A; }
.botao.acao.acao-robo { border-color: #CFC3EE; color: #5B41A8; }
.botao.acao.acao-robo:hover { border-color: #5B41A8; }
.botao.acao.acao-finalizar { border-color: #E4C4BB; color: var(--alerta); }
.botao.acao.acao-finalizar:hover { background: var(--alerta); border-color: var(--alerta);
  color: #fff; }

.participantes-chat:not(:empty) { margin-top: 9px; }

@media (max-width: 900px) {
  .grupo-acoes.fim { margin-left: 0; }
  .grupo-acoes + .grupo-acoes::before { display: none; }
}

/* ------------------------------------------------ tema escuro */
:root:not([data-tema="claro"]) .avatar-contato { box-shadow: 0 0 0 1px rgba(255,255,255,.12); }
:root:not([data-tema="claro"]) .estado-conversa { border-color: var(--borda); }
:root:not([data-tema="claro"]) .estado-conversa.e-bot {
  background: rgba(56,132,255,.2); color: #93C5FD; border-color: rgba(56,132,255,.4); }
:root:not([data-tema="claro"]) .estado-conversa.e-fila {
  background: rgba(251,191,36,.18); color: #FCD34D; border-color: rgba(251,191,36,.42); }
:root:not([data-tema="claro"]) .estado-conversa.e-fila.atencao {
  background: rgba(249,115,22,.2); color: #FDBA74; border-color: rgba(249,115,22,.45); }
:root:not([data-tema="claro"]) .estado-conversa.e-fila.critica {
  background: rgba(251,113,133,.2); color: #FDA4AF; border-color: rgba(251,113,133,.5); }
:root:not([data-tema="claro"]) .estado-conversa.e-atende {
  background: rgba(52,211,153,.18); color: #6EE7B7; border-color: rgba(52,211,153,.4); }
:root:not([data-tema="claro"]) .estado-conversa.e-fim {
  background: rgba(148,178,255,.1); color: var(--tx-2); }

:root:not([data-tema="claro"]) .botao.acao {
  background: var(--vidro); border-color: var(--borda-forte); color: var(--tx);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
:root:not([data-tema="claro"]) .botao.acao.acao-assumir {
  background: linear-gradient(120deg, #22C55E, #34D399); border-color: transparent;
  color: #04240F; font-weight: 700;
  box-shadow: 0 0 0 1px rgba(52,211,153,.5), 0 6px 22px rgba(52,211,153,.4);
}
:root:not([data-tema="claro"]) .botao.acao.acao-assumir:hover {
  transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(52,211,153,.75),
    0 12px 30px rgba(52,211,153,.55); }
:root:not([data-tema="claro"]) .botao.acao.acao-transferir {
  border-color: rgba(56,132,255,.5); color: #93C5FD; }
:root:not([data-tema="claro"]) .botao.acao.acao-colega {
  border-color: rgba(34,211,238,.5); color: #67E8F9; }
:root:not([data-tema="claro"]) .botao.acao.acao-fila,
:root:not([data-tema="claro"]) .botao.acao.acao-devolver {
  border-color: rgba(251,191,36,.5); color: #FCD34D; }
:root:not([data-tema="claro"]) .botao.acao.acao-robo {
  border-color: rgba(139,92,246,.55); color: #C4B5FD; }
:root:not([data-tema="claro"]) .botao.acao.acao-finalizar {
  border-color: rgba(251,113,133,.5); color: #FDA4AF; }
:root:not([data-tema="claro"]) .botao.acao:hover { transform: translateY(-2px); }
:root:not([data-tema="claro"]) .botao.acao.acao-finalizar:hover {
  background: rgba(251,113,133,.22); color: #FFE4E6; }
/* As regras gerais do tema escuro usam o atalho `background:`, que apaga
   repeat/size/position da seta. Por isso tudo e repetido aqui. */
:root:not([data-tema="claro"]) select.botao.acao {
  background-color: rgba(255,255,255,.07);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%23C2D2EE' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 9px center;
  background-size: 11px 11px;
}
:root:not([data-tema="claro"]) select.botao.acao option { background: var(--esc-2); color: var(--tx); }
:root:not([data-tema="claro"]) .grupo-acoes + .grupo-acoes::before { background: var(--borda); }

/* =====================================================================
   COPILOTO (IA) NA CONVERSA
   Fica ACIMA da caixa de texto de proposito: o atendente le a sugestao, clica,
   e o texto cai na caixa dele - o passo de revisar nunca e pulado.
   ===================================================================== */
.copiloto { border-bottom: 1px dashed var(--linha); padding: 8px 0 10px; margin-bottom: 8px; }
.copiloto-barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.copiloto-nota { font-size: 12px; color: var(--suave); font-style: italic; }

.botao.ia {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 600; padding: 7px 13px;
  background: linear-gradient(120deg, #6D4AD1, #2E8FD6); border-color: transparent;
  color: #fff;
}
.botao.ia::before {
  content: ""; width: 13px; height: 13px; flex: none;
  background: currentColor;
  clip-path: polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}
.botao.ia:hover { filter: brightness(1.08); }
.botao.ia.vazado { background: transparent; color: #5B41A8; border-color: #CFC3EE; }
.botao.ia.vazado:hover { border-color: #5B41A8; filter: none; }
.botao.ia:disabled { opacity: .55; cursor: default; filter: none; }

.copiloto-caixa { margin-top: 9px; }
.copiloto-lista { display: grid; gap: 7px; }
.sugestao {
  display: grid; gap: 3px; text-align: left; cursor: pointer;
  background: var(--papel); border: 1px solid var(--linha);
  border-left: 3px solid #6D4AD1; border-radius: var(--raio);
  padding: 9px 12px; font: inherit; color: var(--texto);
}
.sugestao:hover { border-color: #6D4AD1; background: #FAF8FE; }
.sugestao-titulo { font-size: 11px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #5B41A8; }
.sugestao-texto { font-size: 13px; line-height: 1.45; white-space: pre-wrap; }
.sugestao-usar { font-size: 11px; color: var(--suave); }
.sugestao:hover .sugestao-usar { color: #5B41A8; }

.copiloto-alerta {
  font-size: 12px; padding: 7px 11px; border-radius: 8px; margin-bottom: 7px;
  background: #FBE9C8; color: #8A6516; border: 1px solid #EFD69F;
}
.copiloto-rodape { font-size: 11px; color: var(--suave); margin-top: 7px; }
.copiloto-vazio { font-size: 12.5px; color: var(--suave); }

.resumo-ia {
  background: var(--papel); border: 1px solid var(--linha);
  border-left: 3px solid #2E8FD6; border-radius: var(--raio); padding: 11px 13px;
}
.resumo-ia p { margin: 6px 0; font-size: 13px; line-height: 1.5; }
.resumo-ia ul { margin: 6px 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6; }
.resumo-linha { font-size: 11px; letter-spacing: .05em; text-transform: uppercase;
  color: #1B4F8A; }
.resumo-proximo { font-size: 12.5px; margin-top: 6px; }
.humor { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; margin-left: 6px;
  text-transform: none; letter-spacing: 0; }
.humor.h-tranquilo { background: #D7F0E4; color: #1E6B45; }
.humor.h-impaciente { background: #FBE9C8; color: #8A6516; }
.humor.h-irritado { background: #F7D6D0; color: #9B3524; }

/* estado da vigia e do assistente, na aba Conexao */
.vigia-estado { font-size: 12.5px; line-height: 1.55; padding: 10px 12px;
  border-radius: var(--raio); margin-bottom: 12px; border: 1px solid var(--linha); }
.vigia-estado.ok { background: #E6F5EC; border-color: #BFE3CE; color: #1E6B45; }
.vigia-estado.ruim { background: #FBE9E7; border-color: #EBC6BF; color: #9B3524; }
.vigia-estado.desligada { background: var(--creme); color: var(--suave); }
.vigia-estado i { font-style: normal; opacity: .75; font-size: 11.5px; }
.vigia-estado div + div { margin-top: 7px; }
.vigia-estado code { font-family: var(--mono); font-size: 11.5px; }

/* ------------------------------------------------ tema escuro */
:root:not([data-tema="claro"]) .copiloto { border-bottom-color: var(--borda); }
:root:not([data-tema="claro"]) .botao.ia {
  background: linear-gradient(120deg, var(--violeta), var(--ciano));
  color: #fff; box-shadow: var(--neon-v); font-weight: 700; }
:root:not([data-tema="claro"]) .botao.ia.vazado {
  background: var(--vidro); color: #C4B5FD; border-color: rgba(139,92,246,.55);
  box-shadow: none; }
:root:not([data-tema="claro"]) .sugestao {
  background: var(--vidro); border-color: var(--borda); border-left-color: var(--violeta);
  color: var(--tx); }
:root:not([data-tema="claro"]) .sugestao:hover {
  background: var(--vidro-2); border-color: var(--violeta); }
:root:not([data-tema="claro"]) .sugestao-titulo { color: #C4B5FD; }
:root:not([data-tema="claro"]) .sugestao:hover .sugestao-usar { color: #C4B5FD; }
:root:not([data-tema="claro"]) .copiloto-alerta {
  background: rgba(251,191,36,.16); border-color: rgba(251,191,36,.4); color: #FCD34D; }
:root:not([data-tema="claro"]) .resumo-ia {
  background: var(--vidro); border-color: var(--borda); border-left-color: var(--ciano);
  color: var(--tx); }
:root:not([data-tema="claro"]) .resumo-linha { color: #67E8F9; }
:root:not([data-tema="claro"]) .humor.h-tranquilo {
  background: rgba(52,211,153,.18); color: #6EE7B7; }
:root:not([data-tema="claro"]) .humor.h-impaciente {
  background: rgba(251,191,36,.18); color: #FCD34D; }
:root:not([data-tema="claro"]) .humor.h-irritado {
  background: rgba(251,113,133,.2); color: #FDA4AF; }
:root:not([data-tema="claro"]) .vigia-estado { border-color: var(--borda); }
:root:not([data-tema="claro"]) .vigia-estado.ok {
  background: rgba(52,211,153,.14); border-color: rgba(52,211,153,.38); color: #6EE7B7; }
:root:not([data-tema="claro"]) .vigia-estado.ruim {
  background: rgba(251,113,133,.15); border-color: rgba(251,113,133,.42); color: #FDA4AF; }
:root:not([data-tema="claro"]) .vigia-estado.desligada {
  background: var(--vidro); color: var(--tx-2); }

/* =====================================================================
   TIQUES DE ENTREGA E BUSCA DENTRO DAS MENSAGENS
   ===================================================================== */
.tique { height: 10px; width: auto; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  vertical-align: -1px; margin-right: 4px; }
/* Os tres estados usam a mesma pilula dos demais: o olho compara cor, nao
   tamanho. Quanto mais longe a mensagem chegou, mais forte a cor. */
.entrega.entregue { background: #e2f5f0; color: #0d7a63; }
.entrega.lido { background: #dbeafe; color: #1B5FA8; font-weight: 700; }

/* trecho da mensagem que casou com a busca, na lista de conversas */
.achado {
  font-size: 11.5px; line-height: 1.4; color: var(--suave); margin-top: 3px;
  padding-left: 7px; border-left: 2px solid #B7D2EC;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.achado mark { background: #FBE9C8; color: #6B4E10; border-radius: 3px;
  padding: 0 2px; font-weight: 600; }

:root:not([data-tema="claro"]) .entrega.ok { background: rgba(148,178,255,.14); color: var(--tx-2); }
:root:not([data-tema="claro"]) .entrega.entregue { background: rgba(163,230,53,.16); color: #BEF264; }
:root:not([data-tema="claro"]) .entrega.lido { background: rgba(34,211,238,.2); color: #67E8F9; font-weight: 700; }
:root:not([data-tema="claro"]) .achado { color: var(--tx-2);
  border-left-color: rgba(56,132,255,.5); }
:root:not([data-tema="claro"]) .achado mark {
  background: rgba(251,191,36,.22); color: #FCD34D; }

/* ------------------------------------------------- grupo de contrato
   Um grupo de WhatsApp por cliente, para tratar o fechamento do contrato. O
   roxo separa o grupo do resto sem competir com as cores da fila (amarelo,
   laranja, vermelho): olhando a lista, grupo nunca se confunde com urgencia. */
.selo.grupo { background: #E7E1FA; color: #5B3FB8; }
.item .selo.grupo + .etiqueta { background: #F0ECFC; color: #5B3FB8; }

.aviso-grupo { font-size: 12px; color: #5B3FB8; background: #F3F0FD;
  border: 1px solid #DCD3F7; border-radius: 999px; padding: 5px 12px;
  line-height: 1.35; }

.bloco-grupo .selos { margin-bottom: 6px; }
.bloco-grupo strong { display: block; font-size: 13px; margin-bottom: 6px; }
.bloco-grupo .botao { width: 100%; margin-top: 6px; }
.bloco-grupo .linha { display: flex; gap: 6px; }
.bloco-grupo .dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }

.grupo-membros { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; }
.grupo-membros .convidado { font-size: 11.5px; }
.grupo-membros .convidado small { opacity: .7; font-size: 9.5px;
  text-transform: uppercase; letter-spacing: .04em; }
.convidado.origem-cliente { border-color: #B8A7EE; background: #F3F0FD; color: #4A3399; }
.convidado.origem-equipe { border-color: #A9D5C6; background: #E7F5F0; color: #1E6B45; }

.grupo-equipe { display: flex; flex-direction: column; gap: 2px; max-height: 190px;
  overflow-y: auto; margin: 4px 0 8px; }
.grupo-equipe .linha-check { font-size: 12px; }

#grupo-convite { word-break: break-all; font-size: 11px; }
#botao-grupo-encerrar { color: #B3392C; border-color: #E7C3BD; }

:root:not([data-tema="claro"]) .selo.grupo { background: rgba(139,110,255,.2); color: #C4B5FD; }
:root:not([data-tema="claro"]) .item .selo.grupo + .etiqueta {
  background: rgba(139,110,255,.12); color: #C4B5FD; }
:root:not([data-tema="claro"]) .aviso-grupo { background: rgba(139,110,255,.12);
  border-color: rgba(139,110,255,.34); color: #C4B5FD; }
:root:not([data-tema="claro"]) .convidado.origem-cliente {
  background: rgba(139,110,255,.14); border-color: rgba(139,110,255,.4); color: #C4B5FD; }
:root:not([data-tema="claro"]) .convidado.origem-equipe {
  background: rgba(52,211,153,.13); border-color: rgba(52,211,153,.35); color: #6EE7B7; }
:root:not([data-tema="claro"]) #botao-grupo-encerrar {
  color: #FCA5A5; border-color: rgba(248,113,113,.4); }

/* ---------------------------------------------------------- propostas
   O sino fica na coluna dos atendimentos, embaixo dos filtros: e o unico
   lugar da tela em que a equipe ve, sem procurar, quanto questionario o robo
   terminou e ninguem analisou ainda. Ele pisca so enquanto tem proposta NOVA
   - com tudo visto, para de chamar atencao e vira um numero a mais. */
.sino {
  display: flex; align-items: center; gap: 7px; width: calc(100% - 20px);
  margin: 2px 10px 0; padding: 8px 11px; cursor: pointer;
  font-family: var(--fonte); font-size: 12px; font-weight: 600; text-align: left;
  color: var(--navy); background: #FFF8E6;
  border: 1px solid #E8D7A6; border-radius: var(--raio);
}
.sino:hover { border-color: var(--teal); }
.sino b {
  margin-left: auto; background: var(--alerta); color: #fff; font-weight: 700;
  border-radius: 20px; padding: 1px 8px; font-size: 12px;
}
.sino.vazio { background: transparent; border-color: var(--linha); color: var(--suave); }
.sino.vazio b { background: var(--linha); color: var(--suave); }
.sino.piscando { animation: sino-pisca 1.6s ease-in-out infinite; }
.sino.piscando .sino-icone { display: inline-block; animation: sino-balanca 1.6s ease-in-out infinite; }
@keyframes sino-pisca {
  0%, 100% { box-shadow: 0 0 0 0 rgba(198,85,60,.0); }
  50% { box-shadow: 0 0 0 4px rgba(198,85,60,.18); }
}
@keyframes sino-balanca {
  0%, 60%, 100% { transform: rotate(0); }
  10%, 30%, 50% { transform: rotate(12deg); }
  20%, 40% { transform: rotate(-12deg); }
}
@media (prefers-reduced-motion: reduce) {
  .sino.piscando, .sino.piscando .sino-icone { animation: none; }
}

/* a janela do sino e larga: cada proposta tem cliente, resumo e as acoes */
.chamado.largo { max-width: 720px; text-align: left; }
.filtros-proposta { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 10px; }
.filtro-proposta {
  border: 1px solid var(--linha); background: #fff; border-radius: 20px;
  padding: 4px 10px; font-size: 11px; cursor: pointer; font-family: var(--fonte);
  color: var(--suave);
}
.filtro-proposta.ativo { background: var(--navy); border-color: var(--navy); color: #fff; }
.lista-propostas { max-height: 58vh; overflow: auto; display: grid; gap: 8px; }
.proposta {
  border: 1px solid var(--linha); border-left: 4px solid var(--suave);
  border-radius: var(--raio); padding: 10px 12px; background: #fff;
}
.proposta-topo { display: flex; align-items: baseline; gap: 8px; }
.proposta-topo strong { font-size: 14px; }
.proposta-resumo { font-size: 12px; margin-top: 4px; }
.acoes-proposta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.botao.mini { padding: 4px 10px; font-size: 11px; border-radius: 20px; }
/* a cor da borda diz a situacao antes de a pessoa ler qualquer coisa */
.proposta.situacao-nova { border-left-color: var(--alerta); }
.proposta.situacao-em_analise { border-left-color: #E0A82E; }
.proposta.situacao-pendente { border-left-color: #E07B2E; }
.proposta.situacao-aprovada { border-left-color: var(--ok); }
.proposta.situacao-reprovada { border-left-color: #C63A2A; }
.proposta.situacao-cancelada { border-left-color: var(--linha); }
.propostas-cliente { display: grid; gap: 8px; }

/* conferir a ficha antes de decidir a proposta */
.ficha-conferir { max-height: 56vh; overflow: auto; }
.ficha-conferir .tabela th { width: 38%; text-align: left; white-space: nowrap; }
.ficha-conferir h4 { margin: 14px 0 6px; }

/* logomarca da empresa (aba Equipe) */
.linha.logomarca { align-items: flex-start; gap: 16px; }
.previa-logo {
  min-width: 170px; min-height: 76px; display: flex; align-items: center;
  justify-content: center; border: 1px dashed var(--linha); border-radius: var(--raio);
  padding: 8px; background: #fff;
}
/* o xadrez mostra a transparencia do PNG: sem ele, logo branca sobre fundo
   branco parece que nao subiu */
.previa-logo img {
  max-width: 150px; max-height: 60px; object-fit: contain;
  background-image: linear-gradient(45deg, #EEE 25%, transparent 25%),
                    linear-gradient(-45deg, #EEE 25%, transparent 25%),
                    linear-gradient(45deg, transparent 75%, #EEE 75%),
                    linear-gradient(-45deg, transparent 75%, #EEE 75%);
  background-size: 12px 12px;
  background-position: 0 0, 0 6px, 6px -6px, -6px 0;
}
:root:not([data-tema="claro"]) .previa-logo {
  background: var(--vidro); border-color: var(--borda);
}

/* A cor de cada situacao vive AQUI, num lugar so, e vale para os dois lugares
   onde os botoes aparecem (o sino e a ficha dentro da conversa). Os seis
   botoes eram identicos e ficavam lado a lado: "Aprovada" e "Reprovada" se
   distinguiam so pela palavra, num clique pequeno e redondo - e aprovar manda
   mensagem no WhatsApp do cliente. Agora verde e verde, vermelho e vermelho, e
   o botao da situacao ATUAL vem pintado por dentro. */
.botao-situacao.sit-nova { --cor-sit: var(--alerta); }
.botao-situacao.sit-em_analise { --cor-sit: #C98A0E; }
.botao-situacao.sit-pendente { --cor-sit: #D06A16; }
.botao-situacao.sit-aprovada { --cor-sit: var(--ok); }
.botao-situacao.sit-reprovada { --cor-sit: #C63A2A; }
.botao-situacao.sit-cancelada { --cor-sit: #6B7280; }

/* o `:root` e o `.mini` estao aqui pelo peso: os dois temas repintam
   `.botao.primario`/`.botao.vazado` mais acima, e sem eles a cor da situacao
   perderia para o gradiente roxo do tema */
:root .botao.mini.botao-situacao.vazado {
  background: transparent; border-color: var(--cor-sit); color: var(--cor-sit);
  box-shadow: none;
}
:root .botao.mini.botao-situacao.vazado:hover {
  background: var(--cor-sit); border-color: var(--cor-sit); color: #fff;
}
:root .botao.mini.botao-situacao.primario {
  background: var(--cor-sit); border-color: var(--cor-sit); color: #fff;
  box-shadow: var(--sombra); font-weight: 700;
}
:root .botao.mini.botao-situacao.primario:hover {
  background: var(--cor-sit); border-color: var(--cor-sit); filter: brightness(1.08);
}
/* no escuro o hex fixo fica pesado demais: as mesmas cores, so que claras - e
   o texto vira escuro, porque branco sobre amarelo claro nao se le */
:root:not([data-tema="claro"]) .botao-situacao.sit-em_analise { --cor-sit: #F0BE4A; }
:root:not([data-tema="claro"]) .botao-situacao.sit-pendente { --cor-sit: #F59E4B; }
:root:not([data-tema="claro"]) .botao-situacao.sit-reprovada { --cor-sit: #F87171; }
:root:not([data-tema="claro"]) .botao-situacao.sit-cancelada { --cor-sit: #9AA6BF; }
:root:not([data-tema="claro"]) .botao.mini.botao-situacao.primario { color: #0A0F1F; }
:root:not([data-tema="claro"]) .botao.mini.botao-situacao.vazado:hover { color: #0A0F1F; }

:root:not([data-tema="claro"]) .sino {
  background: rgba(224,168,46,.12); border-color: rgba(224,168,46,.38); color: var(--tx);
}
:root:not([data-tema="claro"]) .sino.vazio {
  background: var(--vidro); border-color: var(--borda); color: var(--tx-2);
}
:root:not([data-tema="claro"]) .sino.vazio b { background: var(--vidro-2); color: var(--tx-2); }
:root:not([data-tema="claro"]) .filtro-proposta {
  background: var(--vidro); border-color: var(--borda); color: var(--tx-2);
}
:root:not([data-tema="claro"]) .filtro-proposta.ativo {
  background: var(--gradiente); border-color: transparent; color: #fff; font-weight: 700;
}
:root:not([data-tema="claro"]) .proposta {
  background: var(--vidro); border-color: var(--borda); color: var(--tx);
}

/* ==================================================================
   LOGO IMPULSE — a mesma arte do site, com o pulso percorrendo a linha.
   O PNG e quase branco com alpha: usado como IMAGEM sumiria no tema
   claro. Entra como MASCARA, e a cor vem por baixo — assim serve nos
   dois temas e o pulso pode ser desenhado dentro do traco.
   ================================================================== */
.logo-imp {
  position: relative; display: block; flex: none; overflow: hidden;
  width: var(--logo-w, 200px); aspect-ratio: 1120 / 440;
  -webkit-mask: url("/logo-impulse.png") center / contain no-repeat;
          mask: url("/logo-impulse.png") center / contain no-repeat;
  animation: impGlow 6.4s ease-in-out infinite;
}
.logo-imp i { position: absolute; display: block; }
/* traco base, apagado, para a luz se destacar */
.logo-imp .ink { inset: 0; background: var(--logo-cor, #0B2A4A); opacity: .55; }
/* a luz que desenha a marca da esquerda para a direita */
.logo-imp .trace {
  inset: 0; background: var(--logo-cor-forte, #14807C);
  -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0);
  animation: impTrace 6.4s cubic-bezier(.55,0,.25,1) infinite;
}
/* o pulso que corre por dentro do traco */
.logo-imp .pulse {
  top: -70%; bottom: -70%; left: 0; width: 55%;
  background: linear-gradient(96deg,
    rgba(31,163,158,0) 0%, rgba(31,163,158,.85) 30%,
    var(--logo-brilho, #0E5E5B) 50%,
    rgba(31,163,158,.85) 70%, rgba(31,163,158,0) 100%);
  filter: blur(3px); transform: translate3d(-160%, 0, 0);
  animation: impSweep 6.4s cubic-bezier(.5,0,.28,1) infinite; will-change: transform;
}
.logo-imp .pulse::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 44%; width: 12%;
  background: linear-gradient(96deg, transparent, var(--logo-brilho, #0E5E5B) 50%, transparent);
  filter: blur(.4px);
}
@keyframes impTrace {
  0%   { -webkit-clip-path: inset(0 100% 0 0); clip-path: inset(0 100% 0 0); }
  24%  { -webkit-clip-path: inset(0 0 0 0);    clip-path: inset(0 0 0 0); }
  40%  { -webkit-clip-path: inset(0 0 0 0);    clip-path: inset(0 0 0 0); }
  58%,100% { -webkit-clip-path: inset(0 0 0 100%); clip-path: inset(0 0 0 100%); }
}
@keyframes impSweep {
  0%,62%   { transform: translate3d(-160%, 0, 0); }
  88%,100% { transform: translate3d(300%, 0, 0); }
}
@keyframes impGlow {
  0%,100% { filter: drop-shadow(0 0 0 rgba(31,163,158,0)); }
  14%     { filter: drop-shadow(0 0 14px rgba(31,163,158,.55)); }
  58%     { filter: drop-shadow(0 0 2px rgba(31,163,158,.10)); }
  76%     { filter: drop-shadow(0 0 12px rgba(31,163,158,.5)); }
}

/* no escuro a marca clareia e o brilho fica branco */
:root:not([data-tema="claro"]) .logo-imp {
  --logo-cor: #7FB6C6; --logo-cor-forte: #B7E4DC; --logo-brilho: #FFFFFF;
}
:root:not([data-tema="claro"]) .logo-imp .ink { opacity: .40; }

/* lockup: marca em cima, nome embaixo */
.marca.marca-logo {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  text-align: center;
}
.marca.marca-logo .logo-imp { --logo-w: 210px; }
.lateral .marca.marca-logo { align-items: flex-start; text-align: left; gap: 6px; }
.lateral .marca.marca-logo .logo-imp { --logo-w: 168px; }

@media (prefers-reduced-motion: reduce) {
  .logo-imp, .logo-imp .trace, .logo-imp .pulse { animation: none; }
  .logo-imp .ink { opacity: 1; }
  .logo-imp .trace { -webkit-clip-path: none; clip-path: none; opacity: .0; }
}