:root {
  --initial-loader-bg: #F0F2F5;
  --initial-loader-surface: #FFFFFF;
  --initial-loader-on-bg-rgb: 26, 34, 50;
  --initial-loader-grid-rgb: 116, 132, 150;
  --initial-loader-grid-alpha: 0.18;
  --initial-loader-color: #1B5FA8;
  --initial-loader-color-rgb: 27, 95, 168;
  --loader-orange: #F4683F;
}

* {
  box-sizing: border-box;
}

html {
  overflow: hidden scroll;
}

body {
  min-block-size: 100vh;
  margin: 0;
}

.app-loader-stage {
  --loader-stage-bg: var(--initial-loader-bg);
  --loader-stage-grid: rgba(var(--initial-loader-grid-rgb), var(--initial-loader-grid-alpha));

  position: fixed;
  z-index: 2147483647;
  inset: 0;
  display: grid;
  overflow: hidden;
  background: var(--loader-stage-bg);
  isolation: isolate;
  pointer-events: none;
  place-items: center;
}

.app-loader-stage::before {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--loader-stage-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--loader-stage-grid) 1px, transparent 1px);
  background-repeat: repeat;
  background-size: 72px 56px;
  content: "";
  z-index: 0;
}

.app-loader-stage > .app-loader {
  z-index: 1;
}

/* Sin grid cuadricular, mantiene el fondo del tema */
.app-loader-stage--no-grid::before {
  display: none;
}

.app-loader {
  --loader-size: 250px;
  --loader-blue: var(--app-loader-primary, var(--initial-loader-color, #003d5c));
  --loader-blue-soft: var(--app-loader-primary-soft, rgba(var(--initial-loader-color-rgb), 0.58));

  position: relative;
  display: grid;
  inline-size: var(--loader-size);
  block-size: var(--loader-size);
  animation: app-loader-float 2.4s ease-in-out infinite;
  isolation: isolate;
  place-items: center;
  filter: drop-shadow(0 14px 16px rgba(0, 24, 38, 0.22));
  will-change: transform;
}

.app-loader--sm {
  --loader-size: 190px;
}

.app-loader--md {
  --loader-size: 250px;
}

.app-loader--lg {
  --loader-size: 290px;
}

.app-loader::before,
.app-loader::after {
  position: absolute;
  border-style: solid;
  border-radius: 50%;
  content: "";
}

.app-loader::before {
  inset: calc(var(--loader-size) * 0.08);
  border-width: 5px;
  border-color: var(--loader-blue) transparent var(--loader-blue) transparent;
  animation: app-loader-orbit 1.6s linear infinite;
}

.app-loader::after {
  inset: calc(var(--loader-size) * 0.176);
  border-width: 4px;
  border-color: transparent var(--loader-orange) transparent var(--loader-orange);
  animation: app-loader-orbit-reverse 2.1s linear infinite;
}

.app-loader__ticks {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  animation: app-loader-orbit 3.2s linear infinite;
  background:
    repeating-conic-gradient(
      from 0deg,
      var(--loader-blue-soft) 0deg 1.6deg,
      transparent 1.6deg 8deg,
      var(--loader-orange) 8deg 9.2deg,
      transparent 9.2deg 16deg
    );
  mask: radial-gradient(
    circle,
    transparent 0 calc(var(--loader-size) * 0.376),
    #000 calc(var(--loader-size) * 0.38) calc(var(--loader-size) * 0.416),
    transparent calc(var(--loader-size) * 0.42)
  );
  -webkit-mask: radial-gradient(
    circle,
    transparent 0 calc(var(--loader-size) * 0.376),
    #000 calc(var(--loader-size) * 0.38) calc(var(--loader-size) * 0.416),
    transparent calc(var(--loader-size) * 0.42)
  );
  opacity: 0.9;
}

.app-loader__node {
  position: absolute;
  inline-size: calc(var(--loader-size) * 0.068);
  block-size: calc(var(--loader-size) * 0.068);
  border-radius: 50%;
  animation: app-loader-pulse 1.4s ease-in-out infinite;
}

.app-loader__node--orange {
  background: var(--loader-orange);
  box-shadow: 0 0 0 7px rgba(244, 104, 63, 0.16);
}

.app-loader__node--blue {
  background: var(--loader-blue);
  box-shadow: 0 0 0 7px rgba(var(--initial-loader-color-rgb), 0.18);
}

.app-loader__node--a {
  inset-block-start: calc(var(--loader-size) * 0.22);
  inset-inline-end: calc(var(--loader-size) * 0.14);
}

.app-loader__node--b {
  inset-block-end: calc(var(--loader-size) * 0.192);
  inset-inline-end: calc(var(--loader-size) * 0.22);
  animation-delay: 0.35s;
}

.app-loader__node--c {
  inset-block-end: calc(var(--loader-size) * 0.288);
  inset-inline-start: calc(var(--loader-size) * 0.096);
  animation-delay: 0.7s;
}

.app-loader__logo {
  display: block;
  inline-size: calc(var(--loader-size) * 0.688);
  block-size: auto;
  object-fit: contain;
  transform: translateY(calc(var(--loader-size) * -0.024));
}

.app-loader__barcode {
  position: absolute;
  inset-block-end: calc(var(--loader-size) * 0.312);
  display: flex;
  align-items: center;
  block-size: calc(var(--loader-size) * 0.096);
  gap: calc(var(--loader-size) * 0.02);
}

.app-loader__barcode span {
  display: block;
  inline-size: max(2px, calc(var(--loader-size) * 0.012));
  block-size: calc(var(--loader-size) * 0.064);
  border-radius: 3px;
  animation: app-loader-scan 0.9s ease-in-out infinite alternate;
  background: var(--loader-blue);
  opacity: 0.82;
}

.app-loader__barcode span:nth-child(2n) {
  block-size: calc(var(--loader-size) * 0.072);
  animation-delay: 0.08s;
}

.app-loader__barcode span:nth-child(3n) {
  block-size: calc(var(--loader-size) * 0.092);
  animation-delay: 0.16s;
}

.app-loader__barcode span:nth-child(4n) {
  block-size: calc(var(--loader-size) * 0.048);
  animation-delay: 0.24s;
}

.app-loader__scan-line {
  position: absolute;
  inset-block-end: calc(var(--loader-size) * 0.216);
  inline-size: calc(var(--loader-size) * 0.68);
  block-size: 4px;
  border-radius: 999px;
  animation: app-loader-line-glow 1.4s ease-in-out infinite;
  background: var(--loader-orange);
  opacity: 0.9;
  transform-origin: center;
}

@keyframes app-loader-float {
  0%,
  100% {
    transform: translateY(-6px) scale(0.99);
  }

  50% {
    transform: translateY(6px) scale(1.01);
  }
}

@keyframes app-loader-orbit {
  to {
    transform: rotate(1turn);
  }
}

@keyframes app-loader-orbit-reverse {
  to {
    transform: rotate(-1turn);
  }
}

@keyframes app-loader-pulse {
  0%,
  100% {
    opacity: 0.72;
    transform: scale(0.92);
  }

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

@keyframes app-loader-scan {
  from {
    opacity: 0.48;
    transform: scaleY(0.72);
  }

  to {
    opacity: 0.9;
    transform: scaleY(1);
  }
}

@keyframes app-loader-line-glow {
  0%,
  100% {
    opacity: 0.54;
    transform: scaleX(0.82);
  }

  50% {
    opacity: 1;
    transform: scaleX(1);
  }
}

@media (max-width: 640px) {
  .app-loader {
    --loader-size: min(250px, 68vw);
  }

  .app-loader--sm {
    --loader-size: min(190px, 56vw);
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Solo quitar el float general (traslación de todo el ícono) */
  .app-loader {
    animation: none;
  }
}