/* ── Branded interchange loader ───────────────────────────────────────────────────
   Full-screen overlay shown on every auth handoff — signing in, signing out, and the
   jump to Credicorp SSO — so the "corporate interchange" moment is branded instead of a
   blank white flash. Real Credicorp logo (mark #1) on the default brand; a styled
   wordmark on a sub-brand surface (never the Credicorp mark on a sub-brand — brand rule).

   External stylesheet (served from 'self') so it is CSP-safe on every page including the
   pre-auth login. hidden by default; behaviour ships in /assets/js/modules/brand-loader.js.
   The background uses the brand tokens so a sub-brand portal (e.g. Cashtrain green) tints
   its own loader; navy is the Credicorp fallback. */
.brand-loader {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background:
    radial-gradient(120% 120% at 50% 0%,
      var(--c-brand, #003366) 0%,
      var(--c-navy-dark, #001a33) 100%);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .28s ease, visibility .28s ease;
}
.brand-loader.is-on { opacity: 1; visibility: visible; }
.brand-loader[hidden] { display: none; }
.brand-loader__panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.3rem;
  max-width: 23rem;
  text-align: center;
  color: #fff;
}
.brand-loader__logo {
  width: 190px;
  max-width: 62vw;
  height: auto;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .25));
}
.brand-loader__wordmark {
  font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  font-weight: 700;
  font-size: 2rem;
  letter-spacing: -.01em;
  color: #fff;
}
.brand-loader__ring {
  width: 48px;
  height: 48px;
  animation: brand-loader-spin .9s linear infinite;
}
.brand-loader__ring circle { stroke: rgba(255, 255, 255, .92); }
.brand-loader__msg {
  margin: 0;
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.brand-loader__sub {
  margin: 0;
  font-size: .8rem;
  color: rgba(255, 255, 255, .72);
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.brand-loader__sub svg { width: 13px; height: 13px; opacity: .85; }
@keyframes brand-loader-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .brand-loader__ring { animation: none; }
  .brand-loader { transition: none; }
}