/* ===== Toggle Mensual/Anual — estilo pill con gradiente y ring ===== */
.product-purchase-wrapper .btn-group.toggle-period {
    gap: .5rem;                         /* separación entre botones */
    padding: 5px;
    border: 1px solid lightgrey;
    border-radius: 2em;
    background-color: white;
  }
  
  .product-purchase-wrapper .btn-group.toggle-period .btn {
    border-radius: 9999px !important;   /* pill */
    padding: .625rem 1.1rem;
    /* border: 1px solid rgba(2,6,23,.12); */
    background: #fff;
    color: #334155;                     /* slate-700 */
    font-weight: 700;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    transition: all .18s ease;
    /* box-shadow: 0 1px 0 rgba(2,6,23,.01) inset; */
  }
  
  .product-purchase-wrapper .btn-group.toggle-period .btn:hover:not(.active) {
    color: #0f172a;                     /* slate-900 */
    /* border-color: rgba(2,6,23,.2); */
  }
  
  /* Estado activo: gradiente + ring azul + texto/iconos blancos */
  .product-purchase-wrapper .btn-group.toggle-period .btn.active,
  .product-purchase-wrapper .btn-group.toggle-period .btn.active:focus {
    color: #fff;
    border-color: transparent;
    background: linear-gradient(135deg, #348eac, #42b5d0);
    /* box-shadow:
      0 2px 12px rgb(55 149 179), 
      0 0 0 1px rgba(30, 102, 255, .10) */
  }
  
  .product-purchase-wrapper .btn-group.toggle-period .btn.active svg {
    color: currentColor;                /* icono blanco */
    filter: drop-shadow(0 1px 0 rgba(255,255,255,.25));
  }
  
  /* Enfoque accesible */
  .product-purchase-wrapper .btn-group.toggle-period .btn:focus-visible {
    outline: none;
    box-shadow:
      0 0 0 3px rgba(30,102,255,.20),
      0 0 0 6px rgba(30,102,255,.10);
  }