/* BassForge - la pestana de estadisticas.

   La cabecera (periodo, flechas, tipos) y las cifras reaprovechan las
   clases de resumen.css: son el mismo mando y tienen que verse igual. Lo
   de aqui son solo los graficos, todos con el prefijo st-.

   El movil va en movil.css, al final, como todo lo demas. */

#stats.cargando #stCuerpo{opacity:.45}

.st-rejilla{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:12px;margin-bottom:12px;
}
.st-fila-serie{
  display:grid;grid-template-columns:minmax(0,2.6fr) minmax(230px,1fr);
  gap:12px;margin-bottom:12px;
}

.st-caja{
  margin:0;background:var(--sup);border:1px solid var(--line);
  border-radius:6px;padding:14px 16px 12px;
  /* en columna para que el grafico pueda estirarse hasta abajo: si no, las
     barras se quedaban pegadas arriba y sobraba medio recuadro */
  display:flex;flex-direction:column;
}
.st-caja.st-ancha{margin-bottom:12px}
.st-caja figcaption{
  display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;margin-bottom:10px;
}
.st-caja h3{
  margin:0;font-size:13px;font-weight:600;color:var(--ink);
  letter-spacing:.02em;text-transform:uppercase;
}
.st-pie{margin:8px 0 0;font-size:12px;color:var(--muted);line-height:1.45}
.st-pie b{color:var(--ink);font-weight:600}
.st-extremos{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px}
.st-vacio{color:var(--muted);text-align:center;padding:48px 0}

/* escuchas / minutos */
.st-conmuta{display:flex;gap:2px;background:var(--ground);border:1px solid var(--line);border-radius:5px;padding:2px}
.st-conmuta button{
  background:none;border:none;color:var(--muted);cursor:pointer;
  font:inherit;font-size:11.5px;padding:4px 9px;border-radius:3px;
}
.st-conmuta button:hover{color:var(--ink)}
.st-conmuta button.activa{background:var(--sup3);color:var(--white)}

/* ---------------------------------------------------------- el reloj */

.st-reloj svg{display:block;width:100%;max-width:300px;margin:auto;height:auto}
.st-aro{fill:none;stroke:var(--line-soft);stroke-width:1}
.st-cuna{fill:var(--forge);opacity:var(--o,.5)}
.st-cuna.punta{fill:var(--h4);opacity:1}
.st-cuna:hover{fill:var(--white);opacity:1}
.st-hora{
  fill:var(--muted);font-family:var(--mono);font-size:9px;text-anchor:middle;
}

/* --------------------------------------------------- dias de la semana */

.st-semana{display:flex;align-items:flex-end;gap:6px;flex:1;min-height:190px}
.st-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;height:100%}
.st-cifra{font-family:var(--mono);font-size:11px;color:var(--ink2)}
.st-tubo{flex:1;width:100%;display:flex;align-items:flex-end}
.st-barra{
  width:100%;height:var(--alto);min-height:2px;border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,var(--forge),var(--forge-dim));
}
.st-col.fuerte .st-barra{background:linear-gradient(180deg,var(--h5),var(--h4))}
.st-col.fuerte .st-cifra{color:var(--white)}
.st-dia{font-size:11.5px;color:var(--muted)}

/* ---------------------------------------------------------- dia a dia */

.st-lienzo{flex:1;display:flex;align-items:center;min-height:240px;overflow:hidden}
.st-serie{display:block}
.st-raya{stroke:var(--line-soft);stroke-width:1}
.st-eje{fill:var(--muted);font-family:var(--mono);font-size:10px}
.st-cima{fill:var(--h5);stroke:var(--ground);stroke-width:2}
.st-cima-t{fill:var(--white);font-family:var(--mono);font-size:11px;font-weight:700}
.st-area{fill:var(--forge-glow)}
.st-linea{fill:none;stroke:var(--forge);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.st-acum{fill:none;stroke:var(--cyan);stroke-width:1.5;stroke-dasharray:3 4;opacity:.75}
.st-punto{fill:transparent}
.st-punto:hover{fill:var(--white);opacity:.9}
.st-leyenda{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted)}
.st-leyenda i{width:12px;height:2px;border-radius:2px;display:inline-block}
.st-leyenda i.l-dia{background:var(--forge)}
.st-leyenda i.l-acum{background:var(--cyan);margin-left:6px}

/* ----------------------------------------------------------- generos */

.st-resumen{justify-content:space-between;gap:10px}
.st-dato{display:flex;flex-direction:column;gap:1px}
.st-dato-et{font-size:11.5px;color:var(--muted)}
.st-dato b{font-size:19px;font-weight:700;color:var(--white);line-height:1.2}
.st-dato i{font-style:normal;font-size:11.5px;color:var(--ink2)}

.st-generos{display:flex;flex-direction:column;gap:7px;justify-content:center;flex:1}
.st-gen{display:grid;grid-template-columns:96px 1fr 34px;align-items:center;gap:10px}
.st-gen-n{
  font-size:12.5px;color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;
}
.st-gen-b{display:block;height:10px;background:var(--ground);border-radius:3px;overflow:hidden}
.st-gen-b i{display:block;width:var(--ancho);height:100%;background:var(--tinte);border-radius:3px}
.st-gen-p{font-family:var(--mono);font-size:11px;color:var(--muted);text-align:right}

/* ------------------------------------------------------------ rachas */

.st-dos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.st-rachas .kpi{background:var(--ground)}