/* Dos temas. CLARO por default — el negro puro contra texto casi blanco es el contraste
   máximo posible y a la larga cansa la vista (el dueño: "me hace mal a los ojos"). El oscuro
   queda a un click y se recuerda. Ninguno usa blanco puro ni negro puro: los dos extremos son
   los que molestan. El lenguaje no cambia: hairlines, Plex, radio 0, estado por TRAZO. */
:root{
  --tinta:#f2f3f4;          /* el fondo de la hoja */
  --panel:#ffffff;          /* lo que se apoya encima */
  --texto:#1a1d21;
  --medio:#585e66;
  --tenue:#8b9198;
  --hair:rgba(0,0,0,.13);
  --hair-fuerte:rgba(0,0,0,.26);
  --velo-1:rgba(0,0,0,.035); /* realces: hover */
  --velo-2:rgba(0,0,0,.06);  /* seleccionado */
  --velo-3:rgba(0,0,0,.09);  /* separadores gruesos */
  --halo:rgba(0,0,0,.28);    /* el latido de un nodo cuando le llega un mensaje */
  --campo:#ffffff;
  --ok:#3f7a33;
  --alerta:#8a6410;
  --mal:#a3392b;
}
[data-tema="oscuro"]{
  --tinta:#101215;          /* NO #000: el negro puro es el que produce el halo del texto */
  --panel:#161a1e;
  --texto:#e2e5e8;
  --medio:#98a0a8;
  --tenue:#6a727a;
  --hair:rgba(255,255,255,.16);
  --hair-fuerte:rgba(255,255,255,.30);
  --velo-1:rgba(255,255,255,.045);
  --velo-2:rgba(255,255,255,.075);
  --velo-3:rgba(255,255,255,.11);
  --halo:rgba(255,255,255,.45);
  --campo:#0d1013;
  --ok:#7fa877;
  --alerta:#c0a05c;
  --mal:#c07268;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--tinta);color:var(--texto)}
body{font:400 14px/1.5 "IBM Plex Sans",system-ui,sans-serif;-webkit-font-smoothing:antialiased}

/* ── barra ────────────────────────────────────────────────────────────── */
.barra{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between;
  padding:28px 24px 18px;border-bottom:1px solid var(--hair)}
.volver{display:inline-block;margin:0 0 8px;color:var(--medio);text-decoration:none;
  font:400 11px/1 "IBM Plex Mono",monospace;letter-spacing:.04em}
.volver:hover{color:var(--texto)}
h1{margin:0;font:500 17px/1.2 "IBM Plex Sans",sans-serif;letter-spacing:.01em}
.lema{margin:6px 0 0;max-width:62ch;color:var(--medio);font-size:13px}
.leyenda{display:flex;gap:16px;font:400 11px/1 "IBM Plex Mono",monospace;color:var(--medio)}
.lg{display:flex;align-items:center;gap:7px;white-space:nowrap}
.pt{width:9px;height:9px;border-radius:50%;border:1px solid var(--hair-fuerte)}
.pt.activo{background:var(--texto);border-color:var(--texto)}
.pt.sin_tools,.pt.placeholder{border-style:dashed;border-color:var(--medio)}
.pt.futuro{border-style:dotted;border-color:var(--tenue)}

/* ── marco ────────────────────────────────────────────────────────────── */
main{padding:24px}
.marco{border:1px solid var(--hair);padding:44px 20px 18px}
.lienzo{overflow-x:auto;padding-bottom:8px}
.pie{margin:28px 0 0;text-align:center;font:400 11px/1.6 "IBM Plex Mono",monospace;
  color:var(--tenue);letter-spacing:.14em;text-transform:uppercase}

/* ── árbol ────────────────────────────────────────────────────────────── */
.arbol{min-width:max-content;margin:0 auto;text-align:center}
.arbol>.nodo{margin:0 auto}
.nivel{display:flex;justify-content:center;padding-top:30px;position:relative}
.nivel::before{content:"";position:absolute;top:0;left:50%;width:0;height:30px;border-left:1px dashed var(--hair)}
.rama{position:relative;padding:30px 4px 0;display:flex;flex-direction:column;align-items:center}
.rama::before,.rama::after{content:"";position:absolute;top:0;right:50%;width:50%;height:30px;border-top:1px dashed var(--hair)}
.rama::after{right:auto;left:50%;border-left:1px dashed var(--hair)}
.rama:only-child::before,.rama:only-child::after{border-top:0}
.rama:only-child::after{left:50%}
.rama:first-child::before,.rama:last-child::after{border:0}
.rama:last-child::before{border-right:1px dashed var(--hair)}

/* ── nodo ─────────────────────────────────────────────────────────────── */
.nodo{appearance:none;background:none;border:0;padding:0 6px;cursor:pointer;color:inherit;
  display:flex;flex-direction:column;align-items:center;gap:9px;width:132px;font:inherit}
.nodo:focus-visible{outline:1px solid var(--texto);outline-offset:6px}
.anillo{width:46px;height:46px;border:1px solid var(--hair-fuerte);border-radius:50%;
  display:grid;place-items:center;transition:border-color .15s,background .15s}
.nodo:hover .anillo{border-color:var(--texto);background:var(--velo-2)}
.anillo svg{width:20px;height:20px;stroke:var(--texto);fill:none;stroke-width:1.3}
.nom{font-size:13px;line-height:1.25}
.sub{font:400 10px/1.45 "IBM Plex Mono",monospace;color:var(--tenue);letter-spacing:.02em;max-width:132px}

.nodo.sin_tools .anillo,.nodo.placeholder .anillo{border-style:dashed;border-color:var(--medio)}
.nodo.sin_tools .anillo svg,.nodo.placeholder .anillo svg{stroke:var(--medio)}
.nodo.sin_tools .nom,.nodo.placeholder .nom{color:var(--medio)}
.nodo.futuro{opacity:.52}
.nodo.futuro .anillo{border-style:dotted}
.nodo.dueno .anillo{border-color:var(--texto);background:var(--velo-2)}

/* staff (Auditoría): cuelga al costado del CEO, no del organigrama operativo */
.filaCeo{position:relative;display:flex;justify-content:center}
.staff{position:absolute;left:100%;top:0;margin-left:76px}
.staff::before{content:"";position:absolute;top:23px;right:100%;width:76px;border-top:1px dashed var(--hair)}

/* ── banda de sistemas ────────────────────────────────────────────────── */
.banda{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:40px;padding-top:34px;
  border-top:1px dashed var(--hair)}
.caja{border:1px solid var(--hair);padding:16px 20px;min-width:220px;flex:1 1 220px;max-width:340px;text-align:left}
.caja h3{margin:0 0 4px;font:400 11px/1 "IBM Plex Mono",monospace;letter-spacing:.18em;text-transform:uppercase}
.caja p{margin:0;font-size:12px;color:var(--medio)}
.caja.falta{border-style:dashed;border-color:var(--hair)}
.caja.falta h3{color:var(--medio)}

/* ── panel ────────────────────────────────────────────────────────────── */
.velo{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:8}
.panel{position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);z-index:9;overflow-y:auto;
  background:var(--panel);border-left:1px solid var(--hair);padding:26px 26px 60px}
.cerrar{position:absolute;top:16px;right:18px;background:none;border:0;color:var(--medio);
  font-size:24px;line-height:1;cursor:pointer;padding:4px}
.cerrar:hover{color:var(--texto)}
.panel h2{margin:0 0 6px;font:500 18px/1.25 "IBM Plex Sans",sans-serif;padding-right:32px}
.chip{display:inline-block;font:400 10px/1 "IBM Plex Mono",monospace;letter-spacing:.12em;
  text-transform:uppercase;border:1px solid var(--hair-fuerte);padding:5px 8px;color:var(--medio)}
.chip.sin_tools,.chip.placeholder{border-style:dashed}
.chip.futuro{border-style:dotted;color:var(--tenue)}
.intro{margin:14px 0 0;color:var(--medio);font-size:13px}
.bloque{margin-top:26px}
.bloque h4{margin:0 0 9px;font:400 10px/1 "IBM Plex Mono",monospace;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tenue)}
.bloque ul{margin:0;padding-left:17px}
.bloque li{margin-bottom:6px;font-size:13px}
.bloque li::marker{color:var(--tenue)}
.regla{font-family:"IBM Plex Mono",monospace;font-size:12px;line-height:1.55}
.etiquetas{display:flex;flex-wrap:wrap;gap:6px}
.etiquetas span{font:400 11px/1 "IBM Plex Mono",monospace;border:1px solid var(--hair);padding:5px 7px;color:var(--medio)}
.etiquetas span.fuerte{border-color:var(--texto);color:var(--texto)}
.vacio{color:var(--tenue);font-size:13px;font-style:italic}
.sub-lista{margin-top:26px;border-top:1px solid var(--hair);padding-top:18px}
.sub-item{padding:11px 0;border-bottom:1px solid var(--velo-2)}
.sub-item:last-child{border-bottom:0}
.sub-item b{font-weight:500;font-size:13px}
.sub-item p{margin:3px 0 0;font-size:12px;color:var(--medio)}

.error{margin:24px;border:1px solid var(--hair);padding:20px;font-family:"IBM Plex Mono",monospace;
  font-size:12px;line-height:1.7;white-space:pre-wrap;color:var(--medio)}

@media (max-width:700px){
  .barra{padding:20px 16px 14px}
  main{padding:14px}
  .marco{padding:30px 10px 14px}
  .staff{margin-left:44px}
  .staff::before{width:44px}
  .panel{width:100%;border-left:0}
}

/* subagentes: mismo nodo, más chico (sólo lo usa el staff) */
.nodo.chico{width:104px;gap:7px}
.nodo.chico .anillo{width:34px;height:34px}
.nodo.chico .anillo svg{width:15px;height:15px}
.nodo.chico .nom{font-size:12px}
.nodo.chico .sub{max-width:104px}

/* columna de un head: el nodo arriba, sus subagentes en lista */
.columna{display:flex;flex-direction:column;align-items:center;width:154px}
/* alto fijo del nodo para que todas las listas de subagentes arranquen a la misma altura,
   aunque el nombre del head ocupe una línea o dos */
.columna>.nodo{min-height:124px;justify-content:flex-start}
.subs{position:relative;margin-top:20px;padding-top:16px;width:100%;text-align:left}
.subs::before{content:"";position:absolute;top:0;left:50%;height:16px;border-left:1px dashed var(--hair)}
.subItem{display:flex;align-items:center;gap:8px;width:100%;padding:7px 4px;background:none;border:0;
  border-top:1px solid var(--velo-3);cursor:pointer;text-align:left;
  font:400 11px/1.35 "IBM Plex Mono",monospace;color:var(--medio)}
.subItem:hover{color:var(--texto);background:var(--velo-1)}
.subItem:focus-visible{outline:1px solid var(--texto);outline-offset:2px}
.marca{flex:0 0 auto;width:5px;height:5px;border:1px solid var(--medio);transform:rotate(45deg)}
.subItem.activo .marca{background:var(--medio)}
.subItem.sin_tools{color:var(--tenue)}
.subItem.sin_tools .marca{border-style:dashed;border-color:var(--tenue)}
.subNom{flex:1 1 auto}

/* ── tabs y avisos ────────────────────────────────────────────────────── */
.derecha{display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.tabs{display:flex;border:1px solid var(--hair)}
.tab{appearance:none;background:none;border:0;border-right:1px solid var(--hair);color:var(--medio);
  padding:8px 14px;cursor:pointer;font:400 12px/1 "IBM Plex Mono",monospace;letter-spacing:.04em}
.tab:last-child{border-right:0}
.tab:hover{color:var(--texto)}
.tab.activa{background:var(--velo-3);color:var(--texto)}
.toast{margin:0;padding:10px 24px;border-bottom:1px solid var(--hair);background:var(--velo-2);
  font:400 12px/1.4 "IBM Plex Mono",monospace;color:var(--texto)}

/* ── contador de tareas en el nodo ───────────────────────────────────── */
.chapas{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin-top:2px}
.chapa{font:400 9px/1 "IBM Plex Mono",monospace;letter-spacing:.04em;border:1px solid var(--hair);
  padding:4px 5px;color:var(--medio);white-space:nowrap}
.chapa.urge{border-color:var(--texto);color:var(--texto)}
.chapa.mini{padding:3px 5px}
.tareaMini{display:flex;gap:8px;justify-content:space-between;align-items:baseline;
  padding:7px 0;border-top:1px solid var(--velo-3);font-size:12px}
.tareaMini .tp{flex:1}
.tareaMini .te{font:400 10px/1 "IBM Plex Mono",monospace;color:var(--tenue);white-space:nowrap}
.tareaMini.alta .tp{color:var(--texto)}
.linkish{background:none;border:0;color:var(--medio);cursor:pointer;padding:8px 0 0;
  font:400 11px/1 "IBM Plex Mono",monospace}
.linkish:hover{color:var(--texto)}

/* ── mesa del CEO ─────────────────────────────────────────────────────── */
#mesa{max-width:1000px;margin:0 auto;display:flex;flex-direction:column;gap:20px}
.bloqueMesa{border:1px solid var(--hair);padding:20px}
.bloqueMesa.apagado{border-style:dashed;opacity:.75}
.bloqueMesa h2{margin:0 0 4px;font:500 14px/1.2 "IBM Plex Sans",sans-serif}
.bloqueMesa h3{margin:18px 0 8px;font:400 10px/1 "IBM Plex Mono",monospace;letter-spacing:.16em;
  text-transform:uppercase;color:var(--medio)}
.ayuda{margin:0 0 14px;color:var(--tenue);font-size:12px;max-width:70ch}
.grupo{margin-top:6px}

textarea,input[type=text],input:not([type]),select,input[type=date]{
  background:var(--campo);border:1px solid var(--hair);color:var(--texto);padding:8px 10px;
  font:400 13px/1.45 "IBM Plex Sans",sans-serif;border-radius:0;width:100%}
textarea{resize:vertical;font-family:"IBM Plex Mono",monospace;font-size:12px}
input:focus,textarea:focus,select:focus{outline:1px solid var(--hair-fuerte);outline-offset:-1px}
select,input[type=date]{width:auto;min-width:150px;font-family:"IBM Plex Mono",monospace;font-size:12px}

.acciones{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.acciones button,.tacc button,.devolver button{appearance:none;background:none;cursor:pointer;
  border:1px solid var(--hair);color:var(--medio);padding:7px 12px;
  font:400 11px/1 "IBM Plex Mono",monospace;letter-spacing:.04em}
.acciones button:hover,.tacc button:hover,.devolver button:hover{border-color:var(--texto);color:var(--texto)}
button.primario{border-color:var(--texto);color:var(--texto)}
button.borrar{border-color:transparent;color:var(--tenue)}

.preview{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.pfila{display:flex;flex-wrap:wrap;gap:8px;align-items:center;border-left:1px solid var(--hair);padding-left:12px}
.pfila input{flex:1 1 260px;width:auto}
.pfila .aviso{flex-basis:100%;font:400 11px/1.4 "IBM Plex Mono",monospace;color:var(--medio)}

.tarea{border-top:1px solid var(--velo-3);padding:14px 0}
.tarea:last-child{padding-bottom:0}
.th{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.th .quien{font:400 10px/1.4 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tenue);min-width:120px}
.th .tit{flex:1 1 300px;font-size:13px}
.th .cuando{font:500 11px/1.4 "IBM Plex Mono",monospace;color:var(--medio);min-width:60px}
.tarea .det{margin:6px 0 0 0;padding-left:128px;color:var(--medio);font-size:12px}
.tarea .res{margin:8px 0 0;padding:10px 12px;border-left:1px solid var(--hair-fuerte);
  background:var(--velo-1);font:400 12px/1.5 "IBM Plex Mono",monospace;color:var(--texto)}
.tacc{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px;padding-left:128px}
.devolver{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;width:100%}
.devolver textarea{flex:1 1 260px}
.tarea.levantar{border-left:1px solid var(--texto);padding-left:14px}
.tarea.trabada .res{border-left-style:dashed}
.tarea.vencida .quien::after{content:" · vencida";color:var(--texto)}
.aviso{font:400 11px/1.4 "IBM Plex Mono",monospace;color:var(--medio);margin:0 0 8px}

.regla-fila{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;padding:9px 0;
  border-top:1px solid var(--velo-2);font-size:12px}
.regla-fila .tit{flex:1 1 220px}
.regla-fila .cuandoR{flex:1 1 260px;color:var(--medio);font-size:12px}
.regla-fila .falta{font:400 10px/1.4 "IBM Plex Mono",monospace;color:var(--tenue)}

@media (max-width:700px){
  .derecha{align-items:flex-start;width:100%}
  .tarea .det,.tacc{padding-left:0}
  .th .quien{min-width:0}
}

/* ── ritmo y autonomía ────────────────────────────────────────────────── */
.chip.modo-pregunta{border-color:var(--texto);color:var(--texto)}
.chip.modo-solo{border-style:dotted}
.notaRitmo{margin:10px 0 0;font-size:12px;color:var(--tenue);line-height:1.5}
.ritmoSub{margin:4px 0 0 !important;font:400 11px/1.4 "IBM Plex Mono",monospace;color:var(--tenue) !important}
.escalera{margin-top:8px;border-left:1px solid var(--hair);padding-left:12px}
.paso{display:flex;flex-wrap:wrap;gap:8px;padding:5px 0;font-size:12px}
.paso .rango{font:400 10px/1.5 "IBM Plex Mono",monospace;color:var(--tenue);min-width:110px}
.paso .que{flex:1 1 200px;color:var(--medio)}
.paso.nada .que{color:var(--tenue);font-style:italic}
.paso.preguntar .que{color:var(--texto)}

/* ═══════════════════════════════════════════════════════════════════════════
   EL LIENZO — canvas punteado, nodos arrastrables, pan y zoom.
   Estructura calcada del editor de flujos que pidió el dueño (fondo de puntos,
   tarjeta con pastilla arriba, conector curvo); paleta y tipografía, las de la casa.
   ═══════════════════════════════════════════════════════════════════════════ */
.lienzoMarco{position:relative;border:1px solid var(--hair);background:var(--panel)}
.canvas{
  position:relative;height:min(74vh,720px);overflow:hidden;touch-action:none;cursor:grab;
  background-image:radial-gradient(var(--hair) 1px,transparent 1.25px);
  background-size:22px 22px;outline:none;
}
.canvas.agarrando{cursor:grabbing}
.canvas:focus-visible{box-shadow:inset 0 0 0 1px var(--texto)}
.mundo{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}
.aristas{position:absolute;top:0;left:0;overflow:visible;pointer-events:none}
.arista{stroke:var(--hair-fuerte);transition:stroke .18s,stroke-width .18s}
.arista.punteada{stroke-dasharray:3 4}
.arista.viva{stroke:var(--texto);stroke-width:1.9}

/* ── nodo ── */
.nodoL{position:absolute;transform:translateX(-50%);display:flex;flex-direction:column;
  align-items:flex-start;gap:6px;touch-action:none;transition:opacity .18s}
.nodoL.moviendo{z-index:5}
.nodoL.apagado{opacity:.32}
.nodoL .pill{display:inline-flex;align-items:center;height:19px;padding:0 7px;
  font:400 10.5px/1 "IBM Plex Mono",monospace;letter-spacing:.06em;text-transform:uppercase;
  color:var(--medio);border:1px solid var(--hair)}
.nodoL .tarjeta{width:100%;border:1px solid var(--hair-fuerte);background:var(--panel);
  padding:10px 11px;cursor:pointer;transition:border-color .15s,background .15s}
.nodoL .tarjeta:hover{border-color:var(--texto);background:var(--velo-1)}
.nodoL.sin_tools .tarjeta{border-style:dashed;border-color:var(--medio)}
.nodoL.futuro .tarjeta{border-style:dotted;opacity:.6}
.nodoL.dueno .tarjeta{background:var(--velo-2);border-color:var(--texto)}
.nodoL.vivo .tarjeta{border-color:var(--texto);box-shadow:0 0 0 1px var(--texto)}
.nodoL.late .tarjeta{animation:latido .6s ease-out}
@keyframes latido{0%{box-shadow:0 0 0 0 var(--halo)}100%{box-shadow:0 0 0 10px transparent}}
.filaNodo{display:flex;align-items:center;gap:9px}
.anilloL{width:30px;height:30px;flex:none;border:1px solid var(--hair-fuerte);border-radius:50%;
  display:grid;place-items:center}
.anilloL svg{width:15px;height:15px;stroke:var(--texto);fill:none;stroke-width:1.3}
.nodoL.sin_tools .anilloL{border-style:dashed}
.nodoL.sin_tools .anilloL svg{stroke:var(--medio)}
.textoNodo{min-width:0;display:flex;flex-direction:column;gap:2px}
.nomL{font:500 12.5px/1.25 "IBM Plex Sans",sans-serif}
.subL{font:400 10px/1.3 "IBM Plex Mono",monospace;color:var(--tenue)}
.nodoL.esSub .tarjeta{padding:7px 9px}
.nodoL.esSub .anilloL{width:22px;height:22px}
.nodoL.esSub .anilloL svg{width:11px;height:11px}
.nodoL.esSub .nomL{font-size:11.5px}
.chapasL{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}

/* ── controles de zoom ── */
.zoomCtrl{position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:1px;
  background:var(--hair);border:1px solid var(--hair)}
.zBtn{appearance:none;border:0;background:var(--panel);color:var(--texto);cursor:pointer;
  width:30px;height:28px;font:400 15px/1 "IBM Plex Sans",sans-serif}
.zBtn:hover{background:var(--velo-3)}
.zNivel{background:var(--panel);color:var(--medio);padding:0 9px;height:28px;display:grid;
  place-items:center;font:400 11px/1 "IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}

/* ═══════════════════════════════════════════════════════════════════════════
   FLUJOS — la conversación entre agentes.
   ═══════════════════════════════════════════════════════════════════════════ */
.demoBarra{border:1px solid var(--hair);background:var(--panel);padding:16px}
.demoAviso{margin:0 0 12px;font:400 11px/1.6 "IBM Plex Mono",monospace;color:var(--medio);letter-spacing:.02em}
.demoAviso b{color:var(--texto);font-weight:500}
.demoFila{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
#demoTexto{flex:1 1 320px;min-width:0;background:var(--campo);color:var(--texto);
  border:1px solid var(--hair-fuerte);padding:10px 12px;font:400 13.5px/1.5 "IBM Plex Sans",sans-serif;resize:vertical}
#demoTexto:focus{outline:none;border-color:var(--texto)}
.demoBarra select{background:var(--campo);color:var(--texto);border:1px solid var(--hair);
  padding:0 8px;height:38px;font:400 12px/1 "IBM Plex Mono",monospace}
#demoEstado{margin:10px 0 0;font:400 11.5px/1.6 "IBM Plex Mono",monospace;color:var(--medio);min-height:1.6em}

.flujosCuerpo{display:grid;grid-template-columns:minmax(240px,300px) 1fr;gap:1px;
  background:var(--hair);border:1px solid var(--hair);margin-top:16px}
#turnosLista{background:var(--panel);max-height:70vh;overflow-y:auto;display:flex;flex-direction:column}
.turnoItem{appearance:none;border:0;border-bottom:1px solid var(--hair);background:none;color:inherit;
  text-align:left;cursor:pointer;padding:12px 14px;display:flex;flex-direction:column;gap:6px;font:inherit}
.turnoItem:hover{background:var(--velo-1)}
.turnoItem.activo{background:var(--velo-2);box-shadow:inset 2px 0 0 var(--texto)}
.turnoTexto{font-size:12.5px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.turnoMeta{display:flex;flex-wrap:wrap;gap:8px;font:400 10px/1.4 "IBM Plex Mono",monospace;color:var(--tenue);font-style:normal}
.turnoMeta i{font-style:normal}
.marcaEsc{color:var(--ok)}
.marcaNeg{color:var(--mal)}

#turnoCuerpo{background:var(--panel);padding:18px;max-height:70vh;overflow-y:auto}
.turnoCab{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin-bottom:14px}
.turnoCab h3{margin:0;font:500 14px/1.2 "IBM Plex Sans",sans-serif}
.turnoAcciones{display:flex;gap:8px;flex-wrap:wrap}
.ruta{display:flex;flex-wrap:wrap;align-items:center;gap:7px;padding:12px;border:1px solid var(--hair);margin-bottom:16px}
.rutaNodo{font:400 11.5px/1 "IBM Plex Mono",monospace;border:1px solid var(--hair);padding:5px 8px;white-space:nowrap}
.rutaFlecha{color:var(--tenue);font-size:12px}

.renglones{display:flex;flex-direction:column;gap:1px;background:var(--hair);border:1px solid var(--hair)}
.renglon{background:var(--panel);padding:12px 14px;display:flex;flex-direction:column;gap:7px;
  border-left:2px solid transparent}
.renglon.tPedido{border-left-color:var(--tenue)}
.renglon.tRespuesta{border-left-color:var(--hair-fuerte)}
.renglon.tDecision{border-left-color:var(--alerta)}
.renglon.tEscritura{border-left-color:var(--ok)}
.renglon.tNegada{border-left-color:var(--mal)}
.renglon.tAviso{border-left-color:transparent;opacity:.78}
.renglonIzq{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
/* ⚠ `.quien` ya existía en la Mesa (mesa.js). Esta regla va SCOPEADA al renglón del bus o le
   pisa el estilo a las tareas — dos vistas distintas con el mismo nombre de clase. */
.renglon .quien{font:500 12px/1.3 "IBM Plex Sans",sans-serif}
.renglonIzq .tipo{font:400 10px/1 "IBM Plex Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--tenue)}
.accionChip,.simChip,.entChip{font:400 10px/1 "IBM Plex Mono",monospace;padding:3px 6px;border:1px solid var(--hair);color:var(--medio)}
.simChip{border-color:var(--ok);color:var(--ok)}
.entChip{border-style:dashed}
.cuerpoMsg{margin:0;font-size:13px;line-height:1.55;white-space:pre-wrap;color:var(--texto);max-width:78ch}
.renglonPie{display:flex;flex-wrap:wrap;gap:10px;font:400 10px/1.4 "IBM Plex Mono",monospace;color:var(--tenue)}
.renglonPie i{font-style:normal}
.vacio{margin:0;padding:18px;color:var(--tenue);font-size:13px}

@media (max-width:760px){
  .flujosCuerpo{grid-template-columns:1fr}
  #turnosLista{max-height:240px}
  .canvas{height:60vh}
}
.salto{display:inline-flex;align-items:center;gap:6px;padding:4px 7px;border:1px solid var(--hair)}
.salto .rutaNodo{border:0;padding:0}
.codigoEmpresa{display:inline-block;margin-left:8px;padding:2px 6px;border:1px solid var(--hair-fuerte);
  font:400 10.5px/1.4 "IBM Plex Mono",monospace;letter-spacing:.1em;color:var(--medio);vertical-align:middle}

/* el interruptor de tema, al lado de la leyenda */
.tema{appearance:none;background:none;border:1px solid var(--hair);color:var(--medio);cursor:pointer;
  padding:4px 9px;font:400 10.5px/1.4 "IBM Plex Mono",monospace;letter-spacing:.08em;white-space:nowrap}
.tema:hover{color:var(--texto);border-color:var(--hair-fuerte)}

/* ── la cola: qué se está procesando ───────────────────────────────────── */
.cola{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px;padding-top:12px;border-top:1px solid var(--hair)}
.colaChip{font:400 10.5px/1.5 "IBM Plex Mono",monospace;padding:3px 8px;border:1px solid var(--hair);color:var(--medio)}
.colaChip.on{border-color:var(--ok);color:var(--ok)}
.colaChip.off{border-style:dashed}
.colaChip.corre{border-color:var(--alerta);color:var(--alerta)}
.colaChip.espera{border-color:var(--hair-fuerte);color:var(--texto)}

/* ── el resumen del turno ──────────────────────────────────────────────── */
.resumen{display:flex;flex-direction:column;gap:1px;background:var(--hair);border:1px solid var(--hair);margin-bottom:16px}
.resumen .paso{background:var(--panel);padding:11px 14px;border-left:2px solid transparent}
.resumen .paso.pPide{border-left-color:var(--texto)}
.resumen .paso.pRuta{border-left-color:var(--alerta)}
.resumen .paso.pArea{border-left-color:var(--hair-fuerte)}
.resumen .paso.pArea.conNegada{border-left-color:var(--mal)}
.resumen .paso.pFinal{border-left-color:var(--ok)}
.pasoCab{display:flex;flex-wrap:wrap;gap:8px;align-items:baseline}
.pasoQuien{font:500 12.5px/1.3 "IBM Plex Sans",sans-serif;min-width:96px}
.pasoQue{font:400 11px/1.4 "IBM Plex Mono",monospace;color:var(--medio)}
.pasoMeta{margin-left:auto;font:400 10px/1.4 "IBM Plex Mono",monospace;color:var(--tenue);white-space:nowrap}
.pasoDet{margin:5px 0 0;font-size:12.5px;line-height:1.5;color:var(--medio);white-space:pre-wrap;
  max-height:5.5em;overflow:hidden;max-width:80ch}
.resumen .paso.pFinal .pasoDet{color:var(--texto);max-height:none}
details.detalle{margin-top:4px}
details.detalle>summary{cursor:pointer;font:400 11px/1.6 "IBM Plex Mono",monospace;color:var(--tenue);
  padding:8px 0;letter-spacing:.04em;list-style:none}
details.detalle>summary::-webkit-details-marker{display:none}
details.detalle>summary::before{content:"▸ "}
details.detalle[open]>summary::before{content:"▾ "}
details.detalle>summary:hover{color:var(--texto)}

/* ── qué es cada vista, dicho arriba de todo ───────────────────────────── */
.queEs{margin:0 0 18px;font-size:12.5px;color:var(--medio);max-width:78ch}
.queEs b{color:var(--texto);font-weight:500}
.mesaLimpia{margin:0;padding:26px;border:1px dashed var(--hair);color:var(--medio);text-align:center;font-size:13px}
details.plegadoMesa{margin-top:20px;border-top:1px solid var(--hair);padding-top:6px}
details.plegadoMesa>summary,details.demoBarra>summary{cursor:pointer;list-style:none;padding:10px 0;
  font:400 11px/1.5 "IBM Plex Mono",monospace;letter-spacing:.06em;color:var(--tenue)}
details.plegadoMesa>summary::-webkit-details-marker,details.demoBarra>summary::-webkit-details-marker{display:none}
details.plegadoMesa>summary::before,details.demoBarra>summary::before{content:"▸ "}
details.plegadoMesa[open]>summary::before,details.demoBarra[open]>summary::before{content:"▾ "}
details.plegadoMesa>summary:hover,details.demoBarra>summary:hover{color:var(--texto)}
details.demoBarra{padding:0 16px 4px}
details.demoBarra[open]{padding-bottom:16px}

/* ── trabas: sólo aparece cuando hay algo ──────────────────────────────── */
.trabas{display:flex;flex-direction:column;gap:1px;background:var(--hair);
  border:1px solid var(--alerta);margin-bottom:18px}
.trabas.grave{border-color:var(--mal)}
.traba{background:var(--panel);padding:14px 16px}
.traba.grave{border-left:3px solid var(--mal)}
.trabaCab{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.trabaQue{flex:1 1 340px;min-width:0;font:500 13px/1.45 "IBM Plex Sans",sans-serif}
.traba.grave .trabaQue{color:var(--mal)}
.trabaPorque{margin:6px 0 0;font:400 11.5px/1.55 "IBM Plex Mono",monospace;color:var(--tenue);max-width:80ch}
/* Las posiciones del lienzo se anclan al CENTRO de la tarjeta, no a su borde de arriba: en un
   reparto radial la geometría se calcula desde el centro, y anclarla arriba la corría por la
   altura de cada tarjeta — que además varía (la pastilla, los contadores). */
.nodoL{transform:translate(-50%,-50%)}

/* selector de reparto: es del lienzo, no de la app, así que vive adentro del marco */
.reparto{position:absolute;left:12px;bottom:12px;display:flex;gap:1px;background:var(--hair);border:1px solid var(--hair)}
.rBtn{appearance:none;border:0;background:var(--panel);color:var(--medio);cursor:pointer;
  padding:0 11px;height:28px;font:400 11px/1 "IBM Plex Mono",monospace;letter-spacing:.06em}
.rBtn:hover{color:var(--texto)}
.rBtn.activo{background:var(--velo-3);color:var(--texto)}

/* ── consumo ───────────────────────────────────────────────────────────── */
details.uso{border:1px solid var(--hair);margin-bottom:16px}
details.uso>summary{cursor:pointer;list-style:none;padding:11px 14px;
  font:400 11px/1.5 "IBM Plex Mono",monospace;letter-spacing:.06em;color:var(--medio)}
details.uso>summary::-webkit-details-marker{display:none}
details.uso>summary::before{content:"▸ "}
details.uso[open]>summary::before{content:"▾ "}
details.uso>summary:hover{color:var(--texto)}
#usoCuerpo{padding:0 14px 14px}
.usoTotal{margin:0 0 4px;font:400 12.5px/1.6 "IBM Plex Sans",sans-serif}
.usoNota{margin:6px 0 0;font:400 11px/1.6 "IBM Plex Mono",monospace;color:var(--tenue);max-width:88ch}
.usoTabla{margin-top:12px;display:flex;flex-direction:column;gap:1px;background:var(--hair);border:1px solid var(--hair)}
.usoFila{display:grid;grid-template-columns:minmax(120px,2fr) 1fr 1.2fr 1fr 1fr;gap:10px;
  background:var(--panel);padding:8px 12px;font:400 12px/1.4 "IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.usoFila span:not(:first-child){text-align:right}
.usoFila.cabeza{color:var(--tenue);font-size:10px;letter-spacing:.09em;text-transform:uppercase}
@media (max-width:640px){.usoFila{grid-template-columns:1fr 1fr;font-size:11px}}

/* ═══ AVISOS — lo que la organización manda sola ═══════════════════════════
   Ordenado por TIEMPO, que es lo que lo separa de un chat: lo que viene hoy,
   lo que está calculado esperando, y lo que ya llegó. */
#avisosCuerpo{padding:0 24px 40px;max-width:1000px}
.bloque{margin:0 0 34px}
.bloque h2{margin:0 0 4px;font:500 15px/1.3 "IBM Plex Sans",system-ui,sans-serif;letter-spacing:-.01em}
.bloque .queEs{margin:0 0 14px}

/* el reloj de la jornada */
.reloj{display:flex;flex-direction:column;gap:1px;background:var(--hair);border:1px solid var(--hair)}
.rFila{background:var(--panel);padding:9px 14px;display:grid;
  grid-template-columns:56px 1fr auto;gap:14px;align-items:center;font-size:13px}
.rFila.paso{opacity:.45}
.rFila.llego{background:var(--panel)}
.rHora{font:500 12px/1 "IBM Plex Mono",ui-monospace,monospace;font-variant-numeric:tabular-nums;color:var(--tenue)}
.rFila.llego .rHora{color:var(--ok)}
.rQue b{font-weight:500}
.rQue i{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11.5px;font-style:normal;color:var(--tenue)}
.rEstado{font:400 11px/1 "IBM Plex Mono",ui-monospace,monospace;color:var(--tenue);text-align:right}
.rFila.llego .rEstado{color:var(--ok)}

/* quién te habla */
.quienHabla{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.qAgente{background:none;border:1px solid var(--hair-fuerte);color:var(--medio);
  padding:5px 10px;font:400 12px/1 "IBM Plex Sans",system-ui,sans-serif;cursor:pointer;display:inline-flex;gap:7px;align-items:center}
.qAgente i{font-family:"IBM Plex Mono",ui-monospace,monospace;font-style:normal;font-size:11px;color:var(--tenue)}
.qAgente:hover{color:var(--texto);border-color:var(--texto)}
.qAgente.activo{color:var(--texto);border-color:var(--texto);background:var(--velo-1)}

/* el mensaje */
.aviso{border:1px solid var(--hair);background:var(--panel);padding:13px 15px;margin:0 0 10px}
.aviso.espera{border-style:dashed;opacity:.85}
.aviso.noEnviado{border-left:3px solid var(--mal)}
.aHead{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;margin-bottom:8px}
.aHead b{font:500 13.5px/1.2 "IBM Plex Sans",system-ui,sans-serif}
.aAccion{font-family:"IBM Plex Mono",ui-monospace,monospace;font-size:11px;font-style:normal;color:var(--tenue)}
.aHora{margin-left:auto;font:400 11.5px/1 "IBM Plex Mono",ui-monospace,monospace;color:var(--tenue)}
.aModo{font:400 10px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.06em;color:var(--tenue);
  border:1px solid var(--hair-fuerte);padding:3px 6px}
.aModo.mPregunta{color:var(--alerta);border-color:var(--alerta)}
.aTexto{margin:0;white-space:pre-wrap;font:400 13px/1.55 "IBM Plex Sans",system-ui,sans-serif;color:var(--texto);
  overflow-x:auto}
.aPie{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:10px;
  padding-top:9px;border-top:1px solid var(--hair);font:400 11.5px/1.5 "IBM Plex Mono",ui-monospace,monospace;color:var(--tenue)}
.chipEnc,.chipCon,.chipFalta{font:400 10px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.06em;
  padding:3px 6px;border:1px solid var(--hair-fuerte);white-space:nowrap}
.rQue .chipEnc,.rQue .chipFalta{margin-left:8px}
.chipEnc{color:var(--ok);border-color:var(--ok)}
.chipFalta{color:var(--mal);border-color:var(--mal)}
.diaSep{margin:22px 0 10px;font:400 10.5px/1 "IBM Plex Mono",ui-monospace,monospace;letter-spacing:.12em;
  text-transform:uppercase;color:var(--tenue)}
.diaSep:first-child{margin-top:0}
@media (max-width:620px){
  #avisosCuerpo{padding:0 14px 32px}
  .rFila{grid-template-columns:50px 1fr;gap:6px 10px}
  .rEstado{grid-column:2;text-align:left}
}

/* ── la Mesa como espacio del CEO (15/09) ──────────────────────────────────
   Lo que todavía es una IDEA va arriba y se lee distinto de una tarea: no tiene dueño ni fecha,
   tiene un porqué. La línea al costado marca que eso espera una decisión tuya, no trabajo. */
.cintaModo{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;margin:0 0 18px;
  padding:9px 12px;border:1px solid var(--hair);background:var(--velo-1);font-size:12px;color:var(--medio)}
.cintaModo b{font-size:12px;color:var(--texto)}
.cintaModo .cintaDato{font:400 11px/1.4 "IBM Plex Mono",monospace;color:var(--tenue)}
.bloqueMesa.ideas .tarea.idea{border-left:2px solid var(--hair-fuerte);padding-left:12px}
.tarea.idea .det{padding-left:0;color:var(--texto);font-size:12.5px}
.tarea.idea .det.evidencia{color:var(--tenue);font-size:11.5px;margin-top:3px}
.tarea.idea .tacc{padding-left:0}

/* el registro comprimido de cambios: un renglón por cosa, para leer de arriba */
.cambios{display:flex;flex-direction:column;gap:2px}
.cambio{display:flex;gap:10px;align-items:baseline;padding:3px 0;font-size:12.5px}
.cambio .cambioDia{font:400 11px/1.4 "IBM Plex Mono",monospace;color:var(--tenue);min-width:40px}
.cambio .cambioQue{flex:1;color:var(--texto)}
.cambio .cambioSha{font:400 10.5px/1.4 "IBM Plex Mono",monospace;color:var(--tenue)}

/* lo que el dueño ya le dijo: se lee distinto de lo que propuso el CEO */
.tarea.idea .det.dicho,.feedbackCuerpo .det.dicho{border-left:2px solid var(--hair-fuerte);padding-left:8px;
  color:var(--medio);font-size:12.5px;margin:4px 0 0}
.feedback .feedbackCuerpo{display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding-top:8px}
.feedback textarea{width:100%;min-height:44px}