.firma-digital .container-digital {
    margin: 0 auto !important;
    max-width: 500px !important;
    width: 100%;
}

.canvas-wrapper {
    position: relative;
    width: 100%;
    padding-top: 60%; /* Relación de aspecto 300/500 = 0.6 (60%) */
}
  
#signatureCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.firma-digital {
    .container-digital {
        margin: 0 auto !important;
        max-width: 500px !important;
        width: 100%;
    }

    canvas {
          border: 2px solid #fd6500;
          display: block;
          margin: 0 auto;
          touch-action: none;
    }
    
    .buttons {
          margin-top: 10px;
    }
    
    button {
          margin: 5px;
          padding: 10px 20px;
          font-size: 16px;
          cursor: pointer;
    }
}

@media (max-width: 768px) {
      .firma-digital button {
          font-size: 14px;
          padding: 8px 16px;
      }
  }

  @media (max-width: 480px) {
      .firma-digital button {
          font-size: 12px;
          padding: 6px 12px;
      }

      .firma-digital canvas {
          border: 1px solid #000;
      }
  }