/* =====================================================================
   Página de entrar — usa os mesmos tokens da landing (css/style.css).
   Corpo grande de propósito: o público lê no celular, muitas vezes
   parado no carro e no escuro.
===================================================================== */

body.entrar {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 18px 40px;
  background:
    radial-gradient(1000px 520px at 50% -10%, rgba(255,176,32,.10), transparent 60%),
    var(--bg);
}

.ent { width: 100%; max-width: 440px }

.ent__voltar {
  display: inline-block; margin-bottom: 18px;
  color: var(--muted); text-decoration: none; font-size: 16px;
}
.ent__voltar:hover { color: var(--ink) }

.ent__card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 30px 26px 24px;
  box-shadow: var(--shadow);
}

.ent__logo {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 800; letter-spacing: -.01em;
  text-align: center; margin: 0 0 22px;
}
.ent__logo span { color: var(--amber) }
.ent__logo b { font-weight: 800 }

.ent h1 {
  font-family: var(--font-display);
  font-size: 30px; line-height: 1.12; font-weight: 700;
  margin: 0 0 6px;
}
.ent__sub { color: var(--muted); font-size: 17px; line-height: 1.5; margin: 0 0 22px }

.ent__campo { display: block; margin-bottom: 16px }
.ent__campo > span {
  display: block; font-size: 16px; font-weight: 600;
  margin-bottom: 7px; color: var(--ink);
}
.ent__campo input {
  width: 100%; box-sizing: border-box;
  background: var(--bg-deep); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: 14px;
  padding: 15px 16px; font-size: 18px; font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ent__campo input::placeholder { color: #7C8898 }   /* claro o bastante para ler no escuro */
.ent__campo input:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-glow);
}

/* botão de ver a senha: quem digita errado no escuro desiste do login */
.ent__senha { position: relative; display: block }
.ent__senha input { padding-right: 68px }
.ent__olho {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  background: none; border: none; color: var(--muted);
  font-size: 15px; font-weight: 700; font-family: inherit;
  padding: 10px 10px; cursor: pointer; border-radius: 10px;
}
.ent__olho:hover { color: var(--amber) }

.ent__btn {
  width: 100%; min-height: 54px; font-size: 18px; font-weight: 700;
  margin-top: 6px; justify-content: center;
}
/* o botão de criar conta é um link <a>: precisa se comportar como botão */
a.ent__btn { display: flex; align-items: center; justify-content: center; text-decoration: none }

.ent__link {
  display: block; width: 100%; margin: 14px 0 0;
  background: none; border: none; color: var(--muted);
  font-size: 16px; font-family: inherit; cursor: pointer; padding: 10px;
}
.ent__link:hover { color: var(--ink) }

.ent__ou {
  display: flex; align-items: center; gap: 12px;
  margin: 24px 0 16px; color: var(--muted); font-size: 15px;
}
.ent__ou::before, .ent__ou::after {
  content: ""; flex: 1; height: 1px; background: var(--line);
}

.ent__nota { color: var(--muted); font-size: 15px; line-height: 1.5; margin: 10px 0 0; text-align: center }

.ent__erro, .ent__ok {
  font-size: 16px; line-height: 1.45; margin: 0 0 14px;
  padding: 12px 14px; border-radius: 12px;
}
.ent__erro { background: rgba(255,107,84,.12); color: #FF9B88 }
.ent__ok   { background: rgba(61,201,143,.12); color: #7BE0B5 }

.ent__ajuda { text-align: center; color: var(--muted); font-size: 15px; margin: 22px 0 0 }
.ent__ajuda a { color: var(--amber) }

/* estado de espera: o botão avisa que está trabalhando */
.ent__btn[disabled] { opacity: .6; cursor: default }

@media (max-width: 420px) {
  .ent__card { padding: 24px 18px 20px; border-radius: 18px }
  .ent h1 { font-size: 26px }
}