/* Ilha Técnica — visual premium. Uso as vars globais (--steel/--vault/--ok/--warn/--alert). */
.il-wrap { display:flex; flex-direction:column; gap:18px; padding:4px 2px 24px; }

/* Hero */
.il-hero {
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  padding:22px 26px; border-radius:16px;
  background: linear-gradient(120deg, #1e293b 0%, #0f172a 55%, #1e40af 130%);
  color:#f8fafc; box-shadow: 0 10px 30px -12px rgba(15,23,42,.45);
  position:relative; overflow:hidden;
}
.il-hero::before {
  content:''; position:absolute; inset:0;
  background: radial-gradient(circle at 85% -20%, rgba(96,165,250,.28), transparent 50%);
  pointer-events:none;
}
.il-hero-txt h2 { margin:0 0 6px; font: 700 24px/1.1 'Space Grotesk', system-ui, sans-serif; letter-spacing:-.5px; }
.il-hero-txt p  { margin:0; font: 400 13px/1.5 Inter, sans-serif; opacity:.78; max-width:640px; }
.il-hero-badge {
  display:inline-flex; align-items:center; gap:6px;
  background: rgba(34,197,94,.15); color:#4ade80;
  padding:6px 12px; border-radius:999px; font: 600 11px Inter, sans-serif;
  border:1px solid rgba(74,222,128,.3);
}
.il-hero-badge span { animation: ilPulse 1.4s infinite; }
@keyframes ilPulse { 0%,100%{opacity:1} 50%{opacity:.35} }

/* KPIs clicáveis (drill BI) */
.il-kpis {
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px;
}
.il-kpi {
  background:#fff; border:1px solid #e5e7eb; border-radius:14px; padding:16px 18px;
  position:relative; transition: transform .15s, box-shadow .15s, border-color .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.il-kpi.clk { cursor:pointer; }
.il-kpi.clk:hover { transform: translateY(-2px); box-shadow: 0 8px 20px -8px rgba(15,23,42,.18); }
.il-kpi.on { border-color:#1e40af; box-shadow: 0 0 0 3px rgba(30,64,175,.12); }
.il-kpi-ico { position:absolute; top:14px; right:16px; font-size:18px; opacity:.55; }
.il-kpi-val { font: 700 28px/1 'Space Grotesk', sans-serif; color:#0f172a; letter-spacing:-.5px; }
.il-kpi-lbl { font: 600 12px Inter, sans-serif; color:#1e293b; margin-top:6px; text-transform:uppercase; letter-spacing:.4px; }
.il-kpi-sub { font: 400 11px Inter, sans-serif; color:#64748b; margin-top:2px; }
.il-kpi.t-ok   .il-kpi-val { color:#059669; }
.il-kpi.t-warn .il-kpi-val { color:#d97706; }
.il-kpi.t-bad  .il-kpi-val { color:#dc2626; }

/* Toolbar */
.il-toolbar {
  display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px;
  padding: 4px 2px;
}
.il-sort { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.il-sort > span { font: 500 11px Inter, sans-serif; color:#64748b; text-transform:uppercase; letter-spacing:.5px; margin-right:6px; }
.il-sort button {
  border:1px solid #e2e8f0; background:#fff; color:#334155;
  padding:6px 12px; border-radius:8px; font: 500 12px Inter, sans-serif; cursor:pointer;
  transition: all .15s;
}
.il-sort button:hover { border-color:#94a3b8; }
.il-sort button.on { background:#0f172a; color:#fff; border-color:#0f172a; }
.il-legenda { display:flex; gap:14px; font: 500 11px Inter, sans-serif; }
.il-lg { display:inline-flex; align-items:center; gap:5px; color:#475569; }
.il-lg-n1 { color:#059669; } .il-lg-n2 { color:#d97706; } .il-lg-ab { color:#64748b; }

/* Grid de cards por atendente */
.il-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(420px,1fr)); gap:14px; }
.il-empty { padding:40px; text-align:center; color:#64748b; background:#fff; border-radius:12px; border:1px dashed #cbd5e1; }

.il-card {
  background:#fff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden;
  transition: box-shadow .2s, transform .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.il-card:hover { box-shadow: 0 10px 30px -12px rgba(15,23,42,.2); transform: translateY(-1px); }
.il-card.open { box-shadow: 0 12px 40px -14px rgba(30,64,175,.25); border-color:#c7d2fe; }

.il-card-head {
  display:flex; align-items:center; gap:14px; padding:16px 18px; cursor:pointer;
}
.il-avatar {
  width:44px; height:44px; border-radius:12px; flex-shrink:0;
  background: linear-gradient(135deg,#1e40af,#0ea5e9);
  color:#fff; display:flex; align-items:center; justify-content:center;
  font: 700 14px 'Space Grotesk', sans-serif; letter-spacing:.5px;
  box-shadow: 0 4px 10px -3px rgba(30,64,175,.4);
}
.il-card-info { flex:1; min-width:0; }
.il-card-nome {
  font: 600 14px Inter, sans-serif; color:#0f172a;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.il-card-metas { display:flex; gap:14px; margin-top:4px; flex-wrap:wrap; }
.il-meta { font: 400 11px Inter, sans-serif; color:#64748b; }
.il-meta b { font: 600 12px 'JetBrains Mono', monospace; color:#0f172a; }
.il-meta.il-t-ok   b { color:#059669; }
.il-meta.il-t-warn b { color:#d97706; }
.il-meta.il-t-bad  b { color:#dc2626; }

.il-card-big {
  text-align:right; padding-right:6px; border-left:1px solid #f1f5f9; padding-left:14px;
}
.il-big-val { font: 700 22px/1 'Space Grotesk', sans-serif; color:#059669; letter-spacing:-.5px; }
.il-big-lbl { font: 500 10px Inter, sans-serif; color:#64748b; text-transform:uppercase; letter-spacing:.4px; margin-top:3px; }
.il-card-arrow { color:#94a3b8; font-size:14px; }

/* Barra empilhada N1/N2/Aberto */
.il-barstack {
  display:flex; height:26px; margin:0 18px 16px; border-radius:8px; overflow:hidden;
  background:#f1f5f9;
}
.il-b { display:flex; align-items:center; justify-content:center; transition: width .3s; }
.il-b span { font: 600 11px 'JetBrains Mono', monospace; color:#fff; }
.il-b-n1 { background: linear-gradient(90deg,#10b981,#059669); }
.il-b-n2 { background: linear-gradient(90deg,#f59e0b,#d97706); }
.il-b-ab { background: #cbd5e1; }
.il-b-ab span { color:#475569; }

/* Detalhe expandido */
.il-detalhe { padding:0 18px 18px; animation: ilFade .2s ease-out; }
@keyframes ilFade { from{opacity:0; transform:translateY(-4px);} to{opacity:1;} }
.il-tab { width:100%; border-collapse:collapse; font: 400 12px Inter, sans-serif; }
.il-tab th {
  text-align:left; padding:8px 10px; font: 600 10px Inter, sans-serif;
  color:#64748b; text-transform:uppercase; letter-spacing:.5px;
  border-bottom:1px solid #e2e8f0; background:#f8fafc;
}
.il-tab td { padding:8px 10px; border-bottom:1px solid #f1f5f9; color:#334155; }
.il-tab tr:last-child td { border-bottom:0; }
.il-tab tr:hover td { background:#f8fafc; }
.il-num { font-family:'JetBrains Mono', monospace; text-align:right; }

.il-tag {
  display:inline-block; padding:2px 8px; border-radius:6px;
  font: 600 10px Inter, sans-serif; letter-spacing:.3px;
}
.il-tg-n1  { background:#d1fae5; color:#065f46; }
.il-tg-n2  { background:#fef3c7; color:#92400e; }
.il-tg-ab  { background:#e2e8f0; color:#475569; }
.il-tg-ok  { background:#d1fae5; color:#065f46; }
.il-tg-bad { background:#fee2e2; color:#991b1b; }

@media (max-width: 720px) {
  .il-grid { grid-template-columns:1fr; }
  .il-card-big { display:none; }
  .il-hero { flex-direction:column; align-items:flex-start; }
}