/* ==========================================================
   NUBO_PREMIUM_LOADING_EXPERIENCE_V1_START
   ========================================================== */

.nubo-loading-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;

  display: grid;
  place-items: center;

  width: 100%;
  min-height: 100vh;
  min-height: 100dvh;

  padding:
    max(22px, env(safe-area-inset-top))
    max(18px, env(safe-area-inset-right))
    max(22px, env(safe-area-inset-bottom))
    max(18px, env(safe-area-inset-left));

  overflow: hidden;

  color: #172b2a;

  background:
    radial-gradient(
      circle at 16% 18%,
      rgba(64, 202, 151, 0.14),
      transparent 31%
    ),
    radial-gradient(
      circle at 84% 20%,
      rgba(117, 100, 230, 0.10),
      transparent 28%
    ),
    radial-gradient(
      circle at 50% 92%,
      rgba(59, 170, 132, 0.08),
      transparent 34%
    ),
    linear-gradient(
      145deg,
      #f8fcfa 0%,
      #f5f8fb 53%,
      #f8fbfa 100%
    );

  isolation: isolate;
}

.nubo-loading-screen::before,
.nubo-loading-screen::after {
  content: "";

  position: absolute;
  z-index: -1;

  border-radius: 50%;

  pointer-events: none;
}

.nubo-loading-screen::before {
  width: min(42vw, 520px);
  aspect-ratio: 1;

  top: -24%;
  left: -10%;

  background:
    radial-gradient(
      circle,
      rgba(75, 213, 162, 0.11),
      transparent 68%
    );
}

.nubo-loading-screen::after {
  width: min(38vw, 460px);
  aspect-ratio: 1;

  right: -8%;
  bottom: -24%;

  background:
    radial-gradient(
      circle,
      rgba(118, 105, 223, 0.08),
      transparent 68%
    );
}


/* Tarjeta */

.nubo-loading-card {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;

  width: min(
    390px,
    calc(100vw - 36px)
  );

  min-height: 0;

  padding:
    32px
    28px
    27px;

  overflow: hidden;

  border:
    1px solid
    rgba(200, 220, 213, 0.82);

  border-radius:
    27px;

  color:
    #172b2a;

  background:
    linear-gradient(
      155deg,
      rgba(255, 255, 255, 0.98),
      rgba(251, 254, 253, 0.96)
    );

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.96) inset,
    0 26px 75px rgba(34, 73, 63, 0.13),
    0 7px 22px rgba(34, 73, 63, 0.055);

  text-align:
    center;

  animation:
    nubo-loading-card-enter
    460ms
    cubic-bezier(0.2, 0.8, 0.2, 1)
    both;
}

.nubo-loading-card::before {
  content: "";

  position: absolute;

  width: 180px;
  height: 180px;

  top: -118px;
  right: -82px;

  border-radius: 50%;

  background:
    rgba(74, 204, 157, 0.065);

  pointer-events: none;
}


/* Logo y órbita */

.nubo-loading-orbit {
  position: relative;

  display: grid;
  place-items: center;

  width: 88px;
  height: 88px;

  margin-bottom: 19px;
}

.nubo-loading-orbit__halo,
.nubo-loading-orbit__ring {
  position: absolute;
  inset: 0;

  border-radius: 50%;
}

.nubo-loading-orbit__halo {
  border:
    1px solid
    rgba(50, 184, 133, 0.12);

  background:
    radial-gradient(
      circle,
      rgba(52, 196, 142, 0.10),
      transparent 67%
    );

  animation:
    nubo-loading-halo
    1.9s
    ease-in-out
    infinite;
}

.nubo-loading-orbit__ring {
  inset: 4px;

  border:
    1.5px solid
    rgba(38, 178, 126, 0.16);

  border-top-color:
    rgba(32, 177, 122, 0.88);

  border-right-color:
    rgba(111, 96, 220, 0.48);

  animation:
    nubo-loading-orbit-spin
    2.4s
    linear
    infinite;
}

.nubo-loading-brand {
  position: relative;
  z-index: 2;

  display: grid;
  place-items: center;

  width: 57px;
  height: 57px;

  overflow: hidden;

  border:
    1px solid
    rgba(255, 255, 255, 0.78);

  border-radius:
    18px;

  color:
    #ffffff;

  background:
    linear-gradient(
      145deg,
      #24ce91 0%,
      #10af78 55%,
      #0c9468 100%
    );

  box-shadow:
    0 12px 26px rgba(22, 174, 121, 0.24),
    0 1px 0 rgba(255, 255, 255, 0.38) inset;
}

.nubo-loading-brand svg,
.nubo-loading-brand .icon {
  display: block;

  width: 29px;
  height: 29px;

  color:
    #ffffff;
}

.nubo-loading-orbit__dot {
  position: absolute;
  z-index: 3;

  width: 7px;
  height: 7px;

  border:
    2px solid
    #ffffff;

  border-radius:
    50%;

  background:
    #28be82;

  box-shadow:
    0 3px 8px rgba(22, 157, 108, 0.24);
}

.nubo-loading-orbit__dot.is-first {
  top: 8px;
  right: 15px;

  animation:
    nubo-loading-dot-pulse
    1.35s
    ease-in-out
    infinite;
}

.nubo-loading-orbit__dot.is-second {
  left: 11px;
  bottom: 15px;

  width: 6px;
  height: 6px;

  background:
    #7566dc;

  animation:
    nubo-loading-dot-pulse
    1.35s
    360ms
    ease-in-out
    infinite;
}


/* Textos */

.nubo-loading-copy {
  width: 100%;
}

.nubo-loading-eyebrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 23px;

  margin-bottom: 9px;
  padding: 0 10px;

  border:
    1px solid
    rgba(50, 178, 129, 0.18);

  border-radius:
    999px;

  color:
    #16835d;

  background:
    rgba(231, 250, 242, 0.74);

  font-size:
    9px;

  font-weight:
    790;

  letter-spacing:
    0.075em;

  line-height:
    1;

  text-transform:
    uppercase;
}

.nubo-loading-copy h1 {
  max-width:
    310px;

  margin:
    0 auto;

  color:
    #172b2a;

  font-size:
    clamp(20px, 4vw, 24px);

  font-weight:
    830;

  letter-spacing:
    -0.025em;

  line-height:
    1.18;
}

.nubo-loading-copy p {
  max-width:
    300px;

  margin:
    9px auto 0;

  color:
    #71807f;

  font-size:
    12.5px;

  line-height:
    1.55;
}


/* Barra de actividad */

.nubo-loading-progress {
  position: relative;

  width: 100%;
  height: 4px;

  margin-top:
    24px;

  overflow: hidden;

  border-radius:
    999px;

  background:
    #e9f1ee;
}

.nubo-loading-progress span {
  position: absolute;
  inset-block: 0;

  width: 42%;

  border-radius:
    inherit;

  background:
    linear-gradient(
      90deg,
      #25c58a,
      #55d7a9 55%,
      #7769df
    );

  box-shadow:
    0 0 12px rgba(44, 194, 139, 0.22);

  animation:
    nubo-loading-progress-move
    1.45s
    cubic-bezier(0.45, 0, 0.25, 1)
    infinite;
}


/* Estado inferior */

.nubo-loading-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 8px;

  max-width:
    100%;

  margin-top:
    14px;

  color:
    #657472;

  font-size:
    11px;

  font-weight:
    590;

  line-height:
    1.35;
}

.nubo-loading-status__dot {
  flex:
    0
    0
    7px;

  width: 7px;
  height: 7px;

  border-radius:
    50%;

  background:
    #25bc80;

  box-shadow:
    0 0 0 4px rgba(37, 188, 128, 0.10);

  animation:
    nubo-loading-status-pulse
    1.3s
    ease-in-out
    infinite;
}


/* Modo oscuro */

html[data-theme="dark"]
.nubo-loading-screen {
  color:
    #edf8f4;

  background:
    radial-gradient(
      circle at 16% 18%,
      rgba(40, 196, 137, 0.12),
      transparent 31%
    ),
    radial-gradient(
      circle at 84% 20%,
      rgba(116, 99, 222, 0.12),
      transparent 28%
    ),
    linear-gradient(
      145deg,
      #0c1414 0%,
      #10161d 56%,
      #0d1715 100%
    );
}

html[data-theme="dark"]
.nubo-loading-card {
  border-color:
    rgba(71, 93, 89, 0.76);

  color:
    #edf8f4;

  background:
    linear-gradient(
      155deg,
      rgba(24, 34, 34, 0.98),
      rgba(20, 29, 32, 0.98)
    );

  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.045) inset,
    0 30px 80px rgba(0, 0, 0, 0.34),
    0 8px 25px rgba(0, 0, 0, 0.18);
}

html[data-theme="dark"]
.nubo-loading-copy h1 {
  color:
    #eef8f5;
}

html[data-theme="dark"]
.nubo-loading-copy p,
html[data-theme="dark"]
.nubo-loading-status {
  color:
    #a8b8b5;
}

html[data-theme="dark"]
.nubo-loading-eyebrow {
  border-color:
    rgba(61, 194, 143, 0.19);

  color:
    #69dcad;

  background:
    rgba(35, 91, 69, 0.20);
}

html[data-theme="dark"]
.nubo-loading-progress {
  background:
    #263330;
}


/* Móvil */

@media (max-width: 520px) {
  .nubo-loading-card {
    width:
      min(
        365px,
        calc(100vw - 28px)
      );

    padding:
      28px
      21px
      24px;

    border-radius:
      24px;
  }

  .nubo-loading-orbit {
    width:
      82px;

    height:
      82px;

    margin-bottom:
      17px;
  }

  .nubo-loading-brand {
    width:
      53px;

    height:
      53px;

    border-radius:
      17px;
  }

  .nubo-loading-copy h1 {
    max-width:
      280px;

    font-size:
      21px;
  }

  .nubo-loading-copy p {
    max-width:
      270px;

    font-size:
      12px;
  }

  .nubo-loading-progress {
    margin-top:
      21px;
  }
}


/* Movimiento reducido */

@media (prefers-reduced-motion: reduce) {
  .nubo-loading-card,
  .nubo-loading-orbit__halo,
  .nubo-loading-orbit__ring,
  .nubo-loading-orbit__dot,
  .nubo-loading-progress span,
  .nubo-loading-status__dot {
    animation:
      none !important;
  }

  .nubo-loading-progress span {
    left:
      29%;
  }
}


/* Animaciones */

@keyframes nubo-loading-card-enter {
  from {
    opacity:
      0;

    transform:
      translateY(10px)
      scale(0.985);
  }

  to {
    opacity:
      1;

    transform:
      translateY(0)
      scale(1);
  }
}

@keyframes nubo-loading-orbit-spin {
  to {
    transform:
      rotate(360deg);
  }
}

@keyframes nubo-loading-halo {
  0%,
  100% {
    opacity:
      0.55;

    transform:
      scale(0.96);
  }

  50% {
    opacity:
      1;

    transform:
      scale(1.035);
  }
}

@keyframes nubo-loading-dot-pulse {
  0%,
  100% {
    opacity:
      0.68;

    transform:
      scale(0.86);
  }

  50% {
    opacity:
      1;

    transform:
      scale(1.18);
  }
}

@keyframes nubo-loading-progress-move {
  from {
    transform:
      translateX(-125%);
  }

  to {
    transform:
      translateX(340%);
  }
}

@keyframes nubo-loading-status-pulse {
  0%,
  100% {
    opacity:
      0.58;

    transform:
      scale(0.92);
  }

  50% {
    opacity:
      1;

    transform:
      scale(1.08);
  }
}

/* NUBO_PREMIUM_LOADING_EXPERIENCE_V1_END */