/* ======================================================
   ESTILOS DEL LOADING (Dark theme, M3-inspired)
   ====================================================== */

:root{
  --loading-bg-color:#121212;
  --loading-primary-color:#BB86FC; /* Púrpura vibrante */
  --loading-text-color:rgba(255,255,255,0.87);
  --loading-muted:rgba(255,255,255,0.6);
  --loading-font:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif;
}

/* Evita parpadeos y asegura tema oscuro inmediato */
html, body{
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  background-color:var(--loading-bg-color);
  color:var(--loading-text-color);
  font-family:var(--loading-font);
}

/* Mientras cargamos, no permitimos scroll del documento */
body.is-loading{
  overflow:hidden;
}

/* Contenedor principal del overlay */
#loading-screen{
  position:fixed;
  inset:0;
  z-index:99999;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--loading-bg-color);
  opacity:1;
  transition:opacity 420ms cubic-bezier(.4,0,.2,1);
}

/* Contenido centrado */
.loading-container{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:18px;
  padding:16px 20px;
  width:min(92vw, 420px);
}

/* Logo */
.loading-logo{
  width:80px;
  height:80px;
  object-fit:contain;
  border-radius:16px;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.25));
}

/* Spinner circular */
.spinner{
  width:48px;
  height:48px;
  border-radius:50%;
  border:4px solid rgba(255,255,255,.18);
  border-top-color:var(--loading-primary-color);
  animation:spin 1s linear infinite;
  will-change:transform;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* Texto */
.loading-text{
  font-size:1.06rem;
  font-weight:500;
  letter-spacing:.3px;
  margin:0;
}

/* Barra de progreso opcional (aproximada) */
.progress{
  width:100%;
  height:4px;
  background:rgba(255,255,255,.08);
  border-radius:999px;
  overflow:hidden;
}
.progress-bar{
  display:block;
  height:100%;
  width:100%;
  transform:scaleX(0);
  transform-origin:left center;
  background:linear-gradient(90deg, var(--loading-primary-color), #1976D2);
  transition:transform 260ms ease;
}

/* Fade-out suave al ocultar */
#loading-screen.fade-out{
  opacity:0;
  pointer-events:none;
}

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media (max-width:600px){
  .loading-logo{ width:72px; height:72px; }
  .spinner{ width:40px; height:40px; border-width:3px; }
  .loading-text{ font-size:1rem; }
}

/* Respeta preferencias de accesibilidad */
@media (prefers-reduced-motion: reduce){
  .spinner{ animation: none; border-top-color:rgba(255,255,255,.6); }
  .progress-bar{ transition:none; }
  #loading-screen{ transition:none; }
}