/* Franja del cronómetro en marcha. Va bajo la nav superior, así que se carga en
 * todas las páginas: solo existe en el DOM cuando hay una sesión abierta.
 *
 * Ocupa una fila propia a lo ancho del contenedor en vez de meterse dentro de la
 * barra: ahí competía por espacio con el avatar y el botón de salir, que es
 * justo donde menos hay en móvil. */

.session-bar {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: var(--space-2) var(--space-4);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border-bottom: 2px solid var(--border);
}

.session-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  border: 2px solid var(--border-strong);
  color: var(--text);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  min-width: 0;
}
.session-pill:hover {
  border-color: var(--brand);
}
.session-pill.is-running {
  border-color: var(--brand);
}
.session-pill.is-paused {
  opacity: 0.7;
}

.sp-time {
  /* Cifras de ancho fijo: si no, la píldora se ensancha y encoge cada segundo. */
  font-variant-numeric: tabular-nums;
}

/* El nombre del hábito es lo primero que sobra cuando falta sitio. */
.sp-habit {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text-muted);
}