/* ══════════════════════════════════════════════════════════════
   style_skeleton.css — Skeletons de carga — Proyecto Odín
   ══════════════════════════════════════════════════════════════ */

:root {
  --sk-base: #e8e6e1;
  --sk-shine: #f5f3ee;
  --sk-bg: #ffffff;
}

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

.sk {
  background: linear-gradient(
    90deg,
    var(--sk-base)  25%,
    var(--sk-shine) 50%,
    var(--sk-base)  75%
  ) !important;
  background-size: 200% 100% !important;
  animation: skShimmer 1.4s ease-in-out infinite !important;
  border-radius: 8px;
}

/* ══════════════════════════════════════════════════════════════
   IMAGEN — shimmer en ::before del wrapper
   El wrapper se queda con su color de fondo del config.
   El ::before está encima con shimmer animado.
   Cuando la imagen carga, JS quita .sk-card-img y el ::before
   desaparece — quedando solo la imagen real.
   ══════════════════════════════════════════════════════════════ */
.hc-img-wrap,
.mc-img-wrap {
  position: relative;
}

.hc-img-wrap.sk-card-img::before,
.mc-img-wrap.sk-card-img::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--sk-base)  25%,
    var(--sk-shine) 50%,
    var(--sk-base)  75%
  );
  background-size: 200% 100%;
  animation: skShimmer 1.4s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
}

/* La imagen real va encima del shimmer */
.hc-img-wrap .hc-img,
.mc-img-wrap .mc-img {
  position: relative;
  z-index: 2;
}

/* ══════════════════════════════════════════════════════════════
   Card completa skeleton (inyectada por JS — sin imagen real)
   ══════════════════════════════════════════════════════════════ */
.sk-card {
  background: var(--sk-bg) !important;
  border: 1px solid rgba(0,0,0,0.05) !important;
}

.sk-card-name {
  height: 13px;
  width: 80%;
  margin-bottom: 6px;
  background: linear-gradient(
    90deg,
    var(--sk-base)  25%,
    var(--sk-shine) 50%,
    var(--sk-base)  75%
  ) !important;
  background-size: 200% 100% !important;
  animation: skShimmer 1.4s ease-in-out infinite !important;
  border-radius: 8px;
}

.sk-card-price {
  height: 11px;
  width: 45%;
  background: linear-gradient(
    90deg,
    var(--sk-base)  25%,
    var(--sk-shine) 50%,
    var(--sk-base)  75%
  ) !important;
  background-size: 200% 100% !important;
  animation: skShimmer 1.4s ease-in-out infinite !important;
  border-radius: 8px;
}

.sk-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  padding: 10px 0 6px;
}

/* ══════════════════════════════════════════════════════════════
   RAIL
   ══════════════════════════════════════════════════════════════ */
.sk-rail-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 4px 0;
  width: 100%;
}

.sk-rail-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  flex-shrink: 0;
  background: linear-gradient(
    90deg,
    var(--sk-base)  25%,
    var(--sk-shine) 50%,
    var(--sk-base)  75%
  ) !important;
  background-size: 200% 100% !important;
  animation: skShimmer 1.4s ease-in-out infinite !important;
}

.sk-rail-btn:nth-child(1) { animation-delay: 0s;    }
.sk-rail-btn:nth-child(2) { animation-delay: .08s;  }
.sk-rail-btn:nth-child(3) { animation-delay: .16s;  }
.sk-rail-btn:nth-child(4) { animation-delay: .24s;  }
.sk-rail-btn:nth-child(5) { animation-delay: .32s;  }
.sk-rail-btn:nth-child(6) { animation-delay: .40s;  }
.sk-rail-btn:nth-child(7) { animation-delay: .48s;  }
.sk-rail-btn:nth-child(8) { animation-delay: .56s;  }

/* ══════════════════════════════════════════════════════════════
   SECTION HEADERS
   ══════════════════════════════════════════════════════════════ */
.sk-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0 8px;
}

.sk-section-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
  background: linear-gradient(
    90deg,
    var(--sk-base)  25%,
    var(--sk-shine) 50%,
    var(--sk-base)  75%
  ) !important;
  background-size: 200% 100% !important;
  animation: skShimmer 1.4s ease-in-out infinite !important;
}

.sk-section-title {
  height: 14px;
  width: 130px;
  background: linear-gradient(
    90deg,
    var(--sk-base)  25%,
    var(--sk-shine) 50%,
    var(--sk-base)  75%
  ) !important;
  background-size: 200% 100% !important;
  animation: skShimmer 1.4s ease-in-out infinite !important;
  border-radius: 6px;
}

.sk-section-count {
  height: 18px;
  width: 52px;
  border-radius: 100px;
  background: linear-gradient(
    90deg,
    var(--sk-base)  25%,
    var(--sk-shine) 50%,
    var(--sk-base)  75%
  ) !important;
  background-size: 200% 100% !important;
  animation: skShimmer 1.4s ease-in-out infinite !important;
}

.sk-section { margin-bottom: 8px; }

/* ══════════════════════════════════════════════════════════════
   FADE-OUT
   ══════════════════════════════════════════════════════════════ */
.sk-fade-out {
  animation: skFadeOut .25s ease forwards;
  pointer-events: none;
}

@keyframes skFadeOut {
  to { opacity: 0; transform: translateY(-4px); }
}