/* =========================================================================
   artista — Perfil de artista, ficha registrada y FAQ.

   Tramo 10 de 14 de la hoja que antes era una sola (`tendencias.css`, 4 671
   líneas). Los tramos son CONTIGUOS y se cargan en este mismo orden: el
   orden de carga es la cascada, así que mover una hoja de sitio puede
   cambiar qué regla gana sin que nada falle. Si hace falta reordenar, se
   comprueba con `npm run huella` y no razonando.
   ========================================================================= */

/* --------------------------------------------------------------------------
   Perfil de artista.
   -------------------------------------------------------------------------- */
.artista-portada {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(300px, 40vw, 440px);
  display: flex;
  align-items: flex-end;
  background: var(--rojo-osc);
}
.artista-portada__fondo {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Muy desenfocada: es una carátula cuadrada estirada a un panorama, y sin
     esto se ve el pixelado del recorte. */
  filter: blur(28px) saturate(130%);
  transform: scale(1.15);
}
.artista-portada__velo {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(9, 9, 11, .97) 6%, rgba(9, 9, 11, .70) 55%, rgba(9, 9, 11, .45) 100%);
}
.artista-portada__interior { position: relative; z-index: 2; padding-block: clamp(24px, 4vw, 44px); }
.artista-portada__nombre {
  font-size: clamp(2.2rem, 6vw, 4.4rem);
  color: #fff;
  margin: 10px 0 18px;
}

.artista-cifras {
  display: flex; flex-wrap: wrap; gap: 26px;
  margin: 0 0 18px; padding: 0; list-style: none;
}
.artista-cifras__num {
  display: block;
  font-family: var(--display);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  line-height: 1;
  color: var(--oro-luz);
}
.artista-cifras__eti { font-size: .78rem; color: rgba(255, 255, 255, .74); }

.artista-generos {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin: 0; padding: 0; list-style: none;
}
.artista-generos a {
  display: inline-block;
  padding: 6px 13px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .26);
  background: rgba(255, 255, 255, .10);
  font-size: .78rem; font-weight: 700; color: #fff;
}
.artista-generos a:hover { background: var(--rojo); border-color: var(--rojo); }

/* ---------------------------------------------------------------- pestañas */
.tabs {
  position: sticky;
  top: 64px;
  z-index: 60;
  background: rgba(11, 11, 13, .92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea);
}
.tabs__pista {
  display: flex; gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs__pista::-webkit-scrollbar { display: none; }
.tabs__tab {
  flex: none;
  padding: 14px 16px;
  font-weight: 900;
  font-size: .84rem;
  color: var(--texto-2);
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.tabs__tab:hover { color: var(--texto); }
/* :target marca la pestaña abierta sin JS, aprovechando el ancla. */
.tabs__tab--activa { color: var(--texto); border-bottom-color: var(--rojo); }

/* ------------------------------------------------------------- territorio */
.artista-territorio {
  display: grid;
  gap: 24px;
  margin-top: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) { .artista-territorio { grid-template-columns: repeat(2, 1fr); } }

.artista-sub {
  font: 900 .72rem/1 var(--texto-fuente);
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--texto-3);
  margin: 0 0 12px;
}
.artista-lista-chips {
  display: flex; flex-wrap: wrap; gap: 7px;
  margin: 0; padding: 0; list-style: none;
}
.artista-lista-chips a {
  display: inline-block;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--linea);
  background: var(--sup-1);
  font-size: .8rem; font-weight: 700; color: var(--texto);
}
.artista-lista-chips a:hover { border-color: var(--oro-luz); color: var(--oro-luz); }
.artista-nota { margin: 12px 0 0; font-size: .8rem; color: var(--texto-3); }

.artista-mercados { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.artista-mercados li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  background: var(--sup-1);
}
.artista-mercados__nombre { font-weight: 700; font-size: .88rem; }
.artista-mercados__nombre a:hover { color: var(--rojo-claro); }
.artista-mercados__pos { font-size: .76rem; font-weight: 900; color: var(--oro-luz); }

/* El nombre del rank ahora enlaza al perfil. */
.rank__nombre a:hover { color: var(--rojo-claro); }

/* --------------------------------------------------------------------------
   Ficha registrada e histórico del artista (/artista/:slug).
   -------------------------------------------------------------------------- */
/* Aviso de artista que ya no suena pero sigue registrado. */
.artista-inactivo {
  margin: 14px 0 0;
  max-width: 46ch;
  font-size: .86rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
}

/* Récord: pico histórico y primera vez. Mismo espíritu que artista-cifras. */
.artista-record { display: grid; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
@media (min-width: 620px) { .artista-record { grid-template-columns: repeat(2, 1fr); } }
.artista-record li {
  display: flex; align-items: baseline; gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  background: var(--sup-1);
}
.artista-record__num {
  font-family: var(--fuente-titulo, inherit);
  font-size: 1.9rem; font-weight: 900; line-height: 1;
  color: var(--oro-luz);
}
.artista-record__num--sm { font-size: 1.05rem; color: rgba(255, 255, 255, .92); }
.artista-record__eti { font-size: .78rem; color: rgba(255, 255, 255, .74); }

/* Evolución en el rank de poder: una fila por corte, con barra según puntos. */
.rank-evo { margin: 0 0 6px; padding: 0; list-style: none; display: grid; gap: 6px; }
.rank-evo__fila {
  display: grid;
  grid-template-columns: 6.5em 3em 1fr auto;
  align-items: center; gap: 10px;
  font-size: .82rem;
}
.rank-evo__fecha { color: var(--texto-3); font-variant-numeric: tabular-nums; }
.rank-evo__lugar { font-weight: 900; color: var(--rojo-claro); font-variant-numeric: tabular-nums; }
.rank-evo__barra {
  height: 8px; border-radius: 999px;
  background: var(--sup-2, rgba(255, 255, 255, .08));
  overflow: hidden;
}
.rank-evo__barra i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--rojo, #E4123A), var(--oro-luz, #D4AC2B));
}
.rank-evo__pts { color: var(--texto-3); font-variant-numeric: tabular-nums; }

/* Trayectoria de cada canción. */
.artista-trayectos { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.trayecto__link {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 11px 14px;
  border: 1px solid var(--linea);
  border-radius: var(--r-sm);
  background: var(--sup-1);
}
.trayecto__link:hover { border-color: var(--rojo-claro); }
.trayecto__titulo { font-weight: 700; font-size: .9rem; }
.trayecto__datos { font-size: .76rem; font-weight: 900; color: var(--oro-luz); white-space: nowrap; }

/* --------------------------------------------------------------------------
   FAQ y metodología (/faq). El detalle salió de la portada para no alargarla.
   -------------------------------------------------------------------------- */
/* `justify-items: start` sólo encoge en horizontal. Sin `align-items: start`
   el grid estira sus hijos en vertical, y el botón salía de 127 px de alto
   con el texto pegado arriba. */
.fuentes-invita {
  display: grid;
  gap: 10px;
  justify-items: start;
  align-items: start;
}

.fuentes-lista { display: grid; gap: 10px; margin-top: 22px; list-style: none; padding: 0; }
.fuente-fila {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 14px;
  align-items: center;
  padding: 14px 16px;
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  background: var(--sup-1);
}
@media (min-width: 820px) {
  .fuente-fila { grid-template-columns: 74px minmax(0, 1fr) 110px 110px; }
}
/* Las fuentes que no están entregando nada se muestran apagadas: anunciarlas
   igual que las activas daría una idea equivocada de lo que alimenta el sitio. */
.fuente-fila--inactiva { opacity: .55; }

.fuente-fila__tipo {
  display: inline-grid; place-items: center;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  background: var(--sup-3);
  font: 900 .64rem/1 var(--texto-fuente);
  letter-spacing: .1em;
  color: var(--oro-luz);
}
.fuente-fila__nombre { font-weight: 900; font-size: .95rem; margin: 0; color: var(--texto); }
.fuente-fila__detalle { margin: 3px 0 0; font-size: .82rem; color: var(--texto-2); line-height: 1.5; }
.fuente-fila__cadencia, .fuente-fila__estado {
  font: 900 .68rem/1 var(--texto-fuente);
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--texto-3);
}
.fuente-fila--activa .fuente-fila__estado { color: var(--sube); }
.fuente-fila--inactiva .fuente-fila__estado { color: var(--baja); }
@media (max-width: 819px) {
  .fuente-fila__cadencia, .fuente-fila__estado { grid-column: 2; }
}

.faq { display: grid; gap: 10px; margin-top: 22px; max-width: 80ch; }
.faq__item {
  border: 1px solid var(--linea);
  border-radius: var(--r-md);
  background: var(--sup-1);
  overflow: hidden;
}
.faq__item[open] { border-color: var(--linea-fuerte); }
.faq__pregunta {
  cursor: pointer;
  padding: 16px 18px;
  font-weight: 900;
  font-size: .96rem;
  color: var(--texto);
  list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__pregunta::after {
  content: "+";
  font-family: var(--display);
  font-size: 1.3rem;
  color: var(--oro-luz);
  flex: none;
}
.faq__item[open] .faq__pregunta::after { content: "−"; }
.faq__respuesta { padding: 0 18px 18px; color: var(--texto-2); line-height: 1.65; }
.faq__respuesta p { margin: 0 0 10px; }
.faq__respuesta p:last-child { margin-bottom: 0; }
.faq__respuesta a { color: var(--rojo-claro); text-decoration: underline; text-underline-offset: 3px; }
.faq__respuesta strong { color: var(--texto); }

/* Navegación entre cortes del rank con fecha. */
.rank-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.rank-nav__salto { font-size: .82rem; font-weight: 700; color: var(--texto-2); }
.rank-nav__salto:hover { color: var(--texto); }
.rank-nav--fechas { align-items: center; gap: 8px 12px; }
.rank-nav__hoy { margin-left: auto; }

/* Selector de fecha del archivo: un <select> nativo vestido para el tema
   oscuro, con el icono de calendario encima. El nativo es a propósito —abre el
   desplegable del sistema, cómodo en móvil, y funciona sin librerías. */
.rank-nav__picker {
  position: relative;
  display: inline-flex;
  align-items: center;
}
.rank-nav__cal {
  position: absolute;
  left: 10px;
  width: 16px;
  height: 16px;
  color: var(--oro-luz);
  pointer-events: none;
}
.rank-nav__select {
  appearance: none;
  -webkit-appearance: none;
  font: 700 .82rem/1 var(--texto-fuente);
  color: var(--texto);
  background: var(--sup-2);
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  padding: 8px 34px 8px 32px;
  cursor: pointer;
  /* Flecha propia a la derecha, ya que se quitó la nativa. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23c9c9d0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  transition: border-color .18s, background-color .18s;
}
.rank-nav__select:hover { border-color: var(--oro-luz); }
.rank-nav__select:focus-visible { outline: 2px solid var(--oro-luz); outline-offset: 2px; }
/* Las opciones abren con el estilo del sistema; se fuerza fondo oscuro donde
   el navegador lo respeta, para que no salgan en blanco. */
.rank-nav__select option { background: var(--negro); color: var(--texto); }
.boton--activo { background: var(--rojo); border-color: var(--rojo); color: #fff; }