.status {
    position: relative;
    display: inline-block;
    padding-right: 10px; 
}

.online-indicator {
    width: 10px; 
    height: 10px; 
    background-color: green; 
    border-radius: 50%; 
    position: absolute;
    left: -4px;
    top: 50%; 
    transform: translateY(-50%);
}

/************************************/
/***din scroll***/
/* Chrome, Edge, Safari */
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.35); /* semitransparente */
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.55);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.35) transparent;
}

/* Ocultar scrollbar pero mantener scroll funcional */
html, body {
  -ms-overflow-style: none;  /* IE/Edge legacy */
  scrollbar-width: none;     /* Firefox */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;             /* Chrome/Safari/Edge */
}

/************************************/
/***splash img***/
html.preloader-lock,
body.preloader-lock {
  overflow: hidden !important;
  height: 100%;
  touch-action: none;
}   

#splash, #preloader{
  position: fixed;
  inset: 0;
  z-index: 99999;
  overflow: hidden;
  background: transparent;
}

#splash .splash-bg , #preloader .splash-bg{
  position: absolute;
  inset: 0;
  background: #fff;
  clip-path: circle(150% at 50% 50%);
  z-index: 1;
}


#splash-logo {
  position: absolute;
  /*left: 50%;
  top: 50%;*/
  width: min(70vw, 520px) !important;
  transform: translate(-50%, -50%) scale(1);
  transform-origin: center center;
  z-index: 2;
  will-change: transform, top, left;
  
  
  -webkit-animation-duration: 0.7s;
  animation-duration: 0.7s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-name: move;
  animation-name: move;
  animation-direction: alternate;
  -moz-animation-direction: alternate;
  -webkit-animation-direction: alternate;
  -o-animation-direction: alternate;
  -ms-transform-origin: middle center;
  transform-origin: middle center;
  -webkit-transform-origin: middle center;
  -o-transform-origin: middle center;
  -moz-transform-origin: middle center;
}


#splash.closing .splash-bg,#preloader.closing .splash-bg  {
  animation: splashClose 1s ease-in-out forwards;
}

#splash.closing #splash-logo ,#preloader.closing #splash-logo {
  animation: splashMove 1s cubic-bezier(.7, 0, .2, 1) forwards;
}


:root{
  --stop-offset: 56px; /* más lejos del logo final */
}

@keyframes splashMove {
  0% {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  55% {
    opacity: 1;
  }
  70% {
    opacity: 0; 
  }
  100% {
    left: calc(var(--target-x) - var(--stop-offset));
    top: calc(var(--target-y) - var(--stop-offset));
    transform: translate(-50%, -50%) scale(calc(var(--target-scale) * .85));
    opacity: 0;
  }
}

@keyframes splashClose {
  0% {
    clip-path: circle(150% at 50% 50%);
    opacity: 1;
  }
  60% {
    opacity: 0; /* fondo ya transparente antes */
  }
  100% {
    clip-path: circle(110px at calc(var(--target-x) - var(--stop-offset)) calc(var(--target-y) - var(--stop-offset)));
    opacity: 0;
  }
}