:root{
  --ink:#ffffff; --muted:#d7ebe4; --line:rgba(255,255,255,.14);
  --brand:#2bb24c; --accent:#5dc1b9; --danger:#ff654d;
  --glass: rgba(12,22,19,.55);
  --glass-solid: rgba(12,22,19,.90);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,Segoe UI,Roboto,Arial,sans-serif;color:var(--ink);background:#000}

.page{
  min-height:100%;
  background:
    linear-gradient(180deg,rgba(0,0,0,.45),rgba(0,0,0,.78)),
    url('../img/Fondo-universidad.jpg') center/cover no-repeat fixed;
  padding:18px 18px 26px;
}

/* LOGOS SUPERIORES */
.top-logos{
  display:flex; gap:14px; align-items:center; justify-content:center;
  margin:0 auto 10px; filter: drop-shadow(0 1px 0 rgba(0,0,0,.3));
}
.top-logos img{ height:48px; object-fit:contain; }

/* INTRO TÍTULO */
.intro{ text-align:center; margin:6px auto 18px; max-width:1100px; }
.intro h1{
  font-size:1.9rem; margin:0 0 6px;
  text-shadow:0 1px 1px rgba(0,0,0,.2);
}
.intro__sub{
  color:var(--muted); margin:0; font-size:.98rem;
}

/* ===== LAYOUT CENTRAL, SIMÉTRICO Y CENTRADO ===== */
.layout{
  width:min(1080px,96vw);
  margin:0 auto;
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 520px)); /* dos columnas iguales */
  justify-content: center;   /* centra todo el bloque */
  align-items:start;
  column-gap: 24px;          /* separación justa entre columnas */
}

/* CAJA CRISTALINA LOGIN (DERECHA) */
.glass{
  background:var(--glass);
  border:1px solid var(--line);
  border-radius:22px;
  padding:18px 16px 12px;
  backdrop-filter: blur(12px) saturate(120%);
  box-shadow: 0 10px 40px rgba(0,0,0,.25);
}
@supports not (backdrop-filter: blur(12px)){
  .glass{ background:var(--glass-solid); }
}
.login{
  width:420px;               /* ancho fijo para equilibrio visual */
  justify-self:center;       /* centra la caja dentro de su columna */
}
.login__seal{ height:56px; display:block; margin:4px auto 6px; }
.login__title{ font-size:1.3rem; text-align:center; margin:4px 0 4px; }
.login__sub{ color:var(--muted); text-align:center; margin:0 0 12px; font-size:.92rem; }

.form{ display:grid; gap:10px; }
.field{ display:grid; gap:5px; }
.field > span{ font-size:.9rem; color:var(--muted); }
input{
  height:42px; border-radius:12px; border:1px solid var(--line);
  background:rgba(0,0,0,.25); color:var(--ink); padding:0 12px; outline:none;
}
input::placeholder{ color:rgba(255,255,255,.55) }
input:focus{ border-color:var(--accent) }

/* ===== BOTÓN IMAGEN (MUCHO MÁS PEQUEÑO) ===== */
.btn-img{
  background:transparent; border:0; padding:0; margin:12px auto 0; cursor:pointer;
  display:block; width:100%; text-align:center;
}
.btn-img img{
  width:150px;               /* << tamaño nuevo (más pequeño). Prueba 140px si lo quieres aún menos) */
  height:auto; display:inline-block; border-radius:12px;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.22));
}
.btn-img:disabled{ opacity:.6; cursor:not-allowed; }

.status{ margin-top:8px; font-size:.92rem; color:var(--muted) }
.status.err{ color:var(--danger) }
.login__foot{ margin-top:10px; color:var(--muted); font-size:.8rem; text-align:center }

/* ===== COLUMNA IZQUIERDA (PROMO) ===== */
.promo{
  align-self:center;
  padding:6px 6px;
  justify-self:center;       /* centra el bloque promo en su columna */
  text-align:left;
  max-width:520px;
}
.promo__title{
  font-size:2.0rem; line-height:1.15; margin:0 0 10px;
  text-shadow:0 1px 1px rgba(0,0,0,.22);
}
.promo__lead{
  color:var(--muted); font-size:1.02rem; margin:0 0 16px; max-width:60ch;
}

/* Botones centrados bajo el texto */
.promo__cta{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;    /* << centrado de ambos botones */
}
.imgbtn img{
  height:56px; width:auto; display:block;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.22));
  border-radius:12px;
}

/* ===== RESPONSIVE ===== */
@media (max-width:980px){
  .layout{ grid-template-columns: 1fr; row-gap: 18px; }
  .login{ justify-self:center; }
  .promo{ order:2; text-align:center }
  .promo__lead{ margin-left:auto; margin-right:auto }
}