/* Demo del tablero de cumplimiento — PORTADA por scripts/portar-demo.py desde
   /root/innovaycree-cl/diseno/demo-tablero.html (aprobada por David el 9 oct 2026).
   No editar a mano: se edita la demo y se vuelve a portar. Todo vive bajo .dm. */
.dm{color-scheme:dark}
.dm button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.dm{
  --bg:#121417; --raise:#16191D; --panel:#1A1D22; --panel2:#20242A; --line:#2A2E35; --line2:#353A42;
  --text:#E9EAEE; --text2:#C6C8D0; --muted:#9498A3;
  --amber:#F5B649; --amber-hi:#FFD27A; --on-amber:#121417;
  --ok:#8FD6A6; --warn:#E5C04B; --bad:#FF7A66;
  --f-disp:"Schibsted Grotesk",system-ui,sans-serif; --f-body:"Source Sans 3",system-ui,sans-serif;
  --f-mono:"Geist Mono",ui-monospace,monospace; --f-hand:"Kalam","Comic Sans MS",cursive;
  color-scheme:dark;
}
.dm *{box-sizing:border-box}
.dm button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.dm .nota{font-family:var(--f-hand);color:var(--amber);font-size:20px;line-height:1.2}
.dm .app{border:1px solid var(--line2);border-radius:14px;background:var(--raise);overflow:hidden;box-shadow:0 40px 120px -40px rgba(0,0,0,.8),0 0 0 1px rgba(245,182,73,.04)}
.dm .chrome{display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--panel);flex-wrap:wrap}
.dm .dots{display:flex;gap:6px}
.dm .dots i{width:10px;height:10px;border-radius:50%;background:var(--line2)}
.dm .chrome .url{font-family:var(--f-mono);font-size:12px;color:var(--muted);flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dm .chrome .ficticio{font-family:var(--f-mono);font-size:11px;color:var(--amber);border:1px dashed rgba(245,182,73,.5);border-radius:999px;padding:3px 10px;white-space:nowrap}
.dm .shell{display:grid;grid-template-columns:218px minmax(0,1fr)}
.dm .side{border-right:1px solid var(--line);padding:16px 10px;display:grid;gap:4px;align-content:start;background:var(--panel)}
.dm .side .emp{padding:6px 10px 14px;border-bottom:1px solid var(--line);margin-bottom:8px}
.dm .side .emp b{display:block;font-family:var(--f-disp);font-size:15px}
.dm .side .emp span{font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.dm .side button{display:flex;align-items:center;justify-content:space-between;gap:8px;text-align:left;padding:9px 10px;border-radius:8px;font-size:15px;color:var(--text2);width:100%}
.dm .side button:hover{background:var(--panel2);color:var(--text)}
.dm .side button[aria-pressed="true"]{background:rgba(245,182,73,.1);color:var(--text);box-shadow:inset 2px 0 0 var(--amber)}
.dm .side .sc{font-family:var(--f-mono);font-size:12px;font-variant-numeric:tabular-nums}
.dm .side .lbl{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);padding:12px 10px 4px}
.dm .main{padding:18px clamp(12px,2vw,22px) 22px;display:grid;gap:16px;min-width:0}
.dm .mhead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:12px}
.dm .mhead h2{font-family:var(--f-disp);font-weight:700;font-size:24px;margin:0;letter-spacing:-.01em}
.dm .mhead p{margin:2px 0 0;color:var(--muted);font-size:14px}
.dm .seg{display:flex;gap:4px;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:3px;flex-wrap:wrap}
.dm .seg button{font-size:13px;padding:5px 12px;border-radius:999px;color:var(--text2)}
.dm .seg button[aria-pressed="true"]{background:var(--panel2);color:var(--text);box-shadow:0 0 0 1px var(--line2)}
.dm .card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;min-width:0}
.dm .card h3{margin:0 0 10px;font-size:13px;font-family:var(--f-mono);font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;gap:8px;align-items:center}
.dm .kpis{display:grid;grid-template-columns:1.25fr repeat(3,minmax(0,1fr));gap:12px}
.dm .kpi{display:grid;gap:4px;align-content:start}
.dm .kpi .v{font-family:var(--f-disp);font-weight:800;font-size:38px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.dm .kpi .d{font-size:13px;color:var(--muted)}
.dm .kpi .d b{font-weight:600}
.dm .up{color:var(--ok)}
.dm .down{color:var(--bad)}
.dm .ring{display:flex;gap:14px;align-items:center}
.dm .ring svg{width:84px;height:84px;flex:none}
.dm .grid2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:12px}
.dm .grid3{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:12px}
.dm .chart{position:relative}
.dm .chart svg{width:100%;height:190px;display:block}
.dm .tip{position:absolute;pointer-events:none;background:var(--panel2);border:1px solid var(--line2);border-radius:8px;padding:6px 10px;font-size:13px;white-space:nowrap;transform:translate(-50%,-110%);opacity:0;transition:opacity .12s}
.dm .tip b{font-family:var(--f-mono);font-weight:500}
.dm .bars{display:grid;gap:9px}
.dm .bar{display:grid;grid-template-columns:132px minmax(0,1fr) 40px;gap:10px;align-items:center;font-size:14px;text-align:left;width:100%;padding:2px 0;border-radius:6px}
.dm .bar:hover .tr{background:var(--line2)}
.dm .bar .tr{display:block;height:8px;background:var(--line);border-radius:99px;overflow:hidden}
.dm .bar .fi{display:block;width:0;height:100%;border-radius:99px;transition:width .7s cubic-bezier(.2,.8,.2,1)}
.dm .bar .n{font-family:var(--f-mono);font-size:13px;text-align:right;font-variant-numeric:tabular-nums}
.dm .bar.act{color:var(--amber)}
.dm .heat{overflow-x:auto}
.dm .heat table{border-collapse:separate;border-spacing:4px;width:100%;min-width:520px;table-layout:fixed;font-size:13px}
.dm .heat th:first-child{width:120px}
.dm .heat th{font-weight:600;color:var(--muted);text-align:left;font-size:12px;padding:0 4px}
.dm .heat th.c{text-align:center}
.dm .heat td{height:34px;border-radius:6px;text-align:center;font-family:var(--f-mono);font-size:12px;font-variant-numeric:tabular-nums;color:#121417;cursor:default;transition:transform .12s}
.dm .heat td:hover{transform:scale(1.07)}
.dm .heat td.dim{opacity:.28}
.dm .tbl{overflow-x:auto}
.dm .tbl table{border-collapse:collapse;width:100%;min-width:640px;font-size:14px}
.dm .tbl th{text-align:left;font-family:var(--f-mono);font-weight:500;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:6px 8px;border-bottom:1px solid var(--line)}
.dm .tbl td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
.dm .tbl tr.row{cursor:pointer}
.dm .tbl tr.row:hover td{background:var(--panel2)}
.dm .tbl .ob b{font-weight:600;display:block}
.dm .tbl .ob span{font-size:12px;color:var(--muted)}
.dm .chip{font-family:var(--f-mono);font-size:11px;padding:3px 8px;border-radius:999px;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.dm .chip::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.dm .chip.ok{color:var(--ok);background:rgba(143,214,166,.1)}
.dm .chip.warn{color:var(--warn);background:rgba(229,192,75,.1)}
.dm .chip.bad{color:var(--bad);background:rgba(255,122,102,.1)}
.dm .days{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:13px}
.dm .ev{display:flex;gap:3px}
.dm .ev i{width:8px;height:14px;border-radius:2px;background:var(--line2)}
.dm .ev i.on{background:var(--amber)}
.dm .av{width:26px;height:26px;border-radius:50%;display:inline-grid;place-items:center;font-size:11px;font-weight:700;background:var(--panel2);border:1px solid var(--line2);color:var(--text2)}
.dm .feed{display:grid;gap:0;max-height:252px;overflow:hidden;font-size:13.5px}
.dm .feed div{display:grid;grid-template-columns:44px 74px minmax(0,1fr);gap:8px;padding:7px 0;border-bottom:1px dashed var(--line);animation:entra .5s ease both}
.dm .feed time{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.dm .feed .who{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--amber)}
.dm .feed .who.ag{color:var(--ok)}
@keyframes entra{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.dm .live{font-family:var(--f-mono);font-size:11px;color:var(--amber);display:inline-flex;gap:6px;align-items:center;text-transform:uppercase;letter-spacing:.12em}
.dm .live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber);animation:pulso 1.6s infinite}
@keyframes pulso{50%{opacity:.25}}
.dm .vigia{border-color:rgba(245,182,73,.35);background:linear-gradient(180deg,rgba(245,182,73,.06),transparent 70%),var(--panel)}
.dm .vigia p{margin:0 0 8px;font-size:14.5px}
.dm .vigia .src{font-family:var(--f-mono);font-size:11.5px;color:var(--muted)}
.dm .vigia button{margin-top:6px;font-size:13px;color:var(--amber);border-bottom:1px solid currentColor}
.dm .agente{display:grid;gap:10px}
.dm .qs{display:flex;flex-wrap:wrap;gap:8px}
.dm .qs button{border:1px solid var(--line2);border-radius:999px;padding:6px 12px;font-size:13.5px;color:var(--text2);text-align:left}
.dm .qs button:hover,.dm .qs button[aria-pressed="true"]{border-color:var(--amber);color:var(--text)}
.dm .chat{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:12px 14px;min-height:170px;display:grid;gap:10px;align-content:start;font-size:14.5px}
.dm .msg.u{justify-self:end;background:var(--panel2);border-radius:12px 12px 2px 12px;padding:7px 12px;max-width:85%}
.dm .msg.a{max-width:96%}
.dm .msg.a ol{margin:6px 0;padding-left:20px}
.dm .msg.a li{margin:3px 0}
.dm .fuentes{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.dm .fuentes span{font-family:var(--f-mono);font-size:11px;color:var(--text2);border:1px solid var(--line2);border-radius:6px;padding:3px 7px}
.dm .cursor{display:inline-block;width:8px;height:15px;background:var(--amber);vertical-align:-2px;animation:pulso 1s infinite}
.dm .muted{color:var(--muted)}
.dm .drawer{position:fixed;inset:0 0 0 auto;width:min(440px,100%);background:var(--panel);border-left:1px solid var(--line2);z-index:20;transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.8,.2,1);padding:calc(20px + env(safe-area-inset-top,0px)) 22px 22px;display:grid;gap:14px;align-content:start;overflow-y:auto;box-shadow:-30px 0 80px rgba(0,0,0,.5)}
.dm .drawer.open{transform:none}
.dm .drawer .x{justify-self:end;font-size:14px;color:var(--muted);border:1px solid var(--line2);border-radius:999px;padding:4px 12px}
.dm .drawer h4{font-family:var(--f-disp);font-size:22px;margin:0;line-height:1.15}
.dm .drawer dl{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 12px;margin:0;font-size:14.5px}
.dm .drawer dt{color:var(--muted)}
.dm .drawer dd{margin:0}
.dm .hist{display:grid;gap:8px;font-size:14px;border-left:1px solid var(--line2);padding-left:14px}
.dm .hist div time{font-family:var(--f-mono);font-size:12px;color:var(--muted);display:block}
.dm .velo{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:19;opacity:0;pointer-events:none;transition:opacity .2s}
.dm .velo.open{opacity:1;pointer-events:auto}
@media (max-width:1060px){.dm .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
.dm .grid2,.dm .grid3{grid-template-columns:1fr}}
@media (max-width:820px){.dm .shell{grid-template-columns:1fr}
.dm .side{border-right:0;border-bottom:1px solid var(--line);display:flex;overflow-x:auto;gap:6px;padding:10px}
.dm .side .emp,.dm .side .lbl{display:none}
.dm #areas{display:flex;gap:6px}
.dm .side button{width:auto;white-space:nowrap;flex:none}
.dm .side button[aria-pressed="true"]{box-shadow:inset 0 -2px 0 var(--amber)}}
@media (max-width:480px){.dm .kpis{grid-template-columns:1fr 1fr}
.dm .kpi .v{font-size:30px}
.dm .ring svg{width:64px;height:64px}
.dm .bar{grid-template-columns:104px minmax(0,1fr) 34px}
.dm .feed div{grid-template-columns:40px minmax(0,1fr)}
.dm .feed .who{grid-column:2}
.dm .card h3 .muted{display:none}
.dm .feed div>span:last-child{grid-column:2}}
.dm .flujo{margin:0;display:grid;gap:8px}
.dm .flujo svg{width:100%;height:auto;display:block;overflow:visible}
.dm .flujo .cab{fill:none;stroke:#353A42;stroke-width:1.2;stroke-dasharray:3 5}
.dm .flujo .nodo rect{fill:#1A1D22;stroke:#353A42;transition:stroke .3s}
.dm .flujo .nodo text{fill:#C6C8D0;font:13px "Source Sans 3",system-ui,sans-serif;transition:fill .3s}
.dm .flujo .nodo.on rect{stroke:#F5B649}
.dm .flujo .nodo.on text{fill:#E9EAEE}
.dm .flujo .halo{fill:rgba(245,182,73,.06)}
.dm .flujo .halo.pulse{animation:halo .6s ease-out}
@keyframes halo{0%{fill:rgba(245,182,73,.32)}100%{fill:rgba(245,182,73,.06)}}
.dm .flujo .orbita{fill:none;stroke:#F5B649;stroke-width:1.5;stroke-dasharray:4 8;transform-box:fill-box;transform-origin:center;animation:gira 14s linear infinite}
@keyframes gira{to{transform:rotate(360deg)}}
.dm .flujo .nucleo{fill:#20242A;stroke:#F5B649;stroke-width:2}
.dm .flujo .nt{fill:#E9EAEE;font:700 15px "Schibsted Grotesk",system-ui,sans-serif;text-anchor:middle}
.dm .flujo .ns{fill:#9498A3;font:10.5px "Geist Mono",monospace;text-anchor:middle}
.dm .flujo figcaption{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 16px;align-items:baseline}
.dm .flujo .cnt{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.dm .flujo .cnt b{color:var(--text);font-weight:500;font-variant-numeric:tabular-nums}
.dm .estado{display:flex;flex-wrap:wrap;gap:4px 22px;padding:7px 16px;border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:11.5px;color:var(--muted);background:var(--bg)}
.dm .estado b{color:var(--text2);font-weight:500;font-variant-numeric:tabular-nums}
.dm .estado .ok{display:inline-flex;gap:6px;align-items:center}
.dm .estado .ok::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok);animation:pulso 2s infinite}
.dm .tbl tr.row td{transition:background .5s}
.dm .tbl tr.row.flash td{background:rgba(143,214,166,.11)}
.dm .tbl tr.row.scan td{background:rgba(245,182,73,.08)}
.dm .ev i.nuevo{animation:seg 1s ease}
@keyframes seg{0%{background:#FFF1C9;box-shadow:0 0 12px #F5B649}100%{box-shadow:none}}
.dm .kpi .v.bump{animation:bump .7s ease}
@keyframes bump{0%{color:#FFD27A;transform:translateY(-3px)}100%{transform:none}}
.dm .vigia.alerta{animation:alerta 1.8s ease}
@keyframes alerta{0%,100%{box-shadow:none}30%{box-shadow:0 0 0 1px #F5B649,0 0 34px rgba(245,182,73,.28)}}
.dm .heat td.pulse{animation:celda 1.4s ease}
@keyframes celda{0%{box-shadow:0 0 0 2px #E9EAEE,0 0 16px rgba(233,234,238,.5)}100%{box-shadow:none}}
.dm .app{max-width:1140px;margin-inline:auto}
.dm .main{gap:12px;padding:14px clamp(10px,1.6vw,18px) 18px}
.dm .card{padding:12px 14px}
.dm .kpi .v{font-size:32px}
.dm .ring svg{width:70px;height:70px}
.dm .tbl table{font-size:13.5px}
.dm .tbl td{padding:7px 8px}
.dm .chart svg{height:160px}
.dm .mhead h2{font-size:21px}
.dm .side{padding:12px 8px}
.dm .side button{padding:7px 10px;font-size:14px}
@media (max-width:900px){.dm .flujo{max-width:560px}}
@media (prefers-reduced-motion:reduce){.dm *{animation:none!important;transition:none!important}}