/* Telas de entrar e de trocar senha (login.html e senha.html), visual novo de 22/10/2026: papel #F4F4F2 com a
   rede da sessao de imagens embaixo, cartao branco de borda 1 px e canto 4 px, logo nova, botao grafite.
   Escuro: tema escolhido no app ou o do sistema. Fica em /brand porque a tela de entrar carrega isto sem login
   (lib/auth.js libera /brand); os fundos tem caminho completo. */
:root {
  --bg: #F4F4F2; --surface: #FFFFFF; --border: #DCDCDA; --control: #B5B5B3; --text: #1A1A1A; --muted: #5E5E5C;
  --primary: #1A1A1A; --primary-hover: #333333; --primary-ink: #FFFFFF; --focus: #005BD3;
  --danger: #B3261E; --danger-soft: #FCEDEA; --up: #1A6A42; --up-soft: #E6F4EC; --amber: #7A5600; --amber-soft: #FFF1D1;
  --fundo: url(/brand/login/fundo-claro.webp); --fundo-cel: url(/brand/login/fundo-claro-celular.webp);
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #1A1A1A; --surface: #202020; --border: #343434; --control: #6A6A6A; --text: #F0F0F0; --muted: #B3B3B3;
    --primary: #EBEBEB; --primary-hover: #FFFFFF; --primary-ink: #1A1A1A; --focus: #9CC2FF;
    --danger: #FFA9A0; --danger-soft: #472A28; --up: #86D4A8; --up-soft: #1E3A2A; --amber: #F0CE7E; --amber-soft: #3E351E;
    --fundo: url(/brand/login/fundo-escuro.webp); --fundo-cel: url(/brand/login/fundo-escuro-celular.webp);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #1A1A1A; --surface: #202020; --border: #343434; --control: #6A6A6A; --text: #F0F0F0; --muted: #B3B3B3;
  --primary: #EBEBEB; --primary-hover: #FFFFFF; --primary-ink: #1A1A1A; --focus: #9CC2FF;
  --danger: #FFA9A0; --danger-soft: #472A28; --up: #86D4A8; --up-soft: #1E3A2A; --amber: #F0CE7E; --amber-soft: #3E351E;
  --fundo: url(/brand/login/fundo-escuro.webp); --fundo-cel: url(/brand/login/fundo-escuro-celular.webp);
  color-scheme: dark;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
::selection { background: #D7F34A; color: #2A3200; }
body {
  min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: max(24px, env(safe-area-inset-top)) 16px max(24px, env(safe-area-inset-bottom));
  background: var(--bg) var(--fundo) center bottom / cover no-repeat;
  color: var(--text); font-family: 'Hanken Grotesk', -apple-system, 'Segoe UI', sans-serif; font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
@media (max-aspect-ratio: 3/4) { body { background-image: var(--fundo-cel); } }
.caixa { width: 100%; max-width: 400px; background: var(--surface); border: 1px solid var(--border); border-radius: 4px; padding: 32px; }
.marca { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; letter-spacing: -0.015em; }
.marca svg { width: 28px; height: 28px; flex: none; }
h1 { margin: 28px 0 20px; font-size: 22px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.2; }
label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; }
.campo + .campo { margin-top: 16px; }
.caixa-input { position: relative; }
input {
  display: block; width: 100%; height: 40px; padding: 0 12px; background: var(--surface); color: var(--text);
  border: 1px solid var(--control); border-radius: 4px; font: inherit; font-size: 16px; outline: none;
}
input:focus { border-color: var(--text); box-shadow: 0 0 0 1px var(--text); }
input[aria-invalid="true"] { border-color: var(--danger); }
input.com-olho { padding-right: 44px; }
/* preenchimento automatico do Chrome e do Safari sem o fundo azulado */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--surface) inset; -webkit-text-fill-color: var(--text); caret-color: var(--text);
  transition: background-color 600000s 0s, color 600000s 0s;
}
input:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px var(--surface) inset, 0 0 0 1px var(--text); }
input:autofill { background: var(--surface); color: var(--text); }
.olho { position: absolute; top: 0; right: 0; width: 44px; height: 40px; display: grid; place-items: center; border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 4px; }
.olho:hover { color: var(--text); }
.olho svg { width: 18px; height: 18px; }
.olho:focus-visible, button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.entrar {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 40px; margin-top: 24px;
  background: var(--primary); color: var(--primary-ink); border: 0; border-radius: 4px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
}
.entrar:hover { background: var(--primary-hover); }
.entrar:disabled { opacity: .7; cursor: default; }
.roda { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.aviso { display: flex; gap: 8px; align-items: flex-start; margin-top: 16px; padding: 10px 12px; border-radius: 4px; background: var(--danger-soft); color: var(--danger); font-size: 13.5px; line-height: 1.4; }
.aviso.espera { background: var(--amber-soft); color: var(--amber); }
.aviso.feito { background: var(--up-soft); color: var(--up); }
.dica { margin-top: 6px; color: var(--muted); font-size: 12.5px; }
.voltar { display: inline-block; margin-top: 16px; color: var(--muted); font-size: 13px; text-decoration: none; }
.voltar:hover { color: var(--text); text-decoration: underline; }
.aviso svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.aviso[hidden] { display: none; }
@media (max-width: 440px) { .caixa { padding: 24px 20px; } h1 { margin-top: 24px; } }
@media (prefers-reduced-motion: reduce) { .roda { animation-duration: 2s; } }