/* ============================================================
TELA DE ENTRADA — Pedidos Ceasa
Usada pela tela da loja (index.html) e pelo painel do comprador
(comprador.html). As cores saem das variáveis que cada tela define
no :root, que por sua vez vêm do Rendra Design System.
São três camadas, de baixo para cima:
1. #login — o fundo desenhado (verde e curvas da marca)
2. #login::before — a foto /fundo-login.jpg, se o arquivo existir
3. #login::after — o véu que garante leitura do cartão
Sem o arquivo da foto a camada 2 não pinta nada e o desenho aparece.
O mesmo vale para /logo-login.png acima do cartão: sem o arquivo o
![]()
se remove sozinho e o cartão fala por si.
============================================================ */
#login{
position:fixed; inset:0; z-index:300;
display:grid; place-items:center;
padding:24px 16px;
overflow:auto;
/* fundo desenhado: vale sozinho quando não há foto */
background-image:
url("data:image/svg+xml;utf8,"),
url("data:image/svg+xml;utf8,"),
radial-gradient(980px 560px at 18% 6%, rgba(255,255,255,.72), transparent 58%),
radial-gradient(760px 520px at 84% 96%, rgba(16,74,24,.42), transparent 64%),
linear-gradient(145deg, #f2faef 0%, #d9efd0 26%, #a7d79b 54%, #5aa857 78%, #236b2a 100%);
background-size:20vw 100%, 68vw 26vh, auto, auto, auto;
background-position:left center, right bottom, center, center, center;
background-repeat:no-repeat;
}
/* a foto do cliente, se o arquivo estiver na pasta web */
#login::before{
content:''; position:absolute; inset:0; pointer-events:none;
background:url('/fundo-login.jpg') center center / cover no-repeat;
}
/* véu de leitura: segura o contraste do cartão sobre qualquer foto */
#login::after{
content:''; position:absolute; inset:0; pointer-events:none;
background:
radial-gradient(680px 500px at 50% 52%, rgba(255,255,255,.26), transparent 70%),
linear-gradient(180deg, rgba(12,42,18,.10) 0%, rgba(12,42,18,0) 34%, rgba(12,42,18,.18) 100%);
}
#login .login-centro{
position:relative; z-index:1;
width:100%; max-width:420px;
display:flex; flex-direction:column; align-items:center; gap:22px;
}
/* ---------- marca acima do cartão ---------- */
#login .login-marca{ width:100%; display:flex; justify-content:center; }
#login .login-marca img{
max-width:min(340px, 86%); max-height:120px; width:auto; height:auto;
display:block; filter:drop-shadow(0 4px 14px rgba(255,255,255,.6));
}
#login .login-marca:empty{ display:none; }
/* ---------- cartão ---------- */
#login .box{
width:100%;
background:rgba(255,255,255,.97);
border:1px solid rgba(255,255,255,.85);
border-radius:20px;
padding:26px 26px 28px;
box-shadow:0 18px 50px rgba(13,40,18,.30), 0 2px 6px rgba(13,40,18,.10);
backdrop-filter:blur(8px);
}
#login .marca{
display:flex; justify-content:center; align-items:center;
margin-bottom:10px;
}
#login .marca svg{ width:42px; height:42px; display:block; }
#login h1{
font-size:21px; line-height:1.2; font-weight:800;
color:var(--verde-esc); text-align:center;
letter-spacing:-.2px;
}
#login .sub{
text-align:center; margin:4px 0 20px;
font-size:11.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase;
color:var(--suave);
}
/* ---------- campos ---------- */
#login .campo{ margin-bottom:14px; }
#login .campo label{
display:block; margin-bottom:6px;
font-size:11px; font-weight:700; letter-spacing:.7px; text-transform:uppercase;
color:var(--suave);
}
#login .entrada{
position:relative; display:flex; align-items:center;
background:#f1f4f3;
border:1.5px solid transparent;
border-radius:12px;
transition:border-color .15s, background .15s;
}
#login .entrada:focus-within{ background:#fff; border-color:var(--verde); }
#login .entrada .icone{
position:absolute; left:13px; display:grid; place-items:center;
color:var(--suave); pointer-events:none;
}
#login .entrada .icone svg{ width:18px; height:18px; display:block; }
#login .entrada input{
flex:1; width:100%;
background:none; border:0; outline:none;
/* 16px: abaixo disso o iOS dá zoom sozinho ao tocar no campo */
font-size:16px; line-height:1.3;
padding:13px 14px 13px 42px;
min-height:48px;
border-radius:12px;
}
#login .entrada input::placeholder{ color:#9aa5a0; }
#login .entrada.com-olho input{ padding-right:48px; }
#login .olho{
position:absolute; right:6px;
width:40px; height:40px; border-radius:10px;
display:grid; place-items:center; color:var(--suave);
}
#login .olho:hover{ background:rgba(0,0,0,.05); color:var(--texto); }
#login .olho svg{ width:19px; height:19px; display:block; }
#login .olho .vendo{ display:none; }
#login .olho.mostrando .oculta{ display:none; }
#login .olho.mostrando .vendo{ display:block; }
/* ---------- botão ---------- */
#login .btn-entrar{
width:100%; margin-top:8px;
display:flex; align-items:center; justify-content:center; gap:9px;
background:var(--verde-esc); color:#fff;
font-size:15.5px; font-weight:700;
border-radius:12px; min-height:50px; padding:0 16px;
box-shadow:0 8px 20px rgba(26,93,31,.28);
transition:filter .15s, transform .06s;
}
#login .btn-entrar:hover{ filter:brightness(1.08); }
#login .btn-entrar:active{ transform:translateY(1px); }
#login .btn-entrar svg{ width:19px; height:19px; display:block; }
/* ---------- recados ---------- */
#login .erro{
display:none;
background:#fdecea; color:#a12b1c; border:1px solid #f5c6c0;
padding:10px 12px; border-radius:10px; font-size:13px; line-height:1.4;
margin-bottom:14px;
}
#login .dica{
text-align:center; font-size:12px; color:var(--suave);
margin-top:16px; line-height:1.6;
}
#login .dica a{ color:var(--verde-esc); font-weight:600; }
#login .dica:empty{ display:none; }
/* ---------- celular ---------- */
@media(max-width:480px){
#login{ padding:18px 14px; align-content:center;
background-size:22vw 100%, 86vw 16vh, auto, auto, auto; }
#login .login-centro{ gap:16px; }
#login .login-marca img{ max-height:84px; max-width:84%; }
#login .box{ padding:22px 18px 24px; border-radius:18px; }
#login h1{ font-size:19px; }
}
/* telas baixas e deitadas: o cartão não pode ficar preso fora da tela */
@media(max-height:620px){
#login{ place-items:start center; }
#login .login-marca img{ max-height:64px; }
}