/*
  GeoSales - Auth pages (Login / Reset password)
  ------------------------------------------------------------
  - Se apoya en gs-theme.css (clases: .gs-theme-dark / .gs-theme-corporativo)
  - En modo "light" (sin clase), define variables base para que el diseño
    quede alineado a la web interna.
*/

/* Defaults (LIGHT) solo para layout de auth (este CSS se incluye solo en login layout) */
:root {
  --gs-bg: #f3f4f6;
  --gs-surface: #ffffff;
  --gs-surface-2: #f1f5f9;
  --gs-border: rgba(15, 23, 42, 0.12);
  --gs-text: #0f172a;
  --gs-muted: rgba(15, 23, 42, 0.72);
  --gs-link: #1d4ed8;
  --gs-link-hover: #1e40af;
  --gs-accent: #1e4a8a;
  --gs-accent-soft: rgba(30, 74, 138, 0.16);
  --gs-accent-soft-2: rgba(30, 74, 138, 0.24);

  /* RGB helpers para gradientes (no todos los navegadores soportan color-mix) */
  --gs-auth-accent-rgb: 30, 74, 138;
  --gs-auth-accent2-rgb: 59, 130, 246;

  /* Glass panels */
  --gs-auth-left-glass: rgba(255,255,255,0.68);
  --gs-auth-right-glass: rgba(11,43,72,0.62);
  --gs-auth-right-text: rgba(255,255,255,0.92);
  --gs-auth-right-muted: rgba(255,255,255,0.86);
}

/* Ajustes por tema */
html.gs-theme-corporativo {
  --gs-auth-accent-rgb: 90, 42, 130; /* gs-brand-700 */
  --gs-auth-accent2-rgb: 133, 83, 169; /* gs-brand-500 */
  --gs-auth-left-glass: rgba(255,255,255,0.70);
  --gs-auth-right-glass: rgba(58, 19, 93, 0.60);
}

/* Botones primarios en corporativo (auth) - aplica aunque el body aún no tenga la clase */
html.gs-theme-corporativo .gs-login-body .btn-primary {
  background-color: #5a2a82 !important;
  border-color: #5a2a82 !important;
}
html.gs-theme-corporativo .gs-login-body .btn-primary:hover,
html.gs-theme-corporativo .gs-login-body .btn-primary:focus {
  background-color: #4c226f !important;
  border-color: #4c226f !important;
}

html.gs-theme-dark {
  --gs-auth-accent-rgb: 59, 130, 246;
  --gs-auth-accent2-rgb: 147, 197, 253;
  --gs-auth-left-glass: rgba(15, 23, 42, 0.70);
  --gs-auth-right-glass: rgba(2, 6, 23, 0.66);
  --gs-auth-right-text: rgba(229,231,235,0.96);
  --gs-auth-right-muted: rgba(229,231,235,0.82);
}

/* Body base */
.gs-login-body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  background: var(--gs-bg) !important;
  color: var(--gs-text);
  font-size: 19px;
  line-height: 1.4;
}

/* Fondo con imagen (se configura con style="background-image:...") */
.gs-login-bg {
  position: fixed;
  inset: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 0;
  filter: saturate(0.95) contrast(1.05);
}

.gs-login-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1200px 700px at 18% 18%, rgba(255,255,255,.40), rgba(255,255,255,0) 60%),
    radial-gradient(900px 600px at 85% 35%, rgba(var(--gs-auth-accent2-rgb), .28), rgba(var(--gs-auth-accent2-rgb), 0) 65%),
    linear-gradient(180deg, rgba(2,6,23,.10) 0%, rgba(2,6,23,.22) 100%);
  opacity: .55;
  pointer-events: none;
}

.gs-login-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255,255,255,.03);
  pointer-events: none;
}

/* Layout */
.gs-login {
  min-height: 100vh;
  display: flex;
  position: relative;
  z-index: 1;
}

.gs-login__left {
  flex: 0 0 50%;
  max-width: 50%;
  padding: 28px 28px 18px 28px;
  position: relative;
  overflow: hidden;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border-right: 1px solid var(--gs-border);
  background: var(--gs-auth-left-glass);
  display: flex;
  align-items: center;
  justify-content: center;
}

.gs-login__left::before {
  content: '';
  position: absolute;
  inset: -80px;
  background:
    radial-gradient(800px 520px at 30% 25%, rgba(var(--gs-auth-accent-rgb), .16), rgba(var(--gs-auth-accent-rgb), 0) 60%),
    linear-gradient(180deg, rgba(255,255,255,.40) 0%, rgba(255,255,255,.18) 100%);
  filter: blur(14px);
  pointer-events: none;
  opacity: .95;
  z-index: 0;
}

html.gs-theme-dark .gs-login__left::before {
  background:
    radial-gradient(800px 520px at 30% 25%, rgba(var(--gs-auth-accent-rgb), .18), rgba(var(--gs-auth-accent-rgb), 0) 60%),
    linear-gradient(180deg, rgba(15,23,42,.38) 0%, rgba(15,23,42,.22) 100%);
}

.gs-login__left-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 420px;
}

.gs-login__brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 18px;
}

.gs-login__brand img {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

/*
  Logo del sistema en Login
  - Web: el logo debe corresponder al FONDO del panel izquierdo.
    (Fondo claro => logo claro. Fondo oscuro => logo oscuro.)
    En este layout el fondo oscuro solo aplica al tema DARK.
  - Móvil: el panel izquierdo siempre es oscuro (independiente del tema): forzar logo oscuro.
*/
.gs-login__brand .gs-brand-logo {
  display: none;
}

/* Fondo claro (web): light + corporativo */
html:not(.gs-theme-dark) .gs-login__brand .gs-brand-logo--light {
  display: block;
}

/* Dark */
html.gs-theme-dark .gs-login__brand .gs-brand-logo--dark {
  display: block;
}

/* Nota: el logo corporativo NO se usa aquí porque el fondo del panel izquierdo en corporativo es claro */

/* En móvil el panel izquierdo siempre es oscuro: forzar logo oscuro */
@media (max-width: 991.98px){
  .gs-login__brand .gs-brand-logo--dark {
    display: block !important;
  }
  .gs-login__brand .gs-brand-logo--light,
  .gs-login__brand .gs-brand-logo--corp {
    display: none !important;
  }
}

.gs-login__brand-title {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
}

.gs-login__brand-product {
  font-weight: 900;
  letter-spacing: 0.12em;
  font-size: 24px;
  color: var(--gs-text);
}

.gs-login__brand-company {
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--gs-muted);
}

.gs-login__card {
  background: var(--gs-surface);
  border: 1px solid var(--gs-border);
  border-radius: 14px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.12);
  overflow: hidden;
}

html.gs-theme-dark .gs-login__card {
  box-shadow: 0 16px 46px rgba(0, 0, 0, 0.55);
}

.gs-login__title {
  font-size: 2.60rem;
  font-weight: 900;
  color: var(--gs-text);
  margin: 0;
}

.gs-login__subtitle {
  margin-top: 2px;
  font-size: 1.40rem;
  color: var(--gs-muted);
  font-weight: 700;
}

.gs-login__divider {
  height: 1px;
  background: var(--gs-border);
  margin: 14px 0 16px 0;
}

.gs-login__field-label {
  font-size: 1.30rem;
  font-weight: 900;
  letter-spacing: .02em;
  color: var(--gs-text);
  margin-bottom: 8px;
}

.gs-login .form-control {
  height: 56px;
  font-size:  1.25rem;
}

.gs-login .input-group-text {
  background: var(--gs-surface-2);
  border-color: var(--gs-border);
  color: var(--gs-muted);
  font-size: 1.15rem;
}

.gs-login__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 6px;
}

/* Textos pequeños (equilibrio visual dentro del card) */
.gs-login .form-check-label{
  font-size: 1.20rem;
  font-weight: 700;
  color: var(--gs-muted);
}
.gs-login .form-check-input{
  width: 1.20em;
  height: 1.20em;
  margin-top: 0.18em;
}

.gs-login__forgot {
  font-size: 1.30rem;
  font-weight: 800;
  text-decoration: none;
  color: var(--gs-link);
}

.gs-login__forgot:hover { text-decoration: underline; color: var(--gs-link-hover); }

/* Submit: solo dimensiones (el color lo controla btn-primary con gs-theme.css) */
.gs-login__submit {
  height: 66px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 1.52rem;
  letter-spacing: .01em;
}

.gs-login__error { font-size: 1.12rem; }

.gs-login__ecosystem {
  color: var(--gs-muted) !important;
  font-size: 1.20rem;
  line-height: 1.55;
}

.gs-login__footer {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--gs-muted);
  font-size: 1.05rem;
}

.gs-login__footer img {
  height: 18px;
  width: auto;
  opacity: 0.95;
}

.gs-login__right {
  flex: 1 1 50%;
  max-width: 50%;
  padding: 46px 46px;
  position: relative;
  overflow: hidden;
  color: var(--gs-auth-right-text);
  background: var(--gs-auth-right-glass);
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
  border-left: 1px solid rgba(255,255,255,0.12);
  display: flex;
  align-items: center;
  justify-content: center;
}

html.gs-theme-dark .gs-login__right { border-left-color: rgba(255,255,255,0.10); }
html.gs-theme-corporativo .gs-login__right { border-left-color: rgba(255,255,255,0.16); }

.gs-login__right::before {
  content: '';
  position: absolute;
  inset: -120px;
  background:
    radial-gradient(900px 620px at 80% 25%, rgba(var(--gs-auth-accent2-rgb), .28), rgba(var(--gs-auth-accent2-rgb), 0) 60%),
    radial-gradient(700px 520px at 15% 80%, rgba(var(--gs-auth-accent-rgb), .22), rgba(var(--gs-auth-accent-rgb), 0) 65%),
    linear-gradient(135deg, rgba(2,6,23,.35) 0%, rgba(2,6,23,.12) 100%);
  filter: blur(18px);
  pointer-events: none;
  opacity: .95;
  z-index: 0;
}

.gs-login__right-content {
  max-width: 560px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.gs-login__right h2 {
  font-weight: 900;
  font-size: clamp(3.20rem, 2.55rem + 1.35vw, 3.75rem);
  margin: 0 0 14px 0;
  letter-spacing: -0.01em;
}

.gs-login__right p {
  margin: 0 0 22px 0;
  color: var(--gs-auth-right-muted);
  font-size: clamp(1.38rem, 1.22rem + 0.45vw, 1.55rem);
  line-height: 1.65;
}

.gs-login__bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.gs-login__bullets li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.gs-login__bullets i {
  margin-top: 5px;
  color: #22c55e;
  font-size:  1.75em;
}

.gs-login__bullets span {
  color: var(--gs-auth-right-text);
  line-height: 1.55;
  font-size:  clamp(1.32rem, 1.18rem + 0.35vw, 1.50rem);
}

/* Logo VidaSoftware - posiciones por viewport (solo auth) */
.gs-login__vida {
  position: absolute;
  z-index: 5;
  display: flex;
  align-items: center;
}
.gs-login__vida img { height: 34px; width: auto; display: block; }

/* Desktop: esquina inferior derecha del panel derecho */
.gs-login__vida--desktop { right: 24px; bottom: 22px; }

/* Mobile: esquina superior izquierda del panel izquierdo */
.gs-login__vida--mobile { left: 16px; top: 14px; }

@media (max-width: 991.98px){ .gs-login__vida--desktop{ display:none; } }
@media (min-width: 992px){ .gs-login__vida--mobile{ display:none; } }

/* Tema switcher en auth: forzar contraste en tarjeta (sobrescribe override corporativo) */
.gs-login-body .gs-theme-toggle { display: inline-flex; align-items: center; gap: 6px; }
.gs-login-body .gs-theme-btn {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  border: 1px solid var(--gs-border);
  background: var(--gs-surface-2);
  color: var(--gs-text);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.10);
}
.gs-login-body .gs-theme-btn i { font-size: 16px; }
.gs-login-body .gs-theme-btn:hover { filter: brightness(0.98); }
.gs-login-body .gs-theme-btn.is-active {
  background: var(--gs-accent-soft-2);
  border-color: rgba(var(--gs-auth-accent-rgb), .45);
}

/* En el tema corporativo/dark, gs-theme.css fuerza los botones a blanco/transparente.
   En pantallas de auth queremos que siempre se vean sobre la tarjeta (surface). */
html.gs-theme-corporativo .gs-login-body .gs-theme-btn--auth,
html.gs-theme-dark .gs-login-body .gs-theme-btn--auth {
  background: var(--gs-surface-2) !important;
  color: var(--gs-text) !important;
  border-color: var(--gs-border) !important;
}
html.gs-theme-corporativo .gs-login-body .gs-theme-btn--auth.is-active,
html.gs-theme-dark .gs-login-body .gs-theme-btn--auth.is-active {
  background: var(--gs-accent-soft-2) !important;
  border-color: rgba(var(--gs-auth-accent-rgb), .55) !important;
}


/* Reset password page sizing (auth layout) */
.gs-login-body .card h4 { font-size: 2.10rem; }
.gs-login-body .card .text-muted { font-size: 1.25rem; }
.gs-login-body .card .form-label { font-size: 1.30rem; }
.gs-login-body .card .form-control { height: 56px; font-size: 1.25rem; }
.gs-login-body .card .btn { font-size: 1.25rem; font-weight: 900; }

/* Modal "Olvidé mi contraseña" */
#gsForgotModal .modal-content {
  background: var(--gs-surface);
  color: var(--gs-text);
  border: 1px solid var(--gs-border);
  border-radius: 14px;
}
#gsForgotModal .modal-title { font-size: 2.15rem; font-weight: 900; }
#gsForgotModal .modal-body p { font-size: 1.65rem !important; line-height: 1.70; color: var(--gs-muted); }
#gsForgotModal .form-label { font-size: 1.55rem; font-weight: 900; letter-spacing: .02em; }
#gsForgotModal .form-control { height: 60px; font-size: 1.55rem; }
#gsForgotModal .alert { font-size: 1.45rem !important; line-height: 1.55; }
#gsForgotModal .btn { font-size: 1.45rem; font-weight: 900; padding: 0.90rem 1.20rem; border-radius: 12px; }

/* Single auth screens (reset password) */
.gs-login--single .gs-login__right { display: none; }
.gs-login--single .gs-login__left { flex: 1 1 100%; max-width: 100%; border-right: 0; }
.gs-login--single .gs-login__left-inner { max-width: 520px; }

/* Responsive */
@media (max-width: 991.98px){
  .gs-login{ flex-direction: column; }
  .gs-login__right{ display:none; }
  .gs-login__left{ max-width: none; flex: 1 1 auto; padding: 24px 16px; }
  .gs-login__left-inner{ max-width: 460px; margin: 0 auto; }

  /* En móvil, el panel izquierdo debe verse como el panel derecho (fondo oscuro) */
  .gs-login__left{
    background: var(--gs-auth-right-glass);
    border-right: 0;
    color: var(--gs-auth-right-text);
  }
  .gs-login__left::before{
    background:
      radial-gradient(900px 620px at 80% 25%, rgba(var(--gs-auth-accent2-rgb), .28), rgba(var(--gs-auth-accent2-rgb), 0) 60%),
      radial-gradient(700px 520px at 15% 80%, rgba(var(--gs-auth-accent-rgb), .22), rgba(var(--gs-auth-accent-rgb), 0) 65%),
      linear-gradient(135deg, rgba(2,6,23,.35) 0%, rgba(2,6,23,.12) 100%);
    opacity: .95;
  }
  .gs-login__brand-product{ color: var(--gs-auth-right-text); }
  .gs-login__brand-company{ color: var(--gs-auth-right-muted); }
}