/*
 * O ESTADO nas paginas autenticadas: o pulso, a faixa do plano, o resumo, a faixa de atencao e
 * o esqueleto de carga.
 *
 * Saiu de `casca.css` em 04/09/2026 porque a casca passou do teto de 500 linhas ao ganhar o
 * celular. O corte e por assunto: a casca desenha ONDE as coisas ficam; esta folha desenha COMO
 * o estado e dito. Entra logo depois dela em todas as paginas.
 */

/* --------------------------------------------------------------------------------- pulso
 * A ASSINATURA da tela. Tres elos: painel -> servidor -> RCON. Um ponto verde nao consegue
 * dizer "o painel esta vivo, o servidor roda, mas o RCON esta mudo". `mudo` e NAO SEI. */

.pulso { display: inline-flex; align-items: center; flex: none; }

.pulso .elo {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid var(--linha);
  background: var(--elevado);
}

.pulso .fio { width: 14px; height: 2px; background: var(--linha); }

.pulso .elo.vivo { background: var(--roxo-claro); border-color: var(--roxo-claro); }
.pulso .fio.vivo { background: var(--roxo); }
.pulso .elo.falho { background: var(--atencao); border-color: var(--atencao); }
.pulso .elo.morto { background: var(--erro); border-color: var(--erro); }
.pulso .elo.mudo { background: transparent; border-color: var(--texto-fraco); opacity: 0.45; }
.pulso .fio.mudo { background: var(--texto-fraco); opacity: 0.25; }

.pulso .elo.batendo { animation: pulsar 2.6s ease-out infinite; }

@keyframes pulsar {
  0% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0.5); }
  70% { box-shadow: 0 0 0 8px rgba(168, 85, 247, 0); }
  100% { box-shadow: 0 0 0 0 rgba(168, 85, 247, 0); }
}

.pulso-legenda {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-family: var(--maquina);
  font-size: 0.68rem;
  color: var(--texto-tenue);
  letter-spacing: 0.04em;
  margin-top: 16px;
}

.pulso-legenda span { display: inline-flex; align-items: center; gap: 6px; }

.pulso-legenda i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  font-style: normal;
  border: 1.5px solid var(--texto-fraco);
  opacity: 0.5;
}

.pulso-legenda i.vivo { background: var(--roxo-claro); border-color: var(--roxo-claro); opacity: 1; }
.pulso-legenda i.falho { background: var(--atencao); border-color: var(--atencao); opacity: 1; }
.pulso-legenda i.morto { background: var(--erro); border-color: var(--erro); opacity: 1; }

/* ---------------------------------------------------------------------------- faixa do plano
 * O plano da conta: nome, prazo e o caminho para renovar ou subir. Vive no cabecalho da
 * pagina, a direita do titulo — quieto de proposito, o problema do dia mora na faixa de
 * atencao. */

.plano-faixa {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  margin: 6px 0 0;
  padding: 8px 8px 8px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-pilula);
  background: var(--vidro);
  box-shadow: var(--relevo);
  color: var(--texto-fraco);
  font-size: 0.84rem;
}

.plano-faixa-nome { color: var(--roxo-claro); font-weight: 650; font-family: var(--titulo); }
.plano-faixa .sep { color: var(--linha); }
.plano-faixa-acao { min-height: 32px; padding: 0 12px; border-radius: var(--raio-pilula); }

/* ------------------------------------------------------------------------------- resumo
 * Uma frase no lugar da fileira de cartoes de metrica: prosa para a interface, mono para o
 * que veio da maquina. Ela mora ao lado do titulo da grade, e nao numa caixa propria. */

.resumo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: var(--texto-fraco);
  font-size: 0.84rem;
  margin-left: auto;
}

.resumo b { color: var(--texto); font-weight: 600; }
.resumo .sep { color: var(--linha); }

/* ------------------------------------------------------------------------ faixa de atencao
 * So existe quando algo precisa do dono. Sem problema, ela some e a pagina fica quieta. */

.atencao-faixa {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border-radius: var(--raio-m);
  border: 1px solid rgba(251, 191, 36, 0.32);
  background: linear-gradient(100deg, rgba(251, 191, 36, 0.11), rgba(251, 191, 36, 0.03));
  box-shadow: var(--relevo);
  margin-bottom: 22px;
}

.atencao-tile {
  width: 34px;
  height: 34px;
  border-radius: var(--raio-m);
  flex: none;
  display: grid;
  place-items: center;
  background: rgba(251, 191, 36, 0.16);
  color: var(--atencao);
}

.atencao-tile svg { width: 16px; height: 16px; }
.atencao-corpo { flex: 1; min-width: 0; }
.atencao-titulo { font-weight: 600; margin: 0 0 2px; font-size: 0.95rem; }
.atencao-texto { margin: 0; color: var(--texto-fraco); font-size: 0.86rem; }

/* As duas portas da tela travada: comprar no site, ou falar no Discord. */
.travada-acoes {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 18px;
}

/* ------------------------------------------------------------------------------ esqueleto
 * A silhueta do que vem, para o conteudo nao empurrar a pagina ao chegar. O brilho que
 * atravessa e o de `regrasDoServidor.css` (`.esqueleto`); aqui so a forma do cartao. */

.esqueleto-pagina { display: grid; gap: 16px; }
.esqueleto-titulo { width: 14rem; height: 1.6rem; border-radius: var(--raio-p); background: var(--vidro); }
.esqueleto-cartao { min-height: 176px; }
.esqueleto-cartao .esqueleto-linha:nth-child(1) { width: 55%; }
.esqueleto-cartao .esqueleto-linha:nth-child(2) { width: 35%; opacity: 0.6; }
.esqueleto-cartao .esqueleto-linha:nth-child(3) { width: 80%; margin-top: 20px; }

@media (max-width: 860px) {
  .plano-faixa { margin: 0; }
  .resumo { margin-left: 0; width: 100%; }
  /* O botao desce para a linha de baixo, alinhado ao texto: ao lado, ele espremia o titulo em
     tres linhas. */
  .atencao-faixa { flex-wrap: wrap; }
  .atencao-corpo { flex-basis: calc(100% - 48px); }
  .atencao-faixa .botao-link { margin-left: 48px; }
}