/* login-modern.css — rediseño de la pantalla de acceso (v40)
   Panel visual tecnológico + tarjeta de formulario limpia. */

body.login-modern{
  margin:0;
  min-height:100dvh;
  background:#070c16;
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}

body.login-modern .auth-wrap{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  min-height:100dvh;
  width:100%;
  max-width:none;
  margin:0;
  padding:0;
  gap:0;
  background:transparent;
  box-shadow:none;
  border-radius:0;
  overflow:hidden;
}

/* ---------- Panel visual ---------- */
body.login-modern .auth-hero{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:3rem;
  background:#070c16 url('../img/login-art.jpg') center/cover no-repeat;
  color:#eaf6ff;
  overflow:hidden;
  border-radius:0;
}
body.login-modern .auth-hero::before{
  content:"";
  position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 25% 20%, rgba(8,16,32,.05), rgba(4,8,18,.62) 78%),
    linear-gradient(120deg, rgba(4,9,20,.5), rgba(4,9,20,.1));
}
body.login-modern .auth-hero::after{
  content:"";
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(120,210,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,210,255,.06) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(80% 70% at 50% 50%, #000 30%, transparent 100%);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 50%, #000 30%, transparent 100%);
}

body.login-modern .hero-title{
  position:relative;
  z-index:2;
  text-align:center;
  max-width:34rem;
}
body.login-modern .hero-title .hero-kicker{
  display:inline-block;
  font-family:'Barlow Condensed','Inter',sans-serif;
  font-size:.82rem;
  letter-spacing:.42em;
  text-transform:uppercase;
  color:#7fe3ff;
  padding:.35rem .9rem;
  border:1px solid rgba(127,227,255,.35);
  border-radius:999px;
  background:rgba(10,25,45,.45);
  backdrop-filter:blur(6px);
  margin-bottom:1.6rem;
}
body.login-modern .hero-title h2{
  font-family:'Barlow Condensed','Inter',sans-serif;
  font-weight:700;
  font-size:clamp(3rem,6vw,5.4rem);
  line-height:.95;
  letter-spacing:.02em;
  margin:0;
  color:#fff;
  text-transform:uppercase;
  text-shadow:0 0 42px rgba(56,178,255,.45);
}
body.login-modern .hero-title .hero-rule{
  width:5.5rem;height:2px;margin:1.6rem auto 0;
  background:linear-gradient(90deg,transparent,#38b6ff,transparent);
}

/* ---------- Lado del formulario ---------- */
body.login-modern .auth-form-side{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2.5rem 1.5rem;
  background:#f6f8fb;
}
body.login-modern .auth-card{
  width:100%;
  max-width:26rem;
  background:#fff;
  border:1px solid rgba(15,30,55,.08);
  border-radius:18px;
  padding:2rem 1.9rem 1.8rem;
  box-shadow:0 24px 60px -30px rgba(10,25,55,.45);
}
body.login-modern .auth-card h1{
  font-family:'Barlow Condensed','Inter',sans-serif;
  font-size:1.9rem;
  letter-spacing:.01em;
  margin:.2rem 0 .25rem;
  color:#0f1c2e;
}
body.login-modern .auth-card .sub{
  color:#5c6b80;
  font-size:.92rem;
  margin:0 0 1.25rem;
}
body.login-modern .auth-card .field input{
  border-radius:10px;
}
body.login-modern .auth-card .btn-primary{
  border-radius:10px;
  background:linear-gradient(135deg,#0f2647,#1f6fd0);
  border:none;
  color:#fff;
  font-weight:600;
  letter-spacing:.02em;
  padding:.75rem 1rem;
}
body.login-modern .auth-card .btn-primary:hover{ filter:brightness(1.08); }
body.login-modern .auth-links{ margin-top:1rem; font-size:.88rem; }

/* ---------- Móvil ---------- */
@media (max-width: 900px){
  body.login-modern .auth-wrap{ grid-template-columns:1fr; }
  body.login-modern .auth-hero{
    min-height:38vh;
    padding:2.2rem 1.25rem;
  }
  body.login-modern .hero-title h2{ font-size:clamp(2.2rem,11vw,3.2rem); }
  body.login-modern .hero-title .hero-kicker{ letter-spacing:.3em; margin-bottom:1rem; }
  body.login-modern .auth-form-side{ padding:1.75rem 1rem 2.5rem; }
}