@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-5px) rotate(-1deg); }
    50% { transform: translateX(5px) rotate(1deg); }
    75% { transform: translateX(-5px) rotate(-1deg); }
    100% { transform: translateX(0); }
}

.card-claimable {
    /* Mantenemos solo la animación y el cursor */
    animation: shake 1.5s infinite ease-in-out;
    cursor: pointer;
    
    /* ELIMINAMOS cualquier filter: drop-shadow aquí. 
       Ahora el JS se encarga de poner el color correcto. */
}
/* Estado visual para cartas procesando reclamo */
.card-processing {
    opacity: 0.7;
    pointer-events: none;
    animation: pulse 0.5s infinite;
}


/* --- CASO 1 COLUMNA --- */
/* Ideal para que no se vea gigante en tablets/PC */
#cardsContainer[data-cols="1"] canvas {
    max-width: 700px !important;  /* Ajusta este valor */
    width: 100%;
    margin: 0 auto !important;    /* Centrado horizontal */
}

/* --- CASO 2 COLUMNAS --- */
/* Si quieres que sean un poco más pequeñas o dejar que llenen todo */
#cardsContainer[data-cols="2"] canvas {
    max-width: 100%;             /* 100% deja que llenen el hueco disponible */
    /* max-width: 400px; */      /* Descomenta si quieres limitarlas */
    margin: 0 auto !important;
}

/* --- CASO 3 COLUMNAS --- */
#cardsContainer[data-cols="3"] canvas {
    max-width: 100%;
    margin: 0 auto !important;
}

/* --- CASO 4 COLUMNAS --- */
/* Normalmente aquí quieres que usen todo el espacio posible */
#cardsContainer[data-cols="4"] canvas {
    max-width: 100%; 
    margin: 0 auto !important;
}