/* ============================================================
   Beniparrell C.F. — Platform FX (velocidad percibida + micro-UX)
   Aplica a dashboard y admin. Respeta prefers-reduced-motion.
   ============================================================ */

/* Render más rápido / fluido */
html { scroll-behavior: smooth; }
* { -webkit-tap-highlight-color: transparent; }
img, .dxp-side, #axp-side { will-change: auto; }

/* ---------- Entradas (solo una vez, no en cada refresco) ---------- */
@keyframes fxRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fxFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fxSlideL { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
@keyframes fxPop { 0% { opacity: 0; transform: scale(.96); } 100% { opacity: 1; transform: scale(1); } }

.dxp-side, #axp-side { animation: fxSlideL .28s cubic-bezier(.2,.7,.2,1) both; }
.dxp-ov.on, #axp-ov.on { animation: fxFade .18s ease both; }
.dxp-ov.on .dxp-box, #axp-ov.on #axp-box { animation: fxRise .30s cubic-bezier(.2,.7,.2,1) both; }
.dxp-box h3, #axp-box h3 { animation: fxFade .4s ease both; }

/* Stagger suave de los ítems del menú al aparecer */
.dxp-side button, #axp-side button { animation: fxFade .35s ease both; }

/* ---------- Micro-interacciones (transiciones, sin re-disparo) ---------- */
.dxp-btn, .axp-mini, .dxp-side button, #axp-side button, .dxp-chip,
.dxp-fab button, .dxp-menu button, .ficha-player-btn {
  transition: transform .12s ease, background .18s ease, box-shadow .2s ease, filter .18s ease, color .18s ease;
}
.dxp-btn:hover, .axp-mini:hover, .dxp-chip:hover { filter: brightness(1.08); }
.dxp-btn:active, .axp-mini:active, .dxp-chip:active,
.dxp-side button:active, #axp-side button:active, .dxp-menu button:active { transform: scale(.95); }
.dxp-side button:hover, #axp-side button:hover { transform: translateX(3px); }
.dxp-side button.active, #axp-side button.active { box-shadow: 0 6px 18px rgba(200,0,26,.35); }

/* Botón principal con realce al pasar */
.dxp-btn:hover { box-shadow: 0 8px 22px rgba(200,0,26,.32); transform: translateY(-1px); }

/* Tarjetas / filas clicables: ligera elevación al hover (solo transición) */
.dxp-note, .dxp-ev, .dxp-menu button, .sp-card { transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.dxp-menu button:hover { transform: translateY(-3px); }
.dxp-ev:hover { transform: translateX(3px); }

/* Barras de progreso animadas con brillo deslizante */
.dxp-prog i, .axp-bar2 i { transition: width .55s cubic-bezier(.2,.7,.2,1); position: relative; overflow: hidden; }
.dxp-prog i::after, .axp-bar2 i::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
  transform: translateX(-100%); animation: fxSheen 2.2s infinite;
}
@keyframes fxSheen { to { transform: translateX(200%); } }

/* Badge de notificaciones con latido */
.dxp-badge { animation: fxPulse 1.8s infinite; }
@keyframes fxPulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* QR / carnet aparecen con pop */
.dxp-card, .qr, img[src*="qr-code"] { animation: fxPop .35s cubic-bezier(.2,.7,.2,1) both; }

/* ---------- Skeleton shimmer para estados de carga ---------- */
.fx-skel { background: linear-gradient(90deg, #1a1a1a 25%, #2a2a2a 37%, #1a1a1a 63%);
  background-size: 400% 100%; animation: fxShimmer 1.15s ease infinite; border-radius: 8px; height: 16px; margin: 10px 0; }
@keyframes fxShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* Spinner ligero */
.fx-spin { display: inline-block; width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.25);
  border-top-color: var(--r, #c8001a); border-radius: 50%; animation: fxRot .7s linear infinite; vertical-align: middle; }
@keyframes fxRot { to { transform: rotate(360deg); } }

/* ---------- Menú: grupos plegables (acordeón) ---------- */
.dxp-side .grp-h, #axp-side .grp-h {
  display: flex; align-items: center; justify-content: space-between;
  width: calc(100% - 16px); margin: 7px 8px 1px; padding: 7px 12px;
  background: none; border: none; color: var(--w40, #7a7a7a);
  font-family: "Barlow Condensed", sans-serif; text-transform: uppercase;
  letter-spacing: .07em; font-size: 11px; font-weight: 800; cursor: pointer;
  border-radius: 8px; min-height: 0; transition: color .15s, background .15s;
}
.dxp-side .grp-h:hover, #axp-side .grp-h:hover { color: #fff; background: var(--k5, #1f1f1f); }
.dxp-side .grp-h .chev, #axp-side .grp-h .chev { transition: transform .2s ease; opacity: .6; flex: 0 0 auto; }
.dxp-side .grp-h.open .chev, #axp-side .grp-h.open .chev { transform: rotate(90deg); }
.dxp-side .grp-b, #axp-side .grp-b { animation: fxFade .2s ease both; }
.dxp-side .grp-sub, #axp-side .grp-sub {
  display: flex; align-items: center; justify-content: space-between;
  width: calc(100% - 24px); margin: 1px 12px; padding: 6px 10px;
  background: none; border: none; color: var(--w55, #9a9a9a);
  font-family: "Barlow Condensed", sans-serif; text-transform: uppercase;
  letter-spacing: .04em; font-size: 11px; font-weight: 700; cursor: pointer; border-radius: 8px;
}
.dxp-side .grp-sub:hover, #axp-side .grp-sub:hover { color: #fff; background: var(--k5, #1f1f1f); }
.dxp-side .grp-sub .chev, #axp-side .grp-sub .chev { transition: transform .2s ease; opacity: .55; }
.dxp-side .grp-sub.open .chev, #axp-side .grp-sub.open .chev { transform: rotate(90deg); }
.dxp-side .grp-sb button, #axp-side .grp-sb button { font-size: 13px; min-height: 36px; }
.dxp-side .grp-sb, #axp-side .grp-sb { animation: fxFade .2s ease both; }

/* ---------- Modo jugador: oculta el panel de tutor ---------- */
body.player-mode #viewDashboard { display: none !important; }

/* ---------- Móvil/tablet: el menú lateral es un CAJÓN oculto ----------
   La animación de entrada (fxSlideL, fill both) deja "transform:none" fijado
   y anularía el translateX(-100%) que esconde el cajón. La desactivamos aquí
   para que el cajón quede oculto hasta pulsar "Menú" y no tape la barra inferior. */
@media (max-width: 820px) {
  /* Sin animación de entrada (su fill dejaba transform:none y mostraba el panel). */
  .dxp-side, #axp-side { animation: none !important; }
  /* El cajón vive FUERA de pantalla; solo entra al pulsar "Menú" (.open).
     Selector por #id + !important para ganar a cualquier otra regla/animación. */
  #dxp-side, #axp-side { transform: translateX(-100%) !important; box-shadow: none !important; }
  #dxp-side.open, #axp-side.open { transform: none !important; box-shadow: 0 0 40px rgba(0,0,0,.6) !important; }
  /* La barra inferior siempre por encima del cajón cerrado. */
  .dxp-tabbar { z-index: 9999 !important; }
}

/* ---------- Accesibilidad: respetar reduce motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}