/* Autenticación: login y recuperación de acceso. */
.eva-auth {
  background: var(--eva-bg);
  min-height: 100vh;
}

/* ==========================================================================
   Ingreso (login) — panel dividido: fotografía real del campus + formulario.
   Paleta muestreada de la propia foto institucional (azul de estructuras,
   tejas terracota, cielo/neblina de montaña) en vez de una identidad genérica.
   ========================================================================== */

.eva-auth-login {
  --auth-ink: #101917;
  --auth-ink-soft: #4d5c58;
  --auth-ink-faint: #7c8985;
  --auth-paper: var(--eva-border-soft);
  --auth-surface: #ffffff;
  --auth-line: #d8dfda;
  --auth-deep: #0b2338;
  --auth-deep-2: #163f57;
  --auth-accent: #2563eb;
  --auth-accent-ink: var(--eva-primary-dark);
  --auth-clay: #b5562f;
  /* Las familias se declaran una sola vez en eva-theme.css. */
  --font-auth-display: 'Encode Sans Expanded', var(--eva-font-sans);
  --font-auth-body: var(--eva-font-sans);
  --font-auth-mono: var(--eva-font-mono);
  background: var(--auth-paper);
  font-family: var(--font-auth-body);
}

.eva-login {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  min-height: 100vh;
}

/* ---------- Panel visual (fotografía del campus) ---------- */

.eva-login-visual {
  background: var(--auth-deep);
  min-height: 100vh;
  overflow: hidden;
  position: relative;
}

.eva-login-photo {
  height: 100%;
  inset: 0;
  object-fit: cover;
  object-position: center 38%;
  position: absolute;
  width: 100%;
}

.eva-login-scrim {
  background:
    linear-gradient(180deg, rgba(9, 22, 36, .18) 0%, rgba(10, 27, 43, .38) 46%, rgba(8, 21, 34, .93) 100%),
    linear-gradient(90deg, rgba(8, 21, 34, .55) 0%, rgba(8, 21, 34, 0) 38%);
  inset: 0;
  position: absolute;
}




/* El bloque llegaba a ocupar la mitad de la foto en escritorio y a desbordar
   la franja en movil. Se limita su altura y se compacta la tipografia para
   que la fotografia siga siendo lo que domina el panel. */
/* Centrado en horizontal pero apoyado en la base de la fotografia. */
.eva-login-visual-content {
  align-items: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  inset: 0;
  justify-content: flex-end;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.75rem, 4vw, 3.25rem) clamp(1.75rem, 3.2vw, 2.75rem);
  position: absolute;
  text-align: center;
  z-index: 2;
}

.eva-login-region {
  color: var(--eva-primary-tint);
  display: block;
  font-family: var(--font-auth-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .1em;
  margin-bottom: .5rem;
  text-transform: uppercase;
}

.eva-login-visual-content h2 {
  font-family: var(--font-auth-display);
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.25;
  margin: 0 0 .5rem;
  max-width: 24ch;
  text-wrap: balance;
}

.eva-login-visual-content p {
  color: rgba(255, 255, 255, .78);
  font-size: .92rem;
  line-height: 1.6;
  margin: 0;
  max-width: 38ch;
}

/* Dato institucional concreto: sustituye a la silueta decorativa que habia
   antes y aporta informacion real a quien llega por primera vez. */
.eva-login-facts {
  border-top: 1px solid rgba(255, 255, 255, .16);
  margin: 1.35rem auto 0;
  max-width: 42ch;
  padding-top: 1.1rem;
}

.eva-login-facts dt {
  color: rgba(255, 255, 255, .62);
  font-family: var(--font-auth-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .12em;
  margin-bottom: .3rem;
  text-transform: uppercase;
}

.eva-login-facts dd {
  color: rgba(255, 255, 255, .9);
  font-size: .84rem;
  font-weight: 500;
  line-height: 1.5;
  margin: 0;
  max-width: 40ch;
}

/* ---------- Panel de formulario ---------- */

.eva-login-panel {
  align-items: center;
  background: var(--auth-surface);
  display: flex;
  justify-content: center;
  padding: clamp(2rem, 5vw, 3.5rem);
}

.eva-login-panel-inner {
  animation: evaAuthEnter 380ms ease-out both;
  max-width: 25.5rem;
  width: 100%;
}

.eva-login-header {
  margin-bottom: 1.9rem;
  text-align: center;
}

/* Solo se centra el encabezado: las etiquetas de los campos siguen alineadas
   a la izquierda, que es donde el ojo las busca al rellenar un formulario. */

.eva-login-eyebrow {
  align-items: center;
  color: var(--auth-accent-ink);
  display: inline-flex;
  font-family: var(--font-auth-mono);
  font-size: .72rem;
  font-weight: 600;
  gap: .55rem;
  letter-spacing: .12em;
  margin-bottom: .9rem;
  text-transform: uppercase;
}

.eva-login-eyebrow::before {
  background: var(--auth-clay);
  content: "";
  height: 2px;
  width: 1.5rem;
}

.eva-login-header h1 {
  color: var(--auth-ink);
  font-family: var(--font-auth-display);
  font-size: clamp(2rem, 3.6vw, 2.5rem);
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 .5rem;
}

.eva-login-header p {
  color: var(--auth-ink-soft);
  margin: 0 auto;
  max-width: 32ch;
}

.eva-auth-login .form-label {
  color: var(--auth-ink);
  font-weight: 600;
}

.eva-auth-login .form-control,
.eva-auth-login .input-group-text,
.eva-auth-login .input-group .btn {
  border-color: var(--auth-line);
  min-height: 3.25rem;
}

.eva-auth-login .form-control {
  font-family: var(--font-auth-body);
}

.eva-auth-login .input-group-text {
  background: var(--eva-surface-soft);
  color: var(--auth-ink-faint);
}

.eva-auth-login .form-control:focus {
  border-color: var(--auth-accent);
  box-shadow: 0 0 0 .2rem rgba(37, 99, 235, .14);
}

.eva-auth-login .form-control:focus + .btn,
.eva-auth-login .input-group:focus-within .input-group-text {
  border-color: var(--auth-accent);
}

.eva-auth-login a {
  color: var(--auth-accent-ink);
}

.eva-auth-login .alert {
  border: 0;
  border-left: .25rem solid currentColor;
  border-radius: .65rem;
  font-size: .88rem;
}

/* El boton heredaba .btn-lg (20px): demasiado grande junto a campos de 16px.
   Se fija una escala coherente con el resto del formulario. */
.eva-auth-login #btnSubmit {
  background: var(--auth-accent-ink);
  border: 0;
  border-radius: .6rem;
  box-shadow: 0 .35rem .9rem rgba(18, 62, 107, .22);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .01em;
  min-height: 3.05rem;
  transition: background-color var(--eva-duration-fast) ease, box-shadow var(--eva-duration-fast) ease;
}

.eva-auth-login #btnSubmit:hover:not(:disabled) {
  background: #0f3557;
  box-shadow: 0 .5rem 1.15rem rgba(18, 62, 107, .3);
}

.eva-auth-login #btnSubmit:disabled { opacity: .72; }

/* Nota de seguridad: en un acceso institucional aporta confianza y explica
   por que no deben compartirse las credenciales. */
.eva-login-secure {
  align-items: flex-start;
  color: var(--auth-ink-faint);
  display: flex;
  font-size: .78rem;
  gap: .5rem;
  line-height: 1.5;
  margin: 1.1rem 0 0;
}

.eva-login-secure i { color: var(--auth-accent); padding-top: .15rem; }

/* ---------- Adaptación de pantalla ---------- */

@media (max-width: 991.98px) {
  .eva-login {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .eva-login-visual {
    height: clamp(220px, 46vw, 320px);
    min-height: 0;
  }

  /* Con la foto reducida a franja solo cabe el nombre: el parrafo y la lista
     de programas la tapaban por completo. */
  .eva-login-visual-content p,
  .eva-login-facts {
    display: none;
  }

  .eva-login-visual-content {
    padding: 1rem 1.35rem;
  }

  .eva-login-visual-content h2 {
    font-size: 1.05rem;
    margin-bottom: 0;
  }

  .eva-login-panel {
    padding: 2.25rem 1.5rem 3rem;
  }
}

/* Movil en horizontal: apenas hay alto, y la banda de foto empujaba el
   formulario fuera de la pantalla. Se recupera la disposicion en dos
   columnas para que los campos queden visibles sin desplazarse. */
@media (max-height: 500px) and (orientation: landscape) and (min-width: 600px) {
  .eva-login {
    grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
    min-height: 100vh;
  }

  .eva-login-visual {
    height: auto;
    min-height: 100%;
  }

  .eva-login-visual-content {
    padding: 1.1rem 1.25rem 1.25rem;
  }

  .eva-login-visual-content h2 { font-size: 1.1rem; margin-bottom: 0; }
  .eva-login-facts,
  .eva-login-region { display: none; }

  .eva-login-panel { padding: 1.25rem 1.5rem; }
  .eva-login-header { margin-bottom: 1rem; }
  .eva-login-header h1 { font-size: 1.5rem; }
  .eva-login-header p,
  .eva-login-secure { display: none; }

  .eva-auth-login .form-control,
  .eva-auth-login .input-group-text,
  .eva-auth-login .input-group .btn { min-height: 2.7rem; }
}

/* Horizontal en pantallas estrechas: no cabe la segunda columna, se reduce
   la foto a una franja para que el formulario quede a la vista. */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 599.98px) {
  .eva-login-visual { height: 110px; }
  .eva-login-visual-content { padding: .75rem 1rem .9rem; }
  .eva-login-visual-content h2 { font-size: 1rem; margin: 0; }
  .eva-login-facts,
  .eva-login-region { display: none; }
  .eva-login-panel { padding: 1.5rem 1.25rem 2rem; }
  .eva-login-header { margin-bottom: 1rem; }
  .eva-login-header h1 { font-size: 1.45rem; }
  .eva-login-header p,
  .eva-login-secure { display: none; }
}

/* Alturas minimas (moviles antiguos en horizontal): la foto deja de aportar
   y se retira para que quepan los campos sin desplazarse. */
@media (max-height: 400px) and (orientation: landscape) {
  .eva-login-visual { display: none; }
  .eva-login { grid-template-columns: 1fr; }
  .eva-login-panel { padding: 1.1rem 1.25rem; }
  .eva-login-panel-inner { max-width: 28rem; }
  .eva-login-header { margin-bottom: .85rem; }
  .eva-login-header h1 { font-size: 1.35rem; margin-bottom: .2rem; }
  .eva-login-header p,
  .eva-login-secure { display: none; }
  .eva-auth-login form.vstack { gap: .65rem !important; }
  .eva-auth-login .form-control,
  .eva-auth-login .input-group-text,
  .eva-auth-login .input-group .btn { min-height: 2.55rem; }
  .eva-auth-login #btnSubmit { min-height: 2.7rem; }
}

@media (max-width: 575.98px) {

  .eva-login-visual-content h2 {
    max-width: none;
  }

  .eva-login-region {
    margin-bottom: .5rem;
  }
}

.eva-auth-recovery {
  align-items: center;
  background:
    radial-gradient(circle at 15% 10%, rgba(14, 165, 233, 0.14), transparent 24rem),
    radial-gradient(circle at 90% 90%, rgba(79, 70, 229, 0.12), transparent 26rem),
    var(--eva-bg);
  display: flex;
}

.eva-auth-recovery .login-page {
  width: 100%;
}

.eva-auth-recovery .login-shell {
  animation: evaAuthEnter 300ms ease-out both;
  background: var(--eva-surface);
  border: 1px solid var(--eva-border) !important;
  border-radius: var(--eva-radius-lg);
  box-shadow: var(--eva-shadow-lg) !important;
  margin-inline: auto;
  max-width: 34rem;
  padding: 0 !important;
  overflow: hidden;
}

.eva-auth-recovery .login-shell::before {
  background: var(--eva-gradient);
  content: "";
  display: block;
  height: 0.4rem;
}

.eva-auth-recovery .login-side-panel {
  display: none;
}

.eva-auth-recovery .login-card {
  padding: clamp(1.5rem, 4vw, 2.75rem);
}

.eva-auth-recovery .login-card-head {
  margin-bottom: 1.5rem;
  text-align: center;
}

.eva-auth-recovery .login-kicker {
  color: var(--eva-primary);
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}

.eva-auth-recovery .login-card-head h1 {
  color: var(--eva-text);
  font-size: clamp(1.65rem, 4vw, 2.1rem);
  font-weight: 700;
}

.eva-auth-recovery .login-card-head p {
  color: var(--eva-muted);
  margin: 0.75rem auto 0;
  max-width: 28rem;
}

.eva-auth-recovery .login-title-line {
  background: var(--eva-gradient);
  border-radius: 999px;
  display: block;
  height: 0.22rem;
  margin: 0.8rem auto;
  width: 3.5rem;
}

.eva-auth-recovery .login-field {
  position: relative;
}

.eva-auth-recovery .login-field label {
  color: var(--eva-text);
  display: block;
  font-weight: 600;
  margin-bottom: .45rem;
}

.eva-auth-recovery .login-field input {
  background: #fff;
  border: 1px solid #d7e0ec;
  border-radius: .75rem;
  display: block;
  min-height: 3.05rem;
  padding: .7rem .85rem;
  transition: border-color var(--eva-duration-fast), box-shadow var(--eva-duration-fast);
  width: 100%;
}

.eva-auth-recovery .login-field input:focus {
  border-color: var(--eva-primary);
  box-shadow: 0 0 0 .22rem rgba(37,99,235,.13);
  outline: 0;
}

.eva-auth-recovery .login-input-icon {
  display: none;
}

.eva-auth-recovery .login-submit {
  background: var(--eva-gradient);
  border: 0;
  color: #fff;
  font-weight: 600;
  margin-top: 0.4rem;
  min-height: 3rem;
  width: 100%;
}

.eva-auth-recovery .login-back-link {
  display: block;
  margin-top: 1.25rem;
  text-align: center;
  text-decoration: none;
}

.eva-auth-recovery .password-reset-debug a {
  display: block;
  overflow-wrap: anywhere;
}

.eva-auth-recovery .alert.success { background: #dcfce7; color: #087443; }
.eva-auth-recovery .alert.error { background: #fee2e2; color: #b42318; }
.eva-auth-recovery .alert.warning { background: #fff7df; color: #8a5600; }

@keyframes evaAuthEnter {
  from { opacity: 0; transform: translateY(0.8rem) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Aviso de Bloq Mayus en el campo de contrasena. */
.eva-login-caps {
  align-items: center;
  color: #a3510a;
  display: flex;
  font-size: .78rem;
  gap: .4rem;
  margin: .5rem 0 0;
}
.eva-login-caps[hidden] { display: none; }
.eva-login-caps i { color: #c2740c; }