/* ═══════════════════════════════════════════════════════════════════════════
   painel_de_dados_mensageria — folha única, sem build e sem CDN.

   A linguagem visual é a mesma do painel criador (vidro + neon, tokens com o
   mesmo nome), com uma inversão deliberada: lá o padrão é o tema CLARO, aqui
   é o ESCURO. Painel de número é lido de relance e por muito tempo seguido, e
   é no quase-preto que o neon vira sinal em vez de enfeite — a mesma tinta que
   aqui é filamento aceso, no branco vira borrão cinzento.

   Três camadas de profundidade, e cada uma tem um trabalho:
     1. fundo fluido (canvas, z -1)  — movimento lento, dá vida sem competir
     2. vidro (.cartao)              — desfoca o fundo para o texto ser legível
     3. neon (borda, halo, número)   — hierarquia: o que acende é o que importa
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Quase preto de propósito: neon é uma RELAÇÃO, não uma tinta. */
  --bg: #04060a; --bg2: #090d14; --bg3: #0f141d;
  --linha: #1b2230; --txt: #e9edf6; --txt2: #9fadc4; --txt3: #7a879f;

  /* Paleta ampla — cada família de indicador tem tinta própria, e é assim que
     seis gráficos numa tela continuam se distinguindo sem legenda. */
  --azul: #3d9bff;      /* envio, volume            */
  --verde: #2ff0a8;     /* confirmação, ganho, alta */
  --vermelho: #ff5763;  /* erro, cancelamento, baixa*/
  --amarelo: #ffc65c;   /* atenção, desmarque       */
  --roxo: #b98bff;      /* resposta do paciente     */
  --ciano: #22c8ff;     /* selecionado, foco        */
  --rosa: #ff5fa8;      /* fallback, não entendido  */
  --laranja: #ff9640;   /* latência, tempo          */
  --lima: #b6ff5c;      /* projeção otimista        */

  --surf: #090d14e0;
  /* O cartão é quase sólido (0x45 → 0x8c → 0xe6).
     O vidro existe para deixar ver que HÁ movimento atrás, não para deixar
     ler o que há atrás: com a rede de sinapses pulsando, um nó aceso passando
     sob um número competia com o número. Sobrou a borda superior e o brilho
     difuso nas laterais — o suficiente para a peça continuar parecendo vidro
     e não papel. */
  --surf-card: #090d14e6;
  --surf-forte: #090d14f7;

  /* Receita do vidro, usada por cartão, KPI, cabeçalho e caixa de login.
     Calibrar aqui muda a tela inteira de uma vez. */
  --vidro: blur(30px) saturate(150%);
  --vidro-leve: blur(24px) saturate(140%);
  --halo-txt: 0 1px 2px #000000f2, 0 0 6px #000000e6, 0 0 14px #000000cc;
  --sombra: 0 10px 30px #000c, 0 0 0 1px #3d9bff14;
  --log-bg: #02040af2;

  --aviso-bg: #ffc65c12; --aviso-bd: #ffc65c4d;
  --erro-bg: #ff576312;  --erro-bd: #ff57634d;
  --ok-bg: #2ff0a812;    --ok-bd: #2ff0a84d;

  --halo: 16px;
  --halo-forte: 28px;

  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r: 12px;
}

/* O claro existe para quem imprime ou apresenta em projetor lavado. O neon
   sai de cena aqui: no branco ele só borraria. */
:root[data-tema="claro"] {
  --bg: #f2f5fa; --bg2: #ffffff; --bg3: #eef1f7;
  --linha: #d5dbe5; --txt: #161d2b; --txt2: #414c5f; --txt3: #6d7887;
  --azul: #2563eb; --verde: #047857; --vermelho: #c81e1e; --amarelo: #b45309;
  --roxo: #6d28d9; --ciano: #0284c7; --rosa: #be185d; --laranja: #c2560f;
  --lima: #4d7c0f;
  --surf: #fffffff2; --surf-card: #fffffff0; --surf-forte: #fffffffa;
  --halo-txt: 0 1px 2px #fffffff2, 0 0 6px #ffffffe6;
  --sombra: 0 6px 20px #1a233010;
  --log-bg: #f7f9fdf2;
  --halo: 0px; --halo-forte: 0px;
}

* { box-sizing: border-box; }

/* `hidden` é atributo, e a regra do navegador que o esconde tem especificidade
   menor que qualquer seletor de classe daqui — sem esta linha, um `.chip`
   marcado como hidden continua na tela. */
[hidden] { display: none !important; }

body {
  margin: 0; background: var(--bg); color: var(--txt);
  font: 14px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
}

/* ── cabeçalho e navegação ─────────────────────────────────────────────── */

header {
  background: var(--surf); backdrop-filter: var(--vidro);
  -webkit-backdrop-filter: var(--vidro);
  border-bottom: 1px solid var(--linha);
  padding: 12px 22px; display: flex; align-items: center; gap: 14px;
  position: sticky; top: 0; z-index: 20;
  box-shadow: 0 1px 26px -14px var(--azul);
}
header h1 {
  font-size: 15px; margin: 0; font-weight: 600; letter-spacing: .2px;
  text-shadow: 0 0 22px color-mix(in srgb, var(--azul) 40%, transparent);
  display: flex; align-items: center; gap: 9px;
}
header .sub { color: var(--txt3); font-size: 12px; }
header .direita { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

nav {
  display: flex; gap: 2px; padding: 0 22px; overflow-x: auto;
  background: var(--surf); backdrop-filter: var(--vidro);
  -webkit-backdrop-filter: var(--vidro);
  border-bottom: 1px solid var(--linha);
  position: sticky; top: 47px; z-index: 19;
}
nav button {
  background: none; border: none; color: var(--txt2); padding: 11px 15px;
  cursor: pointer; font-size: 13px; border-bottom: 2px solid transparent;
  white-space: nowrap; font-family: inherit; transition: color .18s, border-color .18s;
}
nav button:hover { color: var(--txt); }
nav button.ativo {
  color: color-mix(in srgb, var(--ciano) 78%, #fff);
  border-bottom-color: var(--ciano);
  text-shadow: 0 0 var(--halo) color-mix(in srgb, var(--ciano) 55%, transparent);
  box-shadow: 0 3px var(--halo) -5px var(--ciano);
}

main { padding: 20px 22px 60px; max-width: 1560px; margin: 0 auto; }

/* ── vidro ─────────────────────────────────────────────────────────────── */

/* O desfoque é o que deixa o fundo de sinapses passar ATRÁS do texto sem
   disputar com ele. Sem desfoque, baixar o alfa só embaralharia os nós com as
   letras; sem alfa, o cartão vira um retângulo opaco e o fundo some. */
.cartao {
  position: relative;
  background: var(--surf-card);
  backdrop-filter: var(--vidro);
  -webkit-backdrop-filter: var(--vidro);
  border: 1px solid var(--linha);
  border-radius: var(--r); padding: 16px; margin-bottom: 14px;
  box-shadow: var(--sombra), inset 0 1px 0 #ffffff0d;
  text-shadow: var(--halo-txt);
  overflow: hidden;
}
/* Fio de luz na borda de cima: é o que dá espessura ao vidro. */
.cartao::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent,
    color-mix(in srgb, var(--txt) 22%, transparent), transparent);
  pointer-events: none;
}
/* Reflexo líquido que segue o ponteiro (--mx/--my vêm do JS). Some sozinho
   em quem pediu menos movimento. */
.cartao::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, -999px) var(--my, -999px),
    color-mix(in srgb, var(--ac, var(--ciano)) 13%, transparent), transparent 65%);
  opacity: 0; transition: opacity .35s;
}
.cartao:hover::after { opacity: 1; }
@supports not (backdrop-filter: blur(1px)) {
  .cartao, .kpi, .plano-op { background: var(--bg2); }
}

.cartao h2 {
  margin: -4px -6px 10px; font-size: 14px; font-weight: 600;
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  position: relative; padding: 6px 12px 6px 14px; border-radius: 7px;
  color: var(--ac, var(--azul));
  background: color-mix(in srgb, var(--ac, var(--azul)) 8%, transparent);
  text-shadow: 0 0 var(--halo-forte) color-mix(in srgb, var(--ac, var(--azul)) 42%, transparent);
}
.cartao h2::before {
  content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 3px;
  border-radius: 0 2px 2px 0; background: var(--ac, var(--azul));
  box-shadow: 0 0 13px 1px var(--ac, var(--azul));
}
.cartao h2 .dim { color: var(--txt3); font-weight: 400; text-shadow: none; }
.cartao h2 .direita { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.cartao .desc { color: var(--txt3); font-size: 12px; margin: -4px 0 12px; text-shadow: none; }

/* Cor da seção por tipo de conteúdo — é o que faz seis cartões numa tela
   não virarem seis retângulos iguais. */
.cartao.volume    { --ac: var(--azul); }
.cartao.confirma  { --ac: var(--verde); }
.cartao.risco     { --ac: var(--vermelho); }
.cartao.tempo     { --ac: var(--laranja); }
.cartao.paciente  { --ac: var(--roxo); }
.cartao.dinheiro  { --ac: var(--lima); }
.cartao.previsao  { --ac: var(--ciano); }
.cartao.atencao   { --ac: var(--amarelo); }

/* ── grades ────────────────────────────────────────────────────────────── */

.grade      { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.grade-2    { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 14px; }
.grade-kpi  { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; }
.grade-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }

/* ── KPI: o número é o herói, o resto é legenda ────────────────────────── */

.kpi {
  position: relative; padding: 13px 14px; border-radius: 11px;
  border: 1px solid var(--linha);
  background: linear-gradient(160deg,
    color-mix(in srgb, var(--ac, var(--azul)) 12%, transparent), transparent 70%), var(--surf-card);
  backdrop-filter: var(--vidro-leve);
  -webkit-backdrop-filter: var(--vidro-leve);
  overflow: hidden;
}
.kpi::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px;
  background: var(--ac, var(--azul));
  box-shadow: 0 0 14px 1px var(--ac, var(--azul));
}
.kpi .rot {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .09em;
  color: var(--txt3); display: flex; align-items: center; gap: 6px;
}
.kpi .val {
  font: 700 27px/1.15 var(--mono); margin-top: 5px; letter-spacing: -.5px;
  color: var(--ac, var(--txt));
  text-shadow: 0 0 var(--halo-forte) color-mix(in srgb, var(--ac, var(--azul)) 45%, transparent);
  font-variant-numeric: tabular-nums;
}
.kpi .val small { font-size: 14px; opacity: .65; font-weight: 600; }
.kpi .leg { font-size: 11px; color: var(--txt3); margin-top: 3px; }
/* O recorte de tempo do número. Um painel onde convivem "7 dias", "no
   período escolhido" e "agora" precisa dizer em cada cartão de qual dos
   três ele é — senão quem analisa compara números de janelas diferentes
   sem perceber. Fica no rodapé, atrás de uma linha fina: quem procura
   acha, quem só quer o número não tropeça. */
.kpi .per {
  margin-top: 7px; padding-top: 6px; border-top: 1px solid var(--linha);
  font-size: 10px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--txt3); opacity: .8;
}
.kpi.grande .val { font-size: 34px; }

/* ── ticker: variação como em terminal de mercado ──────────────────────── */

.delta {
  display: inline-flex; align-items: center; gap: 3px; font: 600 11.5px var(--mono);
  padding: 2px 7px; border-radius: 999px; border: 1px solid currentColor;
  font-variant-numeric: tabular-nums;
}
.delta.sobe  { color: var(--verde);    background: color-mix(in srgb, var(--verde) 12%, transparent);
               box-shadow: 0 0 15px -6px var(--verde), inset 0 0 13px -9px var(--verde); }
.delta.desce { color: var(--vermelho); background: color-mix(in srgb, var(--vermelho) 12%, transparent);
               box-shadow: 0 0 15px -6px var(--vermelho), inset 0 0 13px -9px var(--vermelho); }
.delta.neutro{ color: var(--txt3); border-color: var(--linha); }
/* Variação onde subir é RUIM (erro, latência, cancelamento) troca a tinta —
   a cor precisa dizer "bom/ruim", não "maior/menor". */
.delta.invertido.sobe  { color: var(--vermelho); border-color: var(--vermelho);
                         background: color-mix(in srgb, var(--vermelho) 12%, transparent); }
.delta.invertido.desce { color: var(--verde); border-color: var(--verde);
                         background: color-mix(in srgb, var(--verde) 12%, transparent); }

/* ── selos e etiquetas ─────────────────────────────────────────────────── */

.selo {
  display: inline-flex; align-items: center; gap: 5px;
  font: 600 11px/1 var(--mono); padding: 4px 9px; border-radius: 999px;
  border: 1px solid currentColor; white-space: nowrap;
  text-shadow: 0 0 11px color-mix(in srgb, currentColor 55%, transparent);
  box-shadow: 0 0 15px -6px currentColor, inset 0 0 13px -9px currentColor;
}
.selo.ok       { color: var(--verde); }
.selo.alerta   { color: var(--amarelo); }
.selo.critico  { color: var(--vermelho); }
.selo.info     { color: var(--azul); }
.selo.neutro   { color: var(--txt3); border-color: var(--linha); box-shadow: none; text-shadow: none; }
.selo.plus     { color: var(--lima); }
.selo.basico   { color: var(--txt3); border-color: var(--linha); box-shadow: none; text-shadow: none; }
.selo .ponto   { width: 6px; height: 6px; border-radius: 50%; background: currentColor;
                 box-shadow: 0 0 8px 1px currentColor; }
/* O ponto de "no ar" pulsa — é o único movimento da tela que significa
   "agora", e por isso ninguém mais pode pulsar. */
.selo.ok .ponto { animation: pulso 2.4s ease-in-out infinite; }
@keyframes pulso { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* ── cartão de mensageria (tela inicial) ───────────────────────────────── */

.mens {
  cursor: pointer; transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s;
  border-left: 3px solid var(--ac, var(--azul));
}
.mens:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -20px #000, 0 0 var(--halo-forte) -12px var(--ac, var(--azul));
}
.mens.saudavel { --ac: var(--verde); }
.mens.atencao  { --ac: var(--amarelo); }
.mens.critico  { --ac: var(--vermelho); }
.mens .topo { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.mens .nome { font-size: 15px; font-weight: 600; line-height: 1.25; }
.mens .slug { font: 11px var(--mono); color: var(--txt3); }
.mens .nums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0 10px; }
.mens .num  { text-align: center; padding: 8px 4px; border-radius: 9px;
              background: color-mix(in srgb, var(--txt) 4%, transparent);
              border: 1px solid var(--linha); }
.mens .num b { display: block; font: 700 18px var(--mono); font-variant-numeric: tabular-nums; }
.mens .num span { font-size: 10px; color: var(--txt3); text-transform: uppercase; letter-spacing: .06em; }
.mens .rodape { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
                border-top: 1px solid var(--linha); padding-top: 10px; }

/* Nota de saúde: anel que se preenche conforme a nota, cor pelo estado. */
.nota {
  --p: 0; flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; font: 700 13px var(--mono);
  color: var(--ac); position: relative;
  background: conic-gradient(var(--ac) calc(var(--p) * 1%), color-mix(in srgb, var(--txt) 9%, transparent) 0);
  box-shadow: 0 0 var(--halo) -4px var(--ac);
}
.nota::before { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--bg); }
.nota span { position: relative; }

/* ── botões ────────────────────────────────────────────────────────────── */

button.acao {
  font: 500 13px/1 inherit; padding: 9px 15px; border-radius: 9px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--ac, var(--ciano)) 55%, transparent);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--ac, var(--ciano)) 88%, #fff 6%),
    color-mix(in srgb, var(--ac, var(--ciano)) 74%, #000 10%));
  color: #04101c; font-weight: 600;
  box-shadow: 0 0 var(--halo) -4px var(--ac, var(--ciano)), inset 0 1px 0 #ffffff40;
  transition: transform .15s, box-shadow .2s, filter .2s;
}
button.acao:hover { transform: translateY(-1px); box-shadow: 0 0 var(--halo-forte) -3px var(--ac, var(--ciano)), inset 0 1px 0 #ffffff59; }
button.acao:active { transform: translateY(0); }
button.acao:disabled { opacity: .45; cursor: not-allowed; transform: none; }
button.acao.sec {
  background: color-mix(in srgb, var(--txt) 5%, transparent); color: var(--txt2);
  border-color: var(--linha); box-shadow: none; font-weight: 500;
}
button.acao.sec:hover { color: var(--txt); border-color: color-mix(in srgb, var(--ciano) 45%, transparent); }
button.acao.perigo { --ac: var(--vermelho); color: #fff;
  background: color-mix(in srgb, var(--vermelho) 16%, transparent); border-color: var(--vermelho); }
button.acao.pequeno { padding: 6px 11px; font-size: 12px; }

.chip {
  background: color-mix(in srgb, var(--txt) 5%, transparent); border: 1px solid var(--linha);
  color: var(--txt2); padding: 5px 11px; border-radius: 999px; font-size: 12px;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-family: inherit;
  transition: all .18s;
}
.chip:hover { color: var(--txt); border-color: color-mix(in srgb, var(--ciano) 50%, transparent); }
.chip.ativo {
  color: var(--ciano); border-color: var(--ciano);
  background: color-mix(in srgb, var(--ciano) 12%, transparent);
  box-shadow: 0 0 15px -7px var(--ciano); text-shadow: 0 0 10px color-mix(in srgb, var(--ciano) 50%, transparent);
}

input, select, textarea {
  background: var(--log-bg); color: var(--txt); border: 1px solid var(--linha);
  border-radius: 8px; padding: 8px 11px; font: inherit; font-size: 13px; width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--ac, var(--ciano));
  background: color-mix(in srgb, var(--ac, var(--ciano)) 7%, var(--log-bg));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ac, var(--ciano)) 18%, transparent),
              0 0 var(--halo-forte) -7px var(--ac, var(--ciano));
}
label { font-size: 12px; color: var(--txt2); display: block; margin-bottom: 4px; }
.campo { margin-bottom: 11px; }
.campo .ajuda { font-size: 11px; color: var(--txt3); margin-top: 3px; line-height: 1.45; }

/* ── tabelas ───────────────────────────────────────────────────────────── */

.tabela-rolagem { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
th {
  text-align: left; color: var(--txt3); font-weight: 500; font-size: 11px;
  text-transform: uppercase; letter-spacing: .07em; padding: 8px 10px;
  border-bottom: 1px solid var(--linha); white-space: nowrap;
}
td { padding: 8px 10px; border-bottom: 1px solid color-mix(in srgb, var(--linha) 60%, transparent);
     text-shadow: none; }
tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: color-mix(in srgb, var(--ciano) 5%, transparent); }
td.num, th.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }

/* ── alertas ───────────────────────────────────────────────────────────── */

.alerta {
  display: flex; gap: 11px; padding: 11px 13px; border-radius: 10px;
  border: 1px solid var(--bd); background: var(--fundo); margin-bottom: 9px;
  text-shadow: none;
}
.alerta.critico { --bd: var(--erro-bd);  --fundo: var(--erro-bg);  --c: var(--vermelho); }
.alerta.atencao { --bd: var(--aviso-bd); --fundo: var(--aviso-bg); --c: var(--amarelo); }
.alerta.info    { --bd: #3d9bff4d;       --fundo: #3d9bff12;       --c: var(--azul); }
.alerta .icone { flex: none; font-size: 15px; color: var(--c); }
.alerta .tit { font-weight: 600; font-size: 13px; color: var(--c);
               text-shadow: 0 0 12px color-mix(in srgb, var(--c) 45%, transparent); }
.alerta .det { color: var(--txt2); font-size: 12px; margin-top: 2px; }
.alerta .aco { color: var(--txt3); font-size: 11.5px; margin-top: 5px;
               border-left: 2px solid color-mix(in srgb, var(--c) 45%, transparent); padding-left: 8px; }

/* ── funil ─────────────────────────────────────────────────────────────── */

.funil { display: flex; flex-direction: column; gap: 7px; }
.funil .etapa { position: relative; }
.funil .barra {
  height: 38px; border-radius: 8px; display: flex; align-items: center;
  padding: 0 12px; gap: 10px; position: relative; overflow: hidden;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--c) 34%, transparent),
    color-mix(in srgb, var(--c) 12%, transparent));
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  box-shadow: inset 0 0 24px -14px var(--c);
  transition: width .7s cubic-bezier(.2,.8,.2,1);
}
.funil .rot { font-size: 12px; color: var(--txt); white-space: nowrap; }
.funil .qtd { margin-left: auto; font: 700 14px var(--mono); color: var(--c);
              text-shadow: 0 0 12px color-mix(in srgb, var(--c) 50%, transparent); }
.funil .queda { font-size: 11px; color: var(--txt3); padding-left: 12px; margin-top: 2px; }

/* ── mapa de calor ─────────────────────────────────────────────────────── */

.heat { display: grid; grid-template-columns: 34px repeat(24, 1fr); gap: 2px; font-size: 10px; }
.heat .cel { aspect-ratio: 1; border-radius: 3px; background: color-mix(in srgb, var(--txt) 5%, transparent); }
.heat .rot { color: var(--txt3); display: flex; align-items: center; justify-content: flex-end;
             padding-right: 5px; font-size: 10px; }
.heat .hora { color: var(--txt3); text-align: center; font-size: 9px; }

/* ── barra de plano (upgrade) ──────────────────────────────────────────── */

.planos { display: flex; gap: 10px; flex-wrap: wrap; }
.plano-op {
  flex: 1 1 210px; padding: 13px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--linha); background: var(--surf-card);
  backdrop-filter: var(--vidro-leve); -webkit-backdrop-filter: var(--vidro-leve);
  transition: all .22s;
}
.plano-op:hover { border-color: color-mix(in srgb, var(--ac) 50%, transparent); transform: translateY(-2px); }
.plano-op.escolhido {
  border-color: var(--ac); background: color-mix(in srgb, var(--ac) 9%, transparent);
  box-shadow: 0 0 var(--halo-forte) -10px var(--ac), inset 0 0 30px -22px var(--ac);
}
.plano-op h3 { margin: 0 0 4px; font-size: 14px; color: var(--ac); display: flex; align-items: center; gap: 7px; }
.plano-op ul { margin: 8px 0 0; padding-left: 17px; color: var(--txt3); font-size: 11.5px; line-height: 1.7; }
.plano-op.basico { --ac: var(--azul); }
.plano-op.plus   { --ac: var(--lima); }

/* ── gráficos ──────────────────────────────────────────────────────────── */

.grafico { position: relative; width: 100%; }
.grafico svg { display: block; width: 100%; height: auto; overflow: visible; }
.grafico .eixo { stroke: var(--linha); stroke-width: 1; }
.grafico .malha { stroke: color-mix(in srgb, var(--txt) 7%, transparent); stroke-width: 1;
                  stroke-dasharray: 2 4; }
/* Tamanho em unidades do viewBox: como a escala é uniforme, 11 aqui vira
   ~14 px numa tela larga e ~11 px no celular — cresce junto com o desenho. */
.grafico text { fill: var(--txt3); font: 11px var(--mono); }
.grafico .rotulo-eixo { fill: var(--txt3); font: 11px var(--mono); }

/* A dica flutuante é o que transforma o gráfico em consulta: sem ela, série
   longa vira desenho bonito e ilegível. */
.dica {
  position: fixed; z-index: 60; pointer-events: none; opacity: 0;
  background: var(--surf-forte); border: 1px solid var(--linha);
  border-radius: 9px; padding: 8px 11px; font-size: 11.5px; line-height: 1.55;
  backdrop-filter: var(--vidro); box-shadow: 0 14px 34px -16px #000, 0 0 0 1px #3d9bff1a;
  transition: opacity .12s; max-width: 260px;
}
.dica.visivel { opacity: 1; }
.dica b { color: var(--txt); }
.dica .lin { display: flex; gap: 9px; justify-content: space-between; }
.dica .lin span:last-child { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.legenda { display: flex; gap: 13px; flex-wrap: wrap; font-size: 11px; color: var(--txt3);
           margin-top: 9px; text-shadow: none; }
.legenda i { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 5px;
             box-shadow: 0 0 9px 0 currentColor; }

/* ── transições fluidas entre telas ────────────────────────────────────── */

.tela { animation: entrar .38s cubic-bezier(.2,.8,.2,1) both; }
@keyframes entrar { from { opacity: 0; transform: translateY(10px) scale(.995); filter: blur(4px); }
                    to   { opacity: 1; transform: none; filter: none; } }
.tela.saindo { animation: sair .2s ease-in both; }
@keyframes sair { to { opacity: 0; transform: translateY(-6px); filter: blur(3px); } }

/* Entrada escalonada: os cartões chegam em cascata, e o olho acompanha a
   ordem em vez de receber a grade inteira de uma vez. */
.cascata > * { animation: subir .45s cubic-bezier(.2,.8,.2,1) both; }
@keyframes subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Número que muda ganha um flash na cor da direção — é o "tick" do terminal. */
@keyframes tickSobe  { 0% { color: var(--verde);    text-shadow: 0 0 22px var(--verde); } }
@keyframes tickDesce { 0% { color: var(--vermelho); text-shadow: 0 0 22px var(--vermelho); } }
.tick-sobe  { animation: tickSobe .9s ease-out; }
.tick-desce { animation: tickDesce .9s ease-out; }

/* Carregando: a onda percorre o vidro em vez de girar um disco. */
.esqueleto {
  border-radius: 9px; background: linear-gradient(90deg,
    color-mix(in srgb, var(--txt) 4%, transparent),
    color-mix(in srgb, var(--txt) 10%, transparent),
    color-mix(in srgb, var(--txt) 4%, transparent));
  background-size: 220% 100%; animation: onda 1.5s linear infinite; height: 74px;
}
@keyframes onda { to { background-position: -220% 0; } }

.vazio { text-align: center; padding: 34px 16px; color: var(--txt3); font-size: 13px; }
.vazio .icone { font-size: 30px; display: block; margin-bottom: 9px; opacity: .55; }

/* ── login ─────────────────────────────────────────────────────────────── */

.login {
  max-width: 380px; margin: 12vh auto; padding: 26px;
  background: var(--surf-forte); backdrop-filter: var(--vidro);
  -webkit-backdrop-filter: var(--vidro);
  border: 1px solid var(--linha); border-radius: 15px;
  box-shadow: 0 24px 60px -28px #000, 0 0 0 1px #3d9bff1f;
}
.login h2 { margin: 0 0 5px; font-size: 17px; }
.login p { color: var(--txt3); font-size: 12.5px; margin: 0 0 16px; }

/* ── powered by (3D) ───────────────────────────────────────────────────── */

.powered {
  display: flex; align-items: center; gap: 9px; justify-content: center;
  padding: 26px 0 8px; color: var(--txt3); font-size: 11px; letter-spacing: .04em;
}
.powered canvas { width: 48px; height: 48px; display: block; }
.powered .marca {
  font: 600 12px var(--mono); letter-spacing: .12em; text-transform: uppercase;
  background: linear-gradient(92deg, var(--ciano), var(--roxo) 45%, var(--verde));
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 12px color-mix(in srgb, var(--ciano) 35%, transparent));
}

/* ── fundo fluido ──────────────────────────────────────────────────────── */

#fundo-fluido {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(1200px 700px at 15% -10%, #0d1b33 0%, transparent 60%),
              radial-gradient(900px 600px at 90% 10%, #1a0e2e 0%, transparent 55%),
              var(--bg);
}
:root[data-tema="claro"] #fundo-fluido {
  background: radial-gradient(1200px 700px at 15% -10%, #dce9ff 0%, transparent 60%),
              radial-gradient(900px 600px at 90% 10%, #f0e6ff 0%, transparent 55%),
              var(--bg);
}

.mono { font-family: var(--mono); }
.dim  { color: var(--txt3); }
.certo{ color: var(--verde); }
.errado { color: var(--vermelho); }
.linha-fina { border: none; border-top: 1px solid var(--linha); margin: 14px 0; }
.rolagem-fina { scrollbar-width: thin; scrollbar-color: var(--linha) transparent; }

/* Quem pediu menos movimento não recebe halo pulsando nem onda correndo. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important;
                            transition-duration: .001ms !important; }
  .cartao::after { display: none; }
}

@media (max-width: 720px) {
  main { padding: 14px 12px 44px; }
  header { padding: 10px 13px; }
  nav { padding: 0 10px; top: 45px; }
  .grade-cartoes { grid-template-columns: 1fr; }
  .heat { grid-template-columns: 26px repeat(24, 1fr); gap: 1px; }
}

/* ── fita de cotações ───────────────────────────────────────────────────
   A tira que corre no topo do terminal. A lista é duplicada no JS e o trilho
   anda metade da própria largura: quando a primeira cópia sai de cena, a
   segunda está exatamente no lugar dela e o laço não aparece. */
.fita {
  overflow: hidden; position: relative; border-radius: 10px;
  border: 1px solid var(--linha); background: var(--log-bg);
  padding: 9px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.fita-trilho { display: flex; gap: 30px; width: max-content; animation: correr 46s linear infinite; }
.fita:hover .fita-trilho { animation-play-state: paused; }
@keyframes correr { to { transform: translateX(-50%); } }
.fita-item { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.fita-rot { font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--txt3); }
.fita-val { font: 700 14px var(--mono); font-variant-numeric: tabular-nums;
            text-shadow: 0 0 14px color-mix(in srgb, currentColor 45%, transparent); }
/* Fita parada é fita quebrada: quem pediu menos movimento vê a lista inteira
   quieta, e ela quebra em várias linhas em vez de sumir para fora da tela. */
@media (prefers-reduced-motion: reduce) {
  .fita-trilho { animation: none; flex-wrap: wrap; width: 100%; padding: 0 12px; gap: 8px 24px; }
}

/* ── faixa de sessão (abertura/máxima/mínima/fechamento) ──────────────── */
.sessao { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 1px;
          background: var(--linha); border: 1px solid var(--linha); border-radius: 9px; overflow: hidden; }
.sessao div { background: var(--bg2); padding: 9px 11px; }
.sessao .r { font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--txt3); }
.sessao .v { font: 700 16px var(--mono); font-variant-numeric: tabular-nums; margin-top: 2px; }

/* Aviso de modo exemplo: precisa ser impossível confundir com dado real. */
.exemplo-aviso {
  display: flex; align-items: center; gap: 10px; margin-bottom: 14px;
  border: 1px dashed var(--amarelo); border-radius: 10px; padding: 10px 14px;
  background: repeating-linear-gradient(45deg, #ffc65c0f 0 10px, transparent 10px 20px);
  color: var(--amarelo); font-size: 12.5px;
}
.exemplo-aviso b { letter-spacing: .06em; text-transform: uppercase; font-size: 11px; }