/**
 * RYM Music — Design System
 * Sprint Pro 1 — Tokens + Components
 *
 * Requiere: rym-theme.css (o variables inline equivalentes)
 * Usar en todos los subdominios del ecosistema.
 */

/* ═══════════════════════════════════════════════════════════
   TOKENS
═══════════════════════════════════════════════════════════ */

:root {

  /* ── Espaciado ─────────────────────────────────────────── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;

  /* ── Radios ────────────────────────────────────────────── */
  --r-xs:   4px;
  --r-sm:   8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-full: 9999px;

  /* ── Tipografía — tamaños ──────────────────────────────── */
  --fs-2xs:  10px;
  --fs-xs:   11px;
  --fs-sm:   12px;
  --fs-md:   13px;
  --fs-base: 14px;
  --fs-lg:   15px;
  --fs-xl:   16px;
  --fs-2xl:  18px;
  --fs-3xl:  20px;
  --fs-4xl:  24px;
  --fs-5xl:  28px;
  --fs-6xl:  34px;

  /* ── Tipografía — pesos ────────────────────────────────── */
  --fw-normal:   400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  /* ── Tipografía — interlineado ─────────────────────────── */
  --lh-tight:  1.2;
  --lh-snug:   1.35;
  --lh-normal: 1.5;

  /* ── Sombras (dark) ────────────────────────────────────── */
  --sh-xs:  0 1px  4px rgba(0,0,0,0.22);
  --sh-sm:  0 2px  8px rgba(0,0,0,0.28);
  --sh-md:  0 4px 16px rgba(0,0,0,0.32);
  --sh-lg:  0 8px 32px rgba(0,0,0,0.38);
  --sh-xl:  0 16px 48px rgba(0,0,0,0.44);

  --sh-orange:    0 4px 20px rgba(245,130,10,0.28);
  --sh-orange-lg: 0 8px 36px rgba(245,130,10,0.36);

  /* ── Transiciones ──────────────────────────────────────── */
  --t-fast:   0.12s ease;
  --t-base:   0.20s ease;
  --t-slow:   0.35s ease;
  --t-spring: 0.30s cubic-bezier(0.34,1.56,0.64,1);

  /* ── Aliases semánticos (unifican nombres dispersos) ───── */
  --card:     var(--card-bg,   rgba(255,255,255,0.04));
  --card-b:   var(--card-border, rgba(255,255,255,0.09));
  --input-b:  var(--input-border, rgba(255,255,255,0.10));
}

[data-theme="light"] {
  --sh-xs:  0 1px  4px rgba(30,20,0,0.08);
  --sh-sm:  0 2px  8px rgba(30,20,0,0.10);
  --sh-md:  0 4px 16px rgba(30,20,0,0.12);
  --sh-lg:  0 8px 32px rgba(30,20,0,0.14);
  --sh-xl:  0 16px 48px rgba(30,20,0,0.18);
}


/* ═══════════════════════════════════════════════════════════
   BADGES
   Uso: <span class="rym-badge rym-badge--stock">En stock</span>
═══════════════════════════════════════════════════════════ */

.rym-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  padding: 3px var(--sp-2);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
  line-height: 1;
  white-space: nowrap;
}
.rym-badge i { font-size: 11px; }

/* stock */
.rym-badge--stock    { background:var(--g-dim); color:var(--g); border:1px solid var(--g-border,rgba(29,158,117,0.25)); }
.rym-badge--nostock  { background:var(--s2,rgba(255,255,255,0.06)); color:var(--muted); border:1px solid transparent; }
/* sale */
.rym-badge--sale     { background:var(--o-dim); color:var(--o); border:1px solid var(--o-border,rgba(245,130,10,0.35)); }
/* new */
.rym-badge--new      { background:var(--g-dim); color:var(--g); border:1px solid var(--g-border,rgba(29,158,117,0.25)); }
/* bundle */
.rym-badge--bundle   { background:var(--b-dim); color:var(--b2); border:1px solid var(--b-border,rgba(74,144,217,0.30)); }
/* compatible */
.rym-badge--compat   { background:var(--p-dim); color:var(--p2); border:1px solid var(--p-border,rgba(123,63,190,0.30)); }
/* bazar */
.rym-badge--bazar    { background:var(--o-dim); color:var(--o); border:1px solid var(--o-border,rgba(245,130,10,0.35)); }
/* brand */
.rym-badge--brand    { background:var(--b-dim); color:var(--b2); border:1px solid transparent; }
/* quality score */
.rym-badge--quality  { background:var(--s2,rgba(255,255,255,0.07)); color:var(--text); border:1px solid var(--card-b); font-size:var(--fs-2xs); }
.rym-badge--quality .score-high { color:var(--g); }
.rym-badge--quality .score-mid  { color:var(--o); }
.rym-badge--quality .score-low  { color:var(--r); }

/* lg variant */
.rym-badge--lg { padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); border-radius: var(--r-md); }


/* ═══════════════════════════════════════════════════════════
   COMPAT BADGE
   Uso: <span class="compat-badge compat-badge--positive">Compatible con PSR-SX920</span>
═══════════════════════════════════════════════════════════ */

.compat-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3);
  border-radius: var(--r-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  border: 1px solid;
}
.compat-badge i { font-size: 13px; }

.compat-badge--positive { background:var(--g-dim); color:var(--g); border-color:var(--g-border,rgba(29,158,117,0.25)); }
.compat-badge--bundle   { background:var(--b-dim); color:var(--b2); border-color:var(--b-border,rgba(74,144,217,0.30)); }
.compat-badge--upgrade  { background:var(--p-dim); color:var(--p2); border-color:var(--p-border,rgba(123,63,190,0.30)); }
.compat-badge--negative { background:var(--r-dim); color:var(--r); border-color:rgba(226,75,74,0.25); }


/* ═══════════════════════════════════════════════════════════
   BUTTONS
   Uso: <button class="rym-btn rym-btn--primary">Comprar</button>
═══════════════════════════════════════════════════════════ */

.rym-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--t-base);
  white-space: nowrap;
  text-decoration: none;
}
.rym-btn i { font-size: 15px; }

.rym-btn--primary {
  background: var(--o);
  color: #fff;
  border-color: var(--o);
  box-shadow: var(--sh-orange);
}
.rym-btn--primary:hover {
  background: var(--o2);
  border-color: var(--o2);
  transform: translateY(-1px);
  box-shadow: var(--sh-orange-lg);
}

.rym-btn--secondary {
  background: var(--glass);
  color: var(--text);
  border-color: var(--glass-b);
  backdrop-filter: blur(8px);
}
.rym-btn--secondary:hover {
  border-color: var(--o-border,rgba(245,130,10,0.40));
  color: var(--o);
}

.rym-btn--ghost {
  background: transparent;
  color: var(--muted);
  border-color: transparent;
}
.rym-btn--ghost:hover { color:var(--text); background:var(--glass); }

.rym-btn--danger {
  background: var(--r-dim);
  color: var(--r);
  border-color: rgba(226,75,74,0.25);
}
.rym-btn--danger:hover { background:var(--r); color:#fff; }

/* sizes */
.rym-btn--sm { padding: 5px var(--sp-3); font-size: var(--fs-sm); border-radius: var(--r-sm); }
.rym-btn--lg { padding: var(--sp-3) var(--sp-8); font-size: var(--fs-lg); border-radius: var(--r-lg); }
.rym-btn--full { width: 100%; }
.rym-btn--icon { padding: var(--sp-2); aspect-ratio: 1; }

/* loading state */
.rym-btn[data-loading] { opacity:0.7; pointer-events:none; }


/* ═══════════════════════════════════════════════════════════
   PRODUCT CARD
   Uso: <div class="product-card"> ... </div>
═══════════════════════════════════════════════════════════ */

.product-card {
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--card-b);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: transform var(--t-base), border-color var(--t-base), box-shadow var(--t-base);
  cursor: pointer;
  position: relative;
  text-decoration: none;
  color: inherit;
}
.product-card:hover {
  transform: translateY(-3px);
  border-color: rgba(245,130,10,0.30);
  box-shadow: var(--sh-md);
}

/* image */
.pc-img-wrap {
  position: relative;
  aspect-ratio: 1;
  background: var(--s1,rgba(255,255,255,0.03));
  overflow: hidden;
}
.pc-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: var(--sp-4);
  transition: transform var(--t-spring);
}
.product-card:hover .pc-img { transform: scale(1.05); }

.pc-img-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hint);
  font-size: 48px;
}

/* badges over image */
.pc-badges {
  position: absolute;
  top: var(--sp-2);
  left: var(--sp-2);
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  z-index: 2;
}

/* compare toggle */
.pc-compare-btn {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: var(--glass);
  border: 1px solid var(--glass-b);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  transition: all var(--t-fast);
  z-index: 2;
}
.pc-compare-btn:hover,
.pc-compare-btn.active { border-color:var(--o-border,rgba(245,130,10,0.40)); color:var(--o); }

/* body */
.pc-body {
  padding: var(--sp-3) var(--sp-4) var(--sp-4);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}

.pc-brand {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--o);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.pc-name {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--text);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* quality score row */
.pc-quality {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.pc-stars {
  display: flex;
  gap: 2px;
  color: var(--o);
  font-size: 11px;
}
.pc-stars .star-empty { color: var(--hint); }
.pc-score {
  font-size: var(--fs-xs);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* compat count */
.pc-compat {
  display: flex;
  align-items: center;
  gap: var(--sp-1);
  font-size: var(--fs-xs);
  color: var(--muted);
}
.pc-compat i { font-size: 12px; color: var(--p2); }
.pc-compat strong { color: var(--p2); }

/* ecosystem indicators */
.pc-eco {
  display: flex;
  gap: var(--sp-1);
  flex-wrap: wrap;
}
.pc-eco-pill {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: var(--r-full);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  background: var(--glass);
  border: 1px solid var(--glass-b);
  color: var(--muted);
  transition: color var(--t-fast), border-color var(--t-fast);
}
.pc-eco-pill i { font-size: 10px; }
.pc-eco-pill--course  { color:var(--o); border-color:var(--o-dim); }
.pc-eco-pill--rhythm  { color:var(--b2); border-color:var(--b-dim); }
.pc-eco-pill--service { color:var(--g); border-color:var(--g-dim); }

/* spacer pushes price to bottom */
.pc-spacer { flex: 1; }

/* price */
.pc-price-row {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  flex-wrap: wrap;
}
.pc-price {
  font-family: 'Syne', sans-serif;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-black);
  color: var(--text);
  line-height: 1;
}
.pc-price-was {
  font-size: var(--fs-sm);
  color: var(--muted);
  text-decoration: line-through;
}

/* CTA */
.pc-cta {
  margin-top: var(--sp-2);
}


/* ═══════════════════════════════════════════════════════════
   CATEGORY CARD
   Uso: <a class="category-card" href="/catalogo.php?category=slug">
═══════════════════════════════════════════════════════════ */

.category-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-4);
  background: var(--card);
  border: 1px solid var(--card-b);
  border-radius: var(--r-lg);
  text-align: center;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  transition: all var(--t-base);
}
.category-card:hover {
  border-color: rgba(245,130,10,0.35);
  background: var(--o-dim);
  transform: translateY(-2px);
  box-shadow: var(--sh-sm);
}

.cc-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.cc-name {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text);
  line-height: var(--lh-snug);
}

.cc-count {
  font-size: var(--fs-xs);
  color: var(--muted);
}


/* ═══════════════════════════════════════════════════════════
   STAT CARD
   Uso: <div class="stat-card">
═══════════════════════════════════════════════════════════ */

.stat-card {
  background: var(--card);
  border: 1px solid var(--card-b);
  border-radius: var(--r-lg);
  padding: var(--sp-5) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.stat-card--orange { border-color: var(--o-border,rgba(245,130,10,0.30)); }
.stat-card--blue   { border-color: var(--b-border,rgba(74,144,217,0.30)); }
.stat-card--green  { border-color: var(--g-border,rgba(29,158,117,0.25)); }
.stat-card--purple { border-color: var(--p-border,rgba(123,63,190,0.30)); }

.sc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.sc-label {
  font-size: var(--fs-sm);
  color: var(--muted);
  font-weight: var(--fw-medium);
}
.sc-icon {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.sc-icon--orange { background:var(--o-dim); color:var(--o); }
.sc-icon--blue   { background:var(--b-dim); color:var(--b2); }
.sc-icon--green  { background:var(--g-dim); color:var(--g); }
.sc-icon--purple { background:var(--p-dim); color:var(--p2); }

.sc-value {
  font-family: 'Syne', sans-serif;
  font-size: var(--fs-4xl);
  font-weight: var(--fw-black);
  line-height: 1;
  color: var(--text);
}

.sc-delta {
  font-size: var(--fs-xs);
  display: flex;
  align-items: center;
  gap: 3px;
}
.sc-delta--up   { color: var(--g); }
.sc-delta--down { color: var(--r); }
.sc-delta--flat { color: var(--muted); }


/* ═══════════════════════════════════════════════════════════
   ECOSYSTEM CARD
   Uso: <a class="eco-card eco-card--course" href="...">
═══════════════════════════════════════════════════════════ */

.eco-card {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-md);
  border: 1px solid var(--card-b);
  background: var(--card);
  text-decoration: none;
  color: inherit;
  transition: all var(--t-base);
}
.eco-card:hover {
  transform: translateX(3px);
  border-color: rgba(245,130,10,0.30);
}

.eco-card-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--r-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.eco-card--course  .eco-card-icon { background:var(--o-dim); color:var(--o); }
.eco-card--rhythm  .eco-card-icon { background:var(--b-dim); color:var(--b2); }
.eco-card--service .eco-card-icon { background:var(--g-dim); color:var(--g); }
.eco-card--fran    .eco-card-icon { background:var(--p-dim); color:var(--p2); }
.eco-card--support .eco-card-icon { background:var(--g-dim); color:var(--g); }

.eco-card-body { flex:1; min-width:0; }
.eco-card-name { font-size:var(--fs-md); font-weight:var(--fw-semibold); color:var(--text); }
.eco-card-sub  { font-size:var(--fs-xs); color:var(--muted); margin-top:2px; }
.eco-card-arrow { color:var(--hint); font-size:14px; flex-shrink:0; }


/* ═══════════════════════════════════════════════════════════
   UTILITY — SECTIÓN HEADER
═══════════════════════════════════════════════════════════ */

.rym-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-bottom: var(--sp-6);
  flex-wrap: wrap;
}
.rym-section-title {
  font-family: 'Syne', sans-serif;
  font-size: var(--fs-3xl);
  font-weight: var(--fw-black);
  letter-spacing: -0.02em;
  line-height: var(--lh-tight);
}
.rym-section-sub {
  font-size: var(--fs-md);
  color: var(--muted);
  margin-top: var(--sp-1);
}

/* ── Grid utilitarios ──────────────────────────────────── */
.rym-grid-cards {
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.rym-grid-cards--sm { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.rym-grid-cards--lg { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

/* ── Divider ────────────────────────────────────────────── */
.rym-divider {
  border: none;
  border-top: 1px solid var(--card-b);
  margin: var(--sp-8) 0;
}

/* ── Empty state ────────────────────────────────────────── */
.rym-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-4);
  padding: var(--sp-16) var(--sp-6);
  text-align: center;
  color: var(--muted);
}
.rym-empty i    { font-size: 48px; color: var(--hint); }
.rym-empty h3   { font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: var(--text); }
.rym-empty p    { font-size: var(--fs-md); max-width: 360px; }

/* ── Skeleton loader ────────────────────────────────────── */
@keyframes rym-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
.rym-skeleton {
  background: linear-gradient(90deg,
    var(--s1,rgba(255,255,255,0.04)) 25%,
    var(--s2,rgba(255,255,255,0.08)) 50%,
    var(--s1,rgba(255,255,255,0.04)) 75%
  );
  background-size: 800px 100%;
  animation: rym-shimmer 1.4s infinite;
  border-radius: var(--r-sm);
}