/* ================================================================
   DIAGRAMS.CSS — Diagramas de arquitectura (páginas de proyecto y mini-diagramas de tarjetas)
   Cada fila es un grid de N columnas iguales. La flecha se dibuja con ::after en el borde derecho de
   cada nodo (top:50% + translateY(-50%)): su centro vertical coincide siempre con el del nodo.
   Nunca hay scroll horizontal: por debajo de 900px el flujo pasa a vertical.
================================================================ */
.arch { display: grid; gap: 1.6rem; }
.arch-row { min-width: 0; }
.arch-label { display: block; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted2); margin-bottom: 0.6rem; }
.arch-flow { --gap: 34px; --arrow: #43434f; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); column-gap: var(--gap); align-items: stretch; }
.arch-node { position: relative; min-width: 0; padding: 0.75rem 0.85rem; background: var(--card); border: 1px solid var(--border2); border-radius: 8px; }
.arch-node b { display: block; font-size: 0.82rem; font-weight: 600; overflow-wrap: anywhere; line-height: 1.25; }
.arch-node small { display: block; font-size: 0.7rem; color: var(--muted2); line-height: 1.35; margin-top: 3px; overflow-wrap: anywhere; }
.arch-node:not(:last-child)::after {
  content: ""; position: absolute; left: 100%; top: 50%; width: var(--gap); height: 10px; transform: translateY(-50%); background: var(--arrow);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 10' preserveAspectRatio='none'><path d='M4 5H30M26 1.8L30 5L26 8.2' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 10' preserveAspectRatio='none'><path d='M4 5H30M26 1.8L30 5L26 8.2' fill='none' stroke='black' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center / 100% 100% no-repeat;
}
@media (max-width: 900px) {
  .arch-flow:not(.mini-flow) { --gap: 26px; grid-template-columns: minmax(0, 1fr); row-gap: var(--gap); }
  .arch-flow:not(.mini-flow) .arch-node:not(:last-child)::after { left: 50%; top: calc(100% + var(--gap) / 2); transform: translate(-50%, -50%) rotate(90deg); }
}
.arch-row.mini { --gap: 16px; }
.arch-row.mini .arch-flow { --gap: 16px; align-items: center; }
.arch-row.mini .arch-node { padding: 0.42rem 0.3rem; text-align: center; border-radius: 6px; display: grid; place-items: center; min-height: 2.5rem; }
.arch-row.mini .arch-node b { font-family: "Inter", system-ui, sans-serif; font-size: 0.63rem; font-weight: 600; line-height: 1.15; letter-spacing: -0.005em; overflow-wrap: normal; word-break: normal; }
.arch-row.mini .arch-node:not(:last-child)::after { height: 8px; }
.pcard:hover .arch-flow { --arrow: var(--accent); }
@media (max-width: 420px) { .arch-row.mini { --gap: 12px; } .arch-row.mini .arch-flow { --gap: 12px; } .arch-row.mini .arch-node b { font-size: 0.58rem; } }