body {    
    text-align: center;  
    }
        
    h1 {
    margin-top: 0px;
    font-family: Arial;
    font-size: 1.5rem;
    text-align: center;    
    }
    
    #selector {  
    display: block;
    }

    #g1,#g2,#g3
    {   
        
        width: 250px;
        height: 150px;
        display: inline-block;
        margin: 5px;
    }
    
    /* Contenedor general para la sección */
.home-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Estilos para los contenedores de gráficos */
.contenedorGraficos, .contenedorgauge {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

/* Estilos para cada panel de gráficos */
.panelConBordes {
    flex: 0 1 calc(33% - 12px); /* Ajusta para 2 gráficos por fila en pantallas grandes */
    max-width: calc(33% - 12px); /* Ajusta para 2 gráficos por fila en pantallas grandes */
    height: 300px;
    border: 2px solid #8d8c8c; 
    border-radius: 15px;
    box-sizing: border-box;
    margin: 5px;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

/* Reglas para pantallas pequeñas (por ejemplo, móviles) */
@media screen and (max-width: 600px) {
    .panelConBordes {
        flex: 0 1 100%; /* Ajusta para 1 gráfico por fila en pantallas pequeñas */
        max-width: 100%; /* Ajusta para 1 gráfico por fila en pantallas pequeñas */
    }
}