#app {
    background-color: rgb(248, 248, 248);
}

.material-icon {
    font-family: 'Material Symbols Outlined';
    font-style: normal;
    font-variation-settings:
        'FILL' 0,  
        'wght' 200, /* Grosor ligero */
        'GRAD' 0,
        'opsz' 24;
}

.material-icon.material-icon-fill {
    font-variation-settings:
        'FILL' 1, /* Activa la versión rellena */
        'wght' 200,
        'GRAD' 0,
        'opsz' 24 !important;
}
  

.custom-radius{
    border-radius: 10px !important;
}

.custom-label{
    font-size: .8rem;
}

.max-card {
    max-width: 46rem !important;
    margin: auto;
}

.animated-card {
    animation: colorChange 7s infinite alternate;
}

/* Definir la animación */
@keyframes colorChange {
0% {
    background-color: #8453C9; /* Color 1 */
}
50% {
    background-color: #000; /* Color 2 */
}
100% {
    background-color: #8453C9; /* Color 3 */
}
}