#ejemplo{
  --kr-primary:#015F83;
  --kr-primary-dark:#063E52;
  --kr-primary-light:#3F8AA8;
  --kr-primary-tint:#EAF2F5;
  --kr-warning:#E0A752;
  --kr-warning-bg:#FAEEDC;
  --kr-success:#5C9270;
  --kr-success-bg:#E7F0EA;
  --kr-danger:#C0654A;
  --kr-text:#1E2A30;
  --kr-text-muted:#6C7378;
  --kr-divider:#DCE4E8;
  --kr-bg:#F2F6F8;
}

.pd-blob.kr-blob{ background:var(--demo-fondo); }

.kr-app-screen{ font-family:'Figtree', -apple-system, sans-serif; background:var(--kr-bg); }

.kr-app-header{
  background:linear-gradient(135deg, var(--kr-primary-dark), var(--kr-primary));
  padding:26px 18px 34px;
  border-radius:0 0 22px 22px;
  color:#fff;
  opacity:0; transform:translateY(-10px);
  transition:opacity .5s ease, transform .5s ease;
}
.kr-app-header.show{ opacity:1; transform:translateY(0); }
.kr-eyebrow{ font-size:9.5px; font-weight:700; letter-spacing:1px; color:rgba(255,255,255,0.75); }
.kr-saludo{
  font-family:'Fraunces', serif; font-weight:900; font-size:19px;
  margin-top:5px; letter-spacing:-0.3px;
}
.kr-fecha{ font-size:11px; color:rgba(255,255,255,0.8); margin-top:2px; text-transform:capitalize; }

.kr-app-body{ padding:0 15px 26px; }

.kr-kpis{
  display:flex; gap:9px;
  margin-top:-22px;
  margin-bottom:20px;
  overflow-x:auto;
  scrollbar-width:none;
  padding-bottom:2px;
  touch-action:none;
  pointer-events:none;
}
.kr-kpis::-webkit-scrollbar{ display:none; }
.kr-kpi{
  flex:0 0 auto;
  width:104px;
  background:#fff;
  border:1px solid var(--kr-divider);
  border-radius:14px;
  padding:12px;
  box-shadow:0 8px 20px rgba(6,62,82,0.08);
  opacity:0; transform:translateY(14px);
  transition:opacity .4s ease, transform .4s ease;
}
.kr-kpi.show{ opacity:1; transform:translateY(0); }
.kr-kpi-icon{
  width:26px; height:26px; border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:9px;
}
.kr-kpi-icon svg{ width:13px; height:13px; }
.kr-kpi-valor{ font-family:'Fraunces', serif; font-weight:700; font-size:15px; color:var(--kr-text); }
.kr-kpi-label{ font-size:9.5px; color:var(--kr-text-muted); font-weight:500; margin-top:1px; }

.kr-section-label{
  font-family:'Fraunces', serif; font-weight:700; font-size:13px; color:var(--kr-text);
  margin:0 0 10px 1px;
  opacity:0; transform:translateY(8px);
  transition:opacity .4s ease, transform .4s ease;
}
.kr-section-label.show{ opacity:1; transform:translateY(0); }

.kr-producto{
  display:flex; align-items:center; gap:9px;
  background:#fff;
  border:1px solid var(--kr-divider);
  border-radius:14px;
  padding:11px;
  margin-bottom:8px;
  opacity:0; transform:translateX(16px);
  transition:opacity .4s ease, transform .4s ease;
}
.kr-producto.show{ opacity:1; transform:translateX(0); }
.kr-producto-mini{
  width:36px; height:36px; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:14px; flex-shrink:0;
  overflow:hidden;
}
.kr-producto-mini img{ width:100%; height:100%; object-fit:cover; }
.kr-producto-info{ flex:1; min-width:0; }
.kr-producto-nombre{ font-size:12px; font-weight:700; color:var(--kr-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kr-producto-meta{ display:flex; align-items:center; gap:5px; margin-top:3px; min-width:0; }
.kr-producto-chip{
  font-size:9px; font-weight:600; padding:1.5px 6px; border-radius:5px; flex-shrink:0;
}
.kr-producto-precio{ font-size:10.5px; color:var(--kr-text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kr-producto-stock{ text-align:right; flex-shrink:0; }
.kr-producto-stock-num{ font-weight:800; font-size:14px; }
.kr-stock-track{ height:5px; width:44px; border-radius:5px; background:var(--kr-divider); margin-top:4px; overflow:hidden; }
.kr-stock-fill{ height:100%; border-radius:5px; }

.kr-pred-screen{
  position:absolute; inset:0;
  background:var(--kr-bg);
  z-index:30;
  transform:translateX(102%);
  transition:transform .5s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
  font-family:'Figtree', -apple-system, sans-serif;
}
.kr-pred-screen.show{ transform:translateX(0); }
.kr-pred-bar{
  background:linear-gradient(135deg, var(--kr-primary-dark), var(--kr-primary));
  padding:32px 16px 14px;
  display:flex; align-items:center; gap:9px;
  flex-shrink:0;
}
.kr-pred-bar svg{ width:17px; height:17px; }
.kr-pred-bar span{ color:#fff; font-family:'Fraunces', serif; font-size:14.5px; font-weight:700; }

.kr-pred-body{ padding:16px 15px; flex:1; overflow:hidden; }
.kr-pred-intro{ font-size:11.5px; color:var(--kr-text-muted); margin-bottom:14px; }

.kr-pred-row{
  display:flex; align-items:center; gap:10px;
  background:#fff; border:1px solid var(--kr-divider);
  border-radius:13px; padding:10px 11px;
  margin-bottom:9px;
  opacity:0; transform:translateX(16px);
  transition:opacity .4s ease, transform .4s ease;
}
.kr-pred-row.show{ opacity:1; transform:translateX(0); }
.kr-pred-thumb{
  width:34px; height:34px; border-radius:9px; flex-shrink:0; overflow:hidden;
}
.kr-pred-thumb img{ width:100%; height:100%; object-fit:cover; }
.kr-pred-info{ flex:1; min-width:0; }
.kr-pred-nombre{ font-size:12px; font-weight:700; color:var(--kr-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kr-pred-sub{ font-size:10px; color:var(--kr-text-muted); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.kr-pred-tag{ font-size:11px; font-weight:700; flex-shrink:0; text-align:right; max-width:56px; line-height:1.3; }

@media (prefers-reduced-motion: reduce){
  .kr-app-header,.kr-kpi,.kr-section-label,.kr-producto,.kr-pred-row{
    transition:none !important;
  }
}