/* ================================================================ painel de gestao */

/* --------------------------------------------------------------- planos */

.planos { margin: 0 0 1.25rem; }

/* A distribuicao por plano. Proporcao se le de relance; numero exato fica na legenda. */
.barra-planos { display: flex; gap: 2px; height: 10px; border-radius: var(--raio-pilula); overflow: hidden; background: var(--preto); }
.barra-planos .fatia { transition: flex-grow var(--t-lento) var(--saida); }
.fatia { display: block; min-width: 2px; }

/* A rampa: cinza -> roxo -> roxo claro -> OURO. O topo em ouro e o plano que mais paga. */
.fatia--hatchling { background: var(--texto-tenue); }
.fatia--juvenile { background: var(--roxo); }
.fatia--adult { background: var(--roxo-claro); }
.fatia--elder { background: var(--ouro); }
/* Plano que o codigo nao conhece: ambar, porque e problema e nao categoria. */
.fatia--desconhecido { background: var(--atencao); }

/* Uma linha por plano: ponto da cor da fatia, nome, e a conta ancorada a direita. */
.planos-legenda { display: flex; flex-direction: column; gap: 3px; margin: 0.6rem 0 0; font-size: 0.76rem; color: var(--texto-fraco); }
.plano-linha { display: flex; align-items: center; gap: 7px; }
.plano-nome { flex: 1; min-width: 0; }
.plano-linha b { color: var(--texto); font-weight: 600; font-variant-numeric: tabular-nums; }
.plano-ponto { flex: none; width: 7px; height: 7px; border-radius: var(--raio-pilula); }

/* ------------------------------------------------------- situacao do codigo */

/* A resposta para "meu codigo nao funciona", no cartao. Cada estado leva a uma conversa
   diferente, entao cada um tem a propria cor. */
.codigo-estado { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; font-family: var(--maquina); }
.codigo-estado::before { content: ''; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; flex: none; }
.codigo-estado--valido { color: var(--ok); }
.codigo-estado--usado { color: var(--texto-fraco); }
.codigo-estado--substituido { color: var(--roxo-claro); }
.codigo-estado--expirado { color: var(--atencao); }
.codigo-estado--nenhum { color: var(--texto-tenue); }

/* --------------------------------------------------- entrada da lista */

/* A lista aparece em onda, com teto de oito passos. */
#lista-licencas > .licenca { animation: surgir-acima var(--t-lento) var(--saida) both; animation-delay: calc(var(--i, 0) * 24ms); }
#lista-licencas > .licenca:nth-child(1) { --i: 0; }
#lista-licencas > .licenca:nth-child(2) { --i: 1; }
#lista-licencas > .licenca:nth-child(3) { --i: 2; }
#lista-licencas > .licenca:nth-child(4) { --i: 3; }
#lista-licencas > .licenca:nth-child(5) { --i: 4; }
#lista-licencas > .licenca:nth-child(6) { --i: 5; }
#lista-licencas > .licenca:nth-child(7) { --i: 6; }
#lista-licencas > .licenca:nth-child(n + 8) { --i: 7; }

/* ------------------------------------------------- o que se FAZ com uma licenca */

/* Recolhido, e com cara de controle: revogar e conceder chave sao gestos raros e deliberados. */
.licenca-acoes { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid var(--linha); }

.licenca-acoes > summary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0.34rem 0.7rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pilula);
  color: var(--texto-fraco);
  font-family: var(--maquina);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  list-style: none;
  transition: color var(--t-rapido) var(--entrada), border-color var(--t-rapido) var(--entrada), background var(--t-rapido) var(--entrada);
}

.licenca-acoes > summary::-webkit-details-marker { display: none; }

/* A dica ao lado NAO herda o versalete do titulo: "REVOKE, ARCHIVE, RESEND" colado em
   "MANAGE THIS LICENSE" vira uma frase so, e some a fronteira entre rotulo e explicacao. */
.licenca-acoes > summary .ajuste-dica {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--corpo);
  font-size: 0.74rem;
  padding-left: 0.6rem;
  border-left: 1px solid var(--linha);
}
.licenca-acoes > summary:hover { color: var(--texto); border-color: var(--linha-viva); background: var(--vidro-alto); }
.licenca-acoes > summary:focus-visible { outline: 2px solid var(--roxo-claro); outline-offset: 2px; }

/* A seta: mesma construcao por borda dos itens da loja, um vocabulario so. */
.licenca-acoes > summary::before {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--t-medio) var(--saida);
}

.licenca-acoes[open] > summary { color: var(--roxo-claro); border-color: color-mix(in srgb, var(--roxo) 45%, var(--linha)); }
.licenca-acoes[open] > summary::before { transform: rotate(45deg); }
.licenca-acoes[open] > :not(summary) { animation: surgir-acima var(--t-medio) var(--saida) both; }

/* A chave assinada perde o dourado gritante: dentro do "Manage", o contorno discreto basta. */
.bloco-chave { border-color: var(--linha); }

/* Os blocos de historico e de maquinas sao sanfonas leves, sem a moldura dos ajustes. */
.licenca .ajustes { margin: 0.5rem 0 0; border: 1px solid color-mix(in srgb, var(--linha) 60%, transparent); border-radius: var(--raio-p); }
.licenca .ajustes > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.84rem;
  color: var(--texto-fraco);
  cursor: pointer;
  list-style: none;
  transition: color var(--t-rapido) var(--entrada), background var(--t-rapido) var(--entrada);
}

.licenca .ajustes > summary::-webkit-details-marker { display: none; }
.licenca .ajustes > summary:hover { color: var(--texto); background: var(--vidro-alto); }

/* A mesma seta por borda do "Manage": um vocabulario so para "isto abre". */
.licenca .ajustes > summary::before {
  content: '';
  flex: none;
  width: 5px;
  height: 5px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--t-medio) var(--saida);
}

.licenca .ajustes[open] > summary::before { transform: rotate(45deg); }
.licenca .ajustes[open] > summary { border-bottom: 1px solid color-mix(in srgb, var(--linha) 60%, transparent); }
.licenca .ajustes > :not(summary) { padding: 0 0.75rem 0.6rem; }

#bloco-comunidade, #bloco-restaurar { margin-bottom: 0.5rem; }

/* ============================================================ a tabela de preco */

/* A grade de planos: uma linha por capacidade, uma coluna por plano. `--colunas` chega pelo
   script: o numero de planos e do servidor. */
.planos-grade { display: grid; grid-template-columns: minmax(0, 1fr) repeat(var(--colunas, 4), minmax(96px, auto)); align-items: stretch; gap: 0; min-width: 34rem; }

/* A rolagem horizontal e da GRADE, e nunca da pagina. */
.planos-rolagem { overflow-x: auto; margin: 0.9rem 0 0; padding-bottom: 0.35rem; }

/* --------------------------------------------------------------- cabecalho */

/* `sticky` na vertical: uma caixa marcada sem o nome do plano a vista e uma decisao as cegas. */
.planos-canto, .planos-cabeca { position: sticky; top: 0; z-index: 1; background: var(--elevado); border-bottom: 1px solid var(--linha); }

.planos-cabeca { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 0.5rem 0.5rem 0.6rem; text-align: center; }
.planos-cabeca b { color: var(--texto); font-size: 0.82rem; font-weight: 600; }
.planos-conta { font-size: 0.68rem; color: var(--texto-fraco); font-variant-numeric: tabular-nums; }

/* "factory" ou "edited", e nao um ponto colorido: as duas palavras cabem. */
.planos-marca { font-family: var(--maquina); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; }
.planos-marca[data-estado='fabrica'] { color: var(--texto-tenue); }
.planos-marca[data-estado='editado'] { color: var(--ouro); }

.planos-voltar { padding: 2px 8px; min-height: 0; font-size: 0.62rem; opacity: 0.45; transition: opacity var(--t-rapido) var(--entrada); }
.planos-cabeca:hover .planos-voltar, .planos-voltar:focus-visible { opacity: 1; }

/* Coluna de fabrica nao oferece "voltar ao padrao": o botao existiria para nao fazer nada, e um
   botao inerte ensina a desconfiar dos outros. Sai da vista sem sair do lugar — esconder por
   `display` faria o cabecalho pular de altura a cada marcacao. */
.planos-cabeca:has(.planos-marca[data-estado='fabrica']) .planos-voltar { visibility: hidden; }

/* ------------------------------------------------------------------ linhas */

.planos-rotulo { display: flex; flex-direction: column; gap: 1px; justify-content: center; padding: 0.42rem 0.7rem 0.42rem 0.15rem; border-bottom: 1px solid color-mix(in srgb, var(--linha) 40%, transparent); font-size: 0.8rem; color: var(--texto); }
.planos-slug { font-size: 0.63rem; color: var(--texto-tenue); }

/* A linha em que um plano mais caro entrega menos que um mais barato: ambar, "problema". */
.planos-rotulo[data-atencao='sim'] { box-shadow: inset 2px 0 0 var(--atencao); background: color-mix(in srgb, var(--atencao) 6%, transparent); }
.planos-rotulo[data-atencao='sim'] > span { color: var(--atencao); }

.planos-cela {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.42rem 0.5rem;
  border-bottom: 1px solid color-mix(in srgb, var(--linha) 40%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--linha) 40%, transparent);
  cursor: pointer;
  transition: background var(--t-rapido) var(--entrada);
}

/* A celula INTEIRA e o alvo, e nao so a caixa de 13px. */
.planos-cela:hover { background: color-mix(in srgb, var(--roxo) 12%, transparent); }
.planos-cela:has(input:focus-visible) { outline: 2px solid var(--roxo-claro); outline-offset: -2px; }
.planos-cela input { cursor: pointer; accent-color: var(--roxo-claro); }

/*
 * A celula que DIFERE da fabrica ganha um canto em ouro.
 *
 * "edited" no cabecalho diz que a coluna mudou; nao diz onde. Vinte linhas por quatro colunas
 * sao oitenta caixas para comparar de memoria com um padrao que ninguem decorou. O canto marca
 * exatamente a caixa que foi ligada ou desligada — a mesma cor que "edited" ja usa.
 */
.planos-cela[data-difere='sim'] { background: color-mix(in srgb, var(--ouro) 7%, transparent); }
.planos-cela[data-difere='sim']::after { content: ''; position: absolute; top: 0; right: 0; border-style: solid; border-width: 0 9px 9px 0; border-color: transparent var(--ouro) transparent transparent; opacity: 0.85; }

/* Coluna marcada de ponta a ponta fica com o fundo do plano mais caro: o Elder e o ouro. */
.planos-cabeca[data-nivel='elder'] b { color: var(--ouro); }

/* ------------------------------------------------------------------ rodape */

.planos-aviso { margin: 0.7rem 0 0; padding: 0.5rem 0.7rem; border-left: 2px solid var(--atencao); background: color-mix(in srgb, var(--atencao) 7%, transparent); border-radius: 0 var(--raio-p) var(--raio-p) 0; color: var(--atencao); }

.planos-rodape { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.9rem; }
.planos-rodape > .regras-nota { flex: 1; min-width: 12rem; margin: 0; }
.planos-rodape > button[disabled] { opacity: 0.4; cursor: not-allowed; }

/* A legenda do canto em ouro, embaixo da grade e antes do aviso. */
.planos-diferenca { display: inline-flex; align-items: center; gap: 8px; margin: 0.6rem 0 0; font-size: 0.78rem; color: var(--texto-fraco); }
/* A legenda desenha a MARCA, e nao uma cor: o que se procura na grade e o canto, nao o fundo. */
.planos-diferenca i {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ouro) 7%, var(--vidro));
  border: 1px solid color-mix(in srgb, var(--linha) 80%, transparent);
}

.planos-diferenca i::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  border-style: solid;
  border-width: 0 8px 8px 0;
  border-color: transparent var(--ouro) transparent transparent;
  opacity: 0.85;
}

/* ------------------------------------------------------------------ preco e cargo de cada plano
   Uma LINHA por plano, e nao uma coluna por moeda: "quanto custa o Adult?" se responde lendo a
   linha inteira. */
.venda-grade { display: flex; flex-direction: column; gap: 0.55rem; min-width: 28rem; }

.venda-linha {
  display: grid;
  grid-template-columns: minmax(6rem, auto) repeat(auto-fit, minmax(9rem, 1fr));
  align-items: end;
  gap: 0.6rem 0.8rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--borda);
  border-radius: var(--raio-m);
  background: color-mix(in srgb, var(--preto) 40%, var(--vidro));
}

.venda-linha > strong { align-self: center; font-family: var(--titulo); }
.venda-campo { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.venda-campo > span { font-family: var(--maquina); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--texto-fraco); }
.venda-campo > input { width: 100%; min-width: 0; min-height: 40px; font-variant-numeric: tabular-nums; }

/* O id de cargo e longo: ele ganha a largura que sobra na linha. */
.venda-cargo { grid-column: 1 / -1; }
@media (min-width: 60rem) { .venda-cargo { grid-column: auto; min-width: 12rem; } }