/* Contenedor de la gráfica */
#plot-container {
    background-color: #f7f7f7;
    border-radius: 8px;
    padding: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    overflow: hidden;
    width: 100%;
    max-width: 100%; /* Asegura que el contenedor no se expanda más allá del ancho disponible */
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}


/* Gráfico ajustable */
#myPlot {
    width: 100% !important; /* Asegura que el gráfico ocupe el 100% del contenedor */
    height: 100% !important; /* Ajusta la altura para ocupar el 100% del contenedor */
    max-height: 500px; /* Limita la altura máxima del gráfico para evitar que sea demasiado grande */
}

/* Estilos para el contenedor de controles */
.controls-container {
    background-color: #f7f7f7;
    border-radius: 8px;
    padding: 20px;
    margin-top: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Controles de fecha y consulta */
.date-controls {
    display: flex;
    flex-wrap: wrap; /* Permite que los controles se ajusten en varias filas si es necesario */
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.date-controls label {
    font-weight: bold;
}

.date-controls input[type="datetime-local"] {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.btn-controls {
    margin: 0 5px;
    padding: 5px 15px;
    border-radius: 4px;
    border: 1px solid #ddd;
    background-color: #ddd;
    color: #007bff;
    cursor: pointer;
    transition: background-color 0.3s ease;
    /* Asegura que el botón sea más adaptativo */
    width: auto; /* Permite que el ancho del botón se ajuste al contenido */
}
.btn-controls:hover {
    background-color: #f0f0f0;
}

@media (max-width: 600px) {
    .date-controls {
        flex-direction: column; /* Cambia la dirección de los controles a columna en pantallas pequeñas */
        gap: 10px;
    }

    .btn-controls {
        width: 100%; /* Hace que los botones ocupen el ancho completo en pantallas pequeñas */
        margin: 5px 0;
    }
}