/* ════════════════════════════════════════════════════════════════════
   SAVA SCHOOL · app.css
   ════════════════════════════════════════════════════════════════════
   ORGANIZACIÓN:
     §1  TOKENS NUEVOS (rediseño 2026-05 · usar en páginas migradas)
     §2  RESET + BASE
     §3  TIPOGRAFÍA — utilidades de display/h/body/eyebrow
     §4  BOTONES NUEVOS — .btn, .btn-primary, .btn-secondary, etc.
     §5  PRIMITIVOS — .section, .container, .card, .divider-gold
     §6  PATRONES Y PLACEHOLDERS — .bg-rays, .photo-placeholder
     §7  MOTION — animations + reveal system
     §8  FOCUS
     ═══════ LEGACY (proyecto Apóstol Pablo · preservar hasta migrar TODAS las páginas) ═══════
     §9   Tokens legacy (--color-primary, --text-dark, etc.)
     §10  Utilidades legacy (.container, .wave-divider)
     §11  Botones legacy (.btn legacy variant)
     §12  Formularios legacy
     §13  Blazor essentials (#blazor-error-ui, .loading-progress, .blazor-error-boundary)
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   §1  TOKENS NUEVOS · Sistema de diseño SAVA School (rediseño 2026-05)
   ════════════════════════════════════════════════════════════════════ */
:root {
  /* Brand */
  --color-brand-red: #A0392E;
  --color-brand-red-dark: #7A2A22;
  --color-brand-red-soft: #C9554A;
  --color-brand-green: #1F4036;
  --color-brand-green-mid: #2E5A4D;
  --color-brand-green-soft: #E8EFEB;
  --color-brand-gold: #D9A441;
  --color-brand-gold-soft: #F5E6C1;
  --color-brand-blue: #1F3A7A;
  --color-brand-blue-mid: #2E5BB5;
  --color-brand-blue-soft: #E0E7F3;
  --color-brand-blue-deep: #0F1F4D;

  /* Neutrals */
  --bg-page: #F4EDE0;
  --bg-paper: #FBF7EE;
  --bg-surface: #FFFFFF;
  --bg-admin: #F8F6F1;
  --text-primary: #1C1917;
  --text-secondary: #44403C;
  /* --text-muted definido también en legacy; el valor nuevo gana por orden de cascade */
  --text-disabled: #A8A29E;
  --border-soft: #E7E0CF;
  --border-medium: #C9BFA8;
  --border-strong: #1F4036;

  /* States */
  --state-success: #2F7D5E;
  --state-warning: #B97A0F;
  --state-danger: #A0392E;
  --state-info: #1F4036;

  /* Type */
  --font-display: 'Crimson Pro', 'Source Serif Pro', Georgia, serif;
  /* --font-body redefinido (legacy era 'Inter') — Inter sigue siendo fallback */

  /* Spacing scale */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --space-9: 96px; --space-10: 128px;

  /* Radius — los nuevos sobreescriben los legacy (valores más conservadores) */
  /* Sava nuevos: 4 / 6 / 8 / 12 px · Legacy eran: 8 / 12 / 16 / 20 px (más redondos) */
  /* NOTA: durante migración, --radius-sm cambia de 8px → 4px (decisión brief).
           Si esto rompe alguna página vieja, se puede ver y reemplazar variable. */

  /* Shadows */
  --shadow-focus: 0 0 0 3px rgba(31, 64, 54, 0.18);
  --shadow-warm-soft: 0 8px 24px rgba(160, 57, 46, 0.10);

  /* RGB triplets · para componer rgba(var(--xxx-rgb), alpha) en glows, sombras,
     overlays, divisores de baja opacidad, etc. CSS aún no permite rgba() con
     una hex var directa, así que mantenemos esta capa paralela. */
  --color-brand-red-rgb:   160, 57, 46;
  --color-brand-green-rgb: 31, 64, 54;
  --color-brand-gold-rgb:  217, 164, 65;
  --color-brand-blue-rgb:  31, 58, 122;
  --color-brand-earth-rgb: 92, 58, 43;
  --text-primary-rgb:      28, 25, 23;
  --text-secondary-rgb:    68, 64, 60;
  --text-muted-rgb:        120, 113, 108;
  --bg-page-rgb:           244, 237, 224;
  --bg-paper-rgb:          251, 247, 238;
  --bg-surface-rgb:        255, 255, 255;
  --bg-admin-rgb:          248, 246, 241;
  --state-success-rgb:     47, 125, 94;
  --state-warning-rgb:     185, 122, 15;
  --state-danger-rgb:      160, 57, 46;

  /* Colores externos (marca de terceros) — útiles para botones de social/contact */
  --color-whatsapp:        #25D366;
  --color-whatsapp-dark:   #128C7E;
  --color-whatsapp-rgb:    37, 211, 102;
  --color-whatsapp-dark-rgb: 18, 140, 126;

  /* Acentos de marca extendidos */
  --color-brand-earth:     #5C3A2B;
}

/* Tokens nuevos que conflictúan con legacy → nuevos en último root para ganar cascade.
   Se redeclaran al final del archivo, después del bloque legacy. */


/* ════════════════════════════════════════════════════════════════════
   §2  RESET + BASE
   ════════════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  /* overflow-x: clip evita scroll horizontal por decoraciones que sobresalen,
     SIN crear un scroll-container (preserva position: sticky del header).
     Degradación graceful en navegadores antiguos que no soporten clip. */
  overflow-x: clip;
  max-width: 100%;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--bg-page);
  color: var(--text-primary);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  margin: 0;
  letter-spacing: -0.01em;
}

p { margin: 0; }

a { color: inherit; text-decoration: none; }

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  color: inherit;
}

img, svg { display: block; max-width: 100%; }

/* Pretty wrap para títulos y párrafos nuevos */
h1, h2, h3, p { text-wrap: pretty; }


/* ════════════════════════════════════════════════════════════════════
   §3  TIPOGRAFÍA — utilidades
   ════════════════════════════════════════════════════════════════════ */
.eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-brand-red);
}
.eyebrow--gold { color: var(--color-brand-gold); }
.eyebrow--cream { color: var(--bg-paper); opacity: 0.7; }

.display-1 { font-size: clamp(48px, 6.5vw, 76px); line-height: 1.02; letter-spacing: -0.02em; }
.display-2 { font-size: clamp(36px, 4.4vw, 56px); line-height: 1.08; letter-spacing: -0.015em; }
.h1 { font-size: clamp(30px, 3vw, 40px); line-height: 1.18; }
.h2 { font-size: 30px; line-height: 1.28; }
.h3 { font-family: var(--font-body); font-weight: 600; font-size: 20px; line-height: 1.35; letter-spacing: 0; }
.body-lg { font-size: 18px; line-height: 1.65; color: var(--text-secondary); }
.body { font-size: 16px; line-height: 1.6; color: var(--text-secondary); }
.body-sm { font-size: 14px; line-height: 1.55; color: var(--text-muted); }
.caption { font-size: 12px; line-height: 1.4; color: var(--text-muted); font-weight: 500; }
.tabular { font-variant-numeric: tabular-nums; }


/* ════════════════════════════════════════════════════════════════════
   §4  BOTONES NUEVOS
   ════════════════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  transition: all 180ms ease-out;
  white-space: nowrap;
  border: none;
  cursor: pointer;
}
.btn-primary {
  background: var(--color-brand-red);
  color: var(--bg-paper);
  box-shadow: var(--shadow-warm-soft);
}
.btn-primary:hover { background: var(--color-brand-red-dark); transform: translateY(-1px); }

.btn-secondary {
  border: 1px solid var(--color-brand-green);
  color: var(--color-brand-green);
  background: transparent;
}
.btn-secondary:hover { background: var(--color-brand-green-soft); }

.btn-ghost { color: var(--text-primary); background: transparent; }
.btn-ghost:hover { background: var(--border-soft); }

.btn-cream { background: var(--bg-paper); color: var(--color-brand-green); }
.btn-cream:hover { background: #fff; }

.btn-link {
  color: var(--color-brand-red);
  font-weight: 600;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  padding: 4px 0;
  background: transparent;
  border: none;
  cursor: pointer;
}
.btn-link .arrow { transition: transform 200ms ease-out; display: inline-flex; }
.btn-link:hover .arrow { transform: translateX(4px); }
.btn-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: currentColor; opacity: 0.3;
}

.btn-lg { padding: 14px 28px; font-size: 15px; }


/* ════════════════════════════════════════════════════════════════════
   §5  PRIMITIVOS — section, container, card, divider
   ════════════════════════════════════════════════════════════════════ */
.section { padding: var(--space-10) var(--space-6); }
@media (max-width: 768px) { .section { padding: var(--space-8) var(--space-5); } }

/* .container ya existe en legacy (max-width: 1280px, padding: 0 2rem) — compatible */
.container-narrow { max-width: 920px; margin: 0 auto; }

.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  padding: var(--space-5);
  transition: border-color 200ms ease-out, box-shadow 200ms ease-out, transform 200ms ease-out;
}
.card--interactive:hover {
  border-color: var(--border-medium);
  box-shadow: 0 4px 12px rgba(28, 25, 23, 0.06), 0 1px 3px rgba(28, 25, 23, 0.04);
  transform: translateY(-2px);
}

.divider-gold {
  display: inline-block; width: 1px; height: 14px;
  background: var(--color-brand-gold); opacity: 0.5;
}


/* ════════════════════════════════════════════════════════════════════
   §6  PATRONES Y PLACEHOLDERS
   ════════════════════════════════════════════════════════════════════ */
.bg-rays {
  position: absolute; inset: 0; pointer-events: none; opacity: 0.06;
  background-image: repeating-conic-gradient(
    from 0deg at 80% 20%,
    var(--color-brand-green) 0deg 1.5deg,
    transparent 1.5deg 12deg
  );
  -webkit-mask-image: radial-gradient(circle at 80% 20%, black 0%, transparent 60%);
          mask-image: radial-gradient(circle at 80% 20%, black 0%, transparent 60%);
}

.photo-placeholder {
  background:
    repeating-linear-gradient(135deg, rgba(31,64,54,0.05) 0 2px, transparent 2px 14px),
    linear-gradient(180deg, #E8E0CE 0%, #D8CDB5 100%);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 16px;
}
.photo-placeholder__tag {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  color: var(--color-brand-green);
  background: var(--bg-paper);
  padding: 4px 8px;
  border-radius: 2px;
  text-transform: uppercase;
}


/* ════════════════════════════════════════════════════════════════════
   §7  MOTION — animations + reveal-on-scroll system
   ════════════════════════════════════════════════════════════════════ */

/* fade-in-up */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeInUp 480ms ease-out both; }

/* Reveal-on-scroll · joyful but institutional */
.reveal {
  opacity: 0;
  transform:
    translate(var(--reveal-x-from, 0px), var(--reveal-y-from, 28px))
    rotate(var(--reveal-r-from, 0deg))
    scale(var(--reveal-s-from, 1));
  transition:
    opacity var(--reveal-duration, 720ms) var(--reveal-easing, cubic-bezier(.2,.7,.2,1)),
    transform var(--reveal-duration, 720ms) var(--reveal-easing, cubic-bezier(.2,.7,.2,1));
  transform-origin: var(--reveal-origin, center bottom);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal--scale { transform: translateY(0) scale(0.94); }
.reveal--left  { transform: translateX(-40px); }
.reveal--right { transform: translateX(40px); }
.reveal--rise  { transform: translateY(56px); }
.reveal--down  { transform: translateY(-24px); }

/* Twinkle (stars en secciones oscuras) */
@keyframes twinkle {
  0%, 100% { opacity: var(--tw-max, 0.95); transform: scale(1); }
  50%      { opacity: 0.25; transform: scale(0.55); }
}
.twinkle { animation: twinkle var(--tw-dur, 3s) ease-in-out infinite; animation-delay: var(--tw-delay, 0s); }

/* Bob — flotación lenta para sello y badges */
@keyframes bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-10px) rotate(1deg); }
}
.bob { animation: bob 5.5s ease-in-out infinite; transform-origin: center; }

/* Spin slow — rayos del sello */
@keyframes spinSlow { to { transform: rotate(360deg); } }
.spin-slow { animation: spinSlow 60s linear infinite; transform-origin: center; }

/* Shimmer underline */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

/* Marquee — ticker institucional */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-track { animation: marquee 38s linear infinite; display: flex; width: max-content; }
.marquee-track:hover { animation-play-state: paused; }

/* Pop-in — small badges, stat counters */
@keyframes popIn {
  0%   { opacity: 0; transform: scale(0.6); }
  60%  { opacity: 1; transform: scale(1.05); }
  100% { transform: scale(1); }
}
.pop-in { animation: popIn 520ms cubic-bezier(.34,1.4,.64,1) both; }

/* Soft float for floating cards */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.float-y { animation: float 4s ease-in-out infinite; }

/* Card hover energy */
.lift-on-hover {
  transition: transform 240ms cubic-bezier(.2,.7,.2,1),
              box-shadow 240ms cubic-bezier(.2,.7,.2,1),
              border-color 240ms ease-out;
}
.lift-on-hover:hover { transform: translateY(-4px); }

/* Wiggle — iconos en hover de cards interactivas */
@keyframes wiggle {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-6deg); }
  75%      { transform: rotate(6deg); }
}
.wiggle-host:hover .wiggle-target { animation: wiggle 600ms ease-in-out; }

/* Respect reduce motion */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-visible { opacity: 1 !important; transform: none !important; transition: none !important; }
  .twinkle, .bob, .spin-slow, .marquee-track, .float-y, .pop-in { animation: none !important; }
}


/* ════════════════════════════════════════════════════════════════════
   §8  FOCUS
   ════════════════════════════════════════════════════════════════════ */
:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
  border-radius: 6px;
}



/* ════════════════════════════════════════════════════════════════════
   ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
   ░░░  LEGACY · Proyecto Apóstol Pablo · preservar hasta migrar  ░░░
   ░░░  TODAS las páginas .razor que usan estas variables/clases.  ░░░
   ░░░  A medida que migremos a tokens nuevos, ir eliminando.      ░░░
   ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
   ════════════════════════════════════════════════════════════════════ */


/* ════════════════════════════════════════════════════════════════════
   §9  TOKENS LEGACY
   ════════════════════════════════════════════════════════════════════ */
:root {
  /* Colores Primarios - Azul Institucional (legacy) */
  --color-primary: #0055A3;
  --color-primary-dark: #00284D;
  --color-primary-light: #337AB8;
  --color-primary-hover: #00407a;
  --color-primary-sky: #58B4FF;

  /* Colores Secundarios - Naranja/Dorado (legacy) */
  --color-secondary: #F5A623;
  --color-secondary-light: #F7B84D;
  --color-secondary-dark: #D4911E;
  --color-highlight: #F5A623;
  --color-highlight-light: #F7B84D;
  --color-highlight-dark: #D4911E;

  /* Color Acento - Rojo Vivo (legacy) */
  --color-accent: #E63946;
  --color-accent-light: #FF6B6B;
  --color-accent-dark: #C1121F;

  /* WhatsApp */
  /* --color-whatsapp y --color-whatsapp-dark se redefinen en el bloque nuevo (§1) con valores brand oficiales (#128C7E). */

  /* Estados (legacy — los nuevos usan --state-*) */
  --color-success: #22c55e;
  --color-success-dark: #16a34a;
  --color-warning: #f59e0b;
  --color-warning-dark: #d97706;
  --color-error: #ef4444;
  --color-error-dark: #dc2626;
  --color-info: #3b82f6;

  /* Colores de Tarjetas (legacy) */
  --color-card-blue: #0055A3;
  --color-card-green: #22c55e;
  --color-card-orange: #f59e0b;
  --color-card-red: #ef4444;
  --color-card-purple: #8b5cf6;

  /* Fondos (legacy) */
  --bg-white: #ffffff;
  --bg-light: #f7fafc;
  --bg-gray: #edf2f7;
  --bg-cream: #FFF5E6;
  --bg-sky: #EBF5FF;
  --bg-sand: #c9a86c;
  --bg-error: #fff5f5;

  --bg-primary-subtle: rgba(0, 85, 163, 0.1);
  --bg-primary-faint: rgba(0, 85, 163, 0.05);
  --bg-highlight-subtle: rgba(245, 166, 35, 0.12);
  --bg-success-subtle: rgba(34, 197, 94, 0.12);
  --bg-error-subtle: rgba(239, 68, 68, 0.1);
  --bg-warning-subtle: rgba(245, 158, 11, 0.1);
  --bg-gray-subtle: rgba(107, 114, 128, 0.1);

  /* Textos (legacy) */
  --text-dark: #1a202c;
  --text-gray: #4a5568;
  --text-light: #718096;
  --text-muted: #6b7280;
  --text-white: #ffffff;
  --text-placeholder: #a0aec0;

  /* Bordes (legacy) */
  --border-light: #e2e8f0;
  --border-gray: #e5e7eb;
  --border-hover: #f0f0f0;

  /* Sombras (legacy) */
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.15);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.2);

  /* Bordes redondeados (legacy — más generosos que los nuevos) */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 24px;
  --radius-section: 40px;
  --radius-pill: 9999px;
  --radius-full: 50%;

  /* Transiciones (legacy) */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* Z-index system */
  --z-base: 1;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-toast: 1080;
  --z-max: 9999;

  /* Fuentes legacy */
  --font-primary: 'Inter', system-ui, -apple-system, sans-serif;
  --font-heading: 'Poppins', system-ui, -apple-system, sans-serif;
  --font-body: 'DM Sans', 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', 'Consolas', monospace;

  /* FUN Design (legacy) */
  --bg-fun-cream: #fffdf7;
  --bg-fun-orange: #fff4e0;
  --color-fun-pink: #ff4d6d;
  --color-fun-green: #4a8c6f;
  --color-fun-purple: #7c3aed;

  /* Admin Theme legacy */
  --bg-admin-base: #faf9f7;
  --bg-admin-card: #ffffff;
  --bg-admin-hover: #fef9f3;
  --bg-admin-input: #ffffff;
  --bg-admin-table-header: #f8f6f3;
  --warm-gray-100: #f5f5f4;
  --warm-gray-200: #e7e5e4;
  --warm-gray-300: #d6d3d1;
  --warm-gray-500: #78716c;
  --warm-gray-600: #57534e;
  --warm-gray-700: #44403c;
  --shadow-warm-sm: 0 1px 3px rgba(120, 53, 15, 0.08);
  --shadow-warm-md: 0 4px 12px rgba(120, 53, 15, 0.1);
  --shadow-warm-lg: 0 10px 25px rgba(120, 53, 15, 0.12);
  --shadow-warm-xl: 0 20px 40px rgba(120, 53, 15, 0.15);

  /* Tamaños de fuente legacy */
  --text-title-1: 28px;
  --text-title-2: 22px;
  --text-title-3: 18px;
  --text-title-4: 15px;
}


/* ════════════════════════════════════════════════════════════════════
   §10  UTILIDADES LEGACY
   ════════════════════════════════════════════════════════════════════ */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}

.text-center { text-align: center; }
.text-left   { text-align: left; }
.text-right  { text-align: right; }

.wave-divider {
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
.wave-divider.bottom { bottom: 0; }
.wave-divider.top    { top: 0; transform: rotate(180deg); }
.wave-divider svg {
  position: relative;
  display: block;
  width: calc(100% + 1.3px);
  height: 80px;
}


/* ════════════════════════════════════════════════════════════════════
   §11  FORMULARIOS LEGACY
   ════════════════════════════════════════════════════════════════════ */
.form-group { margin-bottom: 1.5rem; }

.form-label {
  display: block;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 0.5rem;
}

.form-control {
  width: 100%;
  padding: 0.875rem 1rem;
  border: 2px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 1rem;
  transition: var(--transition-fast);
}
.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(26, 54, 93, 0.1);
}


/* ════════════════════════════════════════════════════════════════════
   §12  BLAZOR ESSENTIALS · NUNCA REMOVER
   ════════════════════════════════════════════════════════════════════ */
h1:focus { outline: none; }

.valid.modified:not([type=checkbox]) { outline: 1px solid var(--color-success); }
.invalid { outline: 1px solid var(--color-error); }

.validation-message {
  color: var(--color-error);
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

#blazor-error-ui {
  color-scheme: light only;
  background: lightyellow;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem;
  position: fixed;
  width: 100%;
  z-index: 1000;
}
#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, var(--color-accent);
  padding: 1rem 1rem 1rem 3.7rem;
  color: var(--text-white);
}
.blazor-error-boundary::after { content: "An error has occurred."; }

.loading-progress {
  position: relative;
  display: block;
  width: 8rem;
  height: 8rem;
  margin: 20vh auto 1rem;
}
.loading-progress circle {
  fill: none;
  stroke: var(--border-gray);
  stroke-width: 0.6rem;
  transform-origin: 50% 50%;
  transform: rotate(-90deg);
}
.loading-progress circle:last-child {
  stroke: var(--color-primary);
  stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
  transition: stroke-dasharray 0.05s ease-in-out;
}
.loading-progress-text {
  position: absolute;
  text-align: center;
  font-weight: bold;
  inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}
.loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); }
</content>
</invoke>