/* ---------------------------------------------------------------------------
 * So o que e DAS TELAS DO FLUXCP.
 *
 * A casca -- cabecalho, rodape, botao, painel, campo, recado -- vem de
 * /tema/base.css, o mesmo arquivo da pagina inicial, carregado por
 * lib/casca.php. Aqui ficam as telas de conta (o cartao, o quadro da missao,
 * o painel) e o que veste a marcacao antiga do FluxCP nas telas que o tema
 * nao reescreve (ranking, banco de itens): .horizontal-table e afins.
 *
 * Nenhuma cor escrita na mao, e nada vindo de fora.
 * ------------------------------------------------------------------------- */

.conteudo { padding-block: 56px 110px; }

/* ---------- abas do modulo (ranking, banco de itens) ---------- */
.abas {
  display: flex; gap: 4px; flex-wrap: wrap;
  border-bottom: 1px solid var(--linha); margin-bottom: 28px;
}
.abas a {
  padding: 10px 14px; margin-bottom: -1px;
  font-family: var(--titulo); font-weight: 600; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--fraco);
  border-bottom: 2px solid transparent;
}
.abas a:hover { color: var(--texto); }
.abas a[aria-current="page"] { color: var(--acento); border-bottom-color: var(--acento); }
#pagemenu { font-size: 13px; color: var(--apagado); margin-bottom: 18px; }

/* ---------- cartao (entrar, recuperar senha) ---------- */
.cartao-centro { padding-block: 16px; }
.cartao { max-width: var(--larg-cartao); margin: 0 auto; padding: 40px; }
.cartao h1 { font-size: 30px; margin-bottom: 6px; }
.cartao-intro { margin: 0 0 30px; font-size: 15px; color: var(--sutil); }
.cartao-pe { margin: 24px 0 0; text-align: center; font-size: 14px; color: var(--sutil); }
.campo-rotulo a.dica { color: var(--acento); }

/* ---------- o quadro da missao (criar conta) ---------- */
.quadro-missao {
  display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 40px; align-items: start;
}
.cartao-largo { padding: 40px; }
.cartao-cabeca { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 10px; }
.cartao-cabeca h1 { font-size: 32px; }
.cartao-progresso { margin-bottom: 34px; }

.missao-lado { display: grid; gap: 18px; position: sticky; top: calc(var(--topo-altura) + 24px); }
.missao-lado .moldura { padding: 12px; }
.missao-lado .moldura::before, .missao-lado .moldura::after,
.missao-lado .canto::before, .missao-lado .canto::after { width: 22px; height: 22px; }
.missao-arte { margin: 0; background: var(--placa); border: 1px solid var(--linha); }
.missao-arte img, .missao-arte canvas { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.missao-arte figcaption { padding: 10px 14px; border-top: 1px solid var(--linha); }
.proximos { display: grid; gap: 10px; font-size: 14.5px; color: var(--fraco); }

.data-nascimento { display: flex; gap: 8px; align-items: center; color: var(--apagado); }
.data-nascimento select { width: auto; flex: 1; min-width: 0; }
.data-nascimento select:first-child { flex: 1.4; }
.security-code img { display: block; margin-bottom: 8px; }

/* ---------- o painel da conta ---------- */
.painel-cabeca {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap; margin-bottom: 28px;
}
.painel-titulo { font-size: 34px; margin-top: 8px; }
.painel-titulo em { font-style: normal; color: var(--acento); }
.painel-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.bloco { padding: 28px; display: grid; gap: 16px; align-content: start; }
.bloco-largo { grid-column: 1 / -1; }
.bloco-cabeca { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.ficha { display: grid; grid-template-columns: auto 1fr; gap: 12px 24px; font-size: 15px; margin: 0; }
.ficha dt { color: var(--apagado); white-space: nowrap; }
.ficha dd { margin: 0; }
.estado-vivo { color: var(--acento); }
.estado-atencao { color: var(--alerta); }
.estado-alerta { color: var(--alerta); }
.dica { color: var(--apagado); font-size: 13px; }
.campos-justos { gap: 12px; }
.campos-justos input { height: 46px; font-size: 15px; }

.personagem {
  display: grid; grid-template-columns: 40px 1fr auto auto; gap: 18px; align-items: center;
  padding: 14px 0; border-top: 1px solid var(--linha);
}
.personagem-selo {
  width: 40px; height: 40px; background: var(--placa-alta);
  display: grid; place-items: center;
  font-family: var(--titulo); font-weight: 700; font-size: 15px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.personagem-nome { font-family: var(--titulo); font-weight: 600; font-size: 17px; }
.personagem-nivel { font-family: var(--titulo); font-weight: 700; font-size: 16px; }
.personagem-nivel small { color: var(--apagado); font-size: 12px; }
.personagem-zeny { font-family: var(--titulo); font-size: 14px; color: var(--apagado); }

/* ---------- listas do FluxCP (ranking, banco de itens) ---------- */
.horizontal-table, .vertical-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.horizontal-table th {
  background: var(--placa); color: var(--sutil);
  font-family: var(--titulo); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; text-align: left; font-weight: 600;
  padding: 10px 12px; border-bottom: 1px solid var(--linha);
}
.horizontal-table td, .vertical-table td { padding: 10px 12px; border-bottom: 1px solid var(--linha-fraca); font-variant-numeric: tabular-nums; }
.horizontal-table tr:nth-child(even) td { background: var(--placa); }
.vertical-table th { text-align: right; white-space: nowrap; color: var(--sutil); font-weight: 400; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--linha-fraca); }
.generic-form-table { width: 100%; max-width: 620px; border-collapse: collapse; margin-bottom: 20px; }
.generic-form-table th { text-align: right; vertical-align: middle; white-space: nowrap; color: var(--texto-calmo); font-weight: 400; font-size: 14px; padding: 8px 14px 8px 0; }
.generic-form-table td { padding: 6px 0; }
.generic-form-table input[type="text"], .generic-form-table input[type="password"] { max-width: 340px; }
.generic-form-table input[type="submit"] { height: 44px; padding: 0 20px; border: 0; background: var(--acento); color: var(--sobre-acento); font-family: var(--titulo); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer; }
.empty-row td { color: var(--apagado); font-style: italic; }
.not-applicable { color: var(--apagado); }
.top-ranked td { color: var(--acento); }
.mvp { color: var(--alerta); font-weight: 700; }
.online { color: var(--acento); }
.offline { color: var(--apagado); }
.stat-value { font-family: var(--titulo); font-variant-numeric: tabular-nums; }
.tabela-rolante { overflow-x: auto; }
.search-form, .search-form2 { background: var(--placa); border: 1px solid var(--linha); padding: 18px; margin-bottom: 20px; }
.toggler { cursor: pointer; color: var(--acento); }

/* ---------- o seletor de idioma, dentro do rodape ---------- */
.rodape-extra {
  max-width: var(--larg-max); margin-inline: auto; padding: 0 var(--gutter) 24px;
  color: var(--apagado); font-size: 13px; display: flex; align-items: center; gap: 8px;
}
.rodape-extra select { width: auto; height: 34px; padding: 0 9px; font-size: 13px; }

@media (max-width: 860px) {
  .quadro-missao { grid-template-columns: minmax(0, 1fr); }
  .missao-lado { position: static; }
  .missao-lado .moldura { display: none; }   /* a arte nao cabe num telefone; os proximos objetivos ficam */
  .cartao, .cartao-largo { padding: 28px 22px; }
  .conteudo { padding-block: 32px 72px; }
  .personagem { grid-template-columns: 40px 1fr; }
  .personagem-nivel, .personagem-zeny { grid-column: 2; }
}
@media (max-width: 700px) {
  .generic-form-table, .generic-form-table tbody, .generic-form-table tr,
  .generic-form-table th, .generic-form-table td { display: block; width: 100%; }
  .generic-form-table th { text-align: left; padding: 12px 0 4px; }
}