.top40-encabezado small {
  color: var(--programa-color);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .17em;
}
.top40-encabezado h2 {
  margin: 8px 0 6px;
  font: 400 clamp(1.9rem, 4vw, 2.7rem) Georgia, serif;
}
.top40-periodo {
  margin: 0 0 24px;
  color: var(--suave);
  font: 600 .88rem Arial, sans-serif;
}
.top40-vacio {
  padding: 30px;
  border: 1px solid color-mix(in srgb, var(--programa-color) 35%, transparent);
  background: var(--panel);
  color: var(--suave);
}
.top40-pestanas {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.top40-pestanas button {
  flex: 0 0 auto;
  padding: 11px 17px;
  border: 1px solid color-mix(in srgb, var(--programa-color) 38%, transparent);
  color: var(--suave);
  background: #12161d;
  font: 700 .78rem Arial, sans-serif;
  cursor: pointer;
}
.top40-pestanas button[aria-selected="true"] {
  border-color: var(--programa-color);
  color: #07140f;
  background: var(--programa-color);
}
.top40-pestanas button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
.top40-panel[hidden] { display: none; }
.top40-lista {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 7px;
  list-style: none;
}
.top40-puesto {
  min-height: 68px;
  padding: 11px 15px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  border: 1px solid rgba(255, 255, 255, .08);
  background: var(--panel);
}
.top40-puesto.top40-destacado {
  min-height: 82px;
  border-color: color-mix(in srgb, var(--programa-color) 48%, transparent);
  border-left: 4px solid var(--programa-color);
  background: linear-gradient(90deg, color-mix(in srgb, var(--programa-color) 13%, var(--panel)), var(--panel));
}
.top40-numero {
  color: var(--programa-color);
  font: 700 1.55rem Georgia, serif;
  text-align: center;
}
.top40-destacado .top40-numero { font-size: 2rem; }
.top40-cancion {
  min-width: 0;
  display: grid;
  gap: 5px;
}
.top40-cancion strong,
.top40-cancion small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.top40-cancion strong { font-size: .97rem; }
.top40-cancion small { color: var(--suave); font-size: .78rem; }
.top40-reproducir,
.top40-enlace-spotify {
  width: fit-content;
  max-width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  color: #fff;
  background: transparent;
  font: 700 .97rem Arial, sans-serif;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--programa-color) 58%, transparent);
  text-underline-offset: 3px;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
}
.top40-reproducir:hover,
.top40-enlace-spotify:hover { color: var(--programa-color); }
.top40-reproducir:focus-visible,
.top40-enlace-spotify:focus-visible {
  outline: 2px solid var(--programa-color);
  outline-offset: 3px;
}
.top40-reproductor {
  grid-column: 1 / -1;
  width: min(100%, 760px);
  margin: 8px auto 3px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
}
.top40-reproductor[hidden] { display: none; }
.top40-reproductor iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.top40-movimiento {
  min-width: 64px;
  padding: 7px 9px;
  border-radius: 3px;
  font-size: .7rem;
  font-weight: 900;
  text-align: center;
  white-space: nowrap;
}
.top40-movimiento.sube { color: #07160e; background: #59d58c; }
.top40-movimiento.baja { color: #fff; background: #c74656; }
.top40-movimiento.igual { color: #d8dce3; background: #363d49; }
.top40-movimiento.nuevo { color: #11161b; background: #f4d88b; }
.top40-movimiento.reingreso { color: #08151c; background: #72c9ef; }
.top40-evolucion {
  margin-top: 55px;
  padding-top: 38px;
  border-top: 1px solid color-mix(in srgb, var(--programa-color) 28%, transparent);
}
.top40-evolucion-encabezado small {
  color: var(--programa-color);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .17em;
}
.top40-evolucion-encabezado h2 {
  margin: 8px 0 20px;
  font: 400 clamp(1.8rem, 4vw, 2.5rem) Georgia, serif;
}
.top40-grafico {
  position: relative;
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--programa-color) 35%, transparent);
  background: #10141b;
}
.top40-grafico-puestos {
  position: relative;
  z-index: 2;
  height: 940px;
  border-right: 1px solid color-mix(in srgb, var(--programa-color) 42%, transparent);
  background: #151a22;
}
.top40-grafico-puestos::before {
  content: "Puesto";
  position: absolute;
  top: 20px;
  left: 5px;
  color: var(--suave);
  font-size: .62rem;
  text-transform: uppercase;
  transform: rotate(-90deg) translateX(-16px);
}
.top40-grafico-puestos strong {
  position: absolute;
  left: 0;
  width: 100%;
  color: var(--programa-color);
  font: 700 1rem Georgia, serif;
  text-align: center;
}
.top40-grafico-scroll {
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: var(--programa-color) #202631;
  scrollbar-width: auto;
  cursor: grab;
  user-select: none;
}
.top40-grafico-scroll.arrastrando { cursor: grabbing; }
.top40-grafico-scroll:focus-visible { outline: 2px solid var(--programa-color); outline-offset: -2px; }
.top40-grafico-scroll svg { display: block; max-width: none; background: #10141b; }
.top40-grafico-linea-puesto { stroke: rgba(255, 255, 255, .1); stroke-width: 1; }
.top40-grafico-linea-semana { stroke: rgba(255, 255, 255, .08); stroke-width: 1; }
.top40-grafico-fecha { fill: var(--programa-color); font: 700 12px Arial, sans-serif; }
.top40-grafico-recorrido { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; opacity: .68; }
.top40-grafico-punto { stroke: #10141b; stroke-width: 1.5; }
.top40-grafico-salida { stroke: #10141b; stroke-width: 1.5; opacity: .65; }
.top40-grafico-etiqueta { cursor: default; }
.top40-grafico-titulo,
.top40-grafico-artista {
  paint-order: stroke;
  stroke: #10141b;
  stroke-width: 4px;
  stroke-linejoin: round;
}
.top40-grafico-titulo { font: 700 12px Arial, sans-serif; }
.top40-grafico-artista { fill: #c3cad5; font: 400 10px Arial, sans-serif; }
.top40-grafico-resaltando [data-cancion] { opacity: .1; }
.top40-grafico-resaltando [data-cancion].activo { opacity: 1; }
.top40-grafico-resaltando .top40-grafico-recorrido.activo { stroke-width: 4; }
@media (max-width: 560px) {
  .top40-puesto { grid-template-columns: 38px minmax(0, 1fr) auto; gap: 9px; padding-inline: 10px; }
  .top40-numero { font-size: 1.25rem; }
  .top40-destacado .top40-numero { font-size: 1.55rem; }
  .top40-movimiento { min-width: 50px; padding-inline: 6px; font-size: .62rem; }
  .top40-cancion strong { font-size: .85rem; }
  .top40-cancion small { font-size: .7rem; }
  .top40-evolucion { margin-top: 42px; }
  .top40-grafico { grid-template-columns: 42px minmax(0, 1fr); }
}