/* Guía FIT | Portada de acceso responsiva (13/oct/2026).
   Hoja independiente para no alterar mapa 3D, horarios, chat o notificaciones. */

/* La anchura del login y del croquis se calcula con las mismas columnas. */
@media (min-width: 1051px) {
  .auth-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 710px));
    grid-template-rows: auto auto auto minmax(0, auto) auto;
    align-content: start;
    align-items: start;
    justify-content: center;
    column-gap: clamp(22px, 3.8vw, 66px);
    row-gap: clamp(12px, 1.3vw, 20px);
    padding: clamp(26px, 3vw, 50px) clamp(20px, 3.6vw, 68px);
  }
  .auth-aside { display: contents; }
  .auth-aside > .eyebrow { grid-column: 1; grid-row: 1; }
  .auth-aside > h1 { grid-column: 1; grid-row: 2; }
  .auth-aside > .intro { grid-column: 1; grid-row: 3; }
  .auth-aside > .login-campus-map {
    grid-column: 1;
    grid-row: 4;
    align-self: stretch;
    width: 100%;
    max-width: none;
    margin: 0;
    min-width: 0;
  }
  .auth-aside > .aside-bottom { grid-column: 1; grid-row: 5; }
  .auth-main {
    grid-column: 2;
    grid-row: 4;
    padding: 0;
    align-self: start !important;
    align-items: stretch;
    width: 100%;
    min-width: 0;
    height: auto !important;
    min-height: 0 !important;
  }
  .auth-card {
    width: 100%;
    min-width: 0;
    max-width: none;
    box-sizing: border-box;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    padding: clamp(24px, 2.6vw, 42px);
    font-size: clamp(.98rem, 1.02vw, 1.08rem);
  }
  .auth-card .auth-foot { margin-top: 20px !important; padding-top: 0 !important; }
}

/* Tipografía coherente en la portada y en el formulario. */
.auth-aside > h1 {
  font-size: clamp(2.8rem, 5vw, 5.5rem);
  line-height: 1.05;
  overflow-wrap: normal;
}
.auth-aside > .intro {
  font-size: clamp(1.02rem, 1.25vw, 1.19rem);
  line-height: 1.48;
}
.auth-card h2 {
  font-size: clamp(1.9rem, 2.35vw, 2.55rem);
  line-height: 1.13;
  letter-spacing: -.045em;
  margin: 14px 0 9px;
  overflow-wrap: break-word;
}
.auth-card > .muted {
  font-size: clamp(.99rem, 1.2vw, 1.15rem);
  line-height: 1.45;
  margin: 0;
}
.auth-card > .icon-circle { width: 56px; height: 56px; flex-shrink: 0; }
.auth-card > .icon-circle svg { width: 24px; height: 24px; }
.auth-card .auth-tabs { margin: 17px 0 13px; }
.auth-card .auth-tabs button { min-height: 47px; font-size: 1rem; }
.auth-card .field { margin: 13px 0; gap: 7px; }
.auth-card .field label { font-size: .98rem; }
.auth-card .field input { min-height: 51px; font-size: 1rem; }
.auth-card .btn { min-height: 50px; font-size: 1rem; }
.auth-card .auth-links { margin-top: 0; margin-bottom: 14px; }
.auth-card .or { margin: 16px 0; }
.auth-card .auth-foot { line-height: 1.45; font-size: .8rem; }
.login-campus-map > .cm-campus { width: 100%; }

/* Tablet: apilar contenido para que el login nunca quede en una columna estrecha. */
@media (min-width: 761px) and (max-width: 1050px) {
  .auth-layout {
    display: grid;
    grid-template-columns: minmax(0, 760px);
    grid-template-rows: repeat(6, auto);
    align-content: start;
    justify-content: center;
    gap: 15px;
    padding: 28px clamp(20px, 5vw, 52px) 38px;
  }
  .auth-aside { display: contents; }
  .auth-aside > .eyebrow { grid-column: 1; grid-row: 1; }
  .auth-aside > h1 { grid-column: 1; grid-row: 2; font-size: clamp(2.8rem, 6vw, 4.2rem); }
  .auth-aside > .intro { grid-column: 1; grid-row: 3; }
  .auth-main { grid-column: 1; grid-row: 4; padding: 0; min-width: 0; width: 100%; }
  .auth-card {
    width: 100%;
    max-width: none;
    padding: clamp(26px, 4.5vw, 40px);
    display: block;
  }
  .auth-aside > .login-campus-map {
    grid-column: 1;
    grid-row: 5;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
  }
  .auth-aside > .aside-bottom { grid-column: 1; grid-row: 6; width: 100%; }
}

/* Teléfono: acceso primero, mapa visible debajo sin desbordar el ancho. */
@media (max-width: 760px) {
  .auth-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto;
    gap: 18px;
    padding: 18px clamp(12px, 3.8vw, 25px) 30px;
    min-width: 0;
  }
  .auth-aside { display: contents; }
  .auth-aside > .eyebrow,
  .auth-aside > h1,
  .auth-aside > .intro,
  .auth-aside > .aside-bottom { display: none; }
  .auth-main {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    padding: 0;
    align-items: stretch;
  }
  .auth-card {
    width: 100%;
    max-width: none;
    padding: clamp(22px, 5.5vw, 30px);
    display: block;
    min-width: 0;
  }
  .auth-card h2 { font-size: clamp(1.7rem, 5.6vw, 2.1rem); }
  .auth-card > .muted { font-size: 1rem; }
  .auth-card .auth-tabs { margin: 18px 0 14px; }
  .auth-card .auth-tabs button { font-size: .95rem; }
  .auth-card .field { margin: 14px 0; }
  .auth-aside > .login-campus-map {
    display: block;
    grid-column: 1;
    grid-row: 2;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
  }
  .login-campus-map .cm-campus { border-radius: 19px; }
  .login-campus-map .cm-toolbar { padding: 9px; }
  .login-campus-map .cm-viewport { height: clamp(230px, 64vw, 340px); }
  .login-campus-map .cm-modes button,
  .login-campus-map .cm-controls button { font-size: .75rem; }
}
@media (max-width: 390px) {
  .auth-layout { padding-inline: 10px; }
  .auth-card { padding: 21px 18px; }
  .auth-card h2 { font-size: 1.68rem; }
  .auth-card .auth-tabs button { font-size: .88rem; padding: 9px 6px; }
  .login-campus-map .cm-toolbar { gap: 5px; }
  .login-campus-map .cm-controls,
  .login-campus-map .cm-modes { gap: 3px; }
}

/* El adorno absoluto original de .auth-aside deja 160px extra de scroll
   horizontal al usar display:contents. El degradado institucional ya decora el fondo. */
.auth-aside::after { display: none !important; content: none !important; }