/* Visor DAG: usa los tokens de style.css. */
.visor { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.visor-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 14px; padding-top: calc(8px + env(safe-area-inset-top, 0px)); border-bottom: 1px solid var(--line); background: var(--surface); }
.visor-bar h1 { font-size: 15px; font-weight: 650; flex: 1; min-width: 12ch; }
.visor-bar label { display: flex; align-items: center; gap: 8px; }
.visor-bar input { width: 14rem; max-width: 100%; }
#state { color: var(--dim); font: 12px/1 var(--mono); }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: 12px; padding: 14px; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
.panel-card { background: var(--raised); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; overflow-x: auto; }
.panel-wide { grid-column: 1 / -1; }
.panel-card h2 { font-size: 12px; font-weight: 620; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); margin-bottom: 10px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--dim); font-weight: 580; }
svg#dag { width: 100%; height: auto; max-height: 340px; }
.edge { stroke: var(--line-strong); stroke-width: 2; }
.node circle { fill: var(--surface); stroke-width: 3; }
.node text { fill: var(--ink); font-size: 12px; text-anchor: middle; }
.on circle { stroke: var(--ok); } .off circle { stroke: var(--bad); } .unknown circle { stroke: var(--warn); }
.status-done, .ok { color: var(--ok); } .status-error, .bad { color: var(--bad); }