/* === Variables Glass Spotify === */
:root{ --mc-bg:#0a0a0a; --mc-panel:#111; --mc-card:rgba(255,255,255,.04); --mc-border:rgba(255,255,255,.08); --mc-accent:#00ffd1; --mc-accent-2:#00a3ff; --mc-text:#eaeaea; }
.mc-wrap{background:var(--mc-panel);color:var(--mc-text);border-radius:16px;padding:1.5rem;box-shadow:0 0 22px rgba(0,255,209,.08);border:1px solid var(--mc-border);}
.cs-glass-btn{display:inline-block;background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06));border:1px solid var(--mc-border);backdrop-filter:blur(8px);padding:.6rem 1rem;border-radius:12px;color:#fff;text-decoration:none;font-weight:700;transition:.25s;}
.cs-glass-btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,255,209,.18);}
.mc-home{background:#111;color:#eee;border-radius:14px;padding:2rem;margin:2rem auto;max-width:1100px;box-shadow:0 0 12px rgba(0,255,209,.1);text-align:center;}
.mc-home h1{color:var(--mc-accent);margin-bottom:.5rem;font-size:2.6rem;}
.mc-home p{opacity:.85;margin-bottom:1.1rem;}
.mc-home-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.2rem;margin-top:.6rem;}
.mc-home-card{background:#1a1a1a;border-radius:12px;padding:1.2rem;transition:.3s;border:1px solid var(--mc-border);}
.mc-home-card:hover{background:#0f0f0f;box-shadow:0 0 12px rgba(0,255,209,.25);transform:translateY(-3px);}
.mc-home-card h3{color:var(--mc-accent);margin-bottom:.35rem;}
.mc-home-card p{font-size:.9rem;opacity:.9;margin-bottom:.6rem;}
.mc-grid{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}

.mc-track-card{background:#1a1a1a;border-radius:14px;overflow:hidden;transition:transform .2s, box-shadow .25s;border:1px solid var(--mc-border);}
.mc-track-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px rgba(0,255,209,.16);}
.mc-track-cover{width:100%;max-height:250px;object-fit:cover;display:block;background:#0e0e0e;border-radius:.6rem;box-shadow:0 0 12px rgba(29,185,84,0.2);}
.mc-track-info{padding:1rem;}
.mc-track-title{font-size:1.05rem;font-weight:700;margin:0 0 .25rem;}
.mc-track-artist{font-size:.9rem;opacity:.8;}
.mc-track-desc{font-size:.9rem;opacity:.85;margin:.5rem 0 .75rem;min-height:2.6em;}
.mc-track-meta{display:flex;align-items:center;justify-content:space-between;gap:.5rem;}
.mc-badge{font-size:.8rem;padding:.25rem .5rem;border-radius:6px;background:#0f1f1d;color:var(--mc-accent);}
.mc-link{color:var(--mc-accent);text-decoration:none;font-weight:600;}
.mc-link:hover{text-decoration:underline;}

.mc-ranking{max-width:980px;margin:3rem auto;background:#0a0a0a;padding:2.0rem;border-radius:18px;color:#eee;box-shadow:0 0 30px rgba(0,255,209,0.06);border:1px solid var(--mc-border);}
.mc-ranking h2{text-align:center;color:var(--mc-accent);font-size:1.9rem;font-weight:700;margin-bottom:1.2rem;}
.mc-ranking ol{list-style:none;padding:0;margin:0;}
.mc-ranking-item{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.07);padding:.8rem 0;transition:all .25s ease;background:rgba(255,255,255,0.03);border-radius:.5rem;margin-bottom:.6rem;}
.mc-ranking-item:hover{background:rgba(255,255,255,.06);transform:translateX(3px);}
.mc-posicion{width:40px;text-align:center;font-weight:700;color:var(--mc-accent);flex-shrink:0;font-size:1.1rem;}
.mc-ranking-main{display:flex;align-items:center;flex:1;gap:12px;overflow:hidden;}
.mc-ranking-cover{width:80px;height:80px;border-radius:10px;object-fit:cover;background:#111;flex-shrink:0;transition:transform .25s;box-shadow:0 0 10px rgba(29,185,84,0.25);}
.mc-ranking-item:hover .mc-ranking-cover{transform:scale(1.05);}
.mc-ranking-info{display:flex;flex-direction:column;gap:2px;overflow:hidden;}
.mc-titulo{color:#fff;font-size:1.05rem;font-weight:600;text-decoration:none;}
.mc-titulo:hover{color:var(--mc-accent);}
.mc-artist-ranking{color:#aaa;font-size:.9rem;font-style:italic;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mc-ranking-right{display:flex;align-items:center;gap:10px;}
.mc-puntaje{color:var(--mc-accent);font-weight:700;font-size:.95rem;}

.mc-actions{display:flex;gap:.6rem;flex-wrap:wrap;justify-content:flex-start;margin:.6rem 0 1rem;}
.mc-actions.mc-nav{justify-content:center;margin-top:1.2rem;}

#mc-subir.mc-wrap{max-width:700px;margin:2rem auto;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);border-radius:22px;box-shadow:0 0 25px rgba(0,255,209,0.07);padding:2rem 2.2rem;backdrop-filter:blur(14px) saturate(1.3);}
#mc-subir h2{color:var(--mc-accent);text-align:center;font-size:1.9rem;margin-bottom:1.3rem;letter-spacing:.02em;}
#mc-subir form{display:flex;flex-direction:column;gap:.9rem;}
#mc-subir label{display:flex;flex-direction:column;text-align:left;color:var(--mc-text);font-weight:500;font-size:.93rem;}
#mc-subir input,#mc-subir textarea,#mc-subir select{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);border-radius:10px;color:var(--mc-text);padding:.5rem .8rem;font-size:.93rem;outline:none;transition:all .25s ease;}
#mc-subir textarea{min-height:80px;}
#mc-subir input:focus,#mc-subir textarea:focus{border-color:var(--mc-accent);box-shadow:0 0 8px rgba(0,255,209,0.25);background:rgba(255,255,255,0.09);}
#mc-subir button.cs-glass-btn{margin-top:.3rem;background:linear-gradient(180deg,rgba(255,255,255,0.1),rgba(255,255,255,0.04));border:1px solid rgba(255,255,255,0.1);color:#fff;font-weight:600;letter-spacing:.04em;padding:.6rem 1.3rem;border-radius:12px;transition:all .25s ease;}
#mc-subir button.cs-glass-btn:hover{transform:translateY(-2px);box-shadow:0 0 20px rgba(0,255,209,0.35);color:var(--mc-accent);}

/* Embeds */
.mc-embeds .mc-embed{margin:.8rem 0; background:rgba(255,255,255,0.04); border:1px solid var(--mc-border); padding:.6rem; border-radius:12px;}
.mc-single-media .mc-row-link{display:flex; gap:12px; align-items:center; margin-bottom:.5rem;}

.mc-progress{height:8px;background:rgba(255,255,255,0.06);border:1px solid var(--mc-border);border-radius:999px;overflow:hidden;margin-top:.35rem;}
.mc-progress .bar{height:100%;width:0%;background:linear-gradient(90deg,var(--mc-accent),var(--mc-accent-2));transition:width .2s ease;}

/* Placeholder glass style */
.mc-ranking-cover[src*="placeholder-glass.png"],
.mc-track-cover[src*="placeholder-glass.png"]{
  backdrop-filter: blur(6px);
  background: rgba(20,20,20,0.5);
  border: 1px solid rgba(29,185,84,0.4);
  box-shadow: 0 0 20px rgba(29,185,84,0.2);
  object-fit: contain;
  padding: 1rem;
}


/* === Spotify Glass Sliders === */
.mc-slider{
  -webkit-appearance:none; appearance:none; width:100%;
  height:10px; border-radius:999px; background:rgba(255,255,255,0.08);
  border:1px solid var(--mc-border); outline:none;
  box-shadow: inset 0 0 12px rgba(0,0,0,0.35), 0 6px 20px rgba(0,255,209,0.06);
  transition:filter .2s ease, background .2s ease;
}
.mc-slider:hover{ filter:brightness(1.1); }
.mc-slider:disabled{ opacity:.5; cursor:not-allowed; }
.mc-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:18px; height:18px; border-radius:50%;
  background: linear-gradient(180deg, var(--mc-accent), var(--mc-accent-2));
  border:2px solid rgba(255,255,255,0.45);
  box-shadow: 0 4px 18px rgba(0,255,209,0.35), inset 0 0 6px rgba(255,255,255,0.5);
  cursor:pointer; transition: transform .15s ease;
}
.mc-slider::-moz-range-thumb{
  width:18px; height:18px; border-radius:50%;
  background: linear-gradient(180deg, var(--mc-accent), var(--mc-accent-2));
  border:2px solid rgba(255,255,255,0.45);
  box-shadow: 0 4px 18px rgba(0,255,209,0.35), inset 0 0 6px rgba(255,255,255,0.5);
  cursor:pointer; transition: transform .15s ease;
}
.mc-slider::-webkit-slider-thumb:hover,
.mc-slider::-moz-range-thumb:hover{ transform: scale(1.06); }

/* Value bubble next to slider */
.mc-slider-value{
  display:inline-block; min-width:2ch; text-align:center; font-weight:700;
  color:var(--mc-accent); margin-left:.5rem;
}

/* Disabled states */
.mc-btn-disabled{ opacity:.6; cursor:not-allowed; }

/* Toast */
.mc-toast{
  position:fixed; top:16px; left:50%; transform:translateX(-50%) translateY(-12px);
  background: linear-gradient(180deg, rgba(255,255,255,.13), rgba(255,255,255,.06));
  border:1px solid var(--mc-border); color:#fff; padding:.6rem 1rem; border-radius:12px;
  backdrop-filter: blur(10px); box-shadow:0 18px 40px rgba(0,0,0,.35), 0 8px 26px rgba(0,255,209,.18);
  opacity:0; transition: all .35s ease; z-index: 9999; font-weight:700; letter-spacing:.04em;
}
.mc-toast.show{ transform:translateX(-50%) translateY(0); opacity:1; }


/* === Compact grid for [mc_all_songs] === */
.mc-all{max-width:1100px;margin:1.2rem auto;padding:.4rem .6rem;}
.mc-all .mc-filters{display:flex;gap:.6rem;align-items:center;margin:.4rem 0 1rem;flex-wrap:wrap;}
.mc-all .mc-filters input,.mc-all .mc-filters select{
  background:rgba(255,255,255,0.06);border:1px solid var(--mc-border);border-radius:10px;
  padding:.4rem .6rem;color:var(--mc-text);font-size:.9rem;outline:none;
}
.mc-all .mc-list{
  display:grid;gap:.8rem;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
}
.mc-all .mc-track-card{border-radius:12px;overflow:hidden;border:1px solid var(--mc-border);background:#121212;}
.mc-all .mc-track-cover{width:100%;aspect-ratio:1/1;max-height:none;object-fit:cover;border-radius:0;}
.mc-all .mc-track-info{padding:.55rem .6rem;}
.mc-all .mc-track-title{font-size:.95rem;line-height:1.1;margin:0 0 .2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mc-all .mc-track-artist{font-size:.8rem;opacity:.75;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mc-all .mc-track-meta{margin-top:.35rem;display:flex;justify-content:space-between;align-items:center;gap:.4rem;}
.mc-all .mc-badge{font-size:.72rem;padding:.16rem .4rem;border-radius:6px;}
.mc-all .mc-link{font-size:.75rem}
/* hover micro-interaction */
.mc-all .mc-track-card:hover{transform:translateY(-3px);box-shadow:0 10px 22px rgba(0,255,209,.12);}
/* Make images visually smaller on dense grids by adding subtle inner padding for placeholders only */
.mc-all .mc-track-cover[src*="placeholder-glass.png"]{padding:.7rem;object-fit:contain;}


/* === Feed de actividad (mc_rate) === */
.mc-feed{margin-top:1.2rem;}
.mc-feed-item{
  background: rgba(255,255,255,0.04);
  border:1px solid var(--mc-border);
  border-radius:12px;
  padding:.7rem .8rem;
  margin:.5rem 0;
}
.mc-feed-header{display:flex;align-items:center;gap:.6rem;justify-content:space-between;}
.mc-avatar{
  width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06));
  border:1px solid var(--mc-border); font-weight:800;
}
.mc-feed-meta{display:flex;flex-direction:column;gap:0;flex:1;min-width:0;}
.mc-feed-meta strong{color:#fff;}
.mc-feed-meta small{color:#aaa;}
.mc-feed-pills{display:flex;gap:.3rem;align-items:center;flex-wrap:wrap;}
.mc-pill{
  font-size:.75rem;padding:.12rem .4rem;border-radius:999px;
  background:#0f1f1d;border:1px solid var(--mc-border);color:var(--mc-accent);font-weight:700;
}
.mc-feed-comment{margin:.5rem 0 0; color:#ddd; white-space:pre-wrap;}