/* Estilos para botones con mismo ancho y alto */

#botones_zona {
    display: flex;
    gap: 15px; /* Espacio entre botones */
    justify-content: center; /* Centrar toda la fila */
}

#botones {
    display: flex; /* Activar Flexbox */
    flex-wrap: wrap; /* Permitir que los botones salten a la siguiente fila si no caben */
    justify-content: center; /* Espaciado uniforme entre botones */
    align-items: center; /* Centrar verticalmente dentro de cada fila */
    gap: 0px 10px; /* Espaciado adicional entre botones (opcional). primero vertical, despues horizontal */
}


.btn-sm {
    display: flex; /* Activar flexbox */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */
    width: 30%; /* Ancho completo del contenedor padre */
    height: 55px; /* Altura fija para todos los botones */
    margin-bottom: 0px; /* Espacio entre botones */
    margin-top: 20px;
    font-size: 14px;
}    


/* Botón presionado */
.btn-sm.activo {
    background-color: #333333; /* Fondo más oscuro cuando está presionado */
    border: 2px solid #444444;
    cursor: default;
}

/* Deshabilitar efecto hover para el botón presionado */
.btn-sm.activo:hover {
    background-color: #333333; /* Mantiene el color original */
    border: 2px solid #444444; /* Mantiene el borde original */
    cursor: default;
}



 /* Aqui van los estilos especiales para pantallas grandes */
@media (min-width: 600px) {


    .btn-sm {
      width: 20%; /* Ancho completo del contenedor padre */
      font-size: 16px;
}


@media (prefers-color-scheme: dark) {

    
}