/*
 * Rockola — estilos comunes.
 * Fuente de verdad: design-system/rockola/MASTER.md (con el override del estudio).
 *
 * La restriccion de diseño no es el estilo, es el publico: de 20 a 75 años.
 * Alguien de 70 tiene que poder pedir una cancion de noche, sin lentes y con
 * una copa en la mano. De ahi salen el cuerpo de 18px, los botones de 56px y
 * el contraste alto. Todo lo demas se subordina a eso.
 */

/* Fuentes servidas desde aca y no desde Google: el notebook puede quedarse sin
   internet a mitad de fiesta y la pagina tiene que seguir viendose igual. */
@font-face {
  font-family: 'Bricolage Grotesque';
  src: url('/fuentes/bricolage.woff2') format('woff2');
  font-weight: 200 800;
  font-display: swap;
}
@font-face {
  font-family: 'Archivo';
  src: url('/fuentes/archivo.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

/*
 * PALETA: la de Spotify, por encargo. Los grises son los suyos —#121212 de
 * fondo, #181818 para lo que se levanta, #282828 para lo que se toca— y el
 * verde es su verde de marca.
 *
 * Se renombraron las variables. --brasa y --laton describian un naranja de
 * brasa y un laton dorado que ya no existen, y una variable que miente sobre
 * su color es peor que no tener variable: dentro de un mes nadie sabe si
 * var(--verde) es el acento o un naranja de verdad.
 *
 * Sigue cumpliendo lo unico que no se negocia: el publico va de 20 a 75 años y
 * alguien de 70 tiene que poder pedir de noche sin lentes. De ahi el cuerpo de
 * 18px, los botones de 56px y el contraste alto. Comprobado: todos los pares
 * de esta paleta pasan WCAG AA, ver el final del archivo.
 */
:root {
  --fondo: #121212;      /* el fondo de Spotify */
  --superficie: #181818; /* tarjetas y bloques que se levantan del fondo */
  --relieve: #282828;    /* lo que se toca: botones, pistas de deslizador */
  --texto: #ffffff;
  --apagado: #b3b3b3;    /* el gris de sus textos secundarios */
  --verde: #1ed760;      /* el verde de marca. Acento y estado activo */
  --verde-vivo: #1fdf64; /* el mismo, un punto mas claro, para el hover */
  --realce: #ffffff;     /* relleno de las barras de progreso, como en Spotify */
  --aviso: #ffa42b;      /* ambar de "ojo con esto". No lo hay en su paleta */
  --rojo: #e22134;       /* su rojo de error */
  /* #333 y no el #2a2a2a de Spotify: alli el borde casi no existe porque el
     relleno ya separa las tarjetas. Aqui hay gente de 70 años mirando un
     telefono de noche, y un poco mas de definicion no cuesta nada. */
  --borde: #333333;

  --display: 'Bricolage Grotesque', 'Segoe UI', system-ui, sans-serif;
  --cuerpo: 'Archivo', 'Segoe UI', system-ui, sans-serif;

  --toque: 56px; /* alto minimo de cualquier cosa que se toque */
  --radio: 4px;  /* bordes casi duros para listas y tarjetas */
  --redondo: 500px; /* los mandos del reproductor, que si son redondos */
}

* { box-sizing: border-box; }

/*
 * El atributo `hidden` tiene que ganar SIEMPRE, y no ganaba.
 *
 * `hidden` se aplica desde la hoja del navegador con `[hidden]{display:none}`,
 * y cualquier regla de ESTE archivo con la misma especificidad le pasa por
 * encima: `.sonando{display:grid}` gana, y el bloque se queda a la vista con
 * `hidden` puesto. Lo mismo `.reacciones{display:flex}` y `.cajon{display:flex}`.
 *
 * Se vio en una captura, no leyendo el codigo: con el bingo encendido seguia
 * apareciendo "SONANDO AHORA" con el titulo vacio —justo lo que el modo bingo
 * existe para tapar— y el cajon de la lista salia abierto encima del panel.
 * En el sitio donde ya se notaba antes: cuando no suena nada, el bloque vacio
 * se quedaba en pantalla igual.
 */
[hidden] { display: none !important; }

/*
 * Los hijos de flex y de grid arrancan con min-width:auto, que es el ancho
 * de su contenido: un titulo largo empuja la columna y la pagina entera se
 * desborda a lo ancho. Se vio en la captura a 390 px — el boton "Cambiala"
 * y los titulos salian cortados por el borde derecho.
 */
.sonando > *, .fila > *, .reacciones > * { min-width: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 18px;
  line-height: 1.45;
  /* Sin rebote elastico: da sensacion de pagina web, no de aplicacion. */
  overscroll-behavior-y: none;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  margin: 0;
}

.envoltura {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 16px 120px;
}

/* ---------------------------------------------------------- cabecera */

/*
 * "RADIO SENSACION" ocupa el doble que el nombre corto que habia antes, y en un
 * telefono de 360 se partia en dos lineas Y ademas partia en dos el nombre de
 * la fiesta que va al lado: cuatro lineas para una cabecera. Se prohibe el
 * corte de la marca y se deja que envuelva el bloque entero, asi que en pantalla
 * chica quedan dos lineas limpias —la marca, y debajo la fiesta— en vez de
 * cuatro rotas.
 */
.marca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  padding: 18px 0 14px;
}
.marca b {
  font-family: var(--display);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.03em;
  white-space: nowrap;
}
.marca span {
  color: var(--apagado);
  font-size: 15px;
}

/* ---------------------------------------------------------- sonando */

/*
 * Bloque dominante, a proposito desigual con el resto: la portada manda y el
 * texto se apoya en ella. Nada de tres tarjetas iguales en fila.
 */
.sonando {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 16px;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-left: 5px solid var(--verde);
  padding: 16px;
  margin-bottom: 8px;
}
.sonando .arte {
  width: 108px;
  height: 108px;
  object-fit: cover;
  background: var(--relieve);
  border: 1px solid var(--borde);
  display: block;
}
.sonando .rotulo {
  color: var(--apagado);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.sonando .titulo {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.12;
  overflow-wrap: anywhere;
}
/*
 * Tres lineas como mucho, y solo en la pagina de los invitados.
 *
 * Un titulo de YouTube sin tope se comia cuatro lineas de 24px y empujaba el
 * buscador —lo unico que hay que aprender en esta pagina— por debajo del borde
 * del telefono. En el panel del DJ este mismo bloque NO se recorta, por lo
 * mismo que las filas: el que pincha necesita leer el titulo entero.
 */
#bloqueSonando .titulo {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sonando .dato {
  color: var(--apagado);
  font-size: 15px;
  margin-top: 6px;
}

.barra {
  height: 4px;
  background: var(--relieve);
  margin-top: 12px;
}
.barra i {
  display: block;
  height: 100%;
  background: var(--realce);
  transition: width 1s linear;
}

/* ---------------------------------------------------------- botones */

.boton {
  appearance: none;
  border: 1px solid var(--borde);
  background: var(--relieve);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 17px;
  font-weight: 600;
  min-height: var(--toque);
  padding: 0 18px;
  border-radius: var(--radio);
  cursor: pointer;
  transition: background 180ms ease, border-color 180ms ease, transform 120ms ease;
}
.boton:hover { background: #3e3e3e; }
.boton:active { transform: translateY(1px); }
.boton:focus-visible {
  outline: 3px solid var(--verde);
  outline-offset: 2px;
}
.boton[disabled] { opacity: 0.45; cursor: not-allowed; }

/* El boton verde lleva texto NEGRO, como los de Spotify: sobre ese verde,
   texto blanco da 2,0:1 y no se lee. Negro da 12,1:1. */
.boton.principal {
  background: var(--verde);
  border-color: var(--verde);
  color: #000000;
  font-weight: 700;
}
.boton.principal:hover { background: var(--verde-vivo); }

.boton.peligro {
  background: var(--rojo);
  border-color: var(--rojo);
  color: var(--texto);
  font-weight: 700;
}
.boton.peligro:hover { background: #f0304a; }

.boton.ancho { width: 100%; }

/* ---------------------------------------------------------- reacciones */

.reacciones {
  display: flex;
  gap: 8px;
  margin-bottom: 26px;
}
.reacciones .boton {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 16px;
}
.reacciones .boton.marcado {
  border-color: var(--verde);
  color: var(--verde);
}
.reacciones .boton > span:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reacciones .cuenta {
  font-variant-numeric: tabular-nums;
  color: var(--apagado);
  font-weight: 700;
}

/* ---------------------------------------------------------- buscador */

.buscador { position: relative; margin-bottom: 10px; }
.buscador input {
  width: 100%;
  min-height: var(--toque);
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 18px;
  padding: 0 16px;
}
.buscador input::placeholder { color: var(--apagado); }
.buscador input:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: inset 0 0 0 1px var(--verde);
}

/* ---------------------------------------------------------- listas */

.seccion {
  font-family: var(--display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--apagado);
  margin: 28px 0 10px;
}

.fila {
  display: grid;
  /* 48 y no 56, y es la misma medida en las tres listas. Con 56 el titulo de
     un pedido se quedaba con 180 px en un telefono de 390 y "Amar Azul,
     Alicia Ferraro Cardozo, Miguel Angel D'Anibale - Yo Me Enamore" se partia
     en cuatro lineas. Una sola medida ademas hace que la cola y el historial
     se lean como una lista y no como dos. */
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
  background: var(--superficie);
  border: 1px solid var(--borde);
  padding: 10px;
  margin-bottom: 8px;
  min-height: var(--toque);
}
/*
 * El hueco cuando no hay caratula.
 *
 * Antes era un cuadrado gris liso, y un cuadrado gris liso al lado de doce
 * portadas de verdad se lee como que la pagina se rompio. Con la nota queda
 * claro que ese tema no trae imagen, que es distinto. Va de fondo y no como
 * elemento aparte: asi sirve igual para el <div> vacio de una fila sin ruta y
 * para una <img> cuya caratula no cargo, que se quedan las dos transparentes.
 *
 * #777 sobre el #282828 del relieve da 3,29:1 — calculado, no estimado. Por
 * encima del 3:1 que pide la WCAG para un grafico de interfaz.
 */
.fila .arte {
  width: 48px;
  height: 48px;
  object-fit: cover;
  background-color: var(--relieve);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23777777'%3E%3Cpath d='M12 3v10.55A4 4 0 1 0 14 17V7h4V3h-6z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 42%;
  display: block;
}
.fila .nom {
  font-size: 17px;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.fila .sub {
  color: var(--apagado);
  font-size: 14px;
  margin-top: 3px;
}

/*
 * Dos lineas y corta, SOLO en las listas de los invitados.
 *
 * Estos titulos vienen de YouTube y los hay de once palabras: sin tope, uno
 * solo empujaba su fila a cuatro lineas y la lista quedaba con filas de tres
 * alturas distintas, que es lo que hace que una lista se vea descuidada.
 *
 * En el panel del DJ NO se recorta, y eso es a proposito: el invitado mira la
 * lista para reconocer su cancion —con dos lineas le sobra— pero el que
 * pincha tiene que LEER el titulo entero para saber que va a poner. Ahorrar
 * dos lineas en su telefono no vale que tenga que adivinar.
 */
.fila.espera .nom, .fila.sonada .nom {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* La linea gris nunca parte: es dato de apoyo y en dos lineas pesa mas que el
   titulo que tiene encima. */
.fila.espera .sub, .fila.sonada .sub {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.fila .boton { min-height: 48px; padding: 0 14px; }

/*
 * La lista de espera.
 *
 * Lo que se le añadio, y por que: el numero de puesto, porque lo primero que
 * pregunta quien acaba de pedir algo es "¿en que voy?"; la caratula de verdad,
 * porque un cuadrado gris no dice nada y la imagen ya existia; y una etiqueta
 * para la primera y para las que aun se estan bajando, porque desde fuera esos
 * dos estados se veian exactamente igual que el resto y la gente creia que su
 * pedido se habia perdido.
 */
.fila.espera { grid-template-columns: 28px 48px 1fr auto; gap: 10px; }
.fila .turno {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  color: var(--apagado);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fila.proxima {
  border-left: 4px solid var(--verde);
  padding-left: 7px; /* 10 - 4 + 1: el borde no puede mover el contenido */
}
.fila.proxima .turno { color: var(--verde); }

/*
 * "Ya sonaron": la misma anatomia que la lista de espera, un tono mas abajo.
 *
 * Antes era una columna de texto gris de 14px, sin imagen y sin jerarquia: al
 * lado de una lista de espera con caratulas parecia el pie de pagina y no una
 * parte del reproductor. Ahora es una lista de verdad —caratula real, titulo
 * blanco, dato gris, cuando sono a la derecha— porque los datos ya estaban en
 * la base y lo unico que faltaba era pedirlos.
 *
 * Es una lista de LEER, no de tocar: por eso pierde la tarjeta (fondo y borde
 * de caja) y se queda con una linea de separacion, que es como se ven las
 * listas de Spotify. Sin la caja, veinte filas dejan de ser veinte bloques.
 * La caratula baja a 48px y el titulo a 16: la fila de espera tiene que seguir
 * ganando de un vistazo, porque es la que dice lo que va a pasar.
 */
.fila.sonada {
  gap: 12px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--borde);
  border-radius: 0;
  padding: 8px 2px;
  margin-bottom: 0;
  min-height: 0;
}
.fila.sonada:last-child { border-bottom: 0; }
.fila.sonada .nom { font-size: 16px; }
.fila.sonada .sub { font-size: 13px; margin-top: 2px; }

/* Cuando sono. A la derecha y en cifras de ancho fijo, para que la columna no
   baile entre "3 min" y "12 min" mientras la pagina se repinta sola. */
.cuando {
  color: var(--apagado);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  align-self: start;
  padding-top: 3px;
}

/*
 * El historial llega con veinte y se enseñan ocho.
 *
 * Veinte filas son mil trescientos pixeles colgando del final de la pagina: en
 * el telefono eso no es "visible", es un muro debajo de lo unico que importa,
 * que es pedir. Las ocho primeras son las que alguien mira de verdad ("¿ya
 * sono la mia?") y el resto esta a un toque.
 */
#verTodas { margin-top: 10px; }

.etiqueta {
  display: inline-block;
  margin-top: 5px;
  font-family: var(--display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--apagado);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 2px 7px;
}
.etiqueta.viva { color: var(--verde); border-color: var(--verde); }

/*
 * Pantallas estrechas.
 *
 * Antes aqui la lista de espera perdia la caratula entera, porque con 56 px de
 * imagen y un titulo sin tope el nombre se quedaba sin sitio. Ya no hace falta
 * quitarla: la imagen bajo a 48 y el titulo se corta a dos lineas, asi que
 * cabe encogiendola a 40 —igual que la del historial— y las dos listas siguen
 * viendose de la misma familia tambien en un telefono chico. Lo que se va es
 * la hora, que es el dato del que de verdad se puede prescindir.
 */
@media (max-width: 360px) {
  .fila.espera { grid-template-columns: 24px 40px 1fr auto; gap: 8px; }
  .fila .arte { width: 40px; height: 40px; }
  /* La de historial SI conserva la caratula: no tiene numero de puesto ni
     boton, asi que el titulo no se queda sin sitio. Lo que se va es la hora,
     que es el dato mas prescindible de la fila. */
  .fila.sonada { grid-template-columns: 40px 1fr; }
  .fila.sonada .arte { width: 40px; height: 40px; }
  .cuando { display: none; }
}

/*
 * El interrogante del bingo: ocupa el sitio de la caratula, porque la
 * caratula es justo lo que no se puede ver. Se dibuja con tipografia y no
 * con una ilustracion: es un signo, no un adorno.
 */
.bingoNumero {
  width: 108px;
  height: 108px;
  display: grid;
  place-items: center;
  background: var(--relieve);
  border: 1px solid var(--borde);
  font-family: var(--display);
  font-size: 64px;
  font-weight: 800;
  line-height: 1;
  color: var(--verde);
}

.insignia {
  display: inline-block;
  background: var(--relieve);
  border: 1px solid var(--borde);
  color: var(--apagado);
  font-size: 13px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radio);
}
.insignia.viva { color: var(--verde); border-color: var(--verde); }

.vacio {
  color: var(--apagado);
  font-size: 16px;
  padding: 14px 2px;
}

/* ---------------------------------------------------------- avisos */

.aviso {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: 20px;
  max-width: 608px;
  margin: 0 auto;
  background: var(--texto);
  color: #000000;
  font-weight: 600;
  padding: 16px;
  border-radius: var(--radio);
  z-index: 20;
  animation: entra 220ms ease;
}
.aviso.malo { background: var(--rojo); color: #ffffff; }
@keyframes entra {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

.desconectado {
  background: var(--rojo);
  color: var(--texto);
  text-align: center;
  font-weight: 600;
  padding: 10px;
}

svg.icono {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ---------------------------------------------------------- launchpad */

/*
 * Pads cuadrados, como los de un controlador de verdad.
 *
 * Si, es una rejilla de cosas iguales, que es justo el patron que el estudio
 * tiene prohibido por delator. Aca esta permitido por una razon concreta: no
 * es una decoracion, es el objeto real que imita. Un launchpad ES una rejilla
 * de cuadrados iguales, y romper esa simetria haria mas dificil encontrar el
 * pad de siempre a oscuras. Lo que se cuida es que no parezca una "tarjeta
 * web": borde duro, numero serigrafiado en la esquina, tira de LED arriba y
 * hundido al pulsar.
 */
.launchpad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
@media (min-width: 520px) {
  .launchpad { grid-template-columns: repeat(4, 1fr); }
}

.pad {
  position: relative;
  aspect-ratio: 1 / 1;
  min-height: 92px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 4px;
  padding: 10px;
  text-align: left;
  appearance: none;
  cursor: pointer;
  color: var(--texto);
  background: var(--relieve);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  font-family: var(--cuerpo);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.15;
  overflow: hidden;
  /* El retardo de 300 ms al tocar convierte un instrumento en un formulario. */
  touch-action: manipulation;
  transition: background 120ms ease, border-color 120ms ease, transform 80ms ease;
}

/* La tira de LED. Apagada es un surco; encendida es la luz del pad. */
.pad::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: var(--fondo);
  border-bottom: 1px solid var(--borde);
}
.pad .num {
  position: absolute;
  top: 11px; right: 9px;
  font-size: 12px;
  font-weight: 700;
  color: var(--apagado);
  font-variant-numeric: tabular-nums;
}
.pad .nom {
  overflow-wrap: anywhere;
  hyphens: auto;
}
/* El estado no se cuenta solo con el color: quien no distingue el naranja
   tiene que verlo igual. De ahi el punto y el borde grueso. */
.pad .luz {
  width: 9px; height: 9px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--apagado);
  flex: none;
}
.pad[aria-pressed='true'] {
  background: var(--verde);
  border-color: var(--verde);
  color: #000000;
}
.pad[aria-pressed='true']::before { background: #b6f7cd; border-bottom-color: #b6f7cd; }
/* Negro al 62%: sobre el verde da 5,6:1, de sobra para 12 px. Con el naranja
   viejo hacia falta 78% para llegar a 4,5:1. Calculado, no estimado. */
.pad[aria-pressed='true'] .num { color: rgba(0, 0, 0, 0.62); }
.pad[aria-pressed='true'] .luz { background: #000000; border-color: #000000; }
.pad:active { transform: translateY(2px); }
.pad:focus-visible { outline: 3px solid var(--verde); outline-offset: 3px; }
.pad[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ---------------------------------------------------------- reproductor */

/*
 * El transporte: hilo fino, punto redondo, y los mandos debajo.
 *
 * El relleno de la barra se dibuja con un degradado sobre la propia pista del
 * input y no superponiendo dos elementos: asi el sitio donde se ve el avance y
 * el sitio donde se toca son exactamente el mismo, y no hay forma de que se
 * descuadren al redondear.
 */
.transporte {
  background: var(--superficie);
  border: 1px solid var(--borde);
  padding: 14px 18px 18px;
  margin-bottom: 8px;
}

/* La linea del corazon, encima de la barra. */
.pulso {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  min-height: 26px;
  font-size: 15px;
  color: var(--apagado);
}
.pulso .pide { font-variant-numeric: tabular-nums; }
.pulso .pide b { color: var(--aviso); font-size: 17px; }
.corazon {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.corazon svg {
  width: 20px; height: 20px; flex: none;
  fill: none;
  stroke: var(--apagado);
  stroke-width: 1.8;
  stroke-linejoin: round;
}
.corazon.vivo svg { fill: var(--verde); stroke: var(--verde); }
.corazon.vivo b { color: var(--verde); }
.corazon b { font-size: 17px; }

.aguja {
  display: block;
  width: 100%;
  height: 34px;
  appearance: none;
  background: transparent;
  margin: 2px 0 0;
  cursor: pointer;
  touch-action: none;
}
/*
 * 4 px de alto para el hilo, como en la referencia. El area que se puede tocar
 * NO son 4 px: es todo el alto del input, 34 px. Esa es la ventaja de pintar
 * la pista dentro del propio control en vez de dibujar una linea decorativa
 * al lado.
 */
.aguja::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: var(--redondo);
  background:
    linear-gradient(var(--realce), var(--realce)) 0 / var(--avance, 0%) 100% no-repeat,
    var(--relieve);
  border: 0;
}
.aguja::-webkit-slider-thumb {
  appearance: none;
  width: 14px; height: 14px;
  margin-top: -5px;
  background: var(--realce);
  border: 0;
  border-radius: 50%;
}
.aguja::-moz-range-track {
  height: 4px; border-radius: var(--redondo);
  background: var(--relieve); border: 0;
}
.aguja::-moz-range-progress {
  height: 4px; background: var(--realce); border-radius: var(--redondo);
}
.aguja::-moz-range-thumb {
  width: 14px; height: 14px; background: var(--realce);
  border: 0; border-radius: 50%;
}
.aguja:focus-visible { outline: 3px solid var(--verde); outline-offset: 6px; }
.aguja[disabled] { opacity: 0.35; cursor: not-allowed; }
/* Mientras el dedo arrastra, el punto crece y se pone verde: es la unica
   confirmacion de que lo agarraste sin mirar. */
.aguja.agarrada::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -8px;
  background: var(--verde); }
.aguja.agarrada::-moz-range-thumb { width: 20px; height: 20px; background: var(--verde); }

.tiempos {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  color: var(--apagado);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  margin-top: -4px;
}
.tiempos b {
  font-family: var(--display);
  font-size: 20px;
  color: var(--texto);
  font-weight: 700;
}
.tiempos .buscando { color: var(--verde); }

/*
 * Los cinco mandos. Iconos sin caja, salvo el de reproducir: es el unico que
 * se aprieta a cada rato y el unico que tiene que encontrarse sin mirar, asi
 * que es el unico que lleva relleno y el unico mas grande.
 */
.mandos {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  margin-top: 14px;
}
.mando {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  color: var(--texto);
  width: 56px;
  height: 56px;
  border-radius: var(--redondo);
  display: grid;
  place-items: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 140ms ease, color 140ms ease, transform 90ms ease;
}
.mando svg { width: 26px; height: 26px; fill: currentColor; }
.mando svg text { fill: currentColor; }
.mando:hover { background: var(--relieve); }
.mando:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }
.mando[disabled] { opacity: 0.35; cursor: not-allowed; }

.mando.grande {
  width: 68px;
  height: 68px;
  background: var(--verde);
  color: #000000;
}
.mando.grande svg { width: 30px; height: 30px; }
.mando.grande:hover { background: var(--verde-vivo); }

/*
 * Saltar va al final, separado, y ROJO desde el principio.
 *
 * Primero lo dejé blanco como los demas, igual que en cualquier reproductor.
 * Está mal por una diferencia que importa: en Spotify "siguiente" pasa al tema
 * siguiente y se vuelve con "anterior"; aquí MATA la canción que está sonando
 * delante de treinta personas y no hay vuelta atrás. Y en un teléfono no hay
 * hover, así que un color que solo aparece al pasar el ratón no existe.
 * Rojo permanente: 3,81:1 sobre la tarjeta, se distingue de un vistazo a
 * oscuras y sigue estando a un dedo de distancia.
 */
.mando.saltar { margin-left: 8px; color: var(--rojo); }
.mando.saltar:hover { background: rgba(226, 33, 52, 0.18); }
.mando:active { transform: scale(0.9); }
.mando.saltar:active { color: var(--rojo); }
.mando.cargando { opacity: 0.45; }