/* Pantalla de inicio de sesion estilo Facebook. SOLO estilos: no toca login ni registro. */
.min-h-screen:has(> .relative.grid.lg\:grid-cols-2){background:var(--background)!important}
.min-h-screen:has(> .relative.grid.lg\:grid-cols-2)>.pointer-events-none.fixed{display:none!important}

/* logo: imagen J en vez del anterior */
.relative.grid.lg\:grid-cols-2 img[src^="/logo.png"]{content:url(/mb-login-logo.png)}

/* tarjeta plana (sin caja, sombra ni borde) */
.relative.grid.lg\:grid-cols-2>div:last-child>div>div:last-child{background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;padding:0!important;border-radius:0!important}
.relative.grid.lg\:grid-cols-2>div:last-child>div>div:last-child>div:first-child{background:transparent!important;padding:0!important;gap:12px!important;margin-bottom:28px!important}
/* pestanas como los botones de Facebook */
.relative.grid.lg\:grid-cols-2>div:last-child>div>div:last-child>div:first-child>button{height:48px;border-radius:9999px!important;border:1px solid #8b5cf6!important;background:transparent!important;color:#8b5cf6!important;box-shadow:none!important;font-size:15px!important}
.relative.grid.lg\:grid-cols-2>div:last-child>div>div:last-child>div:first-child>button[class*="shadow"]{background:var(--muted)!important;border-color:transparent!important;color:var(--foreground)!important}
.relative.grid.lg\:grid-cols-2 form h2{font-size:22px!important;font-weight:600!important}
.relative.grid.lg\:grid-cols-2 form input,.relative.grid.lg\:grid-cols-2 form select{height:52px!important;border-radius:12px!important;font-size:16px!important}
.relative.grid.lg\:grid-cols-2 form button[type="submit"]{height:48px!important;border-radius:9999px!important;font-size:16px!important}

@media (max-width:1023px){
  .relative.grid.lg\:grid-cols-2>div:last-child{padding:24px 20px!important}
}

@media (min-width:1024px){
  .relative.grid.lg\:grid-cols-2{grid-template-columns:3fr 2fr!important;grid-template-rows:1fr auto!important}
  .relative.grid.lg\:grid-cols-2>div:first-child{display:contents!important}
  /* logo arriba a la izquierda */
  .relative.grid.lg\:grid-cols-2>div:first-child>div:first-child{grid-area:1/1;align-self:start;padding:48px 0 0 32px;z-index:3}
  .relative.grid.lg\:grid-cols-2>div:first-child>div:first-child img{height:60px!important;width:60px!important}
  .relative.grid.lg\:grid-cols-2>div:first-child>div:first-child img[src^="/wordmark"]{display:none!important}
  /* ilustracion */
  .relative.grid.lg\:grid-cols-2::before{content:"";grid-area:1/1;justify-self:end;align-self:center;width:min(560px,62%);aspect-ratio:1;margin-right:60px;background:url(/mb-login-hero.png) center/contain no-repeat;z-index:1}
  /* titular grande abajo a la izquierda */
  .relative.grid.lg\:grid-cols-2>div:first-child>div:nth-child(2){grid-area:1/1;align-self:end;max-width:340px!important;padding:0 0 56px 28px;z-index:2}
  .relative.grid.lg\:grid-cols-2>div:first-child>div:nth-child(2)>p,.relative.grid.lg\:grid-cols-2>div:first-child>div:nth-child(2)>div{display:none!important}
  .relative.grid.lg\:grid-cols-2>div:first-child>div:nth-child(2)>h1{font-size:52px!important;line-height:1.08!important;font-weight:700!important;letter-spacing:-1px}
  /* pie con linea */
  .relative.grid.lg\:grid-cols-2>div:first-child>p{grid-area:2/1/3/3;justify-content:center;padding:18px 0!important;border-top:1px solid var(--border)}
  /* panel derecho con divisor */
  .relative.grid.lg\:grid-cols-2>div:last-child{grid-area:1/2;justify-content:flex-start!important;padding:0 70px 0 68px!important;border-left:1px solid var(--border)}
}