/* Fondo azul marino difuso */
#loader_container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: radial-gradient(circle, rgba(0, 33, 71, 0.85) 0%, rgba(0, 18, 46, 0.7) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  overflow: hidden;
  backdrop-filter: blur(10px);
  transition: all 0.8s ease;
}

/* Contenedor del logo con efecto de deformación */
#loader_logo_container {
  position: relative;
  width: 220px;
  height: 220px;
}

/* Logo base */
#loader_fill_container {
  position: relative;
  width: 220px;
  height: 220px;
  margin: 0 auto;
  overflow: hidden;
}

.loader-logo {
  width: 100%;
  height: auto;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

#loader_logo_base {
  filter: brightness(0.3) blur(0.5px);
  z-index: 1;
}

#loader_fill_mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  clip-path: inset(100% 0 0 0);
  z-index: 2;
  /* transition: clip-path 0.4s ease; */
}

#loader_logo_fill {
  filter: brightness(1.2) drop-shadow(0 0 10px rgba(255, 165, 0, 0.6));
}

/* Porcentaje de carga */
#loader_progress_text {
  color: white;
  font-size: 1.8rem;
  font-weight: 300;
  margin-bottom: 25px;
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
  letter-spacing: 1px;
}

/* Barra de progreso */
#loader_progress_bar {
  width: 320px;
  height: 6px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 20px;
  box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.3);
}

#loader_progress_fill {
  height: 100%;
  background: linear-gradient(to right, #F57C00, #ff9b40);
  width: 0%;
  transition: width 0.5s ease;
  border-radius: 3px;
  box-shadow: 0 0 12px rgba(245, 124, 0, 0.6);
}

/* Mensaje de estado */
#loader_status_message {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.1rem;
  text-align: center;
  max-width: 350px;
  line-height: 1.6;
  text-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
  font-weight: 300;
}

/* Partículas flotantes */
.loader_particle {
  position: absolute;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 50%;
  z-index: -1;
  animation: loader_float 15s infinite linear;
}

@keyframes loader_float {
  0% {
    transform: translate(0, 0) rotate(0deg);
    opacity: 0.03;
  }
  25% {
    transform: translate(20px, 15px) rotate(90deg);
    opacity: 0.08;
  }
  50% {
    transform: translate(40px, -10px) rotate(180deg);
    opacity: 0.03;
  }
  75% {
    transform: translate(20px, -20px) rotate(270deg);
    opacity: 0.06;
  }
  100% {
    transform: translate(0, 0) rotate(360deg);
    opacity: 0.03;
  }
}

/* ========== Loader scoped (mini), mismo look que el grande ========== */
.scoped-loader-logo-wrap {
  width: 120px; height: 120px; position: relative; margin-bottom: 10px;
}
.scoped-loader-logo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block;
}

/* Base tenue como #loader_logo_base */
.scoped-loader-logo.base {
  filter: brightness(0.3) blur(0.5px);
  z-index: 1;
}

/* Máscara con clip-path como #loader_fill_mask */
.scoped-loader-fill-mask {
  position: absolute; inset: 0;
  clip-path: inset(100% 0 0 0); /* empieza vacío */
  z-index: 2;
}

/* Glow naranja como #loader_logo_fill */
.scoped-loader-logo.fill.glow {
  filter: brightness(1.2) drop-shadow(0 0 10px rgba(255, 165, 0, 0.6));
}

/* Texto */
.scoped-loader-progress { font-weight: 600; margin-top: 6px; }
.scoped-loader-status { font-size: .9rem; opacity: .85; }

/* Partículas suaves (como el grande) */
.scoped-loader-particle { will-change: transform, opacity; background: rgba(255,255,255,0.04); border-radius: 50%; }
@keyframes floaty {
  0% { transform: translate3d(0,0,0) rotate(0); opacity: 0.03; }
  25%{ transform: translate3d(20px,15px,0) rotate(90deg); opacity: 0.08; }
  50%{ transform: translate3d(40px,-10px,0) rotate(180deg); opacity: 0.03; }
  75%{ transform: translate3d(20px,-20px,0) rotate(270deg); opacity: 0.06; }
  100%{ transform: translate3d(0,0,0) rotate(360deg); opacity: 0.03; }
}

/* (Opcional) Si quieres un fondo difuso dentro del recuadro pequeño: añade la clase .scoped-dark al contenedor */
.scoped-dark::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle, rgba(0,33,71,0.20) 0%, rgba(0,18,46,0.12) 100%);
  backdrop-filter: blur(2px);
  z-index: 0;
}