/* ============================================================
   login.css — Rediseño de la pantalla de login/registro.
   Vive solo en public/login.html. No toca .campo / .boton / .tarjeta
   globales (usados en el resto del sistema): define sus propias
   clases login__* para no afectar ninguna otra página.
   ============================================================ */

.pagina-login {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 32px 16px;
  font-family: 'Manrope', var(--serif);
  background: linear-gradient(180deg, #EEF4F8 0%, #E4EDF3 100%);
}

/* ---- Decoración geométrica de fondo ---- */
.login__decor { position: absolute; z-index: 0; pointer-events: none; }
.login__decor--superior { top: 0; left: 0; width: 46vw; max-width: 460px; }
.login__decor--inferior { bottom: 0; right: 0; width: 50vw; max-width: 520px; }
.login__decor svg { width: 100%; height: auto; display: block; }

/* ---- Selector de idioma (decorativo) ---- */
.login__idioma {
  position: absolute; top: 24px; right: 24px; z-index: 2;
  display: flex; align-items: center; gap: 6px;
  background: #fff; border-radius: 999px;
  padding: 8px 14px;
  font-size: 0.8125rem; font-weight: 600; color: #14213D;
  box-shadow: 0 6px 16px rgba(15, 42, 68, 0.08);
}
.login__idioma-bandera { font-size: 1rem; line-height: 1; }

/* ---- Envoltura: tarjeta + panel lateral ---- */
.login__envoltura {
  position: relative; z-index: 1;
  display: flex;
  align-items: center;
  gap: 56px;
  max-width: 1040px;
  width: 100%;
}
@media (max-width: 980px) {
  .login__envoltura { flex-direction: column; gap: 24px; }
}

/* ---- Tarjeta ---- */
.pagina-login .tarjeta-login {
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 30px 60px rgba(15, 42, 68, 0.14);
  padding: 40px 40px 32px;
  margin: 0;
}
@media (max-width: 520px) {
  .pagina-login .tarjeta-login { padding: 28px 20px 24px; border-radius: 18px; }
}

.login__logo {
  display: flex; align-items: center; gap: 12px;
  justify-content: center;
  text-decoration: none;
  margin-bottom: 24px;
}
.login__logo-texto { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.login__logo-nombre { font-family: 'Manrope', sans-serif; font-weight: 800; font-size: 1.5rem; color: #14213D; }
.login__logo-eslogan { font-size: 0.75rem; color: #6B7A8D; font-weight: 500; }

.pagina-login .tarjeta-login h1 {
  font-family: 'Manrope', sans-serif;
  font-size: 1.6rem;
  font-weight: 800;
  color: #14213D;
  text-align: center;
  margin: 0 0 8px;
}
.login__subtitulo {
  text-align: center;
  color: #6B7A8D;
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0 0 26px;
}

/* ---- Campos ---- */
.login__campo { display: block; margin-bottom: 18px; }
.login__campo-etiqueta {
  display: block;
  font-size: 0.875rem; font-weight: 600;
  color: #14213D;
  margin-bottom: 7px;
}
.login__campo-caja {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1px solid #DCE4EC;
  border-radius: 12px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.login__campo-caja:focus-within {
  border-color: #1B6B72;
  box-shadow: 0 0 0 3px rgba(27, 107, 114, 0.12);
}
.login__campo-icono {
  display: flex; align-items: center; justify-content: center;
  color: #9AA8B8;
  padding-left: 14px;
}
.login__campo-caja input {
  flex: 1; min-width: 0;
  border: none; background: transparent; outline: none;
  font-family: 'Manrope', sans-serif;
  font-size: 0.9375rem;
  color: #14213D;
  padding: 13px 14px 13px 10px;
}
.login__campo-caja input::placeholder { color: #A9B4C0; }
.login__campo-ojo {
  background: none; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0 14px;
  color: #9AA8B8;
}
.login__campo-ojo:hover { color: #1B6B72; }

/* ---- Fila: recordarme / olvidaste contraseña ---- */
.login__fila-extra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin: 4px 0 22px;
}
.login__recordarme {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.8438rem; color: #45536A; font-weight: 500;
  cursor: pointer;
}
.login__recordarme input,
.login__terminos-fila input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.login__recordarme-caja,
.login__terminos-caja {
  width: 19px; height: 19px; flex-shrink: 0;
  border-radius: 5px;
  border: 1.5px solid #C5D0DB;
  display: flex; align-items: center; justify-content: center;
  color: transparent;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.login__recordarme input:checked + .login__recordarme-caja,
.login__terminos-fila input:checked + .login__terminos-caja {
  background: #1B6B72; border-color: #1B6B72; color: #fff;
}
.login__olvidaste { font-size: 0.8438rem; font-weight: 600; color: #1B6B72; text-decoration: none; }
.login__olvidaste:hover { text-decoration: underline; }

/* ---- Términos (modo registro) ---- */
.login__campo--terminos { margin-bottom: 20px; }
.login__terminos-fila { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; }
.login__terminos-fila .login__terminos-caja { margin-top: 1px; }
.login__terminos-texto { font-size: 0.8125rem; color: #6B7A8D; line-height: 1.45; }
.login__terminos-texto a { color: #1B6B72; }

/* ---- Botón Entrar ---- */
.login__boton-entrar {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #1B6B72;
  color: #fff;
  border: none;
  border-radius: 14px;
  padding: 15px 20px;
  font-family: 'Manrope', sans-serif;
  font-size: 1rem; font-weight: 700;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.login__boton-entrar:hover { background: #175A60; transform: translateY(-1px); }
.login__boton-entrar:active { transform: translateY(0); }

/* ---- Separador "o" (redefine el existente, exclusivo de login) ---- */
.pagina-login .separador-login { color: #A9B4C0; font-size: 0.8125rem; margin: 20px 0; }
.pagina-login .separador-login::before,
.pagina-login .separador-login::after { background: #E4EAF0; }

/* ---- Botón de Google (redefine el existente, exclusivo de login) ---- */
.pagina-login .boton--google {
  border-radius: 14px;
  border-color: #DCE4EC;
  font-family: 'Manrope', sans-serif;
  font-weight: 700;
  color: #14213D;
  padding: 13px 20px;
}
.pagina-login .boton--google:hover { background: #F5F8FA; }

.login__nota-google {
  text-align: center;
  font-size: 0.75rem !important;
  font-style: normal !important;
  color: #8894A3 !important;
  margin: 12px 0 0;
}
.login__nota-google a { color: #1B6B72; }

.login__alternar {
  text-align: center;
  font-size: 0.875rem;
  color: #45536A;
  margin: 18px 0 0;
}
.login__alternar a { color: #1B6B72; font-weight: 700; text-decoration: none; margin-left: 4px; }
.login__alternar a:hover { text-decoration: underline; }

/* ---- Panel lateral (manuscrito + mensaje vertical) ---- */
.login__lateral {
  display: flex;
  align-items: center;
  gap: 40px;
  flex: 1;
  min-width: 0;
}
@media (max-width: 980px) { .login__lateral { display: none; } }

.login__manuscrito {
  font-family: 'Caveat', cursive;
  font-size: 1.75rem;
  color: #14213D;
  line-height: 1.15;
  transform: rotate(-3deg);
}

.login__mensaje {
  display: flex; align-items: center; gap: 14px;
  font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.18em;
  color: #14213D;
}
.login__mensaje span { display: block; }
.login__mensaje-linea { width: 28px; height: 2px; background: #1B6B72; flex-shrink: 0; }

/* ---- Pie de página ---- */
.login__pie {
  position: relative; z-index: 1;
  font-size: 0.8125rem;
  color: #6B7A8D;
  text-align: center;
}
.login__pie a { color: #6B7A8D; text-decoration: none; }
.login__pie a:hover { color: #1B6B72; }