/* ═══════════════════════════════════════════════════
   Novatek · illu.css — Sistema de ilustraciones
   Animaciones 100% compositeables (transform + opacity)
   ═══════════════════════════════════════════════════ */
:root {
  --i-cyan: #00b4d8;
  --i-cyan-t: #006d8f;
  --i-navy: #0b3d91;
  --i-green: #166534;
  --i-orange: #c2410c;
  --i-bg: #f8fafc;
  --i-card: #ffffff;
  --i-border: #e2e8f0;
  --i-text: #1a2535;
  --i-text2: #475569;
  --i-muted: #5a6a7a;
}

/* ─── KEYFRAMES — solo transform + opacity (GPU compositable) ── */
@keyframes illu-appear {
  0%   { opacity:0; transform:translateY(8px); }
  12%  { opacity:1; transform:translateY(0); }
  80%  { opacity:1; transform:translateY(0); }
  95%  { opacity:0; transform:translateY(-4px); }
  100% { opacity:0; transform:translateY(8px); }
}
@keyframes illu-slide {
  0%   { opacity:0; transform:translateX(-10px); }
  14%  { opacity:1; transform:translateX(0); }
  80%  { opacity:1; transform:translateX(0); }
  95%  { opacity:0; transform:translateX(8px); }
  100% { opacity:0; transform:translateX(-10px); }
}
/* Barras: scaleY desde abajo — NO anima height */
@keyframes illu-grow-bar {
  0%   { opacity:0; transform:scaleY(0); }
  16%  { opacity:1; transform:scaleY(1); }
  80%  { opacity:1; transform:scaleY(1); }
  95%  { opacity:0; transform:scaleY(0); }
  100% { opacity:0; transform:scaleY(0); }
}
/* Progress: scaleX desde izquierda — NO anima width */
@keyframes illu-fill-prog {
  0%   { opacity:0; transform:scaleX(0); }
  16%  { opacity:1; transform:scaleX(1); }
  80%  { opacity:1; transform:scaleX(1); }
  95%  { opacity:0; transform:scaleX(0); }
  100% { opacity:0; transform:scaleX(0); }
}
@keyframes illu-blink {
  0%,100% { opacity:1; }
  50%     { opacity:.25; }
}

/* ─── ANIMATION CLASSES ─────────────────────────── */
.a  { opacity:0; animation:illu-appear   5.5s ease infinite; animation-delay:calc(var(--i,0)*220ms); will-change:transform,opacity; }
.si { opacity:0; animation:illu-slide    5.5s ease infinite; animation-delay:calc(var(--i,0)*220ms); will-change:transform,opacity; }

/* Barra: altura fija via --bh, scaleY anima desde transform-origin:bottom */
.bar {
  height: var(--bh);
  transform-origin: bottom center;
  transform: scaleY(0);
  opacity: 0;
  animation: illu-grow-bar 5.5s ease infinite;
  animation-delay: calc(var(--i,0)*220ms);
  will-change: transform,opacity;
}

/* Progress: ancho fijo via --pw, scaleX anima desde transform-origin:left */
.pf {
  width: var(--pw);
  transform-origin: left center;
  transform: scaleX(0);
  opacity: 0;
  animation: illu-fill-prog 5.5s ease infinite;
  animation-delay: calc(var(--i,0)*220ms);
  will-change: transform,opacity;
}

/* ─── WRAPPER ───────────────────────────────────── */
.illu {
  background: var(--i-bg);
  border: 1px solid var(--i-border);
  border-radius: 14px;
  padding: 18px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 13px;
  overflow: hidden;
  position: relative;
}

/* ─── WINDOW CHROME ─────────────────────────────── */
.win-bar {
  display: flex; align-items: center; gap: 6px;
  background: white; border-radius: 8px;
  padding: 7px 12px; margin-bottom: 14px;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  border: 1px solid var(--i-border);
}
.dot { width:8px; height:8px; border-radius:50%; }
.dot-r { background:#ef4444; }
.dot-y { background:#fbbf24; }
.dot-g { background:#22c55e; }
.win-title { font-size:11px; font-weight:700; color:var(--i-navy); margin-left:4px; }

/* ─── KPI GRID ──────────────────────────────────── */
.kpis { display:grid; gap:8px; margin-bottom:12px; }
.kpis-3 { grid-template-columns:repeat(3,1fr); }
.kpis-2 { grid-template-columns:repeat(2,1fr); }
.kpi {
  background:white; border-radius:10px; padding:12px;
  box-shadow:0 1px 6px rgba(0,0,0,.06);
  border:1px solid var(--i-border);
}
.kpi-lbl { display:block; font-size:10px; color:var(--i-muted); font-weight:700; text-transform:uppercase; letter-spacing:.5px; margin-bottom:5px; }
.kpi-val { font-size:20px; font-weight:800; line-height:1; }

/* ─── PANEL ─────────────────────────────────────── */
.panel {
  background:white; border-radius:10px; padding:12px;
  box-shadow:0 1px 6px rgba(0,0,0,.06);
  border:1px solid var(--i-border);
  margin-bottom:10px;
}
.ptitle { font-size:10px; font-weight:700; color:var(--i-text2); text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px; }

/* ─── ROWS ──────────────────────────────────────── */
.row { display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid #f1f5f9; }
.row:last-child { border-bottom:none; }
.rlbl { flex:1; font-size:11px; color:var(--i-text2); }
.rval { font-size:11px; font-weight:700; }

/* ─── BADGES ────────────────────────────────────── */
.badge { font-size:9px; font-weight:700; padding:2px 8px; border-radius:99px; white-space:nowrap; }
.b-blue   { background:#dbeafe; color:#1d4ed8; }
.b-cyan   { background:#cffafe; color:var(--i-cyan-t); }
.b-green  { background:#dcfce7; color:var(--i-green); }
.b-orange { background:#ffedd5; color:var(--i-orange); }
.b-red    { background:#fee2e2; color:#b91c1c; }
.b-purple { background:#f3e8ff; color:#7c3aed; }
.b-gray   { background:#f1f5f9; color:var(--i-muted); }

/* ─── STATUS DOT ─────────────────────────────────── */
.sdot { width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.sdot-ok  { background:#22c55e; }
.sdot-warn{ background:#fbbf24; animation:illu-blink 2s infinite; will-change:opacity; }
.sdot-err { background:#ef4444; animation:illu-blink 1.2s infinite; will-change:opacity; }

/* ─── BAR CHART ─────────────────────────────────── */
.bars-wrap { background:white; border-radius:10px; padding:12px; box-shadow:0 1px 6px rgba(0,0,0,.06); border:1px solid var(--i-border); }
.bars { display:flex; align-items:flex-end; gap:5px; height:56px; margin-top:8px; }
.bc { display:flex; flex-direction:column; align-items:center; gap:4px; flex:1; height:100%; justify-content:flex-end; }
.bc span { font-size:9px; color:var(--i-text2); font-weight:600; }
/* .bar height ya viene definido arriba como --bh */

/* ─── PROGRESS ──────────────────────────────────── */
.prog-track { background:#f1f5f9; border-radius:99px; height:6px; flex:1; overflow:hidden; }
.prog-fill { height:100%; border-radius:99px; }