:root{
  --pi-graphite:#3f3f46;
  --pi-muted:#71717a;
  --pi-orange:#ea580c;
  --pi-purple:#7c3aed;
  --pi-soft-o:rgba(234,88,12,.18);
  --pi-soft-p:rgba(124,58,237,.18);
}
html[data-theme="dark"]{
  --pi-graphite:#e4e4e7;
  --pi-muted:#a1a1aa;
  --pi-soft-o:rgba(251,146,60,.22);
  --pi-soft-p:rgba(167,139,250,.22);
}
.pi{color:var(--pi-graphite);display:inline-block;vertical-align:middle;overflow:visible}
.pi .fill-soft{fill:var(--pi-soft-p);stroke:none}
.pi .fill-accent{fill:url(#piGrad);stroke:none}
.pi .accent-stroke{stroke:url(#piGradStroke);stroke-width:1.75}
.pi-old{color:#71717a}
html[data-theme="dark"] .pi-old{color:#a1a1aa}

/* Idle / hover animations */
@keyframes pi-rec{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.85)}}
@keyframes pi-ring{0%,100%{transform:rotate(0)}15%{transform:rotate(12deg)}30%{transform:rotate(-10deg)}45%{transform:rotate(8deg)}60%{transform:rotate(-4deg)}75%{transform:rotate(2deg)}}
@keyframes pi-wave{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes pi-live{0%{transform:scale(.85);opacity:1}70%{transform:scale(1.35);opacity:0}100%{opacity:0}}
@keyframes pi-eq{0%,100%{transform:scaleY(.45)}50%{transform:scaleY(1)}}
@keyframes pi-spark{0%,100%{opacity:.3;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
@keyframes pi-slide{0%,100%{transform:translateX(0)}50%{transform:translateX(2px)}}
@keyframes pi-signal{0%,100%{opacity:.25}50%{opacity:1}}
@keyframes pi-broadcast{0%,100%{opacity:.4}50%{opacity:1}}
@keyframes pi-tiles{0%,100%{opacity:.85}50%{opacity:1}}

.anim-rec-pulse .rec-dot{transform-origin:center;animation:pi-rec 1.2s ease-in-out infinite}
.anim-ring-wiggle{transform-origin:12px 4px;animation:pi-ring 2s ease-in-out infinite}
.anim-ring-wiggle .ring-arc{animation:pi-wave 1.2s ease-in-out infinite}
.anim-waves .wave{animation:pi-wave 1.4s ease-in-out infinite}
.anim-waves .w2{animation-delay:.15s}.anim-waves .w3{animation-delay:.3s}
.anim-live-dot .live-ring{transform-origin:12px 12px;animation:pi-live 1.8s ease-out infinite}
.anim-live-dot .live-dot{animation:pi-rec 1.8s ease-in-out infinite}
.anim-eq .bar{transform-box:fill-box;transform-origin:bottom;animation:pi-eq 1s ease-in-out infinite}
.anim-eq .b2{animation-delay:.1s}.anim-eq .b3{animation-delay:.2s}.anim-eq .b4{animation-delay:.3s}
.anim-brain-spark .sparkle,.anim-brain-spark .spark{animation:pi-spark 1.6s ease-in-out infinite}
.anim-brain-spark .s2{animation-delay:.4s}
.anim-cdr-slide .row{animation:pi-slide 2s ease-in-out infinite}
.anim-cdr-slide .r2{animation-delay:.15s}.anim-cdr-slide .r3{animation-delay:.3s}
.anim-signal .wave{animation:pi-signal 1.4s ease-in-out infinite}
.anim-signal .w2{animation-delay:.25s}
.anim-broadcast .accent-stroke{animation:pi-broadcast 1.5s ease-in-out infinite}
.anim-list-slide .accent-stroke{animation:pi-slide 2.2s ease-in-out infinite}
.anim-pulse-tiles .fill-accent{animation:pi-tiles 2.5s ease-in-out infinite}

/* Hover intensify for sidebar */
.sidebar-nav a:hover .pi .accent-stroke,
.sidebar-nav a.active .pi .accent-stroke{stroke-width:2}
.sidebar-nav a:hover .anim-eq .bar{animation-duration:.55s}
.sidebar-nav a:hover .anim-signal .wave{animation-duration:.7s}
.sidebar-nav a:hover .anim-cdr-slide .row{animation-duration:1s}
.sidebar-nav a:hover .anim-brain-spark .sparkle{animation-duration:.8s}
.sidebar-nav a:hover .anim-rec-pulse .rec-dot{animation-duration:.7s}

@media (prefers-reduced-motion: reduce){
  .pi, .pi *{animation:none !important}
}

/* Action buttons: icons stay static (no animation / no flicker) */
.ag-btn .pi,.ag-btn .pi *,.btn-hold .pi,.btn-hold .pi *,.btn-retomar .pi,.btn-retomar .pi *,.btn-transferir .pi,.btn-transferir .pi *{animation:none!important;transition:none!important}
.ag-btn .pi,.btn-hold .pi,.btn-retomar .pi,.btn-transferir .pi{color:currentColor}
.ag-btn.grabar[data-pi] .rec{display:none}
.btn-retomar[data-pi]{display:inline-flex;align-items:center;gap:6px}

/* ===== v2 PREMIUM SIDEBAR TILES ===== */
.pi-tile{--a1:#f97316;--a2:#8b5cf6;--gl:rgba(249,115,22,.45);position:relative;display:inline-grid;place-items:center;width:30px;height:30px;margin:-5px 0;flex:none;border-radius:10px;overflow:hidden;
  background:linear-gradient(135deg,var(--a1),var(--a2));box-shadow:0 4px 12px -4px var(--gl),inset 0 1px 0 rgba(255,255,255,.35);
  animation:pt-glow 3.2s ease-in-out infinite;transition:transform .25s cubic-bezier(.3,1.6,.5,1),box-shadow .25s}
.pi-tile .pi{color:#fff;position:relative;z-index:1;filter:drop-shadow(0 1px 1px rgba(0,0,0,.25))}
.pi-tile .pi .fill-soft{fill:rgba(255,255,255,.28)}
.pi-tile .pi .fill-accent{fill:#fff}
.pi-tile .pi .accent-stroke{stroke:#fff;stroke-width:2}
.pi-shine{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 48%,transparent 62%);transform:translateX(-120%);animation:pt-shine 5s ease-in-out infinite;pointer-events:none}
.pt-dashboard{--a1:#fb923c;--a2:#7c3aed;--gl:rgba(234,88,12,.5)}
.pt-campanas{--a1:#f59e0b;--a2:#ea580c;--gl:rgba(245,158,11,.5)}
.pt-listados{--a1:#3b82f6;--a2:#6366f1;--gl:rgba(59,130,246,.5)}
.pt-credenciales{--a1:#eab308;--a2:#f97316;--gl:rgba(234,179,8,.5)}
.pt-troncales{--a1:#06b6d4;--a2:#0ea5e9;--gl:rgba(6,182,212,.55)}
.pt-dids{--a1:#14b8a6;--a2:#22c55e;--gl:rgba(20,184,166,.5)}
.pt-cdr{--a1:#64748b;--a2:#6366f1;--gl:rgba(99,102,241,.45)}
.pt-historial_ia{--a1:#a855f7;--a2:#ec4899;--gl:rgba(217,70,239,.55)}
.pt-audios{--a1:#22c55e;--a2:#10b981;--gl:rgba(34,197,94,.5)}
.pt-grabaciones{--a1:#ef4444;--a2:#e11d48;--gl:rgba(239,68,68,.55)}
.pt-editor_ivr{--a1:#8b5cf6;--a2:#6366f1;--gl:rgba(139,92,246,.5)}
.pt-logout{--a1:#f43f5e;--a2:#be123c;--gl:rgba(244,63,94,.45)}
.pi-tile:nth-of-type(n){animation-delay:calc(var(--i,0)*.2s)}
.pt-campanas .pi-shine{animation-delay:.6s}.pt-listados .pi-shine{animation-delay:1.2s}.pt-credenciales .pi-shine{animation-delay:1.8s}
.pt-troncales .pi-shine{animation-delay:2.4s}.pt-dids .pi-shine{animation-delay:3s}.pt-cdr .pi-shine{animation-delay:3.6s}
.pt-historial_ia .pi-shine{animation-delay:4.2s}.pt-audios .pi-shine{animation-delay:.3s}.pt-grabaciones .pi-shine{animation-delay:.9s}.pt-editor_ivr .pi-shine{animation-delay:1.5s}
/* per-item richer idle motion */
.pt-grabaciones .pi .rec-dot,.pt-grabaciones .pi circle:last-of-type{fill:#fff;animation:pi-rec 1s ease-in-out infinite}
.pt-grabaciones{animation:pt-glow-rec 1.6s ease-in-out infinite}
.pt-troncales .pi .wave{animation-duration:.9s}
.pt-audios .pi .bar{animation-duration:.7s}
.pt-historial_ia .pi{animation:pt-float 2.6s ease-in-out infinite}
.pt-dashboard .pi{animation:pt-breathe 3s ease-in-out infinite}
.pt-campanas .pi{animation:pt-tilt 2.4s ease-in-out infinite;transform-origin:30% 60%}
/* hover / active */
a:hover>.pi-tile,a:focus-visible>.pi-tile{transform:translateY(-1px) scale(1.12) rotate(-4deg);box-shadow:0 8px 22px -4px var(--gl),0 0 0 3px color-mix(in srgb,var(--a1) 25%,transparent),inset 0 1px 0 rgba(255,255,255,.4)}
a:hover>.pi-tile .pi-shine{animation-duration:1.1s}
a.active>.pi-tile{transform:scale(1.06);box-shadow:0 0 0 2px #fff,0 0 0 4px var(--a1),0 8px 24px -4px var(--gl)}
html[data-theme="dark"] a.active>.pi-tile{box-shadow:0 0 0 2px #18181b,0 0 0 4px var(--a1),0 0 24px var(--gl)}
html[data-theme="dark"] .pi-tile{box-shadow:0 0 14px -2px var(--gl),inset 0 1px 0 rgba(255,255,255,.3)}
@keyframes pt-glow{0%,100%{filter:saturate(1) brightness(1)}50%{filter:saturate(1.25) brightness(1.08)}}
@keyframes pt-glow-rec{0%,100%{box-shadow:0 0 6px -2px var(--gl)}50%{box-shadow:0 0 18px 2px var(--gl)}}
@keyframes pt-shine{0%,70%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes pt-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.5px)}}
@keyframes pt-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes pt-tilt{0%,100%{transform:rotate(0)}50%{transform:rotate(-8deg)}}
@media (prefers-reduced-motion: reduce){
  .pi-tile,.pi-tile *,.pi-shine{animation:none!important;transition:none!important}
  .pi-shine{display:none}
}