/* entrar.css — tela de entrar. Só tokens (tokens.css). */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; background: var(--bg-0); color: var(--tx-1); font-family: var(--f-texto); font-size: var(--t-corpo); }
body { display: flex; align-items: center; justify-content: center; padding: var(--e4); min-height: 100vh; }
.hidden { display: none !important; }
.caixa { width: 100%; max-width: 380px; background: var(--bg-1); border: var(--borda); border-radius: var(--raio); padding: var(--e6); box-shadow: var(--sombra); }
h1 { font-family: var(--f-dado); font-size: var(--t-secao); letter-spacing: var(--ls-rotulo); color: var(--acento); }
.sub { color: var(--tx-2); margin: var(--e2) 0 var(--e5); }
form { display: flex; flex-direction: column; gap: var(--e2); }
label { font-family: var(--f-dado); font-size: var(--t-rotulo); letter-spacing: var(--ls-rotulo); text-transform: uppercase; color: var(--tx-2); margin-top: var(--e2); }
input { background: var(--bg-0); border: 1px solid var(--linha-forte); border-radius: var(--raio); color: var(--tx-1); font: inherit; padding: var(--e2) var(--e3); }
input:focus { outline: none; border-color: var(--acento); }
.btn { margin-top: var(--e4); background: var(--acento-fundo); border: 1px solid var(--acento); border-radius: var(--raio); color: var(--tx-1); padding: var(--e3); cursor: pointer;
  font-family: var(--f-dado); font-size: var(--t-rotulo); letter-spacing: var(--ls-rotulo); text-transform: uppercase; font-weight: 600; }
.btn:disabled { opacity: var(--opac-cenario); cursor: wait; }
.dica { color: var(--tx-2); font-size: var(--t-dado); border: var(--borda-cenario); border-radius: var(--raio); padding: var(--e3); }
.erro { margin-top: var(--e4); color: var(--st-falha); border: 1px solid var(--r-alto); background: var(--r-alto-bg); border-radius: var(--raio); padding: var(--e3); font-size: var(--t-dado); }