/* ===== Extras del demo Transformación Digital — Taller Vivo ===== */
.ia-pill{display:inline-flex;align-items:center;gap:5px;font-family:'Space Mono';font-size:10px;font-weight:700;color:#FAF6EF;
  background:var(--ink);border:2px solid var(--rust);padding:3px 8px;margin-left:8px;vertical-align:middle;letter-spacing:.04em}
.feature-split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.feature-split .visual{border:2px solid var(--ink);padding:30px;background:var(--card);min-height:260px;display:flex;align-items:center;justify-content:center;box-shadow:8px 8px 0 var(--shadow)}

/* ===== Catálogo ===== */
.cat-filters{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-bottom:36px}
.chip{border:2px solid var(--ink);background:var(--card);color:var(--ink);padding:9px 18px;font-family:'Space Mono';font-size:12.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:.03em;cursor:pointer;transition:.15s}
.chip:hover{background:var(--mustard)}
.chip.active{background:var(--rust);color:#FAF6EF;border-color:var(--ink)}
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.prod{background:var(--card);border:2px solid var(--ink);overflow:hidden;transition:.15s;display:flex;flex-direction:column;box-shadow:6px 6px 0 var(--shadow)}
.prod:hover{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--shadow)}
.prod .thumb{height:140px;display:flex;align-items:center;justify-content:center;color:#FAF6EF;font-size:40px;border-bottom:2px solid var(--ink)}
.prod .body{padding:18px;flex:1;display:flex;flex-direction:column}
.prod .tag{font-family:'Space Mono';font-size:11px;color:var(--rust);font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.prod h3{font-size:19px;margin:6px 0 6px;font-weight:800;font-family:'Big Shoulders Display';text-transform:uppercase}
.prod p{font-size:14px;color:var(--muted);flex:1;font-family:'Work Sans'}
.prod .foot{display:flex;align-items:center;justify-content:space-between;margin-top:14px;border-top:1px dashed var(--line);padding-top:12px}
.prod .price{font-family:'Big Shoulders Display';font-weight:800;font-size:20px;color:var(--ink)}
.prod .add{background:var(--card);color:var(--ink);border:2px solid var(--ink);padding:8px 12px;font-weight:700;cursor:pointer;
  font-size:11.5px;font-family:'Space Mono';text-transform:uppercase;letter-spacing:.03em}
.prod .add:hover{background:var(--rust);color:#FAF6EF;border-color:var(--ink)}

/* ===== Panel / Dashboard ===== */
.dash{background:var(--paper);min-height:100vh}
.dash-wrap{display:grid;grid-template-columns:230px 1fr;gap:0;min-height:calc(100vh - 76px)}
.dash-side{background:var(--card);border-right:3px solid var(--ink);padding:26px 18px}
.dash-side .sect{font-family:'Space Mono';font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin:18px 0 8px}
.dash-side a{display:flex;align-items:center;gap:10px;padding:10px 12px;color:var(--ink);font-size:14px;font-weight:600;margin-bottom:3px;border:2px solid transparent;font-family:'Work Sans'}
.dash-side a.on{background:var(--mustard);border-color:var(--ink);font-weight:700}
.dash-side a:hover{border-color:var(--ink)}
.dash-main{padding:30px 34px}
.dash-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;flex-wrap:wrap;gap:12px}
.dash-top h1{font-size:30px;font-weight:900}
.dash-top .sub{color:var(--muted);font-size:13px;font-family:'Space Mono';text-transform:uppercase;letter-spacing:.03em}
.badge-live{display:inline-flex;align-items:center;gap:7px;font-family:'Space Mono';font-size:12px;color:var(--ink);font-weight:700;
  background:var(--card);border:2px solid var(--ink);padding:6px 12px;text-transform:uppercase;letter-spacing:.03em}
.badge-live .d{width:8px;height:8px;background:#3F7D4F;animation:pulse 1.6s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:24px}
.kpi{background:var(--card);border:2px solid var(--ink);padding:20px;box-shadow:5px 5px 0 var(--shadow)}
.kpi .l{font-size:12px;color:var(--muted);font-family:'Space Mono';text-transform:uppercase;letter-spacing:.03em}
.kpi .n{font-family:'Big Shoulders Display';font-size:32px;font-weight:900;margin:6px 0 4px}
.kpi .chg{font-size:12px;font-weight:700;font-family:'Space Mono'}
.kpi .up{color:#3F7D4F}.kpi .down{color:var(--rust-d)}
.dash-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;margin-bottom:18px}
.card{background:var(--card);border:2px solid var(--ink);padding:22px;box-shadow:6px 6px 0 var(--shadow)}
.card h3{font-size:18px;margin-bottom:4px;font-weight:800}
.card .cap{font-size:12.5px;color:var(--muted);margin-bottom:18px;font-family:'Work Sans'}
/* bar chart */
.bars{display:flex;align-items:flex-end;gap:14px;height:170px;padding-top:10px}
.bars .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:8px;height:100%;justify-content:flex-end}
.bars .bar{width:100%;max-width:34px;background:var(--rust)}
.bars .bl{font-size:11.5px;color:var(--muted);font-family:'Space Mono'}
/* donut via conic */
.donut{width:150px;height:150px;border-radius:50%;margin:0 auto;background:conic-gradient(var(--rust) 0 46%,var(--mustard) 46% 74%,var(--ink) 74% 100%);
  display:flex;align-items:center;justify-content:center;position:relative;border:2px solid var(--ink)}
.donut:after{content:"";width:88px;height:88px;background:var(--card);border-radius:50%}
.donut .mid{position:absolute;text-align:center}.donut .mid .n{font-family:'Big Shoulders Display';font-weight:900;font-size:22px}
.donut .mid .l{font-size:10.5px;color:var(--muted);font-family:'Space Mono'}
.legend{margin-top:16px}
.legend div{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);margin-bottom:7px;font-family:'Space Mono'}
.legend .sw{width:11px;height:11px;border:1px solid var(--ink)}
/* table */
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:10px 8px;
  border-bottom:2px solid var(--ink);font-family:'Space Mono'}
.tbl td{padding:12px 8px;font-size:13.5px;border-bottom:1px dashed var(--line);font-family:'Work Sans'}
.pill{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border:1.5px solid;font-family:'Space Mono';text-transform:uppercase}
.pill.ok{background:#E8F3EA;color:#3F7D4F;border-color:#3F7D4F}
.pill.wait{background:#FBF0DD;color:#9E6B12;border-color:#9E6B12}
.pill.new{background:#EAEDF5;color:#2A2622;border-color:#2A2622}

/* ===== Chat widget IA ===== */
.chat-fab{position:fixed;bottom:22px;right:22px;z-index:80;width:58px;height:58px;background:var(--rust);border:2px solid var(--ink);
  cursor:pointer;box-shadow:5px 5px 0 var(--shadow);display:flex;align-items:center;justify-content:center;transition:.15s;
  clip-path:polygon(0 0,100% 0,100% 100%,18% 100%)}
.chat-fab:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--shadow)}
.chat-fab .badge{position:absolute;top:-6px;right:-6px;background:var(--mustard);color:var(--ink);border:2px solid var(--ink);font-size:11px;
  font-weight:700;width:20px;height:20px;display:flex;align-items:center;justify-content:center;font-family:'Space Mono'}
.chat-win{position:fixed;bottom:92px;right:22px;z-index:81;width:370px;max-width:calc(100vw - 44px);height:520px;max-height:calc(100vh - 130px);
  background:var(--card);box-shadow:8px 8px 0 var(--shadow);display:none;flex-direction:column;overflow:hidden;border:2px solid var(--ink)}
.chat-win.open{display:flex}
.chat-head{background:var(--ink);color:#FAF6EF;padding:16px 18px;display:flex;align-items:center;gap:12px;border-bottom:3px solid var(--rust)}
.chat-head .av{width:38px;height:38px;background:var(--rust);border:2px solid #FAF6EF;display:flex;align-items:center;justify-content:center;font-size:18px;
  clip-path:polygon(0 0,100% 0,100% 100%,20% 100%)}
.chat-head .nm{font-weight:700;font-family:'Big Shoulders Display';text-transform:uppercase;font-size:15px}
.chat-head .st{font-size:11.5px;opacity:.85;display:flex;align-items:center;gap:6px;font-family:'Space Mono'}
.chat-head .st .d{width:7px;height:7px;background:#4ADE80}
.chat-head .x{margin-left:auto;background:none;border:none;color:#FAF6EF;font-size:22px;cursor:pointer;opacity:.85;line-height:1}
.chat-body{flex:1;overflow-y:auto;padding:18px;background:var(--paper);display:flex;flex-direction:column;gap:12px}
.msg{max-width:82%;padding:11px 14px;font-size:13.5px;line-height:1.5;font-family:'Work Sans';border:2px solid var(--ink)}
.msg.bot{background:var(--card);align-self:flex-start;box-shadow:3px 3px 0 var(--shadow)}
.msg.me{background:var(--mustard);color:var(--ink);align-self:flex-end;box-shadow:3px 3px 0 var(--shadow)}
.typing{align-self:flex-start;background:var(--card);border:2px solid var(--ink);padding:13px 16px;display:flex;gap:4px}
.typing span{width:7px;height:7px;background:var(--muted);animation:blink 1.2s infinite}
.typing span:nth-child(2){animation-delay:.2s}.typing span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,60%,100%{opacity:.3}30%{opacity:1}}
.chat-quick{display:flex;gap:8px;flex-wrap:wrap;padding:10px 14px;background:var(--card);border-top:2px solid var(--ink)}
.chat-quick button{background:var(--paper);color:var(--ink);border:1.5px solid var(--ink);padding:7px 12px;font-size:12px;cursor:pointer;
  font-family:'Space Mono';font-weight:600}
.chat-quick button:hover{background:var(--rust);color:#FAF6EF}
.chat-input{display:flex;gap:8px;padding:12px 14px;border-top:2px solid var(--ink);background:var(--card)}
.chat-input input{flex:1;border:2px solid var(--ink);padding:11px 14px;font-size:13.5px;font-family:'Work Sans';background:var(--paper)}
.chat-input input:focus{outline:none;border-color:var(--rust)}
.chat-input button{background:var(--ink);border:none;width:42px;height:42px;color:#FAF6EF;cursor:pointer;display:flex;align-items:center;
  justify-content:center;flex:none;clip-path:polygon(0 0,100% 0,100% 100%,20% 100%)}

@media(max-width:860px){
  .feature-split{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:1fr 1fr}
  .dash-wrap{grid-template-columns:1fr}
  .dash-side{display:none}
  .kpi-row{grid-template-columns:1fr 1fr}
  .dash-grid{grid-template-columns:1fr}
}
@media(max-width:560px){.cat-grid{grid-template-columns:1fr}}