figure { margin: 0; }
.lienzo-grafo { border: 1px solid var(--borde); background: var(--superficie); }
.lienzo-grafo svg { display: block; width: 100%; height: auto; max-height: none; margin: 0 auto; }
.conexion { stroke: #73716c; stroke-width: 1.6; }
.conexion.camino { stroke: var(--azul); stroke-width: 5; }
.peso rect { fill: var(--superficie); }
.peso text { font: 16px Consolas, 'Courier New', monospace; fill: var(--texto); }
.peso-camino rect { fill: var(--azul); }
.peso-camino text { fill: #fff; font-weight: 700; }
.vertice rect { fill: #fff; stroke: var(--texto); stroke-width: 2; }
.vertice .letra { fill: var(--texto); font: 600 21px Arial, sans-serif; }
.vertice .marca { fill: var(--texto); font: 600 15px Arial, sans-serif; }
.vertice.seleccionado rect { fill: #e8edff; stroke: var(--azul); stroke-width: 3; }
.vertice.en-camino rect { fill: var(--azul); stroke: var(--azul); }
.vertice.en-camino .letra { fill: #fff; }
.vertice.actual rect { fill: var(--acento); stroke: var(--acento); }
.vertice.actual .letra { fill: #fff; }
.vertice rect.contorno { fill: none; stroke-width: 2; }
.vertice .etiqueta { fill: var(--texto); font: 16px Consolas, 'Courier New', monospace; paint-order: stroke; stroke: #fff; stroke-width: 5; stroke-linejoin: bevel; }
.vertice .actualizada { font-weight: 700; text-decoration: underline; }
figcaption { margin: 14px 0 0; color: var(--secundario); font-size: 14px; }
.lista-conexiones ul { columns: 3 210px; padding-left: 20px; margin-bottom: 0; }
.lista-conexiones li { break-inside: avoid; padding-bottom: 8px; }
.controles-grafo { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.controles-grafo button { font-size: 14px; padding: 8px 14px; min-height: 44px; }