/* ============================================================================
   Las tarjetas del kanban, con la cara de su proyecto (ver sj-kanban.js).
   Se adorna la tarjeta de la plataforma; no se dibuja otra, para que arrastrar
   entre columnas siga siendo suyo.
   ========================================================================== */

.task.kanban-card.sj-kan {
  /* Una franja arriba y un filo a la izquierda, los dos del color del KPI: con
     solo el filo de 4 px el color no se leia en una columna estrecha. */
  border-left: 4px solid var(--sj-kan-color, #6e8299);
  border-top: 3px solid var(--sj-kan-color, #6e8299);
  padding-left: 2px;
}
.task.kanban-card.sj-kan:hover {
  box-shadow: 0 0 0 1px var(--sj-kan-color, #6e8299);
}

.sj-kan__extra {
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--sj-linea, #dce5ef);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.sj-kan__kpi {
  align-self: flex-start;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sj-kan-color, #6e8299);
  /* El KPI sobre un lavado de su propio color: se reconoce el grupo de un
     vistazo sin leer la palabra. */
  background: color-mix(in srgb, var(--sj-kan-color, #6e8299) 12%, transparent);
  padding: 0.14rem 0.4rem;
  border-radius: 3px;
}

.sj-kan__dolor {
  margin: 0;
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--grey-500, #6e8299);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sj-kan__pie { display: flex; align-items: center; gap: 0.45rem; }

.sj-kan__caras { display: flex; flex: none; }
.sj-kan__cara {
  width: 19px; height: 19px;
  margin-right: -5px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--card-background, #fff);
  background: var(--sj-sup, #e7eef7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem;
  font-weight: 700;
  color: var(--grey-600, #3f556e);
}
.sj-kan__cara img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sj-kan__barra {
  flex: 1;
  height: 4px;
  background: var(--sj-sup, #e7eef7);
  border-radius: 3px;
  overflow: hidden;
}
.sj-kan__barra i { display: block; height: 100%; background: var(--sj-kan-color, #087aa8); }

.sj-kan__cuenta {
  font-family: Georgia, "Iowan Old Style", serif;
  font-size: 0.72rem;
  color: var(--grey-500, #6e8299);
  font-variant-numeric: tabular-nums;
  flex: none;
}

.sj-kan__falta {
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--sj-rojo, #c0444a);
}