/* Copiado de wsc-marca/src/estilos/base/reticula.css (4f300a7 2026-10-14) por web/traer-sistema.py. No se edita aquí: se cambia en el sistema y se vuelve a traer. */
/* Copiado de wsc-sistema/css/reticula.css (02/10/2026). Sin las l. 1–87 (registro, contenedores y tramos: en valores.css bloques 0 y 7).
   Los valores (color, letra, espacio, forma, movimiento) están en ../valores.css: aquí solo hay reglas
   que usan sus nombres. Si cambias algo aquí, cambia la cara de todas las páginas. */
.reticula {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--medianil);
  max-width: var(--contenedor);
  margin-inline: auto;
  padding-inline: var(--margen);
  /* Con el iPhone apaisado (viewport-fit=cover), el margen nunca menor que la zona segura:
     el texto no se mete bajo la isla ni la muesca */
  padding-inline: max(var(--margen), env(safe-area-inset-left, 0px)) max(var(--margen), env(safe-area-inset-right, 0px));
  box-sizing: border-box;
}

/* Colocación: por defecto, a todo el ancho de la retícula.
   --s en S, --m en M (hereda --s) y --l en L (hereda --m). El tramo lo da la página;
   fuera de ella (cabecera, pie), la ventana */
.reticula > * {
  grid-column: var(--s, 1 / -1);
  min-width: 0;
}
@container ventana (min-width: 640px) {
  .reticula > :where(:not(.lienzo *, .guia *, .pagina-propia *)) { grid-column: var(--m, var(--s, 1 / -1)); }
}
@container ventana (min-width: 1024px) {
  .reticula > :where(:not(.lienzo *, .guia *, .pagina-propia *)) { grid-column: var(--l, var(--m, var(--s, 1 / -1))); }
}
@container pagina (min-width: 640px) {
  .reticula > * { grid-column: var(--m, var(--s, 1 / -1)); }
}
@container pagina (min-width: 1024px) {
  .reticula > * { grid-column: var(--l, var(--m, var(--s, 1 / -1))); }
}

/* Retícula dentro de retícula: sin márgenes propios */
.reticula .reticula { padding-inline: 0; margin-inline: 0; max-width: none; }
/* Subretícula: hereda las columnas del padre (subgrid) y coloca con --s/--m/--l */
.subreticula { display: grid; grid-template-columns: subgrid; column-gap: var(--medianil); }
.subreticula > * { grid-column: var(--s, 1 / -1); min-width: 0; }
@container ventana (min-width: 640px) { .subreticula > :where(:not(.lienzo *, .guia *, .pagina-propia *)) { grid-column: var(--m, var(--s, 1 / -1)); } }
@container ventana (min-width: 1024px) { .subreticula > :where(:not(.lienzo *, .guia *, .pagina-propia *)) { grid-column: var(--l, var(--m, var(--s, 1 / -1))); } }
@container pagina (min-width: 640px) { .subreticula > * { grid-column: var(--m, var(--s, 1 / -1)); } }
@container pagina (min-width: 1024px) { .subreticula > * { grid-column: var(--l, var(--m, var(--s, 1 / -1))); } }

/* Composiciones con nombre (L · M · S) */
/* 3 + 1 + 8: título en 1–3, hueco en 4, contenido en 5–12 */
.c-titulo    { --m: 1 / span 3; --l: 1 / span 3; }
.c-contenido { --m: 4 / span 5; --l: 5 / span 8; }
/* 6 + 3 + 3 */
.c-6         { --m: 1 / span 8; --l: 1 / span 6; }
.c-3a        { --m: 1 / span 4; --l: 7 / span 3; }
.c-3b        { --m: 5 / span 4; --l: 10 / span 3; }
/* 6 + 6 (solo para comparar dos cosas del mismo rango) */
.c-mitad-a   { --m: 1 / span 4; --l: 1 / span 6; }
.c-mitad-b   { --m: 5 / span 4; --l: 7 / span 6; }

/* Rejilla de tarjetas: 4 + 4 + 4 en L, 4 + 4 en M, 4 en S */
.rejilla {
  display: grid;
  grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
  column-gap: var(--medianil);
  row-gap: var(--e-48);
}
.rejilla > * { grid-column: span 4; min-width: 0; }

/* Modo «junto»: teselas unidas por 1 px de línea */
.junto {
  display: grid;
  gap: 1px;
  background: var(--linea);
  border: 1px solid var(--linea);
  border-radius: var(--r);
  overflow: hidden;
}
.junto > * { background: var(--fondo); }
.junto > :focus-visible, .junto :focus-visible { outline-offset: -2px; }

/* Secciones: el aire entre ellas es un módulo */
.seccion { padding-block: var(--e-seccion); }
.seccion + .seccion { border-top: 1px solid var(--linea); }

/* Guía de retícula visible (html.ver-reticula). Cubre la página, no la ventana: empieza donde
   acaba el menú lateral (--menu-visible, 0 sin menú) y, como es una página, pinta las columnas
   del ancho que cubre */
.guia {
  position: fixed;
  inset: 0;
  inset-inline-start: var(--menu-visible, 0px);
  pointer-events: none;
  z-index: 90;
  display: none;
}
html.ver-reticula .guia { display: block; }
.guia .reticula { height: 100%; }
.guia .reticula > i {
  grid-column: auto;
  display: block;
  height: 100%;
  background: var(--guia-columna);
}
.guia .reticula > i:nth-child(n + 5) { display: none; }
/* Si va dentro del lienzo, lo cubre entero */
.lienzo:has(> .guia) { position: relative; }
.lienzo > .guia { position: absolute; inset: 0; }
@container pagina (min-width: 640px) { .guia .reticula > i:nth-child(n + 5) { display: block; } .guia .reticula > i:nth-child(n + 9) { display: none; } }
@container pagina (min-width: 1024px) { .guia .reticula > i:nth-child(n + 9) { display: block; } }