/* Paleta do hugogrillo.com.br: preto quente e dourado champanhe, no lugar
   do cinza azulado e âmbar que havia aqui. */
:root {
  --fundo: #0a0908;
  --superficie: #14110d;
  --superficie-2: #1c1811;
  --borda: #2a2712;
  --borda-forte: #45400f;
  --texto: #f4efe3;
  --texto-fraco: #a89c83;
  --destaque: #ffe600;
  --destaque-fraco: #2b2600;
  --ok: #35c98a;
  --erro: #f2555a;

  /* O brilho vem de o degradê ir de champanhe claro a ouro velho, imitando
     reflexo em metal. Só nos pontos que merecem peso — usar em tudo mata
     o efeito. */
  --ouro: linear-gradient(135deg, #fff59b 0%, #ffe600 45%, #d4bd00 100%);
  --ouro-linha: linear-gradient(90deg, transparent, #ffe600 50%, transparent);
  --ouro-brilho: 0 6px 22px -10px rgba(255, 230, 0, .40);
  --tinta-no-ouro: #17150a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.5 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

.topo {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  justify-content: space-between;
  padding: 20px 28px;
  background: linear-gradient(180deg, #15140b, var(--superficie));
  position: relative;
}

/* filete dourado sob o cabeçalho, como no site do Hugo */
.topo::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--ouro-linha);
  opacity: .5;
}

/* a logo fica à esquerda do título, formando a assinatura da marca */
.marca-topo { display: flex; align-items: center; gap: 14px; }
.marca-topo img {
  height: 42px;
  width: 42px;
  display: block;
  flex: 0 0 auto;
}
/* a barra separadora não compete com o texto */
.separador { color: var(--destaque); font-weight: 400; margin: 0 2px; }
.topo h1 { margin: 0; font-size: 20px; letter-spacing: -0.3px; }
.sub { margin: 2px 0 0; color: var(--texto-fraco); font-size: 13px; }

.abas { display: flex; gap: 6px; flex-wrap: wrap; }

.aba {
  background: transparent;
  border: 1px solid var(--borda);
  color: var(--texto-fraco);
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}
.aba:hover { color: var(--texto); border-color: var(--borda-forte); }
.aba.ativa {
  background: var(--destaque-fraco);
  border-color: var(--destaque);
  color: var(--destaque);
}

main { padding: 24px 28px 60px; max-width: 1180px; margin: 0 auto; }

.painel { display: flex; flex-direction: column; gap: 20px; }
.oculto { display: none !important; }

.cartao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 20px;
}

.cartao h2 {
  margin: 0 0 14px;
  font-size: 15px;
  font-weight: 600;
  color: var(--texto-fraco);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.ajuda { color: var(--texto-fraco); font-size: 13px; margin: 0 0 12px; }
.ajuda code {
  background: var(--superficie-2);
  padding: 2px 5px;
  border-radius: 4px;
  font-size: 12px;
}

.linha-campos {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
}

label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 13px;
  color: var(--texto-fraco);
  flex: 1 1 160px;
}
.campo-largo { margin-top: 14px; }

input, select, textarea {
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  color: var(--texto);
  border-radius: 8px;
  padding: 9px 11px;
  font: inherit;
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--destaque);
}
textarea { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

.botao {
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  color: var(--texto);
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
}
.botao:hover:not(:disabled) { border-color: var(--borda-forte); }
.botao:disabled { opacity: 0.5; cursor: not-allowed; }
.botao.primario {
  background: var(--ouro);
  border-color: transparent;
  color: var(--tinta-no-ouro);
  font-weight: 600;
  box-shadow: var(--ouro-brilho);
}

.link {
  background: none;
  border: none;
  color: var(--destaque);
  cursor: pointer;
  font-size: 12px;
  padding: 0;
  text-decoration: underline;
}

.acoes { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }

.selecao-contas { margin-top: 18px; }
.rotulo-selecao {
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 13px;
  color: var(--texto-fraco);
  margin-bottom: 8px;
}

.chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- contas agrupadas por clipador ---- */

.resumo-selecao { color: var(--destaque); margin-right: auto; }

.linha-dashboard {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.linha-dashboard .ajuda { margin: 0; }

.cabecalho-impressao { display: none; }

.caixa-contas {
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 12px;
  background: var(--fundo);
}
.caixa-contas > input { margin-bottom: 12px; }

.grupos-clipador {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 12px;
  /* dezenas de clipadores não cabem na tela: rola dentro da caixa */
  max-height: 420px;
  overflow-y: auto;
  padding-right: 4px;
}
.grupo-clipador {
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 12px 14px;
}
.grupo-cabecalho {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.grupo-cabecalho strong { font-size: 14px; }

/* ---- barra de usuário ---- */

.topo-direita {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}
.usuario-barra {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  color: var(--texto-fraco);
}

/* ---- tela de login ---- */

.corpo-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}
.caixa-login {
  width: 100%;
  max-width: 350px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 32px 28px;
}
/* largura livre: fixar os dois lados espremia a logo, que não é quadrada */
.caixa-login .marca-login {
  display: block;
  height: 62px;
  width: auto;
  margin: 0 auto 18px;
}
.caixa-login h1 { margin: 0; font-size: 19px; line-height: 1.3; }
.caixa-login .sub { margin: 4px 0 24px; }
.caixa-login form { display: flex; flex-direction: column; gap: 14px; }
.caixa-login label { flex: none; }
.caixa-login .botao { margin-top: 6px; }
.chip {
  /* precisa sobrescrever o `label` genérico, que é coluna e estica */
  display: flex;
  flex-direction: row;
  flex: 0 0 auto;
  align-items: center;
  gap: 8px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 13px;
  color: var(--texto);
  cursor: pointer;
  white-space: nowrap;
}
.chip.marcado { border-color: var(--destaque); color: var(--destaque); }
.chip input { width: auto; margin: 0; accent-color: var(--destaque); }
.chip .plataforma { color: var(--texto-fraco); font-size: 11px; text-transform: uppercase; }

.status {
  margin-top: 14px;
  padding: 11px 14px;
  border-radius: 8px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  font-size: 13px;
  white-space: pre-wrap;
}
.status.erro { border-color: var(--erro); color: #ffb3b5; }
.status.ok { border-color: var(--ok); color: #9df0cb; }

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
}
.kpi {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kpi.destaque {
  border-color: var(--borda-forte);
  background: linear-gradient(160deg, #211f06, var(--superficie));
  box-shadow: var(--ouro-brilho);
}
.kpi .rotulo { color: var(--texto-fraco); font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px; }
.kpi strong { font-size: 30px; font-weight: 650; letter-spacing: -1px; }
/* o número principal recebe o dourado recortado no próprio texto */
.kpi.destaque strong {
  background: var(--ouro);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.kpi .nota { color: var(--texto-fraco); font-size: 12px; }

.colunas { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 820px) { .colunas { grid-template-columns: 1fr; } }

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--borda); }
th { color: var(--texto-fraco); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tbody tr:last-child td { border-bottom: none; }
tr.total td { font-weight: 700; color: var(--destaque); border-top: 2px solid var(--borda); }
td a { color: var(--texto); text-decoration: none; }
td a:hover { color: var(--destaque); text-decoration: underline; }

.rolagem { overflow-x: auto; }

.grafico {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 160px;
  padding-top: 10px;
  overflow-x: auto;
}
.barra {
  flex: 1 0 6px;
  min-width: 6px;
  background: var(--ouro);
  opacity: 0.75;
  border-radius: 2px 2px 0 0;
  position: relative;
}
.barra:hover { opacity: 1; }
.vazio { color: var(--texto-fraco); font-size: 13px; padding: 8px 0; }

/* ---- seletor de competição ---- */

.barra-competicao {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 12px;
  padding: 14px 18px;
  margin-bottom: 20px;
}
.barra-competicao label { flex: 0 1 320px; }
.barra-competicao .sub {
  color: var(--texto-fraco);
  font-size: 12px;
  margin: 0 auto 4px 0;
}

/* ---- lista de competições (padrão "buraco" do ecossistema) ---- */

.lista-buracos { display: flex; flex-direction: column; gap: 10px; }
.buraco {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
}
.buraco strong { display: block; font-size: 15px; }
.buraco small { color: var(--texto-fraco); font-size: 12px; }
.acoes-linha { display: flex; align-items: center; gap: 12px; }

/* ---- ranking no formato do ecossistema ---- */

.lista-ranking { display: flex; flex-direction: column; gap: 10px; }

.linha-ranking {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
}
.linha-ranking .posicao {
  font-size: 17px;
  font-weight: 700;
  color: var(--texto-fraco);
  min-width: 38px;
  text-align: center;
}
/* os três primeiros ganham o ouro: é uma competição, o pódio é o assunto */
.linha-ranking .posicao.podio {
  background: var(--ouro);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--destaque);
}

.ranking-corpo { flex: 1; min-width: 0; }
.ranking-topo {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: baseline;
}
.ranking-topo span { color: var(--destaque); font-weight: 600; font-size: 14px; }
.ranking-barra {
  height: 6px;
  border-radius: 999px;
  background: var(--fundo);
  margin: 7px 0 5px;
  overflow: hidden;
}
.ranking-barra span { display: block; height: 100%; background: var(--ouro); }
.ranking-detalhe { font-size: 12px; color: var(--texto-fraco); }

.recado { color: var(--texto-fraco); padding: 24px 0; text-align: center; }

/* ---- ranking do dashboard ---- */

.rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }

.rank-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: 10px;
}
.rank-item:nth-child(1) { border-color: var(--borda-forte); box-shadow: var(--ouro-brilho); }

.rank-pos {
  flex: 0 0 38px;
  text-align: center;
  font-size: 17px;
  font-weight: 700;
  color: var(--texto-fraco);
}
.rank-pos.medalha { font-size: 22px; }

.rank-corpo { flex: 1 1 auto; min-width: 0; }

.rank-titulo {
  display: block;
  color: var(--texto);
  text-decoration: none;
  font-weight: 550;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rank-titulo:hover { color: var(--destaque); text-decoration: underline; }

.rank-meta { color: var(--texto-fraco); font-size: 12px; margin-top: 3px; }

.clipador-nome {
  display: block;
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.2px;
}

.selos-plataforma { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.selo-plataforma {
  background: var(--fundo);
  border: 1px solid var(--borda);
  border-radius: 6px;
  padding: 2px 8px;
  font-size: 11px;
  color: var(--texto-fraco);
  font-variant-numeric: tabular-nums;
}

.rank-barra {
  margin-top: 8px;
  height: 4px;
  background: var(--borda);
  border-radius: 2px;
  overflow: hidden;
}
.rank-barra div { height: 100%; background: var(--ouro); border-radius: 2px; }

.rank-numeros {
  flex: 0 0 auto;
  text-align: right;
  display: flex;
  flex-direction: column;
  line-height: 1.25;
}
.rank-numeros strong {
  font-size: 19px;
  font-variant-numeric: tabular-nums;
  background: var(--ouro);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.rank-numeros span { color: var(--texto-fraco); font-size: 11px; }
.rank-secundario { margin-top: 3px; white-space: nowrap; }

@media (max-width: 700px) {
  .rank-item { flex-wrap: wrap; }
  .rank-numeros { text-align: left; flex-direction: row; gap: 8px; align-items: baseline; }
}

.destaques {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px;
}
.destaque-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px;
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: 10px;
}
.destaque-topo {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--texto-fraco);
}
.destaque-card a { color: var(--texto); text-decoration: none; font-size: 13px; }
.destaque-card a:hover { color: var(--destaque); text-decoration: underline; }
.destaque-card strong { font-size: 20px; color: var(--destaque); font-variant-numeric: tabular-nums; }

/* a lista de vídeos é larga: o título fica com o espaço, o resto não quebra */
#tabela-videos table { min-width: 900px; }
#tabela-videos td:nth-child(2) { min-width: 300px; }
#tabela-videos td:nth-child(3),
#tabela-videos td:nth-child(5),
#tabela-videos td:nth-child(9) { white-space: nowrap; }

.barra-ferramentas {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.barra-ferramentas label { flex: 0 1 190px; }

.selo {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  border: 1px solid var(--borda);
  color: var(--texto-fraco);
}
.selo.ok { border-color: var(--ok); color: var(--ok); }
.selo.erro { border-color: var(--erro); color: var(--erro); }
.selo.rodando { border-color: var(--destaque); color: var(--destaque); }

/* =========================================================================
   IMPRESSÃO / PDF — uma única página A4 na horizontal
   O app é escuro e vertical; no papel isso vira um bloco preto de 3 páginas.
   Aqui as variáveis de cor viram tema claro e o painel vira uma grade de
   duas colunas, tudo dimensionado pra caber em 297x210mm.
   ========================================================================= */

@page {
  size: A4 landscape;
  margin: 7mm 8mm;
}

@media print {
  :root {
    --fundo: #ffffff;
    --superficie: #ffffff;
    --superficie-2: #fafafa;
    --borda: #d4d4d4;
    --borda-forte: #c4bb6a;
    --texto: #111111;
    --texto-fraco: #5a5a5a;
    --destaque: #7a6a00;
    --destaque-fraco: #fffdf0;
    /* no papel o degradê vira chapado: o tom claro do ouro sumiria no
       branco, e brilho de tela não existe em folha impressa */
    --ouro: #7a6a00;
    --ouro-linha: #7a6a00;
    --ouro-brilho: none;
    --tinta-no-ouro: #17150a;
  }

  /* o recorte do dourado no texto precisa voltar a ser cor sólida */
  .kpi.destaque strong, .rank-numeros strong {
    background: none !important;
    color: var(--destaque) !important;
    -webkit-text-fill-color: var(--destaque);
  }
  .topo::after { display: none; }
  .marca-topo img { display: none; }

  body { background: #fff; color: #111; font-size: 8px; }
  main { padding: 0; max-width: none; }

  /* nada que seja navegação ou controle entra no PDF */
  .topo, .abas, .usuario-barra, .topo-direita, .linha-dashboard,
  .acoes, .botao, .link, .barra-ferramentas, #dashboard-filtro,
  #painel-contabilizar, #painel-videos, #painel-contas,
  #painel-coletas, #painel-importar { display: none !important; }

  /* --- a grade da página ---------------------------------------------- */
  #painel-dashboard {
    display: grid !important;
    grid-template-columns: 1.15fr 1fr;
    grid-template-areas:
      "cabecalho  cabecalho"
      "kpis       kpis"
      "clipadores top10"
      "plataformas plataformas";
    grid-template-rows: auto auto auto auto;
    gap: 5px;
    align-items: start;
  }
  .cabecalho-impressao { grid-area: cabecalho; display: block;
    border-bottom: 1.5px solid var(--destaque); padding-bottom: 4px; }
  #cartao-kpis        { grid-area: kpis; }
  #cartao-clipadores  { grid-area: clipadores; }
  #cartao-top10       { grid-area: top10; }
  #cartao-plataformas { grid-area: plataformas; }

  .cabecalho-impressao h1 { margin: 0; font-size: 13px; }
  .cabecalho-impressao p { margin: 2px 0 0; font-size: 7.5px; color: var(--texto-fraco); }

  .cartao { border: 1px solid var(--borda); border-radius: 4px; padding: 6px 7px; }
  .cartao h2 { font-size: 8px; margin: 0 0 5px; color: #333; letter-spacing: 0.4px; }

  /* --- números do topo ------------------------------------------------- */
  .kpis { grid-template-columns: repeat(4, 1fr); gap: 5px; }
  .kpi { padding: 5px 7px; border-radius: 4px; gap: 0; }
  .kpi .rotulo { font-size: 6.5px; letter-spacing: 0.4px; }
  .kpi strong { font-size: 15px; letter-spacing: -0.4px; }
  .kpi.destaque { background: var(--destaque-fraco); }

  /* --- linhas do ranking: uma linha compacta cada ----------------------
     A coluna dos clipadores é o que decide se cabe na página. Com estas
     medidas cada linha custa ~24px, o que dá margem pra ~26 clipadores
     antes de precisar de uma segunda folha. */
  .rank { gap: 1.5px; }
  .rank-item {
    padding: 1.5px 4px;
    gap: 4px;
    border-radius: 3px;
    line-height: 1.15;
    break-inside: avoid;
  }
  .rank-pos { flex: 0 0 14px; font-size: 7.5px; }
  .rank-pos.medalha { font-size: 8.5px; }
  .clipador-nome { font-size: 8px; }
  .rank-titulo { font-size: 7px; font-weight: 500; }
  .rank-meta { font-size: 6px; margin-top: 0; }
  .rank-numeros { line-height: 1.1; }
  .rank-numeros strong { font-size: 8.5px; }
  .rank-numeros span { font-size: 5.5px; }
  .rank-secundario { margin-top: 0; }

  /* barra e selos ocupam altura que a página não tem */
  .rank-barra, .selos-plataforma { display: none; }

  /* --- ranking de clipadores no papel ----------------------------------
     Três linhas por pessoa (nome, barra, detalhe) ocupam bem mais que o
     formato antigo. Estas medidas trazem cada linha para ~19px, o que
     mantém o conjunto numa folha só. */
  .barra-competicao { display: none !important; }
  .lista-ranking { display: flex; flex-direction: column; gap: 1.5px; }
  .linha-ranking {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 1.5px 4px;
    border-radius: 3px;
    line-height: 1.1;
    break-inside: avoid;
  }
  .linha-ranking .posicao { font-size: 7.5px; min-width: 15px; }
  .linha-ranking .posicao.podio {
    background: none;
    color: var(--destaque);
    -webkit-text-fill-color: var(--destaque);
  }
  .ranking-topo strong { font-size: 8px; }
  .ranking-topo span { font-size: 8px; }
  .ranking-barra { height: 2px; margin: 1.5px 0 1px; }
  .ranking-barra span { background: var(--destaque); }
  .ranking-detalhe { font-size: 5.8px; }
  .recado { padding: 6px 0; font-size: 7px; }

  /* --- melhor vídeo por plataforma ------------------------------------- */
  .destaques { grid-template-columns: repeat(3, 1fr); gap: 5px; }
  .destaque-card { padding: 5px 6px; gap: 1px; border-radius: 3px; break-inside: avoid; }
  .destaque-topo { font-size: 6px; }
  .destaque-card a { font-size: 7px; }
  .destaque-card strong { font-size: 10px; }
  .destaque-card .nota { font-size: 6px; }

  /* --- links: o PDF guarda a âncora como anotação /Link clicável -------
     A área clicável no PDF é exatamente a caixa do <a>. Por isso o título
     ocupa a linha inteira em vez de só a largura do texto, e a seta sinaliza
     que dá pra clicar — num papel impresso ninguém adivinha. */
  a[href] {
    color: #0b57d0 !important;
    text-decoration: underline;
    text-underline-offset: 1px;
  }
  .rank-titulo {
    display: block;
    width: 100%;
    padding: 2px 0;
  }
  .rank-titulo::after,
  .destaque-card a[href]::after { content: " ↗"; font-size: 0.85em; }

  /* a dica de como exportar não entra no arquivo exportado */
  #dica-pdf { display: none !important; }

  /* fundos coloridos são removidos por padrão na impressão */
  .kpi.destaque, .rank-item {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .rank-item:nth-child(1) { background: var(--destaque-fraco); }

  .rolagem { overflow: visible !important; }
  table { min-width: 0 !important; }
}

/* aviso de cobertura quando o período pedido passa do que foi coletado */
.aviso-forte {
  color: #ffee7a !important;
  background: rgba(255, 230, 0, 0.09);
  border: 1px solid var(--destaque);
  border-radius: 8px;
  padding: 9px 12px;
}

/* ---- sentimento dos comentários ---- */

.barra-sentimento {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  margin-top: 14px;
  background: var(--fundo);
}
.barra-sentimento span { display: block; height: 100%; }

.colunas-sentimento {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}
.coluna-sentimento h3 {
  margin: 0 0 10px;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.comentario {
  background: var(--superficie-2);
  border: 1px solid var(--borda);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}
.comentario p { margin: 0 0 5px; font-size: 13px; }
.comentario small { color: var(--texto-fraco); font-size: 11px; }
.comentario a { color: var(--destaque); }

/* ---- aba Highlights: relatório da competição ---- */

.capa-relatorio {
  background: linear-gradient(135deg, #1f1c06 0%, var(--superficie) 55%);
  border: 1px solid var(--borda-forte);
  border-radius: 14px;
  padding: 34px 32px;
}
.capa-etiqueta {
  display: block;
  color: var(--destaque);
  font-size: 11px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.capa-relatorio h1 {
  margin: 0 0 14px;
  font-size: 40px;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -1px;
}
.capa-relatorio p { margin: 0; color: var(--texto-fraco); font-size: 13px; }
.capa-relatorio b { color: var(--texto); }

/* título de seção com a barrinha amarela à esquerda */
h2.secao {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 10px 0 0;
  font-size: 19px;
  text-transform: none;
  letter-spacing: -0.2px;
  color: var(--texto);
}
h2.secao::before {
  content: "";
  width: 4px;
  height: 24px;
  border-radius: 2px;
  background: var(--destaque);
}

.janelas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 780px) { .janelas { grid-template-columns: 1fr; } }
.janela { text-align: center; }
.janela-titulo { font-size: 30px; font-weight: 700; color: var(--destaque); }
.janela-periodo {
  color: var(--texto-fraco);
  font-size: 11px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--borda);
  margin-bottom: 12px;
}
.janela-linha { padding: 7px 0; }
.janela-linha strong { display: block; font-size: 19px; }
.janela-linha span { color: var(--texto-fraco); font-size: 11px; }

.painel-safety {
  text-align: center;
  background: linear-gradient(160deg, #211f06, var(--superficie));
  border-color: var(--borda-forte);
}
.safety-numero {
  display: block;
  font-size: 56px;
  line-height: 1;
  background: var(--ouro);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.safety-rotulo {
  display: block;
  color: var(--texto-fraco);
  font-size: 12px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin: 8px 0 10px;
}

.curva { width: 100%; height: auto; display: block; }
.barra-sentimento span {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #11100a;
  font-size: 11px;
  font-weight: 700;
}

/* ---- bloco de destaque do painel unificado ---- */

.destaque-principal {
  display: grid;
  grid-template-columns: minmax(280px, 0.9fr) 1.1fr;
  gap: 28px;
  align-items: center;
  background: linear-gradient(135deg, #201d06 0%, var(--superficie) 60%);
  border: 1px solid var(--borda-forte);
  border-radius: 14px;
  padding: 26px 28px;
  box-shadow: var(--ouro-brilho);
}
@media (max-width: 860px) {
  .destaque-principal { grid-template-columns: 1fr; gap: 20px; }
}

.destaque-numeros { display: flex; gap: 34px; flex-wrap: wrap; }
.numero-gigante { display: flex; flex-direction: column; gap: 2px; }
.numero-gigante .rotulo {
  color: var(--texto-fraco);
  font-size: 11px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}
.numero-gigante strong {
  font-size: 46px;
  line-height: 1.05;
  letter-spacing: -1.5px;
  background: var(--ouro);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.numero-gigante .nota { color: var(--texto-fraco); font-size: 11px; }

.destaque-acoes { display: flex; flex-direction: column; gap: 4px; }
.destaque-acoes .acoes { margin-top: 4px; }
.destaque-acoes .ajuda { margin: 0; }

/* a barra global vira a linha de recorte: competição + datas */
.campo-competicao { flex: 0 1 300px; }
.recorte-info { flex: 1 1 240px; padding-bottom: 9px; }
.recorte-info .sub { color: var(--destaque); font-size: 12px; }

/* no PDF o bloco de destaque não entra: o cabeçalho impresso já resume */
@media print {
  .destaque-principal, #filtros-avancados, .rotulo-selecao { display: none !important; }
}

/* ---- aba Configurações ---- */
.linha-intervalo {
  display: grid;
  grid-template-columns: minmax(200px, 260px) 1fr;
  gap: 18px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--borda);
}
.linha-intervalo:last-child { border-bottom: none; }
.linha-intervalo label { flex: none; }
.intervalo-projecao { padding-top: 6px; }
.ranking-handles { font-size: 11px; color: var(--texto-fraco); margin-top: 3px; }
@media print { .ranking-handles { display: none; } }

/* ---- carimbo de última atualização ---- */
.carimbo-atualizacao {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--texto-fraco);
  padding-bottom: 9px;
  white-space: nowrap;
  cursor: help;
}
.carimbo-bolinha {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(53, 201, 138, .18);
}
/* passou de 90 min sem coletar: o verde viraria mentira */
.carimbo-bolinha.atrasado {
  background: #e8a13a;
  box-shadow: 0 0 0 3px rgba(232, 161, 58, .18);
}
.carimbo-rotulo { color: var(--texto); }
.carimbo-data { opacity: .65; }
@media print { .carimbo-atualizacao { display: none; } }

/* ---- harmonia entre os painéis ----
   Antes cada bloco escolhia seu próprio espaçamento e peso de título, e a
   página parecia costurada de pedaços. Aqui a hierarquia fica em dois níveis
   só: título de seção (com a barra amarela) e título de cartão. */

.painel { gap: 18px; }

.cartao h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--texto-fraco);
}

h2.secao {
  margin: 16px 0 -4px;
  font-size: 17px;
  color: var(--texto);
}
h2.secao:first-of-type { margin-top: 4px; }

/* o cartão que só existe para agrupar não precisa de moldura dupla */
.cartao + .cartao { margin-top: 0; }

/* a ajuda logo abaixo do título de cartão cola nele em vez de flutuar */
.cartao h2 + .ajuda { margin-top: -6px; }

/* a linha de filtros vive dentro do bloco de destaque, junto das ações */
.linha-filtros {
  margin: 12px 0 0;
  padding-top: 12px;
  border-top: 1px solid var(--borda);
}
.linha-filtros .resumo-selecao { margin-right: auto; }

/* os KPIs viram faixa solta, sem moldura dupla em volta */
#cartao-kpis { padding: 0; background: none; border: none; }

/* --------------------------------------------------- tela de escolha */
/* A marca vem antes de qualquer filtro, então virou tela e não aba: escolher
   NoodTV ou um cliente é entrar num painel, não mexer num controle. */
.corpo-escolha {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
}

.escolha {
  padding: 48px 28px; max-width: 900px; width: 100%; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; gap: 26px;
}

/* só a marca, sem o lettering: o logo completo é largo e desalinhava com o
   texto centralizado abaixo */
.logo-escolha {
  width: clamp(78px, 11vw, 104px); height: auto; display: block; opacity: .95;
}

.titulo-escolha {
  margin: 0; font-size: 30px; letter-spacing: .3px;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

.subtitulo-escolha { margin: 0; text-align: center; max-width: 46ch; }

.voltar-escolha {
  align-self: flex-start; color: var(--texto-fraco); text-decoration: none;
  font-size: 14px;
}

.voltar-escolha:hover { color: var(--destaque); }

.canto-conta {
  position: absolute; top: 20px; right: 24px;
  display: flex; align-items: center; gap: 8px;
}

/* teto na largura da porta: com um cliente só, 1fr esticaria o cartão pela
   tela inteira e a arte viraria um pôster */
.portas {
  display: grid; gap: 20px; width: 100%; margin-top: 12px;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(270px, 330px));
}

.porta {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 8px 26px 26px; border-radius: 16px; text-decoration: none;
  color: var(--texto); text-align: center;
  background: linear-gradient(180deg, #16130d, var(--superficie));
  border: 1px solid var(--borda);
  position: relative; overflow: hidden;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}

.porta::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px;
  background: var(--ouro); opacity: .5; transition: opacity .15s;
}

.porta:hover {
  border-color: rgba(255, 230, 0, .5); transform: translateY(-2px);
  box-shadow: var(--ouro-brilho);
}

.porta:hover::before { opacity: 1; }

.porta-arte { display: block; width: 100%; margin-bottom: 4px; }
.porta-arte svg { width: 100%; height: auto; display: block; }

.arte-linha {
  fill: none; stroke: var(--destaque); stroke-width: 3;
  stroke-linecap: round; opacity: .5; transition: opacity .15s;
}

.arte-quadro { fill: none; stroke: var(--destaque); stroke-width: 3.5; opacity: .9; }
.arte-cheia { fill: var(--destaque); }
.arte-recorte { fill: #16130d; }
.arte-ponta { fill: none; stroke: var(--destaque); stroke-width: 3; opacity: .75; }
.porta:hover .arte-linha { opacity: .85; }

.porta-selo {
  font-size: 11px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--texto-fraco);
}

.porta h3 {
  margin: 0; font-size: 21px;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

.porta-entrar { color: var(--destaque); font-size: 13.5px; font-weight: 600; }

/* .botao-link e .discreto declaram display próprio, que ganha da regra do
   navegador para [hidden] — sem isto, esconder pelo atributo não funciona. */
[hidden] { display: none !important; }

.botao-link {
  display: inline-block; text-decoration: none; font-size: 14px;
  padding: 7px 14px; border-radius: 8px;
  border: 1px solid var(--borda); color: var(--texto-fraco);
  background: var(--superficie-2);
}

.botao-link:hover { color: var(--texto); border-color: var(--borda-forte); }
button.discreto { background: transparent; color: var(--texto-fraco); border: 0;
  cursor: pointer; font: inherit; font-size: 14px; }
button.discreto:hover { color: var(--texto); }

/* o caminho de volta pra escolha de marca, dentro do painel */
.aba.volta {
  text-decoration: none; display: inline-flex; align-items: center;
  padding-left: 12px; padding-right: 12px;
}

.aviso-cliente { border-left: 3px solid var(--destaque); }

/* Enquanto o cliente não tem hashtag não há número a mostrar — mas Competições
   e Configurações continuam de pé, porque é justamente onde se resolve isso. */
main.cliente-pendente .painel:not(#painel-competicoes):not(#painel-config),
main.cliente-pendente .barra-competicao { display: none; }

@media print {
  .aviso-cliente { display: none; }
}

/* lista de participantes dentro do formulário de competição */
.participantes { margin-top: 14px; }
.participantes .chip-linha {
  display: inline-flex; flex-direction: row; align-items: center; gap: 8px;
  cursor: pointer; font-size: 14px; color: var(--texto-fraco);
}
.participantes .chip-linha input { width: auto; }
#comp-contas { margin-top: 12px; max-height: 320px; overflow-y: auto;
  border: 1px solid var(--borda); border-radius: 10px; padding: 12px; }

/* -------------------------------------------------- relatório do cliente */
/* Tela sem controle nenhum de propósito: quem abre aqui quer o número, não
   um painel para operar. O recorte já vem decidido do servidor. */
.corpo-cliente { max-width: 1100px; margin: 0 auto; padding: 0 22px 60px; }

.topo-cliente {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
  padding: 14px 0 18px; border-bottom: 1px solid var(--borda); margin-bottom: 26px;
}

.topo-cliente-direita {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}

.painel-cliente { display: flex; flex-direction: column; gap: 18px; }
.periodo-cliente { margin: 0; color: var(--destaque); font-weight: 600; }

.numeros-cliente {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.numero-cliente {
  background: linear-gradient(180deg, #16130d, var(--superficie));
  border: 1px solid var(--borda); border-radius: 14px; padding: 18px 20px;
  display: flex; flex-direction: column; gap: 4px;
}

.numero-cliente .rotulo {
  font-size: 11px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--texto-fraco);
}

.numero-cliente strong {
  font-size: 34px; line-height: 1.1; color: var(--destaque);
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

.numero-cliente .detalhe { font-size: 12px; color: var(--texto-fraco); }

/* barra usada tanto por plataforma quanto por clipador */
.barra-plataforma { margin-bottom: 14px; }
.barra-plataforma:last-child { margin-bottom: 0; }

.barra-topo {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; margin-bottom: 6px;
}

.barra-topo small { color: var(--texto-fraco); margin-left: 8px; }

.trilho {
  height: 8px; border-radius: 999px; background: var(--superficie-2);
  overflow: hidden;
}

.preenchido { height: 100%; background: var(--ouro); border-radius: 999px; }

.linha-ranking {
  display: flex; gap: 14px; align-items: flex-start; padding: 12px 0;
  border-bottom: 1px solid var(--borda);
}

.linha-ranking:last-child { border-bottom: 0; }
.linha-ranking .posicao { width: 34px; flex-shrink: 0; font-size: 18px; }
.corpo-ranking { flex: 1; min-width: 0; }

.painel-cliente td.direita, .painel-cliente th.direita { text-align: right; }

/* pontinho que sinaliza dado vivo, não fotografia */
.ponto-vivo {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--ok); margin-right: 6px;
}

@media (max-width: 620px) {
  .numero-cliente strong { font-size: 28px; }
  .topo-cliente { padding-top: 16px; }
}

/* blocos de janela do relatório de highlights */
.selo-campanha {
  margin: 0 0 4px; font-size: 12px; letter-spacing: .8px;
  text-transform: uppercase; color: var(--texto-fraco);
}

.topo-cliente h1 { margin: 0 0 4px; }

.janelas {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.janela {
  border: 1px solid var(--borda); border-radius: 12px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 3px; background: var(--superficie);
}

.janela .rotulo {
  font-size: 11px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--texto-fraco);
}

.janela strong { font-size: 24px; color: var(--texto); }
.janela .detalhe { font-size: 12px; color: var(--texto-fraco); }

/* quem entrega × para quem, centralizado no topo do relatório do cliente */
.faixa-marcas {
  display: flex; justify-content: center;
  padding: 26px 0 4px;
}

.dupla-marcas {
  display: flex; align-items: center; justify-content: center;
  gap: 16px; flex-wrap: wrap;
}

.dupla-marcas .marca-pov { height: 38px; width: auto; display: block; }

.mais-marcas { color: var(--texto-fraco); font-size: 16px; }

.marca-cliente-nome {
  font-size: 21px; font-weight: 700; letter-spacing: .2px;
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
}

/* exportações moram na barra global: não fazem parte do relatório, mas
   precisam continuar ao alcance de quem só visualiza — e Configurações,
   onde as demais ações foram parar, é área de administrador */
.acoes-barra { display: flex; gap: 8px; align-items: center; }

/* exportar e carimbo ficam colados à direita da barra, longe dos campos:
   são referência e ação, não filtro */
.barra-competicao .acoes-barra { margin-left: auto; }
.barra-competicao .carimbo-atualizacao { margin-left: 0; }
.barra-competicao .recorte-info { flex-basis: 100%; order: 9; }

.botao.pequeno {
  padding: 7px 14px; font-size: 13px;
}

.dupla-marcas .marca-do-cliente { height: 30px; width: auto; display: block; }

/* citações do público no relatório do cliente */
.citacoes { margin-top: 16px; display: flex; flex-direction: column; gap: 10px; }

.citacoes blockquote {
  margin: 0; padding: 10px 14px; border-left: 2px solid var(--destaque);
  background: var(--superficie-2); border-radius: 0 8px 8px 0;
  font-size: 14px; color: var(--texto);
}