/**
 * lk-loading.css — LUZOkit · CSS unificado para LK.loading + LK.feedback
 *
 * 6 keyframes únicos que reemplazan implementaciones dispersas:
 *   lk-shimmer   — skeleton (reemplaza nc4Shimmer, ag-shimmer, shimmer en sala)
 *   lk-spin      — spinner (reemplaza spin en cfg-photo-panel)
 *   lk-pulse     — pulse ring (reemplaza nc4Pulse, pulseRing en sala)
 *   lk-pop       — bounce-in scale (reemplaza nc4Pop, scaleCheck en sala)
 *   lk-draw      — stroke-dashoffset reveal (reemplaza strokeDraw en sala)
 *   lk-shake     — horizontal shake para errores
 *
 * Todos los selectores usan prefijo lk- para no colisionar con
 * implementaciones locales existentes (nc4-*, ag-*, etc).
 *
 * Tokens LUZOkit con fallback (light theme):
 *   --border:    #e2e8f0
 *   --bg-card:   #fff
 *   --bbg:       rgba(0,0,0,.04)
 *   --c-brand:   #6d28d9
 *   --tx-base:   #0f172a
 */

/* ──────────────────────────────────────────────────────────────────────
 * KEYFRAMES · los 6 únicos del sistema
 * ────────────────────────────────────────────────────────────────────── */

@keyframes lk-shimmer {
  0%, 100% { background-position:  200% 0; }
  50%      { background-position: -200% 0; }
}

@keyframes lk-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes lk-pulse {
  0%   { transform: scale(0.8); opacity: 0.5; }
  100% { transform: scale(2.4); opacity: 0;   }
}

@keyframes lk-pop {
  0%   { transform: scale(0.3); }
  60%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

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

@keyframes lk-shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

/* ──────────────────────────────────────────────────────────────────────
 * SKELETON
 * Estructura DOM:
 *   <div class="lk-sk">
 *     <div class="lk-sk-row">
 *       <div class="lk-sk-dot"></div>
 *       <div class="lk-sk-bd">
 *         <div class="lk-sk-ln"></div>
 *         <div class="lk-sk-ln"></div>
 *       </div>
 *     </div>
 *   </div>
 * ────────────────────────────────────────────────────────────────────── */

.lk-sk { padding: 4px 0; }

.lk-sk-row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 9px 0;
  border-bottom: 0.5px solid var(--border, #e2e8f0);
}
.lk-sk-row:last-child { border-bottom: 0; }

.lk-sk-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-top: 5px;
  flex-shrink: 0;
  background: linear-gradient(
    90deg,
    var(--border, #e2e8f0) 0%,
    var(--bbg, rgba(0,0,0,.04)) 50%,
    var(--border, #e2e8f0) 100%
  );
  background-size: 200% 100%;
  animation: lk-shimmer 1.5s ease-in-out infinite;
}

.lk-sk-bd {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.lk-sk-ln {
  height: 10px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--border, #e2e8f0) 0%,
    var(--bbg, rgba(0,0,0,.04)) 50%,
    var(--border, #e2e8f0) 100%
  );
  background-size: 200% 100%;
  animation: lk-shimmer 1.5s ease-in-out infinite;
}
.lk-sk-ln:nth-child(2) { animation-delay: 0.14s; }

.lk-sk-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px;
  background: var(--bg-card, #fff);
  border: 0.5px solid var(--border, #e2e8f0);
  border-radius: 10px;
}

/* ──────────────────────────────────────────────────────────────────────
 * SPINNER (en botón)
 * Uso: la clase lk-is-loading se aplica al botón.
 * El JS inyecta un <svg class="lk-spn"> dentro.
 * ────────────────────────────────────────────────────────────────────── */

.lk-is-loading {
  position: relative;
  pointer-events: none;
}
.lk-is-loading .lk-lbl { visibility: hidden; }

button .lk-spn,
.lk-is-loading .lk-spn {
  display: none;
}
.lk-is-loading .lk-spn {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  animation: lk-spin 0.75s linear infinite;
  color: currentColor;
}

/* ──────────────────────────────────────────────────────────────────────
 * OVERLAY
 * Uso: <div class="lk-loading-overlay">...</div> inyectado dentro de un
 * container con position:relative.
 * ────────────────────────────────────────────────────────────────────── */

.lk-loading-overlay {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--bg-card, #fff) 88%, transparent);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
  border-radius: inherit;
  z-index: 10;
}
.lk-loading-overlay.is-on {
  opacity: 1;
  pointer-events: auto;
}

.lk-ov-spn {
  width: 18px;
  height: 18px;
  color: var(--c-brand, #6d28d9);
  animation: lk-spin 0.75s linear infinite;
}

.lk-ov-msg {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--tx-base, #0f172a);
}

/* ──────────────────────────────────────────────────────────────────────
 * FEEDBACK · success checkmark
 * ────────────────────────────────────────────────────────────────────── */

.lk-fb-success {
  animation: lk-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.lk-fb-check {
  width: 100%;
  height: 100%;
}
.lk-fb-check path {
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  animation: lk-draw 0.5s ease forwards 0.15s;
}

/* ──────────────────────────────────────────────────────────────────────
 * FEEDBACK · pulse dot
 * ────────────────────────────────────────────────────────────────────── */

.lk-fb-pulse {
  position: relative;
}
.lk-fb-pulse::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  animation: lk-pulse 1.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}

/* ──────────────────────────────────────────────────────────────────────
 * FEEDBACK · error shake
 * ────────────────────────────────────────────────────────────────────── */

.lk-fb-error {
  animation: lk-shake 0.4s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* ──────────────────────────────────────────────────────────────────────
 * PREFERS-REDUCED-MOTION · respetar accesibilidad
 * ────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .lk-sk-dot,
  .lk-sk-ln,
  .lk-is-loading .lk-spn,
  .lk-ov-spn,
  .lk-fb-success,
  .lk-fb-check path,
  .lk-fb-pulse::before,
  .lk-fb-error {
    animation: none !important;
  }
  .lk-sk-dot,
  .lk-sk-ln {
    background: var(--border, #e2e8f0);
  }
  .lk-fb-check path {
    stroke-dashoffset: 0;
  }
}