/*
 * O DESENHO DOS PAINEIS — afiliado, operador e console.
 *
 * Um arquivo so para os tres: a mesma tela para publicos diferentes deve ser
 * a mesma tela. Token trocado aqui muda os tres de uma vez, e e por isso que
 * este arquivo existe em vez de tres copias que divergem no terceiro ajuste.
 *
 * Tema CLARO com fundo quase branco (#fbfbfb) e cartoes brancos fechados por
 * uma linha finissima. Barra lateral larga com grupos que abrem e fecham;
 * cabecalho de faixa unica com o dado mais importante do painel sempre a
 * vista. No celular a barra vira gaveta.
 *
 * Tipografia: Inter, base 16px com entrelinha 1,55 — a referencia do setor usa
 * corpo maior que um painel administrativo comum, e isso e parte da cara.
 * Rotulo de cartao em caixa alta, pequeno e espacado; o numero grande e preto
 * puro.
 *
 * O que e de UM painel so (formularios de campanha, gaveta de torneio, QR do
 * autenticador) fica no <style> da propria pagina. Aqui mora o que os tres
 * compartilham.
 */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/*
 * OS TOKENS SAO O DESIGN SYSTEM, e o design system esta escrito em
 * `docs/DESIGN-SYSTEM-ADMIN.md`.
 *
 * Toda cor, raio e sombra do painel entra AQUI, uma vez. Tela nenhuma escreve
 * hex proprio: e isso que permite trocar a cara do painel inteiro num passo —
 * e o que impede o painel de virar metade uma coisa, metade outra.
 *
 * Antes de mexer em qualquer valor abaixo, leia o mapa de tokens do documento:
 * ele diz o que cada variavel representa na especificacao.
 */
:root {
  --bg: #fbfbfb;
  --panel: #ffffff;
  --txt: #000000;
  --dim: #71717d;
  --dim-2: #9b9ba5;
  --line: #ececec;
  --line-2: #f4f4f5;
  --hover: #f7f7f8;
  --sel: #f1f1f3;

  --green: #088436;
  --green-soft: #e6f5eb;
  --red: #d92d20;
  --red-soft: #fdecea;
  --amber: #b54708;
  --amber-soft: #fdf3e7;
  /* O numero diferente de zero sai em laranja, como na referencia: e
     enfase, nao link — nao ha para onde clicar. */
  --destaque: #e8590c;
  --total-bg: #eaf7ee;

  --radius: 12px;
  --radius-sm: 8px;

  /* Para MEDIDA e codigo: numero que se le digito a digito. Na Inter o "1600"
     tem largura variavel e a pessoa erra ao copiar; na monoespacada, nao. */
  --fonte-mono: ui-monospace, 'SFMono-Regular', 'Consolas', monospace;
}
body {
  min-height: 100vh;
  background: var(--bg);
  color: var(--txt);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}
input,
select {
  font: inherit;
  color: inherit;
}
.num {
  font-variant-numeric: tabular-nums;
}
[hidden] {
  display: none !important;
}
svg {
  flex: none;
}

/* ================= Cabecalho ================= */
.top {
  display: flex;
  align-items: center;
  gap: 20px;
  height: 78px;
  padding: 0 26px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 40;
}
.top .logo {
  height: 30px;
  width: auto;
}
.top .spacer {
  flex: 1;
}
.janela {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 15px;
  color: var(--txt);
}
/* A pastilha verde da proxima janela: o unico verde do cabecalho, e o
   dado que o parceiro procura primeiro ao abrir a tela. */
.selo-janela {
  padding: 5px 14px;
  border-radius: 999px;
  background: var(--green-soft);
  color: var(--green);
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}
.saldo-topo {
  font-size: 20px;
  font-weight: 600;
  padding-left: 22px;
  border-left: 1px solid var(--line);
}
.quem {
  line-height: 1.2;
  font-size: 15px;
  max-width: 130px;
}
#quem-avatar {
  display: none;
}

/* ================= Estrutura ================= */
.shell {
  display: flex;
  align-items: flex-start;
  min-height: calc(100vh - 78px);
}
.side {
  flex: none;
  width: 290px;
  padding: 16px 14px 22px;
  background: var(--panel);
  border-right: 1px solid var(--line);
  position: sticky;
  top: 78px;
  height: calc(100vh - 78px);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
.side nav {
  flex: 1;
}

/* Grupo que abre e fecha, com a seta girando. */
.grupo {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  color: var(--txt);
  font-size: 15px;
  font-weight: 500;
  text-align: left;
}
.grupo:hover {
  background: var(--hover);
}
.grupo svg.ico {
  width: 21px;
  height: 21px;
  color: var(--dim);
}
.grupo .seta {
  margin-left: auto;
  width: 18px;
  height: 18px;
  color: var(--dim);
  transition: transform 0.16s;
}
.grupo[aria-expanded='true'] .seta {
  transform: rotate(180deg);
}
.sub {
  overflow: hidden;
}
.side nav button.item {
  display: block;
  width: 100%;
  padding: 11px 14px 11px 48px;
  border-radius: 10px;
  color: var(--txt);
  font-size: 15px;
  font-weight: 400;
  text-align: left;
}
.side nav button.item:hover {
  background: var(--hover);
}
/* Selecionado: pastilha cinza discreta, do jeito da referencia. */
.side nav button.item.on {
  background: var(--sel);
  font-weight: 500;
}
/* Item de primeiro nivel sem filhos usa o mesmo desenho do grupo. */
.side nav button.solo {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
}
.side nav button.solo svg {
  width: 21px;
  height: 21px;
  color: var(--dim);
}
.side nav button.solo:hover {
  background: var(--hover);
}
.side nav button.solo.on {
  background: var(--sel);
}

/* Rodape da barra: o contrato do parceiro e a saida. */
.rodape {
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 14px;
}
.contrato {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  font-size: 14px;
  line-height: 1.35;
}
.bolinha {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green);
  flex: none;
}
.contrato .dim {
  color: var(--dim);
  font-size: 13px;
}
.sair {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
}
.sair:hover {
  background: var(--hover);
}
.sair svg {
  width: 21px;
  height: 21px;
  margin-left: auto;
  color: var(--dim);
}

/*
 * O conteudo OCUPA a largura toda, sem teto.
 *
 * Um max-width aqui deixava uma faixa morta a direita em tela larga —
 * e estas telas sao tabelas de dez colunas, que e justamente onde a
 * largura vira legibilidade. A referencia tambem nao tem teto.
 */
main {
  flex: 1;
  min-width: 0;
  padding: 32px 40px 80px;
}
h1 {
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.lede {
  margin: 6px 0 26px;
  color: var(--dim);
  font-size: 16px;
}

/* ================= Cartoes ================= */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 24px;
  margin-bottom: 26px;
}
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 26px 24px;
}
.card .cap {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--dim);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}
.card .cap svg {
  margin-left: auto;
  width: 20px;
  height: 20px;
  color: var(--dim-2);
}
.card .val {
  margin: 12px 0 6px;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.card .sub {
  color: var(--dim);
  font-size: 14px;
}

/*
 * Faixa de cartoes com titulo: separa grupos que nao se comparam.
 *
 * Doze cartoes numa grade so viram uma parede — quem olha nao sabe onde para
 * "gente" e onde comeca "dinheiro". O titulo custa uma linha e da o corte.
 */
.faixa {
  margin: 0 0 6px;
  color: var(--dim);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* ================= Abas ================= */
/*
 * Abas DENTRO de uma pagina, para quando um assunto so tem partes demais para
 * uma rolagem honesta. Nao substituem o menu lateral: o menu diz QUAL assunto,
 * a aba diz que PARTE dele.
 *
 * E uma faixa rolavel de proposito — no celular cinco abas nao cabem lado a
 * lado, e quebrar em duas linhas afasta demais o conteudo do titulo.
 */
.abas {
  display: flex;
  gap: 4px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--line);
  overflow-x: auto;
  scrollbar-width: none;
}
.abas::-webkit-scrollbar {
  display: none;
}
.abas button {
  flex: none;
  padding: 13px 18px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  background: none;
  color: var(--dim);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
}
.abas button:hover {
  color: var(--txt);
}
.abas button[aria-selected='true'] {
  border-bottom-color: var(--green);
  color: var(--txt);
  font-weight: 600;
}
/*
 * O numero da fila na propria aba: a pendencia nao pode depender de um clique
 * para aparecer.
 *
 * Ambar, o mesmo dos cartoes de fila — gente esperando e assunto do dia, nao
 * falha da plataforma. Vermelho aqui gritaria por algo que so precisa ser visto.
 */
.abas .selo-aba {
  display: inline-block;
  min-width: 20px;
  margin-left: 8px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--amber-soft);
  color: var(--amber);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

/* ================= Blocos ================= */
.bloco {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 26px;
  overflow: hidden;
}
.bloco > header {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 20px 26px;
}
.bloco > header h2 {
  font-size: 17px;
  font-weight: 600;
}
.bloco > header .resto {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.bloco .corpo {
  padding: 0 26px 24px;
}

/* ================= Filtros ================= */
.filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px;
  padding: 24px 26px 0;
}
.campo label {
  display: block;
  margin-bottom: 8px;
  font-size: 15px;
  font-weight: 400;
}
.entrada {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
}
.entrada:focus-within {
  border-color: var(--dim);
}
.entrada svg {
  width: 19px;
  height: 19px;
  color: var(--dim);
}
.entrada input,
.entrada select {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: none;
  font-size: 15px;
}
/*
 * O SELETOR PRECISA PARECER UM SELETOR.
 *
 * `appearance: none` tira a seta do sistema — o que e certo, porque a seta do
 * sistema nao tem a cara deste painel. Mas ela estava sendo tirada sem nada no
 * lugar, e o resultado era um campo identico a uma caixa de texto: nada na tela
 * dizia que aquilo abre uma lista. Quem nao sabia que ali havia opcoes tentava
 * digitar.
 *
 * A seta e desenhada com borda em vez de imagem: assim ela e da cor do TOKEN, e
 * acompanha o tema sem um arquivo por paleta.
 */
.entrada select {
  cursor: pointer;
  appearance: none;
}
.entrada:has(> select)::after,
.entrada:has(> .sel-campo)::after,
.pager .mostrar::after {
  content: '';
  width: 7px;
  height: 7px;
  border-right: 1.6px solid var(--dim);
  border-bottom: 1.6px solid var(--dim);
  transform: rotate(45deg);
  transition: border-color 0.2s;
  pointer-events: none;
}
.entrada:has(> select)::after,
.entrada:has(> .sel-campo)::after {
  flex: none;
  margin: -4px 1px 0 -2px;
}
/* No rodape da tabela o seletor nao tem moldura propria em volta: a seta e
   posicionada por cima da direita dele, e nao empurrada para depois. */
.pager .mostrar {
  position: relative;
}
.pager .mostrar::after {
  position: absolute;
  right: 11px;
  top: 50%;
  margin-top: -5px;
}
.entrada:has(> select):hover::after,
.entrada:has(> select):focus-within::after,
.entrada:has(> .sel-campo):hover::after,
.entrada:has(> .sel-campo):focus-within::after,
.pager .mostrar:hover::after {
  border-color: var(--txt);
}
/* ============================================================
 * O SELETOR: campo e lista, os dois nossos.
 *
 * O `<select>` continua no DOM guardando o valor (ver "A LISTA DE OPCOES
 * PASSA A SER DESENHADA POR NOS" no admin.js) e so para de ser desenhado.
 * ============================================================ */
.sel-campo {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}
.sel-campo > select {
  display: none;
}
.entrada > .sel-campo {
  flex: 1;
}
/* Quem posiciona a lista. Na moldura e a propria `.entrada`, para a lista
   abrir alinhada com a borda do campo e nao recuada depois do icone. */
.sel-ancora {
  position: relative;
}
.sel-gatilho {
  flex: 1;
  min-width: 0;
  padding: 0;
  text-align: left;
  font: inherit;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sel-gatilho:disabled {
  color: var(--dim-2);
  cursor: default;
}
.sel-lista {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  max-height: 264px;
  overflow-y: auto;
  z-index: 70;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  box-shadow: var(--sombra-drop);
}
/* Sem espaco embaixo a lista nasce para cima — o JS decide e poe a classe. */
.sel-lista.acima {
  top: auto;
  bottom: calc(100% + 6px);
}
.sel-opcao {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 11px;
  border-radius: 8px;
  color: var(--txt);
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.sel-opcao > span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sel-opcao svg {
  width: 16px;
  height: 16px;
  color: var(--destaque);
}
.sel-opcao:hover,
.sel-opcao:focus {
  outline: 0;
  background: var(--hover);
}
/* O foco de teclado precisa se distinguir do hover do mouse: quem navega com
   seta tem de ver ONDE esta sem mover o mouse para descobrir. */
.sel-opcao:focus {
  box-shadow: inset 0 0 0 1px var(--destaque);
}
.sel-opcao[aria-selected='true'] {
  font-weight: 600;
}
.sel-opcao[aria-disabled] {
  color: var(--dim-2);
  cursor: default;
}

/*
 * Um seletor de cinco opcoes nao precisa da largura da pagina.
 *
 * `.filtros` reparte a linha entre os campos, e um campo sozinho fica com ela
 * inteira. Numa busca isso e bom — o que se digita e longo. Num seletor e o
 * contrario: o valor escolhido fica a mil pixels do proprio rotulo.
 */
.campo:has(> .entrada > select),
.campo:has(> .entrada > .sel-campo) {
  max-width: 360px;
}
/* Periodo: duas datas dentro do MESMO campo, separadas por travessao —
   e um intervalo, e dois campos soltos nao dizem isso. */
.entrada .traco {
  color: var(--dim);
}
.entrada .limpar {
  color: var(--dim);
  line-height: 0;
}
.entrada .limpar:hover {
  color: var(--txt);
}
.acoes-filtro {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  padding: 22px 26px 24px;
}
.link-acao {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 500;
}
.link-acao svg {
  width: 18px;
  height: 18px;
}
.link-acao.suave {
  color: var(--dim);
}
.link-acao:hover {
  color: var(--txt);
}
.botao {
  padding: 11px 24px;
  border-radius: var(--radius-sm);
  background: var(--green);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
}
.botao:hover {
  filter: brightness(1.08);
}
.botao:disabled {
  background: var(--sel);
  color: var(--dim-2);
  cursor: default;
  filter: none;
}
.botao.contorno {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--txt);
  font-weight: 500;
}
.botao.contorno:hover {
  background: var(--hover);
  filter: none;
}
.botao.contorno svg {
  width: 19px;
  height: 19px;
  color: var(--dim);
}

/* ================= Tabela ================= */
.rolagem {
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
}

/* ============================================================
 * NO CELULAR A TABELA VIRA CARTAO.
 *
 * `.rolagem` deixa a tabela larga rolar por dentro do bloco. Num monitor isso
 * e saida de emergencia para a coluna que sobrou; num telefone de 375px vira o
 * normal, e o normal e desastre medido: a fila de Saques mostrava so "Pedido"
 * e "Usuario" — chave PIX, valor E OS BOTOES DE APROVAR E RECUSAR ficavam
 * fora, atras de uma rolagem lateral que nada na tela anuncia. A tela cuja
 * unica razao de existir e decidir nao deixava decidir.
 *
 * Entao cada LINHA vira um cartao empilhado: a primeira celula e o titulo (de
 * quem e a linha), as outras viram rotulo→valor, e as acoes descem para o
 * rodape do cartao ocupando a largura toda. Nada sai de vista, e nada precisa
 * ser descoberto por arrasto.
 *
 * O rotulo de cada celula e escrito pelo `rotularTabelas` do admin.js — sem
 * cabecalho no topo, "R$ 80,00" sozinho pode ser o saque, o saldo ou o
 * deposito.
 * ============================================================ */
@media (max-width: 820px) {
  .rolagem {
    overflow-x: visible;
    padding: 0 14px 14px;
  }
  .rolagem table,
  .rolagem tbody,
  .rolagem tfoot {
    display: block;
  }
  /* O cabecalho sai: quem diz o nome da coluna agora e cada celula. */
  .rolagem thead {
    display: none;
  }
  .rolagem tbody tr {
    display: block;
    margin-bottom: 10px;
    padding: 12px 14px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--panel);
  }
  .rolagem tbody tr:last-child {
    margin-bottom: 0;
  }
  .rolagem tbody tr:hover td {
    background: none;
  }
  .rolagem tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    /* O valor longo (IP, identificador de navegador, motivo escrito a mao)
       DESCE para a propria linha em vez de esticar o cartao — sem isto a
       tabela virava cartao e continuava rolando de lado, que era o defeito
       que se queria matar. */
    flex-wrap: wrap;
    gap: 2px 16px;
    padding: 7px 0 !important;
    border: 0;
    /* A celula da tabela e `nowrap` de proposito — numa tabela, valor quebrado
       em duas linhas desalinha a coluna inteira. No cartao nao ha coluna para
       desalinhar, e `nowrap` passa a ser o unico motivo de ainda haver rolagem
       lateral: o texto que nao quebra estica o cartao. */
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .rolagem tbody td::before {
    content: attr(data-rot);
    flex: none;
    color: var(--dim);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
  }
  /* Celula sem rotulo — acoes, e o "nada aqui" que ocupa a linha inteira. */
  .rolagem tbody td[data-rot=''] {
    display: block;
    padding-top: 12px !important;
  }
  .rolagem tbody td[data-rot='']::before {
    display: none;
  }
  /* A PRIMEIRA CELULA E O TITULO DO CARTAO: e ela que diz de quem e a linha, e
     um rotulo em cima dela ("Usuario: Fulano") seria dizer o obvio. */
  .rolagem tbody td:first-child {
    display: block;
    margin-bottom: 4px;
    padding: 0 0 10px !important;
    border-bottom: 1px solid var(--line-2);
  }
  .rolagem tbody td:first-child::before {
    display: none;
  }
  /* Os dois botoes de decisao dividem a largura do cartao. Empurrados para a
     direita como na tabela, ficariam com metade do polegar de alvo. */
  .rolagem .acoes-linha {
    display: flex;
    gap: 8px;
  }
  .rolagem .acoes-linha > .botao {
    flex: 1;
  }
  /* O total continua existindo, como um cartao proprio de fechamento. */
  .rolagem tfoot tr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    background: var(--total-bg);
  }
  .rolagem tfoot td {
    display: block;
    padding: 0 !important;
    border: 0;
  }
  .rolagem tfoot td:empty {
    display: none;
  }
  /* O aviso de lista cortada acompanha o recuo dos cartoes. */
  .corte {
    padding-left: 14px;
    padding-right: 14px;
  }
  /* Reticencias de tabela nao valem aqui — ver a nota em `admin.html`. */
}
th {
  padding: 14px 22px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  color: var(--dim);
  font-size: 14px;
  font-weight: 400;
  text-align: left;
  white-space: nowrap;
}
td {
  padding: 17px 22px;
  border-bottom: 1px solid var(--line-2);
  font-size: 15px;
  white-space: nowrap;
}
tbody tr:last-child td {
  border-bottom: 0;
}
tbody tr:hover td {
  background: var(--hover);
}
td.direita,
th.direita {
  text-align: right;
}
tfoot td {
  border-top: 1px solid var(--line);
  border-bottom: 0;
  background: var(--total-bg);
  font-weight: 600;
}
/* O Total nao acende no hover: nao e uma linha de dado. */
tfoot tr:hover td {
  background: var(--total-bg);
}
.destaque {
  color: var(--destaque);
  font-weight: 500;
}
.vazio {
  padding: 54px;
  color: var(--dim);
  font-size: 15px;
  text-align: center;
}

/* ============================================================
 * ESQUELETO DE CARREGAMENTO.
 *
 * O padrao antigo era a palavra "Carregando…" centralizada no meio do nada.
 * Ela nao diz o que vem nem quanto falta, e a tela salta de uma linha de texto
 * para uma pagina inteira — o olho perde o lugar a cada carregamento.
 *
 * O esqueleto mostra a FORMA do que esta chegando: titulo, fileira de cartoes,
 * tabela. Quando o dado chega, ele PREENCHE em vez de substituir, e nada salta.
 *
 * Nunca um girador. Girador diz "espere" e mais nada; o esqueleto ja ensina
 * onde cada coisa vai estar — e num painel que abre sempre na mesma forma,
 * isso e informacao de verdade.
 * ============================================================ */
.esq {
  border-radius: var(--radius-sm);
  background: var(--sel);
  animation: esq-respira 1.5s ease-in-out infinite;
}
@keyframes esq-respira {
  50% {
    opacity: 0.5;
  }
}
/* Quem pediu menos movimento ao sistema recebe o bloco parado: a forma
   continua sendo dita, o pulso e que sai. */
@media (prefers-reduced-motion: reduce) {
  .esq {
    animation: none;
  }
}

.esq-pagina {
  padding: 28px 32px;
}
.esq-titulo {
  width: 220px;
  height: 28px;
  margin-bottom: 12px;
}
.esq-lede {
  width: 330px;
  height: 14px;
  margin-bottom: 26px;
}
.esq-fileira {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}
.esq-fileira > .esq {
  height: 118px;
}
.esq-tabela {
  height: 340px;
}
@media (max-width: 900px) {
  .esq-pagina {
    padding: 20px 16px;
  }
  .esq-fileira {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Esqueleto de LISTA, para o bloco que carrega sozinho dentro de uma tela que
   ja esta montada — a gaveta de detalhe, o corpo de um cartao. */
.esq-lista {
  display: grid;
  gap: 11px;
  padding: 18px 0;
}
.esq-lista > .esq {
  height: 14px;
}
.esq-lista > .esq:nth-child(3n) {
  width: 70%;
}
.esq-lista > .esq:nth-child(3n + 2) {
  width: 88%;
}

/*
 * ESTADO VAZIO COM EXPLICACAO.
 *
 * "Nada por aqui" nao e resposta: quem abre uma fila vazia precisa saber se a
 * fila esta VAZIA ou se o filtro escondeu tudo — sao duas situacoes opostas com
 * a mesma cara. Entao todo vazio desta pagina diz QUAL vazio e, e oferece a
 * saida quando existe uma (limpar o recorte, ir para a tela que tem o dado).
 *
 * A ilustracao e neutra por padrao; o tom (`t-verde`, `t-ambar`) so pinta onde
 * o tema o define — assim o painel que ainda nao migrou mostra o mesmo bloco,
 * em cinza, em vez de um quadrado sem estilo.
 */
.vazio-rico {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 46px 24px 44px;
  text-align: center;
}
.vazio-rico .ilustra {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  margin-bottom: 6px;
  border-radius: var(--radius);
  background: var(--sel);
  color: var(--dim);
}
.vazio-rico .ilustra svg {
  width: 24px;
  height: 24px;
}
.vazio-rico b {
  color: var(--txt);
  font-size: 16px;
  font-weight: 600;
}
.vazio-rico p {
  max-width: 46ch;
  margin: 0;
  color: var(--dim);
  font-size: 14px;
  line-height: 1.5;
}
.vazio-rico .acao {
  margin-top: 12px;
}
.up {
  color: var(--green);
}
.down {
  color: var(--red);
}
.selo {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
.selo.ok {
  background: var(--green-soft);
  color: var(--green);
}
.selo.espera {
  background: var(--amber-soft);
  color: var(--amber);
}
.selo.ruim {
  background: var(--red-soft);
  color: var(--red);
}
.selo.neutro {
  background: var(--sel);
  color: var(--dim);
}

.rodape-tabela {
  padding: 16px 26px;
  border-top: 1px solid var(--line);
  color: var(--dim);
  font-size: 15px;
}
.rodape-tabela b {
  display: inline-block;
  min-width: 26px;
  margin-left: 6px;
  padding: 1px 9px;
  border-radius: 999px;
  background: var(--total-bg);
  color: var(--green);
  font-size: 14px;
  text-align: center;
}

/* Link de indicacao em destaque: e o que o parceiro vem buscar. */
.destaque-link {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 32px 32px;
  margin-bottom: 26px;
}
.destaque-link h2 {
  font-size: 20px;
  font-weight: 600;
}
.destaque-link p {
  margin: 6px 0 22px;
  color: var(--dim);
  font-size: 15px;
  max-width: 620px;
}
.destaque-link .caixa {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.destaque-link code {
  flex: 1;
  min-width: 280px;
  padding: 18px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  overflow-wrap: anywhere;
}
.destaque-link .botao {
  padding: 18px 32px;
  font-size: 16px;
}

/* Paginacao */
.pager {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 18px 26px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.pager .mostrar {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--dim);
  font-size: 15px;
}
/* O mesmo seletor do resto do painel, em tamanho de rodape de tabela. A
   moldura mora no GATILHO — aqui nao ha `.entrada` em volta para carrega-la. */
.pager .mostrar .sel-gatilho {
  height: 38px;
  /* A direita fica livre para a seta posicionada por cima. */
  padding: 0 28px 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel);
  cursor: pointer;
}
.pager .mostrar .sel-gatilho:hover {
  background: var(--hover);
}
/* Aqui a ancora e o proprio campo, e a lista abre alinhada a ele. */
.pager .mostrar .sel-lista {
  min-width: 120px;
}
.pager button {
  min-width: 38px;
  height: 38px;
  padding: 0 10px;
  border-radius: var(--radius-sm);
  color: var(--txt);
  font-size: 15px;
}
.pager button:hover:not(:disabled) {
  background: var(--hover);
}
.pager button.on {
  background: var(--sel);
  font-weight: 600;
}
.pager button:disabled {
  color: var(--dim-2);
  cursor: default;
}

/* ============================================================
 * TEMA ESCURO DO PAINEL — preferencia de QUEM USA, nao da marca.
 *
 * A cor da corretora para nas telas do cliente final dela
 * (traderoom, entrada, landing). Isto aqui e outra coisa: o
 * operador que passa oito horas no painel escolhe em que luz quer
 * trabalhar, e essa escolha e dele, nao de quem contratou a
 * plataforma. Fica no navegador dele (`localStorage`), por
 * superficie.
 *
 * SAO DOIS ESTADOS, claro e escuro. Quem nunca escolheu ENTRA no
 * que o aparelho pede (ver `temaInicial`), mas isso e um padrao, e
 * nao um terceiro estado: num botao que cicla, "seguir o sistema"
 * fazia o clique de quem ja estava no escuro do sistema nao mudar
 * nada visivel — o botao parecia quebrado.
 *
 * E uma TROCA DE PALETA, e nao um tema paralelo: o desenho inteiro
 * ja sai de tokens, entao inverter claro e escuro e redefinir as
 * ~15 cores de base. Nenhuma regra de componente muda — e
 * exatamente para isto que a regra "valor de design so via token"
 * existe.
 *
 * O QUE NAO INVERTE, e de proposito:
 *   - VERDE, VERMELHO e AMBAR continuam significando ganho, perda e
 *     espera. Sao semantica, nao decoracao — so os fundos suaves
 *     escurecem, para nao virarem manchas claras no escuro.
 *   - a ESCADA DE PROFUNDIDADE se mantem: fundo mais escuro que a
 *     barra, barra mais escura que o cartao. E o que da relevo sem
 *     sombra, que no escuro quase nao aparece.
 * ============================================================ */
:root[data-tema='escuro'] body.valion {
  color-scheme: dark;

  /*
   * O fundo NAO herda cor de marca nenhuma, e essa e a correcao de um
   * defeito real: quando ele saia do cadastro da corretora, uma que
   * escolhera lilas claro ficava com `--bg: #f5f3ff` e `--txt: #e8edf6`
   * — texto quase branco sobre fundo quase branco. Cor escolhida
   * olhando o tema claro nao atravessa para o escuro.
   */
  --bg: #0b1220;
  --panel: #111a2b;
  --txt: #e8edf6;
  --dim: #94a3b8;
  --dim-2: #64748b;
  --line: #22304a;
  --line-2: #1a2438;
  --hover: #16203350;
  --sel: #1a2438;

  /* Os fundos suaves escurecem: no escuro, um `#e9f7ee` vira mancha. */
  --green-soft: #12301f;
  --red-soft: #3a1717;
  --amber-soft: #3a2a10;
  --info-soft: #14213f;
  --roxo-soft: #241a3d;
  --primary-soft: #3a1d0d;
  --total-bg: #12301f;

  --sombra-card: 0 2px 8px rgba(0, 0, 0, 0.4);
  --sombra-drop: 0 10px 30px rgba(0, 0, 0, 0.5);
  --sombra-modal: 0 20px 60px rgba(0, 0, 0, 0.6);
}
/* A moldura de campo e o botao de contorno tem a borda cravada no tema claro
   (`#cbd5e1`): ali ela afunda contra o painel escuro. */
:root[data-tema='escuro'] body.valion .entrada,
:root[data-tema='escuro'] body.valion .botao.contorno {
  border-color: #2b3a57;
}
/* As medalhas do ranking sao fundos claros com texto escuro. */
:root[data-tema='escuro'] body.valion .pos.p1 {
  background: #4a370c;
  color: #fde68a;
}
:root[data-tema='escuro'] body.valion .pos.p2 {
  background: #2a3446;
  color: #cbd5e1;
}
:root[data-tema='escuro'] body.valion .pos.p3 {
  background: #43290f;
  color: #fdba74;
}

/* ================= Botao de tema ================= */
/*
 * Um botao so, alternando claro e escuro. Dois botoes lado a lado gastariam
 * espaco da barra para uma preferencia que se ajusta uma vez na vida; o
 * `title` e o `aria-label` dizem em que estado esta e qual vem a seguir.
 */
.tema-botao {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  color: var(--dim);
  flex: none;
}
.tema-botao:hover {
  background: var(--sel);
  color: var(--txt);
}
.tema-botao svg {
  width: 17px;
  height: 17px;
}

/* ================= Chip de recorte ================= */
/*
 * Filtro que mostra o estado no PROPRIO botao: nada de menu escondendo qual
 * recorte esta valendo.
 *
 * Nasceu no painel do operador, dentro do `<style>` do admin.html, e ficou
 * preso la — quando o console precisou do mesmo botao para escolher a moeda,
 * nao tinha como alcanca-lo. Componente que dois paineis usam mora aqui.
 */
.chips {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
}
.chip {
  padding: 6px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--dim);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.chip:hover {
  background: var(--hover);
  color: var(--txt);
}
.chip[aria-pressed='true'] {
  border-color: var(--txt);
  background: var(--txt);
  color: #fff;
}
.chip .n {
  margin-left: 5px;
  opacity: 0.6;
  font-variant-numeric: tabular-nums;
}

/* ================= Assistente de varias etapas ================= */
/*
 * A TRILHA DE ETAPAS no topo, no lugar de um formulario de cinquenta campos.
 *
 * Ela nao e enfeite: e o que responde as tres perguntas de quem esta no meio
 * de um cadastro longo — onde estou, quanto falta, e posso voltar. Um
 * formulario unico responde as tres com "role e descubra".
 *
 * Cada etapa mostra o proprio estado: concluida (preenchida), atual
 * (destacada) e futura (apagada). A linha entre elas so acende ate onde ja
 * se andou — a barra de progresso e a propria trilha, sem um segundo
 * elemento dizendo a mesma coisa.
 */
.trilha {
  display: flex;
  align-items: flex-start;
  margin-bottom: 26px;
}
.trilha .etapa {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  position: relative;
  background: none;
  border: 0;
  padding: 0;
  color: var(--dim-2);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}
/* O trilho passa POR TRAS das bolinhas, ligando uma a outra. */
.trilha .etapa::before,
.trilha .etapa::after {
  content: '';
  position: absolute;
  top: 15px;
  height: 2px;
  background: var(--line);
}
.trilha .etapa::before {
  left: 0;
  right: 50%;
}
.trilha .etapa::after {
  left: 50%;
  right: 0;
}
/* A primeira nao tem trilho a esquerda, nem a ultima a direita: a trilha
   comeca e termina nas bolinhas, e nao no vazio ao lado delas. */
.trilha .etapa:first-child::before,
.trilha .etapa:last-child::after {
  display: none;
}
.trilha .etapa .bolha {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: var(--panel);
  color: var(--dim-2);
  font-size: 13px;
  font-weight: 700;
}
.trilha .etapa .rotulo {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}
.trilha .etapa.feita {
  color: var(--txt);
}
.trilha .etapa.feita .bolha {
  border-color: var(--green);
  background: var(--green);
  color: #fff;
}
.trilha .etapa.feita::before,
.trilha .etapa.feita::after {
  background: var(--green);
}
/* A atual acende o trilho da ESQUERDA (o caminho andado) e deixa o da
   direita apagado — o que ainda nao aconteceu nao se pinta. */
.trilha .etapa.atual::before {
  background: var(--green);
}
.trilha .etapa.atual {
  color: var(--txt);
}
.trilha .etapa.atual .bolha {
  border-color: var(--destaque);
  background: var(--destaque);
  color: #fff;
}
/* Etapa concluida pode ser revisitada; a que ainda nao chegou, nao. */
.trilha .etapa:disabled {
  cursor: default;
}
.trilha .etapa:not(:disabled) {
  cursor: pointer;
}

/*
 * NO CELULAR, SO A ETAPA ATUAL DIZ O NOME.
 *
 * Com cinco etapas numa tela de 360px sobram 62px para cada uma, e nenhuma
 * palavra do assistente cabe nisso: "Proprietário" virava "Propriet…" e
 * "Financeiro" virava "Financ…". Reticencia nao e informacao — quem le
 * "Propriet…" ja sabia tanto quanto quem le so a bolinha.
 *
 * As bolinhas sozinhas continuam respondendo onde estou (a destacada) e
 * quanto falta (quantas faltam pintar). O nome, que e o que muda a cada
 * passo, aparece inteiro na que importa: a atual.
 */
@media (max-width: 700px) {
  .trilha .etapa .rotulo {
    display: none;
  }
  .trilha .etapa.atual .rotulo {
    display: block;
    position: absolute;
    top: 40px;
    /* Fora do fluxo para nao alargar a coluna dela: o nome inteiro passa por
       cima das vizinhas, que ali sao so bolinhas. */
    width: 160px;
    left: 50%;
    transform: translateX(-50%);
  }
  /* O espaco do rotulo absoluto continua reservado embaixo da trilha. */
  .trilha {
    margin-bottom: 44px;
  }
}

/* O rodape de navegacao do assistente: Voltar de um lado, Proximo do outro. */
.passo-acoes {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 26px 22px;
  border-top: 1px solid var(--line-2);
}
.passo-acoes .empurra {
  margin-left: auto;
}

/* ================= Envio de arte ================= */
/*
 * O quadro de envio mostra o que JA ESTA la, e nao so um botao "escolher
 * arquivo": quem esta trocando a logo de uma corretora precisa ver a atual
 * para saber se trocou a certa.
 */
.envios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 18px;
}
.envio {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  text-align: center;
}
.envio .cap {
  color: var(--txt);
  font-size: 13px;
  font-weight: 600;
}
/* A MEDIDA PEDIDA. Ganha peso de etiqueta — monoespacada e destacada — porque
   e a unica linha do quadro que a pessoa precisa COPIAR, e nao so ler. */
.envio .medida {
  font-family: var(--fonte-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--txt);
  background: var(--sel);
  border-radius: var(--radius-sm);
  padding: 3px 8px;
  align-self: flex-start;
}
/* Onde aquela arte aparece. Sem esta linha, "logo principal" e "logo para
   fundo claro" eram dois nomes sem diferenca visivel para quem envia. */
.envio .onde {
  color: var(--dim);
  font-size: 12px;
  line-height: 1.45;
}
/* O fundo xadrez revela transparencia: uma logo com fundo branco chapado
   parece igual a uma com fundo transparente contra um quadro branco, e a
   diferenca so aparece depois de publicada em cima da barra escura. */
.envio .previa {
  display: grid;
  place-items: center;
  height: 84px;
  border-radius: var(--radius-sm);
  background-color: var(--sel);
  background-image:
    linear-gradient(45deg, var(--line-2) 25%, transparent 25%),
    linear-gradient(-45deg, var(--line-2) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--line-2) 75%),
    linear-gradient(-45deg, transparent 75%, var(--line-2) 75%);
  background-size: 14px 14px;
  background-position:
    0 0,
    0 7px,
    7px -7px,
    -7px 0;
}
.envio .previa img {
  max-width: 100%;
  max-height: 72px;
  object-fit: contain;
}
.envio .previa .vazio-arte {
  color: var(--dim-2);
  font-size: 12px;
}
.envio input[type='file'] {
  display: none;
}

/* ================= Cores da marca: campo explicado e previa ================= */
/*
 * CADA COR CARREGA A FRASE DO QUE ELA MUDA.
 *
 * Cinco campos chamados so pelo nome da cor nao se distinguem: "cor primaria"
 * e "cor dos botoes" pareciam a mesma coisa, e ninguem sabia o que ia
 * acontecer ao salvar. O rotulo diz o nome, a linha abaixo diz ONDE aquilo
 * aparece, e a previa ao lado mostra o resultado antes de gravar.
 */
.grade-cores {
  display: grid;
  gap: 18px;
}
.cor-linha {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: start;
}
.cor-linha input[type='color'] {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
}
.cor-linha .rot {
  font-size: 14px;
  font-weight: 600;
}
.cor-linha .onde {
  margin-top: 2px;
  color: var(--dim);
  font-size: 13px;
  line-height: 1.45;
}
.cor-linha .entrada {
  margin-top: 7px;
  max-width: 170px;
}

.cap-previa {
  display: block;
  margin-bottom: 10px;
  color: var(--dim);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/*
 * A PREVIA E A TELA DE ENTRADA DA CORRETORA, em miniatura.
 *
 * Ela mostra JUSTAMENTE onde as cores mandam: o cliente final abre esta tela
 * antes de qualquer outra. Um painel de mentira aqui ensinaria o contrario do
 * que acontece — os paineis de operacao seguem o desenho do produto.
 *
 * As cores entram por variavel local (`--p`, `--b`), escritas pelo JS a cada
 * digitacao: o valor de trocar a cor e ver o efeito ANTES de gravar.
 */
.previa-marca {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel);
}
.previa-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-2);
}
.previa-marca-logo {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: var(--p, #ff5a1f);
}
.previa-cta {
  margin-left: auto;
  padding: 6px 14px;
  border-radius: 8px;
  background: var(--b, var(--p, #ff5a1f));
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.previa-tela {
  display: grid;
  gap: 9px;
  padding: 20px 22px 24px;
}
.previa-titulo {
  font-size: 17px;
  text-align: center;
}
/* Os campos sao so molduras: o que se julga aqui e a COR, e texto de mentira
   dentro deles disputaria a atencao com ela. */
.previa-campo {
  height: 34px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.previa-botao {
  display: grid;
  place-items: center;
  height: 36px;
  margin-top: 4px;
  border-radius: var(--radius-sm);
  background: var(--b, var(--p, #ff5a1f));
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}
.previa-link {
  color: var(--p, #ff5a1f);
  font-size: 12px;
  font-weight: 600;
  text-align: center;
}

/* ================= Campo de cor ================= */
/* O seletor nativo ao lado do texto: o texto e para colar um hex vindo de
   outro lugar, e o seletor e para escolher olhando. Um so nunca cobre os
   dois usos. */
.cor-campo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cor-campo input[type='color'] {
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: none;
  cursor: pointer;
}
.cor-campo .entrada {
  flex: 1;
  min-width: 0;
}

/* ================= Par de acoes numa linha ================= */
/*
 * Dois botoes lado a lado, alinhados a direita — no fim de uma linha de
 * tabela ou no rodape de um quadro. Subiu de `admin.html` quando o console
 * passou a ter "Substituir / Remover" em cada arte da corretora.
 */
.acoes-linha {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
/* Botao dentro de linha e menor: ele se repete a cada linha, e o tamanho de
   formulario empurra a coluna do valor para fora da tela. */
.acoes-linha .botao {
  padding: 8px 16px;
  font-size: 14px;
}

/* ================= Busca dentro do bloco ================= */
/*
 * A busca curta que mora na barra de um bloco, ao lado dos chips de recorte.
 *
 * Subiu de `admin.html` na terceira vez que uma peca do painel do operador
 * apareceu quebrada no console: sem a regra do `svg`, a lupa nasce SEM
 * tamanho e o SVG estica ate a largura do bloco — mil pixels de lupa
 * cobrindo a tela inteira. Componente que dois paineis usam mora aqui.
 */
.busca-mini {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 180px;
  margin-left: auto;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.busca-mini svg {
  flex: none;
  width: 16px;
  height: 16px;
  color: var(--dim-2);
}
.busca-mini input {
  width: 100%;
  height: 34px;
  border: 0;
  background: none;
  font-size: 14px;
}
.busca-mini input:focus {
  outline: 0;
}

/* ================= Coluna de acao presa no fim ================= */
/*
 * A COLUNA QUE NAO PODE SUMIR NA ROLAGEM.
 *
 * Uma tabela larga rola de lado dentro do proprio `.rolagem`, e isso esta
 * certo para NUMERO: quem quer conferir deposito rola ate ele. Errado para
 * BOTAO. Na lista de corretoras do console, "Entrar na Corretora" e a razao
 * de a tela existir, e com onze colunas ele nascia fora do campo de visao,
 * atras de uma rolagem que nada anuncia.
 *
 * Presa a direita, a acao acompanha a rolagem. A sombra do lado esquerdo
 * conta que ha conteudo passando por baixo — sem ela a coluna parece o fim
 * da tabela, e ninguem rola.
 */
.rolagem th.fixa-fim,
.rolagem td.fixa-fim {
  position: sticky;
  right: 0;
  background: var(--panel);
  box-shadow: inset 1px 0 0 var(--line-2);
}
/* No celular a tabela vira cartao empilhado: nao ha lado para prender. */
@media (max-width: 820px) {
  .rolagem th.fixa-fim,
  .rolagem td.fixa-fim {
    position: static;
    box-shadow: none;
  }
}

/* ================= Avatar e celula de gente ================= */
/*
 * A inicial no circulo e a celula "quem e" (avatar + nome + linha de apoio).
 * Nasceram no painel do operador e subiram para ca quando o console passou a
 * listar corretoras do mesmo jeito — componente de dois paineis mora aqui.
 */
.avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--sel);
  color: var(--dim);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.02em;
  overflow: hidden;
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar.mini {
  width: 38px;
  height: 38px;
  font-size: 14px;
}
.u-cel {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
}
.u-cel > div {
  min-width: 0;
}
.u-cel b {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ================= Grafico ================= */
.grafico svg {
  width: 100%;
  height: 240px;
  display: block;
}
/*
 * GRAFICO QUE TEM TEXTO DENTRO desenha em pixel de verdade.
 *
 * Um viewBox de largura fixa esticado ate a largura do bloco escala o desenho
 * INTEIRO, letra incluida: num celular de 375px o mesmo desenho que cabia em
 * 720 vinha a 46%, e um rotulo de 11px chegava com 5. Ilegivel.
 *
 * A altura fica cravada e quem desenha le a largura que sobrou, montando o
 * viewBox com ela — uma unidade do desenho passa a valer um pixel da tela, e
 * o texto sai do tamanho que foi pedido em qualquer largura.
 */
.grafico svg.escala {
  height: 260px;
}
.grafico .eixo {
  fill: var(--dim-2);
  font-size: 11px;
}
.grafico .grade {
  stroke: var(--line-2);
  stroke-width: 1;
}
/* O zero e mais forte que as outras linhas: e a fronteira entre a casa ganhar
   e a casa pagar, e some no meio de quatro linhas iguais. */
.grafico .zero {
  stroke: var(--line);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
}
.grafico .legenda {
  display: flex;
  justify-content: space-between;
  color: var(--dim);
  font-size: 13px;
  margin-top: 8px;
}

/*
 * AS CHAVES DE UM GRAFICO DE DUAS SERIES.
 *
 * Ficam no CABECALHO do bloco, e nao embaixo do desenho: duas linhas de cor
 * diferente sem chave nenhuma nao se leem, e uma chave que so aparece depois
 * de rolar chega tarde demais.
 */
.chaves {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  color: var(--dim);
  font-size: 13px;
}
.chaves span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.chaves i {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: currentColor;
}

/* ================= Rosquinha de distribuicao ================= */
/*
 * A fatia so existe para valor POSITIVO. Uma corretora no vermelho nao tem
 * fatia — area negativa nao se desenha — e aparece na lista abaixo com o
 * numero dela, que e a informacao que importa.
 */
.rosquinha {
  display: grid;
  justify-items: center;
  gap: 18px;
}
.rosquinha svg {
  width: 190px;
  height: 190px;
  display: block;
}
.rosquinha .meio {
  fill: var(--txt);
  font-size: 19px;
  font-weight: 700;
  text-anchor: middle;
}
.rosquinha .meio-cap {
  fill: var(--dim);
  font-size: 10px;
  text-anchor: middle;
}
.rosquinha .fatias {
  width: 100%;
  display: grid;
  gap: 11px;
}
.rosquinha .fatia {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  min-width: 0;
}
.rosquinha .fatia i {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.rosquinha .fatia b {
  overflow: hidden;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rosquinha .fatia .val {
  margin-left: auto;
  padding-left: 10px;
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  white-space: nowrap;
}

/* ================= Link de indicacao ================= */
.linkref {
  display: flex;
  gap: 14px;
  align-items: center;
  flex-wrap: wrap;
}
.linkref code {
  flex: 1;
  min-width: 260px;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg);
  font-family: inherit;
  font-size: 15px;
  overflow-wrap: anywhere;
}

.duas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
/*
 * Filho de grade PRECISA poder encolher.
 *
 * Sem isto o `min-width: auto` que a grade da de presente faz a coluna crescer
 * ate caber a tabela inteira — e a PAGINA passa a rolar de lado, em vez da
 * tabela rolar dentro do proprio `.rolagem`. O defeito so aparece quando a
 * tabela e larga, entao passa despercebido ate alguem por dez colunas ali.
 */
.duas > * {
  min-width: 0;
}
/*
 * DUAS COLUNAS DESIGUAIS: a da esquerda vale por duas.
 *
 * Existe para o par grafico + resumo. Num `.duas` de metade a metade o
 * grafico de linha fica estreito demais para catorze dias caberem sem os
 * rotulos se encavalarem, e a rosca ao lado sobra espaco vazio: sao duas
 * pecas de tamanho natural diferente, e forcar o mesmo peso piora as duas.
 */
.dois-um {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  align-items: start;
}
.dois-um > * {
  min-width: 0;
}
@media (max-width: 1080px) {
  .dois-um {
    grid-template-columns: 1fr;
  }
}
.info-lista .item {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line-2);
  font-size: 15px;
}
.info-lista .item:last-child {
  border-bottom: 0;
}
.info-lista .item span {
  color: var(--dim);
}
.info-lista .item b {
  font-weight: 600;
}
.msg {
  margin-top: 14px;
  font-size: 15px;
}
.msg.bad {
  color: var(--red);
}
.msg.good {
  color: var(--green);
}

/* ================= Modal e aviso ================= */
#overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: grid;
  place-items: center;
  z-index: 90;
}
#modal {
  width: min(460px, calc(100vw - 40px));
  background: var(--panel);
  border-radius: var(--radius);
  padding: 28px;
}
#modal h3 {
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 10px;
}
#modal dl {
  margin: 14px 0;
}
#modal dt {
  margin-top: 12px;
  color: var(--dim);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.045em;
  text-transform: uppercase;
}
#modal dd {
  font-size: 16px;
  font-weight: 600;
}
#modal .acoes {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 22px;
}
#modalNo {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--txt);
  font-weight: 500;
}
#modalYes.danger {
  background: var(--red);
}
#toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--txt);
  color: #fff;
  padding: 13px 22px;
  border-radius: var(--radius-sm);
  font-size: 15px;
  z-index: 95;
}

@media (max-width: 1080px) {
  .duas {
    grid-template-columns: 1fr;
  }
}
/*
 * O MENU NO CELULAR: gaveta, e nao um bloco no topo.
 *
 * Empilhado, o menu empurrava a tela inteira para baixo — quem abria o
 * painel via a lista de secoes e nada do conteudo. Como gaveta, ele sai
 * do caminho e volta com um toque.
 *
 * No desktop nada disto vale: o botao e o fundo somem, e a barra e a
 * coluna fixa de sempre.
 */
.hamburguer,
.cabeca-gaveta {
  display: none;
}

@media (max-width: 900px) {
  .hamburguer {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    margin-left: -6px;
    border-radius: 10px;
    color: var(--txt);
  }
  .hamburguer:hover {
    background: var(--hover);
  }
  .hamburguer svg {
    width: 24px;
    height: 24px;
  }

  .shell {
    display: block;
  }

  .side {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(310px, 86vw);
    height: 100%;
    padding-top: 0;
    z-index: 60;
    /* Fora da tela por padrao. `transform` e nao `left` porque a
       animacao anda na placa de video e nao reflui a pagina. */
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.18);
  }
  .side.aberta {
    transform: translateX(0);
  }

  .cabeca-gaveta {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 14px 14px;
    margin-bottom: 4px;
    border-bottom: 1px solid var(--line);
  }
  .cabeca-gaveta .logo {
    height: 28px;
    width: auto;
  }
  .fechar-gaveta {
    margin-left: auto;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    color: var(--dim);
  }
  .fechar-gaveta:hover {
    background: var(--hover);
    color: var(--txt);
  }
  .fechar-gaveta svg {
    width: 21px;
    height: 21px;
  }

  #fundoMenu {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 50;
  }

  .top {
    height: auto;
    padding: 12px 16px;
    gap: 12px;
    flex-wrap: wrap;
  }
  .top .logo {
    height: 26px;
  }
  /* Espaco e curto: a etiqueta some e fica a data, que e o dado. */
  .janela span:first-child {
    display: none;
  }
  .saldo-topo {
    padding-left: 14px;
  }
  main {
    padding: 22px 16px 70px;
  }
  h1 {
    font-size: 25px;
  }
}

/* Telas bem estreitas: o cabecalho vira duas linhas em vez de espremer. */
@media (max-width: 560px) {
  .top .spacer {
    display: none;
  }
  .quem {
    max-width: none;
  }
}

/* ============================================================
 * TEMA VALION (design system: docs/DESIGN-SYSTEM-ADMIN.md)
 *
 * Escopo inteiro em `body.valion`, e por um motivo so: o painel do
 * afiliado divide este arquivo e AINDA NAO migrou. Quando migrar, e
 * uma classe no <body> dele — nada aqui e duplicado.
 *
 * A regra de sempre continua valendo: valor de design mora nos
 * tokens. O tema e uma troca de tokens mais a casca (sidebar escura,
 * topbar), nunca cor solta em tela.
 * ============================================================ */
body.valion {
  --bg: #f8fafc;
  --panel: #ffffff;
  --txt: #0f172a;
  --dim: #64748b;
  --dim-2: #94a3b8;
  --line: #e2e8f0;
  --line-2: #eef2f7;
  --hover: #f8fafc;
  --sel: #f1f5f9;

  --green: #16a34a;
  --green-soft: #e9f7ee;
  --red: #dc2626;
  --red-soft: #fdecec;
  --amber: #f59e0b;
  --amber-soft: #fef5e5;
  --info: #2563eb;
  --info-soft: #eaf0fe;
  --roxo: #7c3aed;
  --roxo-soft: #f2ecfe;

  /*
   * A PRIMARIA DO PRODUTO, e nao da corretora.
   *
   * A marca do cliente pinta o TRADEROOM e a tela de entrada — as telas que
   * o cliente final dele ve. Os paineis de operacao ficam com o desenho do
   * produto de proposito: quem abre o painel do operador esta trabalhando na
   * ferramenta, e a ferramenta e a mesma em toda corretora.
   *
   * `--destaque` aponta para ca: toda enfase do painel fala a mesma lingua.
   */
  --primary: #ff5a1f;
  --primary-soft: #ffede5;
  --destaque: var(--primary);
  --total-bg: var(--green-soft);

  --radius: 16px;
  --radius-sm: 12px;
  --sombra-card: 0 2px 8px rgba(15, 23, 42, 0.04);
  --sombra-drop: 0 10px 30px rgba(0, 0, 0, 0.08);
  --sombra-modal: 0 20px 60px rgba(0, 0, 0, 0.15);

  --side-bg: #0f172a;
  --side-hover: #1e293b;
  --side-txt: #ffffff;
  --side-dim: #94a3b8;
  /* O vermelho do fundo escuro. `--red` (#dc2626) e calibrado para fundo
     claro e afunda em cima de #0f172a; este e o mesmo vermelho clareado ate
     ter contraste de leitura na sidebar. */
  --side-perigo: #f87171;
  --side-perigo-bg: rgba(248, 113, 113, 0.14);

  /*
   * AS CORES DE GRAFICO, com nome de PAPEL e nao de tinta.
   *
   * `--serie-receita` diz o que a linha significa; `--primary` diria de que
   * cor ela e. Quando a marca mudar de laranja, a receita continua sendo a
   * cor da marca sem ninguem procurar "onde mais o laranja aparece".
   *
   * As fatias sao seis, e param em seis de proposito: acima disso a rosquinha
   * vira um arco-iris que ninguem casa com a legenda, e a tela agrupa o resto
   * em "Outras" — que e a informacao certa de qualquer forma.
   */
  --serie-receita: var(--primary);
  --serie-volume: var(--green);
  --fatia-1: var(--primary);
  --fatia-2: var(--info);
  --fatia-3: var(--green);
  --fatia-4: var(--roxo);
  --fatia-5: var(--amber);
  --fatia-6: var(--dim-2);
}

/* ---------------- Casca: sidebar a esquerda, topbar em cima ---------------- */
body.valion .app {
  display: flex;
  min-height: 100vh;
}
body.valion .centro {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
body.valion .shell {
  display: block;
  min-height: 0;
}
body.valion main {
  padding: 28px 32px 64px;
}

/* ---------------- Sidebar escura ---------------- */
body.valion .side {
  width: 280px;
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 20px 16px;
  background: var(--side-bg);
  border-right: 0;
}
body.valion .side .marca {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  margin: 2px 6px 22px;
}
body.valion .side .marca img {
  height: 30px;
  width: auto;
}
/*
 * "ADMIN" ao lado do logo. Não é o nome da corretora — é o que ESTE produto do
 * Valion Code é (o painel do operador). Cor, peso e espacamento entre letras
 * dizem "rótulo do produto", não "título".
 */
body.valion .side .marca .produto {
  padding-left: 10px;
  border-left: 1px solid var(--side-hover);
  color: var(--side-txt);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
}
/* Legenda de secao: "MENU PRINCIPAL", como na referencia. */
body.valion .side .navcap {
  margin: 18px 12px 8px;
  color: var(--side-dim);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
body.valion .side .navcap:first-child {
  margin-top: 0;
}
body.valion .side nav button.solo {
  gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  color: var(--side-txt);
  font-size: 14.5px;
  font-weight: 500;
  transition:
    background 0.2s,
    color 0.2s;
}
body.valion .side nav button.solo svg {
  width: 20px;
  height: 20px;
  color: var(--side-dim);
}
body.valion .side nav button.solo:hover {
  background: var(--side-hover);
}
/* O item ativo e a UNICA pastilha laranja da tela: e assim que se sabe
   onde esta sem ler nada. */
body.valion .side nav button.solo.on {
  background: var(--primary);
  color: #fff;
}
body.valion .side nav button.solo.on svg {
  color: #fff;
}
body.valion .side nav .badge {
  margin-left: auto;
  min-width: 21px;
  padding: 1px 7px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  text-align: center;
}
body.valion .side nav button.solo.on .badge {
  background: rgba(255, 255, 255, 0.22);
}

/*
 * MENU DE DOIS NIVEIS — so o afiliado e o console tem.
 *
 * O painel do operador tem uma lista achatada e usa `.solo` para tudo, entao a
 * sidebar escura nasceu cobrindo so essa classe. Nos outros dois o menu abre em
 * grupos (`.grupo`) com filhos (`.item`), e sem estas regras eles herdavam o
 * `--txt` do tema claro: texto #0F172A sobre fundo #0F172A, ou seja, itens de
 * menu INVISIVEIS. Foi o que apareceu no primeiro carregamento do painel do
 * afiliado depois da migracao.
 *
 * O filho ativo repete a pastilha laranja do `.solo`: em qualquer um dos tres
 * paineis, o laranja e sempre "voce esta aqui".
 */
body.valion .side nav button.grupo,
body.valion .side nav button.item {
  color: var(--side-txt);
  border-radius: 12px;
  font-size: 14.5px;
  transition:
    background 0.2s,
    color 0.2s;
}
body.valion .side nav button.grupo svg,
body.valion .side nav button.grupo .seta {
  color: var(--side-dim);
}
body.valion .side nav button.grupo:hover,
body.valion .side nav button.item:hover {
  background: var(--side-hover);
}
/* O filho e um degrau abaixo do grupo, e o cinza diz isso antes do recuo. */
body.valion .side nav button.item {
  color: var(--side-dim);
  font-size: 14px;
}
body.valion .side nav button.item:hover {
  color: var(--side-txt);
}
body.valion .side nav button.item.on {
  background: var(--primary);
  color: #fff;
  font-weight: 500;
}
body.valion .side nav button.item.on .badge {
  background: rgba(255, 255, 255, 0.22);
}

/* Rodape da sidebar: traderoom + quem esta logado. */
body.valion .side .rodape {
  border-top: 1px solid var(--side-hover);
  margin-top: 14px;
  padding-top: 12px;
}
/*
 * OS DOIS BOTOES DO RODAPE.
 *
 * O `.sair:hover` do tema base pinta `--hover` (#f8fafc) — um cinza de fundo
 * CLARO, feito para tabela de pagina branca. Na sidebar escura isso virava um
 * flash quase branco a cada passada do mouse, e os dois unicos botoes do
 * rodape eram os unicos itens da barra que nao se comportavam como o resto.
 *
 * Agora eles seguem o mesmo gesto dos itens do menu: fundo `--side-hover`, com
 * o icone acendendo junto do texto — sem icone acendendo, so metade do botao
 * responde ao mouse e a peca parece meio morta.
 */
body.valion .side .rodape .sair {
  color: var(--side-dim);
  transition:
    background 0.2s,
    color 0.2s;
}
body.valion .side .rodape .sair svg {
  color: inherit;
  transition: color 0.2s;
}
body.valion .side .rodape .sair:hover {
  background: var(--side-hover);
  color: var(--side-txt);
}

/*
 * SAIR E VERMELHO — e vermelho o tempo todo, nao so no hover.
 *
 * Encerrar a sessao e a unica acao destrutiva da barra: quem passa o olho
 * procurando "onde eu saio" acha pela cor, e quem NAO quer sair reconhece o
 * que evitar antes de chegar perto. Vermelho que aparece so no hover chega
 * tarde — ja se esta em cima do botao.
 */
body.valion .side .rodape .sair.perigo {
  color: var(--side-perigo);
}
body.valion .side .rodape .sair.perigo:hover {
  background: var(--side-perigo-bg);
  color: var(--side-perigo);
}
body.valion .side .perfil {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-top: 10px;
  padding: 10px 8px 2px;
}
body.valion .side .perfil .avatar {
  width: 40px;
  height: 40px;
  background: var(--side-hover);
  color: var(--side-txt);
  font-size: 15px;
}
body.valion .side .perfil b {
  display: block;
  color: var(--side-txt);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
}
body.valion .side .perfil span {
  color: var(--side-dim);
  font-size: 12.5px;
}

/* ---------------- Topbar 72px ---------------- */
body.valion .top {
  height: 72px;
  gap: 16px;
  padding: 0 32px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  z-index: 40;
}
/* O sino carrega a fila de decisao: e a unica notificacao que existe de
   verdade nesta plataforma, e clicar leva para ela. */
body.valion .sino {
  position: relative;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--line);
  border-radius: 12px;
  color: var(--dim);
  transition: background 0.2s;
}
body.valion .sino:hover {
  background: var(--hover);
}
body.valion .sino svg {
  width: 20px;
  height: 20px;
}
body.valion .sino .badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 19px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
}
body.valion .saldo-topo {
  border-left-color: var(--line);
}
body.valion .quem-caixa {
  display: flex;
  align-items: center;
  gap: 10px;
}
body.valion .quem-caixa .avatar {
  width: 40px;
  height: 40px;
  font-size: 15px;
}

/* ---------------- Tipografia e pecas ---------------- */
body.valion h1 {
  font-size: 30px;
  font-weight: 700;
}
body.valion .bloco > header h2 {
  font-size: 17px;
  font-weight: 600;
}

body.valion .card,
body.valion .bloco {
  border-color: var(--line);
  box-shadow: var(--sombra-card);
  transition:
    transform 0.2s,
    box-shadow 0.2s;
}
body.valion .card:hover {
  transform: translateY(-2px);
}
body.valion #modal {
  box-shadow: var(--sombra-modal);
}

body.valion .botao {
  min-height: 44px;
  border-radius: var(--radius-sm);
  background: var(--primary);
  transition: opacity 0.2s;
}
body.valion .botao:hover {
  filter: none;
  opacity: 0.9;
}
body.valion .botao.contorno {
  background: var(--panel);
  border-color: #cbd5e1;
  color: var(--txt);
}
body.valion .botao.contorno:hover {
  opacity: 1;
  background: var(--hover);
}
body.valion .botao.perigo {
  background: var(--red-soft);
  color: var(--red);
  box-shadow: none;
}
body.valion .entrada {
  height: 44px;
  border-radius: var(--radius-sm);
  border-color: #cbd5e1;
  background: var(--panel);
}
body.valion .abas button[aria-selected='true'] {
  border-bottom-color: var(--primary);
}
body.valion .chip[aria-pressed='true'] {
  border-color: var(--primary);
  background: var(--primary);
}

/* Tabelas: linhas altas, separador leve, cabecalho na cor secundaria. */
body.valion table th {
  font-size: 13px;
  font-weight: 600;
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
body.valion table td {
  padding-top: 18px;
  padding-bottom: 18px;
}
body.valion tbody tr {
  transition: background 0.2s;
}
body.valion tbody tr:hover td {
  background: var(--hover);
}

/* ---------------- KPI cards (referencia: icone, rotulo, numero, delta) ----- */
body.valion .kpi {
  padding: 20px 22px;
}
body.valion .kpi .topo-kpi {
  display: flex;
  align-items: center;
  gap: 12px;
}
body.valion .kpi .cap {
  color: var(--dim);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
body.valion .kpi .val {
  margin: 10px 0 4px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
body.valion .chip-ico {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
}
body.valion .chip-ico svg {
  width: 20px;
  height: 20px;
}
body.valion .t-laranja {
  background: var(--primary-soft);
  color: var(--primary);
}
body.valion .t-verde {
  background: var(--green-soft);
  color: var(--green);
}
body.valion .t-azul {
  background: var(--info-soft);
  color: var(--info);
}
body.valion .t-roxo {
  background: var(--roxo-soft);
  color: var(--roxo);
}
body.valion .t-ambar {
  background: var(--amber-soft);
  color: var(--amber);
}
body.valion .t-vermelho {
  background: var(--red-soft);
  color: var(--red);
}
body.valion .delta {
  font-size: 13px;
  font-weight: 600;
}
body.valion .delta.up {
  color: var(--green);
}
body.valion .delta.down {
  color: var(--red);
}
body.valion .delta .vs {
  color: var(--dim-2);
  font-weight: 400;
}

/* Linha do Resumo Financeiro: icone, rotulo em cima, valor embaixo. */
body.valion .linhafin {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}
/*
 * A COLUNA DA LINHA PODE ENCOLHER — e a nota embaixo dela QUEBRA.
 *
 * `.linhafin` ja tinha `min-width: 0`, mas quem carrega o texto e o `<div>`
 * filho, e nele valia o `min-width: auto` que a flexbox da de presente. Com a
 * nota em `nowrap`, esse filho crescia ate o tamanho do texto inteiro: numa
 * celula de 180px, "Sua participação (desde o início)" media 236px e vazava
 * 100px POR CIMA da coluna vizinha. As duas notas encostavam e liam-se como
 * uma frase so — "stakes − payouts − bônus liberadocomissão contratada".
 *
 * O `nowrap` de `.delta` foi calibrado para o CARTAO de KPI, onde a nota em
 * duas linhas empurra seis cartoes para baixo de uma vez. Aqui nao ha cartao
 * para empurrar: a nota explica a conta, e explicacao pode ocupar duas
 * linhas. Cortar com reticencias seria pior — "stakes − payouts − bôn…" nao
 * explica nada.
 */
body.valion .linhafin > div {
  min-width: 0;
}
body.valion .linhafin .delta {
  white-space: normal;
  overflow: visible;
}
body.valion .linhafin .cap {
  color: var(--dim);
  font-size: 13px;
}
body.valion .linhafin .val {
  margin-top: 2px;
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
body.valion .grade-fin {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 22px 18px;
}

/* A rosca da taxa de acerto. Verde = clientes ganhando. */
body.valion .rosca {
  position: relative;
  width: 118px;
  height: 118px;
  border-radius: 50%;
  background: conic-gradient(var(--green) calc(var(--p) * 1%), var(--line) 0);
}
body.valion .rosca::after {
  content: '';
  position: absolute;
  inset: 13px;
  border-radius: 50%;
  background: var(--panel);
}
body.valion .rosca b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 21px;
  font-weight: 700;
  z-index: 1;
}

/* Posicao no ranking: medalha para os tres primeiros, numero para o resto. */
body.valion .pos {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--sel);
  color: var(--dim);
  font-size: 13px;
  font-weight: 700;
}
body.valion .pos.p1 {
  background: #fef3c7;
  color: #b45309;
}
body.valion .pos.p2 {
  background: #e2e8f0;
  color: #475569;
}
body.valion .pos.p3 {
  background: #ffedd5;
  color: #c2410c;
}

body.valion .rodape-pagina {
  margin-top: 34px;
  color: var(--dim-2);
  font-size: 13px;
  text-align: center;
}

/* ============================================================
 * DENSIDADE COMPACTA — o painel a ~80% do tamanho base.
 *
 * O sistema de design foi desenhado numa tela de 1512px. Num
 * monitor de 1920 os mesmos pixels viram letra grande e cartao
 * gordo: sobra espaco, falta informacao por tela. Este bloco e a
 * ESCALA — nao um estilo novo.
 *
 * Regra ao mexer aqui: multiplique o valor base por ~0,8 e
 * arredonde para o inteiro mais proximo. Nada de valor inventado,
 * nada de cor: densidade nao muda cor, raio nem hierarquia.
 *
 * Tela nova nao precisa repetir isto — o que ela reusa
 * (`.card`, `.bloco`, tabela, `.botao`) ja nasce compacto.
 * ============================================================ */
body.valion {
  font-size: 14px;
}

/* ---- Casca ---- */
body.valion .side {
  width: 224px;
  padding: 16px 12px;
}
body.valion .side .marca {
  gap: 8px;
  margin: 2px 6px 18px;
}
body.valion .side .marca img {
  height: 25px;
}
body.valion .side .marca .produto {
  padding-left: 8px;
  font-size: 11.5px;
}
body.valion .side .navcap {
  margin: 15px 10px 6px;
  font-size: 10px;
}
body.valion .side nav button.solo {
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 13.5px;
}
body.valion .side nav button.solo svg {
  width: 18px;
  height: 18px;
}
body.valion .side nav .badge {
  min-width: 18px;
  padding: 0 6px;
  font-size: 11px;
}
body.valion .side .rodape .sair {
  padding: 9px 12px;
  font-size: 13.5px;
}
body.valion .side .perfil {
  gap: 9px;
  padding: 8px 6px 0;
}
body.valion .side .perfil .avatar {
  width: 33px;
  height: 33px;
  font-size: 13px;
}
body.valion .side .perfil b {
  font-size: 13px;
}
body.valion .side .perfil span {
  font-size: 11.5px;
}

body.valion .top {
  height: 58px;
  gap: 13px;
  padding: 0 26px;
}
body.valion .sino {
  width: 36px;
  height: 36px;
  border-radius: 10px;
}
body.valion .sino svg {
  width: 17px;
  height: 17px;
}
body.valion .sino .badge {
  min-width: 16px;
  font-size: 10px;
}
body.valion .saldo-topo {
  padding-left: 18px;
  font-size: 17px;
}
body.valion .saldo-topo .rot {
  font-size: 10.5px;
}
body.valion main {
  padding: 18px 26px 32px;
}
/* O delta cabe numa linha: em duas, seis cartoes crescem juntos e o rodape
   da pagina sai da tela. */
body.valion .delta {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---- Tipografia de pagina ---- */
body.valion h1 {
  font-size: 24px;
}
body.valion .lede {
  margin: 5px 0 20px;
  font-size: 14px;
}
body.valion .faixa {
  font-size: 11px;
}
body.valion .dica {
  font-size: 12.5px;
}

/* ---- Cartoes ---- */
body.valion .cards {
  gap: 13px;
  margin-bottom: 16px;
}
body.valion .cards.kpis {
  gap: 13px;
}

/* ============================================================
 * QUANTOS CARTOES POR LINHA — declarado, nao adivinhado.
 *
 * `auto-fit` decide sozinho quantos cabem, e o que ele decide num notebook e
 * ORFAO: os seis KPIs do resumo viravam 5 + 1, e os quatro do pregao viravam
 * 3 + 1 — uma fileira cheia e um cartao sozinho embaixo, que se le como erro
 * de carregamento, nao como quebra de linha.
 *
 * Entao quem monta a fileira DECLARA a contagem (`de-N`, escrita pelo
 * `fileiraDeCartoes` no admin.js), e cada contagem desce pelos proprios
 * divisores: 6 vira 3+3, 4 vira 2+2, 5 vira 3+2. Nunca sobra um.
 *
 * Os cortes saem da largura minima em que um KPI ainda cabe (~200px de
 * cartao): abaixo dela o numero encosta no rotulo e a leitura de relance —
 * que e o unico proposito de um KPI — acaba.
 * ============================================================ */
body.valion .cards.de-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.valion .cards.de-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.valion .cards.de-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
body.valion .cards.de-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
body.valion .cards.de-6 {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* Seis nao cabem mais: 3 + 3. */
@media (max-width: 1540px) {
  body.valion .cards.de-6 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* Cinco nao cabem mais: 3 + 2. */
@media (max-width: 1330px) {
  body.valion .cards.de-5 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
/* Quatro nao cabem mais: 2 + 2. Tres continuam, que ainda e fileira cheia. */
@media (max-width: 1120px) {
  body.valion .cards.de-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 900px) {
  body.valion .cards.de-3,
  body.valion .cards.de-5,
  body.valion .cards.de-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 700px) {
  body.valion .cards[class*='de-'] {
    grid-template-columns: minmax(0, 1fr);
  }
}
body.valion .card {
  padding: 17px 19px 18px;
}
body.valion .card .cap {
  gap: 9px;
  font-size: 11px;
}
body.valion .card .cap svg {
  width: 17px;
  height: 17px;
}
body.valion .card .val {
  margin: 9px 0 4px;
  font-size: 25px;
}
body.valion .card .sub {
  font-size: 12.5px;
}
body.valion .kpi {
  padding: 16px 18px;
}
body.valion .kpi .topo-kpi {
  gap: 10px;
}
body.valion .kpi .cap {
  font-size: 11px;
}
body.valion .kpi .val {
  margin: 8px 0 3px;
  font-size: 24px;
}
/*
 * CINCO CARTOES NA LINHA: a manchete desce um degrau.
 *
 * A escala de 24px foi medida para quatro cartoes. Em cinco, cada um perde
 * um quinto da largura, e um valor de dinheiro comprido — "-US$ 7.100,00",
 * "R$ 1.797.200,00" — quebra em duas linhas dentro do cartao. Numero
 * partido no meio nao se le como numero.
 *
 * `nowrap` fecha a porta de vez: se um dia um valor ainda maior aparecer,
 * ele estoura o cartao (visivel, corrigivel) em vez de quebrar em silencio.
 */
body.valion .cards.de-5 .kpi .val {
  font-size: 21px;
  white-space: nowrap;
}
body.valion .chip-ico {
  width: 34px;
  height: 34px;
  border-radius: 10px;
}
body.valion .chip-ico svg {
  width: 17px;
  height: 17px;
}
body.valion .delta {
  font-size: 12px;
}

/* ---- Blocos e tabelas ---- */
body.valion .bloco {
  margin-bottom: 20px;
}
body.valion .bloco > header {
  gap: 11px;
  padding: 13px 20px;
}
body.valion .bloco > header h2 {
  font-size: 15px;
}
body.valion .bloco .corpo {
  padding: 0 20px 19px;
}
body.valion th {
  padding: 11px 18px;
  font-size: 11.5px;
}
body.valion td {
  padding: 11px 18px;
  font-size: 13.5px;
}
body.valion td .sub {
  font-size: 12px;
}
body.valion .mini-tabela td {
  padding-top: 8px !important;
  padding-bottom: 8px !important;
  font-size: 13px;
}

/* ============================================================
 * A TABELA ENCOLHE ANTES DE CORTAR.
 *
 * `.rolagem` deixa a tabela larga rolar na horizontal dentro do cartao, e num
 * notebook isso deixava de ser saida de emergencia e virava o normal: a lista
 * de usuarios escondia 311px — as colunas de Saldo e Perfil simplesmente nao
 * existiam para quem nao arrastasse por dentro do cartao.
 *
 * O que sai primeiro e o RESPIRO LATERAL DA CELULA, que nao carrega
 * informacao nenhuma; a coluna que ele empurra para fora carrega. Depois o
 * corpo do texto, um ponto de cada vez. Nada e escondido: a tabela inteira
 * continua na tela, menor.
 * ============================================================ */
@media (max-width: 1500px) {
  body.valion th,
  body.valion td {
    padding-left: 12px;
    padding-right: 12px;
  }
}
@media (max-width: 1300px) {
  body.valion th,
  body.valion td {
    padding-left: 9px;
    padding-right: 9px;
  }
  body.valion td {
    font-size: 13px;
  }
  body.valion td .sub {
    font-size: 11.5px;
  }
}
/* Os "recentes" do resumo moram numa coluna de um terco de tela: sao os
   primeiros a nao caber, e por isso apertam antes dos outros. */
body.valion .mini-tabela th,
body.valion .mini-tabela td {
  padding-left: 12px;
  padding-right: 12px;
}
@media (max-width: 1700px) {
  body.valion .mini-tabela th,
  body.valion .mini-tabela td {
    padding-left: 8px;
    padding-right: 8px;
  }
}
/* Nos "recentes" o avatar e so reconhecimento, nao leitura: cabe menor, e
   cinco linhas menores sao o que faz o rodape da pagina caber na tela. */
body.valion .mini-tabela .avatar.mini {
  width: 28px;
  height: 28px;
  font-size: 11px;
}
body.valion .selo {
  padding: 2px 10px;
  font-size: 11.5px;
}
body.valion .info-lista .item {
  padding: 10px 0;
  font-size: 13.5px;
}
body.valion .vazio {
  padding: 34px 18px;
  font-size: 13.5px;
}
body.valion .vazio-rico {
  padding: 38px 20px 36px;
}
body.valion .vazio-rico .ilustra {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-sm);
}
body.valion .vazio-rico .ilustra svg {
  width: 21px;
  height: 21px;
}
body.valion .vazio-rico b {
  font-size: 15px;
}
body.valion .vazio-rico p {
  font-size: 13.5px;
}
body.valion .pager {
  padding: 12px 18px;
}

/* ---- Formularios ---- */
body.valion .botao {
  min-height: 38px;
  padding: 9px 19px;
  font-size: 14px;
}
body.valion .entrada {
  height: 38px;
  padding: 0 12px;
}
body.valion .entrada input,
body.valion .entrada select {
  font-size: 13.5px;
}
body.valion .entrada svg {
  width: 17px;
  height: 17px;
}
body.valion .campo label {
  font-size: 12.5px;
}
body.valion .filtros {
  gap: 14px;
  padding: 18px 20px 0;
}
body.valion .acoes-filtro {
  gap: 11px;
  padding: 14px 20px 18px;
}
body.valion .abas {
  margin-bottom: 20px;
}
body.valion .abas button {
  padding: 10px 14px;
  font-size: 13.5px;
}
body.valion .chip {
  padding: 5px 11px;
  font-size: 12.5px;
}
body.valion .barra-bloco {
  gap: 7px;
  padding: 0 20px 13px;
}
body.valion .filtros + .barra-bloco {
  padding-top: 14px;
}
body.valion .busca-mini input {
  height: 30px;
  font-size: 13px;
}
body.valion .link-acao {
  font-size: 13.5px;
}

/* ---- Pecas do dashboard ---- */
body.valion .cab-pagina {
  margin-bottom: 19px;
}
body.valion .periodo-cab .entrada {
  min-width: 178px;
}
body.valion .grade-dash {
  gap: 13px;
  margin-bottom: 16px;
}
body.valion .fin-corpo {
  padding: 17px 20px 19px;
}
body.valion .fin-divisor {
  margin: 16px 0;
}
body.valion .grade-fin {
  gap: 17px 14px;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
}
body.valion .linhafin {
  gap: 10px;
}
body.valion .linhafin .cap {
  font-size: 12px;
}
body.valion .linhafin .val {
  font-size: 15px;
}
body.valion .ops-linha {
  gap: 19px;
}
body.valion .rosca {
  width: 96px;
  height: 96px;
}
body.valion .rosca::after {
  inset: 11px;
}
body.valion .rosca b {
  font-size: 17px;
}
body.valion .ops-rosca .cap {
  font-size: 10.5px;
}
body.valion .pos {
  width: 24px;
  height: 24px;
  font-size: 12px;
}
body.valion .rodape-pagina {
  margin-top: 18px;
  font-size: 12px;
}

/* ---- Ficha do cliente ---- */
body.valion .avatar {
  width: 54px;
  height: 54px;
  font-size: 19px;
}
body.valion .avatar.mini {
  width: 32px;
  height: 32px;
  font-size: 12px;
}
body.valion .ficha-cab {
  gap: 14px;
  padding: 19px 20px;
  margin-bottom: 18px;
}
body.valion .ficha-cab .linha-nome b {
  font-size: 20px;
}
body.valion .ficha-cab .mail {
  font-size: 13px;
}
body.valion .ficha-cab .meta {
  gap: 5px 15px;
  margin-top: 10px;
  font-size: 12.5px;
}
/*
 * TRES COLUNAS NO MAXIMO, como na referencia — e nao `auto-fit`.
 *
 * Com auto-fit, uma tela de 1920 cabia cinco colunas e os seis cartoes viravam
 * 5 + 1 sobrando, esticado. Cartao de ficha e lista de chave e valor: mais de
 * tres colunas so afasta o rotulo do valor.
 *
 * Abaixo de tres, quantas colunas cabem depende de QUANTOS cartoes a aba tem
 * (`de-N`, escrito pelo `gradeFicha`): tres cartoes em duas colunas deixam um
 * orfao, e dois cartoes em tres colunas deixam um buraco. Cada contagem desce
 * pelos proprios divisores.
 */
body.valion .grade-ficha {
  gap: 13px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
body.valion .grade-ficha.de-1,
body.valion .grade-ficha.de-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
body.valion .grade-ficha.de-1 {
  grid-template-columns: minmax(0, 1fr);
}
/* Seis e quatro repartem em dois; tres continuam em tres, que ainda e fileira
   cheia e ainda cabe (~360px por cartao num notebook de 1366). */
@media (max-width: 1400px) {
  body.valion .grade-ficha.de-4,
  body.valion .grade-ficha.de-6 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
@media (max-width: 1100px) {
  body.valion .grade-ficha.de-3,
  body.valion .grade-ficha.de-5 {
    grid-template-columns: minmax(0, 1fr);
  }
}
/*
 * NO CELULAR E SEMPRE UMA COLUNA — e a regra precisa DIZER `de-N`.
 *
 * Escrita so como `body.valion .grade-ficha`, esta regra perdia por
 * especificidade para `body.valion .grade-ficha.de-6` la de cima (uma classe a
 * mais), e o resultado num telefone de 390px eram cartoes de 173px: a linha
 * "Duas etapas (2FA) → desligada" saia com 131px de largura por 77px de
 * altura, cada metade quebrada em varias linhas.
 *
 * Fallback de tela pequena tem de vencer TODAS as contagens, entao ele lista
 * todas — herdar de um seletor mais curto e o que o deixou inalcancavel.
 */
@media (max-width: 980px) {
  body.valion .grade-ficha,
  body.valion .grade-ficha[class*='de-'] {
    grid-template-columns: minmax(0, 1fr);
  }
}
body.valion .grade-ficha .info-lista .item {
  padding: 8px 0;
  font-size: 13px;
}
body.valion .fin-grade .val,
body.valion .declarado .item .val {
  font-size: 16px;
}
body.valion .docs-kyc a {
  width: 134px;
  padding: 10px 12px;
}

/* ---- Pregao ---- */
/* Mesma regra do tema base, na escala compacta: teto menor, e o mesmo piso —
   abaixo de tres eventos visiveis a fita deixa de ser fita. */
body.valion .fita-corpo {
  max-height: min(520px, max(230px, 100vh - 230px));
  padding: 3px 11px 11px;
}
body.valion .fita .linha {
  gap: 2px 8px;
  margin-top: 7px;
  padding: 9px 12px 9px 11px;
}
body.valion .fita .quem,
body.valion .fita .valor {
  font-size: 13px;
}
body.valion .fita .oque,
body.valion .fita .estado {
  font-size: 12px;
}
body.valion .fita .hora {
  font-size: 11px;
}
body.valion .ao-vivo {
  font-size: 11px;
}

/* ---------------- Celular: a sidebar vira gaveta ---------------- */
@media (max-width: 900px) {
  body.valion .side {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    height: auto;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform 0.2s ease-out;
  }
  body.valion .side.aberta {
    transform: none;
  }
  /*
   * O CABECALHO CRESCE, em vez de deixar o conteudo vazar por cima da pagina.
   *
   * `body.valion .top` fixa 58px de altura para a densidade compacta do
   * desktop. No celular a regra generica manda o cabecalho QUEBRAR LINHA
   * (`flex-wrap: wrap`), e as duas juntas davam o pior dos dois mundos: o
   * conteudo ia para a segunda linha e a caixa continuava com 58px, entao a
   * segunda linha caia em cima do titulo da pagina. Ilegivel, e nao era
   * transparencia — era falta de altura.
   *
   * Aqui a altura passa a ser a do que ha dentro. Se couber numa linha, fica
   * igual ao que era; se nao couber, o cabecalho fica mais alto e a pagina
   * comeca depois dele.
   */
  body.valion .top {
    height: auto;
    min-height: 58px;
    padding: 10px 16px;
    flex-wrap: wrap;
  }
  body.valion main {
    padding: 20px 16px 56px;
  }
  body.valion .hamburguer {
    color: var(--txt);
  }

  /*
   * ALVO DE TOQUE: 44px.
   *
   * A densidade compacta do painel encolheu tudo em ~20% para ganhar
   * informacao por tela num monitor de 1920 — e no celular ela encolhia
   * exatamente o que o dedo precisa acertar: os chips de filtro ficavam com
   * 31px de altura, os botoes com 40, os itens do menu com 39. O minimo que
   * iOS e Material pedem e 44, e num painel onde um toque errado APROVA UM
   * PAGAMENTO isso nao e detalhe de conforto.
   *
   * So a area cresce; corpo de texto e espacamento continuam os do tema.
   */
  body.valion .chip {
    min-height: 44px;
    padding-top: 0;
    padding-bottom: 0;
  }
  body.valion .botao {
    min-height: 44px;
  }
  body.valion .side nav button.solo,
  body.valion .side .rodape .sair {
    min-height: 44px;
  }
  body.valion .fechar,
  body.valion .fechar-gaveta,
  body.valion .sino {
    width: 44px;
    height: 44px;
  }
  body.valion .abas button {
    min-height: 44px;
  }
  /* Numero de pagina e o alvo mais errado de acertar da tela: sao vizinhos
     colados, e errar leva para a pagina errada sem avisar. */
  body.valion .pager button {
    min-width: 44px;
    height: 44px;
  }
  body.valion .link-acao {
    min-height: 44px;
  }
  /* Opcoes da lista sao vizinhas coladas: errar leva a escolher outra coisa. */
  body.valion .sel-opcao {
    min-height: 44px;
  }
  /* O campo inteiro, e nao so o botao dentro dele: um campo de 38px e um alvo
     de 38px, por mais que o gatilho la dentro diga 44. */
  body.valion .entrada {
    height: 44px;
  }
  body.valion .sel-gatilho {
    min-height: 44px;
  }

  /* ============================================================
   * A DENSIDADE COMPACTA NAO VALE NO CELULAR.
   *
   * A escala de ~80% existe para ganhar informacao por tela num monitor de
   * 1920: la sobra largura e falta densidade. Num telefone e o contrario —
   * sobra altura de rolagem e falta TAMANHO. Aplicada ali, ela encolhia
   * exatamente o que ja estava no limite: medidos 225 pedacos de texto abaixo
   * de 13px numa ficha, sendo 35 deles a 11px.
   *
   * Aqui o texto volta ao tamanho base. So o texto: cartao, tabela e
   * espacamento seguem compactos, porque o problema do celular nunca foi o
   * respiro entre as coisas — foi enxergar o que esta escrito nelas.
   * ============================================================ */
  body.valion {
    font-size: 15px;
  }
  body.valion h1 {
    font-size: 26px;
  }
  body.valion .lede {
    font-size: 15px;
  }
  body.valion td {
    font-size: 14px;
  }
  body.valion .info-lista .item,
  body.valion .grade-ficha .info-lista .item {
    font-size: 14.5px;
  }
  body.valion td .sub,
  body.valion .card .sub,
  body.valion .u-cel .sub,
  body.valion .mini-tabela td {
    font-size: 13px;
  }
  body.valion .selo,
  body.valion .rolagem tbody td::before {
    font-size: 12.5px;
  }
  body.valion .card .cap,
  body.valion .kpi .cap,
  body.valion .placar .cap,
  body.valion .linhafin .cap {
    font-size: 12px;
  }
  body.valion .delta,
  body.valion .dica,
  body.valion .placar .sub {
    font-size: 13px;
  }
  body.valion .card .val {
    font-size: 27px;
  }
  body.valion .kpi .val {
    font-size: 26px;
  }
  body.valion .ficha-cab .meta {
    font-size: 13.5px;
  }
  body.valion .vazio-rico p {
    font-size: 14.5px;
  }

  /* ============================================================
   * AS ABAS DA FICHA VOLTAM A UMA LINHA — no celular, e o contrario do desktop.
   *
   * No monitor elas quebram em duas linhas de proposito: rolar de lado esconde
   * aba sem avisar, e la sobra altura para gastar. No telefone a conta inverte:
   * treze abas em quatro linhas comiam 177px, 21% DA TELA, antes de qualquer
   * conteudo — o dobro do que a propria ficha mostrava acima da dobra.
   *
   * Entao aqui elas viram uma faixa de uma linha que rola. O que faz isso ser
   * honesto (e nao o mesmo defeito de antes) sao duas coisas: a faixa DESBOTA
   * na borda direita enquanto houver mais para ver, e a aba escolhida e trazida
   * para dentro do campo de visao pelo `mostrarAbaFicha`. Ninguem precisa
   * descobrir por arrasto que ha mais.
   * ============================================================ */
  body.valion #fAbas {
    flex-wrap: nowrap;
    /* A mascara desbota o fim da faixa. Sai quando a rolagem chega ao fim,
       pela classe `no-fim` — desbotar o que ja acabou seria mentira. */
    mask-image: linear-gradient(to right, #000 calc(100% - 34px), transparent);
  }
  body.valion #fAbas.no-fim {
    mask-image: none;
  }
  body.valion #fAbas button {
    scroll-margin-inline: 16px;
  }
}