/* ============================================================================
   La linea para colgar trabajo de un proyecto (sj-subtarea.js).

   Va arriba del todo del bloque de relaciones, antes incluso del "+" de la
   plataforma: es lo que se usa a diario, y las otras diez relaciones son
   excepciones. Una sola fila, sin cabecera y sin caja propia, para que no
   parezca un formulario mas en una pagina que ya tiene varios.
   ========================================================================== */
.sj-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
}

.sj-sub__txt {
  flex: 1 1 260px;
  min-width: 200px;
  padding: 7px 11px;
  border: 1px solid var(--sj-linea, #dce5ef);
  border-radius: 4px;
  background: var(--sj-papel, #fff);
  color: inherit;
  font: inherit;
  font-size: 0.95em;
}
.sj-sub__txt:focus {
  outline: none;
  border-color: var(--sj-azul, #087aa8);
}
.sj-sub__txt::placeholder { color: var(--grey-400, #8496a8); }
.sj-sub__txt:disabled { opacity: 0.6; }

.sj-sub__donde {
  flex: 0 1 auto;
  max-width: 220px;
  padding: 7px 9px;
  border: 1px solid var(--sj-linea, #dce5ef);
  border-radius: 4px;
  background: var(--sj-papel, #fff);
  color: inherit;
  font: inherit;
  font-size: 0.9em;
}

.sj-sub__add {
  padding: 7px 14px;
  border: 1px solid var(--sj-azul, #087aa8);
  border-radius: 4px;
  background: var(--sj-azul, #087aa8);
  color: #fff;
  font: inherit;
  font-size: 0.9em;
  cursor: pointer;
}
.sj-sub__add:hover { background: var(--sj-azul-alto, #066288); }

.sj-sub__estado {
  flex: 1 1 100%;
  font-size: 0.85em;
  color: var(--sj-tinta-suave, #5a6b80);
}
.sj-sub__estado--mal { color: var(--sj-rojo, #c0444a); }

/* El bloque propio, el de los proyectos que aun no tienen ninguna tarea.
   Ocupa el sitio que ocuparia el de la plataforma -encima de la ficha- para
   que el orden de la pagina no cambie el dia que aparezca el de verdad. */
.sj-fp__col > .sj-sub__solo { order: 1; }
.sj-sub__solo { margin-bottom: 18px; }
.sj-sub__tit {
  margin: 0 0 10px;
  font-size: 1.15em;
  font-weight: 400;
  color: var(--sj-tinta, #2d3f55);
}