/* Layout do login como está na documentação de 2017:
   - desktop: Logon-1.jpg (Sistema Godive/Versao - WEB/Login): foto com véu
     verde-água à esquerda, painel claro à direita com logotipo, "Log In",
     dois campos em pílula, "Esqueci a senha" e o botão "Entrar" em degradê.
   - celular: Login.jpg (Versao - APP): foto ocupando a tela inteira com véu,
     logotipo branco com a assinatura, campos brancos e botão em degradê.
   Cores da paleta do sistema (Cores.psd) e degradê do logotipo (manual p.12). */
@font-face{font-family:"Oblik";src:url(/static/fontes/Oblik-Bold.otf) format("opentype");font-weight:700;font-display:swap}
@font-face{font-family:"AmpleSoft";src:url(/static/fontes/AmpleSoft.otf) format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"AmpleSoft";src:url(/static/fontes/AmpleSoft-Medium.otf) format("opentype");font-weight:500;font-display:swap}
@font-face{font-family:"AmpleSoft";src:url(/static/fontes/AmpleSoft-Bold.otf) format("opentype");font-weight:700;font-display:swap}
@font-face{font-family:"Sansation";src:url(/static/fontes/Sansation-Light.ttf) format("truetype");font-weight:300;font-display:swap}
@font-face{font-family:"Sansation";src:url(/static/fontes/Sansation-Regular.ttf) format("truetype");font-weight:400;font-display:swap}
:root{
  --g1:#70C5DE;--g2:#7FE0B8;
  --teal:#207E6F;--teal-ink:#115046;--ink:#5E646B;--muted:#9FA1A4;
  --ground:#F0F4F5;--surface:#FCFEFE;--line:#DDE3E5;--orange:#E16928;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:AmpleSoft,"Segoe UI",system-ui,sans-serif;color:var(--ink);background:var(--ground);-webkit-font-smoothing:antialiased}
.tela{min-height:100%;display:grid;grid-template-columns:1fr 460px}
.foto{position:relative;overflow:hidden;background:#0B6E66}
.foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,200,170,.55),rgba(11,90,84,.75));mix-blend-mode:multiply}
.foto::before{content:"";position:absolute;inset:0;background:#18B3A0;mix-blend-mode:screen;opacity:.55;z-index:1}
.foto .rodape{position:absolute;left:36px;bottom:32px;z-index:2;color:#fff;font-family:Sansation,sans-serif;font-size:.8rem;letter-spacing:.04em;opacity:.9}
.painel{background:var(--ground);display:grid;grid-template-rows:auto 1fr auto;padding:56px 44px 28px;min-height:100vh}
.marca{justify-self:center;display:grid;justify-items:end;gap:2px}
.marca img{height:54px;width:auto}
.marca small{font-family:Sansation,sans-serif;font-size:.78rem;color:var(--muted)}
form{align-self:center;display:grid;gap:12px;width:100%;max-width:360px;justify-self:center}
h1{font-family:Sansation,AmpleSoft,sans-serif;font-weight:300;font-size:1.9rem;color:var(--muted);text-align:center;margin:0 0 26px}
.campo{display:block}
.campo input{width:100%;border:0;border-radius:999px;background:var(--surface);padding:14px 22px;font:inherit;font-weight:700;color:var(--ink);box-shadow:0 2px 10px rgba(17,80,70,.08)}
.campo input::placeholder{color:var(--ink);font-weight:500;opacity:.9}
.campo input:focus{outline:2px solid var(--g1);outline-offset:1px}
.acoes{display:flex;justify-content:flex-end;align-items:center;gap:20px;margin-top:40px}
.esqueci{background:none;border:0;color:var(--muted);font:inherit;font-weight:700;font-size:.9rem;cursor:pointer;padding:0}
.entrar{border:0;border-radius:999px;padding:11px 32px;font:inherit;font-weight:700;color:#fff;background:linear-gradient(90deg,var(--g1),var(--g2));box-shadow:0 6px 16px rgba(112,197,222,.45);cursor:pointer}
.entrar:hover{filter:saturate(1.15)}
.entrar:focus-visible{outline:2px solid var(--teal);outline-offset:2px}
.erro{background:#FBE9DE;color:var(--orange);border-radius:12px;padding:10px 14px;font-size:.9rem;font-weight:700}
.erro:empty{display:none}
.conta{text-align:center;color:var(--muted);font-size:.9rem;font-weight:700}
.conta a{color:#2FBFD6;text-decoration:none}
.versao{text-align:center;font-family:Sansation,sans-serif;font-size:.68rem;color:var(--muted);letter-spacing:.06em;margin-top:6px}
.dica{display:none}
.aviso{margin:0 0 14px;text-align:center;font-size:.92rem;color:var(--ink)}
a.esqueci{text-decoration:none}
input:focus-visible{outline-color:var(--g1)}

@media (max-width:820px){
  /* Layout do app de 2017: a foto é a tela inteira */
  .tela{grid-template-columns:1fr;position:relative;min-height:100vh;min-height:100svh}
  .foto{position:absolute;inset:0}
  .foto::after{background:linear-gradient(180deg,rgba(30,200,170,.6),rgba(11,90,84,.85))}
  .foto .rodape{display:none}
  .painel{position:relative;z-index:2;background:transparent;padding:64px 28px 28px;min-height:100vh;min-height:100svh;grid-template-rows:auto 1fr auto}
  .marca{justify-self:center;justify-items:end;margin-top:6vh}
  .marca img{height:62px}
  .marca small{color:#fff;font-size:.86rem}
  .marca .escuro{display:none}
  h1{display:none}
  .aviso{color:#fff}
  form{align-self:end;margin-bottom:8vh;max-width:330px}
  .campo input{background:#fff;box-shadow:0 4px 14px rgba(0,40,40,.2);padding:13px 22px;border-radius:12px}
  .acoes{flex-direction:column;gap:14px;margin-top:6px}
  .entrar{width:100%;padding:13px 32px}
  .esqueci{color:#fff;opacity:.9}
  .conta{color:#fff}
  .conta a{color:#fff;text-decoration:underline}
  .versao{color:rgba(255,255,255,.75)}
  .erro{background:rgba(255,255,255,.92)}
}
@media (min-width:821px){ .marca .claro{display:none} }
@media (prefers-reduced-motion:reduce){*{transition:none!important}}