/* ══════════════════════════════════════════════════════════════════════════
   Portas de entrada (login e troca de senha).
   Mesmo sistema visual do app: cinza dominante, cartão flutuando sem borda,
   botão em pílula, cor só onde há informação. Arquivo separado do style.css
   porque a tela de login é servida antes de existir sessão.
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --s02: #101010; --s04: #222222; --s05: #4c4c4c; --s06: #727272;
  --s07: #7b7b7b; --s08: #e2e2e2; --s09: #f1f1f1; --s10: #fdfdfd;
  --c-azul: #2a85ff; --c-verde: #00a656; --c-vermelho: #ff381c; --c-laranja: #ff9d34;
  --raio: 12px; --raio-g: 16px;
  --transicao: all .16s cubic-bezier(.4, 0, .2, 1);
}
:root, :root[data-tema="claro"] {
  color-scheme: light;
  --fundo: var(--s09); --cartao: var(--s10); --afundado: #f1f1f1;
  --texto: var(--s02); --texto-2: var(--s06); --texto-3: var(--s07);
  --borda-forte: var(--s08);
  --marca: var(--s04); --marca-hover: var(--s05); --marca-texto: var(--s10);
  --sombra: 0 1px 2px #14141408, 0 4px 16px #1414140a;
  --sombra-alta: 0 12px 40px #14141422;
}
:root[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #0f0f0f; --cartao: #191919; --afundado: #222222;
  --texto: #fdfdfd; --texto-2: #a5a5a5; --texto-3: #7b7b7b;
  --borda-forte: #2e2e2e;
  --marca: #fdfdfd; --marca-hover: #e2e2e2; --marca-texto: #101010;
  --sombra: 0 1px 2px #00000040, 0 4px 16px #00000030;
  --sombra-alta: 0 12px 40px #00000066;
}

* { box-sizing: border-box; }
body {
  margin: 0; min-height: 100dvh; display: grid; place-items: center; padding: 24px;
  background: var(--fundo); color: var(--texto);
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.caixa { width: 100%; max-width: 380px; }
.cartao { background: var(--cartao); border-radius: 20px; box-shadow: var(--sombra); padding: 28px; }

/* a mesma marca da lateral do app: quadrado claro com sombra, sem emoji */
.marca { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
         background: var(--cartao); box-shadow: var(--sombra); margin-bottom: 18px; }
:root[data-tema="escuro"] .marca { background: var(--afundado); }
.marca svg { width: 19px; height: 19px; fill: none; stroke: var(--texto); stroke-width: 1.8;
             stroke-linecap: round; stroke-linejoin: round; }

h1 { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.03em; }
.sub { color: var(--texto-3); font-size: 13px; margin: 7px 0 22px; line-height: 1.55; }

label { display: block; margin-bottom: 14px; }
label > span { display: block; font-size: 12px; color: var(--texto-2); font-weight: 500; margin-bottom: 6px; }
input {
  width: 100%; background: var(--afundado); border: 1px solid transparent; border-radius: 10px;
  padding: 11px 13px; font-family: inherit; font-size: 13.5px; color: var(--texto);
  transition: var(--transicao);
}
input:focus { outline: 0; border-color: var(--c-azul); background: var(--cartao); }
.dica { font-size: 11.5px; color: var(--texto-3); margin: -8px 0 14px; }

button {
  width: 100%; margin-top: 6px; padding: 11px; border: 0; border-radius: 999px;
  background: var(--marca); color: var(--marca-texto);
  font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  box-shadow: var(--sombra); transition: var(--transicao);
}
button:hover:not(:disabled) { background: var(--marca-hover); }
button:disabled { opacity: .55; cursor: progress; }

/* mesmos selos do app: fundo lavado na cor, sem borda */
.msg { display: none; margin-top: 14px; padding: 11px 13px; border-radius: var(--raio);
       font-size: 13px; line-height: 1.55; }
.msg.on { display: block; }
.msg.err { background: #ff381c14; color: #cc2612; }
.msg.ok  { background: #00a6561f; color: #007a3f; }
.aviso { display: none; margin-bottom: 18px; padding: 12px 14px; border-radius: var(--raio);
         background: #ff9d3414; color: #8a5200; font-size: 12.5px; line-height: 1.55; }
.aviso.on { display: block; }
.aviso b { font-weight: 600; }
:root[data-tema="escuro"] .msg.err { color: #ff8a75; }
:root[data-tema="escuro"] .msg.ok  { color: #4fd394; }
:root[data-tema="escuro"] .aviso   { color: #ffc27a; }

.pe { margin-top: 18px; font-size: 11.5px; color: var(--texto-3); text-align: center; line-height: 1.6; }
.volta { display: block; text-align: center; margin-top: 16px; font-size: 12.5px;
         color: var(--texto-2); text-decoration: none; transition: var(--transicao); }
.volta:hover { color: var(--texto); }