/*
 * O cartao de servidor: o console do dono. Vive separado do estilos.css para o coracao visual
 * do produto ter endereco proprio.
 *
 * ## Tres pesos de botao, e sao informacao
 *
 * Ate 04/09/2026 Start, Restart e Stop eram tres contornos roxos iguais. Dois deles derrubam
 * jogador e um nao — e o desenho nao dizia qual. Agora Start e o solido (a acao comum, sem
 * custo), Restart fala em atencao e Stop em falha. O rearme ("toque de novo") continua, e o
 * botao armado enche com a propria cor: o olho ve o perigo antes de ler a frase.
 */

/* -------------------------------------------------------------- servidor */

.servidor {
  background: linear-gradient(180deg, var(--vidro-alto), var(--vidro) 30%);
  border: 1px solid var(--borda);
  border-radius: var(--raio-g);
  margin-bottom: 24px;
  overflow: hidden;
  /* Sombra funda e sem transform no hover: console que se mexe embaixo do dedo atrapalha quem
     esta mirando um botao. */
  box-shadow: var(--relevo), var(--sombra-cartao);
  transition: border-color var(--t-medio) var(--entrada), box-shadow var(--t-medio) var(--entrada);
}

.servidor:hover,
.servidor:focus-within {
  border-color: var(--linha-viva);
  box-shadow: var(--relevo), var(--sombra-cartao-alta);
}

.batimento {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 18px;
  background: color-mix(in srgb, var(--elevado) 70%, transparent);
  border-bottom: 1px solid var(--linha);
  color: var(--texto-fraco);
  font-size: 0.8rem;
}

.batimento .versao { margin-left: auto; color: var(--texto-tenue); }

.ponto {
  width: 9px; height: 9px;
  border-radius: 50%;
  flex: none;
  background: var(--texto-fraco);
}

.ponto.viva { background: var(--roxo-claro); animation: batida 2.4s ease-out infinite; }
.ponto.tarde { background: var(--atencao); }
.ponto.morta { background: var(--erro); }

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

/*
 * Painel desligado e estado NORMAL, e nao falha: a frase e calma, na cor de atencao, e diz o
 * que acontece com a ordem (ela espera) em vez de acusar alguem.
 */
.aviso-offline {
  margin: 0;
  padding: 10px 18px;
  border-bottom: 1px solid var(--linha);
  background: rgba(251, 191, 36, 0.07);
  color: var(--atencao);
  font-size: 0.86rem;
}

.aviso-atencao {
  margin: 0;
  padding: 8px 18px;
  border-bottom: 1px solid var(--linha);
  background: rgba(251, 113, 133, 0.06);
  color: var(--erro);
}

.cabeca {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 10px;
  padding: 18px 18px 0;
}

.cabeca h2 {
  margin: 0;
  font-family: var(--titulo);
  font-size: 1.1rem;
  font-weight: 650;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.forma-renome {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 18px 0;
  align-items: center;
}

.forma-renome input { flex: 1 1 180px; }

/* --------------------------------------------------------------- controles */

.controles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding: 16px 18px 0;
}

.controles > button {
  min-height: 48px;
  font-weight: 650;
  font-size: 0.95rem;
  color: var(--roxo-claro);
  border: 1px solid var(--roxo);
  background: color-mix(in srgb, var(--roxo) 10%, transparent);
}

.controles > button:hover:not(:disabled) { background: color-mix(in srgb, var(--roxo) 20%, transparent); }

/* Ligar e a acao comum e sem custo: e a unica solida. */
.controles > button[data-verbo='servidor.iniciar'] {
  color: #fff;
  background: linear-gradient(180deg, #8B5CF6, var(--roxo));
  box-shadow: var(--relevo), 0 8px 20px -10px rgba(124, 58, 237, 0.7);
}

.controles > button[data-verbo='servidor.iniciar']:hover:not(:disabled) {
  background: linear-gradient(180deg, #9B6FF8, #8447F0);
  border-color: var(--roxo-claro);
}

/* Reiniciar derruba todo mundo por um minuto: fala em atencao. */
.controles > button[data-verbo='servidor.reiniciar'] {
  color: var(--atencao);
  border-color: color-mix(in srgb, var(--atencao) 50%, var(--borda));
  background: color-mix(in srgb, var(--atencao) 7%, transparent);
}

.controles > button[data-verbo='servidor.reiniciar']:hover:not(:disabled) {
  background: color-mix(in srgb, var(--atencao) 14%, transparent);
  border-color: var(--atencao);
}

/* Parar derruba todo mundo e nao volta sozinho: fala em falha. */
.controles > button[data-verbo='servidor.parar'] {
  color: var(--erro);
  border-color: color-mix(in srgb, var(--erro) 50%, var(--borda));
  background: color-mix(in srgb, var(--erro) 7%, transparent);
}

.controles > button[data-verbo='servidor.parar']:hover:not(:disabled) {
  background: color-mix(in srgb, var(--erro) 14%, transparent);
  border-color: var(--erro);
}

/* Armado: o primeiro toque enche o botao com a propria cor; o segundo confirma. */
.controles > button.armado,
.controles > button[data-verbo='servidor.parar'].armado {
  color: var(--preto);
  background: var(--erro);
  border-color: var(--erro);
  box-shadow: 0 0 18px rgba(251, 113, 133, 0.35);
}

.controles > button[data-verbo='servidor.reiniciar'].armado {
  background: var(--atencao);
  border-color: var(--atencao);
  box-shadow: 0 0 18px rgba(251, 191, 36, 0.35);
}

/*
 * Acoes sobre o MUNDO, e nao sobre o processo: salvar e limpar corpos nao derrubam ninguem.
 * Separadas da linha de cima e desenhadas como fichas leves, para a linha inteira nao herdar o
 * peso das mais graves. A regra fica em `.controles-mundo > button` de proposito: `.controles
 * button` vencia `.fantasma` por especificidade e os dois saiam roxos e pesados.
 */
.controles.controles-mundo {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding-top: 10px;
}

.controles-mundo > button {
  flex: none;
  min-height: 36px;
  padding: 0 14px;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--texto-fraco);
  border: 1px solid var(--borda);
  background: color-mix(in srgb, var(--elevado) 60%, transparent);
  box-shadow: var(--relevo);
}

.controles-mundo > button:hover:not(:disabled) { color: var(--texto); border-color: var(--linha-viva); background: var(--vidro-alto); }
.controles-mundo > button.armado { color: var(--preto); background: var(--atencao); border-color: var(--atencao); }

.forma-anuncio {
  display: flex;
  gap: 8px;
  padding: 14px 18px 0;
  align-items: center;
}

.forma-anuncio input { flex: 1; min-width: 0; }
.contador { color: var(--texto-tenue); flex: none; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------ forma de ajustes */

.corpo-ajustes { padding: 4px 0 0; }
.corpo-ajustes form { display: grid; gap: 16px; }

.conjunto-ajustes {
  border: 0;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 18px;
}

.conjunto-ajustes:disabled { opacity: 0.55; }

input:disabled, select:disabled, textarea:disabled { opacity: 0.6; }

/* A nota do topo: avisa que estes campos so valem no proximo boot do servidor. */
.nota-ajustes {
  margin: 0;
  padding: 11px 14px;
  color: var(--texto-fraco);
  font-size: 0.84rem;
  border: 1px solid color-mix(in srgb, var(--roxo) 22%, transparent);
  border-left: 3px solid var(--roxo);
  border-radius: var(--raio-p);
  background: color-mix(in srgb, var(--roxo) 7%, transparent);
}

/* Cada grupo e um CARTAO. A faixa da esquerda acende quando o ponteiro chega. */
.grupo-ajustes {
  display: grid;
  gap: 11px;
  padding: 16px 18px;
  border: 1px solid var(--borda);
  border-left: 2px solid var(--linha);
  border-radius: var(--raio-m);
  background: var(--vidro);
  box-shadow: var(--relevo);
  transition:
    border-color var(--t-rapido) var(--entrada),
    background var(--t-rapido) var(--entrada);
  animation: surgir-acima var(--t-medio) var(--saida) both;
}

.grupo-ajustes:hover,
.grupo-ajustes:focus-within {
  border-left-color: var(--roxo);
  background: var(--vidro-alto);
}

/* O titulo ganha um tracinho a esquerda: ancora para o olho descer a lista de secoes. */
.grupo-ajustes h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--roxo-claro);
  font-family: var(--maquina);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.grupo-ajustes h4::before {
  content: '';
  flex: none;
  width: 14px;
  height: 2px;
  border-radius: var(--raio-pilula);
  background: var(--roxo);
  transition: width var(--t-medio) var(--saida);
}

.grupo-ajustes:focus-within h4::before { width: 26px; }

.conjunto-ajustes > .grupo-ajustes:nth-child(1) { animation-delay: 0ms; }
.conjunto-ajustes > .grupo-ajustes:nth-child(2) { animation-delay: 40ms; }
.conjunto-ajustes > .grupo-ajustes:nth-child(3) { animation-delay: 80ms; }
.conjunto-ajustes > .grupo-ajustes:nth-child(4) { animation-delay: 120ms; }
.conjunto-ajustes > .grupo-ajustes:nth-child(n + 5) { animation-delay: 150ms; }

.campo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 4px 12px;
  align-items: center;
}

.campo > label { font-size: 0.9rem; color: var(--texto); }
.campo .erro-campo { grid-column: 1 / -1; }

.campo-admins { display: grid; gap: 6px; }
.campo-admins textarea { min-height: 96px; resize: vertical; }
.ajuda-campo { margin: 0; color: var(--texto-fraco); font-size: 0.8rem; }

.rodape-ajustes { display: grid; gap: 8px; }

@media (max-width: 600px) {
  .controles { grid-template-columns: 1fr; }
  .controles > button { min-height: 46px; }
}