/* DU AI OS · capa de app sobre duDESIGN-tokens.css (perfil oscuro). Componentes de portal derivados como extensión (E). */
html,body{margin:0;height:100%}
body.du-ui{background:var(--du-bg);color:var(--du-text);-webkit-font-smoothing:antialiased}
.app{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}

/* Lateral */
.side{display:flex;flex-direction:column;gap:var(--du-space-8);padding:var(--du-space-8) var(--du-space-5) var(--du-space-6);border-right:1px solid var(--du-border);background:var(--du-bg)}
.brand{display:flex;flex-direction:column;gap:var(--du-space-3);padding-inline:var(--du-space-3)}
.brand img{width:132px;height:auto;display:block}
.brand span{white-space:nowrap;font:600 .75rem/1.3 var(--du-font-titulos);letter-spacing:.06em;text-transform:uppercase;color:var(--du-text-secondary)}
.nav{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;list-style:none}
.nav a{position:relative;display:flex;align-items:center;gap:var(--du-space-3);min-height:44px;padding:0 var(--du-space-3);border-radius:var(--du-radius);color:var(--du-text-secondary);font:500 .9375rem/1 var(--du-font-texto);text-decoration:none}
.nav a:hover{background:var(--du-surface);color:var(--du-text)}
.nav a[aria-current="page"]{background:var(--du-surface-raised);color:var(--du-text);font-weight:600}
.nav a[aria-current="page"]::before{content:"";position:absolute;left:0;top:10px;bottom:10px;width:3px;border-radius:2px;background:var(--du-rojo)}
.nav svg{width:20px;height:20px;flex:0 0 20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nav .count{margin-left:auto;min-width:24px;padding:2px 8px;border-radius:var(--du-radius-small);background:var(--du-surface-raised);color:var(--du-text);font:600 .75rem/1.4 var(--du-font-texto);text-align:center}
.nav a[aria-current="page"] .count{background:var(--du-bg)}
.side-foot{margin-top:auto;display:flex;flex-direction:column;gap:var(--du-space-3);padding:var(--du-space-4) var(--du-space-3) 0;border-top:1px solid var(--du-border);font-size:.8125rem;color:var(--du-text-secondary)}
.side-foot .who{display:flex;align-items:center;gap:var(--du-space-2)}

/* Principal */
.main{padding:var(--du-space-8) var(--du-space-10) var(--du-space-8);min-width:0}
.grid12{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--du-space-6)}
.span-12{grid-column:span 12}.span-8{grid-column:span 8}.span-4{grid-column:span 4}.span-9{grid-column:span 9}.span-3{grid-column:span 3}.span-6{grid-column:span 6}

.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--du-space-6)}
.page-head h1{margin:0;font:600 2rem/1.1 var(--du-font-titulos);letter-spacing:-.02em}
.page-head p{margin:var(--du-space-2) 0 0;color:var(--du-text-secondary);font-size:.9375rem}
.head-meta{display:flex;align-items:center;gap:var(--du-space-5);color:var(--du-text-secondary);font-size:.875rem;white-space:nowrap}
.sample{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--du-border);border-radius:var(--du-radius-small);font:500 .75rem/1.3 var(--du-font-texto);color:var(--du-text-secondary)}
.sample::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--du-gris)}
.people{display:flex;align-items:center;gap:var(--du-space-2)}

/* Paneles */
.panel{border:1px solid var(--du-border);border-radius:var(--du-radius);background:var(--du-surface);padding:var(--du-space-6)}
.panel-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--du-space-4);margin-bottom:var(--du-space-4)}
.panel-head h2{margin:0;font:600 1.125rem/1.3 var(--du-font-titulos)}
.panel-head .sub{color:var(--du-text-secondary);font-size:.8125rem}
.link{color:var(--du-link);font:500 .8125rem/1.3 var(--du-font-texto);text-decoration:none;white-space:nowrap}
.link:hover{text-decoration:underline;text-underline-offset:.2em}

/* Iniciales */
.ini{display:inline-grid;place-items:center;flex:0 0 auto;width:32px;height:32px;border-radius:50%;background:var(--du-surface-raised);border:1px solid var(--du-border);color:var(--du-text);font:600 .75rem/1 var(--du-font-titulos);letter-spacing:.02em}
.ini--sm{width:24px;height:24px;font-size:.625rem}

/* Estado: punto semántico + nombre explícito, fondo neutro */
.st{display:inline-flex;align-items:center;gap:8px;font-size:.8125rem;color:var(--du-text-secondary);white-space:nowrap}
.st::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--du-gris)}
.st--ok::before{background:var(--du-success)}
.st--warn::before{background:var(--du-warning)}
.st--err::before{background:var(--du-error)}
.st--info::before{background:var(--du-info)}

/* Atención: el único bloque con rojo DU */
.attention{position:relative;border:1px solid var(--du-border);border-left:3px solid var(--du-rojo);border-radius:var(--du-radius);background:var(--du-surface);padding:var(--du-space-5) var(--du-space-6)}
.attention-head{display:flex;align-items:center;justify-content:space-between;gap:var(--du-space-4);margin-bottom:var(--du-space-4)}
.attention-head h2{margin:0;font:600 1.25rem/1.2 var(--du-font-titulos)}
.attention-head h2 small{margin-left:var(--du-space-3);font:500 .875rem/1 var(--du-font-texto);color:var(--du-text-secondary)}
.att-cols{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--du-space-6)}
.att-col{grid-column:span 6;min-width:0}
.att-col h3{margin:0 0 var(--du-space-2);font:600 .75rem/1.3 var(--du-font-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--du-text-secondary)}
.rows{list-style:none;margin:0;padding:0}
.rows li{display:flex;align-items:center;gap:var(--du-space-3);min-height:40px;border-top:1px solid var(--du-border)}
.rows li:first-child{border-top:0}
.rows .t{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:.9375rem}
.rows .m{color:var(--du-text-secondary);font-size:.8125rem;white-space:nowrap}

.btn{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 var(--du-space-5);border:1px solid transparent;border-radius:var(--du-radius);background:var(--du-action);color:#fff;font:600 .875rem/1 var(--du-font-titulos);letter-spacing:.02em;text-decoration:none;white-space:nowrap;cursor:pointer}
.btn:hover{background:var(--du-action-hover)}
.btn--ghost{background:transparent;border-color:var(--du-control-border);color:var(--du-text)}
.btn--ghost:hover{background:var(--du-surface-raised)}

/* KPIs sobrios */
.kpi{border:1px solid var(--du-border);border-radius:var(--du-radius);background:var(--du-surface);padding:var(--du-space-5) var(--du-space-6)}
.kpi .l{margin:0;color:var(--du-text-secondary);font-size:.875rem}
.kpi .v{margin:var(--du-space-2) 0 var(--du-space-1);font:600 2.25rem/1 var(--du-font-titulos);letter-spacing:-.02em}
.kpi .v small{font-size:1.125rem;color:var(--du-text-secondary);font-weight:400}
.kpi .d{margin:0;color:var(--du-text-secondary);font-size:.8125rem}

/* Tabla de agentes */
.tbl{width:100%;border-collapse:collapse;font-size:.875rem}
.tbl th{padding:0 var(--du-space-3) var(--du-space-2);text-align:left;font:600 .75rem/1.3 var(--du-font-texto);letter-spacing:.06em;text-transform:uppercase;color:var(--du-text-secondary);border-bottom:1px solid var(--du-border)}
.tbl td{padding:0 var(--du-space-3);height:44px;border-bottom:1px solid var(--du-border);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl th:first-child,.tbl td:first-child{padding-left:0}
.tbl th:last-child,.tbl td:last-child{padding-right:0}
.tbl .name{display:flex;align-items:center;gap:var(--du-space-3);font:600 .9375rem/1 var(--du-font-titulos)}
.tbl .sec{color:var(--du-text-secondary)}

/* Actividad */
.feed{list-style:none;margin:0;padding:0}
.feed li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:var(--du-space-3);padding:var(--du-space-3) 0;border-top:1px solid var(--du-border)}
.feed li:first-child{border-top:0;padding-top:0}
.feed time{color:var(--du-text-secondary);font-size:.8125rem;line-height:1.45}
.feed p{margin:0;font-size:.875rem;line-height:1.45}
.feed p span{display:block;color:var(--du-text-secondary);font-size:.8125rem}
.note{margin:var(--du-space-4) 0 0;padding-top:var(--du-space-3);border-top:1px solid var(--du-border);color:var(--du-text-secondary);font-size:.8125rem;line-height:1.5}

/* Kanban */
.toolbar{display:flex;align-items:center;gap:var(--du-space-3)}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 var(--du-space-4);border:1px solid var(--du-control-border);border-radius:var(--du-radius-control);background:transparent;color:var(--du-text);font:500 .875rem/1 var(--du-font-texto);white-space:nowrap}
.chip::after{content:"";width:9px;height:5px;background:currentColor;clip-path:polygon(0 0,100% 0,50% 100%)}
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--du-space-4)}
.col{display:flex;flex-direction:column;gap:var(--du-space-3);min-width:0}
.col-head{display:flex;align-items:center;justify-content:space-between;padding:0 var(--du-space-1) var(--du-space-2);border-bottom:1px solid var(--du-border)}
.col-head h2{margin:0;font:600 .9375rem/1.3 var(--du-font-titulos)}
.col-head span{color:var(--du-text-secondary);font-size:.8125rem}
.card{display:flex;flex-direction:column;gap:var(--du-space-3);padding:var(--du-space-4);border:1px solid var(--du-border);border-radius:var(--du-radius);background:var(--du-surface)}
.card h3{margin:0;font:600 .9375rem/1.35 var(--du-font-texto)}
.card .c{margin:-6px 0 0;color:var(--du-text-secondary);font-size:.8125rem}
.card .f{display:flex;align-items:center;justify-content:space-between;gap:var(--du-space-2)}
.card .f .r{display:flex;align-items:center;gap:var(--du-space-2);color:var(--du-text-secondary);font-size:.75rem}
.prio{display:inline-flex;align-items:center;gap:6px;padding:3px 8px;border:1px solid var(--du-border);border-radius:var(--du-radius-small);font:500 .75rem/1.3 var(--du-font-texto);color:var(--du-text)}
.prio::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--du-gris)}
.prio--alta::before{background:var(--du-error)}
.prio--media::before{background:var(--du-warning)}
.col--done .card h3{color:var(--du-text-secondary);font-weight:500}
.addrow{display:flex;align-items:center;justify-content:center;min-height:40px;border:1px solid var(--du-border);border-radius:var(--du-radius);color:var(--du-text-secondary);font-size:.8125rem}

/* Panel lateral de tareas */
.stack{display:flex;flex-direction:column;gap:var(--du-space-6)}
.items{list-style:none;margin:0;padding:0}
.items li{display:flex;flex-direction:column;gap:6px;padding:var(--du-space-3) 0;border-top:1px solid var(--du-border)}
.items li:first-child{border-top:0;padding-top:0}
.items .t{font-size:.875rem;font-weight:600}
.items .m{display:flex;justify-content:space-between;gap:var(--du-space-2);color:var(--du-text-secondary);font-size:.8125rem}
.alert{padding:var(--du-space-3) var(--du-space-4);border:1px solid var(--du-border);border-left-width:3px;border-radius:var(--du-radius);background:var(--du-surface)}
.alert + .alert{margin-top:var(--du-space-3)}
.alert--err{border-left-color:var(--du-error)}
.alert--warn{border-left-color:var(--du-warning)}
.alert strong{display:block;font-size:.875rem}
.alert--err strong{color:var(--du-error)}
.alert--warn strong{color:var(--du-warning)}
.alert p{margin:4px 0 0;color:var(--du-text-secondary);font-size:.8125rem;line-height:1.45}
.mt6{margin-top:var(--du-space-6)}

/* Ajustes de densidad tras revisión a 1440×900 */
.brand{text-decoration:none;color:inherit}
.main{padding-top:var(--du-space-6);padding-bottom:var(--du-space-6)}
.grid12{gap:var(--du-space-5)}
.attention{padding:var(--du-space-4) var(--du-space-6)}
.attention-head{margin-bottom:var(--du-space-2)}
.rows li{min-height:36px}
.kpi{padding:var(--du-space-4) var(--du-space-5)}
.kpi .v{font-size:2rem;margin:6px 0 2px}
.tbl td{height:40px;white-space:nowrap}
.tbl td:nth-child(3){max-width:0;width:44%;overflow:hidden;text-overflow:ellipsis}
.panel{padding:var(--du-space-5) var(--du-space-6)}
.feed li{padding:10px 0}
.feed p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.feed p span{overflow:hidden;text-overflow:ellipsis}

/* ===== v2 · Identificación por agente (color muestreado del fondo de cada foto) ===== */
.du-ui{
  --agent-dux:#E46567; --agent-duxy:#F99A55; --agent-milo:#5DA2F5; --agent-pix:#E65C83;
  --agent-kiro:#34C777; --agent-flux:#AB6E42; --agent-hue:#DFDDDE;
}
.a-dux{--ag:var(--agent-dux)}.a-duxy{--ag:var(--agent-duxy)}.a-milo{--ag:var(--agent-milo)}.a-pix{--ag:var(--agent-pix)}
.a-kiro{--ag:var(--agent-kiro)}.a-flux{--ag:var(--agent-flux)}.a-hue{--ag:var(--agent-hue)}
.av{display:inline-block;flex:0 0 auto;width:32px;height:32px;border-radius:50%;object-fit:cover;background:var(--du-surface-raised);box-shadow:0 0 0 2px var(--du-surface),0 0 0 3px color-mix(in srgb,var(--ag,#4a4a4a) 70%,transparent)}
.av--24{width:24px;height:24px}
.av--28{width:28px;height:28px}
.av--56{width:56px;height:56px;box-shadow:0 0 0 3px var(--du-surface),0 0 0 4px color-mix(in srgb,var(--ag) 75%,transparent)}
.tbl .name .av{width:28px;height:28px}

/* Kanban: borde izquierdo en color del encargado */
.card[class*="a-"]{border-left:3px solid var(--ag)}

/* Agentes */
.agents{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--du-space-5)}
.agent{display:flex;flex-direction:column;gap:var(--du-space-4);padding:var(--du-space-5);border:1px solid var(--du-border);border-radius:var(--du-radius);background:var(--du-surface)}
.agent-top{display:flex;align-items:center;gap:var(--du-space-4)}
.agent-top h2{margin:0;font:600 1.125rem/1.2 var(--du-font-titulos)}
.agent-top p{margin:4px 0 0;color:var(--du-text-secondary);font-size:.8125rem}
.kv{display:grid;gap:4px}
.kv .k{font:600 .6875rem/1.3 var(--du-font-texto);letter-spacing:.08em;text-transform:uppercase;color:var(--du-text-secondary)}
.kv .v{font-size:.875rem}
.load{display:flex;align-items:center;gap:var(--du-space-3)}
.bar{flex:1;height:4px;border-radius:2px;background:var(--du-surface-raised);overflow:hidden}
.bar i{display:block;height:100%;border-radius:2px;background:var(--ag)}
.load span{font-size:.8125rem;color:var(--du-text-secondary);min-width:34px;text-align:right}
.agent-foot{display:flex;justify-content:space-between;gap:var(--du-space-2);padding-top:var(--du-space-3);border-top:1px solid var(--du-border);font-size:.8125rem;color:var(--du-text-secondary)}
.agent--sup{justify-content:center;background:transparent}
.agent--sup h2{margin:0;font:600 1.125rem/1.2 var(--du-font-titulos)}
.agent--sup p{margin:0;color:var(--du-text-secondary);font-size:.8125rem;line-height:1.5}

/* Aprobaciones */
.info{padding:var(--du-space-3) var(--du-space-5);border:1px solid var(--du-border);border-left:3px solid var(--du-info);border-radius:var(--du-radius);background:var(--du-surface);font-size:.875rem;color:var(--du-text-secondary)}
.info strong{color:var(--du-info);font-weight:600;margin-right:6px}
.req{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--du-space-4);padding:var(--du-space-4) 0;border-top:1px solid var(--du-border)}
.req:first-of-type{border-top:0;padding-top:0}
.req h3{margin:0;font:600 .9375rem/1.35 var(--du-font-texto)}
.req p{margin:4px 0 0;color:var(--du-text-secondary);font-size:.8125rem}
.req .acts{display:flex;gap:var(--du-space-2)}
.btn--sm{min-height:36px;padding:0 var(--du-space-4);font-size:.8125rem}
.hist li{display:flex;align-items:center;gap:var(--du-space-3);padding:var(--du-space-3) 0;border-top:1px solid var(--du-border)}
.hist li:first-child{border-top:0;padding-top:0}
.hist .t{flex:1;min-width:0}
.hist .t b{display:block;font-size:.875rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hist .t span{color:var(--du-text-secondary);font-size:.8125rem}

/* Reglas */
.rules{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--du-space-4)}
.rule{display:flex;flex-direction:column;gap:var(--du-space-2);padding:var(--du-space-4) var(--du-space-5);border:1px solid var(--du-border);border-radius:var(--du-radius);background:var(--du-surface)}
.rule .n{display:flex;justify-content:space-between;align-items:center;color:var(--du-text-secondary);font:600 .75rem/1 var(--du-font-titulos)}
.rule h2{margin:0;font:600 1rem/1.3 var(--du-font-titulos)}
.rule p{margin:0;color:var(--du-text-secondary);font-size:.8125rem;line-height:1.5}

/* Alertas */
.alist{display:flex;flex-direction:column;gap:var(--du-space-3)}
.arow{display:grid;grid-template-columns:110px auto minmax(0,1fr) auto auto;align-items:center;gap:var(--du-space-4);padding:var(--du-space-4) var(--du-space-5);border:1px solid var(--du-border);border-left:3px solid var(--sev);border-radius:var(--du-radius);background:var(--du-surface)}
.arow h3{margin:0;font:600 .9375rem/1.35 var(--du-font-texto)}
.arow p{margin:2px 0 0;color:var(--du-text-secondary);font-size:.8125rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.arow time{color:var(--du-text-secondary);font-size:.8125rem;white-space:nowrap}
.sev-err{--sev:var(--du-error)}.sev-warn{--sev:var(--du-warning)}.sev-info{--sev:var(--du-info)}.sev-ok{--sev:var(--du-success)}
.sevlabel{font:600 .75rem/1.3 var(--du-font-texto);color:var(--sev);letter-spacing:.04em;text-transform:uppercase}
.sum li{display:flex;justify-content:space-between;align-items:center;padding:var(--du-space-3) 0;border-top:1px solid var(--du-border);font-size:.875rem}
.sum li:first-child{border-top:0;padding-top:0}
.sum b{font:600 1.25rem/1 var(--du-font-titulos)}

/* Métricas */
.chart{display:block;width:100%;height:auto}
.chart text{font-family:var(--du-font-texto);font-size:12px;fill:var(--du-text-secondary)}
.chart .lbl{fill:var(--du-text);font-weight:600}
.hb{display:grid;grid-template-columns:120px minmax(0,1fr) 32px;align-items:center;gap:var(--du-space-3);height:36px;font-size:.875rem}
.hb .nm{display:flex;align-items:center;gap:var(--du-space-2);font-weight:600}
.hb .track{height:8px;border-radius:2px;background:var(--du-surface-raised);overflow:hidden}
.hb .track i{display:block;height:100%;border-radius:2px;background:var(--ag)}
.hb .n{text-align:right;color:var(--du-text-secondary)}
.feed--av li{grid-template-columns:28px minmax(0,1fr);align-items:start}
.span-7{grid-column:span 7}.span-5{grid-column:span 5}
.hist{list-style:none;margin:0;padding:0}
.panel-head + .req{border-top:0;padding-top:0}
.agent-foot--2{padding-top:0;border-top:0;margin-top:calc(-1 * var(--du-space-3))}
.agent-foot span:last-child{color:var(--du-text)}
.chart .lbl{font-size:13px}
.stack .hist .t b{white-space:normal}
.stack .hist .t b{white-space:normal!important;overflow:visible;text-overflow:clip}