/* Vista "Orquestacion" (fase 4). Hereda variables y componentes de app.css. */
:root {
  --l-req: #dbe6f3;          /* peticiones */
  --l-ctrl: #e3b341;         /* control del arbiter (ambar) */
  --l-espera: #e3b341;
  --c-cli: #8aa0bb;          /* clientes */
  --c-ctrl: #e3b341;         /* pasarela y arbiter */
  --c-gpu: #cdd6e2;          /* hardware */
}
.num { font-variant-numeric: tabular-nums; }

.banner-demo {
  margin: 0 0 .9rem; padding: .45rem .9rem; border-radius: 8px; font-size: .85rem; font-weight: 600;
  background: #e3b3411c; border: 1px solid #e3b34166; color: var(--warn);
}

/* ---- rejilla de la pagina ---- */
.orq { display: grid; gap: .9rem; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start;
  grid-template-areas: "mapa mapa" "cuentas accion" "linea ley" "linea como"; }
.orq-izq, .orq-der { display: contents; }
.a-mapa { grid-area: mapa; } .a-accion { grid-area: accion; } .a-cuentas { grid-area: cuentas; }
.a-linea { grid-area: linea; } .a-ley { grid-area: ley; } .a-como { grid-area: como; }
@media (min-width: 1700px) {
  .orq { grid-template-columns: minmax(0, 1fr) 470px; grid-template-areas: "izq der"; }
  .orq-izq, .orq-der { display: flex; flex-direction: column; gap: .9rem; min-width: 0; }
  .orq-izq { grid-area: izq; } .orq-der { grid-area: der; }
  .orq-izq > .card, .orq-der > .card { grid-area: auto; }
}
@media (max-width: 900px) {
  .orq { grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "mapa" "accion" "cuentas" "linea" "ley" "como"; }
}
.orq .card { overflow: hidden; }
.sub-h { margin: 0 0 .35rem; font-size: .72rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* ---- mapa ---- */
.mapwrap { overflow-x: auto; overflow-y: hidden; }
#mapa { display: block; width: 100%; min-width: 980px; height: auto; font-family: var(--mono); }
.cap-col { font: 600 10px var(--mono); letter-spacing: .14em; fill: var(--muted); }
.nodo .cuerpo { fill: var(--panel-2); stroke: var(--c); stroke-width: 1.5; transition: stroke .3s; }
.nodo .halo { fill: none; stroke: var(--c); stroke-width: 0; opacity: 0; pointer-events: none; }
.nodo .tag { font: 600 9.5px var(--mono); letter-spacing: .1em; fill: var(--c); text-transform: uppercase; }
.nodo .tit { font: 600 13.5px system-ui, -apple-system, "Segoe UI", sans-serif; fill: var(--texto); }
.nodo .ln { font: 400 11px var(--mono); fill: var(--muted); font-variant-numeric: tabular-nums; }
.nodo .ln.fuerte { fill: var(--texto); }
.nodo .ln.warn { fill: var(--warn); } .nodo .ln.ok { fill: var(--ok); } .nodo .ln.crit { fill: var(--crit); }
.nodo .punto { fill: #4b5563; transition: fill .3s; }
.nodo.activo .punto { fill: var(--ok); }
.nodo.espera .punto { fill: var(--warn); }
.nodo.caido .punto { fill: var(--crit); }
.nodo.caido .cuerpo { stroke-dasharray: 5 4; }
.nodo.activo .halo { stroke-width: 3; opacity: .22; }
.nodo.espera .halo { stroke: var(--warn); stroke-width: 4; animation: halo-pulso 1.2s ease-in-out infinite; }
.nodo.llama .halo { stroke: var(--warn); stroke-width: 4; opacity: .5; }
@keyframes halo-pulso { 0%, 100% { opacity: .08; } 50% { opacity: .6; } }

.edge .base { fill: none; stroke: var(--c); stroke-width: 1.4; opacity: .38; transition: opacity .3s, stroke-width .3s, stroke .3s; }
.edge .dots { fill: none; stroke: var(--cp, var(--c)); stroke-width: 4; stroke-linecap: round; stroke-dasharray: .1 13;
  display: none; animation: flujo 1s linear infinite; }
.edge.req { --c: var(--l-req); }
.edge.ctrl { --c: var(--l-ctrl); }
.edge.ctrl .base { stroke-dasharray: 6 5; opacity: .3; stroke-width: 1.3; }
.edge.gpu .base { opacity: .5; }
.edge.activa .base { opacity: .95; }
.edge.activa .dots { display: inline; }
.edge.espera .base { stroke: var(--l-espera); opacity: 1; stroke-width: 2.4; animation: linea-pulso 1.1s ease-in-out infinite; }
.edge.encendida .base { opacity: 1; stroke-width: 3; stroke-dasharray: none; filter: drop-shadow(0 0 4px #e3b341aa); }
.edge.encendida .dots { display: inline; stroke: #fff3c4; animation-duration: .55s; }
.edge.propuesta .base { opacity: .85; stroke-width: 2.2; }
@keyframes flujo { to { stroke-dashoffset: -13.1; } }
@keyframes linea-pulso { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.e-etq { font: 500 10px var(--mono); fill: var(--muted); paint-order: stroke; stroke: var(--panel); stroke-width: 4px; stroke-linejoin: round; }
.e-acc { font: 600 10.5px var(--mono); fill: #ffe39a; paint-order: stroke; stroke: var(--panel); stroke-width: 4px; stroke-linejoin: round;
  opacity: 0; transition: opacity .35s; }
.e-acc.on { opacity: 1; }
.vram-seg { transition: y .5s ease, height .5s ease; }
.vram-res { transition: y .5s ease, height .5s ease; }
.vram-fondo { fill: var(--c-libre); stroke: #ffffff1c; }
.vram-marca { stroke: #ffffff20; stroke-width: 1; }
.vram-eje { font: 400 9px var(--mono); fill: var(--muted); }
.leg-fila .n { font: 400 11px var(--mono); fill: var(--muted); }
.leg-fila .v { font: 600 11px var(--mono); fill: var(--texto); font-variant-numeric: tabular-nums; }
.gpu-total { font: 600 12px var(--mono); fill: var(--texto); font-variant-numeric: tabular-nums; }

/* ---- cuentas atras ---- */
.grupo { margin-bottom: .75rem; }
.grupo:last-child { margin-bottom: 0; }
.grupo > .sub-h { display: flex; align-items: center; gap: .4rem; }
.grupo > .sub-h i { width: .6rem; height: .6rem; border-radius: 2px; flex: none; }
.cuenta { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(48px, .7fr) 5.2rem; align-items: center; gap: .15rem .7rem;
  padding: .32rem 0; border-top: 1px solid #ffffff0a; }
.cuenta:first-of-type { border-top: 0; }
.c-tit { font-size: .84rem; font-weight: 600; overflow-wrap: anywhere; }
.c-sub { font-size: .72rem; color: var(--muted); overflow-wrap: anywhere; }
.c-bar { height: 6px; border-radius: 3px; background: var(--c-libre); overflow: hidden; align-self: center; }
.c-bar b { display: block; height: 100%; width: 0; background: var(--cb, var(--accent)); border-radius: 3px; transition: width .9s linear, background-color .3s; }
.c-bar.sin { visibility: hidden; }
.c-val { text-align: right; font-weight: 650; font-size: 1.02rem; font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.c-val.txt { font: 600 .74rem system-ui, sans-serif; white-space: normal; line-height: 1.2; }
.cuenta.poco .c-val { color: var(--warn); } .cuenta.poco .c-bar b { background: var(--warn); }
.cuenta.ya .c-val { color: var(--crit); } .cuenta.ya .c-bar b { background: var(--crit); }
.cuenta.pausa .c-val { color: var(--muted); }
@media (max-width: 520px) { .cuenta { grid-template-columns: minmax(0, 1fr) 4.6rem; } .c-bar { display: none; } }

/* ---- proxima accion ---- */
.acc-item { padding: .45rem 0; border-top: 1px solid #ffffff0a; }
.acc-item:first-child { border-top: 0; padding-top: 0; }
.acc-tit { display: flex; align-items: center; gap: .45rem; font-weight: 650; font-size: .92rem; }
.acc-tit svg { width: 1rem; height: 1rem; color: var(--warn); flex: none; }
.acc-txt { margin: .2rem 0 .15rem; font-size: .84rem; }
.acc-mot { font: 400 .72rem var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.etq { display: inline-block; padding: .02rem .45rem; border-radius: 4px; font-size: .68rem; font-weight: 600; border: 1px solid var(--borde); background: var(--panel-2); color: var(--muted); }
.etq.dry { color: var(--warn); border-color: #e3b34155; background: #e3b34114; }
.etq.live { color: var(--ok); border-color: #3fb95055; background: #3fb95014; }
.acc-vacio { display: flex; align-items: center; gap: .55rem; padding: .1rem 0 .4rem; font-size: .88rem; }
.acc-vacio .reposo { width: .6rem; height: .6rem; border-radius: 50%; background: var(--ok); flex: none; }
.previsto { margin: .15rem 0 0; padding: 0; list-style: none; }
.previsto li { display: flex; justify-content: space-between; gap: .8rem; padding: .22rem 0; font-size: .8rem; border-top: 1px solid #ffffff0a; }
.previsto li span:first-child { color: var(--muted); }
.previsto li b { font-family: var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- linea de tiempo ---- */
.filtros { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 .6rem; }
.filtro { display: inline-flex; align-items: center; gap: .4rem; padding: .25rem .75rem; border-radius: 999px; font: 600 .78rem system-ui, sans-serif;
  color: var(--muted); background: var(--panel); border: 1px solid var(--borde); cursor: pointer; }
.filtro svg { width: .9rem; height: .9rem; }
.filtro[aria-pressed="true"] { color: var(--texto); background: var(--panel-2); border-color: #79b8ff66; }
.filtro:not([aria-pressed="true"]) svg { opacity: .35; }
.filtro:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.linea { list-style: none; margin: 0; padding: 0; max-height: 34rem; overflow: auto; }
.ev { display: grid; grid-template-columns: 4.3rem 1.3rem minmax(0, 1fr); gap: .1rem .6rem; align-items: start; padding: .34rem 0; border-top: 1px solid #ffffff0a; }
.ev-dia { padding: .5rem 0 .2rem; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); border-top: 1px solid var(--borde); }
.ev-dia:first-child { border-top: 0; padding-top: 0; }
.ev-h { font: 500 .78rem var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; padding-top: .1rem; }
.ev-ic { width: 1.15rem; height: 1.15rem; color: var(--ec, var(--muted)); margin-top: .08rem; }
.ev-t { font-size: .84rem; font-weight: 600; overflow-wrap: anywhere; }
.ev-t .etq { margin-left: .35rem; vertical-align: 1px; }
.ev-s { font: 400 .72rem var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.ev-srv { display: inline-block; width: .55rem; height: .55rem; border-radius: 2px; margin-right: .3rem; vertical-align: 0; }
.ev.nuevo { animation: ev-nuevo 1.6s ease-out; }
@keyframes ev-nuevo { from { background: #79b8ff22; } to { background: transparent; } }


/* ---- leyenda y explicacion ---- */
.ley-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: .9rem 1.2rem; }
.ley-lista { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .4rem; font-size: .8rem; }
.ley-lista li { display: flex; align-items: flex-start; gap: .55rem; }
.ley-lista .sw { width: 2.4rem; height: .55rem; flex: none; margin-top: .3rem; overflow: visible; }
.ley-lista .sw path { fill: none; stroke-width: 2.4; stroke-linecap: round; }
.l-req { stroke: var(--l-req); stroke-dasharray: .1 8; stroke-width: 4 !important; }
.l-ctrl { stroke: var(--l-ctrl); stroke-dasharray: 6 5; }
.l-gpu { stroke: var(--c-llamaswap); stroke-width: 3.4 !important; opacity: .7; }
.l-espera { stroke: var(--l-espera); }
.ley-vram i { width: .8rem; height: .8rem; border-radius: 2px; flex: none; margin-top: .15rem; }
.ley-vram i.rayas { background: repeating-linear-gradient(45deg, var(--c-llamaswap) 0 2px, transparent 2px 5px); outline: 1px solid var(--c-llamaswap); }
.ley-lista .ic { width: 1rem; height: 1rem; flex: none; margin-top: .1rem; }
.como { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .4rem; font-size: .84rem; }
.como li::marker { color: var(--muted); font-weight: 600; }
.como b { color: var(--texto); }

@media (prefers-reduced-motion: reduce) {
  .edge .dots, .edge.espera .base, .nodo.espera .halo { animation: none; }
  .vram-seg, .vram-res, .c-bar b { transition: none; }
  .edge.activa .dots { display: none; }
}

/* Las tarjetas plegables (details.plegable) viven ahora en app.css: las comparten Orquestacion y Estadisticas. */