/* Telas de acesso (entrar, esqueci minha senha, nova senha) no modelo do Portal de Propostas da Alcance Solar:
   capa navy com o brilho laranja do sol no alto, logotipo grande, cartão com fio laranja em cima, campos escuros de cantos retos
   e botão azul D-VIS-03. Laranja só como acento. */
:root {
  --navy: #062033; --deep: #04141f; --capa-topo: #0a3252; --blu: #00528b; --blu2: #1c6ea3; --org: #f26b21; --laranja-marca: #e88025;
  --nevoa: #9db8cb; --capa-texto: #c6d6e2; --capa-fio: #1c4058; --contraluz: #2b5f86; --branco: #ffffff;
  --erro: #f79c8b; --ok: #6fd3a3;
  --sombra-botao: 0 1px 2px rgba(6, 32, 51, 0.12), 0 2px 4px rgba(6, 32, 51, 0.10);
  --sombra-botao-alta: 0 2px 4px rgba(6, 32, 51, 0.14), 0 4px 10px rgba(6, 32, 51, 0.12);
  --font-sans: "Barlow", "Liberation Sans", Arial, sans-serif;
  --font-cond: "Barlow Condensed", "Liberation Sans Narrow", "Arial Narrow", sans-serif;
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--deep); }
body { color: var(--branco); font: 15px/1.5 var(--font-sans); -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
.capa { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem; padding: 2rem 1rem;
  background:
    radial-gradient(ellipse 60rem 45rem at 50% 0, rgba(232, 128, 37, .16) 0, rgba(232, 128, 37, .07) 30%, transparent 62%),
    radial-gradient(circle 230mm at 0 0, rgba(43, 95, 134, .11) 0, transparent 58%),
    linear-gradient(145deg, var(--capa-topo) 0, var(--deep) 100%); }
.marca { display: block; width: 320px; max-width: 100%; height: auto; }
.cartao { width: 100%; max-width: 380px; padding: 1.6rem; border-top: 1.6px solid var(--org); }
.cartao h1 { margin: -.2rem 0 1.4rem; padding-bottom: 1rem; border-bottom: 1px solid var(--capa-fio); text-align: center;
  font: 700 22.67px/1.15 var(--font-cond); letter-spacing: .53px; text-transform: uppercase; color: var(--branco); }
.campo { display: grid; gap: 6px; margin: 0 0 1rem; }
.campo label { font: 600 11px var(--font-sans); letter-spacing: 1.4px; text-transform: uppercase; color: var(--nevoa); }
.campo input { width: 100%; height: 42px; padding: 0 12px; background: var(--navy); border: .8px solid var(--nevoa); border-radius: 0; color: var(--branco); font: 400 16px var(--font-sans); }
.campo input::placeholder { color: rgba(157, 184, 203, .55); }
.campo input:focus { outline: 1.6px solid var(--org); outline-offset: 1px; }
.senha-campo { position: relative; display: block; }
.senha-campo input { padding-right: 46px; }
.olho { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 40px; height: 38px; display: grid; place-items: center; padding: 0; border: 0; background: none; color: var(--nevoa); cursor: pointer; }
.olho:hover { color: var(--branco); }
.olho:focus-visible { outline: 1.6px solid var(--org); outline-offset: -2px; }
.olho svg { width: 20px; height: 20px; }
.olho .fecha { display: none; }
.olho[aria-pressed="true"] .abre { display: none; }
.olho[aria-pressed="true"] .fecha { display: block; }
.botao { display: flex; align-items: center; justify-content: center; width: 100%; height: 42px; margin-top: .4rem; padding: 0 14px; background: var(--blu); border: .8px solid var(--blu2);
  border-radius: 6px; box-shadow: var(--sombra-botao); color: var(--branco); font: 600 15px var(--font-sans); letter-spacing: .02em; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease; }
.botao:hover { background: var(--blu2); box-shadow: var(--sombra-botao-alta); }
.botao:focus-visible { outline: 1.6px solid var(--org); outline-offset: 2px; }
.botao:disabled { cursor: progress; box-shadow: none; opacity: .85; }
.apoio { margin: 1rem 0 0; text-align: center; font-size: .82rem; color: var(--nevoa); }
.apoio a { color: var(--capa-texto); text-underline-offset: 3px; }
.apoio a:hover { color: var(--branco); }
.apoio a:focus-visible { outline: 1.6px solid var(--org); outline-offset: 2px; }
.apoio-bloco { margin: 0 0 1rem; font-size: .9rem; line-height: 1.55; color: var(--capa-texto); }
.aviso { margin: 0 0 1rem; padding: 10px 12px; border-left: 3px solid var(--erro); background: rgba(247, 156, 139, .12); color: var(--branco); font-size: 14px; }
.aviso.ok { border-left-color: var(--ok); background: rgba(111, 211, 163, .10); }
.rodape { max-width: 420px; margin: 0; text-align: center; font-size: .78rem; color: var(--nevoa); opacity: .85; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }