/* Tela de acesso do cliente (/entrar), na identidade da landing v8: azul-marinho, dourado e Manrope.
   Celular: logo e formulário. Computador: painel azul com a marca à esquerda e o formulário à direita. */
body.entrar{margin:0;min-height:100dvh;background:var(--cd-canvas);color:var(--cd-text);font-family:var(--cd-font-body)}
.en{display:grid;min-height:100dvh}
.en-marca{display:none}
.en-lado{display:grid;align-content:center;justify-items:center;gap:22px;padding:calc(28px + env(safe-area-inset-top,0px)) 20px calc(28px + env(safe-area-inset-bottom,0px))}
.en-logo img{display:block;height:32px;width:auto}
.en-cartao-form{width:min(420px,100%);box-sizing:border-box;padding:28px 24px 24px;border-radius:24px;background:var(--cd-white);border:1px solid var(--cd-border);box-shadow:0 1px 2px rgba(17,45,78,.07),0 20px 38px -22px rgba(17,45,78,.38)}
.en-cartao-form h1{margin:0;font-size:1.5rem;font-weight:800;letter-spacing:-.02em;color:var(--cd-navy)}
.en-sub{margin:6px 0 22px;color:var(--cd-muted);font-size:.9375rem;line-height:1.45}
#formEntrar{display:grid;gap:16px}
.en-label{font-weight:800;font-size:.875rem;color:var(--cd-navy)}
.en-label-linha{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.en-link{border:0;background:none;padding:0;font:inherit;font-weight:700;font-size:.8125rem;color:var(--cd-blue);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.en-campo{position:relative;display:flex;align-items:center}
.en-campo input{min-height:52px;font-size:1rem}
.en-ddi{position:absolute;left:14px;font-weight:800;color:var(--cd-muted);pointer-events:none}
#whatsapp{padding-left:52px}
#senha{padding-right:52px}
.en-olho{position:absolute;right:6px;width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:10px;background:none;color:var(--cd-muted);cursor:pointer}
.en-olho svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.en-olho[aria-pressed=true]{color:var(--cd-navy);background:var(--cd-surface-tint)}
.en-erro{margin:-4px 0 0;padding:10px 12px;border-radius:12px;background:var(--cd-danger-soft);color:var(--cd-danger);font-size:.875rem;font-weight:600}
.en-entrar{width:100%;min-height:54px;font-size:1.0625rem;margin-top:4px}
.en-entrar svg,.en-aviso-zap svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.en-aviso-zap svg{stroke:none}
.en-ou{display:flex;align-items:center;gap:12px;margin:18px 0;color:var(--cd-subtle);font-size:.8125rem;font-weight:700}
.en-ou::before,.en-ou::after{content:"";flex:1;height:1px;background:var(--cd-border)}
.en-primeiro{width:100%;min-height:50px}
.en-novo{margin:0;text-align:center;color:var(--cd-muted);font-size:.875rem;line-height:1.5}
.en-novo a{color:var(--cd-navy);font-weight:800;text-underline-offset:3px}

/* Aviso */
.en-aviso{width:min(400px,calc(100% - 32px));padding:0;border:0;border-radius:24px;background:var(--cd-white);box-shadow:0 30px 70px rgba(8,26,46,.35)}
.en-aviso::backdrop{background:rgba(8,26,46,.6);backdrop-filter:blur(4px)}
.en-aviso-corpo{display:grid;gap:12px;justify-items:center;text-align:center;padding:28px 24px 20px}
.en-aviso-icone{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--cd-yellow-soft);color:var(--cd-yellow-edge)}
.en-aviso-icone svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.en-aviso h2{margin:0;font-size:1.25rem;font-weight:800;color:var(--cd-navy)}
.en-aviso p{margin:0;color:var(--cd-muted);font-size:.9375rem;line-height:1.5}
.en-aviso-zap{width:100%;margin-top:6px}

/* Computador: painel azul com grade fina (o mesmo fundo do kit na landing) e o formulário ao lado. */
@media (min-width:900px){
 .en{grid-template-columns:minmax(0,1fr) minmax(460px,1fr)}
 .en-marca{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;gap:32px;padding:48px 56px;background:#0B223D;color:var(--cd-on-navy-muted)}
 .en-marca::before{content:"";position:absolute;inset:0;z-index:-1;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:44px 44px;-webkit-mask-image:radial-gradient(80% 80% at 60% 40%,#000 20%,transparent 80%);mask-image:radial-gradient(80% 80% at 60% 40%,#000 20%,transparent 80%)}
 .en-marca::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(46% 60% at 78% 78%,rgba(244,196,78,.12),transparent 70%),radial-gradient(60% 60% at 100% 0%,rgba(43,108,176,.16),transparent 60%)}
 .en-logo-claro{height:34px;width:auto;align-self:flex-start}
 .en-boas-vindas{margin-block:auto}
 .en-rotulo{margin:0 0 12px;display:flex;align-items:center;gap:10px;color:var(--cd-yellow);font-size:.75rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
 .en-rotulo::before{content:"";width:22px;height:2px;border-radius:2px;background:var(--cd-yellow)}
 .en-boas-vindas h2{margin:0;color:#fff;font-size:clamp(2rem,3vw,2.75rem);font-weight:800;letter-spacing:-.03em;line-height:1.1;max-width:14ch}
 .en-boas-vindas ul{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:12px}
 .en-boas-vindas li{display:flex;align-items:center;gap:10px;color:#D5E0EC;font-weight:600}
 .en-boas-vindas li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--cd-yellow)}
 .en-logo{display:none}
 .en-cartao-form{padding:36px 32px 28px}
}

/* 02/10: no celular o fundo é o azul do painel (com a grade fina) e a logo fica dentro do card branco. */
@media (max-width:899px){
 body.entrar{background:#0B223D}
 .en-lado{position:relative;isolation:isolate;overflow:hidden;min-height:100dvh;box-sizing:border-box}
 .en-lado::before{content:"";position:absolute;inset:0;z-index:-1;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:44px 44px;-webkit-mask-image:radial-gradient(90% 70% at 50% 35%,#000 20%,transparent 85%);mask-image:radial-gradient(90% 70% at 50% 35%,#000 20%,transparent 85%)}
 .en-lado::after{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 40% at 80% 90%,rgba(244,196,78,.12),transparent 70%),radial-gradient(70% 50% at 10% 0%,rgba(43,108,176,.18),transparent 65%)}
 .en-logo{display:flex;justify-content:center;margin:0 0 22px}
 .en-logo img{height:30px}
 .en-cartao-form{box-shadow:0 30px 60px -24px rgba(0,0,0,.55)}
 .en-novo{color:#C9D6E6}
 .en-novo a{color:#fff}
}