/* conta.css — painel pessoal da conta (T2 do plano 32).

   COMPAT (requisito de PRODUTO, não dívida — decisão do Lucas em 31/08: "em
   qualquer navegador, velho ou antigo deve ser igual para todos"):
     sem `gap`      (chegou no Chrome 84; o Maxthon roda Chromium 47)
     sem `filter` / `backdrop-filter`  (não roda no Chromium do Maxthon)
     sem `var(--)`  (custom properties chegaram no 49)
     sem `display: grid`  (chegou no 57)
   Folga entre irmãos é MARGEM. Coluna é `float`/`inline-block` com largura em %.
   O teste `test_o_css_do_hub_respeita_o_que_o_proprio_cabecalho_proibe` fiscaliza
   este arquivo — a regra tem fiscal desde 31/08, antes era só prosa no topo.

   Cartões, botões, selos e campos falam pelo sistema que já existe
   (.hub-panel / .hub-acao / .hub-input). O que nasce aqui é só o que o painel
   de conta tem de próprio: a linha rótulo→valor, a ficha de vínculo e a
   tabela de recarga. */

/* ----- linha rótulo → valor ----------------------------------------------- */
.ct-linha {
  display: block;
  padding: 9px 0;
  border-bottom: 1px solid rgba(140, 165, 215, 0.12);
  font-size: 14px;
  line-height: 20px;
}
.ct-linha:last-child { border-bottom: 0; }
.ct-rotulo {
  display: inline-block;
  width: 34%;
  min-width: 120px;
  color: #7a8aa0;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  vertical-align: top;
}
.ct-valor { display: inline-block; width: 62%; color: #dfe7ff; vertical-align: top; }

/* ----- selo de estado -----------------------------------------------------
   A cor NUNCA é o único sinal: o texto do selo diz o estado por extenso, então
   quem não distingue verde de âmbar lê "não verificado" do mesmo jeito. */
.ct-selo {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.ct-selo--bom { color: #8fe0a8; border-color: rgba(143, 224, 168, 0.4); background: rgba(143, 224, 168, 0.1); }
.ct-selo--atencao { color: #f0c850; border-color: rgba(240, 200, 80, 0.4); background: rgba(240, 200, 80, 0.1); }
.ct-selo--ruim { color: #ff9a4d; border-color: rgba(255, 154, 77, 0.4); background: rgba(255, 154, 77, 0.1); }
.ct-selo--neutro { color: #a8b8d0; border-color: rgba(140, 165, 215, 0.3); }

/* ----- personagens da conta ----------------------------------------------- */
.ct-chars { margin-top: 14px; }
.ct-char {
  display: inline-block;
  margin: 0 8px 8px 0;
  padding: 8px 14px;
  border: 1px solid rgba(140, 165, 215, 0.2);
  border-radius: 12px;
  background: rgba(20, 34, 74, 0.5);
  vertical-align: top;
}
.ct-char-nome { display: block; color: #f5dc8a; font-size: 14px; }
.ct-char-info { display: block; color: #7a8aa0; font-size: 12px; margin-top: 2px; }

/* ----- notas e vazios ------------------------------------------------------ */
.ct-nota {
  margin: 0 0 16px;
  color: #a8b8d0;
  font-size: 13px;
  line-height: 1.6;
}
.ct-nota--atencao {
  padding: 10px 14px;
  border: 1px solid rgba(240, 200, 80, 0.3);
  border-radius: 10px;
  background: rgba(240, 200, 80, 0.07);
  color: #f0dca8;
}
.ct-vazio { margin: 0; color: #7a8aa0; font-size: 13px; line-height: 1.6; }

/* ----- campos -------------------------------------------------------------- */
.ct-campo { margin-bottom: 14px; max-width: 380px; }
.ct-label {
  display: block;
  margin-bottom: 6px;
  color: #a8b8d0;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.ct-input { display: block; width: 100%; box-sizing: border-box; }
.ct-input.is-erro { border-color: #ff9a4d; }
/* Altura reservada: o erro aparecendo não pode empurrar o botão pra baixo — a
   fileira inteira pulando é o que faz o clique errar o alvo. */
.ct-erro {
  display: block;
  min-height: 16px;
  margin-top: 4px;
  color: #ff9a4d;
  font-size: 12px;
  line-height: 16px;
}

/* Folga entre botões por MARGEM (não há `gap`): sem isto eles encostam no
   navegador do Lucas — foi exatamente o defeito da recarga em 30/08. */
.ct-acoes { margin-top: 4px; }
.ct-acoes .hub-acao { margin: 0 10px 8px 0; }

/* ----- contas vinculadas ---------------------------------------------------- */
.ct-vinculo {
  padding: 12px 0;
  border-bottom: 1px solid rgba(140, 165, 215, 0.12);
  line-height: 30px;
}
.ct-vinculo:last-child { border-bottom: 0; }
.ct-vinculo-nome {
  display: inline-block;
  width: 26%;
  min-width: 90px;
  color: #f5dc8a;
  font-size: 14px;
  font-weight: 700;
  vertical-align: middle;
}
.ct-vinculo-estado {
  display: inline-block;
  width: 44%;
  color: #a8b8d0;
  font-size: 13px;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ct-vinculo .hub-acao { float: right; }

/* ----- histórico de entradas (aba Segurança) --------------------------------
   Mesma gramática da tabela de recarga logo abaixo, de propósito: são duas
   listas do mesmo painel, e duas gramáticas fariam a segunda parecer de outra
   tela. Até 22/09/2026 esta seção não existia — o servidor não registrava
   entrada nenhuma (0 de 357 contas), então não havia o que listar. */
.ct-entradas {
  margin: 14px 0 4px;
  border-top: 1px solid rgba(140, 165, 215, 0.12);
  padding-top: 6px;
}
.ct-entrada {
  padding: 8px 0;
  border-bottom: 1px solid rgba(140, 165, 215, 0.08);
  font-size: 13px;
  line-height: 18px;
}
.ct-entrada:last-child { border-bottom: 0; }
.ct-entrada--cabeca {
  color: #7a8aa0;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ct-entrada-quando { display: inline-block; width: 38%; min-width: 120px; color: #dfe7ff; }
.ct-entrada-origem { display: inline-block; width: 24%; color: #a8b8d0; }
.ct-entrada-ip {
  display: inline-block;
  width: 36%;
  color: #7a8aa0;
  text-align: right;
  /* IPv6 cabe em 45 caracteres e estoura a coluna no celular. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.ct-entrada--cabeca .ct-entrada-quando,
.ct-entrada--cabeca .ct-entrada-ip { color: #7a8aa0; }

/* ----- histórico de recarga -------------------------------------------------- */
.ct-resumo {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(140, 165, 215, 0.12);
}
.ct-resumo-num {
  color: #f0c850;
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  font-size: 26px;
  font-weight: 700;
  margin-right: 8px;
}
.ct-resumo-txt { color: #7a8aa0; font-size: 13px; }
.ct-recarga {
  padding: 9px 0;
  border-bottom: 1px solid rgba(140, 165, 215, 0.08);
  font-size: 13px;
  line-height: 18px;
}
.ct-recarga:last-child { border-bottom: 0; }
.ct-recarga-data { display: inline-block; width: 22%; min-width: 88px; color: #7a8aa0; }
.ct-recarga-pacote { display: inline-block; width: 26%; color: #dfe7ff; }
.ct-recarga-quem { display: inline-block; width: 32%; color: #a8b8d0; }
.ct-recarga-valor {
  display: inline-block;
  width: 16%;
  color: #8fe0a8;
  font-weight: 700;
  text-align: right;
}
.ct-paginas { margin-top: 14px; text-align: center; }
.ct-paginas .hub-acao { margin: 0 10px; }
.ct-pag-info { color: #7a8aa0; font-size: 12px; vertical-align: middle; }

/* ----- celular --------------------------------------------------------------
   As colunas em % viram bloco: 34%/62% lado a lado num telefone deixa o valor
   com quatro caracteres por linha. */
@media (max-width: 640px) {
  .ct-rotulo, .ct-valor { display: block; width: 100%; }
  .ct-valor { margin-top: 3px; }
  .ct-campo { max-width: none; }
  .ct-acoes .hub-acao { display: block; width: 100%; margin: 0 0 8px 0; }
  .ct-vinculo-nome, .ct-vinculo-estado { display: block; width: 100%; }
  .ct-vinculo .hub-acao { float: none; display: inline-block; margin-top: 8px; }
  .ct-recarga-data, .ct-recarga-pacote, .ct-recarga-quem, .ct-recarga-valor {
    display: inline-block;
    width: 48%;
    text-align: left;
  }
  .ct-recarga-valor { text-align: right; }
  /* O IP inteiro em 36% de um telefone vira reticências logo no primeiro
     octeto — e o IP é justamente o que a pessoa foi ali conferir. */
  .ct-entrada-quando { display: block; width: 100%; }
  .ct-entrada-origem, .ct-entrada-ip { display: inline-block; width: 49%; }
  .ct-entrada-ip { text-align: right; }
  .ct-entrada--cabeca { display: none; }
}

/* Programa de Parceiros (plano 43): a linha que responde à conversão. Fica no
   painel, perto do botão — mensagem longe do lugar onde se clicou faz o
   jogador procurar o que aconteceu (mesma lição do erro-no-campo acima). */
.ct-msg-pc { margin: 8px 0 0; font-size: 13px; min-height: 16px; }
.ct-msg-pc.is-ok { color: #7fd88f; }
.ct-msg-pc.is-erro { color: #e8a0a0; }
.ct-linha.ct-alerta .ct-valor { color: #e8a0a0; }

/* Pacote fora do alcance do saldo: aparece igual, mas apagado — esconder faria
   o parceiro achar que aquele pacote não existe para ele. */
.ct-pc-pacote.is-longe { opacity: .55; }
.ct-pc-pacote .ct-rotulo small { color: #8a9ab8; }

/* ─── Seja parceiro (plano 43 §11.3) ────────────────────────────────────────
   A vitrine que ocupa a caixa do painel ANTES de existir painel. Mesma família
   visual do resto da aba: nenhuma cor nova, nenhum tamanho novo — quem entra
   aqui tem de sentir que continua na mesma tela, não numa landing page colada
   por cima. */
.ct-pv-lista { list-style: none; margin: 10px 0 0; padding: 0; }
.ct-pv-lista li {
  padding: 9px 0 9px 18px;
  border-top: 1px solid rgba(140, 165, 215, 0.12);
  position: relative;
}
.ct-pv-lista li:first-child { border-top: none; }
/* O marcador é um losango de 6px, não um bullet: o mesmo desenho dos painéis
   de recarga, para a lista não parecer texto colado de outro site. */
.ct-pv-lista li:before {
  content: "";
  position: absolute;
  left: 2px; top: 15px;
  width: 6px; height: 6px;
  background: #f0c850;
  transform: rotate(45deg);
}
.ct-pv-lista b { display: block; color: #e8eefc; font-size: 13.5px; }
.ct-pv-lista span { display: block; color: #8a9ab8; font-size: 12.5px; margin-top: 2px; }

.ct-pv-passos { margin: 8px 0 0; padding-left: 20px; color: #a8b8d0; font-size: 12.5px; }
.ct-pv-passos li { margin: 6px 0; }
.ct-pv-passos b { color: #e8eefc; }

.ct-pv-form { margin-top: 10px; }
/* Textarea herda o campo de texto e só cresce: um controle novo aqui seria uma
   segunda gramática de formulário na mesma aba. */
.ct-area { min-height: 76px; resize: vertical; line-height: 1.45; font-family: inherit; }
select.ct-input { cursor: pointer; }