/* Lo próximo: una línea que se lee de un vistazo, sin competir con el cerebro. */
.proximo {
  display: flex;
  align-items: center;
  gap: .7rem;
  margin: .9rem 0 1.1rem;
  padding: .75rem 1rem;
  border-radius: 14px;
  background: linear-gradient(100deg, rgba(99, 102, 241, .10), rgba(56, 189, 248, .07));
  border: 1px solid rgba(99, 102, 241, .18);
  font-size: .98rem;
  line-height: 1.3;
}

.proximo-icono { font-size: 1.15rem; flex: none; }

.proximo-texto {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proximo-texto b { font-weight: 600; }

.proximo-cuando {
  flex: none;
  font-variant-numeric: tabular-nums;
  padding: .18rem .6rem;
  border-radius: 999px;
  background: rgba(99, 102, 241, .14);
  font-size: .86rem;
}

.proximo-resto {
  flex: none;
  font-size: .78rem;
  opacity: .55;
}

/* Menos de dos horas: se nota, pero no grita. */
.proximo-ya {
  background: linear-gradient(100deg, rgba(244, 114, 182, .13), rgba(251, 146, 60, .10));
  border-color: rgba(244, 114, 182, .28);
}
.proximo-ya .proximo-cuando { background: rgba(244, 114, 182, .2); font-weight: 600; }

.proximo-vacio { opacity: .6; }

@media (max-width: 560px) {
  .proximo { flex-wrap: wrap; gap: .45rem .6rem; }
  .proximo-texto { flex-basis: 100%; order: 2; white-space: normal; }
  .proximo-cuando { order: 1; }
}

@media (prefers-color-scheme: dark) {
  .proximo { border-color: rgba(129, 140, 248, .26); }
}