/* KAEL Bills Lote 74 — panel superior premium, basado en Lote 71 */
.kpis{perspective:1100px}
.kpis article{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:104px;
  padding:20px 20px;
  border-color:rgba(143,173,215,.19);
  background:
    linear-gradient(145deg,rgba(19,34,57,.96),rgba(8,17,30,.93));
  box-shadow:0 15px 36px rgba(0,0,0,.20),inset 0 1px 0 rgba(255,255,255,.035);
  transform:translateY(12px);
  opacity:0;
  animation:kpi74Enter .55s cubic-bezier(.2,.75,.25,1) forwards;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease;
}
.kpis article:nth-child(2){animation-delay:.07s}
.kpis article:nth-child(3){animation-delay:.14s}
.kpis article:nth-child(4){animation-delay:.21s}
.kpis article::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  border-radius:18px 0 0 18px;
  background:var(--kpi-accent,#52a4ff);
  box-shadow:0 0 18px var(--kpi-glow,rgba(82,164,255,.35));
}
.kpis article::after{
  content:"";
  position:absolute;
  width:125px;height:125px;
  right:-54px;top:-72px;
  border-radius:50%;
  background:radial-gradient(circle,var(--kpi-halo,rgba(82,164,255,.15)),transparent 70%);
  pointer-events:none;
  z-index:-1;
}
.kpis article:nth-child(1){--kpi-accent:#62e54d;--kpi-glow:rgba(98,229,77,.42);--kpi-halo:rgba(98,229,77,.16)}
.kpis article:nth-child(2){--kpi-accent:#ff5f72;--kpi-glow:rgba(255,95,114,.42);--kpi-halo:rgba(255,95,114,.16)}
.kpis article:nth-child(3){--kpi-accent:#ffbd4a;--kpi-glow:rgba(255,189,74,.42);--kpi-halo:rgba(255,189,74,.16)}
.kpis article:nth-child(4){--kpi-accent:#52a4ff;--kpi-glow:rgba(82,164,255,.46);--kpi-halo:rgba(82,164,255,.18);border-color:rgba(82,164,255,.28)}
.kpis article:hover{
  transform:translateY(-4px) scale(1.012);
  border-color:color-mix(in srgb,var(--kpi-accent) 42%,transparent);
  box-shadow:0 22px 44px rgba(0,0,0,.27),0 0 22px var(--kpi-glow),inset 0 1px 0 rgba(255,255,255,.055);
}
.kpi-icon{
  width:46px;height:46px;
  border-radius:14px;
  font-size:19px;
  flex:0 0 auto;
  border:1px solid rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 8px 18px rgba(0,0,0,.22);
}
.kpi-icon.paid{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 20px rgba(98,229,77,.12)}
.kpi-icon.unpaid{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 20px rgba(255,95,114,.12)}
.kpi-icon.pending{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 20px rgba(255,189,74,.12)}
.kpi-icon.total{box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 22px rgba(82,164,255,.16)}
.kpis article>div{min-width:0}
.kpis small{
  color:#9eb0c7;
  font-size:10px;
  font-weight:800;
  letter-spacing:.075em;
  text-transform:uppercase;
}
.kpis strong{
  font-size:clamp(22px,2vw,29px);
  line-height:1.08;
  margin:7px 0 6px;
  letter-spacing:-.025em;
  font-variant-numeric:tabular-nums;
  text-shadow:0 2px 16px rgba(0,0,0,.28);
}
.kpis article:nth-child(1) strong{color:#dfffd9}
.kpis article:nth-child(2) strong{color:#ffe1e6}
.kpis article:nth-child(3) strong{color:#fff0c8}
.kpis article:nth-child(4) strong{color:#e4f1ff}
.kpis em{
  display:inline-flex;
  align-items:center;
  min-height:22px;
  padding:4px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.055);
  color:#8194ae;
  font-size:10px;
}
.kpis article:nth-child(4){transform-origin:center}
@keyframes kpi74Enter{to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.kpis article{animation:none;opacity:1;transform:none}.kpis article:hover{transform:none}}
@media(max-width:760px){.kpis article{min-height:96px;padding:17px}.kpi-icon{width:42px;height:42px}.kpis strong{font-size:23px}}

/* Ajuste visible Lote 74 */
.kpis{gap:16px!important}
.kpis article{
  min-height:126px!important;
  border-radius:22px!important;
  padding:22px!important;
  border:1px solid rgba(255,255,255,.10)!important;
}
.kpis article:nth-child(1){background:linear-gradient(145deg,rgba(20,60,35,.96),rgba(9,27,19,.96))!important}
.kpis article:nth-child(2){background:linear-gradient(145deg,rgba(71,24,35,.96),rgba(31,12,19,.96))!important}
.kpis article:nth-child(3){background:linear-gradient(145deg,rgba(78,54,18,.96),rgba(35,24,9,.96))!important}
.kpis article:nth-child(4){background:linear-gradient(145deg,rgba(22,48,83,.98),rgba(9,23,43,.98))!important;box-shadow:0 18px 42px rgba(0,0,0,.28),0 0 24px rgba(82,164,255,.16)!important}
.kpis small{font-size:11px!important;color:rgba(255,255,255,.72)!important}
.kpis strong{font-size:clamp(27px,2.5vw,36px)!important;margin:9px 0 8px!important}
.kpi-icon{width:52px!important;height:52px!important;border-radius:16px!important;font-size:22px!important}
.kpis em{font-size:11px!important;color:rgba(255,255,255,.58)!important;background:rgba(255,255,255,.07)!important}
@media(max-width:760px){.kpis{gap:12px!important}.kpis article{min-height:112px!important;padding:18px!important}.kpis strong{font-size:27px!important}}