/* A pagina que ensina um tablet (ou outro computador) a instalar o
   certificado do ponto. Quem abre isto e a administracao, com o tablet na
   mao: tudo grande, um passo por linha, e a propria pagina confere se deu
   certo.

   Mora num arquivo, e nao dentro da pagina, por causa da regra de seguranca
   do navegador (Content-Security-Policy), que so aceita estilo e script que
   vem de arquivo deste proprio sistema. */
body.cert { margin: 0; background: var(--papel); color: var(--tinta); font-family: var(--fonte); }
.cert-folha { max-width: 640px; margin: 0 auto; padding: 28px 20px 56px; }
.cert-topo { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.cert-topo img { width: 118px; height: auto; }
.cert-topo h1 {
  margin: 0; font-family: var(--fonte-titulo); font-size: var(--t-titulo);
  font-weight: 600; color: var(--marinho); text-wrap: balance;
}
.cert-intro { margin: 0 0 20px; font-size: var(--t-corpo); line-height: 1.6; color: var(--tinta-suave); }

.cert-situacao {
  display: flex; flex-direction: column; gap: 8px;
  margin-bottom: 20px; padding: 16px 18px;
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); box-shadow: var(--sombra);
}
.cert-situacao.ok { background: var(--verde-suave); border-color: rgba(47, 122, 74, .35); }
.cert-situacao.falta { background: var(--dourado-suave); border-color: rgba(180, 83, 9, .35); }
.cert-situacao b { font-size: 17px; }
.cert-situacao p { margin: 0; line-height: 1.55; }

.cert-bloco {
  margin-bottom: 18px; padding: 20px 18px;
  background: var(--superficie); border: 1px solid var(--linha);
  border-radius: var(--raio); box-shadow: var(--sombra);
}
.cert-bloco h2 { margin: 0 0 4px; font-family: var(--fonte-titulo); font-size: var(--t-titulo-p); color: var(--marinho); }

.cert-abas { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 18px; }
.cert-aba {
  min-height: 42px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--linha-forte); background: var(--superficie);
  color: var(--tinta); font: 500 15px var(--fonte); cursor: pointer;
}
.cert-aba[aria-selected="true"] { background: var(--marinho); border-color: var(--marinho); color: #fff; }

.cert-passos { margin: 0; padding: 0; list-style: none; counter-reset: passo; display: flex; flex-direction: column; gap: 14px; }
.cert-passos[hidden] { display: none; }
.cert-passos li { counter-increment: passo; position: relative; padding: 3px 0 0 42px; font-size: var(--t-corpo); line-height: 1.6; }
.cert-passos li::before {
  content: counter(passo); position: absolute; left: 0; top: 0;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--marinho-suave); color: var(--marinho);
  font: 700 14px var(--fonte-numero);
}

.cert-nota { margin: 14px 0 0; font-size: var(--t-base); line-height: 1.55; color: var(--tinta-suave); }
.cert-nota.primeira { margin-top: 0; }
.cert-nome { font-weight: 600; color: var(--tinta); }
.cert-acoes { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.cert-endereco-linha { margin: 12px 0 0; }

.cert-botao {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 22px; border-radius: var(--raio-p);
  border: 0; background: var(--marinho); color: #fff;
  font: 600 16px var(--fonte); text-decoration: none; cursor: pointer;
}
.cert-botao.claro { background: var(--superficie); color: var(--marinho); border: 1px solid var(--linha-forte); }
.cert-botao:focus-visible, .cert-aba:focus-visible { outline: 3px solid var(--k-laca, var(--marinho-claro)); outline-offset: 2px; }

code.cert-endereco {
  font-family: var(--mono); font-size: 14px; word-break: break-all;
  padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, .7);
}

/* a pagina de autorizar aparelho usa esta mesma folha */
.autorizar-form { margin-top: 16px; }
.autorizar-rotulo { display: block; margin-bottom: 8px; font-weight: 600; color: var(--tinta); }
.autorizar-codigo {
  width: 100%; max-width: 360px; box-sizing: border-box;
  padding: 14px 16px; border-radius: var(--raio-p);
  border: 1px solid var(--linha-forte); background: var(--superficie);
  font: 700 26px var(--mono); letter-spacing: 4px; text-transform: uppercase; color: var(--marinho);
}
.autorizar-codigo:focus { outline: 3px solid var(--k-laca, var(--marinho-claro)); outline-offset: 2px; }
.autorizar-form .alerta { margin-top: 12px; }

@media (max-width: 480px) {
  .cert-topo { flex-direction: column; align-items: flex-start; gap: 10px; }
}