/* Aleph — Visión: constelación, galaxia, línea de tiempo, enjambre y evolución */

.app.is-full .main { overflow: hidden; }
.vision { position: relative; height: calc(100vh - var(--chrome-h)); min-height: 420px; overflow: hidden; background: #05080d; }
.vz-stage { position: absolute; inset: 0; }
.vz-stage .stage-canvas { display: block; }
.vz-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 2; }
.vz-label {
  position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 11.5px; color: var(--ink-2);
  text-shadow: 0 1px 3px #000, 0 0 8px #000; will-change: transform; max-width: 240px; overflow: hidden; text-overflow: ellipsis;
}
.vz-label.k-task { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: #d9f8ff; letter-spacing: .02em; }
.vz-label.k-agent { font-family: var(--font-display); font-weight: 600; color: var(--ink); letter-spacing: .02em; }
.vz-label.k-subtask { color: var(--ink-3); }
.vz-label.k-file { font-family: var(--font-mono); font-size: 10.5px; color: #e9c27f; }
.vz-label.is-sel { color: var(--gold); }
.vz-tip {
  position: absolute; left: 0; top: 0; z-index: 6; pointer-events: none; display: grid; gap: 2px; max-width: 280px;
  padding: 8px 10px; border-radius: var(--r-2); background: rgba(9, 14, 22, .95); border: 1px solid var(--line-2);
  font-size: 12px; color: var(--ink-2); box-shadow: 0 10px 24px rgba(0, 0, 0, .5);
}
.vz-tip strong { color: var(--ink); font-family: var(--font-display); font-size: 13px; }

.vz-bar {
  position: absolute; left: 12px; right: 12px; top: 12px; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;
  pointer-events: none;
}
.vz-bar > * { pointer-events: auto; }
.vz-bar .segmented { background: rgba(10, 16, 25, .88); backdrop-filter: blur(8px); }
.vz-bar .segmented button { display: inline-flex; align-items: center; gap: 6px; }
.vz-bar .segmented svg { width: 16px; height: 16px; }
.vz-bar-right { display: flex; gap: 6px; align-items: center; }
.vz-task { max-width: 280px; background-color: rgba(10, 16, 25, .9); }
.vz-bar .btn { background: rgba(10, 16, 25, .88); }

.vz-legend {
  position: absolute; left: 12px; bottom: 12px; z-index: 4; width: 270px; max-height: calc(100% - 90px); overflow-y: auto;
  padding: 12px 14px; border-radius: var(--r-3); background: rgba(8, 13, 21, .9); border: 1px solid var(--line); backdrop-filter: blur(8px);
}
.vz-legend h3 { font-size: var(--fs-14); margin-bottom: 6px; }
.vz-legend h4 { font-size: 11.5px; color: var(--ink-3); font-family: var(--font-ui); font-weight: 600; margin: 10px 0 4px; }
.lg-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12px; color: var(--ink-2); }
.lg-list li { display: flex; align-items: center; gap: 8px; }
.lg-inline { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.lg-edge { --c: var(--cyan); width: 22px; height: 2px; border-radius: 1px; background: var(--c); box-shadow: 0 0 6px var(--c); flex: none; }
.swatch { width: 12px; height: 12px; border-radius: 3px; flex: none; }
.lg-shape { width: 14px; height: 14px; flex: none; position: relative; display: inline-block; }
.lg-shape.s-core { border-radius: 50%; background: radial-gradient(circle, #fff, #9eeaf5 40%, transparent 72%); }
.lg-shape.s-star { border-radius: 50%; border: 1.5px solid var(--cyan); box-shadow: inset 0 0 0 3px rgba(76, 212, 230, .3), 0 0 6px var(--cyan); }
.lg-shape.s-ring { border-radius: 50%; border: 1.5px dashed var(--gold); }
.lg-shape.s-square { width: 11px; height: 11px; background: #e0a650; border-radius: 2px; margin: 0 1.5px; }
.lg-shape.s-diamond { width: 10px; height: 10px; background: #c98500; transform: rotate(45deg); margin: 0 2px; }
.lg-shape.s-triangle { width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 12px solid #199e70; }

.vz-detail {
  position: absolute; right: 12px; top: 64px; bottom: 12px; z-index: 4; width: 340px; display: flex; flex-direction: column;
  border-radius: var(--r-3); background: rgba(8, 13, 21, .95); border: 1px solid var(--line-2); backdrop-filter: blur(8px); overflow: hidden;
}
.vz-detail[hidden] { display: none; }
.vz-detail-head { display: flex; justify-content: space-between; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--line); }
.vz-detail-head h3 { font-size: var(--fs-16); overflow-wrap: anywhere; }
.vz-detail-body { padding: 12px 14px 16px; overflow-y: auto; display: grid; gap: 10px; align-content: start; }
.vz-detail-body h4 { font-size: 12px; color: var(--ink-3); font-family: var(--font-ui); font-weight: 600; margin-top: 4px; }
.vz-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12px; }
.vz-log li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 8px; color: var(--ink-2); overflow-wrap: anywhere; }
.vz-log li > :last-child { grid-column: 1 / -1; }
.vz-log li > span.num:first-child + strong { color: var(--ink); }
.vz-cmd { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; color: var(--gold); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-1); padding: 8px; }

.vz-hud { position: absolute; right: 12px; bottom: 12px; z-index: 3; display: grid; gap: 8px; justify-items: end; max-width: min(380px, calc(100% - 24px)); }
.vz-detail:not([hidden]) ~ .vz-hud { right: 364px; }
.vz-stats { display: flex; gap: 2px; background: rgba(8, 13, 21, .88); border: 1px solid var(--line); border-radius: var(--r-2); padding: 4px; flex-wrap: wrap; }
.vz-stat { display: grid; padding: 4px 10px; text-align: right; }
.vz-stat .num { font-size: var(--fs-16); font-weight: 600; color: var(--ink); }
.vz-stat span:last-child { font-size: 11px; color: var(--ink-3); }
.vz-agents { display: grid; gap: 6px; width: 300px; max-height: 46vh; overflow-y: auto; }
.vz-agents .agent-card { background: rgba(8, 13, 21, .9); }
.vz-fallback { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; padding: var(--gap-6); }

.tl-canvas { position: absolute; inset: 64px 0 0 0; display: block; cursor: grab; }
.tl-canvas:active { cursor: grabbing; }

/* Panel de Darwin (enjambre y evolución) */
.darwin { width: 300px; padding: 12px 14px; border-radius: var(--r-3); background: rgba(8, 13, 21, .92); border: 1px solid var(--line); }
.darwin-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.darwin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 0; }
.darwin-grid dt { font-size: 11px; color: var(--ink-3); }
.darwin-grid dd { margin: 0; font-size: var(--fs-16); font-weight: 600; }
.swarm-controls { width: 300px; padding: 10px 14px; border-radius: var(--r-3); background: rgba(8, 13, 21, .92); border: 1px solid var(--line); }
.swarm-controls summary { cursor: pointer; font-weight: 600; font-size: var(--fs-13); }
.swarm-form { display: grid; gap: 8px; margin-top: 8px; }
.swarm-form .input { padding: 6px 8px; }
.swarm-note { width: 300px; background: rgba(8, 13, 21, .9); border: 1px solid var(--line); border-radius: var(--r-2); padding: 8px 10px; }

/* Evolución */
.evo { position: absolute; inset: 64px 0 0 0; display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.evo-canvas { width: 100%; height: 100%; display: block; }
.evo-chart { padding: 6px 340px 12px 300px; }
.evo-controls { display: grid; gap: 8px; width: 300px; padding: 10px 14px; border-radius: var(--r-3); background: rgba(8, 13, 21, .92); border: 1px solid var(--line); }
.genes { display: grid; gap: 6px; }
.gene { display: grid; grid-template-columns: 130px minmax(0, 1fr) 40px; gap: 8px; align-items: center; font-size: 12px; color: var(--ink-2); }
.gene-bar { height: 6px; border-radius: 999px; background: #13213a; overflow: hidden; }
.gene-fill { display: block; height: 100%; background: linear-gradient(90deg, var(--violet), var(--cyan)); border-radius: 999px; }

@media (max-width: 1100px) {
  .evo-chart { padding: 6px 16px 12px; }
  .vz-legend { width: 240px; }
}
@media (max-width: 720px) {
  .vision { height: calc(100svh - var(--chrome-h)); min-height: 520px; }
  .vz-bar { top: 8px; left: 8px; right: 8px; }
  .vz-bar .segmented { overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .vz-bar .segmented button span, .vz-bar .segmented button { font-size: 12px; padding: 5px 8px; }
  .hide-sm { display: none; }
  .vz-task { max-width: 170px; }
  .vz-legend { left: 8px; right: 8px; width: auto; bottom: 8px; max-height: 34%; }
  .vz-legend[hidden] { display: none; }
  .vz-detail { left: 8px; right: 8px; width: auto; top: auto; bottom: 8px; max-height: 60%; }
  .vz-hud { right: 8px; bottom: auto; top: 100px; }
  .vz-agents, .darwin, .swarm-controls, .swarm-note, .evo-controls { width: min(300px, calc(100vw - 16px)); }
  .vz-agents { max-height: 30vh; }
  .tl-canvas, .evo { inset: 96px 0 0 0; }
}
.vz-label.is-off { visibility: hidden; }
@media (max-width: 720px) {
  .vz-stats { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: calc(100vw - 16px); }
  .vz-stat { padding: 2px 8px; }
  .vz-stat .num { font-size: 14px; }
}
@media (max-width: 720px) {
  .darwin { padding: 8px 12px; }
  .darwin-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 10px; }
  .darwin-grid dd { font-size: 14px; }
  .vz-hud { gap: 6px; }
}