/* Fondo */
html, body {
  background-color: #09090B !important;
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

/* Contenedor principal */
.loading-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #09090B;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

/* Spinner: Gradiente hacia blanco puro para resaltar sobre el fondo casi negro */
.spinner {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: conic-gradient(#ffffff00 10%, #FAFAFA); 
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 6px), #000 0);
  mask: radial-gradient(farthest-side, #0000 calc(100% - 6px), #000 0);
  animation: spinner-spin 1s infinite linear;
  margin-bottom: 24px;
}

@keyframes spinner-spin {
  to {
    transform: rotate(1turn);
  }
}

/* Texto: Color Zinc-400/300*/
.loading-text {
  color: #A1A1AA; /* Un gris neutro */
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.5px;
  animation: pulse-text 2s infinite ease-in-out;
}

@keyframes pulse-text {
  0%, 100% { opacity: 1; color: #FAFAFA; }
  50% { opacity: 0.4; color: #A1A1AA; }
}