/* R60 · hotfix visual DodoNode: restaura el contrato compacto y flujo serpenteante.
   NO modifica app.js, runtime ni R59 discovery. */

/* R58 convirtió la grilla en columnas 1fr y estiró cada nodo. R60 revierte sólo esa
   composición visual y reutiliza las dimensiones certificadas del nodo base. */
.r58-graph-grid{
  display:grid;
  gap:18px 24px;
  align-items:start;
  justify-content:start;
  width:100%;
  grid-auto-flow:row;
}
.r58-node-wrap{
  width:208px;
  min-width:208px;
  max-width:208px;
  border:0;
  border-radius:0;
  padding:0;
  background:transparent;
  box-shadow:none;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}
.r58-node-wrap .dodonode-node{
  width:190px;
  min-width:190px;
  max-width:190px;
  min-height:116px;
}
.r58-node-actions,.r58-outgoing{width:190px;max-width:190px}
.r58-node-actions{margin-top:7px}
.r58-outgoing{margin-top:6px}
.r58-edge-chip{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Desktop ancho: cinco nodos por fila. Cada segunda fila invierte el recorrido para
   mantener la lectura continua en forma de S, sin scroll horizontal infinito. */
@media (min-width:1280px){
  .r58-graph-grid{grid-template-columns:repeat(5,208px)}
  .r58-node-wrap:nth-child(10n+1){grid-column:1}
  .r58-node-wrap:nth-child(10n+2){grid-column:2}
  .r58-node-wrap:nth-child(10n+3){grid-column:3}
  .r58-node-wrap:nth-child(10n+4){grid-column:4}
  .r58-node-wrap:nth-child(10n+5){grid-column:5}
  .r58-node-wrap:nth-child(10n+6){grid-column:5}
  .r58-node-wrap:nth-child(10n+7){grid-column:4}
  .r58-node-wrap:nth-child(10n+8){grid-column:3}
  .r58-node-wrap:nth-child(10n+9){grid-column:2}
  .r58-node-wrap:nth-child(10n+10){grid-column:1}
}

/* Escritorio medio: cuatro por fila, manteniendo el mismo patrón serpenteante. */
@media (min-width:1000px) and (max-width:1279px){
  .r58-graph-grid{grid-template-columns:repeat(4,208px)}
  .r58-node-wrap:nth-child(8n+1){grid-column:1}
  .r58-node-wrap:nth-child(8n+2){grid-column:2}
  .r58-node-wrap:nth-child(8n+3){grid-column:3}
  .r58-node-wrap:nth-child(8n+4){grid-column:4}
  .r58-node-wrap:nth-child(8n+5){grid-column:4}
  .r58-node-wrap:nth-child(8n+6){grid-column:3}
  .r58-node-wrap:nth-child(8n+7){grid-column:2}
  .r58-node-wrap:nth-child(8n+8){grid-column:1}
}

/* Tablet horizontal: tres por fila. */
@media (min-width:720px) and (max-width:999px){
  .r58-graph-grid{grid-template-columns:repeat(3,208px);gap:16px 18px}
  .r58-node-wrap:nth-child(6n+1){grid-column:1}
  .r58-node-wrap:nth-child(6n+2){grid-column:2}
  .r58-node-wrap:nth-child(6n+3){grid-column:3}
  .r58-node-wrap:nth-child(6n+4){grid-column:3}
  .r58-node-wrap:nth-child(6n+5){grid-column:2}
  .r58-node-wrap:nth-child(6n+6){grid-column:1}
}

/* Móvil/ventana estrecha: conserva el nodo compacto; dos por fila cuando caben. */
@media (min-width:470px) and (max-width:719px){
  .r58-graph-grid{grid-template-columns:repeat(2,168px);gap:14px 16px}
  .r58-node-wrap{width:168px;min-width:168px;max-width:168px}
  .r58-node-wrap .dodonode-node{width:160px;min-width:160px;max-width:160px;min-height:108px}
  .r58-node-actions,.r58-outgoing{width:160px;max-width:160px}
  .r58-edge-chip{max-width:160px}
  .r58-node-wrap:nth-child(4n+1){grid-column:1}
  .r58-node-wrap:nth-child(4n+2){grid-column:2}
  .r58-node-wrap:nth-child(4n+3){grid-column:2}
  .r58-node-wrap:nth-child(4n+4){grid-column:1}
}
@media (max-width:469px){
  .r58-graph-grid{grid-template-columns:160px;gap:14px}
  .r58-node-wrap{width:160px;min-width:160px;max-width:160px;grid-column:1!important}
  .r58-node-wrap .dodonode-node{width:160px;min-width:160px;max-width:160px;min-height:108px}
  .r58-node-actions,.r58-outgoing{width:160px;max-width:160px}
  .r58-edge-chip{max-width:160px}
}