/* ==========================================================================
   ChatISP: /seguranca

   So o que e EXCLUSIVO desta pagina. A capa, a trilha, os passos, a dupla,
   as especificacoes, a tabela, as relacionadas e a chamada vivem em
   css/pagina.css; grade, cartao, selo, aviso e lista-marcada vivem em
   css/site.css; a secao reaproveitada da home traz o proprio
   css/sec-seguranca.css.

   Tres pecas proprias, e so elas:
     .chaveiro     maquete do perfil de acesso, no painel da capa
     .credenciais  o <code> dentro da tabela de credenciais
     .pagina-seguranca  ajuste de contexto na secao reaproveitada da home

   Nenhum valor escrito a mao: so var().
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Chaveiro de permissoes (capa)

   A maquete mora dentro do .capa-painel, que ja e a moldura de vidro: aqui
   nao ha segunda caixa: so o ritmo interno e os dois fios de divisao. A
   leitura e a de uma tela de perfil: grupo, permissao, estado.
   -------------------------------------------------------------------------- */

.chaveiro {
  display: grid;
  gap: var(--e5);
}

.chaveiro-topo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e3);
  padding-bottom: var(--e4);
  border-bottom: 1px solid var(--borda);
}

.chaveiro-rotulo {
  /* --titulo e a FAMILIA tipografica, nunca uma cor. A tinta vem de --texto. */
  font-family: var(--titulo);
  font-size: var(--c2);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk3);
  color: var(--texto);
}

.chaveiro-grupos {
  display: grid;
  gap: var(--e5);
}

.chaveiro-grupo {
  display: grid;
  gap: var(--e2);
}

.chaveiro-nome {
  margin-bottom: var(--e1);
  font-size: var(--c5);
  font-weight: var(--p-forte);
  letter-spacing: var(--tk-largo);
  text-transform: uppercase;
  color: var(--verde);
}

.chaveiro-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e3);
  padding: var(--e2) var(--e3);
  border: 1px solid var(--borda);
  border-radius: var(--r-sm);
  background: var(--sup-2);
  font-size: var(--c4);
  line-height: 1.5;
  color: var(--suave);
}

/* O estado e o unico dado da maquete, e a paleta so tem verde: anel vazio
   para a caixa nao marcada, disco cheio para a marcada. Nada de vermelho:
   uma permissao desligada nao e um erro, e uma decisao. */
.chaveiro-marca {
  width: var(--e4);
  height: var(--e4);
  border: 1px solid var(--borda-forte);
  border-radius: var(--r-full);
}

.chaveiro-item--ligado {
  border-color: var(--verde-linha);
  background: var(--verde-vidro);
  color: var(--texto);
}

.chaveiro-item--ligado .chaveiro-marca {
  border-color: var(--verde);
  background: var(--verde);
}

.chaveiro-rodape {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e2) var(--e5);
  margin: 0;
  padding-top: var(--e4);
  border-top: 1px solid var(--borda);
  font-size: var(--c5);
  letter-spacing: var(--tk-largo);
  text-transform: uppercase;
  color: var(--tenue);
}

/* --------------------------------------------------------------------------
   02. Tabela das credenciais

   A tabela inteira vem de .comparativo (css/pagina.css). O que falta la e o
   <code>: fora da .prosa ele sai no monoespacado cru do navegador, maior que
   o texto ao redor e sem nenhuma marca de que e um cabecalho de protocolo.
   -------------------------------------------------------------------------- */

.credenciais code {
  padding: var(--e1) var(--e2);
  border: 1px solid var(--borda);
  border-radius: var(--r-sm);
  background: var(--sup-1);
  font-family: var(--mono);
  font-size: var(--corpo-mono);
  color: var(--verde);
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   03. Secao reaproveitada da home

   componentes/seguranca.php e a secao 07 da home e carrega o numero no
   sobretitulo. Numa pagina interna nao existe uma secao 07: o numero viraria
   enigma. Mesma solucao de css/pag-planos.css: o componente nao e tocado.
   -------------------------------------------------------------------------- */

.pagina-seguranca .secao-seguranca .sobretitulo b {
  display: none;
}

/* --------------------------------------------------------------------------
   04. Responsivo
   -------------------------------------------------------------------------- */

@media (max-width: 680px) {
  /* No celular o rotulo da permissao ja ocupa duas linhas; com o disco de
     estado na mesma linha sobrariam tres palavras por linha. O estado sobe
     para cima do rotulo e a linha volta a ser legivel. */
  .chaveiro-item {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--e2);
  }

  .chaveiro-marca {
    grid-row: 1;
  }
}