/* ═══════════════════════════════════════════
   SKELETON LOADING — shimmer overlay for
   search box + chip row while data.json loads
═══════════════════════════════════════════ */

@keyframes sk-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position:  200% 0; }
}

.skeleton-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  pointer-events: none;
  padding: 12px 16px 0;
  transition: opacity 0.35s ease;
}

/* Ocultar todo el contenido real mientras carga */
body.app-loading #uiLayer > :not(#skeletonLayer),
body.app-loading #mobileFabs {
  visibility: hidden;
}

.sk-search-box {
  height: 44px;
  border-radius: 12px;
  margin-bottom: 10px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
}

.sk-chip-row {
  display: flex;
  gap: 8px;
}

.sk-chip {
  height: 34px;
  border-radius: 999px;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
  flex-shrink: 0;
}

.sk-chip--sm { width: 90px; }
.sk-chip--md { width: 110px; }
.sk-chip--lg { width: 130px; }

@media (max-width: 768px) {
  .skeleton-layer {
    padding: 8px 12px 0;
  }

  .sk-search-box {
    height: 40px;
    border-radius: 10px;
  }

  .sk-chip  { height: 30px; }
  .sk-chip--sm { width: 80px; }
  .sk-chip--md { width: 95px; }
  .sk-chip--lg { width: 115px; }
}