.card {
border-top-left-radius: 0 !important;
border-top-right-radius: 0 !important;
}
.accordion {
border-bottom: 0 !important;
}
#form-question-list {
flex: 1 1 auto;
padding: 0 0 1rem;
margin: 0;
margin-top: 5px;
overflow-y: auto;
-webkit-overflow-scrolling: touch; /* scroll suave en iOS */
}
.step-finished-title {
position: relative;
top: 0;
z-index: 99999999;
display: block;
width: 100%;
margin: 0 auto;
font-size: var(--text-lg);
line-height: 72px;
color: white;
text-align: center;
background-color: #66bd69;
}
.step-form-finished {
position: relative;
display: block;
width: 100%;
height: 100%;
/* background: rgb(236, 236, 236); */
}
.final-step-form-result {
position: relative !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: calc(100vh - 54px) !important;
box-shadow: none !important;
transform: none !important;
}
/* Flecha y animación */

/* Cuando el acordeón está abierto */

/* Altura fija visible del área de firma (ajústala a tu gusto) */
#signature-pad {
width: 100%;
}

#signature-pad .signature-pad--body {
position: relative;
width: 100%;
height: 220px; /* <= altura visible del lienzo */
overflow: hidden;
background: var(--color-bg-body);
border: 1px dashed rgba(0, 0, 0, 0.2);
border-radius: var(--radius-sm);
}

/* El canvas ocupa todo el body, que sí tiene altura real */
#signature-pad canvas {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
}

#signature_close {
position: relative;
z-index: 3; /* por encima de cualquier capa interna */
touch-action: manipulation;
}

/* Evita que los gestos del canvas “se coman” toques fuera del canvas */
#signature-pad .signature-pad--body {
touch-action: none; /* necesario para stylus/dedo; evita scroll fantasma */
}

/* Footer fijo (si ya lo tienes fijo, puedes omitir este bloque) */
.fixed-footer {
position: fixed;
right: 0;
bottom: 0;
left: 0;
z-index: 1000;
background: #fff;
box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.08);
}

/* Pestaña que aparece encima del footer */
.signature-tab {
position: fixed;
right: 16px;
bottom: 64px; /* altura del footer ~56-64px */
z-index: 1001;
display: inline-flex;
gap: 6px;
align-items: center;
padding: 8px 12px;
cursor: pointer;
user-select: none;
background: #fff;
border-radius: 12px 12px 0 0;
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
}

/* Panel de firma sobre el footer */
#signature_required_modal.signature-panel {
position: fixed;
right: 0;
bottom: 64px; /* justo encima del footer */
left: 0;
z-index: 1002;
max-height: 55vh;
overflow: auto;
background: #fff;
border-top-left-radius: 14px;
border-top-right-radius: 14px;
box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
}

/* Cabecera del panel */
.signature-panel-header {
position: sticky; /* se queda arriba si hay scroll */
top: 0;
z-index: 2; /* mayor que el contenido del panel */
display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 12px;
background: #fff;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.signature-pad--body {
min-height: 160px; /* ajusta según tu canvas */
background: var(--color-bg-body);
border: 1px dashed rgba(0, 0, 0, 0.2);
border-radius: var(--radius-sm);
}

/* Espaciado extra del contenido principal para no tapar nada */
#step2 {
padding-bottom: 120px; /* deja hueco para el footer/panel */
}