:root{
      --brand-primary: #0a6ebd;
      --brand-accent: #13b6ff;
      --brand-dark: #084b80;
      --brand-primary-rgb: 10, 110, 189;
      --brand-dark-rgb: 8, 75, 128;
      --brand-accent-rgb: 19, 182, 255;
      --surface: #ffffff;
      --background: #e6e5e0;
      --border: #e6e9ee;
      --text: #0f172a;
      --text-2: #5b6b7a;
      --muted: #9aa6b2;
      --siac-text: var(--text);
      --siac-muted: var(--muted);
      --login-card-bg-from: #cfceca;
      --login-card-bg-to: #f6f5f0;
      --login-card-bg-from-rgb: 207, 206, 202;
      --login-card-bg-to-rgb: 246, 245, 240;
      --login-card-bg-alpha: 0.74;
      --radius: 4px;
      --shadow-1: 0 2px 8px rgba(2, 26, 44, 0.06);
      --shadow-2: 0 10px 30px rgba(2, 26, 44, 0.12);
      --focus-ring: 0 0 0 3px rgba(19,182,255,.35);
      --sb-collapsed: 72px;
      --sb-expanded: 260px;
      --header-h: 56px;
      --footer-h: 30px;
      --error-color: #1e1f22;
}

@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}
html,body{height:100%}

body{
  margin:0;
  background:var(--background);
  color:var(--text);
  min-height:100vh;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

#bg-snakes{
  position: fixed; inset: 0;
  width: 100vw; height: 100vh;
  display:block;
  z-index: 0;
  pointer-events: none;
}

#overlay{
  background-color: rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(1px);
  z-index: 1200;
}

#spinnerInOverlay{
  text-align: center;
  color: var(--text);
  background: linear-gradient(
    145deg,
    rgba(var(--login-card-bg-from-rgb), 0.92),
    rgba(var(--login-card-bg-to-rgb), 0.92)
  );
  border: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: 0 10px 24px rgba(2, 26, 44, 0.16);
}

#labelSpinner{
  margin-top: .45rem;
  color: var(--text);
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .2px;
}

main.app-main{
  position: relative;
  z-index: 1;      flex:1 1 auto;
  display:flex;
  align-items:center;
  background: transparent;
  padding:2rem 1rem;
  padding-bottom:calc(2rem + var(--footer-h));
}

.main-inner{ width:100%; max-width:1200px; margin:0 auto; }

.logo-wrapper{ text-align:center; }
.brand-logo{ height:80px; max-width:280px; object-fit:contain; }

/* G-01: centrado del formulario de cambio de contraseña */
.auth-center{
  display:flex;
  justify-content:center;
  align-items:center;
  width:100%;
}
.auth-card{
  border-radius: var(--radius);
  background: linear-gradient(145deg, var(--login-card-bg-from), var(--login-card-bg-to));
  box-shadow: 20px 20px 60px #c4c3be, -20px -20px 60px #ffffff;
  border:0;
}

.login-card{
  border-radius: var(--radius);
  background: linear-gradient(145deg, var(--login-card-bg-from), var(--login-card-bg-to));
  box-shadow: 20px 20px 60px #c4c3be, -20px -20px 60px #ffffff;
  border:0; width:100%; max-width:720px;
}
.card-body{ padding:2rem }
.card-footer{ background:transparent; border:0; padding: 0 2rem 2rem }

.input-group-text{background:#fff;border-right:0}
.form-control{border-left:0}
.form-control:focus{box-shadow:var(--focus-ring);border-color:transparent}
.login_btn{border-radius:12px}

.password-toggle { cursor: pointer; background: #fff; border-left: 0; color: #6c757d; }
.invalid-feedback { display: none; width: 100%; margin-top: 0.25rem; font-size: 0.875em; color: var(--error-color); }
.is-invalid { border-color: var(--error-color) !important; }
.is-invalid:focus { box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25) !important; }
.spinner-border-sm { width: 1rem; height: 1rem; }
.btn:disabled { cursor: not-allowed; }

footer.login-footer,
footer.footer-statusbar{
  position:fixed; left:0; right:0; bottom:0; height:var(--footer-h);
  display:flex; align-items:center; justify-content:center; text-align:center;
  font-size: 0.63rem;
  background: linear-gradient(
    145deg,
    rgba(var(--login-card-bg-from-rgb), var(--login-card-bg-alpha)),
    rgba(var(--login-card-bg-to-rgb), var(--login-card-bg-alpha))
  );
  padding:0 1rem; color:#5b6b7a;
  backdrop-filter:saturate(120%) blur(2px);
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  z-index: 10;
}
footer.login-footer a,
footer.footer-statusbar a{ color:#0a6ebd; text-decoration:none }
footer.login-footer a:hover,
footer.footer-statusbar a:hover{ text-decoration:underline }

.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width: 767.98px) {
  .login-card { max-width: 100%; }
  .logo-wrapper { margin-bottom: 1.5rem; }
  .brand-logo { height: 56px; max-width: 200px; }
}

.btn-primary{
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-primary);
  --bs-btn-border-color: var(--brand-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-focus-shadow-rgb: var(--brand-primary-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-accent);
  --bs-btn-active-border-color: var(--brand-accent);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--brand-primary);
  --bs-btn-disabled-border-color: var(--brand-primary);
}

.btn-secondary{
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--brand-dark);
  --bs-btn-border-color: var(--brand-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-primary);
  --bs-btn-hover-border-color: var(--brand-primary);
  --bs-btn-focus-shadow-rgb: var(--brand-dark-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-accent);
  --bs-btn-active-border-color: var(--brand-accent);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--brand-dark);
  --bs-btn-disabled-border-color: var(--brand-dark);
}

.btn-outline-secondary{
  --bs-btn-color: var(--brand-dark);
  --bs-btn-border-color: var(--brand-dark);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--brand-dark);
  --bs-btn-hover-border-color: var(--brand-dark);
  --bs-btn-focus-shadow-rgb: var(--brand-dark-rgb);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--brand-primary);
  --bs-btn-active-border-color: var(--brand-primary);
  --bs-btn-disabled-color: var(--brand-dark);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--brand-dark);
}