/* Agentes (web/agentes.js): la red de expertos (monitor), la guía de manejo, la ficha y la bitácora. Reúsa .jz-bar,
   .jz-filtro, .jz-tag, .srv-h y .dlg-head; aquí solo lo propio. Texto ≥ 14 px, toques ≥ 44 px. Colores por CSSOM (--c). */
#agentes{max-width:1280px;margin:0 auto}
/* Dentro del modal del proyecto (modales-proyecto.js lo adopta): ocupa el ancho y hace scroll como un .home. */
dialog.proy #agentes{flex:1;min-height:0;min-width:0;width:100%;max-width:none;margin:0;overflow-y:auto;padding:18px 28px 40px}
.ag-sub{font-size:.875rem;color:var(--neutro);margin:0}
.ag-psel select{min-width:220px}
.ag-lista{list-style:none;margin:0 0 8px;padding:0;display:grid;gap:8px}
.ag-enc,.ag-prop{background:var(--tarjeta);border-radius:14px;padding:12px 16px;box-shadow:0 1px 2px rgba(var(--sombra-rgb),.06);min-width:0;display:grid;gap:6px;border-left:4px solid var(--linea)}
.ag-enc.entregado{border-left-color:var(--verde)}
.ag-enc.en_curso{border-left-color:var(--cielo-hondo)}
.ag-enc.fallo{border-left-color:var(--err)}
.ag-enc-top{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ag-enc-top time{margin-left:auto;font-size:.875rem;color:var(--neutro);white-space:nowrap}
.ag-est{font-size:.875rem;font-weight:700;padding:2px 10px;border-radius:999px;background:var(--papel);color:var(--tinta-2)}
.ag-est.entregado,.ag-est.p-aplicada{background:var(--ok-suave);color:var(--ok-tinta)}
.ag-est.en_curso,.ag-est.p-aceptada{background:var(--chip-cielo-suave);color:var(--chip-cielo-tinta)}
.ag-est.fallo{background:var(--err-suave);color:var(--err-tinta)}
.ag-est.p-borrador{background:var(--chip-morado-suave);color:var(--chip-morado-tinta)}
.ag-agente{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.ag-txt{margin:0;font-size:1rem;line-height:1.4;color:var(--tinta);overflow-wrap:anywhere}
.ag-pre{white-space:pre-wrap;background:var(--papel);border-radius:10px;padding:8px 12px;font-size:.9375rem}
.ag-res{margin:0;font-size:.9375rem;line-height:1.4;color:var(--tinta-2);overflow-wrap:anywhere}
.ag-commits{margin:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:.875rem;color:var(--neutro)}
.ag-commits code{font-size:.875rem;background:var(--papel);border-radius:8px;padding:1px 8px}
.ag-malbox{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--warn-suave);border:1px solid var(--chip-naranja-filo);border-radius:12px;padding:8px 12px}
.ag-malbox p{margin:0;font-size:.9375rem;line-height:1.4;flex:1 1 260px;min-width:0;overflow-wrap:anywhere}
.ag-malbox b{margin-right:4px}
.ag-malbox .btn,.ag-acts .btn{min-height:44px}
.ag-ya{font-weight:600;color:var(--tinta-2)}
.ag-acts{display:flex;gap:8px;flex-wrap:wrap}
.ag-desc{color:var(--err)}
/* Reglas propuestas (#203): de dónde salió cada una y el contador de borradores en la pestaña Agentes. */
.ag-origen.o-error_repetido{background:var(--warn-suave);color:var(--warn-tinta)}
.ag-origen.o-correccion_dueno{background:var(--chip-morado-suave);color:var(--chip-morado-tinta)}
.ag-rj{grid-template-columns:minmax(0,420px);margin:0 0 8px}
.tl-tabs .ag-cnt{display:inline-grid;place-items:center;min-width:24px;height:24px;margin-left:8px;padding:0 7px;border-radius:999px;font-size:.875rem;font-weight:700;line-height:1;background:var(--chip-morado-suave);color:var(--chip-morado-tinta)}
.tl-tabs [aria-pressed="true"] .ag-cnt{background:var(--sobre-tinta);color:var(--tinta)}
@media (max-width:700px){.ag-rj{grid-template-columns:1fr}}
.ag-mal{background:var(--warn-suave);border:1px solid var(--chip-naranja-filo);border-radius:12px;padding:8px 12px;font-size:.9375rem;line-height:1.45;margin:0 0 8px;overflow-wrap:anywhere}
.ag-dest{border:0;padding:0;margin:0 0 8px}
.ag-dest legend{font-weight:600;padding:0;margin-bottom:4px}
.ag-dest .chk{display:flex;align-items:center;gap:10px;min-height:44px;margin:0}
.ag-dest input{width:22px;height:22px;min-height:0;flex:none}
#agRTexto{font-size:.9375rem;line-height:1.45}
.ag-nota{margin:6px 0 0;font-size:.875rem;color:var(--tinta-2)}
@media (max-width:640px){
  dialog.proy #agentes{padding:12px 16px 40px}
  .ag-psel,.ag-psel select{width:100%}
  .ag-enc-top time{margin-left:0;flex-basis:100%}
}

/* ---------- Monitor neuronal: la red de expertos (encargo #133) ----------
   Estética del template «Neural Monitor» de GetLayers (HUD de terminal, un solo azul, sin calidez) sin su escena
   WebGL: botones en el DOM sobre un <svg> de trazos. Lo único que se mueve son los agentes con un encargo en curso
   (anillo que late: transform/opacity) y su conexión (capa de opacidad); .quieto lo pausa fuera de la vista.
   Todo va en pasos (steps): cada cuadro de una animación continua cuesta componer la pantalla entera; a 60 por segundo
   eran ~2 núcleos en Chromium sin GPU, en pasos ~5 cuadros por segundo (medido el 8-oct, encargo #133). */
:root{--ag-noche:#0B1A2E;--ag-noche-2:#16294A;--ag-crema:#F4F1EA;--ag-cielo:#7DD3FC;
  --ag-resorte:linear(0,.009,.035 2.1%,.141 4.4%,.723 12.9%,.938 16.7%,1.017 19.9%,1.067,1.09 25.6%,1.093 28.1%,1.068 33.4%,1.013 42.6%,.993 48.3%,.991 55.6%,1.001 75.5%,1);
  --agm-fondo:#FBFAF7;--agm-fondo-2:#EAF2FC;--agm-tinta:#0B1A2E;--agm-tinta-2:#3B4A60;--agm-linea:rgba(37,99,235,.16);
  --agm-haz:#1F6AE0;--agm-senal:#0EA5E9;--agm-acento:#0369A1;--agm-rotulo:rgba(255,255,255,.92);
  --agm-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--agm-fondo:#010B1E;--agm-fondo-2:#0A2142;--agm-tinta:#EAF3FF;--agm-tinta-2:#A8D4FF;
  --agm-linea:rgba(112,188,255,.18);--agm-haz:#3B82F6;--agm-senal:#7DD3FC;--agm-acento:#70BCFF;--agm-rotulo:rgba(1,11,30,.88)}}
:root[data-theme="dark"]{--agm-fondo:#010B1E;--agm-fondo-2:#0A2142;--agm-tinta:#EAF3FF;--agm-tinta-2:#A8D4FF;
  --agm-linea:rgba(112,188,255,.18);--agm-haz:#3B82F6;--agm-senal:#7DD3FC;--agm-acento:#70BCFF;--agm-rotulo:rgba(1,11,30,.88)}
.ag-red{margin:0 0 28px}
.ag-red-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.ag-red-head .srv-h{margin:0}
.ag-red-head .libcount{margin:2px 0 0}
.agm{container:agm/inline-size;position:relative;border-radius:24px;overflow:hidden;color:var(--agm-tinta);
  background:radial-gradient(ellipse 65% 60% at 50% 55%,var(--agm-fondo-2) 0%,var(--agm-fondo) 72%);box-shadow:inset 0 0 0 1px var(--agm-linea)}
/* HUD: barra de estado de terminal */
.agm-hud{display:flex;align-items:center;flex-wrap:wrap;gap:8px 16px;padding:10px 18px;border-bottom:1px solid var(--agm-linea);
  font-family:var(--agm-mono);font-size:.875rem;letter-spacing:.1em;text-transform:uppercase;color:var(--agm-tinta-2)}
.agm-marca{margin:0;display:inline-flex;align-items:center;gap:8px;font-weight:700;color:var(--agm-tinta)}
.agm-sub{font-weight:400;color:var(--agm-tinta-2)}
.agm-luz{width:8px;height:8px;border-radius:50%;background:var(--agm-tinta-2);opacity:.45}
.agm-hud.vivo .agm-luz{background:var(--agm-senal);opacity:1;box-shadow:0 0 10px 2px color-mix(in srgb,var(--agm-senal) 55%,transparent);animation:agm-late 1.4s steps(2,jump-none) infinite alternate}
.agm-segs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 0}
.agm-segs li{display:flex;gap:8px;padding:0 14px;border-left:1px solid var(--agm-linea)}
.agm-segs b{font-variant-numeric:tabular-nums;color:var(--agm-tinta)}
.agm-segs li.si b{color:var(--agm-acento)}
.agm-onda{margin-left:auto;display:flex;align-items:flex-end;gap:2px;height:22px;width:120px}
.agm-onda i{flex:1;height:var(--h,6%);border-radius:1px;background:color-mix(in srgb,var(--agm-haz) 40%,transparent)}
.agm-onda i:last-child{background:var(--agm-haz)}
.agm-prompt{color:var(--agm-tinta-2)}
.agm-hud.vivo .agm-cursor{animation:agm-parpadeo 1.2s steps(1) infinite}
/* Mapa: el svg y los botones comparten el mismo cuadro (posiciones en %) */
.agm-mapa{position:relative;aspect-ratio:1000/640;margin:6px 14px 0}
.foco .agm-mapa{aspect-ratio:1000/560}
.agm-lineas{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.agm-orbita{fill:none;stroke:var(--agm-linea);stroke-width:1;vector-effect:non-scaling-stroke}
.agm-orbita.punteada{stroke-dasharray:2 8}
.agm-haz{fill:none;stroke:var(--agm-haz);stroke-opacity:.5;stroke-linecap:round;transition:stroke-opacity .25s}
.agm-haz.tenue{stroke-opacity:.3}
.agm-haz.sin{stroke-dasharray:3 6;stroke-opacity:.2}
.agm-haz.esp{stroke-opacity:.42}
.agm-haz.vivo{stroke:var(--agm-senal);stroke-opacity:.6}
.agm-pulsos{pointer-events:none;will-change:opacity;animation:agm-respira 1.6s steps(3,jump-none) infinite alternate}
.agm-senal{fill:none;stroke:var(--agm-senal);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:6 10;vector-effect:non-scaling-stroke}
.agm-pulsos:empty{display:none}
.hay-foco .agm-haz{stroke-opacity:.07}
.hay-foco .agm-haz.ligado{stroke-opacity:.9}
.agm-capa{position:absolute;inset:0;pointer-events:none}
.agm-capa-t{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.agm-lista{list-style:none;margin:0;padding:0}
.agm-nucleo{position:absolute;left:50%;top:50%;translate:-50% -50%;display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center;pointer-events:none}
.agm-nucleo-o{width:56px;height:56px;border-radius:50%;margin-bottom:6px;
  background:radial-gradient(circle at 35% 30%,var(--blanco) 0%,var(--cielo-claro) 18%,var(--cielo-2) 45%,var(--azul-hondo) 100%);box-shadow:0 0 0 8px color-mix(in srgb,var(--agm-haz) 10%,transparent),0 0 40px 6px color-mix(in srgb,var(--agm-haz) 30%,transparent)}
.agm-nucleo b{font-family:var(--display);font-size:1rem}
.agm-nucleo small{font-size:.875rem;color:var(--agm-tinta-2)}
/* Nodos */
.ag-nodo{position:absolute;left:var(--x,50%);top:var(--y,50%);translate:-50% -50%;pointer-events:auto;background:none;border:0;padding:6px;margin:0;color:inherit;
  display:flex;flex-direction:column;align-items:center;gap:4px;border-radius:20px;min-width:44px;min-height:44px;width:max-content;font:inherit;text-align:center;cursor:pointer;
  animation:agm-entra .5s ease-out both;animation-delay:calc(var(--i,0) * 12ms);transition:opacity .3s,filter .3s}
.ag-nodo:focus-visible{outline:2px solid var(--agm-acento);outline-offset:3px}
.ag-nodo.area{translate:-50% -32px}
.ag-nodo.esp{padding:7px}
.agm-rot{display:flex;flex-direction:column;align-items:center;max-width:170px;line-height:1.25;pointer-events:none}
.agm-rot b{font-family:var(--display);font-weight:700;font-size:.9375rem;letter-spacing:-.01em;white-space:nowrap}
.agm-rot small{font-size:.875rem;color:var(--agm-tinta-2);white-space:nowrap}
.ag-nodo.proy .agm-rot,.ag-nodo.esp .agm-rot{position:absolute;top:100%;left:50%;translate:-50% 0;opacity:0;transition:opacity .2s;z-index:3;
  background:var(--agm-rotulo);border:1px solid var(--agm-linea);padding:3px 10px;border-radius:999px}
.ag-nodo:is(.proy,.esp):is(:hover,:focus-visible,.sel) .agm-rot,.foco .ag-nodo.proy .agm-rot{opacity:1}
/* Figura: esfera con el ícono del oficio, o el símbolo del proyecto */
.ag-fig{position:relative;width:var(--fig,46px);height:var(--fig,46px);flex:none;display:grid;place-items:center;transition:scale .4s var(--ag-resorte)}
.ag-nodo{--fig:46px}
.ag-nodo.area{--fig:52px}
.ag-nodo.esp{--fig:30px}
.foco .ag-nodo.proy{--fig:96px}
.foco .ag-nodo.esp{--fig:44px}
.ag-fig::before{content:"";position:absolute;inset:-30%;border-radius:50%;z-index:-1;opacity:0;transition:opacity .3s;
  background:radial-gradient(circle,color-mix(in srgb,var(--c) 50%,transparent) 0%,transparent 64%)}
.ag-nodo:is(:hover,:focus-visible,.sel) .ag-fig{scale:1.12}
.ag-nodo:is(:hover,:focus-visible,.sel,.ligado) .ag-fig::before{opacity:1}
.ag-esfera{border-radius:50%;color:var(--blanco);
  background:radial-gradient(circle at 32% 26%,color-mix(in srgb,var(--c) 30%,var(--blanco)) 0%,var(--c) 40%,color-mix(in srgb,var(--c) 50%,var(--negro)) 100%);
  box-shadow:inset -5px -8px 14px rgba(7,15,30,.32),inset 4px 5px 10px rgba(255,255,255,.3),0 8px 18px -8px color-mix(in srgb,var(--c) 70%,transparent)}
.ag-ico{width:48%;height:48%}
.ag-proy{padding:0}
.ag-logo{width:66%;height:66%;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(255,255,255,.9)}
.ag-ini{font-family:var(--display);font-size:1.25rem;font-weight:800;color:var(--blanco)}
/* Encargo en curso: un anillo que late (compositor) */
.ag-nodo.activo .ag-fig::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--agm-senal);pointer-events:none;animation:agm-onda 1.8s steps(6) infinite}
.ag-n{position:absolute;right:-2px;top:-2px;z-index:2;min-width:24px;height:24px;padding:0 7px;border-radius:999px;display:grid;place-items:center;
  font-size:.875rem;font-weight:700;color:var(--agm-fondo);background:var(--agm-tinta);pointer-events:none}
.hay-foco .ag-nodo:not(.ligado):not(.sel){opacity:.32;filter:saturate(.4)}
.ag-nodo.apagado{opacity:.18;filter:grayscale(1)}
/* Encargos en curso como líneas de terminal */
.agm-log{list-style:none;margin:0;padding:4px 14px 12px;display:grid}
.agm-log-b{display:flex;align-items:baseline;gap:10px;width:100%;min-height:44px;padding:8px 6px;border:0;border-top:1px solid var(--agm-linea);background:none;
  color:var(--agm-tinta);font:inherit;font-size:.9375rem;text-align:left;cursor:pointer}
.agm-log-b:hover{background:color-mix(in srgb,var(--agm-haz) 8%,transparent)}
.agm-log-b:focus-visible{outline:2px solid var(--agm-acento);outline-offset:-2px}
.agm-log-k{color:var(--agm-acento)}
.agm-log-b b{font-family:var(--agm-mono);font-size:.875rem;white-space:nowrap}
.agm-log-p{font-family:var(--agm-mono);font-size:.875rem;color:var(--agm-tinta-2);white-space:nowrap}
.agm-log-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--agm-tinta-2)}
.ag-leyenda{display:flex;align-items:center;flex-wrap:wrap;gap:8px 18px;list-style:none;margin:10px 4px 0;padding:0;font-size:.875rem;color:var(--tinta-2)}
.ag-leyenda li{display:inline-flex;align-items:center;gap:8px}
.ag-ley-haz{flex:none;width:32px;height:4px;border-radius:4px;background:var(--haz);opacity:.7}
.ag-ley-haz.vivo{background:repeating-linear-gradient(90deg,var(--cielo-3) 0 6px,transparent 6px 10px);opacity:1}
.ag-ley-haz.punteado{background:repeating-linear-gradient(90deg,var(--haz) 0 3px,transparent 3px 8px);opacity:.5}
.ag-ley-n{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:999px;font-weight:700;background:var(--ag-noche);color:var(--ag-crema)}
@keyframes agm-late{from{opacity:.3}to{opacity:1}}
@keyframes agm-parpadeo{50%{opacity:0}}
@keyframes agm-respira{from{opacity:.25}to{opacity:1}}
@keyframes agm-onda{from{transform:scale(.92);opacity:.9}to{transform:scale(1.75);opacity:0}}
@keyframes agm-entra{from{opacity:0}to{opacity:1}}
/* Fuera de la vista o con la pestaña oculta, todo quieto */
.agm.quieto *,.agm.quieto *::before,.agm.quieto *::after{animation-play-state:paused!important}
/* Angosto (celular): lista de áreas en carrusel y rejilla de proyectos, los mismos botones */
@container agm (max-width:759px){
  .agm-hud{padding:10px 14px;gap:6px 12px}
  .agm-segs li.ancho,.agm-onda,.agm-prompt{display:none}
  .agm-segs li:first-child{padding-left:0;border-left:0}
  .agm-mapa,.foco .agm-mapa{aspect-ratio:auto;margin:0;padding:12px 0 6px}
  .agm-lineas,.agm-nucleo{display:none}
  .agm-capa{position:static;pointer-events:auto}
  .agm-capa-t{position:static;width:auto;height:auto;clip-path:none;margin:0 16px 8px;font-size:1rem;font-family:var(--display)}
  .agm-capa+.agm-capa .agm-capa-t{margin-top:14px}
  .agm-areas{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 16px 10px;scroll-padding:0 16px;overscroll-behavior-x:contain}
  .agm-areas li{flex:none;width:148px;scroll-snap-align:start}
  .ag-nodo,.ag-nodo.area{position:relative;left:auto;top:auto;translate:none;width:100%;animation:none}
  .ag-nodo.area{padding:12px 8px;border:1px solid var(--agm-linea);background:color-mix(in srgb,var(--agm-tinta) 4%,transparent)}
  .agm-rot b{white-space:normal}
  .agm-islas{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px;padding:0 16px}
  .ag-isla{display:flex;flex-wrap:wrap;justify-content:center;gap:2px;padding:8px 4px;border-radius:16px;border:1px solid var(--agm-linea);background:color-mix(in srgb,var(--agm-tinta) 4%,transparent)}
  .ag-isla .ag-nodo{width:auto}
  .ag-isla .ag-nodo.proy{flex:1 0 100%}
  .ag-nodo.proy .agm-rot{position:static;translate:none;opacity:1;background:none;border:0;padding:0}
  .ag-nodo.proy .agm-rot b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .ag-nodo.esp .agm-rot{display:none}
  .foco .ag-nodo.proy{--fig:72px}
  .agm-log-p{display:none}
}
@media (prefers-reduced-motion:reduce){
  .agm *,.agm *::before,.agm *::after{animation:none!important;transition:none!important}
  .ag-nodo.activo .ag-fig::after{transform:scale(1.25);opacity:.7}
  .agm-pulsos{opacity:1}
}

/* ---------- Guía «Cómo se maneja la red» ---------- */
.ag-guia{margin:0 0 28px}
.agg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
@media (min-width:1200px){.agg-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.agg-card{background:var(--tarjeta);border-radius:20px;padding:18px;box-shadow:0 1px 2px rgba(var(--sombra-rgb),.06);display:flex;flex-direction:column;gap:10px;min-width:0}
.agg-card h3{font-size:1.125rem}
.agg-card ul{margin:0;padding-left:18px;display:grid;gap:6px;font-size:.9375rem;line-height:1.4;color:var(--tinta-2)}
.agg-fuente{margin:auto 0 0;font-size:.875rem;color:var(--neutro)}
.agg-fuente summary{cursor:pointer;min-height:44px;display:inline-flex;align-items:center;font-weight:600;color:var(--tinta-2)}
.agg-fuente p{margin:0}
.agg-v{height:84px;display:flex;align-items:center;gap:10px;margin:0;padding:0 14px;border-radius:14px;
  background:radial-gradient(ellipse at 30% 40%,var(--ag-noche-2),var(--ag-noche));color:var(--ag-crema);list-style:none}
.agg-mini .ag-fig{--fig:46px;animation:none}
.agg-cuantos b,.agg-vs,.agg-flecha{font-family:var(--display);font-size:1.25rem;color:rgba(244,241,234,.7)}
.agg-cuantos{gap:6px;overflow:hidden}
.agg-tope{margin-left:auto;min-width:0;white-space:nowrap;font-family:var(--display);font-weight:800;font-size:1.125rem;text-align:right;line-height:1.1}
.agg-tope small{display:block;font-family:var(--sans);font-weight:400;font-size:.875rem;color:rgba(244,241,234,.7)}
.agg-cual{justify-content:space-around}
.agg-cual div{display:flex;flex-direction:column;align-items:center;gap:2px}
.agg-cual small{font-size:.875rem;color:rgba(244,241,234,.8)}
.agg-etapas{justify-content:center;gap:0;counter-reset:none}
.agg-etapas li{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-weight:800;background:rgba(125,211,252,.16);border:2px solid var(--ag-cielo)}
.agg-etapas li+li{margin-left:34px;position:relative}
.agg-etapas li+li::before{content:"";position:absolute;right:100%;top:50%;width:34px;height:2px;background:linear-gradient(90deg,var(--ag-cielo),rgba(125,211,252,.3))}
.agg-etapas li:last-child{background:var(--ag-cielo);color:var(--ag-noche)}
.agg-rev{justify-content:center}
.agg-vivo{justify-content:center;gap:18px}
.agg-candado{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--oro);color:var(--ag-noche)}
.agg-candado svg{width:24px;height:24px}
.agg-flujo{justify-content:center;gap:4px;flex-wrap:wrap;height:auto;min-height:84px;padding:10px}
.agg-flujo li{font-size:.875rem;font-weight:600;padding:4px 10px;border-radius:999px;background:rgba(244,241,234,.12)}
.agg-flujo li+li::before{content:"→ ";color:rgba(244,241,234,.6)}
.agg-flujo .m{background:var(--chip-naranja-suave);color:var(--chip-naranja-tinta)}
.agg-flujo .ok{background:var(--ok-suave);color:var(--ok-tinta)}

/* ---------- Ficha del agente (#dlgAgente, patrón .dlg-head) ---------- */
dialog.agf{width:min(880px,calc(100vw - 24px))}
.agf-hero{display:grid;grid-template-columns:200px minmax(0,1fr);gap:20px;align-items:center;border-radius:20px;padding:18px;margin:4px 0 18px;
  background:radial-gradient(ellipse at 18% 40%,color-mix(in srgb,var(--c) 40%,var(--ag-noche-2)) 0%,var(--ag-noche) 70%);color:var(--ag-crema)}
.agf-fig{display:grid;place-items:center;min-height:180px}
.agf-fig .ag-fig{--fig:150px}
.agf-fig .ag-fig::before{opacity:.8}
.agf-fig .ag-ico{width:48%;height:48%}
.agf-h{font-size:1rem;margin:0 0 6px}
.agf-hero .agf-h{color:rgba(244,241,234,.75);font-family:var(--sans);font-weight:600;font-size:.875rem;text-transform:uppercase;letter-spacing:.06em}
.agf-cuando{margin:0 0 10px;font-size:1rem;line-height:1.45}
.agf-chips{display:flex;flex-wrap:wrap;gap:6px}
.agf-chip{font-size:.875rem;padding:4px 10px;border-radius:999px;background:rgba(244,241,234,.12);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.agf-chip.modelo{background:var(--ag-cielo);color:var(--ag-noche);font-family:var(--sans);font-weight:700}
.agf-arch{margin:10px 0 0;font-size:.875rem;color:rgba(244,241,234,.7);overflow-wrap:anywhere}
.agf-arch code{font-size:.875rem}
.agf-dos{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.agf-dos section{background:var(--papel);border-radius:16px;padding:14px 16px}
.agf-si,.agf-no{list-style:none;margin:0;padding:0;display:grid;gap:6px;font-size:.9375rem;line-height:1.4}
.agf-si li,.agf-no li{display:grid;grid-template-columns:22px 1fr;gap:6px}
.agf-si li::before{content:"✓";color:var(--ok);font-weight:800}
.agf-no li::before{content:"✕";color:var(--err);font-weight:800}
#agFCont>section{margin-bottom:16px}
.agf-proys{display:flex;flex-wrap:wrap;gap:8px}
.agf-proy{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:4px 12px;border-radius:999px;background:var(--papel);font-size:.9375rem}
.agf-proy i{width:12px;height:12px;border-radius:50%;background:var(--c)}
.agf-proy small{font-size:.875rem;color:var(--neutro);font-weight:700}
.agf-vacio{margin:0;font-size:.9375rem;color:var(--tinta-2);background:var(--papel);border-radius:12px;padding:10px 14px}
.agf-encs{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.agf-encs>li{background:var(--papel);border-radius:14px;padding:10px 14px;display:grid;gap:4px;border-left:4px solid var(--linea)}
.agf-encs>li.entregado{border-left-color:var(--verde)}.agf-encs>li.fallo{border-left-color:var(--err)}.agf-encs>li.en_curso{border-left-color:var(--cielo-hondo)}
.agf-mal{margin:0;font-size:.9375rem;background:var(--warn-suave);border-radius:10px;padding:6px 10px;overflow-wrap:anywhere}
.agf-ej{margin:0 0 10px;background:var(--ag-noche);color:var(--ag-crema);border-radius:14px;padding:12px 16px;font-size:.9375rem;line-height:1.5}
.agf-ej code{font-size:.9375rem;white-space:pre-wrap;overflow-wrap:anywhere}
.agf-pedir .btn{min-height:44px}
@media (max-width:640px){
  .agf-hero{grid-template-columns:1fr;text-align:center}
  .agf-fig{min-height:130px}.agf-fig .ag-fig{--fig:110px}
  .agf-chips{justify-content:center}
  .agf-dos{grid-template-columns:1fr}
  .ag-ayuda-teclas{display:none}
}
.agf-fig{flex-direction:column;gap:10px}
.agf-vivo{margin:0;font-size:.875rem;font-weight:700;padding:2px 12px;border-radius:999px;background:rgba(125,211,252,.18);color:var(--ag-crema)}
.agf-pers{margin:0 0 12px;font-size:1rem;line-height:1.45;color:var(--ag-crema)}
.agf-pers q{display:block;font-family:var(--display);font-weight:700;font-size:1.125rem;margin-top:4px;quotes:"«" "»"}
/* Hoja modal en celular (ESTANDAR §4c): sube desde abajo con la zona segura; la página no se desplaza detrás. */
html:has(dialog.agf[open]){overflow:hidden}
@media (max-width:700px){
  dialog.agf{position:fixed;inset:auto 0 0 0;margin:0;width:100%;max-width:100%;max-height:calc(100dvh - env(safe-area-inset-top) - 8px);border-radius:22px 22px 0 0}
  dialog.agf .dlg-body{--dlg-pad:18px;max-height:calc(100dvh - env(safe-area-inset-top) - 8px);padding-bottom:calc(var(--dlg-pad) + env(safe-area-inset-bottom))}
  dialog.agf[open]{animation:agf-sube .28s cubic-bezier(.2,0,0,1)}
}
@keyframes agf-sube{from{translate:0 40px;opacity:.4}to{translate:0 0;opacity:1}}
@media (prefers-reduced-motion:reduce){dialog.agf[open]{animation:none}}

/* ---------- Reconocimientos (solo visuales) ---------- */
.agr-med{--m1:#E7B98A;--m2:#B8743E;--m3:#7A4520;display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;flex:none;color:var(--blanco);
  background:radial-gradient(circle at 32% 28%,var(--m1),var(--m2) 55%,var(--m3));box-shadow:inset 0 -2px 4px rgba(0,0,0,.3),inset 0 2px 3px rgba(255,255,255,.45),0 3px 8px rgba(7,15,30,.35)}
.agr-med svg{width:60%;height:60%;filter:drop-shadow(0 1px 1px rgba(0,0,0,.35))}
.agr-med.n-practicante{--m1:#F1F5F9;--m2:#A8B3C2;--m3:#5B6575}
.agr-med.n-experto{--m1:#FDE68A;--m2:#E0A526;--m3:#8A5A0B}
.agr-med.n-maestro{--m1:#E0F2FE;--m2:#7DD3FC;--m3:#0369A1;box-shadow:inset 0 -2px 4px rgba(0,0,0,.3),inset 0 2px 3px rgba(255,255,255,.5),0 0 14px rgba(125,211,252,.7)}
.agr-med.en-nodo{position:absolute;left:calc(50% + var(--fig,46px) * .2);top:calc(var(--fig,46px) * .6);width:22px;height:22px;z-index:2}
.agr-med.grande{width:64px;height:64px}
/* Agente del mes */
.agr-mes{position:relative;display:flex;align-items:center;gap:14px;margin:0 0 12px;padding:6px 16px;min-height:72px;border-radius:22px;overflow:hidden;
  background:linear-gradient(110deg,color-mix(in srgb,var(--c) 22%,var(--tarjeta)),var(--tarjeta) 60%);box-shadow:0 1px 2px rgba(var(--sombra-rgb),.06),inset 0 0 0 1px color-mix(in srgb,var(--c) 30%,transparent)}
.agr-mes.vacio{background:var(--tarjeta)}
.agr-mes-fig{position:relative;flex:none}
.agr-mes-fig .ag-fig{--fig:64px;animation:none}
.agr-mes-fig .ag-esfera{--fig:48px}
.agr-mes-txt{display:flex;align-items:center;flex-wrap:wrap;gap:2px 14px;flex:1;min-width:0}
.agr-mes-k{margin:0;font-size:.875rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-2)}
.agr-mes-n{margin:0;font-family:var(--display);font-weight:800;font-size:1.125rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.agr-nivel{display:inline-flex;align-items:center;gap:6px;font-family:var(--sans);font-size:.9375rem;font-weight:700;padding:2px 10px 2px 3px;border-radius:999px;background:var(--papel)}
.agr-mes-p{margin:0;font-size:.9375rem;color:var(--tinta-2);flex:1 1 220px}
.agr-ver{min-height:44px}
.agr-confeti{position:absolute;left:50%;top:45%;width:0;height:0;pointer-events:none}
.agr-confeti i{position:absolute;width:8px;height:12px;border-radius:2px;background:var(--col);opacity:0;translate:-50% -50%}
.agr-mes.fiesta .agr-confeti i{animation:agr-confeti 1.6s var(--ag-resorte) var(--dl) both}
@keyframes agr-confeti{0%{opacity:0;transform:translate(0,0) rotate(0) scale(.3)}25%{opacity:1}70%{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--r)) scale(1)}100%{opacity:0;transform:translate(var(--x),calc(var(--y) + 26px)) rotate(var(--r)) scale(.9)}}
.agr-mes.fiesta .agr-mes-fig .ag-fig{animation:agr-salto .9s var(--ag-resorte) both}
@keyframes agr-salto{from{scale:.82}to{scale:1}}
/* En la ficha */
.agr-ficha{background:var(--papel);border-radius:16px;padding:14px 16px;margin-bottom:16px}
.agr-cab{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.agr-nom{margin:0;font-family:var(--display);font-weight:800;font-size:1.25rem}
.agr-baja{margin:2px 0 0;font-size:.9375rem;color:var(--err)}
.agr-sig{margin:2px 0 0;font-size:.9375rem;color:var(--tinta-2)}
.agr-nums{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.agr-nums li{font-size:.875rem;background:var(--tarjeta);border-radius:999px;padding:4px 12px}
.agr-nums b{font-family:var(--display);font-size:1rem}
.agr-h4{margin:6px 0;font-size:.9375rem;font-family:var(--display)}
.agr-logros{list-style:none;margin:0 0 8px;padding:0 0 0 14px;border-left:2px solid var(--linea);display:grid;gap:6px}
.agr-logros li{position:relative;display:flex;justify-content:space-between;gap:10px;font-size:.9375rem}
.agr-logros li::before{content:"";position:absolute;left:-20px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--oro);box-shadow:0 0 0 3px var(--papel)}
.agr-logros time{color:var(--neutro);font-size:.875rem;white-space:nowrap}
.agr-nota{margin:0;font-size:.875rem;color:var(--tinta-2)}
@media (max-width:640px){.agr-mes{padding:8px 12px}.agr-mes-p{flex-basis:100%}}
@media (prefers-reduced-motion:reduce){.agr-mes.fiesta .agr-confeti i,.agr-mes.fiesta .agr-mes-fig .ag-fig{animation:none}.agr-confeti{display:none}}