/* GEOCASSOL — tela de acesso (login), estilo do modulo compartilhado.
 *
 * Copia do bloco #acesso de css/app.css (:442-462), que PERMANECE la para a
 * tela antiga. E cópia, nao recorte: a 2.0 nao carrega app.css e sem este
 * arquivo o formulario de acesso apareceria sem estilo nenhum — numa tela onde
 * o usuario digita a senha.
 *
 * Autocontido pelo mesmo motivo do menu.css: nenhuma variavel de :root de
 * pagina nenhuma, e nenhuma dependencia de reset. A 2.0 estiliza `button{...}`
 * e `.sub{...}` por conta propria, entao cada seletor daqui declara tambem o
 * que herdaria da pagina.
 */

#acesso{
  --ga-ink:#0c0137; --ga-card:#FFFFFF; --ga-paper:#F6F7FB; --ga-line:#DEE0EC;
  --ga-brass:#4550a2; --ga-amber:#363f8a; --ga-muted:#6A6E8C;
  --ga-alerta:#B23A2E; --ga-teal:#2A7D6C;
  --ga-sans:'Archivo',system-ui,sans-serif;
  --ga-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:var(--ga-ink);margin:0;padding:20px;
  font-family:var(--ga-sans);font-size:14px;color:var(--ga-ink)
}
#acesso form{background:var(--ga-card);border-radius:16px;margin:0;padding:34px 30px;
  width:100%;max-width:380px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
#acesso .logo{width:180px;display:block;margin:0 auto 6px;filter:invert(1)}
#acesso .sub{text-align:center;font-family:var(--ga-mono);font-size:10px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ga-muted);margin:0 0 26px}
#acesso label{display:block;font-family:var(--ga-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ga-muted);margin:14px 0 5px}
#acesso input{width:100%;margin:0;padding:11px 13px;border:1px solid var(--ga-line);
  border-radius:9px;background:var(--ga-paper);font-family:inherit;font-size:14px;color:var(--ga-ink)}
#acesso input:focus{outline:none;border-color:var(--ga-brass);background:#fff}
#acesso button[type=submit]{width:100%;margin:22px 0 0;background:var(--ga-brass);color:#fff;
  font-family:inherit;font-weight:700;padding:12px;border:none;border-radius:9px;
  font-size:14px;cursor:pointer}
#acesso button[type=submit]:hover{background:var(--ga-amber)}
#acesso button[type=submit]:disabled{opacity:.6;cursor:default}
#acesso #ac-msg{margin-top:14px;font-size:12.5px;text-align:center;min-height:18px}
#acesso #ac-msg.erro{color:var(--ga-alerta)}
#acesso #ac-msg.ok{color:var(--ga-teal)}
#acesso .lnk{display:block;margin:12px auto 0;padding:0;background:none;border:none;
  color:var(--ga-brass);font-family:inherit;font-size:12px;text-decoration:underline;cursor:pointer}

/* Campo abaixo de 16px faz o Safari do iOS ampliar a pagina ao focar. Esta e a
   primeira tela do sistema no celular — ver a mesma regra em css/app.css. */
@media (pointer:coarse){
  #acesso input{font-size:16px}
}
#acesso input:focus-visible,#acesso button:focus-visible{
  outline:2px solid var(--ga-brass);outline-offset:2px}