/* BassForge - pantalla de resumenes. Usa los mismos tokens que estilo.css:
   el naranja de fragua marca lo importante, el cian los rotulos de datos, y
   la escala --h1..--h5 es la temperatura (dureza) en todas partes. */

#resumen{max-width:1180px;margin:0 auto}
#resCuerpo{transition:opacity .18s ease}
#resumen.cargando #resCuerpo{opacity:.45}

/* ---------------- cabecera: periodo y tipo ---------------- */
.res-cab{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:18px;padding:4px 0 22px;margin-bottom:20px;border-bottom:1px solid var(--line);
}
.res-periodo{display:flex;align-items:center;gap:14px;min-width:0}
.res-flecha{
  width:40px;height:40px;flex:0 0 auto;border-radius:50%;
  border:1px solid var(--line);background:var(--sup);color:var(--white);
  font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;
}
.res-flecha:hover:not(:disabled){border-color:var(--forge);color:var(--forge)}
.res-flecha:disabled{opacity:.25;cursor:default}
.res-flecha:focus-visible,.res-tipo button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.res-titulo{display:flex;flex-direction:column;gap:5px;min-width:0}
.res-eyebrow{
  font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--forge);font-weight:700;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
}
.res-encurso{
  font-size:9.5px;letter-spacing:.1em;padding:2px 7px;border-radius:3px;
  background:var(--forge-glow);color:var(--forge);border:1px solid rgba(255,107,26,.35);
}
.res-titulo h2{
  font-family:Anton,"Arial Narrow",Impact,sans-serif;font-weight:400;
  font-size:clamp(40px,6vw,72px);line-height:.9;margin:0;color:var(--white);
  text-transform:uppercase;letter-spacing:.005em;overflow-wrap:anywhere;
}
/* Anton con la interlinea tan apretada no deja sitio a las tildes: la N de
   OTONO se metia 12 px dentro del "Resumen de la estacion" de arriba. Solo
   los titulos que llevan tilde piden ese aire; el resto siguen igual de
   pegados, que es como se ven bien. Lo pone resumen.js al escribirlos. */
.res-titulo h2.con-tilde{padding-top:.36em}

.res-fechas{font-family:var(--mono);font-size:11.5px;color:var(--muted)}
.res-tipo{display:inline-flex;gap:2px;background:var(--sup);border:1px solid var(--line);border-radius:6px;padding:3px}
.res-tipo button{background:none;border:0;color:var(--ink2);font-weight:700;padding:8px 16px;border-radius:4px;cursor:pointer}
.res-tipo button:hover{color:var(--white)}
.res-tipo button.activa{background:var(--forge);color:var(--ground)}

/* ---------------- cifras ---------------- */
.res-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(172px,1fr));gap:12px;margin-bottom:12px}
.kpi{
  background:var(--sup);border:1px solid var(--line);border-radius:6px;padding:15px 16px;
  display:flex;flex-direction:column;gap:4px;
}
.kpi-et{font-size:12.5px;color:var(--muted)}
.kpi-val{font-size:30px;font-weight:700;color:var(--white);line-height:1.1;letter-spacing:-.01em}
.kpi-val small{font-size:15px;font-weight:600;color:var(--ink2)}
.kpi-delta{font-family:var(--mono);font-size:11px;color:var(--ink)}
.kpi-delta span{color:var(--muted)}
.res-compara{margin:0 0 8px;font-family:var(--mono);font-size:11px;color:var(--muted);letter-spacing:.02em}

/* ---------------- numero uno ---------------- */
.res-heroes{display:grid;grid-template-columns:1.3fr 1fr;gap:12px;margin-bottom:12px}
.hero{
  position:relative;overflow:hidden;background:var(--sup);border:1px solid var(--line);
  border-radius:6px;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;padding:16px;
}
/* el unico sitio con brillo: tu artista numero uno */
.hero-principal{
  background:radial-gradient(90% 140% at 100% 0%,rgba(255,107,26,.17),transparent 62%),var(--sup);
  border-color:rgba(255,107,26,.38);
}
.hero-texto{min-width:0;display:flex;flex-direction:column;gap:6px}
.eyebrow{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--forge)}
.hero-nombre{
  font-family:Anton,"Arial Narrow",Impact,sans-serif;font-weight:400;
  font-size:clamp(30px,4vw,50px);line-height:.95;margin:0;color:var(--white);
  text-transform:uppercase;overflow-wrap:anywhere;
}
.hero-tema{font-size:22px;font-weight:700;margin:0;color:var(--white);line-height:1.2;overflow-wrap:anywhere}
.hero-sub{margin:0;color:var(--ink2)}
.hero-dato{margin:0;color:var(--ink2);font-size:13.5px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.hero-dato b{color:var(--white);font-size:16px}

/* ---------------- portadas ---------------- */
.res-cover{display:block;border-radius:4px;object-fit:cover;background:var(--sup3);flex:0 0 auto}
.res-cover.grande{
  width:clamp(110px,14vw,176px);height:clamp(110px,14vw,176px);border-radius:5px;
  box-shadow:0 10px 30px -12px rgba(0,0,0,.8);
}
.res-cover.res-mini{width:42px;height:42px}
/* sin caratula todavia: iniciales sobre el color de la dureza del subgenero */
.res-cover.sin{
  display:grid;place-items:center;
  background:radial-gradient(120% 120% at 18% 12%,
             color-mix(in oklab,var(--tinte) 62%,var(--sup2)) 0%,
             color-mix(in oklab,var(--tinte) 16%,var(--sup)) 78%);
  border:1px solid color-mix(in oklab,var(--tinte) 35%,var(--line));
}
.res-cover.sin span{
  font-family:Anton,"Arial Narrow",Impact,sans-serif;color:rgba(255,255,255,.9);
  letter-spacing:.02em;text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.res-cover.res-mini.sin span{font-size:16px}
.res-cover.grande.sin span{font-size:clamp(40px,5vw,64px)}

/* ---------------- paneles y rankings ---------------- */
.res-listas{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:12px}
.res-panel{background:var(--sup);border:1px solid var(--line);border-radius:6px;padding:16px 18px}
.res-h{
  font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cyan);margin:0 0 10px;font-weight:700;
}
.res-top{list-style:none;margin:0;padding:0}
.res-top li{
  display:grid;grid-template-columns:22px 42px 1fr auto 56px;gap:12px;align-items:center;
  padding:8px 0;border-bottom:1px solid var(--line-soft);
}
.res-top li:last-child{border-bottom:none}
.res-pos{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.res-top li:nth-child(-n+3) .res-pos{color:var(--forge);font-weight:700}
.res-nombre{min-width:0;display:flex;flex-direction:column;gap:1px}
.res-nombre .titulo,.res-nombre .artista{overflow-wrap:anywhere}
/* longitud = escuchas frente al primero de la lista */
.res-magnitud{
  display:block;height:4px;width:var(--w);min-width:2px;margin-top:5px;
  background:var(--forge);opacity:.85;border-radius:0 4px 4px 0;
}
.res-c{font-family:var(--mono);font-size:13px;color:var(--white);font-variant-numeric:tabular-nums;text-align:right}
.res-mov{text-align:right}
.mov{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;white-space:nowrap}
.mov.sube{color:var(--ink)}
.mov.baja,.mov.igual{color:var(--muted)}
.mov.nuevo{
  color:var(--forge);text-transform:uppercase;font-weight:700;font-size:9.5px;
  padding:1px 5px;border:1px solid rgba(255,107,26,.4);border-radius:3px;
}

/* ---------------- cuando sono ---------------- */
.res-linea{margin-bottom:12px}
.res-cabecera{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.res-cabecera .res-h{margin:0}
.res-sub{font-size:12.5px;color:var(--muted);margin:0}
.res-sub b{color:var(--white)}
.res-grafica{
  position:relative;height:190px;padding-top:24px;
  display:grid;grid-template-columns:repeat(var(--n),1fr);align-items:end;
  border-bottom:1px solid var(--line);
}
/* cada barra es un boton que ocupa toda la columna: el objetivo del raton
   y del teclado es la columna entera, no los pixeles pintados */
.res-barra{
  position:relative;height:100%;padding:0;margin:0;border:0;background:none;cursor:default;
  display:flex;align-items:flex-end;justify-content:center;
}
.res-barra::before{
  content:"";display:block;width:min(24px,72%);height:var(--alto);
  background:var(--forge);border-radius:4px 4px 0 0;
}
.res-barra:hover::before{background:#FF8A4A}
.res-barra:focus-visible{outline:none}
.res-barra:focus-visible::before{background:#FF8A4A;box-shadow:0 0 0 2px var(--sup),0 0 0 3px var(--cyan)}
.res-barra.futuro::before{height:3px;background:var(--line);border-radius:2px}
.res-barra.pico::after{
  content:attr(data-v);position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(var(--alto) + 5px);font-family:var(--mono);font-size:11px;color:var(--white);white-space:nowrap;
}
.res-tip{
  position:absolute;z-index:3;pointer-events:none;transform:translate(-50%,-100%);
  background:var(--sup3);border:1px solid var(--line);border-radius:5px;padding:6px 10px;
  display:flex;flex-direction:column;gap:1px;white-space:nowrap;box-shadow:0 6px 18px rgba(0,0,0,.5);
}
.res-tip b{color:var(--white);font-size:13px}
.res-tip span{color:var(--muted);font-size:11.5px}
.res-ejes{
  display:grid;grid-template-columns:repeat(var(--n),1fr);margin-top:6px;
  font-family:var(--mono);font-size:10px;color:var(--muted);text-align:center;
}
.res-ejes span{white-space:nowrap}
.res-tabla{margin-top:12px}
.res-tabla summary{cursor:pointer;font-size:12.5px;color:var(--ink2);width:max-content}
.res-tabla summary:hover{color:var(--white)}
.res-tabla summary:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.res-tabla table{margin-top:8px;border-collapse:collapse;font-size:12.5px;min-width:280px}
.res-tabla th,.res-tabla td{padding:4px 18px 4px 0;border-bottom:1px solid var(--line-soft);text-align:left}
.res-tabla th{font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-weight:700}
.res-tabla td.num,.res-tabla th.num{text-align:right;font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ---------------- subgeneros y temperatura ---------------- */
.res-dos{display:grid;grid-template-columns:1.4fr 1fr;gap:12px;margin-bottom:12px}
.res-generos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.res-generos li{display:grid;grid-template-columns:128px 1fr 46px;gap:10px;align-items:center}
.gen-nombre{font-size:13px;color:var(--ink);overflow-wrap:anywhere}
.gen-barra{display:block;height:12px;width:var(--w);min-width:2px;background:var(--col);border-radius:0 4px 4px 0}
.gen-val{font-family:var(--mono);font-size:12px;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums}
.res-leyenda{margin:14px 0 0;font-size:12px;color:var(--muted);max-width:60ch}
.temp-val{font-size:44px;font-weight:700;color:var(--white);margin:2px 0 12px;line-height:1}
.temp-val small{font-size:18px;color:var(--ink2);font-weight:600}
.termo{position:relative;padding:8px 0}
/* cinco pasos separados: es una escala ordenada, no un degradado continuo */
.termo-escala{display:grid;grid-template-columns:repeat(5,1fr);gap:2px;height:12px}
.termo-escala span{border-radius:2px}
.termo-escala span:first-child{border-radius:4px 2px 2px 4px}
.termo-escala span:last-child{border-radius:2px 4px 4px 2px}
.termo-marca{
  position:absolute;top:0;bottom:0;width:4px;margin-left:-2px;background:var(--white);
  border-radius:2px;box-shadow:0 0 0 2px var(--sup);
}
.termo-ejes{display:flex;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:10px;color:var(--muted);margin:4px 0 12px}

.res-nota{font-size:12px;color:var(--muted);margin:6px 0 0;max-width:90ch}
.res-vacio{
  background:var(--sup);border:1px solid var(--line);border-radius:6px;
  padding:48px 24px;text-align:center;color:var(--muted);
}
.res-vacio b{color:var(--white)}

@media(max-width:980px){
  .res-heroes,.res-listas,.res-dos{grid-template-columns:1fr}
}
@media(max-width:560px){
  .hero{grid-template-columns:1fr}
  .res-top li{grid-template-columns:18px 38px 1fr auto}
  .res-mov{grid-column:3 / -1;text-align:left}
  .res-generos li{grid-template-columns:96px 1fr 42px}
}
@media (prefers-reduced-motion: reduce){#resCuerpo{transition:none}}