/* Telas de acesso: login e troca de senha. Depende dos tokens de sistema.css. */

body.tela-acesso{background:var(--co-950); min-height:100vh}

.acesso{display:grid; grid-template-columns:1.05fr 1fr; min-height:100vh}

/* ---------------------------------------------------------------------
   Painel de marca
   --------------------------------------------------------------------- */
.acesso-marca{
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(900px 420px at 12% 8%, rgba(75,135,232,.30), transparent 62%),
    radial-gradient(700px 500px at 88% 92%, rgba(0,71,171,.42), transparent 60%),
    linear-gradient(160deg,var(--co-950) 0%,var(--co-800) 52%,var(--co-700) 100%);
  display:flex; flex-direction:column; justify-content:space-between;
  padding:clamp(32px,5vw,64px);
}
/* Malha sutil: dá textura sem competir com o texto. */
.acesso-marca::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(70% 60% at 50% 40%, #000 30%, transparent 100%);
}
.am-conteudo{position:relative; max-width:460px}
.am-selo{
  width:56px; height:56px; border-radius:17px; display:grid; place-items:center;
  background:linear-gradient(145deg,var(--co-400),var(--co-600));
  box-shadow:0 10px 30px rgba(0,71,171,.45); margin-bottom:26px;
}
.am-selo svg{width:29px; height:29px; stroke:#fff; fill:none; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round}
.acesso-marca h1{margin:0; font-size:clamp(30px,3.6vw,42px); font-weight:700; letter-spacing:-.025em}
.am-sub{margin:6px 0 24px; font-size:16px; color:var(--co-200); font-weight:500}
.am-txt{margin:0 0 28px; font-size:14.5px; line-height:1.7; color:rgba(255,255,255,.78)}
.am-txt code{background:rgba(255,255,255,.12); padding:2px 7px; border-radius:5px; font-size:13px}
.am-lista{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:13px}
.am-lista li{display:flex; align-items:center; gap:12px; font-size:14px; color:rgba(255,255,255,.86)}
.am-lista li span{
  width:7px; height:7px; border-radius:50%; flex:0 0 7px; background:var(--co-300);
  box-shadow:0 0 0 4px rgba(75,135,232,.20);
}
.am-rodape{position:relative; font-size:12.5px; color:rgba(255,255,255,.45); letter-spacing:.03em}

/* ---------------------------------------------------------------------
   Formulario
   --------------------------------------------------------------------- */
.acesso-form{
  background:var(--card); display:grid; place-items:center;
  padding:clamp(24px,4vw,56px);
}
.af-caixa{width:100%; max-width:388px}
.af-caixa h2{margin:0; font-size:25px; font-weight:700; letter-spacing:-.02em}
.af-sub{margin:7px 0 30px; color:var(--tinta2); font-size:14px}

.af-caixa .campo{margin-bottom:17px}
.af-caixa .campo input{padding:11px 13px; font-size:14.5px}

.campo-senha{position:relative}
.campo-senha input{padding-right:44px}
.olho{
  position:absolute; right:5px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border:0; background:transparent; cursor:pointer;
  display:grid; place-items:center; color:var(--tinta3); border-radius:var(--r-sm);
}
.olho:hover{color:var(--co-500); background:var(--co-50)}
.olho svg{width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.8}
.olho.aberto svg{stroke:var(--co-500)}

.af-entrar{width:100%; justify-content:center; padding:12px; font-size:14.5px; margin-top:6px}
.af-entrar .rot{display:inline-flex; align-items:center; gap:9px}

.af-ajuda{
  margin:26px 0 0; padding-top:20px; border-top:1px solid var(--linha);
  font-size:12.5px; color:var(--tinta3); line-height:1.65;
}

/* Regras da senha, na tela de troca */
.regras{list-style:none; margin:4px 0 18px; padding:0; display:flex; flex-direction:column; gap:7px}
.regras li{display:flex; align-items:center; gap:9px; font-size:12.5px; color:var(--tinta3)}
.regras li::before{
  content:""; width:15px; height:15px; border-radius:50%; flex:0 0 15px;
  border:1.5px solid var(--linha-forte); background:var(--card);
}
.regras li.ok{color:var(--positivo)}
.regras li.ok::before{
  border-color:var(--positivo); background:var(--positivo);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
  background-size:11px; background-position:center; background-repeat:no-repeat;
}

@media (max-width:900px){
  .acesso{grid-template-columns:1fr}
  .acesso-marca{padding:36px 28px 30px}
  .am-txt,.am-lista,.am-rodape{display:none}
  .am-selo{width:46px; height:46px; margin-bottom:18px}
  .acesso-form{padding:32px 24px 48px}
}
@media (max-width:640px){
  .acesso-form{padding:24px 16px;align-items:flex-start}
  .af-caixa{max-width:none}
  .af-caixa .campo input{font-size:16px;min-height:48px}
  .af-entrar{min-height:48px}
}