/* ============================================================================
   SMARTIN JOBS - el nombre del responsable, cuando hay sitio.

   La plataforma esconde el nombre al lado del circulo (`display: none`) y deja
   solo la inicial. Aqui se destapa, pero con cabeza: en una pantalla estrecha
   el nombre empujaria el titulo de la tarea a una segunda linea, asi que por
   debajo de 900 px vuelve a verse solo el circulo, que es lo que pedia el
   usuario: "nombre y apellido donde sobre espacio, iniciales cuando no".

   Hace falta !important: la regla de la aplicacion lleva su atributo de ambito
   (`[data-v-...]`) y gana por especificidad a cualquier selector de clases.
   ========================================================================== */

.assignees-list .user .username,
.task-view .user .username {
  display: inline !important;
  margin-inline-start: .35rem;
  color: var(--sj-tinta-2, #5a6472);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* Con el nombre al lado, los circulos ya no pueden solaparse como hacia la
   plataforma: se pisarian las letras. Se separan, y nada mas: ni recuadro ni
   fondo. La fila tiene que seguir siendo una fila, no una tira de etiquetas. */
.assignees-list .assignee:not(:first-child) {
  margin-inline-start: .55rem !important;
}

/* En el detalle el campo de responsables ocupa toda la columna y no compite
   con nada: ahi el nombre va entero, grande y oscuro. Una inicial en un campo
   de 400 px era desaprovechar el sitio y esconder el dato. */
.task-view .user .username {
  font-size: .9rem;
  font-weight: 600;
  color: var(--sj-tinta, #0e1a2c);
}
.task-view .assignees-list .assignee { margin-block-end: .25rem; }

@media (max-width: 900px) {
  .assignees-list .user .username { display: none !important; }
  /* Sin nombre vuelven a solaparse: ocupan menos y se entienden igual. */
  .assignees-list .assignee:not(:first-child) { margin-inline-start: -.5rem !important; }
  /* Menos el detalle, que tiene toda la anchura para el. */
  .task-view .assignees-list .user .username { display: inline !important; }
}

/* ---------------------------------------------------- cambiar de equipo */

.sj-equipo-cambiar {
  margin-inline-start: .4rem;
  padding: 1px 8px;
  border: 1px solid var(--sj-linea-2, #d6cbb8);
  border-radius: 999px;
  background: transparent;
  color: var(--sj-tinta-3, #8b95a3);
  font: inherit;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 140ms, border-color 140ms;
}
.sj-equipo-cambiar:hover {
  color: var(--sj-azul-alto, #9a6b20);
  border-color: var(--sj-azul, #b8862b);
}