/* General */
       
       h1 {
        color: #0056e0;
    }
    .containerCurve {
        text-align: center;
        /*width: 90%;
        margin-left: auto;
        margin-right: auto;
        font-family: Arial, sans-serif;*/
      /*  background-color: #f4f4f9;*/
        color: #333;
        display: flex;
        justify-content: left;
        align-items: center;
        margin: 0;
        
    }

    /* Formulario en línea */
    .form-inline {
        display: flex;
        gap: 10px;
        margin-bottom: 20px;
        align-items: flex-start;
    }
    .input-group2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        max-width: 200px;
        position: relative; /* Asegúrate de agregar esta propiedad */

    }
    .form-inline input {
        padding: 10px;
        font-size: 1em;
        border: 2px solid #ddd;
        border-radius: 5px;
        width: 100%;
    }
    .form-inline button {
        padding: 10px 15px;
        font-size: 1em;
        color: #ffffff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    .add-button {
        background-color: #007bff; /* Color para el botón Agregar Ticker */
        white-space: nowrap;

    }
    .add-button:hover {
        background-color: #0056b3;
    }
    .calculate-button {
        background-color: #28a745; /* Color para el botón Calcular */
    }
    .calculate-button:hover {
        background-color: #218838;
    }

    /* Contenedor de la lista de Tickers */
    #ticker-list-container {
        width: 100%;
        max-width: 200px; /* Asegura el mismo ancho que el input */
        max-height: 150px; /* Limitar la altura para el scroll */
        overflow-y: auto;
        border: 1px solid #ddd;
        border-radius: 5px;
        padding: 5px;
        box-sizing: border-box;
        margin-top: 5px;
        position: absolute; /* Cambia de relative a absolute */
        background-color: #ffffff;
        z-index: 1000; /* Asegura que se superpone a otros elementos */
        top: calc(100% + 5px); /* Ajusta la posición para que se despliegue debajo del input */
        left: 0;
    }

    #ticker-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    #ticker-list li {
        display: flex;
align-items: center;
justify-content: space-between;
padding: 10px 15px;
color: #333;
font-size: 1em;
border-bottom: 1px solid #ddd;
cursor: pointer;
transition: background-color 0.3s ease;
text-align: left;
background-color: #ffffff;
    }
/*
    #message-container {
        height: 50px; 
        margin-bottom: 5px; 
        position: relative; 
        text-align: center;
    }
    
    #error-message,
    #success-message {
        position: absolute; 
        top: 0;
        left: 0;
        right: 0;
        width: 600px;
        padding: 10px;
        border-radius: 5px;
        text-align: center; 
        visibility: hidden; 
        opacity: 0; 
        transition: opacity 0.5s ease, visibility 0s 0.5s; 
        margin-left: auto;
        margin-right: auto;
    }
    
    #error-message {
        background-color: #ffcccc;
        color: #990000;
    }
    
    #success-message {
        background-color: #ccffcc;
        color: #006600;
    }
    
    
    #error-message.visible,
    #success-message.visible {
        visibility: visible;
        opacity: 1;
        transition: opacity 0.5s ease;
    }
    
*/
    .hidden {
        display: none;
    }
    .load-curves {
display: flex;
align-items: center;
gap: 10px;
margin-top: 20px;
justify-content: flex-start;
}

#saved-curves {
padding: 10px;
font-size: 1em;
border: 2px solid #ddd;
border-radius: 5px;
width: 200px; /* Ancho del selector */
box-sizing: border-box;
}

.load-button {
padding: 10px 15px;
font-size: 1em;
color: #ffffff;
background-color: #17a2b8; /* Color para el botón de cargar */
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
}

.load-button:hover {
background-color: #138496;
}
#curve-name{
width: 250px;

}
.form-inline input,  #saved-curves {
height: 44px; /* Ajuste de altura uniforme */
padding: 8px 15px; /* Ajuste de padding para inputs y botones */
font-size: 1em;
box-sizing: border-box;
}

.add-button, .calculate-button, .load-button {
margin-top: 1px;
padding: 8px 14px; /* Asegura un padding consistente */
line-height: normal; /* Ajusta el line-height para evitar desajustes */
height: 42px; /* Mantén la misma altura que los inputs */
display: flex;
align-items: center; /* Centra el texto verticalmente */
justify-content: center;
box-sizing: border-box; /* Asegura que el borde no afecte el tamaño total */
}


.suggestions-container {
position: absolute;
display: none;
top: calc(100% + 5px);
left: 0;
background-color: #fff;
border: 1px solid #ced4da;
border-top: none; 
max-width: 600px;
max-height: 200px;
overflow-y: auto;
z-index: 1000;
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
border-radius: 4px;
}

.suggestion-item {
padding: 8px;
cursor: pointer;
white-space: nowrap; 
overflow: hidden; 
text-overflow: ellipsis; 
text-align: left;

}
.suggestion-item:hover {
background-color: #f1f1f1;
}
#saved-curves option {
margin-right: 10px;
border: 1px solid #ddd; /* Borde inferior para separar opciones */
font-size: 1em; /* Tamaño de fuente coherente */
}

#saved-curves option:hover {
background-color: #000000; /* Fondo diferente al pasar el cursor */
color: #003d99; /* Color del texto en hover */
}

.chart1{
display: flex;
justify-content: center;
margin-top: 30px;
margin-bottom: 6rem;

}/* Contenedor del select personalizado */
.custom-select-wrapper {
position: relative;
max-width: 200px;
width: 100%;
padding-right: 20px; /* Espacio adicional a la derecha para la flecha */

}

/* Estilo para el select personalizado */
.custom-select1 {
background-color: #ffffff; /* Fondo blanco */
color: #333; /* Letra negra */
border: 1px solid #ddd; /* Borde gris */
border-radius: 5px;
cursor: pointer;
padding: 10px;
font-size: 1em;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
}

/* Estilo del texto dentro del select */
.custom-select-trigger {
display: inline-block;
width: 100%;
text-align: left;
}

/* Estilo para las opciones desplegables */
.custom-options {
display: none;
position: absolute;
top: 100%;
left: 0;
width: 100%;
background-color: #ffffff; /* Fondo blanco */
border: 1px solid #ddd; /* Borde gris */
border-radius: 0 0 5px 5px;
max-height: 150px;
overflow-y: auto;
z-index: 1000;
}

/* Estilo de cada opción */
.custom-option {
padding: 8px 10px;
color: #333; /* Letra negra */
cursor: pointer;
font-size: 1em;
}

/* Fondo gris claro en hover */
.custom-option:hover {
background-color: #f1f1f1;
}

/* Muestra el menú desplegable cuando se abre */
.open {
display: block;
}


#options-container li:last-child {
border-bottom: none; /* Elimina la línea del último elemento */
}

/* Estilo para el texto del placeholder en gris */
.custom-select-trigger.placeholder {
color: #757575; /* Color gris claro para el placeholder */
}
.custom-select-trigger::after {
content: "▼"; /* Flecha hacia abajo */
font-size: 0.9em; /* Ajusta el tamaño de la flecha */
color: #323131; /* Gris oscuro para la flecha */
position: absolute;
right: 10px; /* Alinea la flecha en el extremo derecho */
top: 50%;
transform: translateY(-50%); /* Centra verticalmente */
}
/* Ajustes generales de la lista y las opciones */
#options-container {
list-style-type: none; /* Quita los puntos de la lista */
padding: 5px;
margin: 0;
border-radius: 5px;
overflow-y: auto;
}

#options-container li {
display: flex;
align-items: center; /* Centra verticalmente el contenido, incluyendo el ícono */
justify-content: space-between; /* Distribuye texto a la izquierda y el ícono a la derecha */
padding: 10px 15px;
color: #333;
font-size: 1em;
border-bottom: 1px solid #ddd;
cursor: pointer;
transition: background-color 0.3s ease;
text-align: left;
}

#options-container li:hover {
background-color: #f1f1f1; /* Fondo gris claro al pasar el cursor */
}


.delete-icon {
width: 18px;
height: 18px;
color: #b0b0b0; /* Color base más claro */
margin-left: 15px;
cursor: pointer;
opacity: 1; /* Ícono siempre visible */
transition: color 0.3s ease, transform 0.3s ease;
display: flex; /* Asegura que el SVG ocupe todo el espacio y se centre */
align-items: center; /* Centra el ícono verticalmente */
justify-content: center; /* Centra el ícono horizontalmente */
}

/* Efecto de color y escala solo al pasar el cursor sobre el ícono */
.delete-icon:hover {
color: #ff3333; /* Cambia a rojo brillante solo cuando se pasa el cursor sobre el ícono */
transform: scale(1.2); /* Aumenta el tamaño del ícono solo en hover */
}
/* Estilos comunes para las opciones */
#ticker-list li {
display: flex;
align-items: center; /* Centra verticalmente el contenido, incluyendo el ícono */
justify-content: space-between; /* Distribuye texto a la izquierda y el ícono a la derecha */
padding: 10px 15px;
color: #333;
font-size: 1em;
border-bottom: 1px solid #ddd;
cursor: pointer;
transition: background-color 0.3s ease;
text-align: left;
}

#ticker-list li:hover {
background-color: #f1f1f1; /* Fondo gris claro al pasar el cursor */
}

/* Estilo del ícono de eliminación */
#ticker-list .delete-icon {
width: 16px;
height: 16px;
color: #b0b0b0;
margin-left: 15px;
cursor: pointer;
opacity: 1;
transition: color 0.3s ease, transform 0.3s ease;
display: flex;
align-items: center;
justify-content: center;

}

/* Ajuste del icono de eliminación en ticker-list */
#ticker-list .delete-icon {
width: 18px; /* Ajusta el tamaño según sea necesario */
height: 18px;
color: #b0b0b0;
margin-left: 15px;
cursor: pointer;
transition: color 0.3s ease, transform 0.3s ease;
display: inline-flex; /* Cambia a inline-flex para evitar distorsiones */
align-items: center;
justify-content: center;
}

#ticker-list .delete-icon svg {
width: 100%; /* Ocupa el ancho del contenedor delete-icon */
height: auto; /* Mantiene la proporción del SVG */
}

#ticker-list .delete-icon:hover {
color: #ff3333;
transform: scale(1.2);
}

/* Elimina el borde inferior del último elemento */
#ticker-list li:last-child {
border-bottom: none;
}

.containertrigger {
    display: flex;
    justify-content: flex-end;
    position: relative; /* Cambiado de 'fixed' a 'relative' */
    width: 100%;
    margin-top: 6rem;
    }
    
    .trigger {
    padding: 5px;
    background-color: black;
    color: white;
    text-align: center;
    border-radius: 5px;
    width:80px;
    cursor: pointer;
    margin-right: 2.5%;
    }
    
    .trigger2 {
    padding: 5px;
    background-color: transparent;
    color: white;
    text-align: center;
    border-radius: 5px;
    cursor: pointer;
    margin-right: 3rem;
    }
    
    .tooltip2 {
        position: absolute;
        background-color: black;
        color: white;
        padding: 10px;
        border-radius: 5px;
        display: none;
        width: 600px;
        font-size: 0.8rem;
        z-index: 100;
        }
        
    /* Contenedor del botón Tau */
#tau-container {
    position: relative;
    display: inline-block;
    margin-left: 10px;
}

/* Botón Tau */
#tau-button {
    padding: 8px 14px;
    font-size: 1em;
    color: #ffffff;
    background-color: #007bff; /* Color para el botón Tau */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    height: 42px; /* Coincide con otros botones */
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

#tau-button:hover {
    background-color: #0056b3; /* Fondo más oscuro al pasar el cursor */
}

/* Contenedor de inputs Tau */
#tau-inputs {
    display: none;
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    width: 100px;
    background-color: #ffffff;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 10px;
    z-index: 1100; /* Por encima de otros elementos */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

/* Inputs de Tau */
#tau-inputs label {
    display: block;
    font-size: 0.9em;
    color: #333;
    margin: 5px 0;
}

#tau-inputs input {
    padding: 8px;
    font-size: 1em;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 10px;
}

/* Fondo gris claro en hover para inputs */
#tau-inputs input:focus {
    border-color: #0056e0;
    box-shadow: 0 0 5px rgba(0, 86, 224, 0.5);
}

/* Interacciones con el botón Tau y su menú */
#tau-container .hidden {
    display: none;
}
.parameters-container {
    margin-top: 20px;
    padding: 10px;
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 14px;
    display: flex;
    justify-content: center;
    width: 50%;
    margin-right: auto;
    margin-left: auto;

}

.parameter-item {
    margin-bottom: 5px;
    margin-right: 15px;
}

#ticker-input {
    width: 100%;
    padding-right: 60px; /* Espacio suficiente para los iconos */
    box-sizing: border-box;
}

#clear-ticker-list {
    position: absolute;
    right: 30px; /* Alinea la papelera al lado izquierdo de la flecha */
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

#toggle-ticker-list {
    position: absolute;
    right: 10px; /* Alinea la flecha al extremo derecho */
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}

/* Flecha como pseudo-elemento */
#toggle-ticker-list::after {
    content: "▼"; /* Flecha hacia abajo */
    font-size: 0.9em;
    color: #323131;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0; /* La flecha queda en el extremo del contenedor */
    cursor: pointer;
}
.em1{
    min-width:300px;    
    font-size:0.85rem;    
    font-weight:600;  
    text-align:left !important;
    padding-left:10px;
    }
    
    
    .em2{
        
    min-width:500px;        
    font-size:0.8rem;        
    text-align:left !important;
    
    
    
    
    }

    .tabsim{

        margin-bottom: 2rem !important;
        
        }
 .parrafEmi{

    margin-top:15px;margin-left:35px;
 }
 .containerEmi{
    position: relative;min-height: 100vh;
 }
 .margEmi1{
    margin-top:25px;
 }
 .margEmi2{
    margin-top:20px;
 }
 .margEmi3{
    margin-top:3rem;
 }
 #error-message, #success-message {
    padding: 9px;
    margin-left: 20px;
    margin-bottom: 20px;
    border-radius: 5px;
    display: none; /* Ocultar por defecto */
}

#error-message {
    color: #721c24;
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
}

#success-message {
    color: #155724;
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
}
.file-list {
    list-style-type: none; /* Quita las viñetas */
    padding: 0; /* Quita el margen interno */
    margin: 0; /* Quita el margen externo */
}

.file-item {
    padding: 8px;
    margin-bottom: 5px;
    text-decoration: underline; /* Subrayado para que parezca un link */
    cursor: pointer; /* Cambia el cursor al puntero cuando se pasa el mouse */
    color: #007bff; /* Color típico de un link */
}

.file-item:hover {
    color: #0056b3; /* Color más oscuro al pasar el mouse */
    text-decoration: none; /* Opcional: quita el subrayado al pasar el mouse */
}