/* Contenedor de la gráfica */
#plot-container {
    position: relative;
    background-color: #f7f7f7da;
    border-radius: 8px;
    padding: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.389);
}

/* Imagen superpuesta dentro del gráfico */
#myPlot img {
    position: absolute; /* Posiciona la imagen dentro del contenedor */
    bottom: 20px; /* Ubicación desde abajo */
    right: -5px; /* Ubicación desde la derecha */
    width: 170px; /* Escala ajustable */
    height: auto; /* Mantén la proporción de la imagen */
    z-index: 5; /* Asegura que la imagen se superponga sobre otros elementos */
    pointer-events: none; /* Evita que la imagen interfiera con los eventos del gráfico */
    border: 1px solid hwb(0 100% 0%); /* Borde azul oscuro (puedes cambiar el color) */
    border-radius: 6px; /* Bordes redondeados */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Sombra tenue */
    background-color: white; /* Fondo blanco para destacar la imagen */
}

/* Gráfico ajustable */
#myPlot {
    position: relative; /* NECESARIO para posicionar elementos absolutos dentro */
    width: 100% !important;
    height: 100% !important;
    max-height: 500px;
}



/* Wrapper para dividir en dos columnas */
.controls-wrapper {
    display: flex;
    gap: 20px;
    margin-top: 20px;
}

/* Panel de configuración */
.config-panel {
    flex: 1;
    background-color: #f0f8ff; /* Color azul claro */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.389); /* Sombra tenue */
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.389);
    /*display: flex;
    flex-direction: column;*/
    border: 1px solid #dcdcdc; /* Borde gris tenue */
}


.config-group {
    margin-bottom: 15px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.config-group label {
    font-weight: bold;
}

.config-group input {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

/* Input azul */
.blue-input {
    color: #007bff; /* Azul para el texto */
    font-weight: bold;
}

/* Inputs que se ajustan al contenido */
.fit-width {
    width: fit-content;
    max-width: 120px; /* límite opcional */
    padding: 2px 4px;
    font-size: 14px;
}

/* Estilo "curvisa" para el panel derecho */
.curvisa {
    flex: 1;
    background-color: #f0f8ff; /* Color azul claro */
    border-radius: 15px; /* Bordes redondeados */
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.389); /* Sombra tenue */
    display: flex;
    flex-direction: column;
    gap: 15px;
    border: 1px solid #dcdcdc; /* Borde gris tenue */
}

/* Botones alineados en fila y ocupando todo el ancho */
.buttons-row {
    display: flex;
    gap: 10px; /* Espaciado entre botones */
    justify-content: space-between; /* Botones distribuidos uniformemente */
    width: 100%; /* Ocupan todo el ancho */
}

.buttons-row button {
    flex: 1; /* Cada botón ocupa el mismo espacio */
    text-align: center;
    padding: 10px 15px;
    border-radius: 20px; /* Botones más redondeados */
    border: 1px solid #ddd;
    background-color: #0b11d5;
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.buttons-row button:hover {
    background-color: #48c1c5;
}

/* Ajustes de los selectores */
.selectors {
    display: flex;
    gap: 30px;
    align-items: center;
    /*justify-content: space-between;*/
}

.selector-item {
    display: flex;
    align-items: center;
    gap: 5px; /* Reduce el espacio entre el texto y el checkbox */
}

.curvisa .selectors label {
    font-weight: bold;
    color: #000000;
}

/* Estilos responsivos */
@media (max-width: 600px) {
    .controls-wrapper {
        flex-direction: column;
    }

    .config-group {
        flex-direction: column;
    }

    .curvisa .selectors {
        flex-direction: column;
    }

    .buttons-row {
        flex-direction: column; /* Botones en columna en pantallas pequeñas */
    }

    .fit-width {
        width: 100%; /* Inputs ocupan todo el ancho en pantallas pequeñas */
    }
}

/* Filtro de tablas para añadir gráficos al layout*/
.table-filter {
    margin-top: 20px;
    display: flex;
    gap: 20px;
}

.table-input-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.table-input-section label {
    font-weight: bold;
}

.table-input-section input {
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.table-buttons {
    display: flex;
    gap: 10px;
}

.table-buttons button {
    flex: 1;
    text-align: center;
    padding: 8px 12px;
    border-radius: 15px;
    border: 1px solid #ddd;
    background-color: #0b11d5;
    color: #ffffff;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.table-buttons button:hover {
    background-color: #48c1c5;
}

.table-list-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #f7f7f7;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    padding: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.table-list-section label {
    font-weight: bold;
}

.table-list {
    list-style-type: none;
    padding: 0;
    margin: 0;
    overflow-y: auto;
    max-height: 150px; /* Altura máxima para la lista */
}

.table-list li {
    padding: 5px;
    margin: 2px 0;
    background-color: #ffffff;
    border: 1px solid #ccc;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.table-list li:hover, .table-list li.selected {
    background-color: #d9eaff;
}

/* Estilos responsivos para el filtro de tablas */
@media (max-width: 600px) {
    .table-filter {
        flex-direction: column;
    }

    .table-list {
        max-height: 100px; /* Reduce la altura en pantallas pequeñas */
    }
}