/**
 * Estilos de frontend del bloque umivale/grid-miembros.
 * Traduce a CSS plano SharedGridMiembros.vue.
 */

.umivale-grid-miembros { padding: 2rem 0; }

.umivale-gm__title {
  text-align: center;
  color: var(--uv-azul);
  font-size: var(--uv-titulo-xl);
  font-weight: var(--uv-peso-bold);
  line-height: var(--uv-titulo-xl-line-height);
  margin: 0 0 32px;
}

.umivale-gm__miembros.is-una-col {
  max-width: 720px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .umivale-gm__miembros.is-dos-col {
    column-count: 2;
    column-gap: 48px;
  }
  /* Cliente (2026-09-21): "las 4 columnas deben estar a la misma altura en
     un mismo bloque" -- cuando el bloque necesita repetir el encabezado en
     la 2ª columna (ver `repiteEncabezado` en render.php), ni el
     `column-count` fluido (`column-fill:balance` ignora los
     `break-before:column` forzados) ni un CSS Grid con `grid-column` por
     grupo (el auto-placement, con `dense`, reubicaba el primer grupo de la
     columna 2 en la fila 1 -- arrancaba 564px más arriba que la columna 1)
     dan un resultado confiable. Cada columna es ahora un contenedor propio
     (`.umivale-gm__columna`, armado en PHP) con flujo vertical normal
     adentro -- sin auto-placement de por medio, las dos arrancan a la
     misma altura por construcción, no por casualidad del algoritmo. */
  .umivale-gm__miembros.is-dos-col.tiene-encabezado-repetido {
    column-count: auto;
  }
  .umivale-gm__columnas {
    display: flex;
    align-items: flex-start;
    gap: 0 48px;
  }
  .umivale-gm__columna {
    flex: 1 1 0;
    min-width: 0;
  }
}

.umivale-gm__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  font-weight: 700;
  color: var(--uv-azul);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--uv-azul);
  margin-bottom: 4px;
  break-inside: avoid;
  column-span: all;
}

.umivale-gm__rol {
  color: var(--uv-azul);
  font-size: var(--uv-parrafo-l);
  line-height: var(--uv-parrafo-l-line-height);
  font-weight: 700;
  margin: 1.5rem 0 6px; /* separación entre grupos: 24px */
  break-after: avoid;
}

.umivale-gm__fila {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 6px 0;
  border-bottom: 1px solid #e5e7eb;
  break-inside: avoid;
}

.umivale-gm__nombre,
.umivale-gm__empresa {
  color: #3C4858;
  line-height: 1.4;
}
.umivale-gm__nombre { font-weight: 600; }
.umivale-gm__empresa { font-size: var(--uv-parrafo-s); line-height: var(--uv-parrafo-s-line-height); }

@media (max-width: 767px) {
  .umivale-gm__fila,
  .umivale-gm__header {
    grid-template-columns: 1fr;
    gap: 2px;
  }
  .umivale-gm__empresa {
    margin-bottom: 4px;
  }
}