/* Telas de entrada (login e criar senha) — mesma identidade do app "Minha PUBLI":
   topo preto com a marca grande, folha clara embaixo com o formulário.
   Classes começam com "en-" pra não esbarrar no estilo.css. */

html, body { margin: 0; background: #121110; }
.en-pagina {
  --preto: #121110; --dourado: #ddbd37; --dourado-forte: #8f7a24;
  --papel: #f6f4ef; --linha: #e6e1d6; --ink: #1e1d1b; --ink-faint: #6e695c;
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
  font-family: "Hanken Grotesk", "Segoe UI", system-ui, sans-serif; color: var(--ink);
  -webkit-font-smoothing: antialiased; line-height: 1.5;
}
.en-pagina *, .en-pagina *::before, .en-pagina *::after { box-sizing: border-box; }
.en-pagina h1 { font-family: "Archivo", "Hanken Grotesk", system-ui, sans-serif; letter-spacing: -.015em; margin: 0; }
html, body, .en-pagina * { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* Topo preto com a marca grande */
.en-topo {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: calc(40px + env(safe-area-inset-top, 0px)) 24px 32px; min-height: 240px;
}
.en-logo { display: block; width: min(320px, 76vw); height: auto; }

/* Folha clara com o formulário */
.en-painel {
  width: 100%; max-width: 480px; margin: 0 auto; background: var(--papel);
  border-radius: 28px 28px 0 0; padding: 30px 24px calc(30px + env(safe-area-inset-bottom, 0px));
}
.en-painel h1 { font-size: 25px; font-weight: 800; }
.en-sub { margin: 4px 0 22px; color: var(--ink-faint); font-size: 14.5px; }

.en-erro { display: none; margin: 0 0 16px; background: #fdecea; border: 1px solid #f2b8b0; border-radius: 12px; padding: 10px 14px; color: #a1352b; font-size: 14px; font-weight: 600; }

.en-campo { margin-bottom: 16px; }
.en-campo label { display: block; margin-bottom: 7px; font-size: 14.5px; font-weight: 700; }
.en-campo input {
  width: 100%; height: 52px; padding: 0 16px; background: #fff; color: var(--ink);
  border: 1px solid #999280; border-radius: 14px; font: inherit; font-size: 16px;
}
.en-campo input::placeholder { color: #787163; }
.en-campo input:focus { outline: none; border-color: #8f7a24; box-shadow: 0 0 0 1px #8f7a24, 0 0 0 4px rgba(221, 189, 55, .25); }

.en-btn {
  width: 100%; height: 54px; margin-top: 6px; border: none; border-radius: 14px; cursor: pointer;
  background: var(--preto); color: #fff; font: inherit; font-size: 16px; font-weight: 700;
}
.en-btn:active { transform: translateY(1px); }
.en-link { margin: 18px 0 0; text-align: center; }
.en-link a { color: #7a6720; font-size: 14.5px; font-weight: 600; text-decoration: none; }
.en-link button { background: none; border: 0; padding: 0; font: inherit; font-size: 14.5px; font-weight: 600; color: #7a6720; cursor: pointer; text-decoration: none; }
.en-rodape { margin: 22px 0 0; text-align: center; color: #a39c8d; font-size: 12.5px; }

/* No computador: a folha vira um cartão centralizado, não encostado embaixo */
@media (min-width: 600px) {
  .en-painel { border-radius: 28px; margin-bottom: 8vh; }
  .en-topo { flex: 0 0 auto; padding-top: 10vh; }
}

/* Links de Termos de Uso e Política de Privacidade — rodapé de toda tela de login */
.legal-links { margin: 18px 0 0; text-align: center; font-size: 13px; }
.legal-links a { color: inherit; opacity: .75; text-decoration: underline; }
.legal-links a:hover { opacity: 1; }