/* ============================================================
   entrada.css — a casca das telas de acesso.

   Compartilhada por TRES telas: o login do /painel, o /criar-conta e as
   telas de token (/esqueci, /recuperar, /verificar em acesso.html). Antes
   cada uma trazia o proprio cartao em <style>, e as tres divergiam a cada
   correcao — este arquivo existe para elas serem a mesma tela com textos
   diferentes.

   O DESENHO: tela dividida. A esquerda, a vitrine — um mapa estilizado com a
   linguagem visual da landing (os mesmos verdes de talhao, o mesmo traçado) e
   o texto de valor; a direita, o formulario num painel de pagina inteira.
   Abaixo de 980 px a vitrine some e sobra o formulario, que e a tela do
   celular de hoje.

   CORES SAO INFORMACAO AQUI TAMBEM (invariante 5):
   - o ponto azul da vitrine e posicao GPS — e o mapa desenhado mostrando o
     que o produto mostra, mesmo uso da landing;
   - o chip verde diz "disponivel offline", que e exatamente o que verde
     significa no app;
   - o traço violeta e trajeto, e so ele;
   - ambar so em acao (botao primario, links de acao).
   Os verdes do TERRENO da vitrine sao desenho de talhao visto de cima, como
   os do simbolo da marca — nunca derivar cor de UI deles (assets/MARCA.md).

   Este arquivo e linkado por ULTIMO nas tres paginas, depois do
   painel-biblioteca.css: e ele que decide o cartao. As variaveis de tema
   (claro/escuro) continuam vindo do painel-biblioteca.css.

   mapa.html NAO carrega este arquivo — o vocabulario .campo/.olho daqui nao
   colide com o de la.
   ============================================================ */

/* ---------------- a tela ---------------- */
.entrada-tela{min-height:100dvh;display:grid;
  grid-template-columns:minmax(0,1fr) clamp(460px,44vw,640px)}

/* O painel-biblioteca.css pinta o .centro do painel como tela de login
   (100dvh + gradiente). Com o login morando fora do .centro, essa regra
   deixaria um vao vazio do tamanho da tela abaixo da entrada — o .centro
   antes de entrar so contem o #painel, que esta oculto. So o painel tem
   main.centro ao lado de .entrada-tela; nas outras telas isto nao casa. */
body:not(.dentro) main.centro{display:none}
/* Depois de entrar, a tela de acesso inteira sai de cena. O painel.js ja
   esconde pelo id; isto e o cinto junto do suspensorio. */
.dentro .entrada-tela{display:none!important}

/* O `hidden` vem da folha do NAVEGADOR e perde para regra de autor com
   display proprio — sem isto os dois formularios do cadastro aparecem
   juntos. Mesma armadilha ja documentada no criar-conta antigo; o teste
   em landing-page.test.mjs cobra exatamente esta linha. */
[hidden]{display:none !important}

/* ---------------- vitrine: o produto desenhado ---------------- */
.entrada-vitrine{position:relative;overflow:hidden;display:flex;
  flex-direction:column;justify-content:space-between;padding:44px 48px;
  /* Os mesmos planos da landing: estrada, talhoes em faixas, terra. Sao
     literais de terreno, nao tokens de UI — de proposito. */
  background:
    linear-gradient(128deg,transparent 33%,rgba(232,228,220,.16) 33.3%,rgba(232,228,220,.16) 34%,transparent 34.3%),
    repeating-linear-gradient(18deg,rgba(96,132,74,.22) 0 34px,rgba(68,107,66,.17) 35px 72px),
    linear-gradient(150deg,#3b5539,#283e35 55%,#1f342e)}
/* Grade cartografica sutil por cima do terreno. */
.entrada-vitrine::before{content:'';position:absolute;inset:0;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:56px 56px;pointer-events:none}
/* Escurece o pe da vitrine para o texto assentar sobre o mapa. */
.entrada-vitrine::after{content:'';position:absolute;inset:auto 0 0;
  height:62%;pointer-events:none;
  background:linear-gradient(180deg,transparent,rgba(13,20,16,.86))}
.entrada-vitrine>*{position:relative;z-index:2}

/* Simbolo + nome, como o cabecalho da landing — e nao o lockup
   sigon-escuro: o teste que barra o lockup em pagina clara nao enxerga que
   este painel e escuro, e enfraquecer a guarda por causa de uma vitrine
   custaria mais do que compor a marca com texto. */
.vitrine-marca{display:inline-flex;align-items:center;gap:11px;color:#f2efe8;
  font:800 24px/1 var(--sans);letter-spacing:.06em}
.vitrine-marca img{width:44px;height:44px;border-radius:12px}

/* O desenho do mapa: contorno da propriedade, trajeto e posicao. */
.vitrine-mapa{position:absolute;inset:0;z-index:1;pointer-events:none}
.vitrine-mapa svg{position:absolute;inset:9% 7% 30%;width:86%;height:61%}
.vitrine-contorno{fill:none;stroke:rgba(232,228,220,.34);stroke-width:.8;
  stroke-dasharray:3.5 4.5;vector-effect:non-scaling-stroke}
.vitrine-trajeto{fill:none;stroke:var(--track);stroke-width:3.2;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
/* Posicao GPS: azul com halo, ESTATICO — o pulso e do app em campo, onde ele
   comunica fix ao vivo; aqui seria animacao continua sem o que comunicar. */
.vitrine-gps{position:absolute;width:16px;height:16px;border-radius:50%;
  background:var(--fix);border:3px solid #fff;
  box-shadow:0 0 0 9px rgba(90,200,250,.16),0 4px 14px rgba(0,0,0,.4)}
.vitrine-foto{position:absolute;width:34px;height:34px;border-radius:10px;
  border:2px solid rgba(232,228,220,.92);
  background:linear-gradient(140deg,#78944e,#35533b);
  box-shadow:0 8px 18px rgba(0,0,0,.42)}
.vitrine-foto::after{content:'';position:absolute;inset:6px;border-radius:4px;
  background:linear-gradient(145deg,transparent 45%,rgba(232,228,220,.4) 46% 58%,transparent 59%)}

/* Chips flutuantes: dizem estados REAIS do produto, com as cores certas. */
.vitrine-chip{position:absolute;display:grid;gap:3px;padding:12px 15px;
  border:1px solid rgba(255,255,255,.12);border-radius:13px;
  background:rgba(19,26,21,.9);-webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);box-shadow:0 18px 40px -18px rgba(0,0,0,.65)}
.vitrine-chip strong{display:flex;align-items:center;gap:7px;color:#e8e4dc;
  font:650 12px/1.2 var(--sans)}
.vitrine-chip span{color:#9aa39b;font:450 10.5px/1.4 var(--sans)}
.vitrine-chip i{flex:none;width:7px;height:7px;border-radius:50%;font-style:normal}
.chip-offline i{background:var(--confirm);box-shadow:0 0 0 4px rgba(77,219,138,.14)}
.chip-gps i{background:var(--fix);box-shadow:0 0 0 4px rgba(90,200,250,.16)}

/* O texto de valor, no pe da vitrine. */
.vitrine-texto{max-width:470px}
.vitrine-texto h2{margin:0;color:#f2efe8;
  font:730 clamp(26px,2.3vw,33px)/1.14 var(--sans);letter-spacing:-.035em}
.vitrine-texto>p{margin:14px 0 0;color:#b9c0b8;font:400 14px/1.6 var(--sans)}
.vitrine-ganhos{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:14px}
.vitrine-ganhos li{display:grid;grid-template-columns:auto 1fr;gap:11px;align-items:start}
/* O check e marcador de lista, nao estado confirmado — por isso claro-neutro,
   nunca verde (invariante 5). */
.vitrine-ganhos svg{width:16px;height:16px;margin-top:2px;flex:none;fill:none;
  stroke:rgba(232,228,220,.55);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.vitrine-ganhos b{display:block;color:#e8e4dc;font:620 14px/1.35 var(--sans)}
.vitrine-ganhos p{margin:2px 0 0;color:#9aa39b;font:400 12px/1.5 var(--sans)}

/* ---------------- o formulario ---------------- */
.entrada-forma{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:0;padding:44px 48px;background:var(--graphite-2)}
.entrada-caixa{width:min(408px,100%)}

/* Marca pequena acima do formulario: so quando a vitrine nao esta na tela.
   Duas marcas visiveis ao mesmo tempo seriam papel de carta, nao interface. */
.entrada-marca{display:none;align-items:center;justify-content:center;gap:10px;
  margin:0 auto 30px;color:#12802f;font:800 24px/1 var(--sans);letter-spacing:.06em}
.entrada-marca img{width:44px;height:44px;border-radius:12px}

.entrada-caixa .sobrelinha{margin:0 0 10px;color:var(--amber);
  font:700 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase}
.entrada-caixa h1{margin:0;color:var(--bone);
  font:740 clamp(27px,2.4vw,32px)/1.12 var(--sans);letter-spacing:-.04em}
.entrada-caixa .entrada-texto{margin:12px 0 28px;color:var(--muted);
  font:400 14px/1.6 var(--sans)}

/* :not([hidden]) e obrigatorio: um form{display:flex} solto apaga o hidden
   por origem de cascata e os dois formularios do cadastro aparecem juntos. */
.entrada-caixa form:not([hidden]){display:flex;flex-direction:column;gap:16px;text-align:left}
.campo{display:flex;flex-direction:column;gap:7px}
/* O acesso.js injeta os .campo dentro de #campos; sem isto eles se colam. */
#campos{display:grid;gap:16px}
#campos:empty{display:none}
.campo .rotulo{margin-bottom:0}
.entrada-caixa .entrada{min-height:50px;border-radius:12px;
  background:var(--graphite);border:1px solid var(--hairline);color:var(--bone);
  transition:border-color .15s ease,box-shadow .15s ease}
.entrada-caixa .entrada:focus{border-color:var(--amber);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--amber) 16%,transparent)}
.entrada-caixa .btn.primary{width:100%;min-height:52px;justify-content:center;
  border-radius:12px;font-weight:660;letter-spacing:.01em}
/* O "voltar ao mapa" da tela de conta (entrar.html): secundário enquanto há
   formulário, principal quando não há mais nada a fazer — mesma largura nos
   dois, para o alvo não pular de tamanho. */
#voltar{width:100%;min-height:52px;justify-content:center;margin-top:18px;border-radius:12px}

/* O olho da senha — o mesmo das tres telas, agora escrito uma vez so. */
.campo-senha{position:relative}
.campo-senha .entrada{width:100%;padding-right:52px}
.olho{position:absolute;right:2px;top:50%;transform:translateY(-50%);
  width:48px;height:48px;border:0;background:none;color:var(--muted);
  cursor:pointer;display:grid;place-items:center;border-radius:50%}
.olho svg{width:19px;height:19px}
/* Osso quando mostra: estado legivel sem tocar de novo; ambar seria alerta,
   e ver a propria senha nao e alerta nenhum (invariante 5). */
.olho[aria-pressed=true]{color:var(--bone)}
.olho[aria-pressed=true] .corte{display:none}
.olho:focus-visible{outline:2px solid var(--amber);outline-offset:1px}

/* Aceite dos termos (cadastro). */
.aceite{display:flex;gap:12px;align-items:flex-start;
  font:400 var(--t-apoio)/1.5 var(--sans);color:var(--muted)}
.aceite input[type=checkbox]{flex:0 0 auto;width:18px;height:18px;min-width:0;
  min-height:0;padding:0;margin:2px 0 0;accent-color:var(--amber)}
.aceite a{color:var(--amber)}

/* Google + divisor (login). O botao branco vem do painel-biblioteca; aqui so
   o ritmo. O divisor da nome ao caminho alternativo em vez de um botao solto. */
.login-google{display:flex;flex-direction:column;gap:14px}
.login-google .btn{width:100%;min-height:52px;justify-content:center;
  border-radius:12px;font-weight:640}
.google-icone{width:19px;height:19px}
.entrada-ou{display:flex;align-items:center;gap:14px;margin:18px 0 14px;
  color:var(--muted);font:600 11px/1 var(--sans);letter-spacing:.08em;
  text-transform:uppercase}
.entrada-ou::before,.entrada-ou::after{content:'';flex:1;height:1px;
  background:var(--hairline)}
.senha-toggle{width:100%;min-height:48px;border:1px solid var(--hairline);
  border-radius:12px;background:transparent;color:var(--bone);cursor:pointer;
  font:600 var(--t-apoio)/1 var(--sans);
  transition:border-color .15s ease,background .15s ease}
.senha-toggle:hover,.senha-toggle:focus-visible{border-color:var(--muted);
  background:var(--graphite)}
.senha-titulo{margin:0;color:var(--bone);font:640 var(--t-apoio)/1.3 var(--sans)}
/* O formulario de senha abre logo abaixo do alternador; sem este respiro o
   rotulo do e-mail cola no botao. */
#entrar{margin-top:16px}

/* Recados e rodape. */
.recado{margin:18px 0 0;font:500 var(--t-apoio)/1.5 var(--sans);text-align:left}
.recado.ruim{color:var(--danger)}
.recado.bom{color:var(--confirm)}
.erro-login{margin:14px 0 0}
.entrada-links{margin:22px 0 0;display:grid;gap:8px;text-align:center;
  font:400 var(--t-apoio)/1.5 var(--sans);color:var(--muted)}
.entrada-links a{color:var(--amber)}
.rodape-acesso{margin:30px 0 0;text-align:center;
  font:400 var(--t-apoio)/1.5 var(--sans);color:var(--muted)}
.rodape-acesso a{color:var(--amber)}

/* ---------------- responsivo ---------------- */
@media (max-width:979px){
  .entrada-tela{grid-template-columns:1fr}
  .entrada-vitrine{display:none}
  .entrada-marca{display:inline-flex}
  .entrada-forma{min-height:100dvh;padding:40px 20px;
    padding-top:calc(env(safe-area-inset-top) + 40px);
    padding-bottom:calc(env(safe-area-inset-bottom) + 32px)}
}

/* Tela baixa: aperta o respiro, nunca o alvo de toque — campos e botao
   continuam com 50 e 52 px. Query por ALTURA: celular deitado e monitor
   pequeno tem o mesmo aperto, e a largura nao diz nada sobre isso. */
@media (max-height:760px){
  .entrada-forma{padding-top:20px;padding-bottom:20px}
  .entrada-marca{margin-bottom:16px;font-size:21px}
  .entrada-marca img{width:38px;height:38px}
  .entrada-caixa h1{font-size:25px}
  .entrada-caixa .entrada-texto{margin-bottom:18px}
  .entrada-caixa form{gap:11px}
  .rodape-acesso{margin-top:18px}
}

/* Sugestão de domínio digitado errado, sob o campo de e-mail. Âmbar porque é
   ação — há algo a fazer, e um toque resolve (invariante 5). Nunca bloqueia o
   envio: endereço válido e incomum continua passando. */
.sugestao-email{margin:0;color:var(--muted);font:400 var(--t-apoio)/1.5 var(--sans)}
.sugestao-email[hidden]{display:none}
.sugestao-email button{min-height:44px;padding:0 2px;border:0;background:none;
  color:var(--amber);font:inherit;font-weight:640;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}

/* Aviso de navegador embutido (Instagram, Facebook…), assets/navegador.js.
   NEUTRO de propósito (invariante 5): não é falha nem confirmação, é um
   caminho — linha fina, texto de tinta e o botão no padrão do resto. */
.aviso-navegador{margin:0 0 22px;padding:14px 16px;border:1px solid var(--hairline);
  border-radius:12px;background:var(--graphite-2);color:var(--bone);text-align:left}
.aviso-navegador[hidden]{display:none}
.aviso-navegador p{margin:0;font:500 var(--t-apoio)/1.55 var(--sans)}
.aviso-navegador .btn{width:100%;margin-top:12px}
.aviso-navegador .aviso-navegador-passo{margin-top:10px;font-weight:650}

/* "Continue no computador", depois do cadastro no celular. Neutro, como o
   aviso acima: é um caminho, não um estado. */
.continuar-computador{margin:18px 0 0;padding:16px;border:1px solid var(--hairline);
  border-radius:12px;background:var(--graphite-2);text-align:left}
.continuar-computador[hidden]{display:none}
.continuar-computador p{margin:0;color:var(--bone);font:450 var(--t-apoio)/1.55 var(--sans)}
.continuar-computador .btn{width:100%;margin:14px 0 0}
.continuar-computador .apoio{margin-top:12px;color:var(--muted)}

/* Cadastro com e-mail que já existe: os dois caminhos, um sobre o outro. */
.conta-existe{display:grid;grid-template-columns:1fr;gap:10px;margin:14px 0 0}
.conta-existe[hidden]{display:none}
.conta-existe .btn{width:100%}