/* ===========================================================================
   index.css — portada: buscador y listado de canciones.

   El usuario aqui tiene UNA intencion: encontrar una cancion rapido, muchas
   veces con el culto a punto de empezar. Asi que esto no es un escaparate, es
   un buscador. Cuanto menos haya en pantalla, mejor.
   =========================================================================== */

/* --- Buscador ------------------------------------------------------------- */

.portada {
  padding-block: 34px 20px;
}

.portada-titulo {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: 18px;
}

/* El buscador (.buscador, .buscador-lupa, .buscador-atajo) y .recuento se
   mudaron a common.css cuando el panel empezo a usarlos: son de dos paginas, y
   copiarlos aqui seria la receta para que un dia se vean distintos. */

/* --- Listado -------------------------------------------------------------- */

.listado {
  list-style: none;
  margin: 0;
  padding: 0 0 60px;
}

.fila {
  border-bottom: 1px solid var(--borde);
}

.fila-enlace {
  display: flex;
  align-items: center;
  gap: 16px;
  /* Altura fija aunque la cancion no tenga artista. Sin esto, las filas sin
     artista encogen y la lista pierde el ritmo justo cuando se escanea con
     prisa, que es siempre. */
  min-height: 72px;
  padding: 12px;
  margin-inline: -12px;
  border-radius: var(--radio-s);
  text-decoration: none;
  transition: background 0.12s ease;
}

.fila-enlace:hover {
  background: var(--fondo-alto);
}

.fila-datos {
  flex: 1;
  min-width: 0; /* Sin esto, un titulo largo revienta el flex y empuja el tono fuera. */
}

.fila-titulo {
  font-size: 15px;
  font-weight: 600;
  /* Un titulo largo se corta con puntos suspensivos en vez de partirse en tres
     lineas y descuadrar la altura de la fila. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fila-artista {
  color: var(--texto-suave);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/*
  El tono en melocoton y monoespaciado: es el mismo lenguaje visual que los
  acordes del visor. Quien lo vea aqui ya sabe que significa.
*/
.fila-tono {
  flex: 0 0 auto;
  min-width: 34px;
  text-align: center;
  padding: 3px 8px;
  border-radius: var(--radio-s);
  background: var(--fondo-alto);
  border: 1px solid var(--borde);
  color: var(--acorde);
  font-family: var(--fuente-mono);
  font-size: 13px;
  font-weight: 700;
}

.fila-tono:empty {
  display: none; /* Sin tono declarado, no se deja una pastilla vacia. */
}

.fila-flecha {
  flex: 0 0 auto;
  color: var(--texto-tenue);
  transition:
    transform 0.12s ease,
    color 0.12s ease;
}

.fila-enlace:hover .fila-flecha {
  color: var(--acorde);
  transform: translateX(2px);
}

/* --- Estados vacios ------------------------------------------------------- */

.vacio {
  padding-block: 56px;
  text-align: center;
  color: var(--texto-suave);
}

.vacio-titulo {
  font-size: 15px;
  color: var(--texto);
  margin-bottom: 6px;
}

.vacio-nota {
  font-size: 13px;
}