/* ============================================================
   FlouCards — system.css
   EL ELEMENTO FIRMA: el campo modular.
   Un solo componente (.board) con una sola métrica (--cell).
   Todas las configuraciones de la página son datos, no CSS.
   ============================================================ */

.board {
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cell));
  grid-auto-rows: var(--cell);
  gap: var(--gap);
  width: fit-content;
  max-width: 100%;
  position: relative;
}

/* ---------- Casillas vacías: el sustrato, no una línea ---------- */
.board__slots { display: contents; }
.board__slots--m { display: none; }

.slot {
  background: var(--slot);
  border-radius: var(--r-unit);
}

/* ---------- Capa de conectores ---------- */
.board__links {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: visible;
}
.board__links--m { display: none; }

.linkset {
  opacity: 0;
  transition: opacity var(--dur-assemble) var(--ease-out);
}
.linkset.is-live { opacity: 1; }

.link {
  fill: none;
  stroke: var(--trazo);
  stroke-width: 4;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}
/* flecha = avance · línea sin punta = relación */
.link--flow { marker-end: url(#pt-v); }
.on-violeta .link--flow { marker-end: url(#pt-p); }
.link--rel { stroke-dasharray: none; opacity: 0.55; }

/* ---------- Nodos ---------- */
.node {
  grid-column: var(--c) / span var(--w);
  grid-row: var(--r) / span var(--h);
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.45em;
  border-radius: var(--r-node);
  text-align: center;
  --dx: 0; --dy: 0; --mdx: 0; --mdy: 0; --i: 0;
  --edx: var(--sx, 0); --edy: var(--sy, 0);
  transform: translate(
    calc((var(--dx) + var(--edx)) * var(--pitch)),
    calc((var(--dy) + var(--edy)) * var(--pitch))
  );
  transition: transform var(--dur-assemble) var(--ease-out),
              opacity 320ms var(--ease-out);
  transition-delay: calc(var(--i) * 35ms);
}
.board.is-on .node { --edx: 0; --edy: 0; }
.board:not(.is-on) .node { opacity: 0; }

.node.is-off {
  opacity: 0;
  pointer-events: none;
}

.node__label {
  font-size: clamp(0.625rem, calc(var(--cell) * 0.165), 0.9375rem);
  font-weight: var(--w-semi);
  line-height: 1.1;
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
}

/* Capacidad: bloque relleno del sistema */
.node--cap {
  background: var(--node-cap-bg);
  color: var(--node-cap-fg);
}

/* FlouCards: el único mint de los diagramas. Caja mixta, jamás versalitas. */
.node--brand {
  background: var(--mint);
  color: var(--tinta);
}
.node--brand .node__label {
  text-transform: none;
  letter-spacing: var(--tr-tight);
  font-weight: var(--w-black);
  font-size: clamp(1rem, calc(var(--cell) * 0.29), 1.85rem);
}

/* Tu lado: contorno, no relleno */
.node--ghost {
  color: var(--node-ghost-fg);
  box-shadow: inset 0 0 0 2px var(--node-ghost-ln);
}
.node--ghost .node__label {
  text-transform: none;
  letter-spacing: -0.01em;
  font-weight: var(--w-medium);
  font-size: clamp(0.75rem, calc(var(--cell) * 0.2), 1.2rem);
}

/* Unidad suelta: el cuadrado de marca, sin etiqueta */
.node--unit {
  background: var(--node-unit);
  border-radius: var(--r-unit);
}

/* ---------- Móvil: 6 columnas, otra colocación ---------- */
@media (max-width: 859px) {
  .board { grid-template-columns: repeat(var(--mcols), var(--cell)); }
  .board__slots--d { display: none; }
  .board__slots--m { display: contents; }
  .board__links--d { display: none; }
  .board__links--m { display: block; }
  .node {
    grid-column: var(--mc) / span var(--mw);
    grid-row: var(--mr) / span var(--mh);
    transform: translate(
      calc((var(--mdx) + var(--edx)) * var(--pitch)),
      calc((var(--mdy) + var(--edy)) * var(--pitch))
    );
  }
}

/* ---------- Movimiento reducido: se congela ensamblado ---------- */
@media (prefers-reduced-motion: reduce) {
  .node { --edx: 0 !important; --edy: 0 !important; }
  .board:not(.is-on) .node { opacity: 1; }
}

/* ============================================================
   FICHA DE CAPACIDAD (mismo material, presentado como lista)
   ============================================================ */
.spec { display: grid; gap: 0; }
.spec__row {
  display: grid;
  grid-template-columns: calc(2 * var(--pitch) - var(--gap)) minmax(0, 1fr);
  gap: var(--stack-2);
  align-items: center;
  padding-block: clamp(1.1rem, 2.2vw, 2rem);
}
.spec__tile {
  height: var(--cell);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--node-cap-bg);
  color: var(--node-cap-fg);
  border-radius: var(--r-node);
  font-size: clamp(0.625rem, calc(var(--cell) * 0.165), 0.9375rem);
  font-weight: var(--w-semi);
  letter-spacing: var(--tr-wide);
  text-transform: uppercase;
}
.spec__text { font-size: var(--t-2); font-weight: var(--w-light); letter-spacing: -0.02em; }

@media (max-width: 640px) {
  .spec__row { grid-template-columns: 1fr; gap: var(--stack-1); }
  .spec__tile { width: calc(2 * var(--pitch) - var(--gap)); max-width: 100%; }
}