/* Laboratorio IA · Día 4 — banco de flujos (laboratory-flows.html).
   Contrato: assets/DESIGN.md. Sólo piel: la estructura, los datos y el
   comportamiento del simulador no cambian. Color de sesión vía :has() sobre
   la pestaña seleccionada (sin tocar el JS). Loader de cuadrícula, texto shimmer, tiempo
   transcurrido, anillo de estado de tarea, traza expandible y lienzo punteado
   adaptados de Beautiful UI (MIT © 2026 Shane Levine). */

.flows-page { min-height: 100vh; display: flex; flex-direction: column; }
.flows { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* ── Barra superior: título + selector de sesión ──────────────────── */
.flows-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem;
  padding: 1rem clamp(1rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.flows-kicker { font: 700 .6875rem/1.4 var(--font-display); letter-spacing: .2em; text-transform: uppercase; color: var(--sess-ink); }
.flows-h1 { margin-top: .125rem; font: 800 1.75rem/1.1 var(--font-display); letter-spacing: -.02em; color: var(--ink); }

.session-switch {
  display: inline-flex; gap: 0; margin-left: auto;
  padding: 0; border: 1px solid var(--line); background: var(--inset);
  max-width: 100%; overflow-x: auto; scrollbar-width: none;
}
.session-switch::-webkit-scrollbar { display: none; }
.sess-tab {
  display: inline-flex; align-items: baseline; gap: .375rem;
  height: 2.5rem; padding: 0 1rem; border: 0; border-radius: 0;
  background: transparent; color: var(--ink-2);
  font: 600 .875rem/2.5rem var(--font-display); white-space: nowrap; cursor: pointer;
  box-shadow: inset 0 -3px 0 transparent;
  transition: background-color .15s, color .15s, box-shadow .15s;
}
.sess-tab:hover { color: var(--ink); background: var(--hover); }
.sess-tab .sess-code { font-weight: 800; color: var(--tab-ink); }
.sess-tab[data-id="s1"] { --tab-hue: var(--s1-hue); --tab-ink: var(--s1-ink); }
.sess-tab[data-id="s2"] { --tab-hue: var(--s2-hue); --tab-ink: var(--s2-ink); }
.sess-tab[data-id="s3"] { --tab-hue: var(--s3-hue); --tab-ink: var(--s3-ink); }
.sess-tab[data-id="s4"] { --tab-hue: var(--s4-hue); --tab-ink: var(--s4-ink); }
.sess-tab[aria-selected="true"] {
  background: var(--surface); color: var(--ink);
  box-shadow: inset 0 -3px 0 var(--tab-hue);
}

/* ── Banco: escenario (diagrama) + inspector (traza) ─────────────── */
.bench {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(18rem, 26vw, 24rem);
  min-height: 0;
}
.stage { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.stage-head {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem;
  padding: 1rem clamp(1rem, 2.5vw, 1.75rem) .75rem;
}
.stage-title { font: 800 1.375rem/1.2 var(--font-display); letter-spacing: -.015em; color: var(--ink); }
.stage-sub { flex-basis: 100%; order: 3; font: 400 .8125rem/1.5 var(--font-mono); color: var(--ink-3); }
.stage-guide {
  margin-left: auto; display: inline-flex; align-items: center; gap: .375rem;
  font: 700 .8125rem/1.3 var(--font-display); text-decoration: none; color: var(--sess-ink);
}
.stage-guide:hover span { text-decoration: underline; }

/* Lienzo punteado (Beautiful UI #flowchart) */
.canvas {
  flex: 1;
  position: relative;
  display: grid; place-items: center;
  min-height: 18rem;
  margin: 0 clamp(1rem, 2.5vw, 1.75rem);
  padding: 1rem 0;
  border: 1px solid var(--line);
  border-top: 4px solid var(--sess-hue);
  border-radius: var(--r-panel);
  background-color: var(--inset);
  background-image: radial-gradient(var(--line-strong) 1px, transparent 1.25px);
  background-size: 22px 22px;
  background-position: center;
  overflow: auto;
}
.canvas:focus-visible { outline-offset: -2px; }
#flow-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Nodos */
.fnode .nshape { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1; transition: stroke .2s, fill .2s; }
.fnode rect.nshape { rx: 2px; }
.fnode .nseam { fill: none; stroke: var(--line-strong); stroke-width: 1; }
.fnode .nlbl {
  font: 700 12px/1 var(--font-display);
  fill: var(--ink-2); text-anchor: middle; letter-spacing: -.01em;
}
.fnode .nsub { font: 400 10.5px/1 var(--font-mono); fill: var(--ink-3); text-anchor: middle; }
.fnode[data-s="on"] .nshape { stroke: var(--sess-hue); stroke-width: 2.5; fill: color-mix(in srgb, var(--sess-hue) 8%, var(--surface)); }
.fnode[data-s="on"] .nseam { stroke: var(--sess-hue); }
.fnode[data-s="on"] .nlbl, .fnode[data-s="ok"] .nlbl { fill: var(--ink); }
.fnode[data-s="ok"] .nshape { stroke: color-mix(in srgb, var(--green-hue) 70%, var(--line-strong)); }
.fnode[data-s="ok"] .nseam { stroke: color-mix(in srgb, var(--green-hue) 70%, var(--line-strong)); }

/* Marca de estado en la esquina del nodo */
.nmark { opacity: 0; transition: opacity .2s; }
.fnode[data-s="on"] .nmark-run, .fnode[data-s="ok"] .nmark-ok { opacity: 1; }
.nmark-run .ring-bg { fill: var(--surface); stroke: var(--line-strong); stroke-width: 1.5; }
.nmark-run .ring-arc { fill: none; stroke: var(--sess-hue); stroke-width: 1.5; stroke-linecap: round; transform-box: fill-box; transform-origin: center; }
.is-running .fnode[data-s="on"] .ring-arc { animation: spin 1.1s linear infinite; }
.nmark-ok circle { fill: var(--green-hue); }
.nmark-ok path { fill: none; stroke: var(--surface); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Aristas */
.fedge { fill: none; stroke: color-mix(in srgb, var(--ink-3) 60%, var(--line-strong)); stroke-width: 1.25; marker-end: url(#arr); transition: stroke .2s; }
.fedge.info { stroke-dasharray: 4 4; }
.fedge.back { stroke-dasharray: 5 4; }
.fedge.is-taken { stroke: var(--ink-3); stroke-width: 1.5; }
.fedge.is-current { stroke: var(--sess-hue); stroke-width: 2; }
.fedge-flow { fill: none; stroke: var(--sess-hue); stroke-width: 2; stroke-dasharray: 5 9; opacity: 0; pointer-events: none; }
.is-running .fedge-flow.is-current { opacity: 1; animation: dash-travel .9s linear infinite; }
.is-running .fedge.is-current { stroke: color-mix(in srgb, var(--sess-hue) 35%, transparent); }
.mk { fill: context-stroke; }
.elbl { font: 400 10px/1 var(--font-mono); fill: var(--ink-3); text-anchor: middle; }
.elbl.is-taken { fill: var(--ink-2); }
@keyframes dash-travel { to { stroke-dashoffset: -14; } }
@keyframes spin { to { transform: rotate(1turn); } }

/* Leyenda: explica las formas y estados del diagrama */
.legend {
  display: flex; flex-wrap: wrap; gap: .375rem 1.25rem; list-style: none;
  padding: .75rem clamp(1rem, 2.5vw, 1.75rem) 0;
  font-size: .75rem; color: var(--ink-3);
}
.legend li { display: inline-flex; align-items: center; gap: .4rem; }
.legend svg { width: 22px; height: 14px; overflow: visible; }
.legend .lg-shape { fill: var(--surface); stroke: var(--ink-3); stroke-width: 1; }
.legend .lg-on { fill: var(--surface); stroke: var(--sess-hue); stroke-width: 2.5; }
.legend .lg-ok { fill: var(--green-hue); }
.legend .lg-edge { stroke: var(--sess-hue); stroke-width: 2; fill: none; }
.legend .lg-dash { stroke: var(--ink-3); stroke-width: 1.25; stroke-dasharray: 3 3; fill: none; }

/* Controles de reproducción */
.transport {
  display: flex; flex-wrap: wrap; align-items: center; gap: .625rem 1rem;
  padding: .875rem clamp(1rem, 2.5vw, 1.75rem) 1rem;
  background: var(--page);
}
.transport-main { display: flex; align-items: center; gap: .5rem; }
.transport-now { display: none; }
.play-btn { min-width: 7.25rem; }
.speed { display: flex; align-items: center; gap: .5rem; margin: 0; padding: 0; border: 0; }
.speed legend { float: left; margin-right: .5rem; font-size: .8125rem; color: var(--ink-3); padding: 0; }
.seg { display: inline-flex; gap: 2px; padding: 2px; background: var(--inset); border: 1px solid var(--line); }
.seg label { position: relative; }
.seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.seg span {
  display: block; padding: 0 .625rem; height: 1.75rem; line-height: 1.75rem;
  font: 600 .75rem/1.75rem var(--font-display); color: var(--ink-3); cursor: pointer;
}
.seg input:checked + span { background: var(--surface); color: var(--ink); box-shadow: 0 0 0 1px var(--line-strong); }
.seg input:focus-visible + span { outline: 2px solid var(--signal); outline-offset: 1px; }
.kbd-hint { margin-left: auto; font-size: .75rem; color: var(--ink-3); }
.kbd-hint .kbd { --size: 1.25rem; font-size: .6875rem; }

/* ── Inspector ───────────────────────────────────────────────────── */
.inspector {
  display: flex; flex-direction: column; min-height: 0;
  border-left: 1px solid var(--line);
  background: var(--surface);
}
.run-head { padding: 1rem 1.25rem .875rem; background: var(--navy); color: var(--on-navy-2); border-left: 4px solid var(--sess-glow); }
.run-status { display: flex; align-items: center; gap: .625rem; min-height: 1.5rem; }
.run-label { font: 700 .875rem/1.3 var(--font-display); color: #fff; }
.run-time { margin-left: auto; font: 500 .75rem/1 var(--font-mono); color: var(--sess-glow); font-variant-numeric: tabular-nums; }
.run-meta { margin-top: .375rem; font: 400 .75rem/1.4 var(--font-mono); color: var(--on-navy-3); }

/* Loader de cuadrícula 3×3 (Beautiful UI #loading-state, variante Drive) */
.pixels { display: grid; grid-template-columns: repeat(3, 4px); gap: 1.5px; flex: none; }
.pixels i { width: 4px; height: 4px; border-radius: 0; background: var(--sess-glow); opacity: .2; }
.run-status[data-run="running"] .pixels i { animation: pixel-on 650ms ease-in-out infinite; animation-delay: var(--d); }
.run-status[data-run="idle"] .pixels i { opacity: .25; }
@keyframes pixel-on { 0%, 100% { opacity: .15; } 18%, 42% { opacity: 1; } }
.run-done { display: none; width: 15px; height: 15px; color: #00CD5D; }
.run-status[data-run="complete"] .pixels { display: none; }
.run-status[data-run="complete"] .run-done { display: block; }

/* Texto con brillo, sólo mientras corre */
.run-status[data-run="running"] .run-label {
  background-image: linear-gradient(90deg, var(--on-navy-3) 35%, #fff 50%, var(--on-navy-3) 65%);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: shimmer-text 1.4s linear infinite;
}
@keyframes shimmer-text { 0% { background-position: 150%; } 100% { background-position: -50%; } }

/* Filas de traza (Beautiful UI #task-rows + #thinking-state) */
.trace { position: relative; flex: 1; list-style: none; overflow-y: auto; padding: .375rem 0 1rem; scrollbar-width: thin; }
.trow { border-bottom: 1px solid var(--line); }
.trow:last-child { border-bottom: 0; }
.trow-head {
  display: grid; grid-template-columns: 24px minmax(0, auto) minmax(0, 1fr) auto 14px;
  align-items: center; gap: .625rem;
  width: 100%; min-height: 2.75rem; padding: .5rem 1.25rem;
  border: 0; background: transparent; color: var(--ink-2);
  font: inherit; text-align: left; cursor: pointer;
}
.trow-head:hover { background: var(--hover); }
.trow-head:focus-visible { outline-offset: -2px; }
.tbadge { font: 700 .75rem/1.2 var(--font-display); letter-spacing: .04em; color: var(--ink-2); white-space: nowrap; }
.tnode { font-size: .8125rem; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ttime { font: 400 .6875rem/1 var(--font-mono); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tcaret { width: 14px; height: 14px; color: var(--ink-3); transition: transform .3s var(--ease-out-strong); }
.trow.is-open .tcaret { transform: rotate(180deg); }

.tstat { position: relative; display: grid; place-items: center; width: 24px; height: 24px; }
.tstat > svg { position: absolute; inset: 0; width: 24px; height: 24px; overflow: visible; }
.tstat .ring-bg { fill: none; stroke: var(--line); stroke-width: 2; }
.tstat .ring-arc { fill: none; stroke: var(--ink-3); stroke-width: 2; stroke-linecap: round; opacity: 0; transform-origin: 12px 12px; }
.tnum { position: relative; font: 700 .625rem/1 var(--font-display); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tok { display: none; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--green-hue); color: #fff; }
.tok .ic { width: 12px; height: 12px; }

.trow[data-state="current"] .tbadge, .trow[data-state="current"] .tnum { color: var(--ink); }
.trow[data-state="current"] .ring-bg { stroke: var(--sess-hue); }
.trow[data-state="current"] .trow-head, .trow[data-state="running"] .trow-head { box-shadow: inset 4px 0 0 var(--sess-hue); background: var(--inset); }
.trow[data-state="current"] .tnode { color: var(--ink-2); }
.trow[data-state="running"] .ring-arc { opacity: 1; stroke: var(--sess-hue); animation: spin 1.1s linear infinite; }
.trow[data-state="running"] .tbadge, .trow[data-state="running"] .tnum { color: var(--ink); }
.trow[data-state="done"] .tstat > svg, .trow[data-state="done"] .tnum { display: none; }
.trow[data-state="done"] .tok { display: grid; animation: pop-in .3s var(--ease-out-strong) both; }
.trow[data-state="done"] .tbadge { color: var(--ink); }
.trow[data-kind="hitl"] .tbadge { color: var(--amber); }
.trow[data-kind="hitl"] .tstat .ring-bg { stroke: var(--yellow); }
@keyframes pop-in { from { opacity: 0; transform: scale(.85); } to { opacity: 1; transform: scale(1); } }

.trow-body {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .4s var(--ease-out-strong), opacity .3s;
}
.trow.is-open .trow-body { grid-template-rows: 1fr; opacity: 1; }
.trow-inner { overflow: hidden; min-height: 0; }
.tmsg {
  margin: 0 1.25rem .875rem calc(1.25rem + 24px + .625rem);
  padding: .625rem .75rem;
  border-radius: 0;
  background: var(--code-bg);
  border-left: 3px solid var(--sess-glow);
  font-size: .75rem; line-height: 1.6; color: var(--code-ink);
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.tkind { display: block; margin: 0 1.25rem .375rem calc(1.25rem + 24px + .625rem); font: 700 .6875rem/1.4 var(--font-display); letter-spacing: .14em; text-transform: uppercase; color: var(--amber); }

/* ── Responsive ─────────────────────────────────────────────────── */
@media (min-width: 1100px) {
  .bench { flex: none; height: calc(100vh - var(--mast-h) - var(--bar-h) - var(--flows-bar-h, 5rem)); min-height: 34rem; grid-template-rows: minmax(0, 1fr); }
}
@media (max-width: 1099.98px) {
  .bench { grid-template-columns: 1fr; }
  .canvas { flex: none; }
  .inspector { border-left: 0; border-top: 1px solid var(--line); }
  .trace { overflow: visible; }
  .transport {
    position: sticky; bottom: 0; z-index: 20;
    border-top: 1px solid var(--line);
    background: color-mix(in srgb, var(--page) 94%, transparent);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  }
  .stage .transport { order: 5; }
  .transport-now {
    display: block; flex-basis: 100%;
    font: 700 .8125rem/1.3 var(--font-display); color: var(--ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
}
@media (max-width: 640px) {
  .session-switch { margin-left: 0; width: 100%; }
  .sess-tab { flex: 1; justify-content: center; padding: 0 .5rem; }
  .sess-tab .sess-name { display: none; }
  .kbd-hint { display: none; }
  .speed legend { display: none; }
  .transport { gap: .5rem; }
  .play-btn { min-width: 0; }
  .btn-label { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .run-status[data-run="running"] .run-label { animation: none; color: #fff; background: none; }
}

/* Sesión activa del simulador → barra del masthead, lienzo, nodo y arista actuales */
:root:has(.sess-tab[data-id="s1"][aria-selected="true"]) { --sess-hue: var(--s1-hue); --sess-ink: var(--s1-ink); --sess-glow: var(--s1-glow); }
:root:has(.sess-tab[data-id="s2"][aria-selected="true"]) { --sess-hue: var(--s2-hue); --sess-ink: var(--s2-ink); --sess-glow: var(--s2-glow); }
:root:has(.sess-tab[data-id="s3"][aria-selected="true"]) { --sess-hue: var(--s3-hue); --sess-ink: var(--s3-ink); --sess-glow: var(--s3-glow); }
:root:has(.sess-tab[data-id="s4"][aria-selected="true"]) { --sess-hue: var(--s4-hue); --sess-ink: var(--s4-ink); --sess-glow: var(--s4-glow); }
.play-btn { min-height: 2.25rem; }