/* ══════════════════════════════════════════════════════════
   Telas fora da shell: login e instalação.
   Reaproveita as variáveis e os blocos de aviso do app.css.
   ══════════════════════════════════════════════════════════ */

body.tela-acesso{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:40px 20px;background:var(--papel-2);
}

.cartao-acesso{
  width:100%;max-width:420px;background:var(--branco);
  border:1px solid var(--linha);border-radius:6px;padding:34px 32px 30px;
  box-shadow:0 18px 48px rgba(22,9,31,.10);
}
.cartao-acesso.largo{max-width:660px}

.cartao-acesso .marca{display:flex;align-items:center;gap:13px;margin-bottom:24px}
.cartao-acesso .marca .reg{
  font-family:var(--fm);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tinta-3);margin:0 0 3px;
}
.cartao-acesso h1{
  font-family:var(--fd);font-weight:800;font-size:20px;letter-spacing:-.01em;
  color:var(--tinta);margin:0;line-height:1.2;
}
.cartao-acesso h2{
  font-family:var(--fd);font-weight:700;font-size:12px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--tinta-3);
  margin:26px 0 12px;padding-bottom:7px;border-bottom:1px solid var(--linha);
}
.cartao-acesso h2:first-of-type{margin-top:6px}
.cartao-acesso .sub{font-size:13px;color:var(--tinta-2);line-height:1.55;margin:0 0 20px}

.form-acesso .field{display:block;margin-bottom:14px;width:100%}
.form-acesso .field span{
  display:block;font-family:var(--fm);font-size:10.5px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--tinta-3);margin-bottom:5px;
}
.form-acesso .field input,
.form-acesso .field select{
  width:100%;padding:10px 12px;font-size:14px;font-family:var(--fi);
  border:1px solid var(--linha-2);border-radius:4px;background:var(--papel);
  color:var(--tinta);
}
.form-acesso .field input:focus,
.form-acesso .field select:focus{
  outline:none;border-color:var(--roxo);box-shadow:0 0 0 3px var(--roxo-wash);
}
.form-acesso .btn{width:100%;justify-content:center;margin-top:8px;padding:11px 18px;font-size:14px}

.cartao-acesso .check{
  display:flex;gap:10px;align-items:flex-start;font-size:13px;
  color:var(--tinta-2);line-height:1.55;margin-bottom:12px;
}
.cartao-acesso .check input{margin-top:3px;flex:0 0 auto}
.cartao-acesso .nota{font-size:12px;color:var(--tinta-3);line-height:1.55;margin:0 0 18px}
.cartao-acesso code{
  font-family:var(--fm);font-size:.92em;background:var(--papel-2);
  padding:1px 5px;border-radius:3px;
}

.lista-passos{list-style:none;margin:18px 0;padding:0}
.lista-passos li{
  position:relative;padding:8px 0 8px 26px;font-size:13px;
  color:var(--tinta-2);line-height:1.5;border-bottom:1px solid var(--linha);
}
.lista-passos li:before{
  content:'✓';position:absolute;left:0;top:8px;
  font-family:var(--fm);font-weight:600;color:var(--ok);
}
.lista-passos li.aviso:before{content:'!';color:var(--pend)}

.cartao-acesso .acoes{display:flex;gap:10px;margin:22px 0 0}
.cartao-acesso .acoes .btn{flex:1;justify-content:center}

.rodape-acesso{
  margin-top:22px;padding-top:16px;border-top:1px solid var(--linha);
  font-size:11.5px;color:var(--tinta-3);line-height:1.6;
}
.rodape-acesso a{color:var(--roxo);text-decoration:none}
.rodape-acesso a:hover{text-decoration:underline}

.cartao-acesso .warn,
.cartao-acesso .block,
.cartao-acesso .good,
.cartao-acesso .info{margin-bottom:18px}

@media (max-width:520px){
  .cartao-acesso{padding:26px 20px 24px}
  .cartao-acesso .acoes{flex-direction:column}
}