/* General Styles */
body {
    background-color: #f2f2f2;
    color: #333;
    padding: 20px;
    padding-top: 70px;
    /* Espacio para top-bar si lo usas */
    margin: 0;
    min-height: 100vh;
    /* Permite que el body se expanda más allá del alto de la ventana */
    overflow-x: hidden;
    /* Evita scroll horizontal no deseado */
    overflow-y: auto;
    /* Permite scroll vertical si el contenido excede */
}


/* Loading Overlay */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(27, 27, 27, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1100;
}

.spinner-container {
    text-align: center;
}

/* Main Container */
main.container-fluid {
    /* Se define el ancho y centrado desde el HTML inline (width: 90%; margin: 0 auto;) */
    padding-bottom: 20px;
}

/* Results Container */
#resultsContainer {
    position: relative;
    background: transparent;
    border: none;
    box-shadow: none;
}

/* Results Table */
#resultsTable {
    width: 100%;
    table-layout: auto;

}

#resultsTable,
#resultsTable th,
#resultsTable td {
  font-size: 0.8rem !important;
}

/* Chart Container (Resultados) */
#chartContainer {
    width: 100%;
    max-height: 400px;
    /* Límite de altura del gráfico */
}



/* Configuration Modal (Strategy Modal) */
.outer-container {
    max-width: 900px;
    margin: 0 auto;
}

.indicator-label {
    text-align: center;
    font-weight: bold;
    font-size: 18px;
    margin: 10px 0;
    color: black;
}

.set-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
}

.main-container {
    display: flex;
    justify-content: space-between;
}

.slider-container {
    width: 48%;
}

.slider {
    width: 100%;
    margin: 5px 0;
}

/* noUiSlider Styles (usados por los sliders de configuración) */
.noUi-handle.put-handle {
    background-color: #e74c3c;
}

.noUi-handle.call-handle {
    background-color: #27ae60;
}

#sliderDeltaPuts .noUi-connect,
#sliderDeltaCalls .noUi-connect {
    background: transparent;
}

#sliderSpreadPuts .noUi-connect {
    background-color: #e74c3c;
}

#sliderSpreadCalls .noUi-connect {
    background-color: #27ae60;
}

/* Chart Container (Modal de configuración) */
.chart-container {
    text-align: center;
    margin-top: 10px;
    width: 100%;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

#chart {
    width: 100% !important;
    height: 400px;
}

@media (max-width: 576px) {
    #chart {
        height: 300px;
    }
}

/* Media Queries */
@media (max-width: 768px) {
    #resultsContainer {
        max-height: 400px;
        /* Reduce altura en pantallas pequeñas */
    }

}
/* Estilo normal: forzamos que los elementos y sus etiquetas tengan color negro */
.dropdown-menu .dropdown-item,
.dropdown-menu .dropdown-item .form-check-label {
  color: #000 !important;
}

/* En hover y foco: fondo más oscuro, pero manteniendo el texto negro */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
  background-color: #d9d9d9 !important;
  color: #000 !important;
}

.dropdown-menu .dropdown-item:hover .form-check-label,
.dropdown-menu .dropdown-item:focus .form-check-label {
  color: #000 !important;
}