/* FASE NUEVE · Tuerca «Personalizar FASE NUEVE» (componente único para todas las páginas propias).
   Sustituye el aspecto de .f9-floating-gear definido por las capas antiguas (store-v04/v05: icono de imagen, ensanchado al pasar el cursor,
   oculta en móvil) sin tocar esos archivos. La lógica del panel sigue en store-v03.js; las páginas sin él usan f9-personalize-v01.js. */
/* El panel debe quedar por ENCIMA del encabezado fijo (.f9h = 510, popovers = 545); con z-index 300 el botón «cerrar» quedaba tapado por el encabezado. */
html body .settings-panel{z-index:560}
html body .settings-panel .settings-panel__note{color:rgba(255,255,255,.68)}  /* contraste ≥ 4,5:1 sobre #0d1016 (antes .44) */
html body .f9-floating-tools[data-floating-tools]{z-index:245;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
html body .f9-floating-tools[data-floating-tools] .f9-floating-gear{--pz-rgb:var(--f9-accent-rgb,255,90,31);position:relative!important;display:grid!important;place-items:center!important;box-sizing:border-box!important;width:56px!important;min-width:56px!important;height:56px!important;padding:0!important;margin:0;
  border:1px solid rgba(var(--pz-rgb),.55)!important;border-radius:50%!important;background:#050506!important;color:rgb(var(--pz-rgb))!important;overflow:visible!important;line-height:0!important;cursor:pointer;perspective:240px;animation:none!important;
  box-shadow:0 8px 22px rgba(0,0,0,.45),0 0 14px -4px rgba(var(--pz-rgb),.38)!important;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background-color .22s ease!important;-webkit-tap-highlight-color:transparent}
html body .f9-floating-tools[data-floating-tools] .f9-floating-gear::before{content:none!important;display:none!important}
html body .f9-floating-tools[data-floating-tools] .f9-floating-gear>svg{display:block!important;width:26px!important;height:26px!important;fill:none!important;stroke:currentColor!important;stroke-width:2!important;stroke-linecap:round;stroke-linejoin:round;overflow:visible;pointer-events:none;transform-origin:50% 50%;
  transition:transform .26s cubic-bezier(.22,.7,.2,1)!important;animation:none!important}
html body .f9-floating-tools[data-floating-tools] .f9-floating-gear>span{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;clip-path:inset(50%)!important;white-space:nowrap!important;border:0!important;opacity:1!important;max-width:none!important}
/* Al pasar el cursor / con foco de teclado: giro de ~30° con ligera perspectiva 3D y borde más luminoso (200–300 ms). */
html body .f9-floating-tools[data-floating-tools] .f9-floating-gear:hover,
html body .f9-floating-tools[data-floating-tools] .f9-floating-gear:focus-visible{width:56px!important;border-color:rgba(var(--pz-rgb),.95)!important;background:#0b0c0f!important;transform:none!important;
  box-shadow:0 10px 26px rgba(0,0,0,.5),0 0 20px -2px rgba(var(--pz-rgb),.55)!important}
html body .f9-floating-tools[data-floating-tools] .f9-floating-gear:hover>svg,
html body .f9-floating-tools[data-floating-tools] .f9-floating-gear:focus-visible>svg{transform:rotateX(16deg) rotateY(-14deg) rotateZ(30deg)}
/* Al pulsar: pequeña respuesta de escala. */
html body .f9-floating-tools[data-floating-tools] .f9-floating-gear:active{transform:scale(.93)!important}
/* Panel abierto: estado activo (aro naranja, giro mantenido). */
html body .f9-floating-tools[data-floating-tools] .f9-floating-gear[aria-expanded="true"]{border-color:rgb(var(--pz-rgb))!important;background:#140e0a!important;box-shadow:0 0 0 3px rgba(var(--pz-rgb),.28),0 10px 26px rgba(0,0,0,.5)!important}
html body .f9-floating-tools[data-floating-tools] .f9-floating-gear[aria-expanded="true"]>svg{transform:rotateZ(60deg)}
html body .f9-floating-tools[data-floating-tools] .f9-floating-gear:focus-visible{outline:3px solid #fff!important;outline-offset:3px!important}
/* Móvil y tableta: visible, con zona táctil ≥ 48 px, sobre el botón de WhatsApp y por encima del aviso de cookies. */
@media(max-width:900px){
  html body .f9-floating-tools[data-floating-tools]{right:12px!important;left:auto!important;top:auto!important;transform:none!important;bottom:calc(env(safe-area-inset-bottom,0px) + var(--f9-consent-banner-space,0px) + 16px)!important;gap:10px}
  html body .f9-floating-tools[data-floating-tools] .f9-floating-gear{width:48px!important;min-width:48px!important;height:48px!important;display:grid!important}
  html body .f9-floating-tools[data-floating-tools] .f9-floating-gear>svg{width:23px!important;height:23px!important}
  html body .f9-floating-tools[data-floating-tools] .f9-floating-gear:hover>svg{transform:none}
}
/* Carrito en móvil: la barra fija «Pagar» queda libre (la tuerca y WhatsApp suben por encima de ella). */
@media(max-width:760px){html:has(.f9-cart-mobile-bar) body .f9-floating-tools[data-floating-tools]{bottom:calc(env(safe-area-inset-bottom,0px) + var(--f9-consent-banner-space,0px) + 78px + 16px)!important}}
/* Sin movimiento: solo cambian color y borde. */
@media(prefers-reduced-motion:reduce){
  html body .f9-floating-tools[data-floating-tools] .f9-floating-gear,
  html body .f9-floating-tools[data-floating-tools] .f9-floating-gear>svg{transition:border-color .01ms,box-shadow .01ms,background-color .01ms!important}
  html body .f9-floating-tools[data-floating-tools] .f9-floating-gear:hover>svg,
  html body .f9-floating-tools[data-floating-tools] .f9-floating-gear:focus-visible>svg,
  html body .f9-floating-tools[data-floating-tools] .f9-floating-gear[aria-expanded="true"]>svg,
  html body .f9-floating-tools[data-floating-tools] .f9-floating-gear:active{transform:none!important}
}