/* Mensagens de conexão e formulários de recuperação, comuns às três telas. */
.protecao-campo > label {
  display: block;
  margin-bottom: 5px;
}
.protecao-campo > input,
.protecao-campo > select {
  width: 100%;
}
/* Apresenta o estado de visibilidade ou indisponibilidade do controle. */
[hidden] {
  display: none !important;
}
/* Define a apresentação, cores e espaçamento deste componente. */
#painel-backups {
  grid-column: 1/-1;
  padding: 18px;
  border-top: 1px solid #536157;
}
/* Define a apresentação, cores e espaçamento deste componente. */
#estado-conexao {
  position: fixed;
  bottom: 6px;
  left: 8px;
  z-index: 100;
  font:
    10px/1.3 Arial,
    sans-serif;
  padding: 5px 9px;
  background: #121c18e8;
  border: 1px solid #3a6554;
  color: #abcfbd;
  max-width: calc(100vw - 16px);
  pointer-events: none;
}
/* Define a apresentação, cores e espaçamento deste componente. */
#estado-conexao.conexao-erro {
  border-color: #bf8940;
  color: #f1d296;
}
/* Define a apresentação, cores e espaçamento deste componente. */
.protecao-form {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid #536157;
  background: #101610;
  margin: 10px 0;
}
.protecao-form input,
/* Mantém legibilidade e dimensões dos campos de entrada. */
.protecao-form select {
  max-width: 100%;
  background: #1c241e;
  border: 1px solid #536157;
  padding: 8px;
  color: #f0ebd9;
}
/* Apresenta o comando interativo e seu estado visual. */
.protecao-form button {
  padding: 9px;
  border: 1px solid #79958d;
  background: #23342e;
  color: #b5edf1;
  cursor: pointer;
}
/* Define a apresentação, cores e espaçamento deste componente. */
.protecao-nota {
  font-size: 11px;
  color: #b9c5b1;
}
/* Define a apresentação, cores e espaçamento deste componente. */
.efeito-linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
  border-top: 1px solid #3e5145;
  padding: 9px 0;
}
/* Define a apresentação, cores e espaçamento deste componente. */
.efeito-linha label {
  font-size: 11px;
}
.efeito-linha input,
/* Mantém legibilidade e dimensões dos campos de entrada. */
.efeito-linha select {
  width: 100%;
}