/* Demo viva: panel de ejemplo. Usa las variables de color de la web. */
#demo-app{margin-top:30px}
.dm-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.dm-tab{font:inherit;font-size:13.5px;color:var(--mute);background:transparent;border:1px solid var(--line);border-radius:18px;padding:8px 16px;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.dm-tab:hover{color:var(--text);border-color:var(--violet)}
.dm-tab.on{color:#0D0B1F;background:var(--lime);border-color:var(--lime);font-weight:600}
.dm-tab:focus-visible,.dm-chip:focus-visible,.dm-sort:focus-visible,.dm-act:focus-visible,.dm-table tr:focus-visible{outline:2px solid var(--lime);outline-offset:2px}

.dm-win{background:var(--s1);border:1px solid var(--violet);border-radius:10px;overflow:hidden;box-shadow:0 20px 60px rgba(75,59,196,.25)}
.dm-bar{display:flex;align-items:center;gap:7px;padding:11px 16px;background:var(--s2);border-bottom:1px solid var(--line)}
.dm-bar i{width:10px;height:10px;border-radius:50%;display:block}
.dm-d1{background:var(--lime)}.dm-d2{background:var(--violet)}.dm-d3{background:var(--line)}
.dm-title{margin-left:10px;font-family:"JetBrains Mono",monospace;font-size:12px;color:var(--mute)}
.dm-ex{margin-left:auto;font-size:11px;font-family:"JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--lime);border:1px solid rgba(198,255,61,.4);border-radius:10px;padding:2px 8px}

.dm-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border-bottom:1px solid var(--line)}
.dm-kpi{background:var(--s1);padding:16px 18px}
.dm-kv{font-family:Inter,system-ui,sans-serif;font-weight:600;font-size:clamp(19px,2.6vw,26px);color:var(--text);line-height:1.2;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.dm-kl{font-size:12px;color:var(--mute);margin-top:4px}

.dm-body{display:grid;grid-template-columns:1.6fr 1fr;gap:0}
.dm-left{padding:16px 18px;border-right:1px solid var(--line);min-width:0}
.dm-right{padding:16px 18px;display:grid;gap:14px;align-content:start;min-width:0}
.dm-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.dm-chip{font:inherit;font-size:12px;color:var(--body);background:transparent;border:1px solid var(--line);border-radius:14px;padding:5px 11px;cursor:pointer}
.dm-chip:hover{border-color:var(--violet)}
.dm-chip.on{background:var(--fill);border-color:var(--violet);color:#fff}
.dm-table{overflow-x:auto}
.dm-table table{width:100%;border-collapse:collapse;font-size:13px}
.dm-table th{text-align:left;font-weight:600;padding:0;border-bottom:1px solid var(--line);white-space:nowrap}
.dm-sort{font:inherit;font-size:11.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--mute);background:none;border:0;padding:8px 10px;cursor:pointer;width:100%;text-align:left}
.dm-sort:hover{color:var(--lime)}
.dm-table td{padding:10px;border-bottom:1px solid rgba(46,42,99,.6);color:var(--body);white-space:nowrap}
.dm-table td.num{text-align:right;font-variant-numeric:tabular-nums}
.dm-table tbody tr{cursor:pointer;transition:background .15s}
.dm-table tbody tr:hover{background:rgba(124,92,255,.12)}
.dm-table tbody tr.sel{background:rgba(124,92,255,.22)}
.dm-count{font-size:12px;color:var(--mute);margin-top:10px}

.dm-badge{display:inline-block;font-size:11.5px;padding:2px 9px;border-radius:11px;border:1px solid var(--line);color:var(--body)}
.tone-ok{color:var(--lime);border-color:rgba(198,255,61,.45)}
.tone-run{color:#B9A8FF;border-color:rgba(124,92,255,.7)}
.tone-warn{color:#FFC36B;border-color:rgba(255,195,107,.5)}
.tone-bad{color:#FF8FA3;border-color:rgba(255,143,163,.5)}
.tone-idle{color:var(--mute);border-color:var(--line)}
.dm-chip.tone-ok,.dm-chip.tone-run,.dm-chip.tone-warn,.dm-chip.tone-bad,.dm-chip.tone-idle{background:transparent}
.dm-chip.on[class*="tone-"]{background:var(--fill);color:#fff}

.dm-card{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:14px 16px}
.dm-ct{font-family:Michroma,Inter,sans-serif;font-size:12.5px;color:var(--text);margin-bottom:12px;line-height:1.35}
.dm-empty{font-size:13px;color:var(--mute);margin:0}
.dm-bl{display:grid;grid-template-columns:minmax(96px,1.2fr) 1.6fr auto;gap:8px;align-items:center;margin-bottom:9px;font-size:12px}
.dm-bn{color:var(--body);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dm-bt{height:8px;background:var(--line);border-radius:4px;overflow:hidden;display:block}
.dm-bf{display:block;height:100%;background:var(--lime);border-radius:4px;transition:width .45s ease}
.dm-bv{color:var(--mute);font-variant-numeric:tabular-nums;white-space:nowrap}
.dm-dl{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:12px 0 14px;font-size:13px}
.dm-dl dt{color:var(--mute)}.dm-dl dd{margin:0;color:var(--text)}
.dm-act{font:inherit;font-size:13px;font-weight:600;background:var(--lime);color:#0D0B1F;border:0;border-radius:6px;padding:9px 14px;cursor:pointer}
.dm-act:hover{filter:brightness(1.08)}
.dm-note{font-size:13px;color:var(--mute);margin-top:14px}

@media(max-width:860px){
  .dm-body{grid-template-columns:1fr}
  .dm-left{border-right:0;border-bottom:1px solid var(--line)}
  .dm-kpis{grid-template-columns:repeat(2,1fr)}
}
@media(prefers-reduced-motion:reduce){.dm-bf,.dm-tab,.dm-table tbody tr{transition:none}}