/* ══════════════════════════════════════════════════════════════
   PROMETHEUS // PAINEL DE VOZ (Configurações)
   O estado tem que ser legível de relance: verde = falando bonito,
   cinza = voz do navegador.
   ══════════════════════════════════════════════════════════════ */

#painelVoz label { display: block; margin-top: 14px; }
#painelVoz input, #painelVoz select { width: 100%; margin-top: 6px; }

.voz-estado {
  margin: 10px 0 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  background: rgba(3, 6, 12, .7);
  font-size: 11px; letter-spacing: .1em;
  color: #7fb3c8;
}
.voz-estado.ok  { border-color: rgba(57, 230, 163, .45); color: #39e6a3; }
.voz-estado.off { border-color: rgba(0, 212, 255, .18); color: #5f8ba1; }
.voz-alerta { color: #ffc857; font-weight: 700; letter-spacing: .06em; }

.voz-nota {
  color: #5f8ba1; font-size: 10.5px; line-height: 1.6;
  margin: 8px 0 2px; border-left: 2px solid var(--line2); padding-left: 10px;
}
.voz-nota b { color: #a8d8ea; }

.voz-botoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.voz-botoes button { flex: 1 1 auto; min-width: 132px; padding: 11px 14px; font-size: 11px; }
.voz-perigo { border-color: rgba(255, 83, 110, .4); color: #ff8ba0; }
.voz-perigo:hover { border-color: rgba(255, 83, 110, .85); background: rgba(255, 83, 110, .08); }

.voz-aviso {
  margin-top: 12px; min-height: 18px;
  font-size: 11px; letter-spacing: .06em; color: #7fb3c8;
}
.voz-aviso.ok     { color: #39e6a3; }
.voz-aviso.alerta { color: #ffc857; }
.voz-aviso.erro   { color: #ff8ba0; }

/* no celular os botões viram uma coluna: alvo grande, sem aperto */
@media (max-width: 820px) {
  #painelVoz { grid-column: 1 / -1 !important; }
  .voz-botoes { flex-direction: column; }
  .voz-botoes button { width: 100%; min-height: 48px; }
}