/* ══ Botones principales con degradado animado (lib/pushpad-gradient.js · React Bits GradientText «flow») ══
   Colores: pares de la identidad oficial de PushPad (lib/pushpad-brand.css). El motor fija en cada botón
   --pp-grad-ink (texto), --pp-grad-glow (halo) y --pp-grad-ring (borde) según su par; aquí solo se usan. Brillo interior (Figma: sombra interior blanca Y4 · blur 30 · 90 %
   y Y4 · blur 60 · 100 %, rebajada para no lavar el color) y un óvalo de luz abajo.
   Sin simulación de vidrio: un fondo, dos sombras y un pseudo-elemento.
   UI 2.1.1: sin mix-blend-mode, filter ni isolation (efectos de composición que el renderizado de las ventanas CEP
   puede no soportar). El óvalo se difumina con las paradas del propio degradado radial.
   Especificidad alta (.ppGrad.ppGrad) para ganar a los estilos de botón de cada vista sin tocar sus archivos. */
.ppGrad.ppGrad{
  position:relative;
  z-index:0;                    /* contexto de apilamiento propio: el óvalo (z-index:-1) queda dentro del botón */
  overflow:hidden;
  border:0;
  background-color:var(--pp-yellow,#F3E15B);
  background-image:var(--pp-grad,linear-gradient(90deg,var(--pp-yellow,#F3E15B),var(--pp-orange,#EC622A)));
  color:var(--pp-grad-ink,#1C1A17);
  text-shadow:0 1px 0 rgba(255,255,255,.22);
  box-shadow:
    inset 0 4px 14px rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(255,255,255,.3),
    0 0 0 1px var(--pp-grad-ring,rgba(236,98,42,.55)),
    0 6px 22px -8px var(--pp-grad-glow,rgba(243,225,91,.42));
  transition:transform .12s ease,box-shadow .2s ease,opacity .2s ease;
}
/* el óvalo de luz de la base: blanco translúcido, difuminado por sus paradas (sin blur ni modos de fusión) */
.ppGrad.ppGrad::after{
  content:"";
  position:absolute;
  left:22%;right:22%;bottom:-38%;height:70%;
  border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.8),rgba(255,255,255,.45) 40%,rgba(255,255,255,.12) 75%,rgba(255,255,255,0));
  opacity:.75;
  pointer-events:none;
  z-index:-1;
}
/* el icono propio de .boxCreateButton (::before) se queda tal cual: ya es oscuro y se lee sobre el degradado */
/* los estilos de botón de cada vista (.boxCreateButton, .ssPrimary, .modalPrimary) usan filter en hover/disabled: aquí no */
.ppGrad.ppGrad,.ppGrad.ppGrad:hover,.ppGrad.ppGrad:disabled{filter:none}
.ppGrad.ppGrad:hover:not(:disabled){box-shadow:inset 0 4px 16px rgba(255,255,255,.6),inset 0 -1px 0 rgba(255,255,255,.38),0 0 0 1px var(--pp-grad-ring,rgba(236,98,42,.55)),0 8px 26px -6px var(--pp-grad-glow,rgba(243,225,91,.42))}
.ppGrad.ppGrad:active:not(:disabled){transform:scale(.985)}
.ppGrad.ppGrad:focus-visible{outline:2px solid var(--pp-grad-ring,rgba(236,98,42,.55));outline-offset:2px}
.ppGrad.ppGrad:disabled{opacity:.42;box-shadow:inset 0 4px 14px rgba(255,255,255,.3),0 0 0 1px rgba(255,255,255,.12);cursor:default}
.ppGrad.ppGrad:disabled::after{opacity:.35}
@media (prefers-reduced-motion:reduce){.ppGrad.ppGrad{transition:none}}