/* TGestor — preto e ouro, a identidade da marca. Tema único, deliberado. */

:root{
  /* preto vira detalhe, nao fundo: marca, botao flutuante e texto sobre ouro */
  --preto:#17150F;

  --fundo:#FBFAF7;
  --painel:#FFFFFF;
  --painel-2:#F7F5F0;
  --painel-3:#EFECE3;
  --linha:#E7E2D7;
  --linha-forte:#D5CDBD;

  --ouro:#A87C11;        /* ouro legivel sobre branco: texto, borda, icone */
  --ouro-vivo:#D4A93A;   /* o ouro da marca: preenchimento */
  --ouro-claro:#E7C465;  /* hover de preenchimento */
  --ouro-fundo:#FBF3DF;
  --ouro-borda:#E4CE93;

  --texto:#25221B;
  --texto-2:#5E5951;
  --texto-3:#8A8478;

  --perigo:#B23528;
  --perigo-fundo:#FDF2F0;
  --perigo-borda:#F0CEC8;

  --r:14px;
  --r-g:20px;
  --sombra:0 1px 2px rgba(23,21,15,.05), 0 14px 30px -20px rgba(23,21,15,.35);
  --largura:1180px;
  --topo-h:62px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--fundo);
  color:var(--texto);
  font-family:"Sora",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-bottom:88px;
}
body.travado{overflow:hidden}
h1,h2,h3,h4{margin:0;line-height:1.15;font-weight:600;text-wrap:balance;color:var(--preto)}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input{font:inherit;color:inherit}
svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:2px solid var(--ouro);outline-offset:2px;border-radius:8px}

.mono{font-family:"JetBrains Mono",ui-monospace,monospace}
.olho{
  font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--texto-3);
}
.pular{position:absolute;left:-9999px}
.pular:focus{left:12px;top:12px;z-index:100;background:var(--ouro-vivo);color:var(--preto);padding:8px 14px;border-radius:8px}

/* ---------------- topo ---------------- */
.topo{
  position:sticky;top:0;z-index:40;height:var(--topo-h);
  display:flex;align-items:center;gap:12px;
  padding:0 16px;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--linha);
}
.marca{display:flex;align-items:center;gap:10px;flex:none}
.marca img{border-radius:7px;display:block}
.marca span{display:flex;flex-direction:column;line-height:1.1;text-align:left}
.marca b{font-family:"JetBrains Mono",monospace;font-size:12px;letter-spacing:.2em;font-weight:700;color:var(--ouro)}
.marca i{font-style:normal;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3)}

.busca-gatilho{
  flex:1 1 0;min-width:0;max-width:520px;margin:0 auto;
  display:flex;align-items:center;gap:10px;
  height:38px;padding:0 12px;
  background:var(--painel-2);border:1px solid var(--linha);border-radius:999px;
  color:var(--texto-3);font-size:13.5px;
}
.busca-gatilho:hover{border-color:var(--linha-forte);color:var(--texto-2)}
.busca-gatilho svg{width:16px;height:16px;flex:none}
.busca-gatilho span{flex:1;min-width:0;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.busca-gatilho kbd{
  font-family:"JetBrains Mono",monospace;font-size:11px;
  border:1px solid var(--linha-forte);border-radius:5px;padding:1px 6px;color:var(--texto-3);
}
.topo-acoes{display:flex;align-items:center;gap:8px;flex:none}
.btn-icone{
  width:36px;height:36px;display:grid;place-items:center;
  border:1px solid var(--linha);border-radius:10px;background:var(--painel-2);color:var(--texto-2);
}
.btn-icone:hover{border-color:var(--ouro-borda);color:var(--ouro)}
.btn-icone svg{width:17px;height:17px}
.btn-mesa{
  display:flex;align-items:center;gap:7px;height:36px;padding:0 14px;
  border-radius:10px;background:var(--ouro-vivo);color:var(--preto);
  font-size:13px;font-weight:600;text-decoration:none;
}
.btn-mesa svg{width:15px;height:15px;stroke-width:2.2}
.btn-mesa:hover{background:var(--ouro-claro)}
@media (max-width:640px){
  .topo{gap:10px;padding:0 12px}
  .busca-gatilho kbd{display:none}
  .btn-mesa span{display:none}
  .btn-mesa{padding:0 11px}
  .marca i{display:none}
}
@media (max-width:420px){
  /* Só encolhe. O nome não pode morar no CSS: ele muda a cada instância. */
  .marca b{font-size:11px;letter-spacing:.14em}
}

/* ---------------- capa ---------------- */
.capa{
  max-width:var(--largura);margin:0 auto;padding:38px 16px 30px;
  display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end;
}
.capa h1{
  font-size:clamp(28px,4.4vw,44px);font-weight:700;letter-spacing:-.02em;
  margin-top:10px;max-width:16ch;
}
.capa h1 em{font-style:normal;color:var(--ouro)}
.capa-btns{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.atalho{
  display:flex;align-items:center;gap:8px;
  padding:9px 15px;border-radius:999px;
  background:var(--painel-2);border:1px solid var(--linha);
  font-size:13.5px;font-weight:500;
}
.atalho:hover{border-color:var(--ouro);color:var(--ouro);transform:translateY(-1px)}
.atalho b{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--texto-3);font-weight:500}
.atalho:hover b{color:var(--ouro)}
.atalho.perigo{border-color:var(--perigo-borda)}
.atalho .ponto{width:6px;height:6px;border-radius:50%;background:var(--perigo);flex:none}

.capa-nums{display:flex;gap:26px;padding-bottom:6px}
.num b{display:block;font-size:30px;font-weight:700;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ouro)}
.num span{display:block;font-size:11px;color:var(--texto-3);font-family:"JetBrains Mono",monospace;letter-spacing:.04em}
@media (max-width:820px){
  .capa{grid-template-columns:1fr;gap:22px;padding-top:26px}
  .capa-nums{gap:20px;flex-wrap:wrap}
  .num b{font-size:24px}
}

/* ---------------- alertas ---------------- */
.alertas{max-width:var(--largura);margin:18px auto 0;padding:0 16px;display:flex;flex-direction:column;gap:8px}
.alerta{
  display:flex;align-items:center;gap:12px;
  padding:12px 16px;border-radius:var(--r);
  background:var(--perigo-fundo);border:1px solid var(--perigo-borda);
  text-align:left;width:100%;
}
.alerta:hover{border-color:var(--perigo)}
.alerta svg{width:18px;height:18px;color:var(--perigo);flex:none}
.alerta b{color:var(--perigo);font-size:13.5px;font-weight:600}
.alerta span{color:var(--texto-2);font-size:13px}
.alerta .seta{margin-left:auto;color:var(--texto-3);width:16px;height:16px}

/* ---------------- abas ---------------- */
.barra-nav{
  position:sticky;top:var(--topo-h);z-index:30;
  background:var(--fundo);border-bottom:1px solid var(--linha);
  padding:12px 0 13px;
}
.abas{
  max-width:var(--largura);margin:0 auto;padding:0 16px;
  display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;
}
.abas::-webkit-scrollbar{display:none}
.aba{
  flex:none;padding:9px 16px;border-radius:999px;
  border:1px solid var(--linha);background:var(--painel);
  font-size:13.5px;font-weight:500;color:var(--texto-2);white-space:nowrap;
}
.aba:hover{color:var(--texto);border-color:var(--linha-forte)}
.aba[aria-current="true"]{background:var(--ouro-vivo);border-color:var(--ouro-vivo);color:var(--preto);font-weight:600}

.filtros{max-width:var(--largura);margin:0 auto;padding:10px 16px 0;display:flex;flex-wrap:wrap;gap:6px}
.filtro{
  padding:6px 12px;border-radius:999px;font-size:12.5px;
  border:1px solid var(--linha);background:transparent;color:var(--texto-3);
}
.filtro:hover{color:var(--ouro);border-color:var(--ouro-borda)}
.filtro[aria-pressed="true"]{background:var(--ouro-fundo);border-color:var(--ouro);color:var(--ouro)}
@media (max-width:760px){
  /* barra fixa nao pode comer a tela do celular: os filtros viram uma faixa rolavel */
  .filtros{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-top:8px}
  .filtros::-webkit-scrollbar{display:none}
  .filtro{flex:none}
  .barra-nav{padding:10px 0 11px}
}

/* ---------------- palco ---------------- */
.palco{max-width:var(--largura);margin:0 auto;padding:18px 16px 40px}
.grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px}

.cartao{
  position:relative;text-align:left;width:100%;
  background:var(--painel);border:1px solid var(--linha);border-radius:var(--r-g);
  padding:18px 20px;display:flex;flex-direction:column;gap:12px;
  transition:border-color .16s ease, transform .16s ease, background .16s ease;
}
.cartao:hover{border-color:var(--ouro-borda);background:var(--painel-2);transform:translateY(-2px)}
.cartao-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.cartao h3{font-size:20px;font-weight:700;letter-spacing:-.01em}
.cartao .sub{font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3);margin-top:3px}
.cartao.apagado{opacity:.62;border-style:dashed}
.cartao.apagado:hover{opacity:1}

.selo{
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  padding:4px 9px;border-radius:999px;flex:none;white-space:nowrap;
  background:var(--ouro-fundo);color:var(--ouro);border:1px solid var(--ouro-borda);
}
.selo.cinza{background:var(--painel-3);color:var(--texto-3);border-color:var(--linha)}
.selo.perigo{background:var(--perigo-fundo);color:var(--perigo);border-color:var(--perigo-borda)}

.marcas{display:flex;flex-wrap:wrap;gap:5px}
.marcador{
  font-size:11.5px;padding:4px 9px;border-radius:7px;
  background:var(--painel-3);color:var(--texto-2);border:1px solid var(--linha);
}
.marcador.ouro{background:var(--ouro-fundo);color:var(--ouro);border-color:var(--ouro-borda)}

.barra-bancos{display:flex;gap:4px;flex-wrap:wrap;margin-top:2px}
.mini{
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.06em;
  padding:3px 7px;border-radius:5px;background:var(--painel-3);color:var(--texto-2);
}
.rodape-cartao{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:auto;padding-top:12px;border-top:1px solid var(--linha);
  font-size:12px;color:var(--texto-3);
}
.rodape-cartao .ver{color:var(--ouro);font-weight:600;display:flex;align-items:center;gap:5px}
.rodape-cartao .ver svg{width:13px;height:13px;stroke-width:2.4}

/* ---------------- título de tela ---------------- */
.titulo-tela{margin-bottom:18px;max-width:64ch}
.titulo-tela h2{font-size:24px;font-weight:700;letter-spacing:-.02em}
.titulo-tela p{margin-top:7px;font-size:14px;color:var(--texto-2)}

/* ---------------- matriz ---------------- */
.rolagem{overflow-x:auto;border:1px solid var(--linha);border-radius:var(--r-g);background:var(--painel)}
table.matriz{border-collapse:separate;border-spacing:0;width:100%;min-width:760px}
.matriz th,.matriz td{border-bottom:1px solid var(--linha);border-right:1px solid var(--linha);padding:0}
.matriz thead th{
  background:var(--painel-2);
  font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--texto-2);font-weight:500;padding:12px 10px;text-align:center;white-space:nowrap;
}
.matriz tbody th{
  position:sticky;left:0;z-index:4;background:var(--painel-2);
  text-align:left;padding:12px 14px;font-size:13.5px;font-weight:600;white-space:nowrap;
}
.matriz tbody th small{display:block;font-weight:400;font-size:11px;color:var(--texto-3);font-family:"JetBrains Mono",monospace}
.celula{width:100%;height:100%;min-height:52px;display:grid;place-items:center;gap:2px;padding:8px 6px}
.celula.tem{background:rgba(212,169,58,.16)}
.celula.tem:hover{background:rgba(212,169,58,.32)}
.celula.vazia{color:var(--texto-3)}
.celula .qtd{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--ouro);font-weight:700}
.celula .prod{font-size:9.5px;color:var(--texto-3);text-align:center;line-height:1.25;max-width:96px}
.matriz .canto{position:sticky;left:0;z-index:6;background:var(--painel-2)}
.legenda{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:var(--texto-3)}
.legenda i{display:inline-block;width:12px;height:12px;border-radius:4px;vertical-align:-2px;margin-right:6px}

/* ---------------- passos ---------------- */
.passos{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.passo{
  background:var(--painel);border:1px solid var(--linha);border-radius:var(--r-g);
  padding:20px;display:flex;flex-direction:column;gap:10px;text-align:left;
}
.passo:hover{border-color:var(--ouro-borda)}
.passo .n{
  width:28px;height:28px;border-radius:9px;display:grid;place-items:center;
  background:var(--ouro-fundo);border:1px solid var(--ouro-borda);
  font-family:"JetBrains Mono",monospace;font-size:12px;font-weight:700;color:var(--ouro);
}
.passo h3{font-size:16px;font-weight:600}
.passo p{font-size:13.5px;color:var(--texto-2)}
.passo .ver{margin-top:auto;color:var(--ouro);font-size:12.5px;font-weight:600}

/* ---------------- sobreposições ---------------- */
.sobreposicao{
  position:fixed;inset:0;z-index:60;
  background:rgba(23,21,15,.42);backdrop-filter:blur(6px);
  display:flex;
}
.sobreposicao[hidden]{display:none}

.paleta{
  margin:auto auto;width:min(640px,94vw);max-height:76vh;margin-top:10vh;
  background:var(--painel);border:1px solid var(--linha-forte);border-radius:var(--r-g);
  box-shadow:var(--sombra);display:flex;flex-direction:column;overflow:hidden;
}
.paleta-campo{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--linha)}
.paleta-campo svg{width:19px;height:19px;color:var(--texto-3);flex:none}
.paleta-campo input{flex:1;background:none;border:none;outline:none;font-size:17px}
.paleta-campo input::placeholder{color:var(--texto-3)}
.paleta-lista{overflow-y:auto;padding:8px}
.res{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:11px 12px;border-radius:11px;
}
.res:hover,.res.ativo{background:var(--painel-3)}
.res .tipo{
  font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ouro);border:1px solid var(--ouro-borda);border-radius:5px;padding:2px 6px;flex:none;
}
.res .txt{flex:1;min-width:0}
.res .txt b{display:block;font-size:14.5px;font-weight:600}
.res .txt span{display:block;font-size:12px;color:var(--texto-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vazio-msg{padding:26px 18px;text-align:center;color:var(--texto-3);font-size:13.5px}

.gaveta{
  margin-left:auto;width:min(540px,100vw);height:100%;
  background:var(--painel);border-left:1px solid var(--linha-forte);
  display:flex;flex-direction:column;overflow:hidden;
  animation:entrar .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes entrar{from{transform:translateX(28px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.gaveta{animation:none}}
.gaveta-topo{
  display:flex;align-items:flex-start;gap:12px;
  padding:20px 22px 16px;border-bottom:1px solid var(--linha);
}
.gaveta-topo h2{font-size:24px;font-weight:700;letter-spacing:-.02em}
.gaveta-corpo{flex:1;overflow-y:auto;padding:20px 22px 26px;display:flex;flex-direction:column;gap:20px}
.gaveta-pe{
  display:flex;gap:8px;padding:14px 22px;border-top:1px solid var(--linha);
  background:var(--painel-2);flex-wrap:wrap;
}

.modal{
  margin:auto;width:min(760px,94vw);max-height:88vh;
  background:var(--painel);border:1px solid var(--linha-forte);border-radius:var(--r-g);
  box-shadow:var(--sombra);display:flex;flex-direction:column;overflow:hidden;
}
.modal-topo{display:flex;align-items:center;gap:12px;padding:18px 22px;border-bottom:1px solid var(--linha)}
.modal-topo h2{font-size:19px;font-weight:600;flex:1}
.modal-corpo{overflow-y:auto;padding:22px;display:flex;flex-direction:column;gap:18px}
.modal-pe{display:flex;gap:8px;padding:14px 22px;border-top:1px solid var(--linha);background:var(--painel-2);flex-wrap:wrap}

/* ---------------- blocos de conteúdo ---------------- */
.bloco h4{
  font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--texto-3);margin-bottom:10px;font-weight:500;
}
.lista-check li,.lista-aviso li{display:grid;grid-template-columns:16px 1fr;gap:10px;font-size:14px;padding:5px 0;align-items:start}
.lista-check svg{width:14px;height:14px;margin-top:5px;color:var(--ouro);stroke-width:2.8}
.lista-aviso svg{width:14px;height:14px;margin-top:5px;color:var(--texto-3);stroke-width:2.2}
.lista-aviso li{color:var(--texto-2)}

.dados{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--linha);border:1px solid var(--linha);border-radius:var(--r);overflow:hidden}
.dado{background:var(--painel-2);padding:12px 14px}
.dado span{display:block;font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--texto-3)}
.dado b{display:block;font-size:14px;font-weight:600;margin-top:3px}

.btn{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  padding:11px 16px;border-radius:11px;font-size:13.5px;font-weight:600;
  border:1px solid var(--linha-forte);background:var(--painel-3);color:var(--texto);
}
.btn:hover{border-color:var(--ouro-borda);color:var(--ouro)}
.btn svg{width:15px;height:15px;stroke-width:2.2}
.btn.cheio{background:var(--ouro-vivo);border-color:var(--ouro-vivo);color:var(--preto)}
.btn.cheio:hover{background:var(--ouro-claro);color:var(--preto)}
.btn.largo{flex:1}
.btn.ok{border-color:var(--ouro);color:var(--ouro)}

.link-seco{color:var(--texto-3);font-size:12px;text-decoration:underline;text-underline-offset:3px}
.link-seco:hover{color:var(--ouro)}

.oferta-linha{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:13px 14px;border-radius:var(--r);border:1px solid var(--linha);background:var(--painel-2);
}
.oferta-linha:hover{border-color:var(--ouro-borda)}
.oferta-linha b{font-size:15px;font-weight:600}
.oferta-linha .det{flex:1;min-width:0}
.oferta-linha .det span{display:block;font-size:12px;color:var(--texto-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.oferta-linha .seta{width:15px;height:15px;color:var(--texto-3);flex:none}
.pilha{display:flex;flex-direction:column;gap:8px}

/* fluxo */
.fluxo{display:flex;flex-direction:column;gap:0}
.etapa{display:grid;grid-template-columns:26px 1fr auto;gap:14px;align-items:start;padding:11px 0;position:relative}
.etapa+.etapa{border-top:1px solid var(--linha)}
.etapa .bolha{
  width:24px;height:24px;border-radius:50%;display:grid;place-items:center;
  background:var(--painel-3);border:1px solid var(--linha-forte);
  font-family:"JetBrains Mono",monospace;font-size:10px;color:var(--texto-2);
}
.etapa.premium .bolha{background:var(--ouro-fundo);border-color:var(--ouro-borda);color:var(--ouro)}
.etapa b{font-size:14px;font-weight:500;display:block}
.etapa small{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--texto-3)}
.etapa .sla{
  font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:700;color:var(--ouro);
  background:var(--ouro-fundo);border:1px solid var(--ouro-borda);border-radius:6px;padding:3px 8px;
}

/* gerador */
.gerador{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start}
.gerador canvas{width:270px;height:auto;border-radius:var(--r);border:1px solid var(--linha);display:block;background:#000}
.gerador-lado{display:flex;flex-direction:column;gap:14px;min-width:0}
.formatos{display:flex;gap:6px;flex-wrap:wrap}
.zap{
  background:var(--painel-2);border:1px solid var(--linha);border-radius:var(--r);
  padding:14px;font-size:12.5px;line-height:1.6;white-space:pre-wrap;color:var(--texto-2);
  max-height:230px;overflow-y:auto;font-family:"JetBrains Mono",monospace;
}
@media (max-width:700px){
  .gerador{grid-template-columns:1fr}
  .gerador canvas{width:100%;max-width:300px;margin:0 auto}
}

/* perfil */
.escolhas{display:flex;flex-wrap:wrap;gap:8px}
.escolha{
  padding:9px 15px;border-radius:999px;border:1px solid var(--linha);
  background:var(--painel-2);font-size:13.5px;color:var(--texto-2);
}
.escolha[aria-pressed="true"]{background:var(--ouro-vivo);border-color:var(--ouro-vivo);color:var(--preto);font-weight:600}

/* ---------------- rodapé e flutuante ---------------- */
.rodape{
  max-width:var(--largura);margin:0 auto;padding:24px 16px 40px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--linha);color:var(--texto-3);font-size:12px;
}
.rodape img{border-radius:6px;opacity:.75}

.flutuante{
  position:fixed;right:16px;bottom:16px;z-index:50;
  display:flex;align-items:center;gap:9px;
  padding:13px 18px;border-radius:999px;
  background:var(--preto);color:var(--ouro-vivo);font-size:13.5px;font-weight:700;
  box-shadow:0 10px 30px -10px rgba(23,21,15,.55);
}
.flutuante:hover{background:#000}
.flutuante svg{width:17px;height:17px;stroke-width:2.3}
@media (max-width:640px){ .flutuante span{display:none} .flutuante{padding:15px} }

.aviso-toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:80;
  background:var(--preto);color:#FFFFFF;font-size:13.5px;font-weight:600;
  padding:11px 20px;border-radius:999px;box-shadow:var(--sombra);
}

/* ---------------- área de configurações ---------------- */
.aba-config{border-style:dashed}

.sub-abas{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.sub-aba{
  padding:7px 14px;border-radius:9px;font-size:13px;font-weight:500;
  border:1px solid var(--linha);background:var(--painel);color:var(--texto-2);
}
.sub-aba:hover{border-color:var(--linha-forte);color:var(--texto)}
.sub-aba[aria-current="true"]{background:var(--preto);border-color:var(--preto);color:#FFFFFF}

.barra-adm{display:flex;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.busca-adm{
  flex:1;min-width:200px;padding:10px 14px;border-radius:11px;
  border:1px solid var(--linha-forte);background:var(--painel);color:var(--texto);font-size:14px;
}
.busca-adm::placeholder{color:var(--texto-3)}

.lista-adm{gap:6px}
.linha-adm{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:13px 16px;border-radius:12px;border:1px solid var(--linha);background:var(--painel);
}
.linha-adm:hover{border-color:var(--ouro-borda);background:var(--painel-2)}
.linha-adm .det{flex:1;min-width:0}
.linha-adm .det b{display:block;font-size:14.5px;font-weight:600}
.linha-adm .det span{display:block;font-size:12.5px;color:var(--texto-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linha-adm .seta{width:15px;height:15px;color:var(--texto-3);flex:none}
.nada{padding:26px 4px;color:var(--texto-3);font-size:14px}
.pendente{color:var(--ouro)}

.evento{
  padding:11px 14px;border-radius:11px;border:1px solid var(--linha);background:var(--painel);
}
.evento b{display:block;font-size:13.5px;font-weight:600}
.evento span{display:block;font-size:12px;color:var(--texto-3);font-family:"JetBrains Mono",monospace}

.formulario{display:flex;flex-direction:column;gap:16px}
.campo{display:flex;flex-direction:column;gap:6px}
.rot{font-size:13px;font-weight:600;color:var(--texto)}
.rot .obr{font-style:normal;font-size:10.5px;font-weight:400;color:var(--ouro);
  font-family:"JetBrains Mono",monospace;letter-spacing:.06em;text-transform:uppercase}
.campo input[type="text"],.campo input[type="email"],.campo input[type="password"],
.campo textarea,.campo select{
  width:100%;padding:10px 13px;border-radius:10px;font:inherit;font-size:14px;
  border:1px solid var(--linha-forte);background:var(--painel);color:var(--texto);
}
.campo textarea{resize:vertical;line-height:1.5}
.campo input:disabled,.campo select:disabled{background:var(--painel-3);color:var(--texto-3);cursor:not-allowed}
.dica{font-size:12px;color:var(--texto-3);line-height:1.45}

.caixas{display:flex;flex-wrap:wrap;gap:8px}
.caixa{
  display:flex;align-items:center;gap:7px;font-size:13px;
  padding:7px 12px;border-radius:999px;border:1px solid var(--linha);background:var(--painel-2);cursor:pointer;
}
.caixa:has(input:checked){background:var(--ouro-fundo);border-color:var(--ouro);color:var(--ouro)}
.caixa input{accent-color:var(--ouro-vivo)}

.btn.perigo-btn{border-color:var(--perigo-borda);color:var(--perigo)}
.btn.perigo-btn:hover{background:var(--perigo-fundo);border-color:var(--perigo);color:var(--perigo)}
.btn:disabled{opacity:.55;cursor:default}
.aviso-forte{
  padding:14px 16px;border-radius:12px;font-size:14px;
  background:var(--perigo-fundo);border:1px solid var(--perigo-borda);color:var(--perigo);
}

.barra-publicar{
  position:sticky;bottom:12px;z-index:20;
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  margin-top:20px;padding:14px 18px;border-radius:var(--r-g);
  background:var(--preto);color:#FFFFFF;box-shadow:var(--sombra);
}
.barra-publicar span{flex:1;font-size:13.5px;min-width:180px}
.barra-publicar .btn{border-color:#3A362C;color:#FFFFFF;background:transparent}
.barra-publicar .btn:hover{border-color:var(--ouro-vivo);color:var(--ouro-vivo)}
.barra-publicar .btn.cheio{background:var(--ouro-vivo);border-color:var(--ouro-vivo);color:var(--preto)}

/* célula "não atende" na matriz */
.celula.recusa{background:var(--painel-2);color:var(--texto-3);border:1px dashed var(--linha-forte)}
.celula.recusa:hover{border-color:var(--perigo-borda);color:var(--perigo)}
.celula .marca-x{font-size:13px;font-weight:700;line-height:1}

/* ------------------------------------------------------------------ */
/* comissões — simulador de repasse                                    */
/* ------------------------------------------------------------------ */
.painel-com{
  background:var(--painel);border:1px solid var(--linha);border-radius:var(--r-g);
  padding:16px 18px;display:flex;flex-direction:column;gap:14px;margin-bottom:14px;
}
.linha-com{display:flex;flex-direction:column;gap:8px}
.linha-com.dupla{display:grid;grid-template-columns:minmax(200px,1fr) minmax(200px,2fr);gap:14px}
.rot-com{
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--texto-3);
}
.sel-com{
  width:100%;padding:9px 12px;border-radius:10px;border:1px solid var(--linha);
  background:var(--painel);font-size:14px;
}
.filtros-com{display:flex;flex-wrap:wrap;gap:6px}
.escolha b{font-family:"JetBrains Mono",monospace;font-size:11px;font-weight:700;opacity:.75}
.escolha[aria-pressed="true"] b{opacity:1}

.numeros-com{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:1px;
  background:var(--linha);border:1px solid var(--linha);border-radius:var(--r);
  overflow:hidden;margin-bottom:14px;
}
.num-com{background:var(--painel);padding:13px 15px}
.num-com b{
  display:block;font-size:23px;font-weight:700;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--texto);
}
.num-com span{
  display:block;font-family:"JetBrains Mono",monospace;font-size:9.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--texto-3);margin-top:2px;
}
.num-com.destaque{background:var(--ouro-fundo)}
.num-com.destaque b{color:var(--ouro)}

.barra-com{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}

table.tabela-com{border-collapse:separate;border-spacing:0;width:100%;min-width:880px;font-size:13px}
.tabela-com thead th{
  position:sticky;top:0;z-index:3;background:var(--preto);color:#FFFFFF;
  text-align:left;padding:9px 11px;font-size:11px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;white-space:nowrap;
}
.tabela-com td{padding:8px 11px;border-bottom:1px solid var(--linha);vertical-align:top}
.tabela-com tbody tr:nth-child(even) td{background:var(--painel-2)}
.tabela-com tbody tr:hover td{background:var(--ouro-fundo)}
.tabela-com td small{display:block;font-size:11px;color:var(--texto-3)}
.tabela-com .meio{text-align:center;white-space:nowrap}
.tabela-com .fraco{color:var(--texto-3)}
.tabela-com .paga{font-weight:700;color:var(--ouro);font-size:14px}
.tabela-com .paga + .fraco i{color:var(--ouro);font-style:normal;cursor:help}

.excecoes{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.excecao{display:flex;gap:6px;align-items:center;flex-wrap:wrap;width:100%}
.excecao select,.excecao input{
  padding:8px 10px;border-radius:10px;border:1px solid var(--linha);
  background:var(--painel);font-size:13.5px;
}
.excecao input[data-ex="texto"]{flex:1;min-width:120px}
.mini-num{width:76px;text-align:center;font-family:"JetBrains Mono",monospace}
.pp{font-size:12px;color:var(--texto-3)}
.excecao .btn{padding:6px 11px;line-height:1}

.faixa-linha{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.faixa-linha input{
  padding:9px 12px;border-radius:10px;border:1px solid var(--linha);
  background:var(--painel);font-size:14px;
}
.faixa-linha input[data-f="nome"]{flex:1;min-width:150px;font-weight:600}

.linha-adm.sem-clique{cursor:default;display:flex;align-items:center;gap:12px}
.linha-adm.sem-clique:hover{border-color:var(--linha)}

@media (max-width:640px){
  .linha-com.dupla{grid-template-columns:1fr}
  .numeros-com{grid-template-columns:repeat(2,1fr)}
}

/* percentual livre, ao lado das faixas nomeadas */
.escolha-livre{
  display:inline-flex;align-items:center;gap:6px;
  padding:6px 12px;border-radius:999px;font-size:13px;
  border:1px dashed var(--linha-forte);background:var(--painel);color:var(--texto-2);
}
.escolha-livre label{
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--texto-3);cursor:pointer;
}
.escolha-livre input{
  width:62px;padding:2px 4px;border:none;background:none;outline:none;
  font-family:"JetBrains Mono",monospace;font-size:14px;font-weight:700;
  text-align:center;color:var(--texto);
}
.escolha-livre input::placeholder{color:var(--texto-3);font-weight:400}
.escolha-livre b{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--texto-3)}
.escolha-livre:focus-within{border-color:var(--ouro);border-style:solid}
.escolha-livre[aria-pressed="true"]{
  background:var(--ouro-vivo);border-color:var(--ouro-vivo);border-style:solid;color:var(--preto);
}
.escolha-livre[aria-pressed="true"] label,
.escolha-livre[aria-pressed="true"] b,
.escolha-livre[aria-pressed="true"] input{color:var(--preto)}

/* ------------------------------------------------------------------ */
/* comissões — cor por categoria, legenda e organizador de colunas     */
/* ------------------------------------------------------------------ */
:root{
  --t0:#FBF3DF; --t0f:#A87C11;   /* ouro   */
  --t1:#EAF2F9; --t1f:#2A6B8F;   /* azul   */
  --t2:#F2EEFA; --t2f:#6B4A9E;   /* roxo   */
  --t3:#E9F5EF; --t3f:#1F7A54;   /* verde  */
  --t4:#FCF0EE; --t4f:#B23528;   /* telha  */
  --t5:#F3F1EA; --t5f:#7A6A3A;   /* areia  */
}

.barra-visual{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-bottom:12px;padding:10px 14px;border-radius:var(--r);
  background:var(--painel);border:1px solid var(--linha);
}
.legenda-cor{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.chave-cor{
  display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px 3px 8px;border-radius:999px;font-size:11.5px;
  border:1px solid var(--linha);background:var(--painel-2);color:var(--texto-2);
}
.chave-cor::before{content:"";width:9px;height:9px;border-radius:3px;background:var(--texto-3)}
.chave-cor.t0{background:var(--t0)}  .chave-cor.t0::before{background:var(--t0f)}
.chave-cor.t1{background:var(--t1)}  .chave-cor.t1::before{background:var(--t1f)}
.chave-cor.t2{background:var(--t2)}  .chave-cor.t2::before{background:var(--t2f)}
.chave-cor.t3{background:var(--t3)}  .chave-cor.t3::before{background:var(--t3f)}
.chave-cor.t4{background:var(--t4)}  .chave-cor.t4::before{background:var(--t4f)}
.chave-cor.t5{background:var(--t5)}  .chave-cor.t5::before{background:var(--t5f)}

/* a cor da linha substitui o zebrado quando está ligada */
.tabela-com tbody tr.t0 td{background:var(--t0)}
.tabela-com tbody tr.t1 td{background:var(--t1)}
.tabela-com tbody tr.t2 td{background:var(--t2)}
.tabela-com tbody tr.t3 td{background:var(--t3)}
.tabela-com tbody tr.t4 td{background:var(--t4)}
.tabela-com tbody tr.t5 td{background:var(--t5)}
.tabela-com tbody tr[class^="t"] td:first-child{box-shadow:inset 3px 0 0 var(--texto-3)}
.tabela-com tbody tr.t0 td:first-child{box-shadow:inset 3px 0 0 var(--t0f)}
.tabela-com tbody tr.t1 td:first-child{box-shadow:inset 3px 0 0 var(--t1f)}
.tabela-com tbody tr.t2 td:first-child{box-shadow:inset 3px 0 0 var(--t2f)}
.tabela-com tbody tr.t3 td:first-child{box-shadow:inset 3px 0 0 var(--t3f)}
.tabela-com tbody tr.t4 td:first-child{box-shadow:inset 3px 0 0 var(--t4f)}
.tabela-com tbody tr.t5 td:first-child{box-shadow:inset 3px 0 0 var(--t5f)}
.tabela-com tbody tr:hover td{background:var(--ouro-fundo)}

.ponto-cor{display:none}

.tabela-com thead th[data-com-ordenar]{cursor:pointer;user-select:none}
.tabela-com thead th[data-com-ordenar]:hover{background:#2B2820}
.tabela-com thead th.ordenada{color:var(--ouro-claro)}

.pilula{
  display:inline-block;padding:2px 9px;border-radius:999px;
  font-size:11px;font-weight:600;white-space:nowrap;
  border:1px solid transparent;
}
.pilula.f-novo{background:var(--t3);color:var(--t3f);border-color:#C9E4D7}
.pilula.f-compra{background:var(--t1);color:var(--t1f);border-color:#CADEEC}
.pilula.f-cartao{background:var(--t0);color:var(--t0f);border-color:var(--ouro-borda)}
.pilula.f-pessoal{background:var(--t2);color:var(--t2f);border-color:#DCD2EE}
.pilula.f-outros{background:var(--t5);color:var(--t5f);border-color:#E2DCC9}

.painel-colunas{
  background:var(--painel);border:1px solid var(--linha);border-radius:var(--r);
  padding:14px 16px;margin-bottom:14px;display:flex;flex-direction:column;gap:8px;
}
.col-linha{display:flex;align-items:center;gap:8px}
.col-linha b{flex:1;font-size:13.5px;font-weight:600}
.btn.mini{padding:4px 10px;font-size:12px;line-height:1.3}
.col-ocultas{display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  padding-top:10px;margin-top:4px;border-top:1px solid var(--linha)}

@media (max-width:640px){
  .legenda-cor{margin-left:0}
  .col-linha b{flex:1 1 100%;order:-1}
}

/* ---------------- oportunidades da semana ---------------- */
.agora{margin-bottom:26px}
.olho-agora{
  font-family:"JetBrains Mono",monospace;font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--texto-3);margin-bottom:10px;
}
.agora-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:12px}
.agora-card{
  background:var(--painel);border:1px solid var(--linha);border-left:3px solid var(--ouro-vivo);
  border-radius:12px;padding:14px 16px;
}
.agora-topo{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px;min-height:20px}
.agora-tag{
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ouro);background:var(--ouro-fundo);border:1px solid var(--ouro-borda);
  border-radius:999px;padding:2px 9px;
}
.agora-data{font-family:"JetBrains Mono",monospace;font-size:11px;color:var(--texto-3)}
.agora-card h4{margin:0;font-size:15px;font-weight:600}
.agora-card p{margin-top:5px;font-size:13px;color:var(--texto-2);line-height:1.45}

/* ================= TELAS DE GESTÃO ================= */

/* placar de indicadores */
.placar{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:20px}
.placar-item{
  background:var(--painel);border:1px solid var(--linha);border-radius:14px;
  padding:16px 18px;position:relative;overflow:hidden;
}
.placar-item::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--linha-forte);
}
.placar-item.forte::before{background:var(--ouro-vivo)}
.placar-item.forte .placar-valor{color:var(--ouro)}
.placar-rotulo{
  display:block;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--texto-3);
}
.placar-valor{
  display:block;font-size:24px;font-weight:700;letter-spacing:-.02em;margin-top:6px;
  font-variant-numeric:tabular-nums;line-height:1.1;
}
.placar-nota{display:block;font-size:11.5px;color:var(--texto-3);margin-top:4px}

/* barra de filtros */
/* Com sete campos na barra, o que antes era folga vira rolagem: os filtros
   empurravam a tabela para baixo da dobra em tela de 1366. */
.barra-filtro{display:flex;gap:7px;flex-wrap:wrap;align-items:flex-end;margin-bottom:11px}
.campo-filtro{display:flex;flex-direction:column;gap:3px;min-width:132px}
.campo-filtro.cresce{flex:1;min-width:190px}
.campo-filtro.estreito{min-width:86px;max-width:110px}
.campo-filtro span{
  font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--texto-3);
}
.campo-filtro input,.campo-filtro select{
  padding:6px 10px;border-radius:8px;font:inherit;font-size:13px;
  border:1px solid var(--linha-forte);background:var(--painel);color:var(--texto);
}
.barra-filtro .btn{padding:6px 13px;font-size:13px}
.campo-filtro input:disabled{background:var(--painel-3);color:var(--texto-3)}

/* chips de banco */
.chips-banco{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.chip-banco{
  display:flex;align-items:center;gap:7px;padding:8px 14px;border-radius:999px;font-size:13px;
  border:1px solid var(--linha);background:var(--painel);color:var(--texto-2);
}
.chip-banco i{
  font-style:normal;font-family:"JetBrains Mono",monospace;font-size:10.5px;
  color:var(--texto-3);background:var(--painel-3);border-radius:999px;padding:1px 7px;
}
.chip-banco:hover{border-color:var(--ouro-borda);color:var(--ouro)}
.chip-banco[aria-current="true"]{background:var(--ouro-vivo);border-color:var(--ouro-vivo);color:var(--preto);font-weight:600}
.chip-banco[aria-current="true"] i{background:rgba(23,21,15,.18);color:var(--preto)}

/* tabela de dados */
/* Densidade de planilha, de propósito. São tabelas de consulta: cabe mais
   linha na tela, rola menos, e a vista bate com a do sistema do banco. */
table.grade-dados{border-collapse:separate;border-spacing:0;width:100%;min-width:720px;font-size:12.5px}
.grade-dados th{
  position:sticky;top:0;z-index:2;background:var(--painel-2);
  font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--texto-3);font-weight:500;text-align:left;padding:7px 10px;
  border-bottom:1px solid var(--linha-forte);white-space:nowrap;
}
/* Cabeçalho que ordena: o cursor e o realce dizem que dá para clicar. */
.grade-dados th.ord{cursor:pointer;user-select:none}
.grade-dados th.ord:hover{color:var(--ouro);background:var(--painel-3)}
.grade-dados th[aria-sort]{color:var(--ouro)}
.grade-dados td{
  padding:6px 10px;border-bottom:1px solid var(--linha);vertical-align:middle;
  white-space:nowrap;
}
/* Cortar é por coluna, nunca geral. Um `max-width` em TODA célula espremia
   data e número de proposta até colarem um no outro; quem precisa de teto é
   nome de cliente e de convênio, que vêm longos. O inteiro fica no `title`. */
.grade-dados td.corta{max-width:170px;overflow:hidden;text-overflow:ellipsis}
.grade-dados td.corta-curto{max-width:118px;overflow:hidden;text-overflow:ellipsis}
.grade-dados tbody tr:last-child td{border-bottom:none}
.grade-dados tbody tr:hover{background:var(--painel-2)}
.grade-dados .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.grade-dados th.num{text-align:right}
/* `.mini` nasceu pastilha (fundo, cantos, padding) para os nomes de banco nos
   cartões do catálogo. Dentro de uma grade ela é só texto pequeno — sem o
   reset, toda célula de data e de prazo ganhava um retângulo cinza do tamanho
   da coluna, que era o que parecia defeito de renderização. */
/* `.mini` nasceu pastilha e o reset zerava o `padding` — incluindo o da
   CÉLULA, quando a classe está no próprio `td`. Era por isso que a data e o
   número da proposta apareciam grudados: `29/09/202615287204`. O reset
   agora vale só para a pastilha dentro da célula. */
.grade-dados .mini{
  font-size:11px;color:var(--texto-2);white-space:nowrap;
  background:none;border-radius:0;letter-spacing:normal;
}
.grade-dados td .mini{padding:0}
.grade-dados td.mini{padding:6px 10px}
.grade-dados .forte-ouro{color:var(--ouro);font-weight:600}
.grade-dados tr.clicavel{cursor:pointer}
/* O subtítulo da célula agora vive na MESMA linha, separado por um ponto:
   em bloco ele dobrava a altura de toda linha que tivesse vendedor. */
.grade-dados .sob{
  display:inline;font-size:11px;color:var(--texto-3);font-weight:400;margin-left:6px;
}
.grade-dados .sob::before{content:"· "}
.grade-dados .alerta-sob{color:var(--perigo)}
/* Traço de célula vazia: presente, mas sem competir com o dado. */
.grade-dados .sob-so{color:var(--texto-3)}
.grade-dados .exemplo{color:var(--texto-3);max-width:220px;overflow:hidden;text-overflow:ellipsis}
.nota-tabela{margin-top:8px;font-size:11.5px;color:var(--texto-3)}

/* selos de situação */
.selo-situacao{
  display:inline-block;font-size:10.5px;padding:2px 8px;border-radius:999px;white-space:nowrap;
  border:1px solid var(--linha);background:var(--painel-3);color:var(--texto-2);
}
.selo-situacao.ok{background:#EAF6EF;border-color:#BFE3CE;color:#1B6B42}
.selo-situacao.ruim{background:var(--perigo-fundo);border-color:var(--perigo-borda);color:var(--perigo)}
.selo-situacao.espera{background:var(--ouro-fundo);border-color:var(--ouro-borda);color:var(--ouro)}
.selo-campanha{
  display:inline-block;font-size:12px;padding:4px 10px;border-radius:8px;
  background:var(--ouro-fundo);border:1px solid var(--ouro-borda);color:var(--ouro);font-weight:600;
}

/* importar */
.alvos-import{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;margin-bottom:20px}
.cartao-alvo{
  text-align:left;background:var(--painel);border:1px solid var(--linha);border-radius:16px;
  padding:22px;display:flex;flex-direction:column;gap:8px;
}
.cartao-alvo:hover{border-color:var(--ouro);background:var(--painel-2);transform:translateY(-2px)}
.cartao-alvo h3{font-size:18px;font-weight:700}
.cartao-alvo p{font-size:13.5px;color:var(--texto-2);line-height:1.45}
.cartao-alvo .ver{margin-top:6px;color:var(--ouro);font-size:13px;font-weight:600;display:flex;align-items:center;gap:6px}
.cartao-alvo .ver svg{width:14px;height:14px;stroke-width:2.4}

/* O de-para é a única tabela do sistema que não é de consulta: é um
   formulário de 27 linhas. Precisa caber na tela sem rolagem infinita, e o
   `nowrap` geral das grades não serve aqui — foi ele que colou o campo de
   valor fixo por cima da coluna de exemplo. */
.de-para{font-size:12px}
.de-para td{
  vertical-align:middle;white-space:normal;max-width:none;overflow:visible;
  padding:3px 8px;
}
.de-para th{white-space:normal;padding:5px 8px}
.de-para select,.de-para input[type="text"]{
  width:100%;padding:4px 8px;border-radius:7px;font:inherit;font-size:12px;
  border:1px solid var(--linha-forte);background:var(--painel);color:var(--texto);
}
.de-para .dp-campo{width:215px;line-height:1.25}
.de-para .dp-campo b{font-size:12.5px}
.de-para .dp-tipo{
  font-style:normal;font-family:"JetBrains Mono",monospace;font-size:9.5px;
  color:var(--texto-3);margin-left:6px;letter-spacing:.04em;
}
.de-para .dp-de{width:230px}
.de-para .dp-fixo{width:120px}
.de-para .dp-fixo input{border-style:dashed;background:var(--painel-2);font-size:11.5px}
.de-para .dp-fixo input:disabled{background:var(--painel-3);color:var(--texto-3);border-style:dotted}

/* Os blocos. Sem eles são 27 linhas iguais e ninguém acha nada. */
.de-para .dp-grupo th{
  background:var(--painel-3);border-bottom:1px solid var(--linha-forte);
  border-top:1px solid var(--linha-forte);
  font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--texto-2);padding:7px 8px;
  position:static;
}
.de-para .dp-grupo i{
  float:right;font-style:normal;color:var(--texto-3);letter-spacing:.06em;
}

/* O que não foi preenchido fica vermelho: é o estado que custa caro, porque
   o campo simplesmente não existe depois da importação. */
.de-para tr.falta{background:var(--perigo-fundo)}
.de-para tr.falta:hover{background:var(--perigo-fundo)}
.de-para tr.falta .dp-campo b{color:var(--perigo)}
.de-para tr.falta select{border-color:var(--perigo-borda)}
.dp-falta-txt{color:var(--perigo)}

/* O exemplo mostra o CONTEÚDO, que é a única coisa que prova que a coluna
   certa foi escolhida. */
.de-para .dp-exemplo{line-height:1.7}
.de-para .dp-exemplo span{
  display:inline-block;margin:0 4px 2px 0;padding:1px 6px;border-radius:5px;
  background:var(--painel-3);border:1px solid var(--linha);
  font-family:"JetBrains Mono",monospace;font-size:10.5px;color:var(--texto-2);
  max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:middle;
}
.de-para .dp-exemplo .vazio{
  background:none;border:none;padding:0;color:var(--texto-3);font-style:italic;
  font-family:inherit;font-size:11px;
}
.de-para .dp-exemplo .fixo{
  background:var(--ouro-fundo);border-color:var(--ouro-borda);color:var(--ouro);
}
.de-para tr.suspeito{background:var(--ouro-fundo)}
.de-para tr.suspeito:hover{background:var(--ouro-fundo)}

@media (max-width:720px){
  .placar{grid-template-columns:repeat(2,1fr)}
  .placar-valor{font-size:20px}
  .campo-filtro.cresce{min-width:100%}
}


/* ================================================================== */
/* porta de entrada, barra de trabalho e as duas colunas               */
/* A Central deixou de ser vitrine. Quem não entrou não vê nada — nem  */
/* de relance, por isso o body nasce escondido e só abre quando o      */
/* /api/eu responde.                                                   */
/* ================================================================== */

.portao{display:none}
body.checando>*{visibility:hidden}
body.deslogado>.topo,
body.deslogado>.corpo,
body.deslogado>.rodape,
body.deslogado>.sobreposicao{display:none !important}
body.deslogado .portao{display:grid}
body:not(.deslogado) .portao{display:none}

/* ================================================================== */
/* a porta de entrada                                                 */
/* ------------------------------------------------------------------ */
/* Tela partida: marca de um lado, acesso do outro. O lado escuro é a
   assinatura — preto e ouro, o pouco de preto da marca — e o lado claro
   é onde se trabalha. Em telas estreitas a marca vira uma faixa curta no
   topo, porque num celular ninguém quer rolar para achar o campo de
   senha.                                                               */
/* ================================================================== */

.portao{
  position:fixed;inset:0;z-index:200;
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  background:var(--fundo);
}

/* ---- lado da marca ---- */
.portao-marca{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;
  padding:46px 54px;color:#F3EFE4;
  background:
    radial-gradient(760px 520px at 12% 8%, rgba(212,169,58,.22), transparent 62%),
    radial-gradient(620px 620px at 88% 92%, rgba(212,169,58,.10), transparent 60%),
    #141209;
}
/* Dois círculos de luz, como relevo. Sem imagem: é só gradiente. */
.portao-marca::before,
.portao-marca::after{
  content:"";position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(212,169,58,.16), transparent 70%);
}
.portao-marca::before{width:520px;height:520px;top:-180px;left:-140px}
.portao-marca::after{width:400px;height:400px;bottom:-150px;right:-110px}

.portao-topo{display:flex;align-items:center;gap:18px;position:relative;z-index:1}
.portao-topo img{border-radius:16px;display:block}
.portao-topo span{
  font-size:28px;font-weight:700;letter-spacing:-.022em;line-height:1.1;color:#FFFFFF;
}

.portao-fala{position:relative;z-index:1;max-width:470px}
.portao-fala h1{
  font-size:clamp(28px,2.7vw,42px);line-height:1.16;font-weight:700;
  letter-spacing:-.025em;color:#FFFFFF;text-wrap:balance;
}
.portao-fala p{
  margin-top:20px;font-size:15px;line-height:1.6;color:#C9C0AC;max-width:34ch;
}

.portao-rodape{
  position:relative;z-index:1;
  font-family:"JetBrains Mono",monospace;font-size:11px;letter-spacing:.06em;
  color:#8A8070;
}

/* ---- lado do acesso ---- */
.portao-acesso{display:grid;place-items:center;padding:40px 32px;min-width:0}
.portao-form-caixa{width:100%;max-width:364px}
.portao-form-caixa h2{
  font-size:27px;font-weight:700;letter-spacing:-.02em;color:var(--preto);
}
.portao-sub{margin-top:6px;font-size:14px;color:var(--texto-2)}

.portao-form{display:flex;flex-direction:column;gap:6px;margin-top:30px}
.portao-form .rot{margin-top:14px;font-size:12.5px}
.portao-form .rot:first-child{margin-top:0}
.portao-form input{
  padding:13px 15px;border-radius:11px;border:1px solid var(--linha-forte);
  background:var(--painel);font-size:15px;width:100%;
}
.portao-form input::placeholder{color:#B5AEA0}
.portao-form input:focus{outline:2px solid var(--ouro);outline-offset:1px;border-color:var(--ouro)}
.portao-form .btn{margin-top:24px;padding:14px 16px;font-size:14.5px}

.portao-erro{
  margin-top:12px;font-size:13px;color:var(--perigo);background:var(--perigo-fundo);
  border:1px solid var(--perigo-borda);border-radius:10px;padding:10px 13px;
}
.portao-erro[hidden]{display:none}
.portao-pe{margin-top:26px;font-size:12px;color:var(--texto-3);line-height:1.6}

@media (max-width:860px){
  .portao{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:start}
  .portao-marca{padding:26px 28px;gap:20px}
  .portao-topo{gap:13px}
  .portao-topo img{width:46px;height:46px;border-radius:12px}
  .portao-topo span{font-size:21px}
  .portao-fala{max-width:none}
  .portao-fala h1{font-size:25px}
  .portao-fala p{display:none}
  .portao-rodape{display:none}
  .portao-acesso{padding:34px 26px;align-items:start}
}

/* ---------------- duas colunas ---------------- */
:root{--lateral:238px}
.corpo{
  max-width:calc(var(--largura) + var(--lateral));margin:0 auto;
  display:grid;grid-template-columns:var(--lateral) minmax(0,1fr);align-items:start;
}
.corpo>main{min-width:0}
.corpo .abas,.corpo .filtros,.corpo .palco{max-width:none}

.lateral{
  position:sticky;top:var(--topo-h);align-self:start;
  height:calc(100dvh - var(--topo-h));
  display:flex;flex-direction:column;
  border-right:1px solid var(--linha);background:var(--painel-2);
  padding:16px 12px 12px;overflow-y:auto;
}
.lateral-abas{display:flex;flex-direction:column;gap:2px}
.lateral-grupo{
  font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--texto-3);padding:14px 10px 6px;
}
.lateral-grupo:first-child{padding-top:2px}
.aba-lado{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  padding:10px 11px;border-radius:11px;border:1px solid transparent;
  font-size:14px;font-weight:500;color:var(--texto-2);
}
.aba-lado svg{width:17px;height:17px;flex:none;color:var(--texto-3)}
.aba-lado:hover{background:var(--painel);border-color:var(--linha);color:var(--texto)}
.aba-lado[aria-current="true"]{
  background:var(--painel);border-color:var(--ouro-borda);
  color:var(--ouro);font-weight:600;box-shadow:0 1px 2px rgba(23,21,15,.04);
}
.aba-lado[aria-current="true"] svg{color:var(--ouro)}

.lateral-pe{
  margin-top:auto;padding-top:14px;border-top:1px solid var(--linha);
  display:flex;flex-direction:column;gap:3px;
}
.lateral-quem{display:block;font-size:13px;font-weight:600;color:var(--texto);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lateral-papel{font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--texto-3)}
.lateral-sair{margin-top:8px;align-self:flex-start;font-size:12.5px;color:var(--texto-3);
  text-decoration:underline;text-underline-offset:3px}
.lateral-sair:hover{color:var(--perigo)}

/* Na tela de trabalho a capa só rouba a dobra. */
body[data-modo="trabalho"] .capa{display:none}
body[data-modo="trabalho"] .barra-nav{padding-top:14px}

@media (max-width:900px){
  /* No celular não cabe coluna: a barra de trabalho vira faixa rolável. */
  .corpo{display:block}
  .lateral{
    position:sticky;top:var(--topo-h);z-index:35;height:auto;
    flex-direction:row;align-items:center;gap:6px;
    border-right:none;border-bottom:1px solid var(--linha);
    padding:9px 12px;overflow-x:auto;scrollbar-width:none;
  }
  .lateral::-webkit-scrollbar{display:none}
  .lateral-abas{flex-direction:row;gap:6px}
  .lateral-grupo{display:none}
  .aba-lado{flex:none;width:auto;padding:8px 13px;border-radius:999px;
    border-color:var(--linha);background:var(--painel);white-space:nowrap}
  .aba-lado svg{display:none}
  .lateral-pe{margin:0 0 0 auto;padding:0 0 0 12px;border-top:none;border-left:1px solid var(--linha);
    flex:none;flex-direction:row;align-items:center;gap:10px}
  .lateral-papel{display:none}
  .lateral-quem{max-width:112px}
  .lateral-sair{margin-top:0}
  .barra-nav{top:calc(var(--topo-h) + 51px)}
}

/* ================================================================== */
/* editor de campanha: regras em grade e escolha de lojas             */
/* ================================================================== */

.titulo-bloco{
  font-size:14px;font-weight:700;letter-spacing:-.01em;
  margin:22px 0 4px;padding-top:16px;border-top:1px solid var(--linha);
}

/* A grade de regras é uma planilha pequena: campo estreito, sem moldura
   pesada, para caber banco + convênio + produto + operação + prazo + % numa
   linha só sem virar um formulário de cadastro por regra. */
.grade-regras{width:100%;border-collapse:collapse;font-size:12.5px}
.grade-regras th{
  font-family:"JetBrains Mono",monospace;font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--texto-3);font-weight:500;
  text-align:left;padding:6px 6px 8px;white-space:nowrap;
}
.grade-regras td{padding:2px 3px;border-top:1px solid var(--linha)}
.grade-regras input,.grade-regras select{
  width:100%;min-width:72px;padding:7px 8px;border-radius:8px;
  border:1px solid var(--linha);background:var(--painel);font-size:12.5px;
}
.grade-regras input:focus,.grade-regras select:focus{
  outline:2px solid var(--ouro);outline-offset:-1px;border-color:var(--ouro);
}
.grade-regras td:nth-child(5) input,
.grade-regras td:nth-child(6) input{min-width:58px}
.grade-regras td:nth-child(7) input{min-width:60px;font-weight:600;color:var(--ouro)}
.grade-regras .nada{padding:14px 8px;color:var(--texto-3);text-align:center}

.btn-mini{
  display:grid;place-items:center;width:28px;height:28px;border-radius:8px;
  border:1px solid var(--linha);color:var(--texto-3);background:var(--painel);
}
.btn-mini:hover{border-color:var(--perigo-borda);color:var(--perigo);background:var(--perigo-fundo)}
.btn-mini svg{width:13px;height:13px;stroke-width:2.4}

/* A árvore de lojas rola dentro do modal: são 54, e empurrar os botões de
   salvar para fora da tela esconderia a única saída. */
.lista-lojas{
  max-height:260px;overflow-y:auto;border:1px solid var(--linha);
  border-radius:var(--r);background:var(--painel-2);
}
.linha-loja{
  display:flex;align-items:center;gap:9px;padding:7px 10px;
  border-bottom:1px solid var(--linha);font-size:13.5px;cursor:pointer;
}
.linha-loja:last-child{border-bottom:none}
.linha-loja:hover{background:var(--painel)}
.linha-loja input{width:15px;height:15px;accent-color:var(--ouro-vivo);flex:none}
.linha-loja span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.linha-loja i{
  font-style:normal;font-family:"JetBrains Mono",monospace;font-size:9.5px;
  letter-spacing:.08em;color:var(--texto-3);flex:none;
}
.modal.largo{width:min(1180px,96vw)}
@media (min-width:900px){
  .modal.largo .dupla{display:grid;grid-template-columns:1fr 1fr;gap:14px}
}

/* ================================================================== */
/* ERP: a coluna da esquerda vira barra sólida                        */
/* ------------------------------------------------------------------ */
/* "Mais sólidos e firmes, está muito apagado": o menu era texto cinza
   claro sobre bege. Agora é uma barra escura — o pouco de preto da marca
   — com o ouro marcando onde você está. O conteúdo continua claro: o que
   se lê o dia inteiro é tabela, e tabela se lê melhor no claro.         */
/* ================================================================== */

:root{
  --rail:#191712;            /* a barra */
  --rail-2:#232019;          /* hover */
  --rail-linha:#312C22;
  --rail-texto:#E8E3D7;
  --rail-apagado:#9A9284;
  --lateral:252px;
}

/* O painel deixou de ser catálogo: sem capa de revista. */
.capa{display:none !important}
.barra-nav{display:none}

.lateral{
  background:var(--rail);
  border-right:1px solid var(--rail-linha);
  padding:14px 10px 12px;
}
.lateral-grupo{
  color:#8A8172;font-size:9px;letter-spacing:.2em;
  padding:16px 12px 7px;font-weight:600;
}
.lateral-grupo:first-child{padding-top:4px}

.aba-lado{
  gap:11px;padding:10px 12px;border-radius:9px;
  font-size:14px;font-weight:500;color:var(--rail-texto);
  border:1px solid transparent;
}
.aba-lado svg{width:17px;height:17px;color:var(--rail-apagado);stroke-width:1.9}
.aba-lado:hover{background:var(--rail-2);border-color:var(--rail-linha);color:#fff}
.aba-lado:hover svg{color:var(--ouro-claro)}
.aba-lado[aria-current="true"]{
  background:var(--ouro-vivo);border-color:var(--ouro-vivo);
  color:var(--preto);font-weight:600;box-shadow:none;
}
.aba-lado[aria-current="true"] svg{color:var(--preto)}

.lateral-pe{border-top:1px solid var(--rail-linha);padding-top:13px}
.lateral-quem{color:#fff;font-size:13px}
.lateral-papel{color:var(--rail-apagado);font-size:9.5px}
.lateral-sair{color:var(--rail-apagado)}
.lateral-sair:hover{color:var(--ouro-claro)}

/* O topo encosta na barra sem emenda. */
.topo{border-bottom:1px solid var(--linha)}
.marca b{color:var(--ouro)}
.marca i{color:var(--texto-3)}

/* ---------------- sub-abas: firmes, não decorativas ---------------- */
.sub-abas{
  display:flex;gap:4px;flex-wrap:wrap;margin:0 0 16px;
  border-bottom:1px solid var(--linha);padding-bottom:0;
}
.sub-aba{
  padding:9px 15px;font-size:13.5px;font-weight:500;color:var(--texto-2);
  border:none;border-bottom:2px solid transparent;border-radius:0;background:none;
}
.sub-aba:hover{color:var(--texto)}
.sub-aba[aria-current="true"]{
  /* A regra antiga pintava a aba ativa de preto cheio. Dentro de uma tela que
     ja tem barra escura a esquerda, isso virava um bloco sem sentido. */
  background:none;border-color:transparent;
  color:var(--preto);font-weight:700;border-bottom-color:var(--ouro-vivo);
}

/* ---------------- conta corrente ---------------- */
.grade-dados tr.apagada{opacity:.5}
.grade-dados tr.apagada td{text-decoration:line-through;text-decoration-color:var(--linha-forte)}
.selo-situacao.neutro{background:var(--painel-3);color:var(--texto-2);border-color:var(--linha)}

@media (max-width:900px){
  .lateral{
    background:var(--rail);border-bottom:1px solid var(--rail-linha);
    padding:9px 12px;
  }
  .aba-lado{background:var(--rail-2);border-color:var(--rail-linha)}
}

/* ---------------- painéis da produção ---------------- */
/* Barra em CSS puro, sem biblioteca. São quatro recortes de uma tabela que o
   servidor já somou — gráfico aqui é para enxergar proporção de relance, não
   para explorar; quem quer detalhe desce para a tabela. */
.paineis{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:12px;margin-bottom:20px;
}
.painel{
  background:var(--painel);border:1px solid var(--linha);border-radius:14px;
  padding:16px 18px 14px;
}
.painel h3{
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--texto-3);font-weight:500;margin-bottom:12px;
}
.painel-nota{font-size:11.5px;color:var(--texto-3);margin-top:10px}

.barras{display:flex;flex-direction:column;gap:7px}
.barra-linha{display:grid;grid-template-columns:92px 1fr auto;align-items:center;gap:10px}
.barra-rot{
  font-size:12px;color:var(--texto-2);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
}
.barra-trilho{
  height:9px;border-radius:5px;background:var(--painel-3);overflow:hidden;display:block;
}
.barra-trilho i{
  display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,var(--ouro-vivo),var(--ouro-claro));
}
.barra-val{
  font-size:12px;font-weight:600;color:var(--texto);font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
@media (max-width:520px){
  .barra-linha{grid-template-columns:76px 1fr auto;gap:8px}
  .barra-val{font-size:11px}
}

/* ---------------- topo enxuto ---------------- */
/* A barra de cima deixou de disputar atenção: a busca desceu para o painel de
   oportunidades (único lugar onde ela faz sentido) e o atalho da mesa saiu.
   Sobrou dizer onde a pessoa está e em nome de quem. */
.topo-onde{
  flex:1;min-width:0;display:flex;align-items:center;gap:8px;
  font-size:13px;overflow:hidden;white-space:nowrap;
}
.onde-grupo{
  font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--texto-3);
}
.onde-seta{color:var(--linha-forte)}
.onde-tela{font-weight:600;color:var(--texto)}
.onde-escopo{
  margin-left:4px;padding:3px 9px;border-radius:999px;font-size:11.5px;
  background:var(--ouro-fundo);color:var(--ouro);border:1px solid var(--ouro-borda);
  overflow:hidden;text-overflow:ellipsis;
}
@media (max-width:760px){.topo-onde{display:none}}

/* A busca, agora dentro do painel */
.palco .busca-gatilho{width:100%;max-width:520px;margin-bottom:16px}

/* ---------------- correção em lote ---------------- */
.barra-lote{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;
  padding:11px 14px;border-radius:12px;
  background:var(--ouro-fundo);border:1px solid var(--ouro-borda);
}
.barra-lote b{font-size:13.5px;color:var(--ouro);margin-right:4px}
.barra-lote .btn{padding:8px 13px;font-size:12.5px}

.grade-dados .col-marca{width:36px;padding-right:0}
.grade-dados .col-marca input{width:15px;height:15px;accent-color:var(--ouro-vivo);cursor:pointer}
/* `display:flex` na celula: sem isso os dois botoes empilhavam, porque a
   coluna encolhe ate a largura minima e o inline-block quebra linha. */
.grade-dados .col-acao{width:1%;white-space:nowrap}
.grade-dados .col-acao > *{display:inline-flex;vertical-align:middle}
.grade-dados .col-acao .btn-mini + .btn-mini{margin-left:5px}
.grade-dados .col-anexo{white-space:nowrap}

.chip-anexo{
  display:inline-grid;place-items:center;width:28px;height:28px;border-radius:8px;
  border:1px solid var(--ouro-borda);background:var(--ouro-fundo);color:var(--ouro);
}
.chip-anexo + .chip-anexo{margin-left:4px}
.chip-anexo:hover{background:var(--ouro-vivo);color:var(--preto);border-color:var(--ouro-vivo)}
.chip-anexo svg{width:13px;height:13px;stroke-width:2.2}

/* ---------------- anexos no formulário ---------------- */
.solta-arquivo{
  display:flex;align-items:center;justify-content:center;gap:9px;
  padding:14px;border-radius:12px;cursor:pointer;
  border:1.5px dashed var(--linha-forte);background:var(--painel-2);
  font-size:13.5px;font-weight:500;color:var(--texto-2);
}
.solta-arquivo:hover{border-color:var(--ouro);color:var(--ouro);background:var(--ouro-fundo)}
.solta-arquivo svg{width:16px;height:16px}

.anexo-item{
  display:flex;align-items:center;gap:10px;padding:8px 11px;margin-bottom:6px;
  border:1px solid var(--linha);border-radius:10px;background:var(--painel);font-size:13px;
}
.anexo-item a{color:var(--ouro);font-weight:600;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anexo-item > span:first-child{flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.anexo-item .sob{flex:none;margin:0;font-size:11px}
.anexo-item.novo{border-style:dashed;background:var(--painel-2)}

/* ---------------- recados de estado vazio ---------------- */
/* `.aviso` era usada por gestao, campanhas, acessos e conta corrente e NUNCA
   existiu no CSS: saía um "i" solto e o título colado no texto. É o recado que
   a pessoa lê quando a tela não tem o que mostrar — tinha que ser o mais
   cuidado, não o mais abandonado. */
.aviso{
  display:flex;gap:14px;align-items:flex-start;
  padding:18px 20px;border-radius:14px;margin:4px 0 18px;
  background:var(--painel);border:1px solid var(--linha);
}
.aviso .marca{
  display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:9px;
  background:var(--painel-3);color:var(--texto-3);
  font-family:"JetBrains Mono",monospace;font-size:14px;font-weight:700;font-style:normal;
}
.aviso > div{display:flex;flex-direction:column;gap:4px;min-width:0}
.aviso b{font-size:14.5px;font-weight:600;color:var(--preto);display:block}
.aviso > div{font-size:13.5px;color:var(--texto-2);line-height:1.5}

.aviso.bom .marca{background:var(--ouro-fundo);color:var(--ouro);border:1px solid var(--ouro-borda)}
.aviso.ruim{background:var(--perigo-fundo);border-color:var(--perigo-borda)}
.aviso.ruim .marca{background:#fff;color:var(--perigo);border:1px solid var(--perigo-borda)}
.aviso.ruim b{color:var(--perigo)}

/* "Carregando…" também era texto nu no meio da página. */
.nada{
  padding:28px 20px;text-align:center;color:var(--texto-3);font-size:13.5px;
  border:1px dashed var(--linha);border-radius:14px;background:var(--painel-2);
}