/* ---------- Análisis de playlists ---------- */
:root { --cmpA: #16a34a; --cmpB: #3a8fe0; --cmpC: #e0588c; }

.anCab { position: relative; margin: 0 calc(50% - 50vw); padding: 36px max(16px, calc(50vw - 524px)) 28px;
  background: linear-gradient(180deg, var(--anTinte, #2d2350) 0%, rgba(18,18,18,0) 100%); }
.anCabFila { display: flex; gap: 24px; align-items: flex-end; }
.anPortada { width: clamp(120px, 22vw, 210px); aspect-ratio: 1; flex: none; border-radius: 6px; overflow: hidden; box-shadow: 0 20px 50px rgba(0,0,0,.55); background: linear-gradient(135deg, #3a3a3a, #1d1d1d); }
.anPortada img { width: 100%; height: 100%; object-fit: cover; display: block; }
.anPortada .mosaico { height: 100%; }
.anCab .tipo { font-size: .8rem; font-weight: 700; }
.anCab h1 { font-size: clamp(2rem, 6.5vw, 4.6rem); font-weight: 900; letter-spacing: -.045em; line-height: .98; margin: 6px 0 10px; overflow-wrap: anywhere; }
.anCab .linea { color: var(--sub); font-size: .92rem; }
.anCab .linea b { color: var(--texto); }
@media (max-width: 560px) { .anCabFila { flex-direction: column; align-items: flex-start; gap: 16px; } .anPortada { width: 150px; } }

.anFuentes { display: flex; gap: 8px; overflow-x: auto; padding: 14px 16px 4px; margin: 0 -16px; scrollbar-width: none; }
.anFuentes::-webkit-scrollbar { display: none; }
.anFuente { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px 0 4px; border-radius: 6px; background: rgba(255,255,255,.08); font-weight: 700; font-size: .88rem; white-space: nowrap; transition: background .15s; flex: none; }
.anFuente:hover { background: rgba(255,255,255,.14); }
.anFuente img, .anFuente .ic { width: 32px; height: 32px; border-radius: 4px; object-fit: cover; flex: none; background: #333; display: grid; place-items: center; }
.anFuente[aria-pressed=true] { background: #fff; color: #000; }
.anFuente.comparar { padding-left: 14px; }
.anFuente.comparar[aria-pressed=true] { background: var(--verde); }

/* Barra de filtros */
.anFiltros { position: sticky; top: calc(58px + env(safe-area-inset-top, 0px)); z-index: 20; margin: 0 -16px; padding: 10px 16px; background: rgba(18,18,18,.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; border-bottom: 1px solid #222; }
.anFiltros .anCuenta { font-weight: 800; font-variant-numeric: tabular-nums; margin-right: 4px; }
.anFiltros .anCuenta small { color: var(--sub); font-weight: 600; }
.chipFiltro { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 6px 0 12px; border-radius: 999px; background: var(--verde); color: #000; font-weight: 700; font-size: .84rem; max-width: 220px; animation: entra .25s both; }
.chipFiltro span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chipFiltro button { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.chipFiltro button:hover { background: rgba(0,0,0,.15); }
.chipFiltro svg { width: 11px; height: 11px; }
.anFiltros .derecha { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.anFiltros .boton { height: 38px; padding: 0 18px; font-size: .9rem; }
.anBuscar { position: relative; flex: 1 1 200px; max-width: 320px; }
.anFiltros .anBuscar input { height: 38px; padding-left: 38px; font-size: .92rem; }
.anBuscar svg { position: absolute; left: 12px; top: 10px; width: 18px; height: 18px; color: var(--sub); pointer-events: none; }
@media (max-width: 640px) {
  .anFiltros .derecha { margin-left: 0; width: 100%; flex-wrap: wrap; }
  .anFiltros .anBuscar { flex: 1 1 100%; }
  .anFiltros .derecha .boton { flex: 1; }
  .anBuscar { max-width: none; }
}

/* Rejilla de tarjetas */
.anRejilla { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; margin-top: 20px; }
.anTarjeta { grid-column: span 12; background: var(--elev); border-radius: var(--radioG); padding: 20px; min-width: 0; }
.anTarjeta.media { grid-column: span 6; }
@media (max-width: 860px) { .anTarjeta.media { grid-column: span 12; } }
.anTarjeta h2 { margin: 0; font-size: 1.2rem; font-weight: 800; letter-spacing: -.015em; }
.anTarjeta .bajada { color: var(--sub); font-size: .88rem; margin: 2px 0 16px; }
.anTarjeta .cabT { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.anTarjeta .cabT .enlaceSuave { font-size: .84rem; }
@media (max-width: 480px) { .anTarjeta { padding: 16px 14px; } .anRejilla { gap: 12px; } }

/* Cifras */
.anCifras { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 760px) { .anCifras { grid-template-columns: repeat(2, 1fr); } }
.anCifra { background: var(--elev); border-radius: 12px; padding: 16px; min-width: 0; }
.anCifra .v { font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 900; letter-spacing: -.035em; line-height: 1.05; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.anCifra .v small { font-size: .5em; letter-spacing: 0; color: var(--sub); font-weight: 700; margin-left: 2px; }
.anCifra .e { color: var(--sub); font-size: .82rem; margin-top: 4px; }
.medidor { height: 6px; border-radius: 3px; background: var(--elev3); margin-top: 10px; overflow: hidden; }
.medidor i { display: block; height: 100%; border-radius: 3px; background: var(--verde); }

/* Frases sobre ti */
.anFrases { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.anFrase { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; text-align: left; padding: 14px; border-radius: 12px; background: rgba(255,255,255,.05); transition: background .15s, transform .1s; line-height: 1.4; }
.anFrase:hover { background: rgba(255,255,255,.1); }
.anFrase:active { transform: scale(.99); }
.anFrase .ic { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 1.25rem; background: var(--elev3); }
.anFrase b { color: #fff; }
.anFrase span { color: #d6d6d6; font-size: .93rem; }
.anFrase small { display: block; color: var(--verde); font-weight: 700; font-size: .78rem; margin-top: 6px; }
div.anFrase small { display: none; }

/* Gráficas */
.grafica { position: relative; width: 100%; }
.grafica svg { display: block; width: 100%; overflow: visible; }
.grafica .barra { cursor: pointer; transition: opacity .15s; }
.grafica .barra rect.vis { transition: fill .15s; }
.grafica.conSeleccion .barra:not(.sel) rect.vis { fill: #3a3a3a; }
.grafica .barra:hover rect.vis { fill: #fff; }
.grafica text { fill: var(--sub); font-size: 11px; font-family: inherit; }
.grafica .eje { stroke: #333; stroke-width: 1; }
.grafica .rejilla { stroke: #262626; stroke-width: 1; }
.anDecadas { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.anDecada { height: 32px; padding: 0 12px; border-radius: 999px; background: var(--elev3); font-weight: 700; font-size: .84rem; font-variant-numeric: tabular-nums; }
.anDecada small { color: var(--sub); font-weight: 600; margin-left: 4px; }
.anDecada:hover { background: #3a3a3a; }
.anDecada[aria-pressed=true] { background: var(--verde); color: #000; }
.anDecada[aria-pressed=true] small { color: #0b3d1d; }

/* Lista de ranking (artistas, quién añade) */
.ranking { display: flex; flex-direction: column; gap: 2px; }
.filaRank { display: grid; grid-template-columns: 22px 40px minmax(0, 1fr) minmax(60px, 34%) 46px; gap: 12px; align-items: center; padding: 6px 8px; border-radius: 6px; text-align: left; transition: background .15s; }
.filaRank:hover { background: rgba(255,255,255,.07); }
.filaRank[aria-pressed=true] { background: rgba(30,215,96,.14); }
.filaRank .n { color: var(--sub); font-variant-numeric: tabular-nums; text-align: right; font-size: .88rem; }
.filaRank img, .filaRank .sinImg { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; background: #333; display: grid; place-items: center; font-weight: 900; color: #000; }
.filaRank .nom { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filaRank .nom small { display: block; color: var(--sub); font-weight: 500; font-size: .78rem; }
.filaRank .bar { height: 6px; border-radius: 3px; background: var(--elev3); overflow: hidden; }
.filaRank .bar i { display: block; height: 100%; border-radius: 3px; background: var(--verde); }
.filaRank .v { font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
@media (max-width: 480px) { .filaRank { grid-template-columns: 18px 36px minmax(0, 1fr) 40px; gap: 10px; } .filaRank .bar { display: none; } .filaRank img, .filaRank .sinImg { width: 36px; height: 36px; } }

/* Mapa de calor artista × año */
.calor { overflow-x: auto; }
.calor table { border-collapse: separate; border-spacing: 3px; width: 100%; font-size: .82rem; }
.calor th { color: var(--sub); font-weight: 600; text-align: center; padding: 2px; font-variant-numeric: tabular-nums; }
.calor thead th:first-child { position: sticky; left: 0; z-index: 2; background: var(--elev); }
.calor th.art { position: sticky; left: 0; z-index: 1; background: var(--elev); text-align: left; color: var(--texto); font-weight: 700; white-space: nowrap; max-width: 150px; overflow: hidden; text-overflow: ellipsis; padding-right: 8px; }
.calor td { padding: 0; }
.calor td button { width: 100%; min-width: 30px; height: 30px; border-radius: 4px; font-weight: 700; font-size: .78rem; font-variant-numeric: tabular-nums; transition: transform .1s, box-shadow .15s; }
.calor td button:hover { box-shadow: inset 0 0 0 2px #fff; }
.calor td button.sel { box-shadow: inset 0 0 0 2px #fff; }
.leyendaCalor { display: flex; align-items: center; gap: 8px; margin-top: 10px; color: var(--sub); font-size: .78rem; }
.leyendaCalor i { width: 120px; height: 8px; border-radius: 4px; background: linear-gradient(90deg, #1f2a22, #1ed760); }

/* Año a año */
.anAnios { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px; overflow-x: auto; padding-bottom: 6px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.anAnio { scroll-snap-align: start; text-align: left; background: rgba(255,255,255,.05); border-radius: 12px; padding: 16px; transition: background .15s; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.anAnio:hover { background: rgba(255,255,255,.1); }
.anAnio[aria-pressed=true] { background: rgba(30,215,96,.15); box-shadow: inset 0 0 0 2px var(--verde); }
.anAnio .a { font-size: 2rem; font-weight: 900; letter-spacing: -.04em; line-height: 1; }
.anAnio .d { color: var(--sub); font-size: .84rem; }
.anAnio .d b { color: var(--texto); }
.anAnio .portadas { display: flex; }
.anAnio .portadas img { width: 44px; height: 44px; border-radius: 4px; object-fit: cover; border: 2px solid var(--elev); margin-right: -10px; background: #333; }
.anAnio ol { margin: 0; padding-left: 18px; font-size: .86rem; color: #ddd; }
.anAnio ol li { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Curiosidades */
.anCurios { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.anCurio h3 { margin: 0 0 8px; font-size: .95rem; }

/* Lista de canciones */
.listaCanciones { display: flex; flex-direction: column; }
.cabLista { display: grid; grid-template-columns: 36px minmax(0, 1fr) 70px 60px 50px; gap: 12px; padding: 0 8px 8px; color: var(--sub); font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; border-bottom: 1px solid #2a2a2a; margin-bottom: 6px; }
.filaCancion { display: grid; grid-template-columns: 36px minmax(0, 1fr) 70px 60px 50px; gap: 12px; align-items: center; padding: 6px 8px; border-radius: 6px; }
.filaCancion:hover { background: rgba(255,255,255,.07); }
.filaCancion .tocar { position: relative; width: 36px; height: 36px; border-radius: 4px; overflow: hidden; background: #333; flex: none; }
.filaCancion .tocar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.filaCancion .tocar .capa { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .15s; color: #fff; }
.filaCancion .tocar svg { width: 16px; height: 16px; }
.filaCancion:hover .tocar .capa, .filaCancion.sonando .tocar .capa, .filaCancion .tocar:focus-visible .capa { opacity: 1; }
@media (hover: none) { .filaCancion .tocar .capa { opacity: 1; background: rgba(0,0,0,.35); } }
.filaCancion.sonando .t { color: var(--verde); }
.filaCancion .t { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filaCancion .s { color: var(--sub); font-size: .84rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filaCancion .s button { color: inherit; font-size: inherit; }
.filaCancion .s button:hover { color: #fff; text-decoration: underline; }
.filaCancion .c { color: var(--sub); font-size: .84rem; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.etiquetaE { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 2px; background: #a7a7a7; color: #000; font-size: .62rem; font-weight: 900; margin-right: 6px; vertical-align: 1px; }
@media (max-width: 560px) { .cabLista, .filaCancion { grid-template-columns: 36px minmax(0, 1fr) 46px; } .cabLista .op, .filaCancion .op { display: none; } }
.ordenLista { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.ordenLista select { height: 34px; border-radius: 999px; background: var(--elev3); border: 0; padding: 0 12px; font-weight: 700; font-size: .84rem; }
.verMas { margin: 12px auto 0; display: flex; }

/* Aviso de datos parciales */
.anAvisoDatos { display: flex; gap: 14px; align-items: flex-start; padding: 16px; border-radius: 12px; background: rgba(76,179,255,.08); border: 1px solid rgba(76,179,255,.3); margin-top: 20px; }
.anAvisoDatos .ic { font-size: 1.4rem; line-height: 1; }
.anAvisoDatos b { display: block; margin-bottom: 2px; }
.anAvisoDatos span { color: #cfe6ff; font-size: .9rem; }
.anAvisoDatos button { color: #fff; text-decoration: underline; font-weight: 700; }

/* Vacío */
.anVacio { text-align: center; padding: 70px 16px; max-width: 560px; margin: 0 auto; }
.anVacio .ic { font-size: 3.5rem; }
.anVacio h1 { font-size: clamp(1.8rem, 6vw, 2.6rem); font-weight: 900; letter-spacing: -.035em; margin: 10px 0 8px; }
.anVacio p { color: var(--sub); margin: 0 0 22px; }

/* Comparar */
.cmpSelectores { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; margin-top: 20px; }
.cmpSelectores select { width: 100%; height: 48px; border-radius: 10px; background: var(--elev2); border: 2px solid var(--cmpA); padding: 0 12px; font-weight: 700; font-size: .95rem; }
.cmpSelectores select.b { border-color: var(--cmpB); }
.cmpSelectores .vs { font-weight: 900; color: var(--sub); }
@media (max-width: 560px) { .cmpSelectores { grid-template-columns: 1fr; } .cmpSelectores .vs { text-align: center; } }
.cmpHero { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; }
@media (max-width: 640px) { .cmpHero { grid-template-columns: 1fr; justify-items: center; text-align: center; } }
.anillo { width: 170px; height: 170px; position: relative; }
.anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.anillo .num { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.anillo .num b { font-size: 2.6rem; font-weight: 900; letter-spacing: -.04em; line-height: 1; display: block; }
.anillo .num small { color: var(--sub); font-size: .78rem; font-weight: 700; }
.cmpHero h2 { font-size: clamp(1.4rem, 4vw, 2rem); font-weight: 900; letter-spacing: -.03em; margin: 0 0 6px; }
.cmpHero p { color: var(--sub); margin: 0 0 14px; }
.cmpTres { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 480px) { .cmpTres { grid-template-columns: 1fr; } }
.cmpTres div { background: rgba(255,255,255,.05); border-radius: 10px; padding: 12px; text-align: left; }
.cmpTres div::before { content: ""; display: block; width: 28px; height: 6px; border-radius: 3px; background: var(--c); margin-bottom: 8px; }
.cmpTres b { font-size: 1.5rem; font-weight: 900; display: block; font-variant-numeric: tabular-nums; }
.cmpTres span { color: var(--sub); font-size: .82rem; }
.leyenda { display: flex; gap: 16px; flex-wrap: wrap; font-size: .84rem; color: var(--sub); margin-bottom: 12px; }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 12px; height: 12px; border-radius: 3px; background: var(--c); }
.filaPar { display: grid; grid-template-columns: minmax(0, 1.2fr) 1fr; gap: 12px; align-items: center; padding: 6px 4px; border-bottom: 1px solid #232323; font-size: .9rem; }
.filaPar .nom { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.filaPar .pares { display: flex; flex-direction: column; gap: 3px; }
.filaPar .pares div { white-space: nowrap; display: flex; align-items: center; gap: 6px; font-size: .74rem; color: var(--sub); font-variant-numeric: tabular-nums; }
.filaPar .pares i { height: 8px; border-radius: 0 3px 3px 0; background: var(--c); min-width: 2px; }

/* Tooltip */
.tip { position: fixed; z-index: 99; pointer-events: none; background: #fff; color: #000; border-radius: 8px; padding: 8px 10px; font-size: .82rem; line-height: 1.35; box-shadow: 0 10px 30px rgba(0,0,0,.5); max-width: 240px; transform: translate(-50%, calc(-100% - 12px)); }
.tip b { display: block; font-size: .9rem; }
.tip small { color: #555; }

.listaCanciones.sinOp .c1, .listaCanciones.sinPop .c2 { visibility: hidden; }
@media (min-width: 561px) {
  .listaCanciones.sinOp.sinPop .cabLista, .listaCanciones.sinOp.sinPop .filaCancion { grid-template-columns: 36px minmax(0, 1fr) 50px; }
  .listaCanciones.sinOp.sinPop .op { display: none; }
}

/* Fotos de artistas y carátulas cargadas bajo demanda */
.filaRank .avatarArt.foto { width: 40px; height: 40px; font-size: .95rem; }
@media (max-width: 480px) { .filaRank .avatarArt.foto { width: 36px; height: 36px; } }
.anPortada.deArtista { border-radius: 50%; }
.avatarArt.enorme { width: 100%; height: 100%; font-size: 4rem; }
.artCalor { display: inline-flex; align-items: center; gap: 8px; max-width: 170px; }
.artCalor .avatarArt { width: 24px; height: 24px; font-size: .7rem; }
.artCalor span:last-child { overflow: hidden; text-overflow: ellipsis; }
.filaRepaso .tapa.mini { width: 44px; height: 44px; border-radius: 4px; }
.anAnio .portadas .tapa { width: 44px; height: 44px; border-radius: 4px; border: 2px solid var(--elev); margin-right: -10px; }
.filaCancion .tocar .tapa.llena { width: 100%; height: 100%; }