.signature{
	position: fixed;
	display: inline-block;
	
	width:  calc(100vw - 32px);
	height: calc(100vh - 32px);

	max-width: 500px;
	overflow: hidden;	
	margin-top: 16px;

	padding:8px;
	//top: 0px;
	bottom:-100vh;

	background-color: $c-w;
	@include bs-1;
	@include align-center;
	
	z-index: 210;
	overflow-y: scroll;
	//border: 5px solid green;               //←←←←←←←←←←←←←←←←←←←←	

	& .close{
		position: relative;
		display: inline-block;
		height: 48px;

		@include centerFlex;
		@include interaction-surface;
		
		& svg {
			
			height: 24px;
			width: 24px;
			fill: $c-b;
			@include selectNo;

		}
		//border: .5px solid red;               //←←←←←←←←←←←←←←←←←←←←

	}

	& .cont{
		position: relative;
		display: inline-block;	
		margin-top: 8px;
	
		 width: 100%;
	     height: 300px;

		@include centerFlex;
		margin-left: 50%;
		transform: translateX(-50%);
		background-color:lighten(black, 94%);

			background-image: url("./svg/gesture.svg");
		    background-repeat: no-repeat;
		    background-size: auto;

     	//border: 0.1px solid red;               //←←←←←←←←←←←←←←←←←←←←


	}


    & .title {  
      display: block;
      margin-left: 0px;
      margin-top: 12px;
      @include font(title, $c-b); 
    }

      & .des   { 
        display: block;
        margin-left: 0px; 
        @include font(body2, $c-b); 
      }   

}

.signer-name {
    position: absolute;
    font-size: 14px;
    color: #333; /* Color visible sobre el canvas */
    background: rgba(255, 255, 255, 0.8); /* Fondo semitransparente */
    padding: 4px 8px;
    border-radius: 4px;
    pointer-events: none; /* Permite interactuar con el canvas debajo */
}