:root {
  --bg: #000;
  --panel: #0b0d0c;
  --line: #242a27;
  --text: #fff;
  --muted: #9aa5a0;
  --ok: #3ddc84;
  --warn: #ffb020;
  --bad: #ff4d4d;
  --idle: #5aa0ff;
  --done: #5b6561;
  /* Se lee desde lejos: la tipografía escala con el ancho de la pantalla */
  font-size: clamp(22px, 1.95vw, 56px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { height: 100vh; overflow: hidden; display: flex; flex-direction: column; background: radial-gradient(ellipse at 25% 55%, #07140d 0, #000 55%); }

.top { display: flex; align-items: center; gap: 1.5rem; padding: .8rem 1.5rem; border-bottom: 1px solid var(--line); }
.top h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); margin: 0; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; color: var(--muted); }
.totals { display: flex; gap: 1.6rem; flex: 1; min-width: 0; }
.stat { display: flex; flex-direction: column; line-height: 1.05; }
.stat b { font-size: 1.6rem; font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.stat span { color: var(--muted); font-size: .52rem; white-space: nowrap; text-transform: uppercase; letter-spacing: .1em; }
.stat.waiting.on b { color: var(--bad); }
.stat.working.on b { color: var(--ok); }
.pulse { flex-shrink: 0; display: flex; flex-direction: column; gap: .15rem; align-items: stretch; }
.pulse svg { width: 5.5rem; height: 2.2rem; display: block; }
.pulse span { color: var(--muted); font-size: .55rem; text-transform: uppercase; letter-spacing: .1em; }
.pulse rect { fill: var(--ok); opacity: .85; transition: height .6s, y .6s; }
.conn { font-size: .65rem; color: var(--muted); }
.conn.live::before, .conn.down::before { content: ""; display: inline-block; width: .55rem; height: .55rem; border-radius: 50%; margin-right: .4rem; background: var(--ok); animation: blink 2.4s ease-in-out infinite; }
.conn.down::before { background: var(--bad); }

main { flex: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); gap: 1.5rem; padding: 1rem 1.5rem; align-items: center; min-height: 0; }
.orbit svg { width: 100%; height: auto; display: block; overflow: visible; }

/* mapa */
.branch { fill: none; stroke: #26302b; stroke-width: 2.5; }
.branch.working { stroke: var(--ok); } .branch.waiting { stroke: var(--bad); } .branch.idle { stroke: #2b4264; } .branch.stale { stroke: var(--warn); }
.ring { fill: none; stroke: #1a211e; stroke-width: 1.5; stroke-dasharray: 2 9; }
.link { stroke: #26302b; stroke-width: 2.5; fill: none; }
.link.working { stroke: var(--ok); stroke-dasharray: 7 11; animation: flow 1s linear infinite; }
.link.waiting { stroke: var(--bad); stroke-dasharray: 7 11; animation: flow .45s linear infinite; }
.hub-halo { fill: none; stroke: var(--ok); stroke-width: 2; opacity: .5; transform-box: fill-box; transform-origin: center; animation: breathe 4s ease-in-out infinite; }
.hub { fill: #07100c; stroke: #2e6a4c; stroke-width: 3; }
.sweep { stroke: var(--ok); stroke-width: 2; opacity: .35; transform-box: view-box; transform-origin: 600px 400px; animation: spin 9s linear infinite; }
.dot { fill: var(--ok); opacity: .8; transform-box: view-box; transform-origin: 600px 400px; animation: spin 24s linear infinite; }
.hub-n { fill: var(--text); font-size: 64px; font-weight: 700; text-anchor: middle; font-variant-numeric: tabular-nums; }
.hub-l { fill: var(--muted); font-size: 19px; text-anchor: middle; text-transform: uppercase; letter-spacing: .12em; }
.node { fill: #090c0b; stroke: #36423c; stroke-width: 3; }
.mach.working .node { stroke: var(--ok); }
.mach.waiting .node { stroke: var(--bad); }
.mach-n { fill: var(--text); font-size: 28px; font-weight: 650; text-anchor: middle; }
.mach-c { fill: var(--muted); font-size: 18px; text-anchor: middle; }
.ag { color: var(--done); }
.ag.working { color: var(--ok); } .ag.waiting { color: var(--bad); } .ag.stale { color: var(--warn); } .ag.idle { color: var(--idle); } .ag.done { color: var(--done); opacity: .55; }
.core { fill: currentColor; }
.trk { fill: none; stroke: #1c2420; stroke-width: 6; }
.use { fill: none; stroke: currentColor; stroke-width: 6; stroke-linecap: round; opacity: .9; transition: stroke-dasharray .8s; }
.halo { fill: none; stroke: currentColor; stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ag.working .halo { animation: halo 2s ease-out infinite; }
.ag.waiting .halo { animation: halo .9s ease-out infinite; stroke-width: 4; }
.spin { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 38 120; opacity: 0; transform-box: fill-box; transform-origin: center; }
.ag.working .spin { opacity: .9; animation: spin 1.6s linear infinite; }
.ag-l { fill: var(--text); font-size: 30px; font-weight: 650; paint-order: stroke; stroke: #000; stroke-width: 7px; stroke-linejoin: round; }
.ag-s { fill: currentColor; font-size: 19px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; paint-order: stroke; stroke: #000; stroke-width: 6px; stroke-linejoin: round; }
.ripple { fill: none; stroke: #fff; stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ripple 1.2s ease-out forwards; pointer-events: none; }

/* tarjetas */
.grid { display: flex; flex-direction: column; gap: .8rem; height: 100%; overflow: hidden; align-self: stretch; padding-block: .2rem; }
.card[hidden] { display: none; }
.more { color: var(--muted); font-size: .8rem; text-align: center; letter-spacing: .06em; text-transform: uppercase; }
.empty { color: var(--muted); padding: 1.5rem; border: 1px dashed var(--line); border-radius: 12px; }
.card { background: linear-gradient(90deg, color-mix(in srgb, var(--c, var(--done)) 14%, transparent), var(--panel) 40%); border: 1px solid var(--line); border-left: 8px solid var(--c, var(--done)); border-radius: 12px; padding: .55rem 1rem; display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem; min-width: 0; --c: var(--done); }
.card.working { --c: var(--ok); } .card.waiting { --c: var(--bad); border-color: var(--bad); animation: alert 1.3s ease-in-out infinite; } .card.stale { --c: var(--warn); } .card.idle { --c: var(--idle); }
.card.done { opacity: .5; }
.name { font-weight: 700; font-size: 1.35rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 800; color: var(--c); text-align: right; }
.now { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-height: 1.3em; }
.now.reason { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.since { color: var(--muted); font-size: .8rem; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.meta { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: .75rem; color: var(--muted); font-size: .72rem; font-variant-numeric: tabular-nums; flex-wrap: wrap; }
.bar { grid-column: 1 / -1; height: 4px; background: #131917; border-radius: 2px; overflow: hidden; }
.bar i { display: block; height: 100%; width: 0; background: var(--c); transition: width .8s; }

.log { border-top: 1px solid var(--line); padding: .5rem 1.5rem; }
.log ol { list-style: none; margin: 0; padding: 0; display: flex; gap: 2rem; font-size: .72rem; color: var(--muted); overflow: hidden; white-space: nowrap; }
.log time { color: var(--text); font-variant-numeric: tabular-nums; margin-right: .4rem; }

.login { position: fixed; inset: 0; display: flex; flex-direction: column; gap: .75rem; align-items: center; justify-content: center; background: var(--bg); }
.login[hidden] { display: none; }
.login input { font: inherit; padding: .5rem .75rem; width: min(90vw, 26rem); background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 6px; }
.login button { font: inherit; padding: .5rem 1.25rem; border-radius: 6px; border: 0; background: var(--idle); color: #000; cursor: pointer; }

@keyframes flow { to { stroke-dashoffset: -18; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes halo { 0% { transform: scale(1); opacity: .75; } 100% { transform: scale(2.3); opacity: 0; } }
@keyframes ripple { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
@keyframes breathe { 0%, 100% { transform: scale(1); opacity: .25; } 50% { transform: scale(1.18); opacity: .6; } }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes alert { 0%, 100% { box-shadow: 0 0 0 0 transparent; } 50% { box-shadow: 0 0 22px 2px color-mix(in srgb, var(--bad) 55%, transparent); } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; } }
@media (max-width: 900px) { body { height: auto; overflow: auto; } main { grid-template-columns: 1fr; grid-template-rows: auto; padding: 1rem 16px; } .top { padding: 1rem 16px; flex-wrap: wrap; } .grid { height: auto; } }