/* Pantalla del movil.
 *
 * Se usa de pie, a oscuras, con una copa en la mano y el telefono al 30% de
 * brillo. De ahi salen casi todas las decisiones:
 *
 * - Fondo oscuro CALIDO, no negro. Un movil blanco en un salon a media luz
 *   deslumbra; un negro puro con un acento acido parece una terminal. El
 *   ambar y el ciruela son los colores de la habitacion en la que se usa.
 * - Lo que se toca vive ABAJO, al alcance del pulgar de una mano.
 * - Un solo acento (ambar) y lo gasta entero el heroe: cuando te toca a ti.
 * - Los numeros en monoespaciada: son la maquina. Los nombres en la de
 *   siempre: son las personas.
 */

:root {
  --noche: #17101a;
  --terciopelo: #241a28;
  --borde: #3a2c40;
  --ambar: #f2a13b;
  --brasa: #e0563f;
  --nata: #f6efe9;
  --humo: #a2909c;

  --maquina: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --gente: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  color-scheme: dark;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--gente);
  font-size: 17px;
  line-height: 1.45;
  color: var(--nata);
  background: var(--noche);
  /* La barra del navegador del movil come alto: la zona de accion se ancla
     por encima del area segura, no del borde fisico. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* --- Cabecera ---------------------------------------------------------- */

.cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem 0.5rem;
}

.marca {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--humo);
}

.conexion {
  font-family: var(--maquina);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--humo);
  white-space: nowrap;
}

.conexion::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.5em;
  border-radius: 50%;
  background: var(--humo);
  vertical-align: 0.05em;
}

.conexion.vivo::before { background: var(--ambar); }
.conexion.caido::before { background: var(--brasa); }

/* --- El heroe: cuanto falta para tu turno ------------------------------- */

/* Es la unica pieza del producto que no existe en ninguna otra cola de
   musica: no "que suena", sino CUANDO TE TOCA. Se lleva el acento entero. */

.turno {
  margin: 0.25rem 1.25rem 1rem;
  padding: 1rem 1.25rem;
  border: 1px solid var(--borde);
  border-radius: 1rem;
  background: var(--terciopelo);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0 1rem;
}

.turno[data-estado="tuyo"],
.turno[data-estado="sonando"] { border-color: var(--ambar); }

.turno-etiqueta {
  grid-column: 2;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--humo);
}

.turno-numero {
  grid-row: span 2;
  font-family: var(--maquina);
  font-size: 3.4rem;
  font-weight: 700;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
  color: var(--ambar);
}

.turno-numero sup {
  font-size: 0.4em;
  vertical-align: 1.6em;
  margin-left: 0.05em;
}

.turno-detalle {
  grid-column: 2;
  color: var(--nata);
}

/* Cuando no tienes ninguna pedida, el heroe no grita: invita. Y cuando la
   tuya YA esta sonando tampoco hay numero que dar: ya no falta nada. */
.turno[data-estado="vacio"] .turno-numero,
.turno[data-estado="sonando"] .turno-numero { display: none; }
.turno[data-estado="vacio"] .turno-etiqueta,
.turno[data-estado="vacio"] .turno-detalle,
.turno[data-estado="sonando"] .turno-etiqueta,
.turno[data-estado="sonando"] .turno-detalle { grid-column: 1 / -1; }

.turno[data-estado="sonando"] .turno-etiqueta { color: var(--ambar); }

/* --- Lo que suena ahora -------------------------------------------------- */

/* Una tira fina, no un bloque: es informacion de fondo. El heroe sigue siendo
   el turno, y si esto compitiera con el, el movil dejaria de responder a la
   unica pregunta que solo esta cola contesta. */
.suena {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.1rem;
  margin: 0.25rem 1.25rem 0.75rem;
  padding-left: 0.75rem;
  border-left: 2px solid var(--borde);
}

.suena-etiqueta {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--humo);
}

.suena-titulo {
  font-size: 0.92rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.suena-quien { font-size: 0.78rem; color: var(--humo); }

/* --- La cola ------------------------------------------------------------ */

.cola-titulo {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 0 1.25rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--humo);
}

.lista {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 0 1.25rem 1rem;
  list-style: none;
}

/* Cada fila es la tira de titulo de una gramola: un canalillo a la izquierda
   con el numero de orden, y el titulo al lado. El numero no decora — es la
   posicion, que aqui es toda la informacion. */
.fila {
  display: grid;
  grid-template-columns: 2.5rem 1fr auto;
  /* Arriba, no centrado: con un titulo de dos lineas el numero se despegaba
     del titulo al que se refiere. */
  align-items: start;
  gap: 0 0.9rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--borde);
}

.fila:first-child { border-top: 0; }

.orden {
  grid-row: span 2;
  font-family: var(--maquina);
  font-size: 1.1rem;
  font-variant-numeric: tabular-nums;
  color: var(--humo);
  text-align: right;
}

.fila-titulo {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.fila-quien {
  grid-column: 2;
  font-size: 0.82rem;
  color: var(--humo);
}

/* El ambar es del heroe. Aqui basta con que el numero de TU cancion brille y
   que "Tuya" se lea en blanco: tres senales ambar por fila competian con el
   unico sitio donde el color significa algo. */
.fila.mia .orden { color: var(--ambar); }
.fila.mia .fila-quien { color: var(--nata); font-weight: 600; }

.quitar {
  /* Anclada arriba a la derecha: el boton se coloca al final del HTML, y sin
     fijarlo la rejilla lo dejaba caer a la altura de la segunda linea. */
  grid-area: 1 / 3 / span 2 / auto;
  /* Sin borde ni circulo: es una salida discreta, no una accion que ofrecer.
     Pero mantiene los 48 px de zona pulsable — se toca de pie y con una mano. */
  width: 2.9rem;
  height: 2.9rem;
  margin: -0.5rem -0.7rem 0 0;
  border: 0;
  background: transparent;
  color: var(--humo);
  font-size: 1.35rem;
  line-height: 1;
  cursor: pointer;
}

.quitar:active { color: var(--brasa); }

.vacia {
  padding: 2rem 0;
  color: var(--humo);
  text-align: center;
}

/* --- Lo que se toca: abajo, al alcance del pulgar ------------------------ */

.accion {
  padding: 0.9rem 1.25rem calc(0.9rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--borde);
  background: var(--terciopelo);
}

.aviso {
  margin: 0 0 0.6rem;
  min-height: 1.35rem;
  font-size: 0.88rem;
  color: var(--brasa);
}

.aviso.bien { color: var(--ambar); }

form { display: flex; gap: 0.6rem; }

input {
  flex: 1;
  min-width: 0;
  padding: 0.9rem 1rem;
  font: inherit;
  color: var(--nata);
  background: var(--noche);
  border: 1px solid var(--borde);
  border-radius: 0.7rem;
}

input::placeholder { color: var(--humo); }

button[type="submit"] {
  padding: 0.9rem 1.4rem;
  font: inherit;
  font-weight: 700;
  color: var(--noche);
  background: var(--ambar);
  border: 0;
  border-radius: 0.7rem;
  cursor: pointer;
}

button[type="submit"]:active { filter: brightness(0.9); }

/* Cola cerrada por el anfitrion: apagado y sin pinta de pulsable. */
input:disabled,
button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

:focus-visible {
  outline: 2px solid var(--ambar);
  outline-offset: 2px;
}

[hidden] { display: none !important; }

/* --- Movimiento --------------------------------------------------------- */

/* Solo una animacion, y para una cosa: que se VEA que la cola ha cambiado
   sola. Es la prueba de que el reparto esta vivo. */
@keyframes entra {
  from { opacity: 0; transform: translateY(-0.4rem); }
  to { opacity: 1; transform: none; }
}

.fila { animation: entra 220ms ease-out; }

@media (prefers-reduced-motion: reduce) {
  .fila { animation: none; }
}

/* --- Resultados de busqueda --------------------------------------------- */

/* Se toca uno y ya esta pedido: ni pantalla intermedia ni confirmacion. La
   caratula esta porque a oscuras se reconoce antes un disco que un titulo. */
.resultado {
  display: grid;
  grid-template-columns: 5rem 1fr;
  align-items: center;
  gap: 0.15rem 0.9rem;
  padding: 0.7rem 0;
  border-top: 1px solid var(--borde);
  cursor: pointer;
}

.resultado:first-child { border-top: 0; }
.resultado:active { background: var(--terciopelo); }

.caratula {
  grid-row: span 2;
  width: 5rem;
  height: 3.75rem;
  object-fit: cover;
  border-radius: 0.4rem;
  background: var(--terciopelo);
}

.volver {
  padding: 0.15rem 0.6rem;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ambar);
  background: transparent;
  border: 1px solid var(--borde);
  border-radius: 999px;
  cursor: pointer;
}

.buscando { color: var(--humo); }

/* --- Solo audio ---------------------------------------------------------- */

/* Va debajo del buscador y no encima: lo primero es escribir lo que quieres,
   y esto es un ajuste, no un paso. */
.solo-audio {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin-top: 0.7rem;
  font-size: 0.85rem;
  color: var(--nata);
  cursor: pointer;
}

.solo-audio input { flex: none; width: 1.1rem; height: 1.1rem; accent-color: var(--ambar); }
.solo-audio small { font-size: 0.78rem; color: var(--humo); }

/* La marca de cada resultado. Deliberadamente discreta: informa de que esa
   version es la de caratula fija, no compite con el titulo. */
.marca-audio {
  margin-left: 0.45rem;
  padding: 0.05rem 0.4rem;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--noche);
  background: var(--humo);
  border-radius: 0.3rem;
  white-space: nowrap;
}