/* ============================================================
   Cimiento · panelfx.css
   Capa de realce COMPARTIDA para todos los paneles de producto.
   Solo mejoras universales y seguras (progressive enhancement):
   no cambia estructura, colores ni layout de cada panel.
   Se apoya en los tokens del design system (--accent, --ok, --muted...).
   ============================================================ */

/* --- Feedback al presionar (universal) --- */
button,.btn,[role="button"],a.btn{transition:transform .09s ease, background .15s ease, box-shadow .15s ease, border-color .15s ease}
button:active,.btn:active,[role="button"]:active,a.btn:active{transform:scale(.97)}

/* --- Accesibilidad: foco visible y coherente --- */
:focus-visible{outline:2px solid var(--accent,#2C55E0);outline-offset:2px;border-radius:8px}

/* --- Indicador "en vivo" (opt-in vía PanelFX.live / data-live) --- */
.pfx-live{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono,ui-monospace,monospace);
  font-size:.62rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted,#8a97a6)}
.pfx-live .d{width:7px;height:7px;border-radius:50%;background:var(--ok,#1E9E63);animation:pfx-pulse 2.4s infinite}
@keyframes pfx-pulse{0%{box-shadow:0 0 0 0 rgba(30,158,99,.5)}70%{box-shadow:0 0 0 6px rgba(30,158,99,0)}100%{box-shadow:0 0 0 0 rgba(30,158,99,0)}}

/* --- Entrada suave (la aplica el JS solo la primera vez que aparece cada bloque) --- */
@keyframes pfx-fadeUp{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.pfx-in{animation:pfx-fadeUp .42s cubic-bezier(.22,.61,.36,1) both}

/* --- Skeleton opcional (PanelFX.skeleton) --- */
.pfx-sk{position:relative;overflow:hidden;background:var(--panel,#eef1f4);border-radius:10px;min-height:14px}
.pfx-sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);animation:pfx-shimmer 1.3s infinite}
@keyframes pfx-shimmer{100%{transform:translateX(100%)}}

/* --- Números que "cuentan" quedan tabulados para no bailar de ancho --- */
.stat .v,[data-count]{font-variant-numeric:tabular-nums}

/* --- Respeto por quien pide menos movimiento --- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}