/*
 * Grilla suiza — componente compartido Sestanto.
 * Implementa docs/brand/05-layout.md: grilla modular de DOS ejes — 12
 * columnas Y filas, ambas separadas por la misma "calle" física (4mm), no
 * solo un eje de columnas. Un módulo no tiene por qué ocupar una sola
 * columna: al abarcar N columnas con `.col-N`, la(s) calle(s) internas
 * quedan incluidas en su ancho (comportamiento nativo de `grid-column:span`,
 * no hace falta restarlas a mano).
 *
 * Cuando dos o más módulos comparten fila, envolverlos en `.z-row`: eso les
 * da CSS Subgrid de filas (título/bajada/contenido), así esas tres bandas
 * —y por lo tanto los vértices de cada caja de contenido— quedan alineadas
 * exactamente entre columnas, sin importar si el texto de una ocupa más
 * líneas que el de la vecina (p. ej. un gráfico de dona vs. uno de barras
 * con descripciones de distinto largo — el caso que motivó este rediseño).
 *
 * Reemplaza al sistema anterior por fracciones (`.z-row`+`.z-8-4`/`.z-6-6`/
 * etc. con gap:16px fijo) — aquella versión no garantizaba alineación de
 * fila cuando el contenido de cada módulo tenía alturas distintas.
 * Implementación de referencia (fuente de verdad, no divergir):
 * shared/sestanto-brand-kit/templates/informe-base.html
 *
 * Uso:
 * <div class="z-row">
 *   <section class="modulo col-8">...</section>
 *   <section class="modulo col-4">...</section>
 * </div>
 * Una sola sección de ancho completo NO necesita z-row/col-N — es
 * simplemente un elemento de bloque normal (`.modulo` a secas).
 *
 * Requiere que el HTML que lo usa defina `--calle` (4mm por spec del
 * sistema; fallback 4mm si no está definida) y la escala `--space-*` de
 * 05-layout.md para `.modulo`/`.modulo-titulo`/`.modulo-desc`.
 */
.z-row{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  grid-template-rows:auto auto 1fr; /* título / bajada / contenido, compartidas por todos los módulos de la fila */
  column-gap:var(--calle,4mm);
  row-gap:var(--calle,4mm);
  margin-bottom:var(--space-24,24px);
}
.z-row > .modulo{
  display:grid;
  grid-template-rows:subgrid;
  grid-row:1 / span 3;
  margin-bottom:0;
}
.col-3{grid-column:span 3;}
.col-4{grid-column:span 4;}
.col-6{grid-column:span 6;}
.col-8{grid-column:span 8;}
.col-9{grid-column:span 9;}
.col-12{grid-column:span 12;}
@media (max-width:1080px){
  .z-row > .modulo{grid-column:span 12 !important;}
}

/*
 * Patrón de módulo — usar en TODO bloque de nivel superior (filtros, tira
 * de KPIs, cada gráfico, la tabla de detalle). Fuera de un `.z-row` es
 * simplemente un bloque; dentro de uno se vuelve ítem de subgrid (arriba).
 * Garantiza separación fija entre módulos y que título/bajada queden
 * siempre al mismo tamaño/posición.
 */
.modulo{margin-bottom:var(--space-24,24px);min-width:0;}
.modulo:last-child{margin-bottom:0;}
.modulo-titulo{font-size:16px;font-weight:600;line-height:1.3;margin-bottom:var(--space-4,4px);}
.modulo-desc{font-size:12px;line-height:1.4;margin-bottom:var(--space-16,16px);}

/*
 * Fila de tarjetas de igual altura (KPIs, por ejemplo): reusa la misma
 * grilla de 12 columnas y la misma calle, pero SIN subgrid — no hay
 * título/bajada por tarjeta que alinear entre sí, alcanza con que las
 * columnas y la calle coincidan con el resto de la página.
 */
.fila-tarjetas{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--calle,4mm);row-gap:var(--calle,4mm);}