/* As telas de fora do Radar: entrar (login.html) e trocar a senha (senha.html).
   As cores são as da tela principal (index.html), nos dois temas: antes cada
   página tinha a sua paleta escura, e a troca de tela mudava o azul. */
:root {
  color-scheme: light;
  --fundo: #f4f2ee; --superficie: #fff; --superficie-2: #f9f8f5; --realce: #f0eee8;
  --linha: #e4e0d7; --linha-forte: #d2ccbf;
  --tinta: #172231; --tinta-2: #465061; --tinta-3: #737a87;
  --marinho: #0f4c5c; --marinho-forte: #0a3a47; --marinho-suave: #e2eff1; --sobre-marinho: #fff;
  --latao: #94703a; --latao-suave: #f5eddd;
  --ok: #276f4a; --ok-suave: #e4f1e9;
  --erro: #ae2a22; --erro-suave: #fbe9e6; --foco: #1f7a8c;
  --faixa: #0a3a47; --faixa-2: #0f4c5c;
  --sombra-alta: 0 24px 60px rgba(15,23,34,.12), 0 2px 8px rgba(15,23,34,.05);
  --serif: "Iowan Old Style", "Sitka Heading", "Sitka Text", "Palatino Linotype", Palatino, Cambria, "Noto Serif", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    color-scheme: dark;
    --fundo: #0d1218; --superficie: #141b24; --superficie-2: #18202b; --realce: #1c2531;
    --linha: #243040; --linha-forte: #334256;
    --tinta: #e6e9ee; --tinta-2: #b0b9c6; --tinta-3: #8591a1;
    --marinho: #8fd0db; --marinho-forte: #b5e3ea; --marinho-suave: #13292f; --sobre-marinho: #07161a;
    --latao: #d4b27a; --latao-suave: #2a2317;
    --ok: #6fc79d; --ok-suave: #14271d;
    --erro: #f2968d; --erro-suave: #2e1715; --foco: #8fd0db;
    --faixa: #061a1f; --faixa-2: #0b2a31;
    --sombra-alta: 0 24px 60px rgba(0,0,0,.5);
  }
}
:root[data-tema="escuro"] {
  color-scheme: dark;
  --fundo: #0d1218; --superficie: #141b24; --superficie-2: #18202b; --realce: #1c2531;
  --linha: #243040; --linha-forte: #334256;
  --tinta: #e6e9ee; --tinta-2: #b0b9c6; --tinta-3: #8591a1;
  --marinho: #8fd0db; --marinho-forte: #b5e3ea; --marinho-suave: #13292f; --sobre-marinho: #07161a;
  --latao: #d4b27a; --latao-suave: #2a2317;
  --ok: #6fc79d; --ok-suave: #14271d;
  --erro: #f2968d; --erro-suave: #2e1715; --foco: #8fd0db;
  --faixa: #061a1f; --faixa-2: #0b2a31;
  --sombra-alta: 0 24px 60px rgba(0,0,0,.5);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--fundo); color: var(--tinta);
       font: 15px/1.5 var(--sans); -webkit-font-smoothing: antialiased; }
h1, h2, p { margin: 0; }
a { color: var(--marinho); }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }
.oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
      stroke-linecap: round; stroke-linejoin: round; }

/* ------------------------------------------------------------ esqueleto: faixa da marca | formulário */
.acesso { display: grid; grid-template-columns: minmax(360px, 5fr) 7fr; min-height: 100vh; min-height: 100dvh; }
.faixa { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
         padding: 40px 48px; color: #eef2f7; background: linear-gradient(160deg, var(--faixa-2), var(--faixa) 70%); }
.faixa-radar { position: absolute; right: -180px; bottom: -180px; width: 560px; height: 560px; pointer-events: none; opacity: .9; }
.faixa-marca { position: relative; display: flex; align-items: center; gap: 12px; }
.faixa-marca svg { width: 38px; height: 38px; flex: none; }
.faixa-marca b { font: 600 21px/1.1 var(--serif); letter-spacing: .005em; }
.faixa-marca b span { color: #d9b77d; }
.faixa-texto { position: relative; max-width: 440px; }
.faixa-texto h1 { font: 600 32px/1.2 var(--serif); letter-spacing: -.005em; text-wrap: balance; }
.faixa-texto p { margin-top: 14px; color: #b9c6d6; font-size: 15px; max-width: 38ch; }
.faixa-nota { position: relative; display: flex; gap: 8px; align-items: center; color: #9fb0c4; font-size: 12.5px; }
.faixa-nota .ic { width: 15px; height: 15px; color: #d9b77d; }

.lado-form { display: grid; place-items: center; padding: 40px 24px; }
.miolo { width: 100%; max-width: 384px; }
.marca-curta { display: none; }

/* ------------------------------------------------------------ formulário */
.passo h2, .miolo > h2 { font: 600 26px/1.2 var(--serif); letter-spacing: -.005em; }
.sub { color: var(--tinta-2); font-size: 14px; margin-top: 6px; }
.campos { display: grid; gap: 16px; margin-top: 28px; }
label { display: block; font-size: 13px; font-weight: 600; color: var(--tinta-2); margin-bottom: 6px; }
.campo { width: 100%; height: 46px; font: inherit; font-size: 15px; color: var(--tinta); background: var(--superficie);
         border: 1px solid var(--linha-forte); border-radius: 10px; padding: 0 14px; transition: border-color .15s, box-shadow .15s; }
.campo:hover { border-color: var(--tinta-3); }
.campo:focus { outline: none; border-color: var(--marinho); box-shadow: 0 0 0 3px var(--marinho-suave); }
.campo[aria-invalid="true"] { border-color: var(--erro); }
.com-botao { position: relative; }
.com-botao .campo { padding-right: 48px; }
.ver-senha { position: absolute; right: 4px; top: 4px; width: 38px; height: 38px; display: grid; place-items: center; border: 0;
             border-radius: 8px; background: none; color: var(--tinta-3); cursor: pointer; }
.ver-senha:hover { color: var(--tinta); background: var(--realce); }
.dica { font-size: 12.5px; color: var(--tinta-3); margin-top: 6px; }

/* o código: grande, espaçado, no centro, como o app mostra */
.campo.codigo { height: 60px; text-align: center; font-size: 28px; font-weight: 600; letter-spacing: .42em; padding: 0 0 0 .42em;
                font-variant-numeric: tabular-nums; }
.campo.codigo::placeholder { color: var(--linha-forte); letter-spacing: .42em; }

.bt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 46px; margin-top: 24px;
      font: 600 15px var(--sans); color: var(--sobre-marinho); background: var(--marinho); border: 0; border-radius: 10px; cursor: pointer;
      text-decoration: none; transition: background .15s; }
.bt:hover { background: var(--marinho-forte); }
.bt:disabled { opacity: .65; cursor: progress; }
.girando { width: 15px; height: 15px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
           display: inline-block; animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* quem está entrando, no passo do código: clicar volta ao usuário e senha */
.quem-entra { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin-bottom: 22px; padding: 5px 12px 5px 6px;
              border: 1px solid var(--linha); border-radius: 99px; background: var(--superficie); color: var(--tinta-2);
              font: inherit; font-size: 13px; cursor: pointer; }
.quem-entra:hover { border-color: var(--linha-forte); color: var(--tinta); }
.quem-entra .ic { width: 15px; height: 15px; }
.quem-entra b { font-weight: 600; color: var(--tinta); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.aviso { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; padding: 11px 13px; border-radius: 10px; font-size: 14px; }
.aviso .ic { margin-top: 1px; }
.aviso.erro { color: var(--erro); background: var(--erro-suave); }
.aviso.erro span { color: var(--tinta); }
.aviso.ok { color: var(--ok); background: var(--ok-suave); }
.aviso.ok span { color: var(--tinta); }
.aviso button { font: inherit; color: var(--marinho); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }

.rodape { margin-top: 32px; font-size: 12.5px; color: var(--tinta-3); }

/* ------------------------------------------------------------ trocar a senha */
.voltar-link { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 28px; font-size: 13.5px; font-weight: 600; text-decoration: none; }
.voltar-link:hover { text-decoration: underline; }
.voltar-link .ic { width: 16px; height: 16px; }
.regras { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 4px; font-size: 12.5px; color: var(--tinta-3); }
.regras li { display: flex; align-items: center; gap: 8px; }
.regras li::before { content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%; border: 1.5px solid var(--linha-forte); }
.regras li.cumprida { color: var(--ok); }
.regras li.cumprida::before { border-color: var(--ok); background: var(--ok)
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E") center / 10px no-repeat; }
.separador { margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--linha); }
.separador .sub { margin: 0 0 12px; }
.feito { margin-top: 28px; }
.feito .bt { margin-top: 20px; }

/* ------------------------------------------------------------ larguras */
@media (max-width: 899px) {
  .acesso { grid-template-columns: minmax(0, 1fr); }
  .faixa { display: none; }
  .lado-form { place-items: start center; padding: 32px 20px 40px; }
  .marca-curta { display: flex; align-items: center; gap: 10px; margin-bottom: 40px; color: var(--tinta); text-decoration: none; }
  .marca-curta svg { width: 32px; height: 32px; flex: none; }
  .marca-curta b { font: 600 19px/1.1 var(--serif); }
  .marca-curta b span { color: var(--latao); }
}
@media (max-width: 480px) {
  .lado-form { padding: 24px 16px 32px; }
  .campo { font-size: 16px; }          /* abaixo de 16px o iOS dá zoom no campo */
  .campo.codigo { font-size: 26px; letter-spacing: .32em; padding-left: .32em; }
  .passo h2, .miolo > h2 { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } }