/* ======================================================================
   O DESENHO DAS TELAS DE CONTA — entrar.html e nova-senha.html

   Num arquivo só de propósito: as duas telas são a mesma tela com miolo
   diferente, e quando o CSS estava dentro de cada uma elas já começaram a
   divergir na primeira mudança.

   O padrão é dele, dito em 19/09/2026:

     "Isso aí tem que ir para o canto direito ou esquerdo e tem que ter o
      espaço. O que sobrar, a gente vai colocar informações do site,
      informações do portal, dicas para quem vai entrar. (…) o modelo padrão é
      esse aí."

   🔴 E aqui a regra dele CORRIGE a que eu tinha copiado. O lib/login.ts do
   classificadosprime diz: sem imagem configurada, uma coluna só, porque "a
   metade esquerda seria um retângulo vazio -- pior que não ter metade
   nenhuma". Está certo para uma metade VAZIA. Ele resolveu por cima: a metade
   não fica vazia, recebe informação. Então a tela é dividida SEMPRE, e a
   imagem passa a ser opcional — quando não há, a metade é um painel da cor da
   marca com o mesmo recado.
   ====================================================================== */

:root{
  --mato:#15803d; --mato-fundo:#e7f5ec; --mato-escuro:#14532d;
  --ouro:#e3ab34;
  --papel:#f7fbf7; --superficie:#ffffff; --superficie-2:#eef6ef;
  --tinta:#16241b; --tinta-media:#4d6155; --tinta-fraca:#7c8f83;
  --borda:#dce9de; --borda-forte:#bcd3c1;
  --raio:10px;
}
:root:not([data-theme="light"]){
  @media (prefers-color-scheme:dark){
    --mato:#5cc47f; --mato-fundo:#16291d; --mato-escuro:#7ad39a;
    --ouro:#e8b95a;
    --papel:#0f1712; --superficie:#16211a; --superficie-2:#1d2a21;
    --tinta:#eaf4ed; --tinta-media:#a9bfb2; --tinta-fraca:#7f948a;
    --borda:#28362d; --borda-forte:#3b4c41;
  }
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--papel); color:var(--tinta);
  font:16px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}
.display{font-weight:800;letter-spacing:-.02em}

/* 🔴 O atributo `hidden` esconde por `display:none` da folha do navegador, que
   tem a MENOR precedência que existe. Qualquer `display:flex` ou
   `display:block` daqui ganha dele — e o elemento continua na tela. Sem esta
   linha, a metade aparecia vazia, a marca duplicava e "recuperar senha" pedia
   senha. Três sintomas, uma causa. */
[hidden]{display:none !important}

/* ---------------- as duas metades ---------------- */
.entrada{
  min-height:100dvh;
  display:grid;
  grid-template-columns:1.1fr 1fr;   /* informação à esquerda, formulário à direita */
  background:var(--papel);
}
@media (max-width:900px){
  /* No celular, UMA coluna — e o FORMULÁRIO PRIMEIRO. Quem abriu esta tela veio
     digitar e-mail e senha; obrigar a rolar um painel de informação para achar
     o campo é pôr o nosso recado na frente da tarefa dela. */
  .entrada{grid-template-columns:1fr; min-height:auto}
  .entrada__lado{order:2; min-height:0; padding:2rem 1.5rem 2.5rem}
  .entrada__forma{order:1; min-height:70dvh}
}

.entrada__lado{
  position:relative;
  min-height:100dvh;
  display:flex; align-items:center;
  padding:3rem 2.75rem;
  /* Sem imagem, o painel é a cor da marca. Não é "o estado degradado": é o
     estado NORMAL enquanto ninguém subir uma foto no admin. */
  background:linear-gradient(160deg, var(--mato-escuro), var(--mato) 70%, #0f3d21);
  background-size:cover; background-position:center;
  color:#fff;
}
/* Com foto, entra o véu: sem ele, uma imagem clara come o texto branco por
   cima, e o recado some justamente no dia em que alguém trocar a foto. */
.entrada__lado--foto::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(12,26,17,.88), rgba(12,26,17,.35) 70%);
}
@media (max-width:900px){
  .entrada__lado{min-height:0}
  .entrada__lado--foto::before{
    background:linear-gradient(to top, rgba(12,26,17,.92), rgba(12,26,17,.62));
  }
}

.entrada__lado__miolo{
  position:relative; max-width:34rem;
  display:flex; flex-direction:column; gap:.7rem;
}
.entrada__ola{font-size:.95rem; font-weight:700; color:var(--ouro)}
.entrada__titulo{font-size:2rem; line-height:1.1; margin:0; color:#fff}
@media (max-width:900px){ .entrada__titulo{font-size:1.5rem} }
.entrada__texto{margin:0; font-size:1rem; line-height:1.55; color:rgba(255,255,255,.93)}

/* As dicas. Lista de verdade, e não parágrafo corrido: quem chega nesta tela
   está de passagem e lê por varredura, não por leitura. */
.entrada__dicas{list-style:none; margin:1.4rem 0 0; padding:0;
  display:flex; flex-direction:column; gap:.9rem}
.entrada__dicas li{display:flex; gap:.7rem; align-items:flex-start;
  font-size:.95rem; line-height:1.45; color:rgba(255,255,255,.93)}
.entrada__dicas b{color:#fff}
.entrada__dicas span[aria-hidden]{font-size:1.15rem; line-height:1.3; flex:none}

.entrada__pe{margin:1.8rem 0 0; font-size:.85rem; color:rgba(255,255,255,.7)}
.entrada__pe a{color:rgba(255,255,255,.9)}

/* ---------------- a metade do formulário ---------------- */
.entrada__forma{
  display:flex; align-items:center; justify-content:center;
  padding:2.5rem 1.5rem; position:relative;
}
/* Sem moldura: a metade clara já é o cartão. Caixa dentro de caixa só
   estreitaria o campo de digitar. */
.entrada__cartao{width:100%; max-width:23rem; display:flex; flex-direction:column}

/* Centralizado, a pedido dele. A marca é só a LOGO, sem o nome escrito ao
   lado: o nome já está na outra metade, em letra grande. */
.entrada__cartao{text-align:center}
.entrada__marca{display:flex; justify-content:center; margin-bottom:1.5rem}
.entrada__marca img{
  /* Dobrada: eram 44px. */
  width:112px; height:112px; border-radius:50%; display:block;
}
.rotulo{
  font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--mato);
}
.entrada__cabeca{font-size:1.9rem; line-height:1.05; margin:.15rem 0 1.5rem}

/* Os campos voltam a ser alinhados à esquerda: rótulo centralizado em cima de
   campo largo faz a pessoa procurar onde a linha começa. O centralizado é o
   CABEÇALHO, não o formulário. */
.campo{display:block; margin-bottom:.9rem; text-align:left}
.campo label{display:block; font-size:.85rem; color:var(--tinta-media); margin-bottom:.3rem}
.campo input{
  width:100%; font:inherit; padding:.75rem .85rem;
  border:1px solid var(--borda-forte); border-radius:8px;
  background:var(--superficie); color:var(--tinta);
}
.campo input:focus{outline:2px solid var(--mato); outline-offset:1px; border-color:var(--mato)}

.campo-senha{position:relative; display:block}
.campo-senha input{padding-right:3rem}
.campo-senha__olho{
  position:absolute; right:.3rem; top:50%; transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  /* 40px de alvo: é o mínimo em que o dedo acerta de primeira no celular. */
  width:40px; height:40px;
  background:none; border:none; border-radius:8px; cursor:pointer;
  color:var(--tinta-fraca); padding:0;
}
.campo-senha__olho:hover{color:var(--mato); background:var(--superficie-2)}
.campo-senha__olho[aria-pressed="true"]{color:var(--mato)}

.btn{
  font:inherit; font-weight:700; padding:.8rem 1.1rem; border-radius:10px;
  border:1px solid transparent; background:var(--mato); color:#fff; cursor:pointer;
}
.btn:hover{background:var(--mato-escuro)}
.btn:disabled{opacity:.6; cursor:progress}
.entrada__botao{width:100%; margin-top:.4rem}

.erro{
  background:#fdeeee; color:#9a1c1c; border:1px solid #f3c9c9;
  padding:.6rem .8rem; border-radius:8px; font-size:.9rem; margin:0 0 .9rem;
  text-align:left;
}
.aviso{
  background:var(--mato-fundo); color:var(--mato-escuro); border:1px solid var(--mato);
  padding:.6rem .8rem; border-radius:8px; font-size:.9rem; margin:0 0 .9rem;
  text-align:left;
}
/* O detalhe técnico de um erro que eu não reconheço. Letra pequena e
   monoespaçada: não é recado para o dono do sítio, é pista para quem conserta. */
.detalhe{
  margin:.5rem 0 0; font-size:.78rem; color:var(--tinta-fraca);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; word-break:break-word;
}
.nota{font-size:.85rem; color:var(--tinta-media)}
.elo{
  background:none; border:0; padding:0; font:inherit; color:var(--mato);
  text-decoration:underline; cursor:pointer;
}
.entrada__rodape{display:flex; flex-direction:column; gap:.7rem; margin-top:1.3rem}
a{color:var(--mato)}