/* ============================================================
   OSPA Compat — login.css
   Tela de entrada, compartilhada por todas as páginas.
   Antes cada página tinha sua própria cópia — e elas já haviam
   divergido entre si.

   Mesma composição da Plataforma de briefing (cartão à esquerda,
   botões em pílula), invertida para fundo claro — o resto do
   sistema é claro.
   ============================================================ */

#screen-login,.login-tela{position:fixed;inset:0;overflow:hidden;background:#fff;z-index:10}
#screen-login{display:none}
#screen-login.on{display:block}
/* .login-tela: páginas que são só esta tela, como acesso.html */

/* Fundo branco por enquanto. Reservado para uma foto clara de obra da
   OSPA (como no briefing): imagem aqui + gradiente branco no ::after. */
.login-fundo{position:absolute;inset:0;background:#fff}

.login-wrap{position:relative;height:100%;display:flex;align-items:center;padding:0 8vw;overflow-y:auto}
.login-box{width:100%;max-width:400px;opacity:0;transform:translateY(14px);animation:login-sobe .7s cubic-bezier(.16,.84,.44,1) .1s forwards}
@keyframes login-sobe{to{opacity:1;transform:none}}

.login-logo{height:26px;width:auto;display:block;margin-bottom:32px}
.login-title{font-family:var(--sans);font-size:26px;font-weight:300;line-height:1.25;letter-spacing:-.01em;color:var(--text,#191919);margin:0 0 8px}
.login-title b{font-weight:700}
.login-sub{font-family:var(--sans);font-size:13px;color:var(--text2,#727272);margin:0 0 30px}

/* Botões em pílula */
.login-btn,.login-btn-google{width:100%;border-radius:999px;padding:13px;font-family:var(--sans);font-size:14px;font-weight:700;cursor:pointer;transition:transform .2s,opacity .2s,border-color .2s}
.login-btn:hover,.login-btn-google:hover{transform:translateY(-1px)}
.login-btn:active,.login-btn-google:active{transform:none}
.login-btn:disabled{opacity:.6;cursor:default;transform:none}
/* Google em contorno, sem destaque: fundo branco e borda preta, como o "Entrar" */
.login-btn-google{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;color:var(--text,#191919);border:1px solid var(--text,#191919)}
.login-btn{background:var(--text,#191919);color:#fff;border:1px solid var(--text,#191919);margin-top:8px}
/* Com o Google visível, o "Entrar" também fica em contorno — os dois iguais */
.login-google:not([hidden]) ~ form .login-btn{background:#fff;color:var(--text,#191919)}

.login-ou{display:flex;align-items:center;gap:12px;margin:24px 0 22px}
.login-ou::before,.login-ou::after{content:"";flex:auto;height:1px;background:rgba(25,25,25,.14)}
.login-ou span{font-family:var(--sans);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--text3,#B5B5B5)}

/* Campos só com a linha de baixo */
.login-field{display:block;margin-bottom:20px}
.login-field>span{display:block;font-family:var(--sans);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--text2,#727272);margin-bottom:7px}
.login-field input{width:100%;background:transparent;border:0;border-bottom:1px solid rgba(25,25,25,.22);border-radius:0;outline:none;padding:8px 0;font-family:var(--sans);font-size:15px;color:var(--text,#191919);transition:border-color .25s}
.login-field input::placeholder{color:rgba(25,25,25,.3)}
.login-field input:focus{border-bottom-color:var(--text,#191919)}

.login-err{display:none;font-family:var(--sans);font-size:12.5px;color:var(--alert,#C42828);margin:2px 0 12px}

.login-pedir{display:inline-block;margin-top:22px;font-family:var(--sans);font-size:12.5px;color:var(--text2,#727272);text-decoration:underline;text-underline-offset:3px}
.login-pedir:hover{color:var(--text,#191919)}
.login-ok{font-family:var(--sans);font-size:14px;line-height:1.55;color:var(--text,#191919);border-left:2px solid var(--text,#191919);padding:2px 0 2px 14px;margin:6px 0 4px}
.login-opcional{text-transform:none;letter-spacing:0;color:var(--text3,#B5B5B5)}
.login-isca{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

@media (max-width:640px){
  .login-wrap{padding:0 24px}
}
@media (prefers-reduced-motion:reduce){.login-box{animation-duration:.3s}}