/* ============================================================
   Painel do mediador e da administração.

   Herda os tokens de css/base.css (as cores saem do arquivo do logo).
   O que este arquivo acrescenta é a linguagem do painel, que é a de um
   LIVRO-CAIXA, não a de um dashboard de cartões:

   · superfícies separadas por fio de 1px, nunca por sombra
   · números em Archivo com figuras tabulares, alinhados à direita
   · ouro reservado a dinheiro e ao que está ativo
   · brasa (vermelho) só para risco: vencido, bloqueado, pendente
   · uma única animação na página, na entrada das barras

   Navegação: trilho à esquerda no desktop, barra inferior no celular —
   o painel é consultado no telefone, no meio de uma partida, com uma
   mão só.
   ============================================================ */

:root {
  --trilho: 232px;
  --barra-inferior: 64px;
  --num: "Archivo", system-ui, sans-serif;
}

body.painel {
  min-height: 100dvh;
  background: var(--breu);
}

/* Figuras tabulares em tudo que é número: coluna de valores que dança a
   cada atualização é ilegível. */
.num {
  font-family: var(--num);
  font-variation-settings: "wdth" 108, "wght" 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.015em;
}

/* ============================================================ estrutura */

.painel-grade {
  display: grid;
  grid-template-columns: var(--trilho) minmax(0, 1fr);
  min-height: 100dvh;
}

/* ---------- trilho ---------- */

.trilho {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.25rem 0.9rem 1.1rem;
  background: var(--asfalto);
  border-right: 1px solid var(--fio);
}

.trilho-marca {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0 0.5rem;
  text-decoration: none;
  color: var(--prata);
}
.trilho-marca img { width: 28px; height: 28px; }
.trilho-marca b {
  font-family: var(--display);
  font-variation-settings: "wdth" 118, "wght" 700;
  font-size: 0.98rem;
  font-weight: 700;
}
.trilho-marca span {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--prata-3);
  letter-spacing: 0.01em;
}

.trilho-menu {
  display: grid;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.trilho-menu a {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.65rem;
  border-radius: var(--raio);
  color: var(--prata-2);
  text-decoration: none;
  font-size: 0.94rem;
  font-weight: 500;
  transition: background var(--transicao), color var(--transicao);
}
.trilho-menu a:hover { background: var(--grafite); color: var(--prata); }
.trilho-menu a[aria-current="page"] {
  background: var(--ouro-fosco);
  color: var(--ouro-claro);
}
.trilho-menu svg { width: 17px; height: 17px; flex: none; opacity: 0.85; }

.trilho-menu .conta {
  margin-left: auto;
  min-width: 20px;
  padding: 0 0.35rem;
  height: 19px;
  border-radius: 999px;
  background: var(--brasa);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.trilho-menu .conta[hidden] { display: none; }

.trilho-rodape { margin-top: auto; display: grid; gap: 0.75rem; }

.trilho-separador {
  height: 1px;
  background: var(--fio);
  margin: 0.25rem 0.65rem;
}

.usuario {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.65rem;
  min-width: 0;
}
.usuario img {
  width: 30px; height: 30px;
  border-radius: 999px;
  flex: none;
  background: var(--grafite);
}
.usuario div { min-width: 0; }
.usuario strong {
  display: block;
  font-size: 0.87rem;
  font-weight: 600;
  color: var(--prata);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.usuario small { display: block; font-size: 0.75rem; color: var(--prata-3); }

/* ---------- área de conteúdo ---------- */

.conteudo {
  min-width: 0;
  /* Teto de largura (p03): em tela ultrawide o conteúdo fica centralizado em
     vez de esticar. Gestão tem teto maior porque abre em colunas. */
  width: 100%;
  max-width: var(--teto, 1280px);
  justify-self: center;
  padding: 2rem 2.25rem 4rem;
  /* Sem teto de largura: num monitor largo a gestão abre em colunas (ver
     "grade" lá embaixo) em vez de uma tira estreita com rolagem infinita.
     Quem mede é o container, não a janela: a mesma página dentro da moldura
     de /admin tem menos espaço que aberta direto. */
  container-type: inline-size;
  container-name: conteudo;
}

.pagina[hidden] { display: none; }

.pagina-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem 1.5rem;
  margin-bottom: 1.5rem;
}
.pagina-cabeca h1 {
  font-family: var(--display);
  font-variation-settings: "wdth" 112, "wght" 800;
  font-size: 1.65rem;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}
.pagina-cabeca p {
  margin: 0.3rem 0 0;
  color: var(--prata-2);
  font-size: 0.94rem;
  max-width: 62ch;
}
.pagina-cabeca .acoes { margin-left: auto; display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ============================================================ o placar */

/* O bloco de faturamento é o único elemento que ocupa a largura inteira sem
   caixa: régua em cima, número enorme, régua embaixo. É o que a pessoa abre
   o painel pra ver. */
.placar {
  border-top: 2px solid var(--ouro);
  padding-top: 1.1rem;
  margin-bottom: 0.25rem;
}

.placar-rotulo {
  font-size: 0.85rem;
  color: var(--prata-2);
  margin: 0 0 0.15rem;
}

.placar-valor {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0 0.9rem;
}
.placar-valor .cifra {
  font-family: var(--num);
  font-variation-settings: "wdth" 125, "wght" 800;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2.6rem, 8vw, 4.1rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--prata);
  margin: 0;
}
.placar-valor .cifra b { color: var(--ouro); font-weight: inherit; }
.placar-valor .apoio {
  font-size: 0.95rem;
  color: var(--prata-2);
  padding-bottom: 0.3rem;
}

/* ---------- fita de 28 dias ---------- */

.fita {
  position: relative; /* âncora da leitura */
  margin-top: 1.25rem;
  border-bottom: 1px solid var(--fio);
  padding-bottom: 0.65rem;
}
.fita svg { display: block; width: 100%; height: 96px; overflow: visible; }
.fita-legenda {
  display: flex;
  justify-content: space-between;
  font-size: 0.76rem;
  color: var(--prata-3);
  padding-top: 0.5rem;
}

/* ---------- régua de períodos (não são cartões) ---------- */

.regua {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-bottom: 1px solid var(--fio);
}
.regua > div {
  padding: 0.95rem 0 1.05rem;
  padding-left: 1.1rem;
  border-left: 1px solid var(--fio);
}
.regua > div:first-child { border-left: 0; padding-left: 0; }
.regua .valor {
  font-family: var(--num);
  font-variation-settings: "wdth" 112, "wght" 700;
  font-variant-numeric: tabular-nums;
  font-size: 1.5rem;
  line-height: 1.15;
  color: var(--prata);
}
.regua .rotulo { font-size: 0.8rem; color: var(--prata-3); margin-top: 0.15rem; }
.regua .extra { font-size: 0.8rem; color: var(--prata-2); margin-top: 0.3rem; }

.semanas-nav { display: flex; gap: 0.35rem; }
.semanas-nav .botao:disabled { opacity: 0.4; cursor: default; }

/* ---------- Growth Analytics ---------- */

.gr-alerta { border-left: 3px solid var(--fio-vivo); }
.gr-alerta[data-tom="risco"] { border-left-color: var(--brasa); background: linear-gradient(90deg, rgba(229, 72, 77, 0.07), var(--asfalto) 55%); }
.gr-alerta[data-tom="ok"] { border-left-color: var(--verde); }
.gr-alerta-corpo { display: flex; align-items: center; gap: 1.4rem; padding: 1.1rem 1.25rem; flex-wrap: wrap; }
.gr-alerta-numero .valor {
  font-family: var(--num);
  font-variation-settings: "wdth" 112, "wght" 800;
  font-variant-numeric: tabular-nums;
  font-size: 2.6rem;
  line-height: 1;
}
.gr-alerta[data-tom="risco"] .gr-alerta-numero .valor { color: #ff8a8e; }
.gr-alerta-numero .extra { font-size: 0.8rem; color: var(--prata-2); margin-top: 0.35rem; }
.gr-alerta-texto { flex: 1; min-width: 220px; }
.gr-alerta-texto h2 { margin: 0 0 0.25rem; font-family: var(--display); font-variation-settings: "wdth" 110, "wght" 700; font-size: 1.05rem; }
.gr-alerta-texto p { margin: 0; color: var(--prata-2); font-size: 0.9rem; }

.gr-chaves { flex-wrap: wrap; gap: 0.4rem 1.1rem !important; font-size: 0.83rem; color: var(--prata-2); }
.gr-chaves b { color: var(--prata); font-variant-numeric: tabular-nums; margin-left: 0.2rem; }
.gr-chave { display: inline-block; width: 0.65rem; height: 0.65rem; border-radius: 2px; margin-right: 0.35rem; vertical-align: -1px; }
.gr-grafico { height: 280px; }
.gr-grafico svg { height: 280px; }
.gr-grafico .leitura span { display: block; white-space: nowrap; }
.gr-saldo-pos { color: var(--verde) !important; }
.gr-saldo-neg { color: #ff8a8e !important; }
.gr-convite { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.86rem; }
.dados--saidas td { vertical-align: middle; }
.gr-fonte-convite { white-space: nowrap; }
@media (max-width: 720px) {
  .gr-grafico, .gr-grafico svg { height: 220px; }
  .gr-alerta-numero .valor { font-size: 2.1rem; }
}

/* ---------- topo do Painel do ADM: quem é ---------- */

.perfil-adm {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1.6rem;
}
.perfil-adm[hidden] { display: none; }
.perfil-adm-foto {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
  border: 2px solid var(--ouro);
  background: var(--grafite);
}
.perfil-adm-texto { min-width: 0; }
.perfil-adm-rotulo {
  margin: 0;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ouro);
}
.perfil-adm-nome {
  margin: 0.15rem 0 0.3rem;
  font-family: var(--display);
  font-variation-settings: "wdth" 112, "wght" 800;
  font-size: clamp(1.45rem, 3.2vw, 2.1rem);
  line-height: 1.1;
  letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}
.perfil-adm-linha {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1rem;
  font-size: 0.9rem;
  color: var(--prata-2);
}
.perfil-adm-linha span { display: inline-flex; align-items: center; gap: 0.3rem; }
.perfil-adm-linha svg { width: 15px; height: 15px; }
.perfil-adm-falta { color: var(--prata-3); font-style: italic; }
@media (max-width: 560px) {
  .perfil-adm { gap: 0.85rem; }
  .perfil-adm-foto { width: 56px; height: 56px; }
}

/* ============================================================ painéis */

.painel-bloco {
  border: 1px solid var(--fio);
  border-radius: var(--raio);
  background: var(--asfalto);
  margin-top: 1.75rem;
}
.painel-bloco > header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding: 0.95rem 1.15rem;
  border-bottom: 1px solid var(--fio);
}
.painel-bloco > header h2 {
  font-family: var(--display);
  font-variation-settings: "wdth" 110, "wght" 700;
  font-size: 1.02rem;
  margin: 0;
  letter-spacing: -0.01em;
}
.painel-bloco > header .direita { margin-left: auto; display: flex; gap: 0.5rem; align-items: center; }
/* Um segundo título dentro do mesmo bloco (Daily → CANCEL-AFK). */
.painel-bloco > header.subcabeca { border-top: 1px solid var(--fio); padding-top: 0.8rem; padding-bottom: 0.8rem; }
.painel-bloco > header.subcabeca h3 {
  margin: 0;
  font-size: 0.86rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--prata-2);
}
.painel-corpo { padding: 1.15rem; }
.painel-corpo.rente { padding: 0; }

.nota {
  font-size: 0.85rem;
  color: var(--prata-3);
  line-height: 1.6;
  margin: 0.75rem 0 0;
}

/* ============================================================ vagas (pendências) */

/* Mesma linguagem da fila da landing: a partida é uma vaga numerada.
   O número é o numero_fila de verdade, não enfeite sequencial. */
.vagas { list-style: none; margin: 0; padding: 0; }

.vaga-linha {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.35rem 1rem;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--fio);
}
.vaga-linha:last-child { border-bottom: 0; }
/* Partida com conversa disponível: a linha inteira abre o transcript. */
.vaga-linha[data-fila] { cursor: pointer; }
.vaga-linha[data-fila]:hover { background: var(--grafite); }

.vaga-numero {
  font-family: var(--num);
  font-variation-settings: "wdth" 100, "wght" 700;
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  color: var(--ouro);
  background: var(--ouro-fosco);
  border-radius: var(--raio);
  padding: 0.35rem 0.6rem;
  min-width: 68px;
  text-align: center;
}
.vaga-numero.risco { color: #ff9ca0; background: var(--brasa-fosca); }

.vaga-info { min-width: 0; }
.vaga-info strong { display: block; font-size: 0.93rem; font-weight: 600; }
.vaga-info small { display: block; font-size: 0.8rem; color: var(--prata-3); margin-top: 0.1rem; }

/* Proporção da linha, como régua fina embaixo do texto. Inline, no meio da
   frase, ela empurrava o resto pra linha de baixo assim que passava de uns
   60% — e a contagem de partidas sumia. */
.proporcao {
  display: block;
  height: 3px;
  margin-top: 0.45rem;
  border-radius: 2px;
  background: var(--fio);
  overflow: hidden;
}
.proporcao i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--ouro);
  min-width: 3px;
}

.vaga-valor {
  font-family: var(--num);
  font-variation-settings: "wdth" 105, "wght" 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}

/* ============================================================ tabelas */

.tabela-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table.dados {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
table.dados th {
  text-align: left;
  font-weight: 600;
  font-size: 0.79rem;
  color: var(--prata-3);
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--fio);
  white-space: nowrap;
  position: sticky;
  top: 0;
  background: var(--asfalto);
}
table.dados td {
  padding: 0.7rem 0.9rem;
  border-bottom: 1px solid var(--fio);
  vertical-align: middle;
}
table.dados tr:last-child td { border-bottom: 0; }
table.dados tbody tr { cursor: pointer; }
table.dados tbody tr:hover { background: var(--grafite); }
table.dados .direita { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.dados .nome { font-weight: 600; }
table.dados .id { font-size: 0.78rem; color: var(--prata-3); }

/* ============================================================ selos */

.selo {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  border-radius: 999px;
  padding: 0.18rem 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}
.selo::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 999px;
  background: currentColor;
}
.selo--ok     { color: var(--verde);   background: rgba(63, 185, 80, 0.12); }
.selo--ouro   { color: var(--ouro);    background: var(--ouro-fosco); }
.selo--risco  { color: #ff9ca0;        background: var(--brasa-fosca); }
.selo--neutro { color: var(--prata-2); background: var(--grafite); }
.selo--vazio::before { display: none; }
.selo[hidden] { display: none; }

/* ============================================================ avisos */

.aviso {
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  border: 1px solid var(--fio-vivo);
  border-left-width: 3px;
  border-radius: var(--raio);
  background: var(--asfalto);
  padding: 0.95rem 1.1rem;
  margin-bottom: 1.5rem;
  font-size: 0.92rem;
  line-height: 1.6;
}
.aviso h3 {
  font-family: var(--corpo);
  font-size: 0.95rem;
  font-weight: 700;
  margin: 0 0 0.25rem;
  color: var(--prata);
}
.aviso p { margin: 0; color: var(--prata-2); }
.aviso p + p { margin-top: 0.5rem; }
.aviso .botao { margin-top: 0.8rem; }
.aviso svg { width: 19px; height: 19px; flex: none; margin-top: 0.15rem; }

.aviso--atencao { border-left-color: var(--ouro); }
.aviso--atencao svg { color: var(--ouro); }
.aviso--risco { border-left-color: var(--brasa); background: rgba(229, 72, 77, 0.06); }
.aviso--risco svg { color: var(--brasa); }
.aviso--ok { border-left-color: var(--verde); }
.aviso--ok svg { color: var(--verde); }
.aviso--calmo { border-left-color: var(--fio-vivo); }
.aviso--calmo svg { color: var(--prata-3); }

/* ============================================================ formulário */

.formulario { display: grid; gap: 1.15rem; max-width: 640px; }
/* Rótulo, controle e ajuda sempre a partir do topo da célula. Numa linha de
   campos lado a lado, o que tinha ajuda embaixo deixava a linha mais alta, os
   outros eram esticados junto e o espaço sobrando ia parar entre o rótulo e
   o controle - cada caixa numa altura. */
.campo { display: grid; gap: 0.35rem; align-content: start; }
.campo label { font-size: 0.87rem; font-weight: 600; color: var(--prata); }
.campo .ajuda { font-size: 0.8rem; color: var(--prata-3); }

.campo input,
.campo textarea,
.campo select {
  width: 100%;
  font-family: var(--corpo);
  font-size: 1rem;
  color: var(--prata);
  background: var(--breu);
  border: 1px solid var(--fio-vivo);
  border-radius: var(--raio);
  padding: 0.7rem 0.85rem;
  transition: border-color var(--transicao);
}
.campo textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.campo input:focus,
.campo textarea:focus,
.campo select:focus { outline: none; border-color: var(--ouro); }
/* Caixa de texto e lista de escolha com a mesma altura: o select do navegador
   vinha mais alto que o input ao lado. */
.campo input:not([type="checkbox"]):not([type="radio"]),
.campo select { height: 2.75rem; line-height: 1.2; }
.campo select { padding-block: 0; }
.campo input::placeholder, .campo textarea::placeholder { color: var(--prata-3); }
.campo input:disabled, .campo textarea:disabled { opacity: 0.55; cursor: not-allowed; }

.campo[data-erro] input,
.campo[data-erro] textarea { border-color: var(--brasa); }
.campo .erro { font-size: 0.82rem; color: #ff9ca0; }

.dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem; }

.formulario-acoes {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 0.25rem;
}
.formulario-acoes .estado { font-size: 0.87rem; color: var(--prata-2); }
.formulario-acoes .estado[data-ok] { color: var(--verde); }
.formulario-acoes .estado[data-erro] { color: #ff9ca0; }

/* aceite dos termos */
.aceite {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  border: 1px solid var(--fio-vivo);
  border-radius: var(--raio);
  padding: 0.95rem 1.1rem;
  background: var(--breu);
  cursor: pointer;
}
.aceite input { margin-top: 0.2rem; width: 18px; height: 18px; accent-color: var(--ouro); flex: none; }
.aceite span { font-size: 0.92rem; line-height: 1.6; color: var(--prata-2); }

/* ============================================================ botões extras */

.botao--risco {
  background: transparent;
  border-color: rgba(229, 72, 77, 0.5);
  color: #ff9ca0;
}
.botao--risco:hover { background: var(--brasa-fosca); border-color: var(--brasa); }

.botao--p { padding: 0.45rem 0.8rem; font-size: 0.85rem; }
.botao[disabled] { opacity: 0.5; cursor: not-allowed; }

/* seletor de período: pílulas ligadas, não abas soltas */
.periodos {
  display: inline-flex;
  border: 1px solid var(--fio-vivo);
  border-radius: 999px;
  padding: 2px;
  background: var(--breu);
}
.periodos button {
  appearance: none;
  border: 0;
  background: none;
  color: var(--prata-2);
  font-family: var(--corpo);
  font-size: 0.84rem;
  font-weight: 600;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background var(--transicao), color var(--transicao);
}
.periodos button:hover { color: var(--prata); }
.periodos button[aria-pressed="true"] { background: var(--ouro); color: var(--ouro-tinta); }

/* ============================================================ gráficos */

.grafico { position: relative; }
.grafico svg { display: block; width: 100%; overflow: visible; }
/* A altura vale também pra caixa vazia: o gráfico se desenha na altura que
   encontra, e sem isto o primeiro desenho do baixo saía com 220 px espremidos
   em 128 — encolhido, e com a leitura apontando a barra errada. */
.grafico-alto { min-height: 220px; }
.grafico-baixo { min-height: 128px; }
.grafico-alto svg { height: 220px; }
.grafico-baixo svg { height: 128px; }

.grafico .eixo { font-size: 0.72rem; fill: var(--prata-3); }
.grafico .malha { stroke: var(--fio); stroke-width: 1; }
.grafico .base { stroke: var(--fio-vivo); stroke-width: 1; }

/* leitura ao passar o dedo/mouse */
.leitura {
  position: absolute;
  pointer-events: none;
  background: var(--grafite);
  border: 1px solid var(--fio-vivo);
  border-radius: var(--raio);
  padding: 0.5rem 0.7rem;
  font-size: 0.82rem;
  line-height: 1.45;
  white-space: nowrap;
  transform: translate(-50%, -115%);
  opacity: 0;
  transition: opacity 120ms linear;
  z-index: 5;
}
.leitura[data-visivel] { opacity: 1; }
.leitura strong { display: block; font-variant-numeric: tabular-nums; color: var(--prata); }
.leitura span { color: var(--prata-3); }

/* barra empilhada do pool de filas */
.pool {
  display: flex;
  height: 44px;
  border-radius: var(--raio);
  overflow: hidden;
  border: 1px solid var(--fio);
  background: var(--breu);
}
.pool > span {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  min-width: 0;
  transition: flex-grow 400ms cubic-bezier(0.4, 0, 0.2, 1);
}
.pool .p-jogando { background: var(--ouro); color: var(--ouro-tinta); }
.pool .p-ocupado { background: rgba(255, 179, 0, 0.35); color: var(--prata); }
.pool .p-standby { background: var(--grafite-2); color: var(--prata-2); }
.pool .p-livre   { background: var(--grafite); color: var(--prata-3); }

.pool-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin-top: 0.75rem;
  font-size: 0.84rem;
  color: var(--prata-2);
}
.pool-legenda i {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 2px;
  margin-right: 0.45rem;
  vertical-align: baseline;
}

/* ============================================================ estados */

.vazio {
  text-align: center;
  padding: 2.5rem 1.25rem;
  color: var(--prata-3);
}
.vazio strong { display: block; color: var(--prata-2); font-size: 0.98rem; margin-bottom: 0.3rem; }
.vazio p { margin: 0; font-size: 0.88rem; max-width: 42ch; margin-inline: auto; }

.esqueleto {
  background: linear-gradient(90deg, var(--grafite) 25%, var(--grafite-2) 50%, var(--grafite) 75%);
  background-size: 300% 100%;
  animation: brilho 1.4s ease-in-out infinite;
  border-radius: 4px;
  color: transparent !important;
}
@keyframes brilho {
  from { background-position: 150% 0; }
  to   { background-position: -50% 0; }
}

/* ============================================================ gaveta (detalhe do mediador) */

.gaveta {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-columns: 1fr min(560px, 100%);
}
.gaveta[hidden] { display: none; }
.gaveta-fundo { background: rgba(9, 10, 14, 0.66); border: 0; padding: 0; cursor: pointer; }
.gaveta-folha {
  background: var(--asfalto);
  border-left: 1px solid var(--fio);
  overflow-y: auto;
  padding: 1.5rem 1.5rem 3rem;
}
.gaveta-folha header { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
.gaveta-folha h2 {
  font-family: var(--display);
  font-variation-settings: "wdth" 110, "wght" 750;
  font-size: 1.25rem;
  margin: 0;
}
.gaveta-folha .fechar {
  margin-left: auto;
  background: none;
  border: 1px solid var(--fio-vivo);
  border-radius: var(--raio);
  color: var(--prata-2);
  width: 34px; height: 34px;
  cursor: pointer;
  flex: none;
}
.gaveta-folha .fechar:hover { color: var(--prata); border-color: var(--prata-3); }

.ficha { display: grid; gap: 0; margin: 0; }
.ficha > div {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--fio);
  font-size: 0.9rem;
}
.ficha dt { color: var(--prata-3); }
.ficha dd { margin: 0; overflow-wrap: anywhere; }

/* ============================================================ suporte */

/* Pessoa numa célula de tabela: foto, nome e, embaixo, o @ ou o ID. */
.pessoa { display: inline-flex; align-items: center; gap: 0.6rem; min-width: 0; }
/* Círculo com a inicial por baixo; a foto, quando carrega, cobre a inicial.
   Foto que falha some (nucleo.js) e a inicial continua lá: sempre há avatar. */
.pessoa .av {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 30px; height: 30px;
  flex: none;
  border-radius: 999px;
  overflow: hidden;
  background: var(--av-fundo, var(--grafite-2));
  color: var(--av-letra, var(--prata));
  font-size: 0.8rem;
  line-height: 1;
}
.pessoa .av b { font-weight: 700; }
.pessoa .av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.av--0 { --av-fundo: #4a3a0a; --av-letra: #ffd666; }
.av--1 { --av-fundo: #2c3a4e; --av-letra: #b9d3f2; }
.av--2 { --av-fundo: #2f4636; --av-letra: #bfe5c9; }
.av--3 { --av-fundo: #4a2f3a; --av-letra: #f0c3d2; }
.av--4 { --av-fundo: #3f3556; --av-letra: #d6c8f3; }
.av--5 { --av-fundo: #3a3a3a; --av-letra: #e2e2dc; }
.pessoa > span { display: grid; min-width: 0; }
.pessoa .nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22ch; }

table.dados--tickets td > span { display: block; white-space: nowrap; }
table.dados--tickets td > .pessoa { display: inline-flex; }
table.dados--tickets td > .selo { display: inline-flex; }

/* Cabeçalho que ordena a lista: parece o rótulo da coluna, com a seta do lado. */
.ordenar {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.ordenar span { opacity: 0.55; }
.ordenar:hover,
th[aria-sort] .ordenar { color: var(--prata); }
th[aria-sort] .ordenar span { color: var(--ouro); opacity: 1; }
.ordenar:focus-visible { outline: 2px solid var(--ouro); outline-offset: 3px; border-radius: 2px; }

/* Lista sem transcript: a linha não abre nada, então não pode parecer clicável. */
table.dados--parada tbody tr { cursor: default; }
table.dados--parada tbody tr:hover { background: none; }

/* De quem são os números da tela — só aparece pra administração. */
.recorte {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: -0.5rem 0 1.5rem;
}
.recorte[hidden] { display: none; }

.filtros-tickets { flex-wrap: wrap; }
.filtros-tickets select,
.filtros-tickets input {
  background: var(--breu);
  border: 1px solid var(--fio-vivo);
  border-radius: var(--raio);
  color: var(--prata);
  padding: 0.4rem 0.7rem;
  font: inherit;
  font-size: 0.87rem;
  max-width: 220px;
}
.filtros-tickets select:focus,
.filtros-tickets input:focus { outline: none; border-color: var(--ouro); }

.paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1.15rem;
  border-top: 1px solid var(--fio);
  font-size: 0.85rem;
  color: var(--prata-3);
}
.paginacao[hidden] { display: none; }

/* ============================================================ login */

.entrada {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 2rem 1.25rem;
}
.entrada-caixa { width: 100%; max-width: 420px; }
.entrada-marca { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 2.25rem; }
.entrada-marca img { width: 38px; height: 38px; }
.entrada-marca b {
  font-family: var(--display);
  font-variation-settings: "wdth" 118, "wght" 750;
  font-size: 1.15rem;
}
.entrada h1 {
  font-family: var(--display);
  font-variation-settings: "wdth" 112, "wght" 800;
  font-size: clamp(1.7rem, 6vw, 2.15rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0 0 0.75rem;
}
.entrada p { color: var(--prata-2); margin: 0 0 1.75rem; font-size: 0.97rem; }

.botao--discord {
  width: 100%;
  justify-content: center;
  background: #5865f2;
  color: #fff;
  padding: 0.9rem 1.2rem;
  font-size: 1rem;
}
.botao--discord:hover { background: #4752c4; color: #fff; }
.botao--discord svg { width: 20px; height: 20px; }

.entrada-pe {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--fio);
  font-size: 0.84rem;
  color: var(--prata-3);
  line-height: 1.65;
}
.entrada-pe a { color: var(--prata-2); }

/* ============================================================ celular */

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

  /* O trilho vira barra inferior: o painel é usado com uma mão, no meio
     de uma partida. Rótulo curto embaixo do ícone, alvo de 44px. */
  .trilho {
    position: fixed;
    inset: auto 0 0 0;
    height: auto;
    flex-direction: row;
    gap: 0;
    padding: 0.35rem 0.4rem calc(0.35rem + env(safe-area-inset-bottom));
    border-right: 0;
    border-top: 1px solid var(--fio);
    z-index: 60;
    background: rgba(23, 27, 36, 0.96);
    backdrop-filter: blur(12px);
  }
  .trilho-marca, .trilho-separador, .trilho-rodape { display: none; }
  .trilho-menu {
    display: flex;
    width: 100%;
    gap: 0;
  }
  .trilho-menu li { flex: 1 1 0; min-width: 0; }
  .trilho-menu a {
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.5rem 0.2rem;
    font-size: 0.7rem;
    text-align: center;
    min-height: 48px;
    justify-content: center;
    position: relative;
  }
  .trilho-menu a span.rotulo {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
  }
  .trilho-menu a[aria-current="page"] { background: none; color: var(--ouro); }
  .trilho-menu svg { width: 20px; height: 20px; opacity: 1; }
  .trilho-menu .conta {
    position: absolute;
    top: 2px;
    left: 50%;
    margin-left: 4px;
    height: 16px;
    min-width: 16px;
    font-size: 0.66rem;
  }

  .conteudo {
    padding: 1.25rem 1.1rem calc(var(--barra-inferior) + 2.5rem);
  }

  .topo-celular {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding-bottom: 1.1rem;
    margin-bottom: 1.1rem;
    border-bottom: 1px solid var(--fio);
  }
  .topo-celular img.marca-mini { width: 26px; height: 26px; }
  .topo-celular b {
    font-family: var(--display);
    font-variation-settings: "wdth" 118, "wght" 700;
    font-size: 0.95rem;
  }
  .topo-celular .usuario { margin-left: auto; padding: 0; }
  .topo-celular .usuario strong { max-width: 130px; }

  .pagina-cabeca h1 { font-size: 1.35rem; }
  .pagina-cabeca .acoes { margin-left: 0; width: 100%; }

  .regua { grid-template-columns: 1fr; }
  .regua > div {
    border-left: 0;
    border-top: 1px solid var(--fio);
    padding: 0.75rem 0;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
  }
  .regua > div:first-child { border-top: 0; padding-top: 0; }
  .regua .valor { font-size: 1.2rem; }
  .regua .rotulo { margin: 0; order: -1; min-width: 74px; }
  .regua .extra { margin: 0 0 0 auto; }

  .dupla { grid-template-columns: 1fr; }

  .vaga-linha {
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.8rem;
  }
  /* Proporção da linha, como régua fina embaixo do texto. Inline, no meio da
   frase, ela empurrava o resto pra linha de baixo assim que passava de uns
   60% — e a contagem de partidas sumia. */
.proporcao {
  display: block;
  height: 3px;
  margin-top: 0.45rem;
  border-radius: 2px;
  background: var(--fio);
  overflow: hidden;
}
.proporcao i {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--ouro);
  min-width: 3px;
}

.vaga-valor { grid-column: 2; text-align: left; font-size: 0.88rem; }

  .gaveta { grid-template-columns: 0 1fr; }
  .gaveta-folha { border-left: 0; }

  .grafico-alto svg { height: 180px; }
}

@media (max-width: 560px) {
  /* Em tela estreita o texto de apoio não cabe ao lado do número: ele desce
     pra própria linha, alinhado sob o valor. */
  .regua > div { flex-wrap: wrap; }
  .regua .extra { flex-basis: 100%; margin: 0.2rem 0 0 74px; }

  .conteudo { padding-inline: 0.95rem; }
  .painel-corpo { padding: 0.95rem; }
  .vaga-linha { padding-inline: 0.95rem; }
  .placar-valor .cifra { font-size: clamp(2.2rem, 11vw, 3rem); }
}

@media (min-width: 901px) {
  .topo-celular { display: none; }
}

/* ============================================================ período e comparação */

/* A barra do topo da gestão: um período só pra tela inteira, e o botão que
   busca os dados de novo sem recarregar a página. */
.barra-periodo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 0.9rem;
  margin: -0.5rem 0 1.6rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--fio);
}
.barra-periodo .periodo-datas { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; }
.barra-periodo .periodo-datas[hidden] { display: none; }
.barra-periodo .periodo-datas span { color: var(--prata-3); font-size: 0.85rem; }
.barra-periodo input[type="date"] { color-scheme: dark; }
.barra-fim { margin-left: auto; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.barra-fim .estado { font-size: 0.8rem; color: var(--prata-3); }
.barra-periodo .so-periodo[hidden] { display: none; }
.periodo-rotulo { flex-basis: 100%; margin: 0; font-size: 0.82rem; color: var(--prata-3); }
.periodo-rotulo[hidden] { display: none; }

/* Nos painéis do administrador e do suporte a barra é só o botão. */
.barra-topo {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.75rem;
  margin: -0.75rem 0 1rem;
}
.barra-topo .estado { font-size: 0.8rem; color: var(--prata-3); }
.embutido .barra-topo { display: none; }

.botao svg.girar { width: 14px; height: 14px; margin-right: 0.35rem; vertical-align: -2px; }
.botao[disabled] svg.girar { animation: girar 0.9s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* O selo de crescimento ou queda. Verde é "foi bom", vermelho é "foi ruim" —
   a seta é que diz se o número subiu ou desceu. */
.delta {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  margin-left: 0.4rem;
  padding: 0.08rem 0.42rem;
  border-radius: 999px;
  font-family: var(--corpo, inherit);
  font-size: 0.74rem;
  font-weight: 700;
  font-variation-settings: normal;
  letter-spacing: 0;
  line-height: 1.5;
  white-space: nowrap;
  vertical-align: middle;
}
.delta i { font-style: normal; font-size: 0.62rem; }
.delta--alta  { color: var(--verde);   background: rgba(63, 185, 80, 0.12); }
.delta--queda { color: #ff9ca0;        background: var(--brasa-fosca); }
.delta--igual,
.delta--novo  { color: var(--prata-2); background: var(--grafite); }

/* A linha de total no pé da tabela de administradores. */
table.dados tfoot td {
  border-top: 1px solid var(--fio-vivo);
  font-weight: 600;
  color: var(--prata);
}

/* ============================================================ mensagens */

.destinos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.15rem 1rem;
  max-height: 230px;
  overflow: auto;
  margin-top: 0.6rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--fio);
  border-radius: var(--raio);
  background: var(--breu);
}
.destinos[hidden] { display: none; }
.destinos label { display: flex; align-items: center; gap: 0.5rem; font-size: 0.88rem; color: var(--prata-2); padding: 0.2rem 0; cursor: pointer; }
.destinos label small { color: var(--prata-3); }

.comunicado { padding: 1.05rem 1.15rem; border-top: 1px solid var(--fio); }
.comunicado:first-child { border-top: 0; }
.comunicado header { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.75rem; }
.comunicado header strong { font-size: 1rem; color: var(--prata); }
.comunicado header small { color: var(--prata-3); font-size: 0.8rem; }
.comunicado-texto {
  margin: 0.55rem 0 0;
  color: var(--prata-2);
  font-size: 0.93rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.comunicado footer { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.75rem; }
.comunicado footer .estado { font-size: 0.8rem; color: var(--prata-3); }
.comunicado-leitores { margin: 0.6rem 0 0; font-size: 0.85rem; color: var(--prata-2); }
.comunicado-leitores[hidden] { display: none; }
.comunicado--novo { box-shadow: inset 3px 0 0 var(--ouro); }

/* ============================================================ molduras */

/* /admin#mediador e /admin#suporte: a página de verdade dentro de uma moldura.
   A altura é a da janela menos o cabeçalho da aba — quem rola é o conteúdo de
   dentro, não a página de fora. */
.moldura {
  display: block;
  width: 100%;
  height: calc(100dvh - 11.5rem);
  min-height: 460px;
  border: 1px solid var(--fio);
  border-radius: var(--raio);
  background: var(--breu);
}
.moldura[hidden] { display: none; }

@media (max-width: 900px) {
  .moldura { height: calc(100dvh - var(--barra-inferior) - 13rem); }
}

/* A mesma página, vista de dentro da moldura (<html class="embutido">). O
   trilho lateral vira uma faixa de abas no topo, e some tudo que a
   administração em volta já mostra: marca, conta, sair. Vale em qualquer
   largura — por isso desfaz também a barra inferior do celular. */
.embutido .painel-grade { display: block; min-height: 0; }
.embutido .trilho {
  position: sticky;
  inset: 0 auto auto 0;
  height: auto;
  flex-direction: row;
  gap: 0;
  padding: 0.4rem 0.75rem;
  border: 0;
  border-bottom: 1px solid var(--fio);
  background: var(--asfalto);
  backdrop-filter: none;
  overflow-x: auto;
  z-index: 60;
}
.embutido .trilho-marca,
.embutido .trilho-separador,
.embutido .trilho-rodape,
.embutido .topo-celular { display: none; }
.embutido .trilho-menu { display: flex; width: auto; gap: 2px; }
.embutido .trilho-menu li { flex: none; }
.embutido .trilho-menu a {
  flex-direction: row;
  gap: 0.5rem;
  padding: 0.45rem 0.7rem;
  min-height: 0;
  font-size: 0.88rem;
  white-space: nowrap;
}
.embutido .trilho-menu a[aria-current="page"] { background: var(--ouro-fosco); color: var(--ouro-claro); }
.embutido .trilho-menu svg { width: 16px; height: 16px; opacity: 0.85; }
.embutido .trilho-menu .conta { position: static; margin-left: 0.15rem; }
.embutido .conteudo { padding: 1.5rem 1.5rem 2.5rem; max-width: none; }

/* ============================================================ movimento */

/* Uma animação na página inteira: as barras da fita crescendo a partir da
   linha de base, uma vez, na carga. Serve pra mostrar que aquilo é uma
   série no tempo — não é enfeite em cada card. */
@media (prefers-reduced-motion: no-preference) {
  .fita[data-animar] rect { animation: subir 420ms cubic-bezier(0.2, 0.8, 0.3, 1) backwards; }
}
@keyframes subir {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .esqueleto { animation: none; }
  .pool > span { transition: none; }
}

/* ============================================================ gestão: week, escala, influencers, analistas */

/* A gestão tem onze seções. No desktop o trilho rola quando a janela é baixa;
   no celular a barra inferior desliza de lado em vez de espremer onze ícones. */
.trilho--longo { overflow-y: auto; scrollbar-width: thin; }
@media (max-width: 900px) {
  .trilho--longo { overflow-y: visible; }
  .trilho--longo .trilho-menu { overflow-x: auto; scrollbar-width: none; }
  .trilho--longo .trilho-menu::-webkit-scrollbar { display: none; }
  .trilho--longo .trilho-menu li { flex: 0 0 70px; }
}

/* As setas que andam de semana em semana, ao lado do período. */
.semana-nav {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.84rem;
  color: var(--prata-2);
}
.semana-nav .botao { padding: 0.2rem 0.65rem; font-size: 1rem; line-height: 1.2; }

/* A semana que a tela está mostrando, na tabela do GMV Week. */
table.dados tr.escolhida { background: var(--ouro-fosco); }
table.dados tr.escolhida .nome { color: var(--ouro-claro); }

/* Linha de detalhe que abre embaixo de outra (influencers). */
table.dados tr.detalhe,
table.dados tr.detalhe:hover { cursor: default; background: var(--breu); }
table.dados tr.detalhe td { font-size: 0.85rem; line-height: 1.7; color: var(--prata-2); }
table.dados tr.detalhe strong { color: var(--prata); font-weight: 600; }
table.dados .positivo { color: var(--verde); }
table.dados .negativo { color: #ff9ca0; }

/* Linha de lista que abre a ficha do ADM. */
.vaga-linha[data-ficha] { cursor: pointer; }
.vaga-linha[data-ficha]:hover { background: var(--grafite); }

/* ---------- o mapa da semana ---------- */

/* Divergente em volta do custo da vaga: quente abaixo dele, frio acima, cinza
   no meio. Vermelho contra azul (e não contra verde) pra continuar legível
   pra quem não distingue vermelho de verde. */
.painel {
  --mapa-quente-2: #c2454b;
  --mapa-quente-1: #6b3239;
  --mapa-neutro: #333b49;
  --mapa-frio-1: #27507f;
  --mapa-frio-2: #3d82d6;
}

.selo--frio { color: #9cc4f5; background: rgba(61, 130, 214, 0.16); }

.legenda-escala { gap: 0.9rem; font-size: 0.78rem; color: var(--prata-2); flex-wrap: wrap; }
.lido {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 2px;
  margin-right: 0.4rem;
}
.lido--sobra { background: var(--mapa-quente-2); }
.lido--equilibrio { background: var(--mapa-neutro); }
.lido--cabe { background: var(--mapa-frio-2); }

.mapa-rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.mapa {
  display: grid;
  grid-template-columns: 2.4rem repeat(24, minmax(27px, 1fr));
  gap: 2px;
  min-width: 760px;
}
.mapa-hora,
.mapa-dia {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: var(--prata-3);
  font-variant-numeric: tabular-nums;
}
.mapa-dia { justify-content: flex-start; font-weight: 600; color: var(--prata-2); }
.mapa-celula {
  appearance: none;
  border: 0;
  border-radius: 3px;
  height: 30px;
  padding: 0;
  font-family: var(--corpo);
  font-size: 0.68rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--prata);
  background: var(--grafite);
  cursor: pointer;
}
.mapa-celula[data-vazia] { background: var(--breu); box-shadow: inset 0 0 0 1px var(--fio); }
.mapa-celula[data-escuro] { color: var(--ouro-tinta); }
.mapa-celula:hover,
.mapa-celula:focus-visible { outline: 2px solid var(--prata); outline-offset: -2px; }

.mapa-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin-top: 0.9rem;
  font-size: 0.78rem;
  color: var(--prata-2);
}
.mapa-legenda i {
  display: inline-block;
  width: 14px; height: 10px;
  border-radius: 2px;
  margin-right: 0.4rem;
  vertical-align: -1px;
}
.mapa-leitura {
  margin: 0.85rem 0 0;
  min-height: 1.5em;
  font-size: 0.88rem;
  color: var(--prata);
}
table.dados .junto { white-space: nowrap; }

/* Com a Week são seis períodos: em tela estreita a fila de pílulas desliza de
   lado em vez de cortar a última. */
.barra-periodo .periodos { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.barra-periodo .periodos::-webkit-scrollbar { display: none; }
.barra-periodo .periodos button { flex: none; white-space: nowrap; }

/* Barra de rolagem escura e fina onde a gestão rola: a padrão do sistema é
   uma faixa branca no meio de uma tela preta. */
.trilho--longo,
.mapa-rolagem,
.tabela-rolagem {
  scrollbar-width: thin;
  scrollbar-color: var(--fio-vivo) transparent;
}

/* ============================================================ busca avançada */

/* O formulário da busca (busca.js), em /admin e /analista: os campos lado a
   lado enquanto couberem, um embaixo do outro no celular. */
.busca { display: grid; gap: 1.15rem; }
.busca-campos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.9rem 1rem;
}
.busca-campos[hidden] { display: none; }
.busca-data { display: grid; gap: 0.8rem; justify-items: start; }
.busca-data .busca-campos { width: 100%; }
.campo input[type="datetime-local"] { color-scheme: dark; }

/* ADM e jogador na lista: clicar busca as partidas da pessoa. Parece texto,
   não botão, pra a tabela não virar uma parede de botões. */
.busca-pessoa {
  appearance: none;
  display: grid;
  justify-items: start;
  border: 0;
  padding: 0.1rem 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.busca-pessoa .nome { white-space: nowrap; }
.busca-pessoa:hover .nome,
.busca-pessoa:focus-visible .nome { color: var(--ouro-claro); text-decoration: underline; }
.busca-pessoa .selo { margin-top: 0.15rem; }
.busca-dupla { display: grid; gap: 0.35rem; }
.busca-codigo { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; white-space: nowrap; }
.busca-aviso { margin: 0; padding: 0.75rem 1.1rem; border-bottom: 1px solid var(--fio); }
table.dados tbody tr.sem-conversa { cursor: default; }
table.dados tbody tr.sem-conversa:hover { background: none; }
table.dados--tickets td > .selo { margin-top: 0.2rem; }

/* ============================================================ canais de aquisição */

.barra-canais {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin-bottom: 0.4rem;
}
.barra-canais .periodos { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.barra-canais .periodos button { flex: none; white-space: nowrap; }
.barra-canais-fim { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.interruptor { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.87rem; color: var(--prata-2); cursor: pointer; white-space: nowrap; }

.regua--4 { grid-template-columns: repeat(4, 1fr); }
.regua .valor--texto { font-size: 1rem; line-height: 1.3; }
.regua .valor.positivo { color: var(--verde); }
.regua .valor.negativo { color: #ff9ca0; }

table.dados tr.alerta td:first-child { box-shadow: inset 3px 0 0 var(--brasa); }
table.dados--canais .selo { margin-right: 0.3rem; }

.canal-detalhe { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem 2rem; padding: 0.4rem 0; }
.canal-detalhe h3 { font-size: 0.9rem; margin: 0 0 0.5rem; color: var(--prata); }
.canal-detalhe p { margin: 0.6rem 0 0; }
.vagas--compacta .vaga-linha { padding: 0.45rem 0; }
.canal-acoes { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; padding: 0.8rem 0 0.2rem; border-top: 1px solid var(--fio); margin-top: 0.8rem; }
.canal-historico { list-style: none; margin: 0; padding: 0; max-height: 180px; overflow-y: auto; }
.canal-historico li { padding: 0.3rem 0; border-bottom: 1px solid var(--fio); }

.grafico-movimento svg { display: block; width: 100%; height: 140px; }
.grafico-movimento .base { stroke: var(--fio-vivo); stroke-width: 1; }
.mov-entrada { fill: var(--verde); }
.mov-saida { fill: var(--brasa); }
.mov-chave { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 2px; margin: 0 0.25rem 0 0.6rem; vertical-align: -1px; }
.mov-chave--entrada { background: var(--verde); }
.mov-chave--saida { background: var(--brasa); }

/* Mensagem barrada pelo filtro: cortada numa linha, inteira no título. */
.filtro-texto { display: block; max-width: 38ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* No celular a régua de quatro vira lista, como a de três. */
@media (max-width: 900px) {
  .regua--4 { grid-template-columns: 1fr; }
  .canal-detalhe { grid-template-columns: 1fr; }
  .barra-canais-fim { margin-left: 0; }
}

/* Régua dentro de um bloco com borda (aba Filas): sem isto o primeiro número
   encosta na borda do bloco. */
.painel-bloco > .regua { padding: 0 1.1rem; }

/* ============================================================ grade fluida */

/* Uma página com .grade é uma pilha de faixas na largura toda da janela. Cada
   faixa é uma de duas coisas:

     · um bloco sozinho — gráfico no tempo, tabela de muitas colunas, régua de
       números —, que ocupa a linha inteira;
     · uma .fileira — dois ou três blocos lado a lado que dividem a largura e
       ficam da MESMA altura. Lista longa rola por dentro (.rolagem-limitada),
       então é a fileira que manda na altura, não o bloco mais comprido.

   Assim a tela nunca fica com um bloco baixo do lado de um buraco: o que
   divide uma linha foi pensado pra dividir. Quando a janela estreita, os
   blocos da fileira descem um embaixo do outro. */
.pagina.grade:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 1.25rem;
}
.grade > * { min-width: 0; }
/* Dentro da grade quem separa é o gap, não a margem de cada bloco. */
.grade > .painel-bloco,
.grade > .regua,
.grade > .fita,
.fileira > .painel-bloco { margin-top: 0 !important; }
.grade > .pagina-cabeca { margin-bottom: 0; }
.grade > .fita + .fita-legenda { margin-top: -1.25rem; }

.fileira {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 25rem), 1fr));
  align-items: stretch;
  gap: 1.25rem;
}
.fileira > * { min-width: 0; }
/* O corpo do bloco cresce até o pé: o fundo e a borda vão até a altura da
   fileira, e o rodapé (nota, paginação) fica embaixo. */
.fileira > .painel-bloco { display: flex; flex-direction: column; }
.fileira > .painel-bloco > :last-child { flex: 1 1 auto; }

/* Largo e estreito: gráfico ou tabela de um lado, a lista que explica do
   outro. Só quando cabe; mais estreito, cai no empilhado de cima. */
@container conteudo (min-width: 1080px) {
  .fileira--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .fileira--1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  /* Busca: o formulário numa coluna estreita, o resto pra tabela de partidas. */
  .fileira--busca { grid-template-columns: minmax(19rem, 26rem) minmax(0, 1fr); }
}

/* Lista longa rola por dentro, com o cabeçalho da tabela parado no topo. */
.rolagem-limitada { max-height: min(68vh, 34rem); overflow: auto; }
.grade > .painel-bloco > .rolagem-limitada { max-height: min(75vh, 46rem); }

/* Régua de números dentro de um bloco estreito: quebra em linhas em vez de
   espremer três ou quatro números até o rótulo virar coluna de uma palavra. */
.painel-bloco > .regua,
.painel-bloco > .regua.regua--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11.5rem), 1fr));
}

/* Barra de filtros embaixo do cabeçalho de um bloco (transcripts, ADMs). */
.filtros-bloco {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem 0.9rem;
  padding: 0.75rem 1.15rem;
  border-bottom: 1px solid var(--fio);
  font-size: 0.87rem;
  color: var(--prata-2);
}
.filtros-bloco input[type="search"],
.filtros-bloco input[type="number"],
.filtros-bloco select {
  background: var(--breu);
  border: 1px solid var(--fio-vivo);
  border-radius: var(--raio);
  color: var(--prata);
  padding: 0.4rem 0.7rem;
  font: inherit;
  font-size: 0.87rem;
}
.filtros-bloco input[type="search"] { width: 15rem; max-width: 100%; }
.filtros-bloco input[type="number"] { width: 5.5rem; }
.filtros-bloco input:focus,
.filtros-bloco select:focus { outline: none; border-color: var(--ouro); }
.filtros-bloco label { display: inline-flex; align-items: center; gap: 0.45rem; }
.filtros-bloco .fim { margin-left: auto; }

/* ============================================================ início */

/* A faixa do "agora": cinco números ao vivo, cada um com a cor do que ele
   diz — vermelho pede ação, ouro pede olho, verde está normal. A cor é um fio
   no topo, não um fundo: a tela não vira semáforo. Cada número é um link pra
   aba que resolve. */
.agora {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  border: 1px solid var(--fio);
  border-radius: var(--raio);
  background: var(--asfalto);
  overflow: hidden;
}
.agora-item {
  display: grid;
  align-content: start;
  gap: 0.15rem;
  padding: 1rem 1.15rem 1.05rem;
  border-top: 3px solid var(--fio-vivo);
  box-shadow: inset 1px 0 0 var(--fio);
  color: inherit;
  text-decoration: none;
  transition: background var(--transicao);
}
.agora-item:hover { background: var(--grafite); }
.agora-item:focus-visible { outline: 2px solid var(--ouro); outline-offset: -2px; }
.agora-item[data-estado="risco"] { border-top-color: var(--brasa); }
.agora-item[data-estado="atencao"] { border-top-color: var(--ouro); }
.agora-item[data-estado="ok"] { border-top-color: var(--verde); }
.agora-valor {
  font-family: var(--num);
  font-variation-settings: "wdth" 118, "wght" 750;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.9rem, 2.6vw, 2.6rem);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--prata);
}
.agora-item[data-estado="risco"] .agora-valor { color: #ff9ca0; }
.agora-rotulo { font-size: 0.86rem; font-weight: 600; color: var(--prata); margin-top: 0.35rem; }
.agora-extra { font-size: 0.8rem; color: var(--prata-3); line-height: 1.45; }

/* Os avisos: uma frase por linha, do mais grave pro mais leve, e a linha
   inteira leva pra aba que resolve. */
.alertas { list-style: none; margin: 0; padding: 0; }
.alertas a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1.15rem;
  border-bottom: 1px solid var(--fio);
  color: var(--prata);
  text-decoration: none;
  font-size: 0.93rem;
  line-height: 1.45;
}
.alertas li:last-child a { border-bottom: 0; }
.alertas a:hover { background: var(--grafite); }
.alertas a:focus-visible { outline: 2px solid var(--ouro); outline-offset: -2px; }
.alertas .ponto { width: 9px; height: 9px; border-radius: 999px; background: var(--fio-vivo); }
.alertas [data-nivel="risco"] .ponto { background: var(--brasa); box-shadow: 0 0 0 4px var(--brasa-fosca); }
.alertas [data-nivel="atencao"] .ponto { background: var(--ouro); }
.alertas [data-nivel="ok"] .ponto { background: var(--verde); }
.alertas .ir { font-size: 0.8rem; color: var(--prata-3); white-space: nowrap; }
.alertas a:hover .ir { color: var(--ouro-claro); }

/* A semana: o número, a comparação e a régua de onde ela vai fechar. */
.semana-valor {
  font-family: var(--num);
  font-variation-settings: "wdth" 120, "wght" 800;
  font-variant-numeric: tabular-nums;
  font-size: clamp(2rem, 3vw, 2.8rem);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 0 0 0.35rem;
}
.semana-texto { margin: 0.2rem 0 0; font-size: 0.9rem; color: var(--prata-2); line-height: 1.55; }
.semana-texto strong { color: var(--prata); font-weight: 600; }
.semana-regua { position: relative; height: 10px; margin: 1.15rem 0 0.4rem; border-radius: 999px; background: var(--grafite); }
.semana-regua .feito { position: absolute; inset: 0 auto 0 0; border-radius: 999px; background: var(--ouro); }
.semana-regua .projetado {
  position: absolute; inset: 0 auto 0 0; border-radius: 999px;
  background: repeating-linear-gradient(135deg, var(--ouro-fosco) 0 6px, transparent 6px 10px);
  box-shadow: inset 0 0 0 1px var(--ouro-fosco);
}
.semana-regua .marco { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--prata-2); }
.semana-legenda { display: flex; justify-content: space-between; gap: 0.5rem; font-size: 0.76rem; color: var(--prata-3); }

/* Quem está trabalhando: grupos curtos de nomes, cada um abre a ficha. */
.pessoas-grupo { padding: 0.85rem 1.15rem; border-bottom: 1px solid var(--fio); }
.pessoas-grupo:last-child { border-bottom: 0; }
.pessoas-grupo h3 {
  display: flex; justify-content: space-between; gap: 0.5rem;
  margin: 0 0 0.5rem; font-size: 0.84rem; font-weight: 600; color: var(--prata-2);
}
.pessoas-grupo h3 span { color: var(--prata-3); font-weight: 500; }
.pessoas-lista { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0; padding: 0; list-style: none; }
.pessoas-lista button {
  appearance: none;
  border: 1px solid var(--fio-vivo);
  border-radius: 999px;
  background: var(--breu);
  color: var(--prata);
  font: inherit;
  font-size: 0.84rem;
  padding: 0.25rem 0.7rem;
  cursor: pointer;
}
.pessoas-lista button:hover,
.pessoas-lista button:focus-visible { border-color: var(--ouro); color: var(--ouro-claro); outline: none; }
.pessoas-ranking { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.pessoas-ranking button {
  appearance: none; border: 0; background: none; color: inherit; font: inherit; cursor: pointer;
  display: grid; grid-template-columns: 1fr auto; gap: 0.75rem; width: 100%; padding: 0.2rem 0; text-align: left;
  font-size: 0.9rem;
}
.pessoas-ranking button:hover .nome { color: var(--ouro-claro); }
.pessoas-ranking .valor { font-variant-numeric: tabular-nums; color: var(--ouro); font-weight: 600; white-space: nowrap; }

/* O "dia normal" por cima das barras de hoje. */
.grafico .referencia { fill: none; stroke: var(--prata-2); stroke-width: 1.5; stroke-dasharray: 4 3; }
.lido--hoje { background: var(--ouro); }
.lido--normal { background: none; border-top: 2px dashed var(--prata-2); height: 0; width: 14px; vertical-align: middle; }

/* ---------- busca rápida, na barra do topo ---------- */
.busca-rapida {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  padding: 0 0.6rem;
  border: 1px solid var(--fio-vivo);
  border-radius: 999px;
  background: var(--breu);
  color: var(--prata-3);
  transition: border-color var(--transicao);
}
.busca-rapida:focus-within { border-color: var(--ouro); }
.busca-rapida svg { width: 15px; height: 15px; flex: none; }
.busca-rapida input {
  width: 15rem;
  max-width: 100%;
  border: 0;
  background: none;
  color: var(--prata);
  font: inherit;
  font-size: 0.86rem;
  padding: 0.42rem 0;
}
.busca-rapida input:focus { outline: none; }
.busca-rapida kbd {
  font-family: inherit;
  font-size: 0.72rem;
  color: var(--prata-3);
  border: 1px solid var(--fio-vivo);
  border-radius: 4px;
  padding: 0 0.35rem;
}
.busca-rapida:focus-within kbd { display: none; }
#buscaRapidaEstado[data-erro] { color: #ff9ca0; }

@media (max-width: 900px) {
  .busca-rapida { flex: 1 1 100%; order: -1; }
  .busca-rapida input { width: 100%; }
  .busca-rapida kbd { display: none; }
  /* Dois por linha: os cinco números cabem numa tela de celular sem
     empurrar os avisos pra baixo da dobra. */
  .agora { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agora-item { padding: 0.8rem 0.9rem; box-shadow: inset 1px 0 0 var(--fio), inset 0 1px 0 var(--fio); }
  .agora-valor { font-size: 1.7rem; }
}

/* ============================================================ jogador */

/* O mini-cartão de jogador nas listas da gestão (perfis.js): foto, nome e,
   embaixo, V/D, % de vitória, partidas e a entrada no servidor. O cartão
   inteiro é um botão que abre o perfil; o ID fica lá dentro. */
.jogador {
  appearance: none;
  display: inline-grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.65rem;
  min-width: min(100%, 15rem);
  max-width: 100%;
  padding: 0.4rem 0.6rem 0.4rem 0.45rem;
  border: 1px solid var(--fio);
  border-radius: var(--raio);
  background: var(--breu);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transicao), background var(--transicao);
}
.jogador:hover { border-color: var(--fio-vivo); background: var(--grafite); }
.jogador:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
.jogador--sem { cursor: default; border-style: dashed; }
.jogador-foto,
.perfil-foto {
  position: relative;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--grafite);
  color: var(--prata-2);
  font-size: 0.75rem;
  font-weight: 700;
  flex: none;
}
.jogador-foto img,
.perfil-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jogador-info { display: grid; min-width: 0; gap: 0.1rem; }
.jogador-nome {
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--prata);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jogador-dados {
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.5rem;
  font-size: 0.75rem;
  color: var(--prata-3);
  line-height: 1.45;
}
.jogador-dados > span + span::before { content: "·"; margin-right: 0.5rem; color: var(--fio-vivo); }
.jogador-dados b { font-weight: 700; font-variant-numeric: tabular-nums; }
.jogador-dados .v { color: var(--verde); }
.jogador-dados .d { color: #ff9ca0; }
.jogador-dados .fora { color: #ff9ca0; }
.jogador-lado { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.jogador--carregando .jogador-nome { color: var(--prata-3); }
.jogador--carregando .jogador-dados span {
  display: block;
  width: 11rem;
  height: 0.7rem;
  margin-top: 0.15rem;
  border-radius: 3px;
  background: var(--grafite);
}
/* Dois jogadores de uma fila, um embaixo do outro. */
.jogadores-fila { display: grid; gap: 0.35rem; justify-items: start; }
table.dados td > .jogador { display: inline-grid; }

/* O perfil completo, na gaveta de lado. */
.gaveta--perfil { z-index: 85; }
.perfil-cabeca { display: flex; align-items: center; gap: 0.9rem; min-width: 0; }
.perfil-foto { width: 60px; height: 60px; font-size: 1.1rem; }
.perfil-numeros { margin-bottom: 1.1rem; }
.perfil-id { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.perfil-id code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.86rem;
  background: var(--breu);
  border: 1px solid var(--fio);
  border-radius: 6px;
  padding: 0.2rem 0.45rem;
}
.perfil-subtitulo { font-size: 0.95rem; margin: 1.6rem 0 0.4rem; }
.perfil-partidas { list-style: none; margin: 0; padding: 0; }
.perfil-partidas button {
  appearance: none;
  display: grid;
  gap: 0.2rem;
  width: 100%;
  padding: 0.6rem 0;
  border: 0;
  border-bottom: 1px solid var(--fio);
  background: none;
  color: inherit;
  font: inherit;
  font-size: 0.9rem;
  text-align: left;
  cursor: pointer;
}
.perfil-partidas button:hover strong { color: var(--ouro); }
.perfil-partidas .selo { margin-left: 0.35rem; }
.perfil-partidas .id { font-size: 0.8rem; color: var(--prata-3); }

/* ============================================================ paginação */

/* Embaixo de toda tabela paginada (lista.js): ‹ 1 2 3 4 5 › e quantas
   linhas a página mostra. */
.paginas-num {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  padding: 0.7rem 1.1rem;
  border-top: 1px solid var(--fio);
}
.paginas-num button {
  appearance: none;
  min-width: 2.1rem;
  height: 2.1rem;
  padding: 0 0.55rem;
  border: 1px solid var(--fio-vivo);
  border-radius: 8px;
  background: none;
  color: var(--prata-2);
  font: inherit;
  font-size: 0.86rem;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.paginas-num button:hover:not([disabled]) { color: var(--prata); border-color: var(--prata-3); }
.paginas-num button[aria-current="page"] { background: var(--ouro); border-color: var(--ouro); color: var(--breu); font-weight: 700; }
.paginas-num button[disabled] { opacity: 0.35; cursor: default; }
.paginas-num button:focus-visible { outline: 2px solid var(--ouro); outline-offset: 2px; }
.paginas-num-reticencias { color: var(--prata-3); padding: 0 0.15rem; }
.paginas-num-conta { margin-left: auto; font-size: 0.8rem; color: var(--prata-3); font-variant-numeric: tabular-nums; }

/* ============================================================ aba Filas */

/* Tempos: três cartões lado a lado na largura do bloco, cada um com média e
   mediana. Sem coluna vazia do lado: o bloco é uma faixa inteira. */
.tempos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: 0.9rem;
  padding: 1.1rem 1.1rem 0;
}
.tempo-cartao {
  border: 1px solid var(--fio);
  border-radius: var(--raio);
  background: var(--breu);
  padding: 0.95rem 1.05rem 0.9rem;
}
.tempo-cartao h3 { margin: 0 0 0.7rem; font-size: 0.88rem; font-weight: 600; color: var(--prata); }
.tempo-numeros { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
.tempo-numeros > div + div { border-left: 1px solid var(--fio); padding-left: 0.8rem; }
.tempo-numeros .valor {
  font-family: var(--num);
  font-variation-settings: "wdth" 112, "wght" 700;
  font-variant-numeric: tabular-nums;
  font-size: 1.45rem;
  line-height: 1.15;
  color: var(--prata);
}
.tempo-numeros .valor .delta { font-size: 0.72rem; vertical-align: middle; }
.tempo-numeros .rotulo { font-size: 0.78rem; color: var(--prata-3); margin-top: 0.15rem; }
.tempo-cartao .extra { margin: 0.65rem 0 0; font-size: 0.8rem; color: var(--prata-2); }
.tempos-nota { margin: 0.8rem 1.1rem 1rem; }

.regua--5 { grid-template-columns: repeat(5, 1fr); }

/* Motivos do fechamento depois de confirmar: o que o ADM escolheu e o que o
   bot fechou sozinho, lado a lado. */
.motivos-grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); border-bottom: 1px solid var(--fio); }
.motivos-grupos > div + div { border-left: 1px solid var(--fio); }
.motivos-grupos h3 { font-size: 0.86rem; margin: 0; padding: 0.85rem 1.15rem 0.2rem; color: var(--prata); }
.motivos-grupos h3 .id { font-weight: 400; color: var(--prata-3); font-size: 0.78rem; margin-left: 0.35rem; }
table.dados--cancelamentos td { vertical-align: top; }
table.dados--cancelamentos .filtro-texto { max-width: 26ch; margin-top: 0.3rem; font-size: 0.8rem; color: var(--prata-2); }

/* Ranking de AFK, como o embed do bot: posição, jogador, vezes, dia e total. */
table.dados--afk .afk-posicao { width: 2.5rem; font-weight: 700; color: var(--prata-3); font-variant-numeric: tabular-nums; }

/* Sub-abas da aba Filas (funil.js): uma faixa de abas sublinhadas que fica
   presa no topo ao rolar. No celular desliza de lado em vez de quebrar. */
.subabas {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  gap: 0.25rem;
  margin-top: 1.25rem;
  padding-top: 0.35rem;
  background: var(--breu);
  border-bottom: 1px solid var(--fio);
  overflow-x: auto;
  scrollbar-width: none;
}
.subabas::-webkit-scrollbar { display: none; }
.subabas button {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  appearance: none;
  border: 0;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  background: none;
  color: var(--prata-2);
  font-family: var(--corpo);
  font-size: 0.92rem;
  font-weight: 600;
  white-space: nowrap;
  padding: 0.7rem 0.95rem;
  cursor: pointer;
  transition: color var(--transicao), border-color var(--transicao);
}
.subabas button:hover { color: var(--prata); }
.subabas button[aria-selected="true"] { color: var(--prata); border-bottom-color: var(--ouro); }
.subabas button:focus-visible { outline: 2px solid var(--ouro); outline-offset: -2px; border-radius: 6px; }
.subaba-conta {
  min-width: 1.4rem;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  background: var(--fio-vivo);
  color: var(--prata);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.subabas button[aria-selected="true"] .subaba-conta { background: var(--ouro); color: var(--ouro-tinta); }
.subaba-conta[hidden] { display: none; }
[data-pagina="funil"] .painel-bloco[hidden] { display: none; }

/* "Ver todas" e "Mostrar menos" das tabelas resumidas (lista.js). */
.paginas-num--resumo .botao { font-weight: 600; }
.paginas-num-recolher { margin-left: 0.5rem; }

@media (max-width: 900px) {
  .regua--5 { grid-template-columns: 1fr; }
  .motivos-grupos > div + div { border-left: 0; border-top: 1px solid var(--fio); }
  .paginas-num { padding-inline: 0.8rem; }
  .paginas-num-conta { flex-basis: 100%; margin-left: 0; }
  .jogador { min-width: 0; }
}
.canal-jogadores { margin-top: 1rem; }
.canal-jogadores h3 { font-size: 0.9rem; margin: 0 0 0.5rem; color: var(--prata); }
.canal-jogadores .tabela-rolagem { border: 1px solid var(--fio); border-radius: var(--raio); }
.canal-jogadores .paginas-num { border-top: 0; padding-inline: 0; }

/* ============================================================ filas simultâneas */

/* O topo do Início: Total, Confirmadas e Aguardando, ao vivo, com a mesma
   cara dos números da faixa do "agora" logo abaixo. No celular, empilham. */
.simultaneas { display: grid; gap: 0.6rem; }
.simultaneas-cabeca { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.simultaneas-cabeca h2 {
  font-family: var(--display);
  font-variation-settings: "wdth" 110, "wght" 700;
  font-size: 1.02rem;
  margin: 0;
}
.agora--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ao-vivo { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--prata-3); }
.ao-vivo i { width: 8px; height: 8px; border-radius: 999px; background: var(--fio-vivo); }
.ao-vivo[data-estado="ok"] i { background: var(--verde); box-shadow: 0 0 0 0 rgba(63, 185, 80, 0.5); }
.ao-vivo[data-estado="erro"] i { background: var(--brasa); }
.ao-vivo[data-estado="erro"] { color: #ff9ca0; }
@media (prefers-reduced-motion: no-preference) {
  .ao-vivo[data-estado="ok"] i { animation: pulsar 2s ease-out infinite; }
  .agora-valor.mudou { animation: piscar 0.9s ease-out; }
}
@keyframes pulsar {
  0% { box-shadow: 0 0 0 0 rgba(63, 185, 80, 0.5); }
  70% { box-shadow: 0 0 0 7px rgba(63, 185, 80, 0); }
  100% { box-shadow: 0 0 0 0 rgba(63, 185, 80, 0); }
}
@keyframes piscar {
  from { color: var(--ouro); }
  to { color: var(--prata); }
}
@media (max-width: 900px) {
  .agora.agora--3 { grid-template-columns: 1fr; }
}
/* Na tabela o cartão não encolhe até virar coluna de uma palavra: a tabela
   rola de lado. */
table.dados .jogador { min-width: 16rem; }
table.dados--cancelamentos .jogadores-fila { min-width: 16rem; }
@media (max-width: 900px) {
  .painel-bloco > .regua.perfil-numeros,
  .perfil-numeros.regua--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
  .perfil-numeros > div:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 900px) {
  .perfil-numeros > div { display: block; border-top: 0; padding: 0.6rem 0; }
  .perfil-numeros > div:nth-child(even) { border-left: 1px solid var(--fio); padding-left: 0.9rem; }
  .perfil-numeros > div:nth-child(n + 3) { border-top: 1px solid var(--fio); }
  .perfil-numeros .rotulo { margin-top: 0.15rem; }
}


/* ============================================================ acabamento (grupo 1) */

/* Barras de rolagem escuras em todo o painel, inclusive a da página e as de
   dentro de modais e listas. `color-scheme` pinta controles nativos também. */
html { color-scheme: dark; }
* { scrollbar-width: thin; scrollbar-color: var(--fio-vivo) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--fio-vivo); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--prata-3); background-clip: content-box; }
*::-webkit-scrollbar-corner { background: transparent; }

/* Gestão (admin/analista) abre em colunas: teto maior. */
body.painel--gestao { --teto: 1680px; }

/* Tabelas: nada cortado. A tabela rola por dentro (nos dois eixos, cabeçalho
   fixo) e a coluna de ação fica grudada à direita, sempre visível. */
.tabela-rolagem { overflow: auto; max-height: min(78vh, 52rem); }
table.dados td.acao, table.dados th.acao {
  position: sticky; right: 0;
  background: var(--asfalto);
  box-shadow: -10px 0 12px -10px rgba(0, 0, 0, 0.6);
  white-space: nowrap;
}
table.dados th.acao { z-index: 3; }
table.dados td, table.dados th { overflow-wrap: anywhere; }
table.dados td.junto, table.dados td.direita, table.dados th.direita { overflow-wrap: normal; }

/* Cor A: preto e ouro. Neutros sem o tom azulado, texto secundário com
   contraste de 5,5:1 (era 3,9:1). */
body.painel {
  --breu: #0b0b0c;
  --asfalto: #141415;
  --grafite: #1c1c1e;
  --grafite-2: #26262a;
  --fio: #2a2a2e;
  --fio-vivo: #3d3d42;
  --prata: #f1f1ee;
  --prata-2: #b9b9b3;
  --prata-3: #8f8f8a;
}

/* Cartão de jogador numa tabela que já tem V, D e % em colunas: só foto e nome,
   sem repetir o placar (era o que alargava a tabela e cortava "Saiu"). */
.jogador--compacto .jogador-dados { display: none; }


/* ============================================================ acabamento (grupo 2) */

/* p07 — cantos maiores, sombra suave, item ativo com barra dourada, mais respiro */
body.painel { --raio: 16px; --sombra: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 24px -12px rgba(0, 0, 0, 0.55); }
.painel-bloco { box-shadow: var(--sombra); overflow: clip; }
.pagina-cabeca h1 { font-size: 2.1rem; letter-spacing: -0.02em; }
.painel-corpo { padding: 1.4rem; }
.painel-bloco > header { padding: 1.1rem 1.4rem; }
.trilho-menu a { position: relative; }
.trilho-menu a[aria-current="page"]::before {
  content: "";
  position: absolute;
  left: -0.75rem; top: 22%; bottom: 22%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--ouro);
}

/* p08 — menos bordas: o cabeçalho do bloco e as linhas das tabelas viram
   separações suaves, e o contorno do bloco quase some. */
.painel-bloco { border-color: rgba(255, 255, 255, 0.05); }
.painel-bloco > header { border-bottom-color: rgba(255, 255, 255, 0.05); }
table.dados td { border-bottom-color: rgba(255, 255, 255, 0.04); }
table.dados tbody tr:last-child td { border-bottom: 0; }
table.dados tbody tr:hover td { background: rgba(255, 255, 255, 0.025); }

/* p25 — selos com ícone: o estado não depende só da cor */
.selo::before { width: auto; height: auto; background: none; font-size: 0.72rem; font-weight: 800; line-height: 1; content: "●"; }
.selo--ok::before { content: "✓"; }
.selo--risco::before { content: "!"; }
.selo--ouro::before { content: "●"; }
.selo--neutro::before { content: "–"; }
.selo--frio::before { content: "i"; font-style: italic; }
.selo--vazio::before { display: none; }

/* p27 — movimento suave, e nenhum para quem pediu menos */
.botao, .periodos button, .ordenar, .jogador, .painel-bloco a, table.dados tbody tr td {
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.botao:active { transform: translateY(1px); }
.pagina:not([hidden]) { animation: entra 0.22s ease both; }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* p28 — botão de entrar em ouro (era o azul do Discord) */
.botao--discord { background: var(--ouro); color: var(--breu); font-weight: 700; }
.botao--discord:hover { background: var(--ouro-claro); color: var(--breu); }

/* ============================================================ estrutura (grupo 3) */

/* p15 — menu agrupado: rótulo pequeno antes de cada grupo */
.trilho-menu li.grupo {
  list-style: none;
  padding: 1rem 0.85rem 0.3rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--prata-3);
}
.trilho-menu li.grupo:first-child { padding-top: 0.25rem; }
.trilho-rodape .trilho-menu li.grupo { padding-top: 0.6rem; }

/* p21 — uma barra de topo só: período, busca e "atualizar" ficam presos no alto */
.barra-periodo {
  position: sticky;
  top: 0;
  z-index: 40;
  margin: -2rem -2.25rem 1.6rem;
  padding: 0.85rem 2.25rem;
  background: rgba(11, 11, 12, 0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.embutido .barra-periodo { margin: 0 0 1.2rem; }
.barra-periodo .periodo-rotulo {
  flex-basis: 100%;
  margin: 0;
  font-size: 0.85rem;
  color: var(--prata-2);
}

/* p13 — densidade: compacta tira espaço das tabelas e dos blocos */
.densidade {
  margin: 0.5rem 0.85rem 0.25rem;
  padding: 0.35rem 0.6rem;
  font: inherit;
  font-size: 0.76rem;
  color: var(--prata-2);
  background: none;
  border: 1px solid var(--fio);
  border-radius: 999px;
  cursor: pointer;
  text-align: center;
}
.densidade:hover { color: var(--prata); border-color: var(--fio-vivo); }
html[data-densidade="compacta"] table.dados td { padding-block: 0.38rem; }
html[data-densidade="compacta"] table.dados th { padding-block: 0.45rem; }
html[data-densidade="compacta"] .painel-corpo { padding: 0.9rem; }
html[data-densidade="compacta"] .painel-bloco { margin-top: 1.1rem; }
html[data-densidade="compacta"] .painel-bloco > header { padding-block: 0.7rem; }
html[data-densidade="compacta"] .pessoa .av { width: 24px; height: 24px; font-size: 0.7rem; }

/* p10 — "Ver todos" no fim da lista resumida */
.ver-todos { margin: 0.8rem 1.1rem 1rem; }
tr[hidden] { display: none; }

/* p11 — filtros do suporte recolhidos num botão */
.filtros-recolhidos:not(.aberto) > select,
.filtros-recolhidos:not(.aberto) > input { display: none; }
.filtros-conta {
  display: inline-grid; place-items: center;
  min-width: 1.15rem; height: 1.15rem; margin-left: 0.3rem;
  border-radius: 999px; background: var(--ouro); color: var(--breu);
  font-size: 0.7rem; font-weight: 800;
}

/* p16 — "como ler" no cabeçalho de cada tela da gestão */
.como-ler {
  margin: 0.9rem 0 0;
  padding: 0.55rem 0.9rem;
  max-width: 62ch;
  font-size: 0.86rem;
  color: var(--prata-2);
  background: var(--ouro-fosco);
  border-left: 3px solid var(--ouro);
  border-radius: 0 10px 10px 0;
}
.como-ler b { color: var(--ouro-claro); margin-right: 0.35rem; }

/* p12 — estado vazio que explica: ícone, título, o que fazer */
.vazio { padding: 2.2rem 1.25rem; }
.vazio::before {
  content: "○";
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem; margin: 0 auto 0.8rem;
  border-radius: 999px; background: var(--grafite); color: var(--prata-3);
  font-size: 1.2rem;
}
.vazio .dica { display: block; margin-top: 0.5rem; color: var(--prata-3); font-size: 0.82rem; }

/* p18 — sub-abas do Growth reaproveitam o estilo das da aba Filas */
.pagina > .subabas { margin-top: 0.4rem; }
[data-sub][hidden], [data-subaba][hidden] { display: none; }

/* p22 — celular da gestão: 4 itens + "Mais" */
.trilho-menu li.mais { display: none; }
@media (max-width: 900px) {
  .barra-periodo { margin: -1.25rem -1.1rem 1.2rem; padding: 0.7rem 1.1rem; top: 0; }
  .trilho-menu li.grupo { display: none; }
  .trilho--longo .trilho-menu li.sec { display: none; }
  .trilho--longo .trilho-menu li.mais { display: block; flex: 1 1 0; min-width: 0; }
  .trilho--longo .trilho-menu li.mais button {
    width: 100%; min-height: 48px; padding: 0.5rem 0.2rem;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem;
    font: inherit; font-size: 0.7rem; color: var(--prata-2);
    background: none; border: 0; border-radius: 10px; cursor: pointer;
  }
  .trilho--longo .trilho-menu li.mais button svg { width: 20px; height: 20px; }
  .trilho--longo .trilho-menu li.mais.atual button,
  .trilho--longo.mais-aberto .trilho-menu li.mais button { color: var(--ouro); }
  /* Aberto, os itens escondidos formam uma grade logo acima da barra. */
  .trilho--longo.mais-aberto .trilho-menu { display: grid; grid-template-columns: repeat(5, 1fr); }
  .trilho--longo.mais-aberto .trilho-menu li.sec { display: block; order: -1; }
  .trilho--longo.mais-aberto .trilho-menu li.mais { order: 1; }
  .trilho-menu a[aria-current="page"]::before { display: none; }
  .densidade { display: none; }
}