/* ============================================================
   AGCS UI -- grid de construccion para apps   v0.2 (2026-09-24)
   ============================================================
   El grid de los decks llevado a pantalla, con el mismo formato. En
   los decks es 48px de paso y 3px de linea a 4K (agcs-design-system
   v5.6); visto en una pantalla de 1280 eso es exactamente 16px y 1px.
   Aqui: 16px (multiplo de 8, la base del espaciado de las apps) y 1px,
   con la misma transparencia de los decks: 6% sobre blanco y 8% sobre
   negro (v5.6, 2026-09-25; antes 9% y 11%).

   Va en cuatro lugares y en ningun otro (docs/grid.md):
     1. la entrada de cada modulo (el encabezado),
     2. los estados vacios,
     3. los lienzos de diagramas,
     4. los graficos de barras, solo si el grid ES su escala.
   Tablas, texto y el resto de los graficos van planos.

   En apps se puede usar var(): el problema de los decks con var()
   era del renderer de export a Express y PDF, que aqui no existe.
   ============================================================ */

:root {
  --grid-step: 16px;
  --grid-line-w: 1px;
  --grid-line: rgba(0, 0, 0, 0.06);        /* ~#F0F0F0 sobre blanco, 1.14:1 */
}

.dark,
[data-mode="dark"] {
  --grid-line: rgba(255, 255, 255, 0.08);  /* ~#141414 sobre negro, 1.14:1 */
}

/* Las lineas se corren 1px hacia arriba y a la izquierda: asi quedan en
   k * paso - 1, y el borde de un bloque que mide pasos enteros cae justo
   sobre una linea. El elemento tiene que medir pasos enteros de alto. */
.agcs-grid {
  background-image:
    linear-gradient(to right,  var(--grid-line) var(--grid-line-w), transparent var(--grid-line-w)),
    linear-gradient(to bottom, var(--grid-line) var(--grid-line-w), transparent var(--grid-line-w));
  background-size: var(--grid-step) var(--grid-step);
  background-position: calc(var(--grid-line-w) * -1) calc(var(--grid-line-w) * -1);
}