/* Mesa — tema v2 (camada por cima de app.css; nenhum processo ou tela mudou, só o visual).
   Diretrizes aplicadas (guias open-design: redesign-skill, od-craft/anti-ai-slop, typography, color, state-coverage, accessibility):
   fonte com personalidade e números tabulares · fundo preto puro trocado por um escuro tingido · UM acento (azul dessaturado), verde/vermelho só para
   ganho/perda · sombras tingidas · ícones em tom translúcido (sem 7 cores sólidas) · títulos em frase (sem caixa-alta) · estados de foco, hover e pressionado
   · entrada escalonada de blocos · movimento reduzido respeitado · contraste AA. Fonte Geist (SIL OFL 1.1) hospedada aqui, sem CDN (a CSP não deixa). */
@font-face{font-family:"Geist";src:url("/fonts/geist.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Geist Mono";src:url("/fonts/geist-mono.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --bg:#090c12;--g1:#10151f;--g2:#182030;--g3:#242d41;--sep:rgba(150,166,196,.15);
  --tx:#eef2f9;--tx2:rgba(212,222,240,.68);--tx3:rgba(196,208,232,.42);
  --azul:#6aa3ff;--verde:#34d27f;--vermelho:#ff6259;--laranja:#f2a63f;--amarelo:#e9c84a;--roxo:#b49aff;--anil:#8b97ff;
  --acento-tx:#071225;                       /* texto sobre o acento: contraste AA */
  --r:18px;--r-peq:10px;--alvo:44px;
  --fonte:"Geist",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Consolas,monospace;
  --anel:inset 0 0 0 1px rgba(255,255,255,.05);
  --sombra:0 18px 36px -22px rgba(2,6,18,.95);
  --suave:cubic-bezier(.2,.8,.2,1);
}
html{background:var(--bg)}
body{
  font-family:var(--fonte);font-size:16.5px;line-height:1.4;letter-spacing:-.011em;font-feature-settings:"tnum" 1,"cv11" 1,"ss01" 1;
  background:
    radial-gradient(900px 520px at 10% -12%,rgba(106,163,255,.10),transparent 62%),
    radial-gradient(760px 520px at 105% 2%,rgba(52,210,127,.05),transparent 58%),
    var(--bg);
  background-attachment:fixed;
}
h1,h2,h3{text-wrap:balance}p,li{text-wrap:pretty}
.mono,.mono *,code{font-family:var(--mono)}
.titulo-grande{font-size:clamp(30px,5.2vw,40px);font-weight:650;letter-spacing:-.035em;line-height:1.05}
.subtitulo{font-size:15.5px;max-width:52ch}
:focus-visible{outline:2px solid var(--azul);outline-offset:3px;box-shadow:0 0 0 5px rgba(106,163,255,.22)}

/* ---------- casca ---------- */
.topo{background:rgba(9,12,18,.74);border-bottom-color:transparent}
.topo.rolou{border-bottom-color:var(--sep)}
.chip{border-radius:8px;background:var(--g2);box-shadow:var(--anel);font-weight:600}
.chip-sim,.chip-aviso{background:rgba(242,166,63,.13);color:var(--laranja)}
.parar{border-radius:10px;background:rgba(255,98,89,.14);box-shadow:inset 0 0 0 1px rgba(255,98,89,.32);transition:background .16s,transform .12s var(--suave)}
.parar:hover{background:rgba(255,98,89,.24)}.parar:active{transform:scale(.97)}
.parar.parado{background:var(--vermelho);color:#1c0503;box-shadow:none}
.faixa{border-radius:12px}
.faixa-info{background:rgba(106,163,255,.12);color:#c5dbff}

/* barra inferior (celular): 6 abas lado a lado, sem quebra de linha */
.inferior{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-columns:none;padding:6px 6px env(safe-area-inset-bottom);
  background:rgba(12,16,24,.84);border-top-color:var(--sep)}
.nav-item{position:relative;font-size:10.5px;letter-spacing:0;white-space:nowrap;transition:color .16s}
.nav-item .ico{width:24px;height:24px;stroke-width:1.7;transition:transform .2s var(--suave)}
.nav-item.ativo{color:var(--azul)}
.nav-item.ativo .ico{fill:rgba(106,163,255,.2);transform:translateY(-1px)}
.inferior .nav-item.ativo::before{content:"";position:absolute;top:-6px;width:22px;height:3px;border-radius:0 0 3px 3px;background:var(--azul)}

/* ---------- superfícies: cartões, listas, blocos ---------- */
.cartao,.op,.tile,.lista-ios,.velas-graf,.mapa-resumo>div,.leit-num>div{background:var(--g1);box-shadow:var(--anel),var(--sombra)}
.leit-num>div,.mapa-resumo>div{box-shadow:var(--anel);background:var(--g2)}
.secao-t{font-size:14px;text-transform:none;letter-spacing:-.005em;color:var(--tx2);font-weight:600}
.secao-t a,.secao-t button{color:var(--azul);font-weight:600}
.cartao h2{font-size:14px;text-transform:none;letter-spacing:0}
.lista-ios>li+li::before{border-top-color:var(--sep)}
.linha-ios{transition:background .14s}
button.linha-ios:active{background:var(--g2)}
@media (hover:hover){button.linha-ios:hover{background:rgba(255,255,255,.035)}button.tile:hover{background:var(--g2);transform:translateY(-1px)}}
.tile{transition:background .16s,transform .2s var(--suave)}
.tile-v,.hero-valor,.velas-preco{font-feature-settings:"tnum" 1,"zero" 0}

/* ícones: tom translúcido com o glifo colorido (um só peso visual, sem blocos sólidos de 7 cores) */
.ic{background:rgba(255,255,255,.06);box-shadow:var(--anel);border-radius:10px}
.ic-verde{background:rgba(52,210,127,.14);color:var(--verde)}.ic-vermelho{background:rgba(255,98,89,.14);color:var(--vermelho)}
.ic-azul{background:rgba(106,163,255,.14);color:var(--azul)}.ic-laranja{background:rgba(242,166,63,.14);color:var(--laranja)}
.ic-roxo{background:rgba(180,154,255,.14);color:var(--roxo)}.ic-anil{background:rgba(139,151,255,.14);color:var(--anil)}.ic-cinza{background:rgba(255,255,255,.07);color:var(--tx2)}

/* saldo (hero): um brilho do acento, sem gradiente roxo→azul */
.hero-saldo{background:radial-gradient(120% 100% at 0% 0%,rgba(106,163,255,.20),transparent 58%),var(--g1);box-shadow:var(--anel),var(--sombra)}
.hero-valor{font-weight:620;letter-spacing:-.045em}
.pilula{border-radius:8px}
.pilula-pos{background:rgba(52,210,127,.14)}.pilula-neg{background:rgba(255,98,89,.14)}
.g-linha{stroke:var(--azul)}.g-pt{stroke:var(--bg)}.anel-arco{stroke:var(--azul)}

/* ---------- controles ---------- */
.btn{border-radius:12px;font-weight:600;letter-spacing:-.012em;background:var(--g2);box-shadow:var(--anel);color:var(--azul);
  transition:background .16s,transform .12s var(--suave),box-shadow .16s,filter .16s}
.btn:active{transform:scale(.975) translateY(1px);opacity:1}
@media (hover:hover){.btn:hover{background:var(--g3)}.btn-primario:hover{filter:brightness(1.07);background:var(--azul)}}
.btn-primario{background:var(--azul);color:var(--acento-tx);box-shadow:0 10px 24px -12px rgba(106,163,255,.75)}
.btn-perigo{color:var(--vermelho)}
.btn-peq{border-radius:10px}
.seg{background:var(--g1);border-radius:12px;padding:3px;box-shadow:var(--anel)}
.seg button{border-radius:9px;color:var(--tx2);transition:background .16s,color .16s}
.seg button[aria-pressed="true"]{background:var(--g3);color:var(--tx);box-shadow:var(--anel),0 4px 10px -6px rgba(0,0,0,.8)}
@media (hover:hover){.seg button:hover{color:var(--tx)}}
input[type=password],input[type=number],input[type=text],select{background:var(--g2);border-radius:12px;box-shadow:var(--anel);transition:box-shadow .16s}
input:focus,select:focus{box-shadow:inset 0 0 0 1.5px var(--azul)}
.chave.on{background:var(--verde)}

/* ---------- barra lateral (PC) ---------- */
@media (min-width:900px){
  .lateral{background:linear-gradient(180deg,rgba(16,21,31,.92),rgba(12,16,24,.96));border-right:1px solid var(--sep)}
  .marca{font-size:21px;font-weight:650;letter-spacing:-.03em}
  .lateral .nav-item{position:relative;color:var(--tx2);font-weight:550;border-radius:var(--r-peq);transition:background .15s,color .15s}
  .lateral .nav-item .ico{color:var(--tx3);transition:color .15s}
  .lateral .nav-item:hover{background:rgba(255,255,255,.05);color:var(--tx)}
  .lateral .nav-item.ativo{background:rgba(106,163,255,.12);color:var(--tx)}
  .lateral .nav-item.ativo .ico{color:var(--azul);fill:rgba(106,163,255,.2)}
  .lateral .nav-item.ativo::before{content:"";position:absolute;left:-12px;top:10px;bottom:10px;width:3px;border-radius:0 3px 3px 0;background:var(--azul)}
  #tela{padding:12px 40px 56px}
  .tela{max-width:1040px}
}

/* ---------- janelas e avisos ---------- */
.veu{background:rgba(3,6,14,.62);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.folha{background:var(--g1);border-radius:22px 22px 0 0;box-shadow:var(--anel),0 -20px 60px -20px rgba(0,0,0,.8)}
@media (min-width:900px){.veu{align-items:center}.folha{border-radius:22px;max-height:80dvh}}
.gate-card{background:var(--g1);box-shadow:var(--anel),var(--sombra)}

/* ---------- estados: carregando, vazio, erro ---------- */
.esqueleto{border-radius:var(--r);background:linear-gradient(100deg,var(--g1) 30%,var(--g2) 50%,var(--g1) 70%);background-size:220% 100%;animation:brilho 1.4s ease-in-out infinite}
@keyframes brilho{from{background-position:120% 0}to{background-position:-120% 0}}
.msg{font-size:14px;line-height:1.4}.msg-erro{color:#ffb4ae}.msg-ok{color:var(--verde)}

/* ---------- Mercado ---------- */
.v-alta{stroke:var(--verde);fill:var(--verde)}.v-baixa{stroke:var(--vermelho);fill:var(--vermelho)}
.v-ema9{stroke:#e9c84a}.v-ema21{stroke:var(--azul)}.lg9{background:#e9c84a}.lg21{background:var(--azul)}
.v-alvo,.v-stop{opacity:.9}
.vies{border-radius:8px}
.vies-comprar{background:rgba(52,210,127,.15);color:var(--verde)}.vies-evitar{background:rgba(255,98,89,.15);color:#ff8a82}.vies-aguardar{background:rgba(233,200,74,.14);color:var(--amarelo)}
.selo-pregao{border-radius:8px}.selo-pregao.aberto{background:rgba(52,210,127,.14);color:var(--verde)}
.velas-graf{padding:10px 8px 6px}
.mosaico{background:#060910;box-shadow:var(--anel)}
.m-tile rect{transition:filter .15s}.m-tile:hover rect{filter:brightness(1.18)}
.m-p4{fill:#12935b}.m-p3{fill:#157a4d}.m-p2{fill:#1b6144}.m-p1{fill:#224f3b}.m-z{fill:#343a48}
.m-n1{fill:#573a3d}.m-n2{fill:#7c3238}.m-n3{fill:#a22b30}.m-n4{fill:#c9222a}
.lg-cor.m-p4{background:#12935b}.lg-cor.m-p3{background:#157a4d}.lg-cor.m-p2{background:#1b6144}.lg-cor.m-p1{background:#224f3b}.lg-cor.m-z{background:#343a48}
.lg-cor.m-n1{background:#573a3d}.lg-cor.m-n2{background:#7c3238}.lg-cor.m-n3{background:#a22b30}.lg-cor.m-n4{background:#c9222a}
.mapa-legenda{border-radius:8px;overflow:hidden}
.cartao.simples{border:0;box-shadow:inset 0 0 0 1px rgba(106,163,255,.32),var(--sombra);background:linear-gradient(180deg,rgba(106,163,255,.07),transparent 70%),var(--g1)}

.sem-anim,.sem-anim *{animation:none!important}
/* ---------- entrada escalonada (só opacidade e transform) ---------- */
.tela>*,.grade-pc>.secao>*{animation:subir .5s var(--suave) both}
.tela>*:nth-child(2),.grade-pc>.secao>*:nth-child(2){animation-delay:.04s}
.tela>*:nth-child(3),.grade-pc>.secao>*:nth-child(3){animation-delay:.08s}
.tela>*:nth-child(4),.grade-pc>.secao>*:nth-child(4){animation-delay:.12s}
.tela>*:nth-child(n+5),.grade-pc>.secao>*:nth-child(n+5){animation-delay:.16s}
@keyframes subir{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

.mapa-resumo>.mapa-fonte{background:none;box-shadow:none;padding:2px 0 0}
.mapa-resumo{align-items:stretch}

/* ---------- Reunião: chat de tela cheia ---------- */
.tela-chat{gap:10px;height:calc(100dvh - 142px - env(safe-area-inset-bottom));min-height:420px}
#tela:has(.tela-chat){padding-bottom:calc(74px + env(safe-area-inset-bottom))}
@media (min-width:900px){.tela-chat{height:calc(100dvh - 92px)}#tela:has(.tela-chat){padding-bottom:20px}}
.chat-cab{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;flex-wrap:wrap}
.chat-cab .titulo-grande{font-size:clamp(26px,4.6vw,34px);margin-top:0}
.chat-acoes{display:flex;gap:6px;flex-wrap:wrap}
.chat-acoes .btn-peq{min-height:38px;padding:0 14px;position:relative}
.selo-n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;margin-left:8px;border-radius:9px;background:var(--vermelho);color:#1c0503;font-size:11px;font-weight:700}
.chat-corpo{flex:1;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:14px 4px 10px;scroll-behavior:smooth;overscroll-behavior:contain}
.chat-corpo:focus-visible{outline-offset:-2px}
.msg-sistema{align-self:center;max-width:90%;text-align:center;font-size:12.5px;color:var(--tx3);display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center}
.aviso-ant{align-self:stretch;background:rgba(242,166,63,.1);border-radius:12px;padding:6px 12px;font-size:14px;color:var(--laranja)}
.msg-linha{display:flex;gap:10px;align-items:flex-start;max-width:min(100%,680px)}
.avatar{flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;box-shadow:var(--anel)}
.avatar svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.av-azul{background:rgba(106,163,255,.14);color:var(--azul)}.av-anil{background:rgba(139,151,255,.14);color:var(--anil)}.av-vermelho{background:rgba(255,98,89,.14);color:var(--vermelho)}
.av-laranja{background:rgba(242,166,63,.14);color:var(--laranja)}.av-roxo{background:rgba(180,154,255,.14);color:var(--roxo)}
.balao2{min-width:0;background:var(--g1);box-shadow:var(--anel);border-radius:6px 18px 18px 18px;padding:10px 14px 12px;animation:subir .35s var(--suave) both}
.balao2-espera{opacity:.72}
.bl-topo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.bl-topo b{font-size:14px}
.bl-tag{font-size:12px;font-weight:650;padding:1px 8px;border-radius:7px;background:rgba(255,255,255,.07);color:var(--tx2)}
.bl-resumo{font-size:15.5px;line-height:1.45;color:var(--tx)}
.bl-pontos{margin:6px 0 0;padding-left:18px;font-size:14px;line-height:1.45;color:var(--tx2)}
.bl-risco{margin-top:6px;font-size:13.5px;line-height:1.4;color:var(--laranja)}
.bl-nota{font-size:13px;color:var(--tx3)}
.digitando{display:inline-flex;gap:4px;vertical-align:middle}.digitando i{width:7px;height:7px;border-radius:50%;background:var(--tx2);animation:pulsa 1.2s ease-in-out infinite}
.digitando i:nth-child(2){animation-delay:.15s}.digitando i:nth-child(3){animation-delay:.3s}
@keyframes pulsa{0%,60%,100%{opacity:.25;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
.progresso2{align-self:stretch;background:var(--g1);box-shadow:var(--anel);border-radius:16px;padding:14px 16px}
.pg-topo{display:flex;justify-content:space-between;gap:8px;font-size:14px;color:var(--tx2)}.pg-topo b{color:var(--tx);font-size:15px}
.pg-etapas{list-style:none;margin:12px 0 10px;padding:0;display:flex;flex-direction:column;gap:10px}
.pg-etapas li{display:flex;gap:12px;align-items:flex-start;opacity:.55}.pg-etapas li.atual,.pg-etapas li.feita{opacity:1}
.pg-etapas small{display:block;color:var(--tx2);font-size:13px;line-height:1.35}.pg-etapas b{font-size:14.5px}
.pg-num{flex:none;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:700;background:var(--g3);color:var(--tx2)}
.pg-etapas li.atual .pg-num{background:var(--azul);color:var(--acento-tx);animation:respira 1.6s ease-in-out infinite}
.pg-etapas li.feita .pg-num{background:rgba(52,210,127,.18);color:var(--verde)}
@keyframes respira{50%{box-shadow:0 0 0 5px rgba(106,163,255,.22)}}
.pg-barra{height:4px;border-radius:2px;background:var(--g3);overflow:hidden}.pg-barra i{display:block;height:100%;width:40%;border-radius:2px;background:var(--azul);animation:corre 1.6s ease-in-out infinite}
@keyframes corre{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
.tempo{font-variant-numeric:tabular-nums;color:var(--tx);font-weight:650}
.vazio-chat{margin:auto;max-width:460px;text-align:center;display:flex;flex-direction:column;gap:10px;align-items:center;padding:10px}
.vazio-ic{width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:rgba(106,163,255,.12);color:var(--azul)}
.vazio-ic svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.vazio-lista{list-style:none;padding:0;margin:0;text-align:left;font-size:14.5px;line-height:1.5;color:var(--tx2)}.vazio-lista b{color:var(--tx)}
.chat-rodape{flex:none;display:flex;flex-direction:column;gap:6px;padding-top:8px;border-top:1px solid var(--sep)}
.chat-rodape .li-s{text-align:center;white-space:normal}
.chat-corpo .cartao.simples{align-self:stretch;max-width:680px}
@media (max-width:520px){.chat-cab{align-items:stretch}.chat-acoes{width:100%}.chat-acoes .btn-peq{flex:1}.msg-linha{max-width:100%}}

.tela-chat>.progresso2{flex:none}
@media (max-width:520px){.pg-etapas small{display:none}.pg-etapas{gap:6px;margin:8px 0}.progresso2{padding:10px 12px}}

.folha .li-s{white-space:normal}.folha .secao{margin-top:14px}.folha .secao-t{margin-bottom:4px}