/* =========================
   OVERLAY
========================= */

.clent-loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.clent-hidden {
  display: none !important;
}

/* =========================
   SPINNER (Logo/Imagen)
========================= */

.clent-spinner {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
}

.clent-spinner img {
  width: 80px;
  height: auto;
  animation: clent-bounce 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes clent-bounce {
  0%, 100% {
    transform: translateY(0) scale(0.9);
    opacity: 0.3;
  }
  50% {
    transform: translateY(-15px) scale(1.1);
    opacity: 1;
  }
}

/* =========================
   CHECK (SUCCESS)
========================= */

.clent-loader-check {
  position: absolute;
  opacity: 0;
  transform: scale(0.8);
}

.clent-loader-check svg {
  width: 70px;
  height: 70px;
}

.clent-loader-check path {
  stroke: #22c55e;
  stroke-width: 3;
  fill: none;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
}

/* =========================
   ERROR (X)
========================= */

.clent-loader-error {
  position: absolute;
  opacity: 0;
  transform: scale(0.8);
}

.clent-loader-error svg {
  width: 70px;
  height: 70px;
}

.clent-loader-error path {
  stroke: #ef4444;
  stroke-width: 3;
  fill: none;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
}

/* =========================
   SUCCESS STATE
========================= */

.clent-loader-overlay.clent-success .clent-spinner {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}

.clent-loader-overlay.clent-success .clent-loader-check {
  animation: clent-pop 0.3s ease forwards;
}

.clent-loader-overlay.clent-success .clent-loader-check path {
  animation: clent-draw 0.5s ease forwards 0.2s;
}

/* =========================
   ERROR STATE
========================= */

.clent-loader-overlay.clent-error .clent-spinner {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}

.clent-loader-overlay.clent-error .clent-loader-error {
  animation: clent-pop 0.3s ease forwards;
}

.clent-loader-overlay.clent-error .clent-loader-error path {
  animation: clent-draw 0.4s ease forwards 0.2s;
}

/* =========================
   ANIMACIONES
========================= */

@keyframes clent-pop {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  70% {
    opacity: 1;
    transform: scale(1.2);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes clent-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/* =========================
   OPCIONAL (feedback visual)
========================= */

.clent-loader-overlay.clent-success {
  background: rgba(34, 197, 94, 0.08);
}

.clent-loader-overlay.clent-error {
  background: rgba(239, 68, 68, 0.08);
}