/* ============================================================================
   La pagina de Proyectos, agrupada (ver sj-rejilla.js).

   No se mueve ni un nodo: la aplicacion repinta la rejilla y cualquier
   reordenacion del DOM se perderia. Se agrupa con `order`, que es CSS y aguanta.
   ========================================================================== */

ul.project-grid.sj-rej {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.85rem;
  align-items: stretch;
  /* La hoja de la aplicacion fija el alto de TODAS las filas de la rejilla,
     incluida la del titulo de grupo: de ahi el hueco de 150 px entre el titulo
     y sus tarjetas (medido en pantalla el 2026-11-01). */
  grid-auto-rows: min-content;
}

/* La cabecera de cada grupo ocupa la fila entera. */
.sj-rej__cabecera {
  grid-column: 1 / -1;
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin: 0.9rem 0 -0.2rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--sj-linea, #dce5ef);
  list-style: none;
}
.sj-rej__cabecera:first-child,
.sj-rej__cabecera[data-sj-cabecera="trabajo"] { margin-top: 0; padding-top: 0; border-top: 0; }

.sj-rej__cabecera span {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--grey-400, #8496a8);
}
.sj-rej__cabecera small {
  font-family: Georgia, "Iowan Old Style", serif;
  font-size: 0.78rem;
  color: var(--grey-400, #8496a8);
  font-variant-numeric: tabular-nums;
}

/* Los contenedores (Equipos, Personas) no se pintan: su contenido ya sale
   bajo su titulo, y como tarjeta solo serian ruido. */
.sj-rej--oculta { display: none !important; }

/* Un filo de color por familia: se distingue el grupo aunque la cabecera
   quede fuera de la pantalla al desplazarse. */
.sj-rej__item { position: relative; }
.sj-rej__item > * { height: 100%; }
.sj-rej--trabajo  { box-shadow: inset 3px 0 0 var(--sj-azul, #087aa8); border-radius: 4px; }
.sj-rej--equipos  { box-shadow: inset 3px 0 0 var(--sj-verde, #0e7a64); border-radius: 4px; }
.sj-rej--personas { box-shadow: inset 3px 0 0 var(--grey-400, #8496a8); border-radius: 4px; }
.sj-rej--filtros  { box-shadow: inset 3px 0 0 var(--sj-ambar, #9a6b12); border-radius: 4px; }

/* La tarjeta de la plataforma mide 150 px fijos con el titulo abajo y el resto
   hueco -era sitio para una imagen de fondo que aqui nadie usa-. Se aprieta y
   el titulo sube: en una lista de doce, ese hueco es media pantalla perdida. */
ul.project-grid.sj-rej .project-card {
  height: auto;
  min-height: 84px;
  padding: 0.8rem 0.9rem;
  justify-content: flex-start;
  border: 1px solid var(--sj-linea, #dce5ef);
  border-radius: 4px;
}
ul.project-grid.sj-rej .project-card .project-title {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-size: 0.98rem;
  line-height: 1.3;
  order: -1;                      /* arriba, no al fondo */
}
ul.project-grid.sj-rej .project-card .project-background { display: none; }
ul.project-grid.sj-rej .project-card:hover {
  border-color: var(--sj-azul, #087aa8);
  background: var(--sj-sup-2, #edf3fa);
}

/* El alto fijo de 150 px lo pone el propio <li>, no la tarjeta: sin esto, la
   tarjeta se encoge por dentro y el hueco se queda igual (medido en pantalla). */
ul.project-grid.sj-rej > li.project-grid-item {
  height: auto;
  min-height: 0;
}
ul.project-grid.sj-rej .project-card { flex-direction: column; }
ul.project-grid.sj-rej .project-card .project-button { position: absolute; inset: 0; }