#spp-companion,
#spp-companion *{box-sizing:border-box}

.spp-companion{
  --spp-desktop-size:150px;
  --spp-mobile-size:112px;
  --spp-accent:#d8ff59;
  position:fixed;
  bottom:max(14px,env(safe-area-inset-bottom));
  z-index:99990;
  width:var(--spp-desktop-size);
  height:var(--spp-desktop-size);
  pointer-events:none;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.spp-pos-left{left:18px}.spp-pos-right{right:18px}
.spp-character{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  background:transparent;
  cursor:pointer;
  pointer-events:auto;
  filter:drop-shadow(0 9px 16px rgba(0,0,0,.34));
  transform-origin:50% 100%;
  animation:spp-idle 3.8s ease-in-out infinite;
  -webkit-tap-highlight-color:transparent;
}
.spp-character:focus-visible{outline:2px solid var(--spp-accent);outline-offset:5px;border-radius:28px}
.spp-character img{display:block;width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none;image-rendering:auto;transition:opacity .18s ease,transform .22s ease}
.spp-character:hover img{transform:translateY(-3px) scale(1.035)}
.spp-status-dot{position:absolute;left:12%;bottom:8%;width:10px;height:10px;border-radius:50%;background:#8df06c;box-shadow:0 0 0 4px rgba(141,240,108,.13),0 0 18px rgba(141,240,108,.55);z-index:2}
[data-state="tired"] .spp-status-dot{background:#e6d45f;box-shadow:0 0 0 4px rgba(230,212,95,.12)}
[data-state="wilted"] .spp-status-dot{background:#e39a4e;box-shadow:0 0 0 4px rgba(227,154,78,.12)}
[data-state="critical"] .spp-status-dot{background:#ef6a6a;box-shadow:0 0 0 4px rgba(239,106,106,.13)}
.spp-pos-right .spp-status-dot{left:auto;right:12%}

.spp-bubble{
  position:absolute;
  left:calc(100% - 16px);
  bottom:62%;
  width:min(300px,calc(100vw - 185px));
  min-width:235px;
  padding:14px 38px 14px 15px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:17px 17px 17px 5px;
  color:#f8fafc;
  background:linear-gradient(180deg,rgba(20,22,26,.97),rgba(8,9,11,.97));
  box-shadow:0 18px 45px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.04);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  pointer-events:auto;
  transform-origin:left bottom;
}
.spp-pos-right .spp-bubble{left:auto;right:calc(100% - 16px);border-radius:17px 17px 5px 17px;transform-origin:right bottom}
.spp-bubble[hidden]{display:none!important}
.spp-bubble.is-visible{animation:spp-pop .26s cubic-bezier(.2,.8,.2,1)}
.spp-bubble-name{display:block;margin:0 0 5px;color:var(--spp-accent);font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.spp-bubble p{margin:0!important;color:#f8fafc!important;font-size:13px!important;line-height:1.45!important;font-weight:550!important}
.spp-bubble-close{position:absolute;right:10px;top:8px;width:26px;height:26px;padding:0;border:0;background:transparent;color:#8b929e;font-size:20px;line-height:24px;cursor:pointer;border-radius:50%}
.spp-bubble-close:hover{color:#fff;background:rgba(255,255,255,.06)}

.spp-attention{position:absolute;right:12%;top:6%;display:grid;place-items:center;width:24px;height:24px;border:2px solid #111318;border-radius:50%;background:var(--spp-accent);color:#111318;font-size:15px;font-weight:950;box-shadow:0 5px 14px rgba(0,0,0,.25);opacity:0;transform:translateY(4px) scale(.6);transition:.2s ease}
.spp-pos-right .spp-attention{right:auto;left:12%}
.spp-attention.is-on{opacity:1;transform:none;animation:spp-attention 1.4s ease-in-out infinite}

.spp-character.spp-celebrate{animation:spp-celebrate .72s cubic-bezier(.2,.8,.2,1) 1}
.spp-character.spp-react{animation:spp-react .46s ease 1}

@keyframes spp-idle{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-4px) rotate(.5deg)}}
@keyframes spp-pop{0%{opacity:0;transform:scale(.82) translateY(9px)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes spp-attention{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes spp-react{0%,100%{transform:scale(1)}45%{transform:scale(1.08) rotate(-2deg)}}
@keyframes spp-celebrate{0%{transform:translateY(0) scale(1)}25%{transform:translateY(-15px) scale(1.06) rotate(-3deg)}55%{transform:translateY(0) scale(1.04) rotate(3deg)}80%{transform:translateY(-7px) scale(1.03)}100%{transform:translateY(0) scale(1)}}

@media(max-width:767px){
  .spp-companion{width:var(--spp-mobile-size);height:var(--spp-mobile-size);bottom:max(10px,env(safe-area-inset-bottom))}
  .spp-pos-left{left:8px}.spp-pos-right{right:8px}
  .spp-bubble{left:calc(100% - 12px);bottom:70%;width:min(260px,calc(100vw - 112px));min-width:210px;padding:12px 34px 12px 13px;border-radius:15px 15px 15px 5px}
  .spp-pos-right .spp-bubble{left:auto;right:calc(100% - 12px);border-radius:15px 15px 5px 15px}
  .spp-bubble p{font-size:12.5px!important}
  .spp-bubble-name{font-size:10px}
  .spp-status-dot{width:8px;height:8px}
}

@media(prefers-reduced-motion:reduce){
  .spp-character,.spp-attention.is-on,.spp-character.spp-celebrate,.spp-character.spp-react{animation:none!important}
  .spp-bubble.is-visible{animation:none!important}
}

/* =====================================================
   Compatibilidad con Elementor / temas que fuerzan
   fondos, bordes y hovers globales en los botones.
   ===================================================== */
#spp-companion .spp-character,
#spp-companion .spp-character:hover,
#spp-companion .spp-character:focus,
#spp-companion .spp-character:focus-visible,
#spp-companion .spp-character:active,
#spp-companion .spp-bubble-close,
#spp-companion .spp-bubble-close:hover,
#spp-companion .spp-bubble-close:focus,
#spp-companion .spp-bubble-close:active{
  background-color:transparent!important;
  background-image:none!important;
  border:0!important;
  box-shadow:none!important;
  text-decoration:none!important;
}
#spp-companion .spp-character::before,
#spp-companion .spp-character::after{
  content:none!important;
  display:none!important;
}
#spp-companion .spp-character img,
#spp-companion .spp-character:hover img,
#spp-companion .spp-character:focus img{
  background:transparent!important;
  border:0!important;
  outline:0!important;
  box-shadow:none!important;
}

/* El propio sprite ya comunica la salud; evitamos un punto rojo/rosa extra. */
#spp-companion .spp-status-dot{display:none!important}