.puma-inscripciones-widget {
  --puma-size: 160px;
  --puma-primary: #172554;
  --puma-background: #ffffff;
  position: fixed;
  right: 24px;
  bottom: 18px;
  z-index: 9999;
  width: var(--puma-size);
  font-family: Arial, Helvetica, sans-serif;
  pointer-events: none;
}

.puma-inscripciones-widget,
.puma-inscripciones-widget * {
  box-sizing: border-box;
}

.puma-inscripciones-canvas {
  display: block;
  width: 100%;
  height: auto;
  cursor: pointer;
  user-select: none;
  pointer-events: auto;
  filter: drop-shadow(0 8px 8px rgb(0 0 0 / 20%));
  transition: transform 180ms ease;
}

.puma-inscripciones-canvas:hover {
  transform: translateY(-3px);
}

.puma-inscripciones-globo {
  position: absolute;
  right: 8px;
  bottom: calc(100% + 12px);
  width: max-content;
  min-width: 130px;
  max-width: min(280px, calc(100vw - 32px));
  padding: 12px 16px;
  color: var(--puma-primary);
  background: var(--puma-background);
  border: 2px solid var(--puma-primary);
  border-radius: 16px;
  box-shadow: 0 6px 18px rgb(0 0 0 / 18%);
  font-size: 14px;
  line-height: 1.4;
  overflow-wrap: anywhere;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
  pointer-events: auto;
}

.puma-inscripciones-globo::after {
  content: "";
  position: absolute;
  right: 28px;
  top: 100%;
  border: 10px solid transparent;
  border-top-color: var(--puma-primary);
}

.puma-inscripciones-globo.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

@media (max-width: 600px) {
  .puma-inscripciones-widget {
    --puma-size: 125px;
    right: 12px;
    bottom: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .puma-inscripciones-canvas,
  .puma-inscripciones-globo {
    transition: none;
  }
}