/* ── Página de ai-gateway: variante del cableado (mb-gateway), esquema de la pasarela (mb-gate),
   terminal (mb-term) y tabla de modelos (mb-models) ──
   Colores: solo tokens --mb-* (assets/css/mb-tokens.css); cada raíz lleva .mb-island. */

/* cableado del enrutador: el turno de ejemplo cambia con el destino elegido */
.mb-gw-src { display: none; }
.mb-gateway[data-selected="0"] [data-src="0"], .mb-gateway[data-selected="1"] [data-src="1"], .mb-gateway[data-selected="2"] [data-src="2"], .mb-gateway[data-selected="3"] [data-src="3"] { display: block; animation: mb-pv .35s ease; }
.mb-gateway .mb-dispatch-source { border-left-color: var(--mb-accent); }
.mb-gateway .mb-dispatch-source > div { color: var(--mb-accent); }
.mb-gw-mark { display: flex; flex-direction: column; align-items: center; gap: 4px; font: 700 12px/1 var(--mb-mono); letter-spacing: .02em; color: var(--mb-ink); }
.mb-gw-mark small { font: 500 9.5px/1 var(--mb-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mb-ink-4); }
.mb-gateway .mb-dispatch-tool > span:last-child { text-align: center; font-size: 11px; }
.mb-gateway .mb-dispatch-ev { min-width: 0; }
.mb-gateway .mb-dispatch-ev code { font: inherit; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* esquema: Codex → gate (claves) → LiteLLM (sin claves, sin Internet) → de vuelta por el gate a Azure y Cloudflare */
.mb-gate { margin: 0; padding: 16px 16px 12px; border: 1px solid var(--mb-line); background: var(--mb-surface); box-shadow: 6px 6px 0 var(--mb-shadow-flat); }
.mb-gate svg { display: block; width: 100%; height: auto; font-family: var(--mb-mono); }
.mb-gate-node rect { fill: var(--mb-surface-2); stroke: var(--mb-line-strong); stroke-width: 1; }
.mb-gate-node.is-keys rect { stroke: var(--mb-red); }
.mb-gate-node.is-clean rect { stroke: var(--mb-green); }
.mb-gate-node text { font: 600 12px var(--mb-mono); fill: var(--mb-ink); }
.mb-gate-node text.mb-gate-sub { font: 500 9.5px var(--mb-mono); letter-spacing: .06em; fill: var(--mb-ink-4); }
.mb-gate-node.is-keys .mb-gate-sub { fill: var(--mb-red-soft); }
.mb-gate-node.is-clean .mb-gate-sub { fill: var(--mb-green); }
.mb-gate-wire { fill: none; stroke: var(--mb-line-strong); stroke-width: 1.2; }
.mb-gate-wire.is-blocked { stroke: var(--mb-red); stroke-dasharray: 3 4; stroke-opacity: .7; }
.mb-gate-pkt { fill: none; stroke: var(--mb-accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 5 95; stroke-dashoffset: 100; animation: mb-gw-flow 6s linear infinite; }
.mb-gate-pkt.is-key { stroke: var(--mb-red); animation-delay: -3s; }
@keyframes mb-gw-flow { to { stroke-dashoffset: 0; } }
.mb-gate-zone { fill: rgba(var(--mb-cyan-rgb), .05); stroke: var(--mb-cyan); stroke-width: 1; stroke-dasharray: 4 4; }
.mb-gate-label { font: 500 9.5px var(--mb-mono); letter-spacing: .06em; fill: var(--mb-ink-4); }
.mb-gate-label.is-cyan { fill: var(--mb-cyan); }
.mb-gate-label.is-red { fill: var(--mb-red-soft); }
.mb-gate figcaption { margin-top: 12px; font: 500 11px/1.5 var(--mb-mono); letter-spacing: .08em; text-transform: uppercase; color: var(--mb-ink-4); }
@media (prefers-reduced-motion: reduce) { .mb-gate-pkt { animation: none; opacity: 0; } }

/* terminal */
.mb-term { margin: 0; border: 1px solid var(--mb-line); background: var(--mb-surface); font-family: var(--mb-mono); }
.mb-term-head { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--mb-hairline); font: 500 11px/1.4 var(--mb-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mb-ink-4); }
.mb-term-head span:first-child { display: inline-flex; align-items: center; gap: 8px; color: var(--mb-ink-2); }
.mb-term-head i { width: 7px; height: 7px; border-radius: 50%; background: var(--mb-green); box-shadow: 0 0 8px var(--mb-green); }
.mb-term pre { margin: 0; padding: 14px 16px; background: var(--mb-surface-2); font: 500 12.5px/1.75 var(--mb-mono); color: var(--mb-ink-2); white-space: pre; overflow-x: auto; }
.mb-term .c { color: var(--mb-ink-4); } .mb-term .k { color: var(--mb-ink); font-weight: 700; } .mb-term .g { color: var(--mb-green); } .mb-term .r { color: var(--mb-red-soft); } .mb-term .y { color: var(--mb-cyan); }

/* tabla de modelos */
.mb-models-wrap { border: 1px solid var(--mb-line); background: var(--mb-surface); overflow-x: auto; }
.mb-models { width: 100%; border-collapse: collapse; font: 500 12.5px/1.5 var(--mb-mono); }
.mb-models th { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--mb-line); font: 600 10.5px/1.4 var(--mb-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mb-ink-4); white-space: nowrap; }
.mb-models td { padding: 11px 14px; border-bottom: 1px solid var(--mb-hairline); color: var(--mb-ink-2); vertical-align: top; }
.mb-models tr:last-child td { border-bottom: 0; }
.mb-models td:first-child { color: var(--mb-ink); font-weight: 700; white-space: nowrap; }
.mb-models .tag { display: inline-block; padding: 3px 8px; border: 1px solid var(--mb-line-strong); border-radius: 999px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--mb-ink-3); white-space: nowrap; }
.mb-models .tag.is-on { color: var(--mb-green); border-color: rgba(var(--mb-green-rgb), .5); }
.mb-models .tag.is-off { color: var(--mb-ink-4); }
.mb-models .tag.is-pick { color: var(--mb-accent); border-color: rgba(var(--mb-accent-rgb), .5); }
@media (max-width: 767px) {
  .mb-models { font-size: 11.5px; }
  .mb-models td, .mb-models th { padding: 9px 10px; }
  .mb-term pre { font-size: 11.5px; }
}

/* Panel de decisión de altura constante: los cuatro paneles apilados en la misma celda (visibility en vez
   de display), así el texto más largo de DeepSeek/GLM no lo hace crecer hacia arriba y pisar el cable
   de salida. La escena va a 660px para que el cable (acortado en el include a y=432) termine en el panel. */
.mb-gateway .mb-dispatch-scene { min-height: 660px; }
.mb-gateway .mb-dispatch-preview { display: grid; grid-template-columns: minmax(0, 1fr); }
.mb-gateway .mb-dispatch-pv { display: block; grid-area: 1 / 1; min-width: 0; visibility: hidden; animation: none; }
.mb-gateway[data-selected="0"] [data-pv="0"], .mb-gateway[data-selected="1"] [data-pv="1"], .mb-gateway[data-selected="2"] [data-pv="2"], .mb-gateway[data-selected="3"] [data-pv="3"] { visibility: visible; animation: mb-pv .35s ease; }