.filtro-letra-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.filtro-letra {
    
    width: calc(100% / 26);
    max-width: 50px;
    margin-bottom: 10px;
    color: #1e4464;
    border-radius: 5px;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}
.filtro-letra:hover {
    
    border: 2px solid #27a693;

 }
 .seleccionada{
    border: 2px solid #27a693;

 }
 @media screen and (max-width: 768px) {
    .filtro-letra-container {
        /* Mantener el mismo estilo para el contenedor */
        overflow-x: auto;
        white-space: nowrap;
        flex-wrap: nowrap; /* Evitar que las letras se envuelvan en múltiples líneas */
        min-width: 100%; /* Asegura que el contenedor tenga el ancho completo */
        justify-content: flex-start; /* Alinea las letras al inicio del contenedor */
        padding: 10px 0; /* Agrega un espacio arriba y abajo del contenedor */
    }

    .filtro-letra {
        width: calc(100% / 26); /* Ajustar el ancho de las letras para mantenerlas cuadradas */
        max-width: 50px; /* Mantener el máximo ancho */
        margin-right: 10px; /* Espacio entre letras */
        margin-bottom: 10px; /* Espacio inferior para permitir desplazamiento */
    }
}