/* A tela de entrar: a folha branca sobre a chapa escura.
 *
 * É a peça que o produto corta — a folha da página de apresentação, com as marcas de registro nos
 * cantos — servindo de formulário. Dentro dela a paleta inverte: tinta sobre folha. No topo, o bloco
 * de título de um desenho técnico guarda a etiqueta e a troca entre entrar e criar conta. O resto é
 * o formulário das outras páginas de conta (conta.css), só com as cores da folha. */

:root {
  --folha-apagado: #5d7371;   /* o "apagado" sobre branco: 5,3:1 de contraste */
  --folha-linha: #e2e9e7;     /* filetes na folha */
  --folha-borda: #c6d3d0;     /* borda dos campos */
}

.entrar-main { padding: 44px 0 72px; }

.entrar-folha {
  position: relative;
  background: var(--folha); color: var(--tinta);
  border-radius: 2px;
  padding: 24px 30px 28px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .5), 0 2px 0 rgba(255, 255, 255, .06);
}
/* as marcas de registro nos cantos, como na folha da apresentação */
.entrar-folha::before, .entrar-folha::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
}
.entrar-folha::before { top: -8px; left: -8px; border-top: 1px solid #5f7472; border-left: 1px solid #5f7472; }
.entrar-folha::after { bottom: -8px; right: -8px; border-bottom: 1px solid #5f7472; border-right: 1px solid #5f7472; }

/* ---------- o bloco de título ---------- */
.entrar-bloco {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding-bottom: 14px; margin-bottom: 20px;
  border-bottom: 1px solid var(--folha-linha);
}
.entrar-bloco .cota { color: var(--folha-apagado); }
.entrar-modos { display: flex; gap: 2px; padding: 2px; border: 1px solid var(--folha-borda); border-radius: 3px; }
.entrar-modos button {
  font-family: var(--cota); font-size: 11px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase;
  padding: 8px 12px; border: 0; border-radius: 2px; background: transparent; color: var(--folha-apagado);
  cursor: pointer; transition: background .15s, color .15s;
}
.entrar-modos button:hover { color: var(--tinta); }
.entrar-modos button[aria-selected="true"] { background: var(--tinta); color: #fff; }
.entrar-modos[hidden] { display: none; }

.entrar-folha h1 { color: var(--tinta); font-size: clamp(28px, 4vw, 36px); margin: 0 0 6px; }
.entrar-folha .chamada { color: var(--folha-apagado); font-size: 15px; margin: 0 0 20px; }

/* ---------- o formulário, nas cores da folha ---------- */
.entrar-folha .form label > span { color: var(--folha-apagado); }
.entrar-folha .form input {
  background: #fff; color: var(--tinta); border-color: var(--folha-borda);
}
.entrar-folha .form input:focus { border-color: var(--traco); }
.entrar-folha .form-pe { color: var(--folha-apagado); }
.entrar-folha .form-pe a { color: var(--tinta); text-decoration: underline; text-underline-offset: 3px; }
.entrar-folha .form-pe a:hover { color: var(--traco); }
.entrar-folha .vinculo { color: #0a8c85; }

/* o botão de ver a senha mora dentro do campo, no canto */
.campo-senha { position: relative; }
.campo-senha input { padding-right: 96px; }
.ver-senha {
  position: absolute; right: 8px; bottom: 9px;
  font-family: var(--cota); font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  padding: 6px 8px; border: 0; border-radius: 3px; background: transparent; color: #0a8c85; cursor: pointer;
}
.ver-senha:hover { background: #edf6f5; }
.ver-senha:focus-visible { outline: 2px solid var(--traco); }

/* ---------- avisos na folha: um filete na cor da máquina ---------- */
.entrar-folha .aviso { background: #f2f6f5; border: 0; border-left: 3px solid var(--tinta); border-radius: 2px; color: var(--tinta); }
.entrar-folha .aviso-erro { background: #fff1f1; border-left-color: var(--corte); }
.entrar-folha .aviso-ok { background: #ecf7f5; border-left-color: var(--traco); }

/* ---------- entrada e troca ---------- */
/* a folha sobe sozinha, sem depender de script: numa aba escondida o requestAnimationFrame não
   dispara, e uma transição esperando por ele deixaria a folha invisível */
@keyframes folha-sobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.entrar-folha { animation: folha-sobe .5s ease-out both; }
@keyframes forma-entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.entrar-folha .form:not([hidden]) { animation: forma-entra .18s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .entrar-folha, .entrar-folha .form:not([hidden]) { animation: none; }
}

@media (max-width: 520px) {
  .entrar-main { padding: 28px 0 56px; }
  .conta-estreita { padding: 0 16px; }
  .entrar-folha { padding: 20px 18px 22px; }
  .entrar-bloco { flex-wrap: wrap; }
  .entrar-modos { width: 100%; }
  .entrar-modos button { flex: 1; text-align: center; }
}

/* Continuar com o Google: botão claro com o G nas cores da marca, como pede o guia de identidade do
   Google para o botão de login; o "ou" separa do formulário de e-mail e senha */
.entrar-google { display: grid; gap: 10px; margin: 4px 0 18px; }
.entrar-google[hidden] { display: none; }
.bt-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #fff; color: #1f1f1f; border: 1px solid #747775; font-weight: 500; }
.bt-google:hover { background: #f2f2f2; }
.bt-google svg { width: 18px; height: 18px; flex: none; }
.entrar-google-termos { margin: 0; font-size: 12.5px; opacity: .8; }
.entrar-ou { display: flex; align-items: center; gap: 10px; margin: 4px 0 0; font-size: 12.5px; opacity: .7; }
.entrar-ou::before, .entrar-ou::after { content: ""; flex: 1; border-top: 1px solid currentColor; opacity: .35; }