html[data-theme='light'] body,
html[data-theme='light'] .app-splash {
  background-color: #f5f3ec;
}

html[data-theme='dark'] body,
html[data-theme='dark'] .app-splash {
  background-color: #2b2b2b;
}

#pre-loading,
.app-splash {
  align-items: center;
  display: flex;
  height: 100dvh;
  inset: 0;
  justify-content: center;
  opacity: 1;
  position: fixed;
  text-align: center;
  width: 100dvw;
  z-index: 9999;
}

.app-splash-content {
  --app-splash-logo-width: min(320px, 72vw);
  align-items: center;
  display: flex;
  flex-direction: column;
}

.app-splash-content .hiperme-logo {
  height: auto;
  width: var(--app-splash-logo-width);
}

.hiperme-logo {
  --hiperme-logo-primary: #033939;
  --hiperme-logo-accent: #87d49e;
  display: block;
  flex-shrink: 0;
  height: auto;
}

/* Light: Hiper verde + Me mint. Dark: Hiper blanco + Me mint. */
html[data-theme='dark'] .hiperme-logo--auto,
html[data-theme='dark'] .hiperme-logo--on-green {
  --hiperme-logo-primary: #ffffff;
  --hiperme-logo-accent: #87d49e;
}

.hiperme-logo__primary {
  fill: var(--hiperme-logo-primary);
}

.hiperme-logo__accent {
  fill: var(--hiperme-logo-accent);
}

/* Variante C: shimmer en paths accent */
@keyframes hiperme-accent-shimmer {
  0%,
  100% {
    filter: brightness(0.75);
    opacity: 0.45;
  }

  50% {
    filter: brightness(1.2);
    opacity: 1;
  }
}

html[data-splash-variant='c'] .hiperme-logo--animated .hiperme-logo__accent,
html[data-splash-variant='c'] .hiperme-logo__accent {
  animation: hiperme-accent-shimmer 2.2s ease-in-out infinite;
}

html[data-splash-variant='c'] .hiperme-logo__accent:nth-of-type(1) {
  animation-delay: 0s;
}

html[data-splash-variant='c'] .hiperme-logo__accent:nth-of-type(2) {
  animation-delay: 0.45s;
}

html[data-splash-variant='c'] .app-splash-bar {
  display: none;
}

html[data-splash-variant='c'] .app-splash-logo-pulse {
  animation: none;
}

/* Variante D: pulse + barra indeterminada */
@keyframes app-splash-logo-pulse {
  0%,
  100% {
    opacity: 0.9;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.02);
  }
}

html[data-splash-variant='d'] .app-splash-logo-pulse {
  animation: app-splash-logo-pulse 2.4s ease-in-out infinite;
}

.app-splash-bar {
  background-color: rgb(3 57 57 / 12%);
  border-radius: 10px;
  height: 4px;
  margin-top: 24px;
  overflow: hidden;
  width: var(--app-splash-logo-width, min(320px, 72vw));
}

html[data-theme='dark'] .app-splash-bar {
  background-color: rgb(255 255 255 / 15%);
}

.app-splash-bar__fill {
  animation: app-splash-bar-slide 1.8s ease-in-out infinite;
  background-color: #87d49e;
  border-radius: 10px;
  height: 100%;
  width: 45%;
}

html[data-theme='dark'] .app-splash-bar__fill {
  background-color: #ffffff;
}

@keyframes app-splash-bar-slide {
  0% {
    transform: translateX(-110%);
  }

  100% {
    transform: translateX(320%);
  }
}

.app-splash-fade-leave-active {
  transition: opacity 0.35s ease;
}

.app-splash-fade-leave-to {
  opacity: 0;
}

#pre-loading.app-splash--leaving {
  transition: opacity 0.35s ease;
}

#pre-loading.app-splash--leave-to {
  opacity: 0;
}