/* AS PÁGINAS DE ENTRADA DO TRACKTOR — entrar, recuperar o acesso, e o ecrã de
   abertura. É o entrar.css do Payflow (o «auth split» da Kingdom Library) com a
   voz em azul: à esquerda o painel da marca, à direita o formulário, dentro de
   um cartão no computador e solto sobre o fundo claro no telemóvel. */


.en{min-height:100svh; display:grid; grid-template-columns:minmax(0,1fr); align-content:start;
  background:var(--canvas); color:var(--ink); font-family:var(--font);
  font-size:15px; line-height:1.5; -webkit-font-smoothing:antialiased}
@media(min-width:940px){ .en{grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-content:stretch} }
/* No telemóvel o fundo é o mais claro do checkout, para os campos brancos não
   saltarem dele. No computador fica a pedra: lá os campos vivem num cartão. */
@media(max-width:939px){ .en{background:var(--surface-2)} }
.en *{box-sizing:border-box}
.en h1,.en h2,.en p{margin:0}

/* ---- o painel da marca ---- */
.en-marca{position:relative; isolation:isolate; overflow:hidden;
  margin:10px 10px 0; padding:20px 20px 24px; border-radius:var(--r-cartao);
  background:var(--painel-marca); color:#FFF; display:flex; flex-direction:column; gap:22px}
@media(min-width:940px){
  .en-marca{margin:14px; padding:40px 44px 34px; min-height:calc(100svh - 28px); gap:0}
}
.en-topo{display:flex; align-items:center; gap:10px; font-size:17px; font-weight:500}
/* Sobre o azul vai o ícone de fundo azul com a sombra, como no ficheiro do logo. */
.en-logo{width:34px; height:34px; flex:none; display:block; box-shadow:0 4px 14px -6px rgba(0,40,100,.45);
  border-radius:9px}
.en-dizer{max-width:30rem}
@media(min-width:940px){ .en-dizer{margin:auto 0} }
.en-dizer h2{font-size:clamp(24px,3.1vw,36px); font-weight:500; letter-spacing:-.025em; line-height:1.15;
  max-width:17em}
/* O browser parte a linha depois de um hífen, e «palavra-passe» ficava partida
   ao meio num título de três palavras. */
.en-dizer .junto{white-space:nowrap}
.en-dizer p{margin-top:14px; font-size:15px; line-height:1.6; color:rgba(255,255,255,.86); max-width:38ch}
.en-pe{font-size:12.5px; color:rgba(255,255,255,.72)}
@media(max-width:939px){ .en-pe,.en-folhas{display:none} }

/* As três folhas inclinadas da Library, aqui com o que o Tracktor faz: uma
   publicação agendada, um lead quente, uma conversa por responder. São exemplos
   e não são de ninguém. Só no computador: no telemóvel roubavam o espaço do
   formulário. */
.en-folhas{position:relative; height:220px; margin:36px 0 8px}
.en-folha{position:absolute; width:236px; padding:14px 16px; border-radius:var(--r-dentro);
  background:#FFF; color:var(--ink); box-shadow:0 18px 40px -18px rgba(0,30,80,.55);
  font-size:13px; line-height:1.4}
.en-folha:nth-child(1){left:0; top:28px; transform:rotate(-5deg)}
.en-folha:nth-child(2){left:170px; top:0; transform:rotate(3deg); z-index:1}
.en-folha:nth-child(3){left:84px; top:118px; transform:rotate(-1.5deg); z-index:2}
.en-folha .r{color:var(--muted); font-size:12.5px}
.en-folha .v{display:block; margin-top:4px; font-size:19px; font-weight:500; letter-spacing:-.015em;
  font-variant-numeric:tabular-nums}
.en-folha .p{display:inline-flex; align-items:center; height:22px; margin-top:8px; padding:0 9px;
  border-radius:var(--r-pilula); font-size:12px; font-weight:500}
.en-folha .p.ok{background:var(--verde-soft); color:var(--verde-ink)}
.en-folha .p.pend{background:var(--ambar-soft); color:var(--ambar-ink)}
.en-folha .p.neutro{background:var(--sunken); color:var(--ink-2)}
@media(min-width:940px) and (max-height:760px){ .en-folhas{display:none} }

/* ---- o formulário ---- */
.en-lado{display:grid; place-items:start center; padding:26px 16px 40px}
@media(min-width:940px){ .en-lado{place-items:center; padding:40px 48px} }
.en-cartao{width:100%; max-width:420px}
@media(min-width:940px){
  .en-cartao{padding:34px 32px 30px; border:1px solid var(--line); border-radius:var(--r-cartao);
    background:var(--card-bg); box-shadow:var(--shadow-1)}
}
.en-voltar{display:inline-flex; align-items:center; gap:6px; margin-bottom:20px; min-height:24px;
  font-size:14px; color:var(--muted); text-decoration:none}
.en-voltar:hover{color:var(--ink)}
.en-voltar svg{width:16px; height:16px}
.en-cartao h1{font-size:24px; font-weight:500; letter-spacing:-.02em; line-height:1.2}
.en-sub{margin-top:6px !important; font-size:15px; color:var(--muted); line-height:1.55}
.en-sub b{color:var(--ink); font-weight:500; word-break:break-all}
.en-campos{display:grid; gap:16px; margin-top:24px}
.en-campo{display:grid; gap:6px}
.en-campo label{font-size:13.5px; font-weight:500; color:var(--ink-2)}
.en-campo input{width:100%; height:46px; padding:0 14px; font:inherit; font-size:15px;
  color:var(--ink); background:var(--surface); border:1px solid var(--line-strong);
  border-radius:var(--r-campo); transition:border-color .15s, box-shadow .15s}
.en-campo input::placeholder{color:var(--faint)}
.en-campo input:focus{outline:none; border-color:var(--azul-500); box-shadow:var(--ring)}
.en-campo input[aria-invalid="true"]{border-color:var(--vermelho)}
/* Abaixo de 16px o iPhone amplia a página sozinho ao tocar no campo, e fica
   ampliado no ecrã seguinte. */
@media(pointer:coarse){ .en-campo input{font-size:16px} }
.en-ajuda{font-size:12.5px; color:var(--muted); line-height:1.45}

.en-linha{display:flex; align-items:center; justify-content:space-between; gap:10px 14px; flex-wrap:wrap}
.en-lembrar{display:flex; align-items:center; gap:9px; font-size:14px; color:var(--ink-2); cursor:pointer}
.en-lembrar input{appearance:none; -webkit-appearance:none; width:18px; height:18px; flex:none; margin:0;
  border:1.5px solid var(--line-strong); border-radius:var(--r-chip); background:var(--surface);
  cursor:pointer; position:relative}
.en-lembrar input:checked{background:var(--azul-500); border-color:var(--azul-500)}
.en-lembrar input:checked::after{content:""; position:absolute; left:5px; top:1.5px; width:4.5px; height:9px;
  border:solid #FFF; border-width:0 2px 2px 0; transform:rotate(43deg)}
.en-lembrar input:focus-visible{outline:none; box-shadow:var(--ring)}
.en-elo{font:inherit; font-size:14px; font-weight:500; color:var(--azul-ink); background:none; border:0; padding:0;
  cursor:pointer; text-decoration:none}
.en-elo:hover{text-decoration:underline; text-underline-offset:3px}
.en-elo:focus-visible{outline:none; box-shadow:var(--ring); border-radius:4px}
/* 24 px de alvo, o mínimo do WCAG 2.2 para um toque (auditoria final, B4). */
.en-elo{display:inline-flex; align-items:center; min-height:24px}

/* Um só botão principal por ecrã: o azul. */
.en-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:48px;
  padding:0 20px; font:inherit; font-size:15.5px; font-weight:500; cursor:pointer;
  border-radius:var(--r-pilula); border:1px solid var(--line-strong); background:var(--surface); color:var(--ink);
  transition:background .15s, border-color .15s}
.en-btn:hover{border-color:var(--faint)}
.en-btn-p{border:0; background:var(--cta); color:#FFF; box-shadow:var(--cta-shadow)}
.en-btn-p:hover{background:var(--cta-hover)}
.en-btn:focus-visible{outline:none; box-shadow:var(--ring)}
.en-btn:disabled{opacity:.6; cursor:not-allowed}
.en-btn .roda{width:17px; height:17px; opacity:.9}

.en-erro,.en-feito{border-radius:var(--r-dentro); padding:12px 14px; font-size:14px; line-height:1.5}
.en-erro{background:var(--vermelho-soft); color:var(--vermelho-ink)}
.en-feito{background:var(--verde-soft); color:var(--verde-ink)}
.en-nota{margin-top:22px !important; font-size:13.5px; color:var(--muted); line-height:1.55; text-align:center}
.en-nota b{color:var(--ink-2); font-weight:500}

/* Os passos do recuperar. */
.en-passos{display:grid; gap:12px; margin:24px 0 0; padding:20px 0 0; border-top:1px solid var(--line); list-style:none}
.en-passos li{display:grid; grid-template-columns:24px minmax(0,1fr); gap:12px; align-items:start;
  font-size:14px; color:var(--muted); line-height:1.5}
.en-passos .i{width:24px; height:24px; border-radius:50%; background:var(--sunken); color:var(--ink-2);
  font-size:12px; font-weight:500; display:grid; place-items:center; font-variant-numeric:tabular-nums}

/* A força da palavra-passe. */
.en-forca{display:flex; gap:4px; margin-top:2px}
.en-forca span{height:4px; flex:1; border-radius:2px; background:var(--line)}
.en-forca span.on{background:var(--azul-400)}
.en-forca span.bom{background:var(--verde)}

/* ---- o ecrã de abertura, entre o F5 e o Tracktor desenhado ---- */
.en-abrir{min-height:100svh; display:grid; place-content:center; justify-items:center; gap:14px;
  background:var(--canvas); color:var(--muted); font-family:var(--font); font-size:14px}
.en-abrir img{width:48px; height:48px; display:block}
.en-abrir .roda{width:20px; height:20px; border-width:2.5px; opacity:.45; color:var(--azul-500)}