/* ===== Base ===== */
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial;
  color:#0f172a;
  background:#f3f4f6 radial-gradient(1000px 600px at 80% -20%, #fff 0, #f3f4f6 60%, #eceff3 100%);
}

/* ===== Shell ===== */
/* espaço extra embaixo pro footer + zero padding à direita pro full-bleed da imagem */
.auth-shell{
  min-height:50vh;
  display:flex; align-items:center; justify-content:center;
  padding:24px 0 56px 24px;
}

/* container: card fixo + imagem ocupando o resto */
.container{
  display:flex; gap:28px; max-width:1640px; width:100%; align-items:stretch;
}

/* coluna esquerda: logo + card empilhados */
.left{
  flex:0 0 460px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;                 /* espaço entre logo e card */
}

/* ===== Card de login (efeito vidro) ===== */
.card{
  width:100%;
  background: rgba(255,255,255,.75);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-radius:18px; padding:28px;
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 10px 25px rgba(0,0,0,.08);
}
.card h1{font-size:20px;margin:0 0 18px 0;text-align:center;letter-spacing:.5px}
.input{margin-bottom:14px}
label{display:block;font-size:14px;color:#374151;margin:6px 2px}
.input input{
  width:100%; padding:14px 12px; border:1px solid #d1d5db; border-radius:12px;
  font-size:16px; outline:0; transition:border .2s
}
.input input:focus{border-color:#7c3aed; box-shadow:0 0 0 3px rgba(124,58,237,.15)}
.button{
  width:100%; padding:14px 16px; border:0; border-radius:14px; font-weight:700;
  background:#6d28d9; color:#fff; font-size:16px; cursor:pointer; letter-spacing:.3px
}
.link{display:block;text-align:center;margin-top:10px;text-decoration:none;font-weight:600}
.link--danger{color:#b91c1c}
.msg{margin-top:12px;font-size:14px;color:#7f1d1d}

/* logo acima do card */
.brand-logo{
  height:120px;             /* ajuste se quiser maior/menor */
  width:auto;
  display:block;
  object-fit:contain;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.12));
}

/* ===== Imagem grande da direita (full-bleed) ===== */
.hero{
  flex:1 1 auto;
  min-height:100vh;
  border-radius:20px 0 0 20px;   /* arredonda só no lado interno */
  overflow:hidden;
  background: url('../img/vdlog-adm.png') center right / cover no-repeat;
  margin-right:-180px;            /* avança até a borda da janela */
}
.hero .overlay, .hero h2{display:none}

/* ===== Rodapé sem conflito ===== */
footer{
  position:static;
  margin:16px auto 0;
  text-align:center; font-size:12px; color:#6b7280;
  width:100%;
}

/* ===== Responsivo ===== */
@media (max-width:980px){
  .auth-shell{ padding:16px; }
  .container{flex-direction:column; gap:16px; max-width:100%;}
  .left{flex:1 1 auto}
  .brand-logo{ height:72px; }
  .hero{
    min-height:260px;
    border-radius:12px;
    margin-right:0;             /* sem bleed no mobile */
  }
}
/* Oculta a legenda/attribution do Leaflet nos mapas */
.leaflet-control-attribution {
  display: none !important;
}