/* Demo: automatización de procesos con IA (un flujo con reglas). Prefijo au-.
   Cada pantalla vive en .au-scr, que es un contenedor: el diseño se ajusta al ancho real de la ventana de la demo
   (lienzo de 3 columnas con panel al lado; en angosto, panel debajo; en celular, lienzo de 2 columnas). */
.au-scr{container-type:inline-size;display:grid;gap:14px;align-content:start;min-width:0}

/* Encabezado del flujo: contador e interruptor */
.au-runs{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:500;color:var(--dx-ink-3)}
.au-runs svg{width:14px;height:14px;color:var(--dx-acc)}
.au-sw{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 13px 0 6px;border-radius:99px;background:#fff;border:1px solid var(--dx-line-2);font-size:12px;transition:background-color .35s,border-color .35s,transform .15s}
.au-sw i{position:relative;width:34px;height:20px;border-radius:99px;background:var(--dx-line-2);transition:background-color .35s}
.au-sw i::after{content:"";position:absolute;left:2px;top:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(18,22,51,.28);transition:transform .4s var(--spring)}
.au-sw b{font-weight:600;color:var(--dx-ink-2)}
/* Activo = el flujo trabaja solo: durazno, como «Lo hace sola» (el verde queda para lo que salió bien) */
.au-sw.is-on{border-color:var(--peach-200);background:var(--dx-peach)}
.au-sw.is-on i{background:var(--grad-cta)}
.au-sw.is-on i::after{transform:translateX(14px)}
.au-sw.is-on b{color:var(--dx-acc-ink)}

/* Lienzo y panel */
.au-flow{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:14px;min-width:0}
.au-cv{position:relative;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.2fr) minmax(0,.92fr);gap:22px 14px;align-content:center;min-height:500px;padding:20px 14px;border-radius:16px;border:1px solid var(--dx-line);background-color:#fcf8f3;background-image:radial-gradient(rgba(18,22,51,.11) 1px,transparent 1.3px);background-size:18px 18px;background-position:9px 9px;overflow:hidden}
.au-wires{position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;overflow:visible;pointer-events:none}
.au-e{fill:none;stroke:#d3bfab;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .75s var(--ease)}
.au-e:nth-child(2){transition-delay:.14s}.au-e:nth-child(3){transition-delay:.28s}.au-e:nth-child(4){transition-delay:.36s}
.au-e:nth-child(5){transition-delay:.5s}.au-e:nth-child(6){transition-delay:.64s}
.au-e.dash{stroke-dasharray:2 3;stroke-dashoffset:0;opacity:0;transition:opacity .6s .8s}
.au-cv.is-wired .au-e{stroke-dashoffset:0}
.au-cv.is-wired .au-e.dash{opacity:1}
.au-lit{fill:none;stroke:var(--dx-acc);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100;opacity:0;transition:opacity .3s}
.au-lit.dash{stroke:var(--dx-bad);stroke-dashoffset:0}
.au-lit.is-on{opacity:1}
.au-port{fill:#fff;stroke:#cdb6a1;stroke-width:1.5;opacity:0;transition:opacity .4s .7s}
.au-cv.is-wired .au-port{opacity:1}
.au-tok{opacity:0;transition:opacity .25s}
.au-tok.is-on{opacity:1}
.au-tok .h{fill:rgba(229,97,45,.24);transform-box:fill-box;transform-origin:center;animation:auPulse 1.1s ease-in-out infinite}
.au-tok .c{fill:var(--dx-acc);stroke:#fff;stroke-width:2}
@keyframes auPulse{0%,100%{transform:scale(.7)}50%{transform:scale(1.15)}}

/* Nodos */
.au-n{position:relative;z-index:1;display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:9px;width:100%;max-width:262px;min-width:0;justify-self:center;padding:9px 12px 9px 9px;border-radius:14px;background:#fff;border:1px solid var(--dx-line-2);box-shadow:0 1px 2px rgba(18,22,51,.05),0 8px 18px -12px rgba(18,22,51,.2);transition:opacity .45s var(--ease),transform .5s var(--spring),border-color .3s,box-shadow .35s}
.au-n[data-n="1"]{grid-area:1/2}.au-n[data-n="2"]{grid-area:2/2}.au-n[data-n="3"]{grid-area:3/2}.au-n[data-n="4"]{grid-area:4/1}
.au-n[data-n="5"]{grid-area:5/2}.au-n[data-n="6"]{grid-area:6/2}.au-n[data-n="7"]{grid-area:6/3}
.au-ni{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:var(--dx-peach);color:var(--dx-acc-ink);transition:transform .4s var(--spring)}
.au-ni svg{width:16px;height:16px}
.au-nt{display:grid;min-width:0;line-height:1.25}
.au-nt small{font-size:9.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--dx-ink-3)}
.au-nt b{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:12.5px;font-weight:600;line-height:1.22;color:var(--dx-ink)}
.au-nt em{font-style:normal;font-size:11px;color:var(--dx-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .3s}
.au-n.k-trg .au-ni{background:var(--dx-ink);color:#fff}
.au-n.k-ai{background:linear-gradient(#fff,#fff) padding-box,var(--grad) border-box;border:1.5px solid transparent}
.au-n.k-ai .au-ni{background:var(--grad-cta);color:#fff}
.au-n.k-if .au-ni{background:var(--dx-warn-bg);color:var(--dx-warn)}
.au-n.k-sys .au-ni{background:#eef0f5;color:var(--dx-ink-2)}
.au-n.k-wa .au-ni{background:#dcf8e6;color:#0a7d4b}
.au-n.k-err{border-style:dashed;background:#fffdfb}
.au-n.k-err .au-ni{background:var(--dx-bad-bg);color:var(--dx-bad)}
/* Estado de cada nodo en la ejecución */
.au-st{position:absolute;top:-7px;right:-7px;z-index:3;width:19px;height:19px;border-radius:50%;background:#fff;border:2px solid var(--dx-line-2);opacity:0;transform:scale(.5);transition:opacity .25s,transform .35s var(--spring),background-color .25s,border-color .25s}
.dx .au-n.is-run{border-color:var(--dx-acc);box-shadow:0 0 0 4px rgba(229,97,45,.16),0 14px 26px -14px rgba(229,97,45,.65);transform:translateY(-2px) scale(1.025)}
.dx .au-n.k-ai.is-run{border-color:transparent;box-shadow:0 0 0 4px rgba(230,27,87,.13),0 14px 26px -14px rgba(230,27,87,.6)}
.au-n.is-run .au-ni{transform:scale(1.08)}
.au-n.is-run .au-st{opacity:1;transform:none;border-color:rgba(229,97,45,.25);border-top-color:var(--dx-acc);animation:auSpin .7s linear infinite}
.au-n.is-run em,.au-n.is-wait em{color:var(--dx-acc-ink);font-weight:600}
.au-n.is-done{border-color:#c4e5d1}
.au-n.k-ai.is-done{border-color:transparent}
.au-n.is-done em{color:var(--dx-ok);font-weight:600}
.au-n.is-done .au-st{opacity:1;transform:none;border-color:var(--dx-ok);background:var(--dx-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/11px no-repeat}
.dx .au-n.is-wait{border-color:#eab14a;box-shadow:0 0 0 4px rgba(234,177,74,.2);animation:auWait 1.6s ease-in-out infinite}
.au-n.is-wait .au-st{opacity:1;transform:none;border-color:#eab14a;background:#f6c25e}
.dx .au-n.is-err{border-color:var(--dx-bad);box-shadow:0 0 0 4px rgba(180,35,24,.13);animation:auShake .45s var(--ease)}
.au-n.is-err em{color:var(--dx-bad);font-weight:600}
.au-n.is-err .au-st{opacity:1;transform:none;border-color:var(--dx-bad);background:var(--dx-bad) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round'%3E%3Cpath d='M12 6v7M12 17.5v.5'/%3E%3C/svg%3E") center/11px no-repeat}
.au-n.is-retry .au-st{animation:auSpin .7s linear infinite;background-image:none;border-color:rgba(180,35,24,.25);border-top-color:var(--dx-bad);background-color:#fff}
.dx .au-n.is-skip{opacity:.42}
@keyframes auSpin{to{transform:rotate(360deg)}}
@keyframes auWait{0%,100%{box-shadow:0 0 0 3px rgba(234,177,74,.18)}50%{box-shadow:0 0 0 8px rgba(234,177,74,.06)}}
@keyframes auShake{0%,100%{translate:0}25%{translate:-4px 0}50%{translate:4px 0}75%{translate:-2px 0}}

/* Rótulos de las ramas, herramientas del lienzo y correo que llega */
.au-lbl{position:absolute;left:-200px;top:0;z-index:3;padding:2px 9px;border-radius:99px;background:#fff;border:1px solid var(--dx-line-2);font-size:10.5px;font-weight:600;color:var(--dx-ink-3);white-space:nowrap;opacity:0;transform:translate(-50%,-50%) scale(.7);transition:opacity .4s .9s,transform .45s var(--spring) .9s,background-color .3s,color .3s,border-color .3s}
.au-cv.is-wired .au-lbl{opacity:1;transform:translate(-50%,-50%)}
.au-lbl.is-hot{background:var(--dx-acc);border-color:var(--dx-acc);color:#fff;transition-delay:0s}
.au-lbl[data-lbl="e7"].is-hot{background:var(--dx-bad);border-color:var(--dx-bad)}
.au-tools{position:absolute;top:10px;right:10px;z-index:3;display:flex;align-items:center;gap:2px;padding:3px;border-radius:10px;background:#fff;border:1px solid var(--dx-line);box-shadow:0 1px 2px rgba(18,22,51,.05);font-size:11px;color:var(--dx-ink-3)}
.au-tools span{display:grid;place-items:center;min-width:22px;height:22px;border-radius:7px;font-size:13px}
.au-tools b{padding:0 3px;font-weight:600;color:var(--dx-ink-2);font-variant-numeric:tabular-nums}
.au-tools i{width:1px;height:14px;margin:0 3px;background:var(--dx-line)}
.au-tools svg{width:13px;height:13px}
.au-cvfoot{position:absolute;left:12px;bottom:10px;z-index:3;display:flex;align-items:center;gap:6px;margin:0;font-size:10.5px;color:var(--dx-ink-3)}
.au-cvfoot svg{width:12px;height:12px}
.au-mail{position:absolute;left:12px;top:14px;z-index:4;display:grid;grid-template-columns:30px minmax(0,1fr);gap:9px;width:186px;padding:10px;border-radius:14px;background:#fff;border:1px solid var(--dx-line-2);box-shadow:0 20px 36px -18px rgba(0,6,42,.5);opacity:0;transform:translateX(-16px) scale(.94);transition:opacity .4s var(--ease),transform .55s var(--spring);pointer-events:none}
.au-mail.is-in{opacity:1;transform:none}
.au-mail.is-gone{visibility:hidden}
.au-mail-ic{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--dx-ink);color:#fff}
.au-mail-ic svg{width:15px;height:15px}
.au-mail small{display:block;font-size:10px;font-weight:600;color:var(--dx-acc-ink)}
.au-mail b{display:block;font-size:12px;line-height:1.25;color:var(--dx-ink)}
.au-mail > span:last-child > span{display:block;font-size:11px;line-height:1.3;color:var(--dx-ink-3)}
.au-mail em{display:inline-flex;align-items:center;gap:4px;margin-top:6px;padding:3px 7px;border-radius:7px;background:var(--dx-canvas);border:1px solid var(--dx-line);font-style:normal;font-size:10.5px;color:var(--dx-ink-2)}
.au-mail em svg{width:12px;height:12px;color:var(--dx-bad)}

/* Panel: reglas o ejecución en vivo (se cruzan con un fundido en el mismo lugar) */
.au-panel{display:grid;min-width:0;padding:14px;border-radius:16px;background:#fff;border:1px solid var(--dx-line);box-shadow:0 1px 2px rgba(18,22,51,.04)}
/* mismo fundido en dos tiempos que .dx-screen (dx.css): la que sale se va rápido y la que entra espera a que se vaya */
.au-pv{grid-area:1/1;display:grid;gap:10px;align-content:start;min-width:0;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .15s ease-out,transform .15s ease-out,visibility 0s .15s}
.au-pv.is-on{opacity:1;visibility:visible;transform:none;transition:opacity .36s var(--ease) .14s,transform .48s var(--ease) .14s,visibility 0s}
.au-ph,.au-run-h{display:flex;align-items:center;gap:7px;margin:0;font-size:12.5px;font-weight:600;color:var(--dx-ink);white-space:nowrap}
.au-run-h .dx-muted{min-width:0;overflow:hidden;text-overflow:ellipsis}
.au-ph svg{width:15px;height:15px;color:var(--dx-acc)}
.au-ph .sp,.au-run-h .sp{flex:1}
.au-ver{font-size:10.5px;font-weight:500;color:var(--dx-ink-3)}
.au-rules{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.au-rules li{display:grid;gap:6px;justify-items:start;padding:10px 11px;border-radius:12px;background:var(--dx-canvas);border:1px solid var(--dx-line);font-size:12px;line-height:1.42;color:var(--dx-ink-2)}
.au-retry{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;align-items:start;padding:10px 11px;border-radius:12px;border:1px dashed var(--dx-line-2);font-size:12px;line-height:1.42}
.au-retry b{display:block;font-size:12.5px;color:var(--dx-ink)}
.au-mini{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.au-mini span{display:grid;align-content:start;gap:1px;padding:8px;border-radius:10px;background:var(--dx-canvas);font-size:10.5px;line-height:1.3;color:var(--dx-ink-3)}
.au-mini b{font-size:15px;color:var(--dx-ink)}
.au-run-h b{font-size:13px}
.au-live{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:99px;background:var(--dx-peach);color:var(--dx-acc-ink);font-size:11px;font-weight:600;white-space:nowrap;transition:background-color .3s,color .3s}
.au-live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dx-acc);animation:auBlink 1.2s ease-in-out infinite}
.au-live.is-ok{background:var(--dx-ok-bg);color:var(--dx-ok)}
.au-live.is-ok::before{background:var(--dx-ok);animation:none}
.au-live.is-warn{background:var(--dx-warn-bg);color:var(--dx-warn)}
.au-live.is-warn::before{background:#eab14a}
@keyframes auBlink{50%{opacity:.25}}
.au-inv{position:relative;gap:3px;padding:11px 12px;overflow:hidden;font-size:11.5px;box-shadow:0 10px 24px -20px rgba(0,6,42,.4)}
.au-inv .hd{padding-bottom:7px;margin-bottom:3px}
.au-inv .hd b{display:inline-flex;align-items:center;gap:6px;font-size:12px}
.au-inv .hd svg{width:14px;height:14px;color:var(--dx-ink-3)}
.au-inv .dx-field{padding:2px 6px}
.au-inv .dx-field span{flex:none}
.au-inv .dx-field b{max-width:74%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.au-inv .dx-field:last-of-type b{font-size:12.5px}
.au-inv .dx-field.is-bad{background:var(--dx-bad-bg);box-shadow:0 0 0 1.5px #f2b9b3}
.au-inv .dx-field.is-bad b{color:var(--dx-bad)}
.au-match{display:flex;align-items:center;gap:6px;margin:5px 0 0;padding:6px 8px;border-radius:8px;background:var(--dx-ok-bg);color:var(--dx-ok);font-size:11px;font-weight:600}
[data-doc="b"] .au-match{background:var(--dx-bad-bg);color:var(--dx-bad)}
.au-match svg{width:14px;height:14px;flex:none}
.au-tl{display:grid;margin:2px 0 0;padding:0;list-style:none}
.au-tl li{position:relative;display:grid;grid-template-columns:14px minmax(0,1fr) auto;gap:9px;align-items:start;padding:0 0 8px;font-size:11px;line-height:1.3;color:var(--dx-ink-3);opacity:.42;transition:opacity .35s}
.au-tl li::before{content:"";position:absolute;left:6px;top:16px;bottom:0;width:2px;background:var(--dx-line)}
.au-tl li:last-child{padding-bottom:0}
.au-tl li:last-child::before{display:none}
.au-tl li > i{position:relative;z-index:1;width:14px;height:14px;margin-top:1px;border-radius:50%;border:2px solid var(--dx-line-2);background:#fff;transition:background-color .3s,border-color .3s,box-shadow .3s}
.au-tl b{display:block;font-size:12px;font-weight:600;color:var(--dx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.au-tl li > span > span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.au-tl em{font-style:normal;font-size:11px;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--dx-ink-3)}
.au-tl li.is-now,.au-tl li.is-done,.au-tl li.is-err{opacity:1}
.au-tl li.is-now > i{border-color:var(--dx-acc);box-shadow:0 0 0 3px rgba(229,97,45,.2)}
.au-tl li.is-now em{color:var(--dx-acc-ink);font-weight:600}
.au-tl li.is-done > i{border-color:var(--dx-ok);background:var(--dx-ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12 4 4 8-8'/%3E%3C/svg%3E") center/8px no-repeat}
.au-tl li.is-err > i{border-color:var(--dx-bad);background:var(--dx-bad)}
.au-tl li.is-err em{color:var(--dx-bad);font-weight:600}

/* Teléfono de quien aprueba (WhatsApp con botones de respuesta) */
.au-phone{width:220px;height:404px}
.au-pav{background:var(--grad-cta)!important;font-style:italic;letter-spacing:-.04em}
.au-wa{display:grid;gap:2px;padding-bottom:2px}
.au-wa-t{display:inline-flex;align-items:center;gap:5px;margin-bottom:3px;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#a35400}
.au-wa-t::before{content:"";width:7px;height:7px;border-radius:50%;background:#f0a530}
.au-wa b{font-size:12.5px;color:#111b21}
.au-wa strong{margin:3px 0 1px;font-size:18px;font-weight:700;letter-spacing:-.02em;color:#111b21;font-variant-numeric:tabular-nums}
.au-wa span{color:#3b4a54}
.au-wa .au-wa-n{margin-top:3px;font-size:11.3px;line-height:1.35;color:#54656f}
.au-wa-btns{display:grid;margin:10px -9px -7px;border-top:1px solid #e9edef}
.au-wa-btns span{display:flex;align-items:center;justify-content:center;height:31px;border-top:1px solid #e9edef;font-size:12.3px;font-weight:600;color:#027eb5;cursor:default;transition:background-color .3s,color .3s}
.au-wa-btns span:first-child{border-top:0}
.au-wa-btns span.is-ok{background:var(--dx-ok-bg);color:var(--dx-ok)}
.au-phone .dx-chat .dx-hint{cursor:pointer;background:var(--dx-peach);color:var(--dx-acc-ink)}
/* El rótulo «Tu turno» se apoya sobre la hora del mensaje, a la derecha: no tapa el monto ni la nota */
.au-phone .dx-chat .dx-hint::after{left:auto;right:6px;bottom:calc(100% + 3px);transform:none;font-size:10px;padding:3px 8px}

/* Tareas para personas */
.au-tasks{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:12px;align-items:start;min-width:0}
.au-kb{grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible}
.au-kb .dx-col{min-height:446px;align-content:start}
.au-list{display:grid;gap:8px;align-content:start;min-width:0}
.au-task{min-width:0}
.au-task .dx-muted{font-size:11.5px;line-height:1.35}
.au-task .dx-av{width:22px;height:22px;font-size:9px}
.au-task [data-ttag]{min-width:0;display:flex}
.au-task .dx-tag{max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* la columna ya se llama «Resueltas hoy»: la etiqueta dice solo quién y a qué hora, sin recortarse */
.au-kb .au-lg{display:none}
.au-task.is-in{animation:auIn .55s var(--spring) both}
.au-task.is-hot{border-color:#f2b9b3;box-shadow:0 0 0 3px rgba(180,35,24,.1)}
@keyframes auIn{from{opacity:0;transform:translateY(-10px) scale(.95)}to{opacity:1;transform:none}}
.au-ctx{display:grid;gap:10px;align-content:start}
.au-ctx-h{display:grid;grid-template-columns:32px minmax(0,1fr);gap:10px;align-items:center}
.au-ctx-h b{display:block;font-size:13px;line-height:1.3;color:var(--dx-ink)}
.au-ctx-h .dx-muted{font-size:11.5px}
.dx-ic.au-bad{background:var(--dx-bad-bg);color:var(--dx-bad)}
.au-who{display:flex;align-items:center;gap:8px;font-size:12px}
.au-who .sp{flex:1}
.au-who .dx-av{width:24px;height:24px;font-size:9.5px}
.au-ctx-doc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.au-ctx-doc span{display:grid;padding:7px 9px;border-radius:10px;background:var(--dx-canvas);min-width:0}
.au-ctx-doc small{font-size:10px;color:var(--dx-ink-3)}
.au-ctx-doc b{font-size:12px;color:var(--dx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
.au-files{display:flex;flex-wrap:wrap;gap:6px}
.au-files span{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:8px;border:1px solid var(--dx-line);background:#fff;font-size:11px;color:var(--dx-ink-2)}
.au-files svg{width:12px;height:12px;color:var(--dx-bad)}
.au-sub{margin:0;font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--dx-ink-3)}
.au-att{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.au-att li{display:grid;grid-template-columns:58px auto minmax(0,1fr);gap:8px;align-items:baseline;font-size:11.5px;color:var(--dx-ink-3)}
.au-att li b{font-weight:600;color:var(--dx-ink-2)}
.au-att li span:last-child{color:var(--dx-bad);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.au-att li:last-child span:last-child{color:var(--dx-acc-ink);font-weight:600}
.au-sug{padding:10px 12px}
.au-sug p{font-size:12px}
.au-fixed{display:flex;align-items:center;gap:7px;margin:0;font-size:12px;font-weight:600;color:var(--dx-ok)}
.au-fixed svg{width:16px;height:16px;flex:none}

/* Bitácora */
.au-sum{display:flex;flex-wrap:wrap;gap:8px}
.au-sum > span{display:inline-flex;align-items:baseline;gap:6px;padding:7px 12px;border-radius:12px;background:#fff;border:1px solid var(--dx-line);font-size:11.5px;color:var(--dx-ink-3)}
.au-sum b{font-size:16px;font-weight:650;color:var(--dx-ink)}
.au-sum .s-ok b{color:var(--dx-acc-ink)}.au-sum .s-warn b{color:var(--dx-warn)}
.au-filt{display:inline-flex;gap:2px;padding:3px;border-radius:99px;background:#fff;border:1px solid var(--dx-line)}
.au-filt > *{padding:4px 10px;border-radius:99px;font-size:11.5px;font-weight:500;color:var(--dx-ink-3)}
.au-filt b{background:var(--dx-ink);color:#fff;font-weight:600}
.au-log{display:grid;grid-template-columns:minmax(0,1fr) 262px;gap:12px;align-items:start;min-width:0}
.au-tbl{--cols:minmax(0,1.75fr) minmax(0,1fr) minmax(0,1fr) minmax(0,.8fr) minmax(0,1.3fr) 38px}
.au-tbl .dx-tr{min-height:46px;gap:8px}
.au-tbl .au-r{text-align:right}
.au-id{display:grid!important;line-height:1.25}
.au-id b,.au-id small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.au-id b{font-size:12px;color:var(--dx-ink)}
.au-id small{font-size:10.5px;color:var(--dx-ink-3)}
.au-pp{display:inline-flex;align-items:center;gap:6px;color:var(--dx-ink-2)}
.au-pp .dx-av{width:22px;height:22px;font-size:9px}
.au-auto{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--dx-ink-3)}
.au-auto svg{width:13px;height:13px;color:var(--dx-acc)}
.au-row{position:relative}
.au-row.is-sel{background:var(--dx-peach);box-shadow:inset 3px 0 0 var(--dx-acc)}
.au-det{display:grid;min-height:378px;align-content:start}
.au-det-e{display:grid;justify-items:center;align-content:center;gap:10px;min-height:340px;text-align:center;font-size:12px;color:var(--dx-ink-3)}
.au-det-e svg{width:28px;height:28px;padding:6px;border-radius:10px;background:var(--dx-canvas);color:var(--dx-ink-3);box-sizing:content-box}
.au-det-b{display:grid;gap:10px}
.au-det-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0;font-size:13px}
.au-steps{display:grid;gap:0;margin:0;padding:0;list-style:none}
.au-steps li{position:relative;display:grid;grid-template-columns:54px minmax(0,1fr);gap:2px 10px;padding:7px 0 7px;border-top:1px solid var(--dx-line);font-size:11.5px;opacity:0;transform:translateX(8px);transition:opacity .35s var(--ease),transform .4s var(--ease)}
.au-steps li.is-in{opacity:1;transform:none}
.au-steps li > span{grid-row:span 2;font-size:10.5px;color:var(--dx-ink-3)}
.au-steps b{font-size:12px;line-height:1.3;color:var(--dx-ink)}
.au-steps small{grid-column:2;font-size:10.5px;color:var(--dx-ink-3)}
.au-steps li.au-hl{margin:2px -8px;padding:7px 8px;border-radius:10px;border-top-color:transparent;background:var(--dx-warn-bg)}
.au-steps li.au-hl b{color:var(--dx-warn)}
.au-steps li.au-hl + li{border-top-color:transparent}
.au-det-f{display:flex;justify-content:space-between;margin:0;padding-top:8px;border-top:1px solid var(--dx-line);font-size:12px;color:var(--dx-ink-3)}
.au-det-f b{color:var(--dx-ink)}

/* Tablero */
.au-kpis .dx-kpi{position:relative;min-width:0}
.au-kpis .dx-kpi span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.au-est i{font-style:normal;margin-left:4px;padding:1px 6px;border-radius:99px;background:var(--dx-warn-bg);color:var(--dx-warn);font-size:9px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;vertical-align:1px}
.au-spark{position:absolute;right:12px;bottom:13px;width:62px;height:auto}
.au-spark .ln{stroke-width:2}
.au-dash{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:12px;min-width:0}
.au-stack{display:flex;gap:3px;height:14px;margin:6px 0 8px;border-radius:99px;overflow:hidden;background:var(--dx-line)}
.au-stack i{display:block;flex:0 0 0%;height:100%;transition:flex-basis 1s var(--ease)}
.au-stack.is-in i{flex-basis:calc(var(--w) * 1% - 2px)}
.au-stack .s2{transition-delay:.15s}.au-stack .s3{transition-delay:.3s}
.s1{background:var(--grad)}.s2{background:var(--dx-warn)}.s3{background:var(--dx-ink)}
.au-leg{display:grid;margin:0;padding:0;list-style:none}
.au-leg li{display:grid;grid-template-columns:10px minmax(0,1fr) auto 34px;gap:9px;align-items:center;padding:6px 0;border-top:1px solid var(--dx-line);font-size:12px}
.au-leg li > i{width:10px;height:10px;border-radius:3px}
.au-leg span{display:grid;min-width:0}
.au-leg span b{font-size:12px;color:var(--dx-ink)}
.au-leg small{font-size:10.5px;color:var(--dx-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.au-leg em{font-style:normal;font-size:11px;font-weight:600;text-align:right;color:var(--dx-ink-3)}
.au-day .dx-h5 .dx-muted{font-weight:400}
.au-bars .vl{fill:var(--dx-ink)}
.au-bars .bar.au-soft{fill:var(--peach-200)}
.au-bars .au-today{fill:var(--dx-acc-ink)}
.au-bars .au-fest{font-size:9px;font-weight:500;fill:var(--dx-ink-3)}
.au-bars .au-ax{text-anchor:end;font-size:9px}
.au-avg{stroke:var(--dx-ink-2);stroke-width:1.2;stroke-dasharray:4 4;opacity:0;transition:opacity .5s .9s}
.au-avgt{text-anchor:middle;font-size:9.5px;font-weight:600;fill:var(--dx-ink-2)!important;opacity:0;transition:opacity .5s 1s}
.au-bars.is-in .au-avg{opacity:.55}.au-bars.is-in .au-avgt{opacity:1}
.au-flows ul{display:grid;margin:0;padding:0;list-style:none}
.au-flows li{display:grid;grid-template-columns:minmax(0,1.6fr) 40px minmax(0,1fr) 70px;gap:12px;align-items:center;padding:7px 0;border-top:1px solid var(--dx-line);font-size:12px}
.au-flows li:first-child{border-top:0;padding-top:2px}
.au-flows li > span:first-child{display:flex;align-items:center;gap:8px;min-width:0}
.au-flows li > span:first-child b{font-weight:600;color:var(--dx-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.au-flows svg{width:14px;height:14px;color:var(--dx-acc);flex:none}
.au-flows li > span.dx-num{font-weight:600;color:var(--dx-ink);text-align:right}
.au-flows em{font-style:normal;font-size:11px;color:var(--dx-ink-3);text-align:right}
.au-note{margin:-4px 0 0;font-size:10.5px;color:var(--dx-ink-3)}
.au-note b{font-weight:600;color:var(--dx-ink-2)}

/* Sin JS: lo que el guion pinta, ya pintado */
html:not(.js):not(.js-motion) .au-e{stroke-dashoffset:0}
html:not(.js):not(.js-motion) .au-stack i{flex-basis:calc(var(--w) * 1% - 2px)}
html:not(.js):not(.js-motion) .au-bars .bar{transform:none}
html:not(.js):not(.js-motion) .au-avg{opacity:.55}
html:not(.js):not(.js-motion) .au-avgt{opacity:1}
html:not(.js):not(.js-motion) .au-steps li{opacity:1;transform:none}

/* La ventana es ancha y el teléfono no tapa el panel: queda sobre la columna derecha del lienzo */
@media (min-width:1080px){.au-phone{right:310px}}

/* Angosto (tableta o ventana chica): el panel baja */
@container (max-width:900px){
  .au-flow,.au-tasks,.au-log,.au-dash{grid-template-columns:minmax(0,1fr)}
  .au-cv{min-height:0}
  .au-kb .dx-col{min-height:0}
  .au-det{min-height:0}
  .au-det-e{min-height:120px}
  .au-kpis .dx-kpi span{white-space:normal}
}
/* Celular: lienzo de dos columnas, nodos compactos y tabla con menos columnas */
@container (max-width:560px){
  .au-cv{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 10px;padding:16px 10px 18px}
  .au-n{grid-template-columns:28px minmax(0,1fr);gap:8px;padding:8px 9px 8px 8px;border-radius:12px}
  .au-n[data-n="1"],.au-n[data-n="2"],.au-n[data-n="3"],.au-n[data-n="5"]{grid-column:1/3;max-width:250px}
  .au-n[data-n="1"]{grid-row:1}.au-n[data-n="2"]{grid-row:2}.au-n[data-n="3"]{grid-row:3}.au-n[data-n="5"]{grid-row:5}
  .au-n[data-n="4"]{grid-area:4/1}.au-n[data-n="6"]{grid-area:6/1}.au-n[data-n="7"]{grid-area:6/2}
  .au-ni{width:28px;height:28px;border-radius:9px}
  .au-ni svg{width:14px;height:14px}
  .au-nt b{font-size:11.8px}
  .au-nt em{font-size:10.5px}
  /* nodos de media columna: el resultado ocupa siempre dos líneas (alto fijo: las conexiones se miden una sola vez) */
  .au-n[data-n="4"] .au-nt em,.au-n[data-n="6"] .au-nt em,.au-n[data-n="7"] .au-nt em{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.25;min-height:2.5em}
  .au-nt small{font-size:9px}
  .au-mail{left:10px;right:10px;width:auto}
  .au-ctx-doc{grid-template-columns:repeat(2,minmax(0,1fr))}
  .au-ctx-doc span:last-child{grid-column:1/3}
  .au-tbl{--cols:minmax(0,1.3fr) minmax(0,1fr) auto}
  .au-tbl .dx-tr{padding:6px 10px}
  .au-tbl .dx-tag svg{display:none}
  .au-tbl .dx-tag{padding:0 7px;font-size:10.5px}
  .au-c-dur,.au-c-who,.au-c-h{display:none!important}
  .au-sum > span{padding:6px 10px}
  .au-sum b{font-size:14.5px}
  .au-flows li{grid-template-columns:minmax(0,1fr) 34px 64px;gap:8px}
  .au-flows li > .dx-bar-p{grid-column:1/-1;grid-row:2}
  .au-flows li > span:first-child b{white-space:normal}
  .au-kpis .dx-kpi b{font-size:19px}
  .au-lg,.au-task .dx-av{display:none}
  .au-bars .lb{font-size:13px}
  .au-bars .au-odd{display:none}
  .au-bars .au-ax{font-size:12px}
  .au-bars .au-fest{display:none}
  .au-bars .vl{font-size:13px}
  .au-avgt{font-size:12px}
  .au-kpis .dx-kpi span{white-space:normal}
  .au-spark{display:none}
}
@media (max-width:760px){
  .au-phone{height:404px;width:214px}
}