.scrollable-table {
    overflow: hidden; /* Oculta la barra de desplazamiento en el div */
}

.margen45{
	margin-top:45px;
}

body {
	background-color: #d4d9e2;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
body.dark-mode {
	background-color: #1c2a35;
	color: #ffffff;
}

#rChart {
	height: 100% !important;
	position: relative;
	flex: 1;
	min-width: 0;
}

canvas[data-zr-dom-id="zr_0"] {
    width: 100%; /* Ancho del canvas al 100% del contenedor */
    height: 100%; /* Altura del canvas al 100% del contenedor */
}

/* tabla-container */
#tabla-container-atfusion, #tabla-container-consenso, #tabla-container-consenso td, #tabla-container-consenso th{
    border: 1px solid #ccc;
	text-align: center; /* Centra el contenido en las celdas */
}  

#tabla-container-consenso {max-height: 520px;} /* Altura máxima del contenedor */
#tabla-container-candle {max-height: 520px;} /* Altura máxima del contenedor */
#tabla-container-atfusion {max-height: 520px;} /* Altura máxima del contenedor */
	
#tabla-container-candle, #tabla-container-consenso, #tabla-container-atfusion, #tabla-indicadores {
    overflow-y: auto; /* Habilitar el scroll vertical si es necesario */
    overflow-x: auto; /* Ocultar la barra de desplazamiento horizontal */
    scrollbar-width: thin; /* Ancho delgado */
    scrollbar-color: transparent transparent; /* Color transparente */
}

#indicadores-container::-webkit-scrollbar {width: 0;}
#tabla-container-consenso::-webkit-scrollbar {width: 0;} /* Ocultar la barra de desplazamiento en navegadores WebKit (por ejemplo, Chrome) */
#tabla-container-candle::-webkit-scrollbar {width: 0;} /* Ocultar la barra de desplazamiento en navegadores WebKit (por ejemplo, Chrome) */
#tabla-container-atfusion::-webkit-scrollbar {width: 0;} /* Ocultar la barra de desplazamiento en navegadores WebKit (por ejemplo, Chrome) */

#tabla-summary thead, #tabla-listado-empresas thead,  #tabla-indicadores thead {
  position: sticky;
  top: 0; /* Fija el encabezado en la parte superior del contenedor */
  z-index: 1; /* Asegura que el encabezado esté por encima del contenido */
}

/* Establece el ancho de las columnas del cuerpo */
#tabla-summary thead th:nth-child(1) { width: 15%; }
#tabla-summary thead th:nth-child(2) { width: 10%; }
#tabla-summary thead th:nth-child(3) { width: 9%; }
#tabla-summary thead th:nth-child(4) { width: 6%; }
#tabla-summary thead th:nth-child(5) { width: 10%; }
#tabla-summary thead th:nth-child(6) { width: 6%; }
#tabla-summary thead th:nth-child(7) { width: 6%; }
#tabla-summary thead th:nth-child(8) { width: 7%; }
#tabla-summary thead th:nth-child(9) { width: 7%; }
#tabla-summary thead th:nth-child(10) { width: 7%; }
#tabla-summary thead th:nth-child(11) { width: 10%; }
#tabla-summary thead th:nth-child(12) { width: 7%; }

.fs15 {
	font-size: 1.5rem;
}
/* para el estilo de la carga de datos tabla summary */

.loading td {
    text-align: center;
    font-size: 1.5rem;
    color: #000;
    /* Otros estilos como altura de la fila, fondo, etc. */
}

#loading-message-row td {
    text-align: center;
    font-size: 1.5rem;
    color: #000;
    /* Otros estilos como altura de la fila, fondo, etc. */
}

#info-filas {
    color: #888; /* Un color más suave */
    font-size: 0.7rem; /* Tamaño de fuente más pequeño */
    text-align: right; /* Alineación a la derecha */
    margin-right: 20px; /* Margen a la derecha para separarlo del borde si es necesario */
	color: #202164; /* Texto en */
	font-style: italic;
    /* Añadir cualquier otro estilo adicional que necesites */
}

/* Estilos predeterminados para dispositivos móviles 
#consenso-summary {
  display: block; 
}

#consensus_bar_chart {
  display: block;  Asegura que se apile en dispositivos móviles 
}
*/

/* Test */
.latContainer {
  display: flex;
  flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
}

.lat1Element {
  flex: 1 1 calc(100%); /* Resta el doble del margen (por cada lado) del ancho base */
  margin: 2px;  /* Distribuye el espacio disponible entre d1 y d2 */
  min-width: 0; /* Evita que los elementos sean más anchos que su contenido */
  box-sizing: border-box; /* Incluye el padding en el ancho total */
}

.lat3Element {
  flex: 1 1 calc(33% - 5px); /* Resta el doble del margen (por cada lado) del ancho base */
  margin: 2px;  /* Distribuye el espacio disponible entre d1 y d2 */
  min-width: 0; /* Evita que los elementos sean más anchos que su contenido */
  box-sizing: border-box; /* Incluye el padding en el ancho total */
}

.lat4Element {
  flex: 1 1 calc(25% - 5px); /* Resta el doble del margen (por cada lado) del ancho base */
  margin: 2px;  /* Distribuye el espacio disponible entre d1 y d2 */
  min-width: 0; /* Evita que los elementos sean más anchos que su contenido */
  box-sizing: border-box; /* Incluye el padding en el ancho total */
}

.lat5Element {
  flex: 1 1 calc(20% - 3px); /* Resta el doble del margen (por cada lado) del ancho base */
  margin: 2px;  /* Distribuye el espacio disponible entre d1 y d2 */
  min-width: 0; /* Evita que los elementos sean más anchos que su contenido */
  box-sizing: border-box; /* Incluye el padding en el ancho total */
}


.lat3Element25, .lat3Element50 {
  flex: 1 1 25%; /* Ocupa el 25% del ancho disponible */
  flex-basis: 0; /* Distribuye el espacio disponible entre los elementos */
  margin: 0 5px; /* Margen de 10px en total (5px a cada lado) */
  min-width: 0; /* Evita que los elementos sean más anchos que su contenido */
  box-sizing: border-box; /* Incluye el padding en el ancho total */
}

.lat3Element50 {
  flex-basis: 50%; /* Ocupa el 50% del ancho disponible */
}



/* Para bordes */
.contenedor-externo {
    /* Estilos opcionales para el contenedor externo */
    padding: 10px;
    border: 1px solid black; /* Bordes para el div externo */
}

.div-interno {
    /* Estilos para los div internos */
    border: 2px solid rgba(200, 200, 200, 0.5); /* Bordes rojos para los div internos */
    
}

.fondoSuave {
    background-color: solid #F5F5F5; /* Cambia esto por el color de fondo que prefieras */
    /* Agrega aquí otros estilos de fondo si es necesario, como imágenes de fondo, etc. */
}

/* Para menú no disponible */
.gris-suave {
    color: #B1B1B1; /* Puedes ajustar el valor de color según tus preferencias */
}

.apiava {
    color: #06767F; /* Puedes ajustar el valor de color según tus preferencias */
}

.borde-gris-suave {
  border: 1px solid #ccc; /* Borde gris suave */
  border-radius: 5px;     /* Esquinas redondeadas */
  padding: 10px;          /* Espaciado interno */
}


/* Pie Charts */ 

.pie200 {

    max-width: 200px;
    max-height: 200px;
}

.bar200 {
    max-width: 350;
    max-height: 250px;
}



/* charts de resumen, que el loading salga centrado Vertical y horizontal */

.loadingChart{
    align-items: center;
    justify-content: center;
    height: 100%; /* O la altura específica que desees */
}


/* agenda */

.detalle-fila td {
    background-color: #f9f9f9; /* Color de fondo para la fila de detalle */
    /* Otros estilos que necesites */
}


#tbodyAgenda{
	font-size: 0.7rem;
}

/* Estilos para los div que agrupan los días de la semana */
.div-dia {
    border-top: 2px solid #E1DDDD; /* Línea superior de cada div */
    margin-top: 20px; /* Espacio entre los div */
}

/* Estilos para las filas de título de cada día de la semana */
.titulo-dia {
    background-color: #E1DDDD; /* Color de fondo para las filas de título */
    font-weight: bold; /* Texto en negrita para los títulos */
}

#WeeklyDataChart {
    width: 100%;
    height: 150px;
}
.prev-week-container {
    text-align: left; /* Alineación a la izquierda */
    margin-top: 20px;
}

.prev-week-link {
    display: flex;
    align-items: center;
    text-decoration: none; /* Elimina el subrayado */
    font-size: 0.7em;
    color: #007bff;
    font-weight: bold;
    border-bottom: none; /* Asegúrate de que no haya bordes en la parte inferior */
}

.arrow-left {
    margin-right: 8px;
}

.week-text {
    display: inline-block;
}

/* Hover effect */
.prev-week-link:hover {
    color: #0056b3;
    
}
.textomoon {
  font-family: Arial, sans-serif;
  font-size: 20px;
  text-align: center;
  color: #333; /* Color del texto */
  background-color: #f7f7f7; /* Color de fondo */
  padding: 10px;
  border-radius: 5px; /* Bordes redondeados */
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); /* Sombra suave */
  margin-bottom: 5px; 
}

/* Gráfico de series macro */ 
#serieChart_${uniqueId} {
    width: 100%; /* o una anchura fija en píxeles */
    height: 300px; /* altura fija */
}

/* Línea separadora */ 
.lineaseparadoragruesa {
	border-top: 3px solid #333;
}

@media (max-width:736px) {
    .info-mg-top {
       margin-top: 15px !important 
   }
    .btn-mg-top {
       margin-top: 15px !important 
   }
}
@media (min-width:736px) {
    .info-mg-top {
       margin-top: 15px !important 
   }
    .btn-mg-top {
       margin-top: 25px !important 
   }
}
@media (max-width:578px) {
   .extra-pl-small-scr{
       padding-left: 25px !important;
   }
}


@media screen and (max-width: 736px) {
    .latContainer, .lat290ElementLeft, .lat290ElementRight, .lat3ElementLeft, .lat3ElementCenter, .lat3ElementRight {
        flex-direction: column;
		flex: 1 1 1 100%; /* Ocupa el ancho completo en pantallas pequeñas */
		width: 100%; /* Ocupa todo el ancho en pantallas pequeñas */
    }
}

@media screen and (max-width: 736px) {
    
  .lat2Element, .lat4Element, .lat5Element {
     /* flex: none; Restaura el comportamiento predeterminado de apilamiento en pantallas pequeñas */
	  flex: 1 1 1 100%; /* Ocupa el ancho completo en pantallas pequeñas */
    width: 100%; /* Ocupa todo el ancho en pantallas pequeñas */
  }
  
  .lat3Element {
    flex: 1 1 1 100%; /* Ocupa el ancho completo en pantallas pequeñas */
    margin: 5px 0; /* Margen de 10px arriba y abajo */
  }
}


.macroTable {
	border: 1px solid #cccccc;
}

.resetbut {

    font-size: 0.8rem;
	outline: 1px;
}



.errortext {
    color: #ff0000; /* Color de texto rojo para indicar error */
}

#resetIcon, #toggleTooltipButton {
  cursor: pointer; /* Cambia el cursor al puntero cuando se coloca encima */
  
}

/* Elemento Izquierdo - 10% del ancho y derecho 90%*/
.flexContainer {
  display: flex;
  flex-direction: row; /* Asegúrate de que sea 'row' para un diseño horizontal */
  flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
  width: 100%;
}

/* 3 en contenedor */
.lat3ElementLeft {
  flex: 0 0 5%; /* no crece, no se encoge, base del 10% */
  min-width: 0;
  box-sizing: border-box;
  justify-content: center; /* Centra horizontalmente */
  text-align: center; /* Centra el texto si hay varias líneas o elementos inline */
}

.lat3ElementCenter {
  flex: 0 0 95%; /* no crece, no se encoge, base del 90% */
  min-width: 0;
  box-sizing: border-box;
  justify-content: center; /* Centra horizontalmente */
  text-align: center; /* Centra el texto si hay varias líneas o elementos inline */
}

.lat3ElementRight {
  flex: 0 0 0%; /* no crece, no se encoge, base del 10% */
  min-width: 0;
  box-sizing: border-box;
  justify-content: center; /* Centra horizontalmente */
  text-align: center; /* Centra el texto si hay varias líneas o elementos inline */
}

.lat290ElementLeft {
  flex: 0 0 5%; /* no crece, no se encoge, base del 10% */
  min-width: 0;
  box-sizing: border-box;
  justify-content: center; /* Centra horizontalmente */
  text-align: center; /* Centra el texto si hay varias líneas o elementos inline */
}

.lat290ElementRight {
  flex: 0 0 95%; /* no crece, no se encoge, base del 90% */
  min-width: 0;
  box-sizing: border-box;
  justify-content: center; /* Centra horizontalmente */
  text-align: center; /* Centra el texto si hay varias líneas o elementos inline */
}



/* Efecto hover temporal */
.hover-temporal {
  background-color: rgba(70, 160, 73, 0.6); /* Cambio de color de fondo */
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.24), 0 4px 8px 0 rgba(0, 0, 0, 0.19); /* Sombra para efecto 3D */
}

/* colorcito de las estrellas */
.star {
  color: gold;
  font-size: 18px; /* Ajusta el tamaño según sea necesario */
}

#disclaimerElement {
  margin-top: 10px;
  font-family: monospace;
  font-size: 0.8em;
  text-align: center;
}


.accion-titulo /* Cuando pinchas en un link para ver la info idividual, el titulo del activo */{
  text-align: center;
  font-size: 25px; 
  margin-bottom: 15px;
  padding: 10px; 
  color: #FF5733;
}

#risk-container /* Las cajitas de riesgo individuales */{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 18px; /* Espacio entre las cajitas */
    flex-wrap: nowrap;
	width: 100%;
}

.risk-meter /* Este es el rectangulo general */ {
  border: 2px solid #cccccc;
  border-radius: 4px;
  padding: 10px;
  position: relative;
  width: 200px;
  height: 155px;
  display: inline-block;
  text-align: center;
}

.risk-title /* Este es el titulo "Volatilidad" en su recuadro*/ {
  font-size: 14px;
  position: absolute;
  top: -15px; 
  left: 50%;
  transform: translateX(-50%); 
  background: #ffffff;
  padding: 5px 10px; /* Espacio interno alrededor del texto */
  border: 2px solid #cccccc; /* Borde del rectángulo */
  border-radius: 20px; /* Bordes redondeados, opcional */
}

.risk-value /* Este es el valor (numero) */{
  position: relative;
  text-align: left;
  font-size: 15px;
  top: 25px;
  left: 5px;
}

.risk-clasi /* Si esa baja, media, alta, etc. */ {
  position: absolute;
  text-align: center;
  font-size: 15px;
  bottom: 5px; 
  left: 30px; 
  right: 0; 
}

.risk-comment {
  font-size: 10px; 
  color: #666666; 
  font-family: Arial, sans-serif; 
  text-transform: lowercase; /* Transforma el texto en mayúsculas */
  position: relative; 
  top: 25px; 
  left: 10px; 
  margin: 5px; 
}
.risk-termo /* Es el grafico de termometro */ {
  position: absolute;
  left: 5px;
  top: 70%; 
  width: 70px;
  height: 70px; 
}

.riskIndice-title /* Este es el titulo "VaR" en su recuadro*/ {
  font-size: 14px;
  position: absolute;
  top: -20px; 
  left: 50%; 
  transform: translateX(-50%);
  background: #ffffff;
  padding: 5px 10px; /* Espacio interno alrededor del texto */
  border: 2px solid #cccccc; /* Borde del rectángulo */
  border-radius: 20px; /* Bordes redondeados, opcional */
}

.risk-meter-veryLow /* Este es el rectangulo general */ {
  border: 2px solid #cccccc;
  border-radius: 4px;
  padding: 10px;
  position: relative;
  width: 200px;
  height: 145px;
  display: inline-block;
  text-align: center;
  background-color: rgba(2, 187, 30, 0.2);
}
.risk-meter-Low /* Este es el rectangulo general */ {
  border: 2px solid #cccccc;
  border-radius: 4px;
  padding: 10px;
  position: relative;
  width: 200px;
  height: 145px;
  display: inline-block;
  text-align: center;
  background-color: rgba(111, 187, 2, 0.2);
}
.risk-meter-Middle /* Este es el rectangulo general */ {
  border: 2px solid #cccccc;
  border-radius: 4px;
  padding: 10px;
  position: relative;
  width: 200px;
  height: 145px;
  display: inline-block;
  text-align: center;
  background-color: rgba(187, 170, 2, 0.2);
}
.risk-meter-High /* Este es el rectangulo general */ {
  border: 2px solid #cccccc;
  border-radius: 4px;
  padding: 10px;
  position: relative;
  width: 200px;
  height: 145px;
  display: inline-block;
  text-align: center;
  background-color: rgba(187, 106, 2, 0.2);
}
.risk-meter-veryHigh /* Este es el rectangulo general */ {
  border: 2px solid #cccccc;
  border-radius: 4px;
  padding: 10px;
  position: relative;
  width: 200px;
  height: 145px;
  display: inline-block;
  text-align: center;
  background-color: rgba(190, 21, 21, 0.2);
}
#main-container /*Es el contenedor donde van soportes y resistencia e indicadores*/{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%; 
}
#SopRes-container {
  flex: 1; 
  margin-right: 18px;
}
#SopRes-situ-container{
  width: 100%;
  margin-right: 20px;
  max-width: 350px;
}
#situacion-tecnica {
  width: 100%;
}
#indicadores-container {
  flex: 3;
}

.SopRes-table {
  width: 100%;
  border-collapse: collapse; 
  font-family: Arial, sans-serif;
  margin-top: 20px;
}

.SopRes-table tr:nth-child(odd) {
  background-color: #D3D3D3; 
}

.SopRes-table tr:nth-child(even) {
  background-color: #FFFFFF; 
}

.SopRes-header {
    background-color: #f2f2f2; /* Color de fondo de los encabezados */
    text-align: center; /* Alineación del texto en los encabezados */
    padding: 5px; /* Espacio interno alrededor del texto en los encabezados */
	font-size: 10px;
}
.SopRes-caption {
	font-size: 14px; /* Tamaño de fuente de la caption */
	font-weight: bold; /* Negrita para la caption */
	margin-bottom: 10px; /* Espacio inferior debajo de la caption */
	text-align: center; /* Alineación del texto en la caption */
}
.SopRes-row {
	background-color: #D3D3D3; 
}
.SopRes-celda {
	text-align: center; /* Alineación del texto en las celdas de datos */
	height: 25px;
    padding: 2px;
	font-size: 10px;
}
.indicadores-table {
  width: 100%; 
  border-collapse: collapse; 
  font-family: Arial, sans-serif;
  margin-top: 20px;
}

.indicadores-header {
    background-color: #f2f2f2; /* Color de fondo de los encabezados */
    text-align: center; /* Alineación del texto en los encabezados */
    padding: 5px; /* Espacio interno alrededor del texto en los encabezados */
}
.indicadores-caption {
	font-size: 18px; /* Tamaño de fuente de la caption */
	font-weight: bold; /* Negrita para la caption */
	margin-bottom: 15px; /* Espacio inferior debajo de la caption */
	text-align: center; /* Alineación del texto en la caption */
}
.indicadores-row {
	background-color: #CCE8F1; 
}
.indicadores-celda {
	text-align: center; /* Alineación del texto en las celdas de datos */
    padding: 4px;
	font-size: 0.8em;
	color: inherit;
}
.situacion-tecnica {
  height: 50px;
  border: 2px solid #cccccc;
  text-align: center;
  margin-bottom: 20px;
  margin-top: 5px;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  width: 95%;
  margin-left: 0; /* Cambia el margen izquierdo a 0 */
  margin-right: auto; /* Mantiene el margen derecho en automático para centrar horizontalmente */
  display: flex; /* Activa el uso de flexbox */
  align-items: center;
  justify-content: center;
}
.situacion-tecnica-comment {
  font-size: 10px; 
  color: #666666; 
  font-family: Arial, sans-serif; 
  text-transform: lowercase; /* Transforma el texto en mayúsculas */
  position: relative;
  top: 12px;  
  margin: 5px;
}
/* Esto es para poner una misma celda dividida en 2 (Bollinger) */
.sub-celda-container {
  display: flex;
  flex-direction: column;
  align-items: center; 
}

.sub-celda-container > span {
  margin-bottom: 3px; /* Espacio entre los valores*/
}
.indicadores-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.indicadores-selector select {
  background: transparent;
  width: 40px;
  height: 20px;
  border: none; 
  font-weight: bold; 
  color: inherit; 
  font-family: Arial, sans-serif;
  -webkit-appearance: none; /* Remueve el estilo por defecto en navegadores WebKit */
  -moz-appearance: none; /* Remueve el estilo por defecto en navegadores Mozilla */
  appearance: none; /* Remueve el estilo por defecto del select */
  padding: 2px; /* Sin relleno */
  cursor: pointer; /* Cambiar el cursor a pointer */
  font-size: 0.8em;
}

/*
.suprestablelider th {
	width: 16%;
	text-align: center;
}

.suprestable th {
	width: 28%;
	text-align: center;
}
*/

.suprestablelider th {
	background: rgba(254, 252, 243, 0.1);
}

.suprestablelider td {
	width: 16%;
	text-align: center;
}

.suprestable td {
	width: 14%;
	text-align: center;
}

.supcolortext {
	color: rgba(0, 30, 175, 1);
	background: rgba(0, 30, 175, 0.03);
}

.rescolortext {
	color: rgba(175, 0, 50, 1);
	background: rgba(175, 0, 50, 0.03);
}

.dark-mode .supcolortext {
	color: rgba(97, 124, 255, 1);
	background: rgba(97, 124, 255, 0.3);
}

.dark-mode .rescolortext {
	color: rgba(255, 97, 97, 1);
	background: rgba(255, 97, 97, 0.3);
}

.suprestablelider.high {
    color: #C20808;  /* rojo */
    background-color: rgba(194, 8, 8, 0.3);
    padding: 2px; /* alto de la cajita */
	width: 10%;
}

.suprestablelider.mild {
    color: #CFCC24;  /* naranja */
    background-color: rgba(207, 204, 36, 0.3); 
    padding: 2px;
	width: 10%;
}

.suprestablelider.low {
    color: #4BCF24;   /* verde */
    background-color: rgba(75, 207, 36, 0.3);
    padding: 2px; 
	width: 10%;
}



.modal {
    display: none; 
    position: fixed;
    z-index: 1000;
    left: 15%; /* Centrado horizontal */
    top: 50%; /* Comienza en la mitad de la altura de la ventana */
    width: 70%; 
    transform: translateY(-50%); /* Desplaza hacia arriba la mitad de su propia altura */
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    max-height: 80vh; /* Máximo 80% de la altura de la ventana */
    overflow-y: auto; /* Permite desplazamiento interno si es necesario */
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#modalVideo {
    width: 100%;
    height: auto;
}

#research .links {
    text-align: center;
    margin-bottom: 10px;
}

#research .links a {
    color: #4CAF50; /* Color suave y profesional */
    padding: 5px 10px; /* Relleno ligero */
    margin: 0 5px; /* Espaciado pequeño entre enlaces */
    text-decoration: none; /* Quitar subrayado del texto */
    font-size: 14px; /* Tamaño de texto moderado */
    transition: color 0.2s; /* Transición suave del color */
}

#research .links a:hover, #research .links a:focus {
    color: #333; /* Cambio de color al interactuar */
    text-decoration: underline; /* Subrayar al pasar el ratón */
}

.flag-image {
  width: 30px;
  height: auto;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.flag-image:hover {
  transform: scale(1.1); /* Aumenta el tamaño de la imagen en un 10% */
}






.headerwithline {
	border-bottom: 1px solid #ccc; /* Línea de fondo */
}


.flexContainer2 {
    display: flex;
    flex-direction: row; /* Asegúrate de que sea 'row' para un diseño horizontal */
    flex-wrap: wrap; /* Permite que los elementos se envuelvan en pantallas pequeñas */
    width: 100%;
    align-items: center; /* Alinea verticalmente los elementos al centro del contenedor */

}

#loginButton, #guestButton, #logoutButton {
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-weight: 600;
	padding: 10px 24px;
	border: 2px solid rgba(20,0,70,0.3);
	border-radius: 5px !important;
	background: transparent;
	width: fit-content;
	font-size: 15px;
	color: #150149;
	margin-right: 5px; 
	margin-bottom: 5px; 
}

.anchorButton .material-symbols-outlined.icon {
  color: #CF3476; /* Cambia el color del icono aquí */
}

.description {
	color: #A3A3A3;
	font-family: arial;
    font-style: normal;
    font-weight: normal;
    font-size: 1em;
    margin-bottom: 20px;
	//margin-left: 15px;
	text-align: justify;
}

.bottom25 {
	margin-bottom: 25px; 
	padding-right: 50px; 
}

#homefooter {
		background-color: rgba(255,252,244,0.4);
}

/* Estilos generales del ticker */
.ticker-container {
    color: #cc3474;
    overflow: hidden;
    height: 30px; /* Altura del ticker */
    position: relative;
}

/* Estilos para el contenido del ticker */
.ticker-message {
    display: inline-block;
    position: absolute;
    animation: ticker-move 20s linear forwards; /* Hacemos que la animación se detenga al final */
}

/* Animación del ticker */
@keyframes ticker-move {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
    100.1% {
        transform: translateX(-100%); /* Añadimos un estado adicional para que el contenido permanezca oculto */
    }
}



/* Footer */
/* Estilos generales del ticker */
.ticker {
    background-color: #333;
    color: #fff;
    overflow: hidden;
    height: 30px; /* Altura del ticker */
}

/* Estilos para el contenido del ticker */
.ticker-content {
    display: inline-block;
    animation: ticker-move 20s linear; /* Duración de la animación */
    animation-fill-mode: forwards; /* La animación se detiene al final */
}

/* Animación del ticker */
@keyframes ticker-move {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* Estilos generales del footer */
.footer {
    background-color: #F7F7F7;
    color: #444444;
    text-align: center;
    padding: 5px;
}

/* Estilos para el texto en el footer */
.footer p {
    margin: 10px 0;
    font-size: 1em;
}

/* clases menu */

	*{
    list-style: none;
    text-decoration: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
	}

.footside{
		background: #F7F6F6; //#CCD3D8;
}
	
	
/* Para que material icons esté alineado */	
	.icon {
    display: inline-block;
    vertical-align: middle;
}

.material-symbols-outlined.middle.icon {
    font-size: 1.6em; /* Ajusta según sea necesario */
    vertical-align: middle;
}


.fa-solid {
    font-size: 1.2em; /* Ajusta según sea necesario */
    vertical-align: middle;
}

.material-symbols-outlined.minoricon {
    font-size: 2em; /* Ajusta según sea necesario */
    vertical-align: bottom;
}

.material-symbols-outlined.middle.red.icon {
color:red;
}

.material-symbols-outlined.middle.transparent.icon {
color:red;
opacity: 0; 
}

.pabout{
	margin-top: 5px; 
	margin-bottom: 20px; 
}

.free{
	cursor: pointer;
	color: #DD0011;
}
/*
#hamburgerButton {
	display: none;
	background-color: #E3E3E3; 
	border: 1px solid #B8B8B8;
	border-radius: 4px; 
	color: black; 
	cursor: pointer; 
	padding: 5px 10px; 
}

#hamburgerButton:hover {
	background-color: #AAAAAA; 
	color: black; 
}

#sidebarizq {
	min-height: 100%;
	background: rgba(252, 252, 252, 0.3);
	width: 225px; 
	margin-right: 10px;

	border-right: 1px solid rgba(205, 52, 116, 0.2); 
	border-radius: 10px; 
	box-shadow: 2px 0px 4px rgba(0, 0, 0, 0.3); 
}

#sidebarizq .profile {
	margin-bottom: 30px !important;
	padding-bottom: 10px;
	margin-top: 20px !important;
	align-items: center; 
	text-align: center;
	border-bottom: 1px solid #333333;
}

#sidebarizq ul li a{
	display: block;
	padding: 12px 30px;
	color:#373737;
	font-size: 1em;
	white-space: nowrap; 
}

#sidebarizq ul li a .icon{
	width: 30px;
	display: inline-block; 
}

#sidebarizq ul li a:hover,
#sidebarizq ul li a.active{
	color: white;
	background:#cc3474;
}

#sidebarizq ul li a:hover .icon,
#sidebarizq ul li a.active .icon{
	color: white; 
}

#sidebarizq ul li a:hover:before,
#sidebarizq ul li a.active:before{
	display: block;
}

#sidebarizq.active {
	color: white;
	background:#cc3474;
}
*/

.top25{
	margin-top:25px;
}

.forma {
  width: 100%;
  padding: 12px;
  border: 1px solid #999;
  border-radius: 5px;
  outline: none;
  font-size: 16px;
  margin-bottom: 10px;
  transition: border-color 0.3s;
}

.forma:focus {
  border-color: #007bff;
  box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

iframe{
	border: 1px solid rgba(204,52,116,0.1);
	border-radius: 8px !important;
	padding:20px;
}

#atthefoot {
	display:block;
	min-width:100%;	
}

#cabe {
	margin-bottom:15px;	
}

#contenido {
	display: flex;
	flex-wrap: wrap;
}

#cabecera {
	width: 50%;
	margin-right: 50px;
}

#cabeceraImg {
	width: 500px;
	flex-shrink: 2;
}

#aboutflags{
	display: flex;
	align-items: center; /* Alineación vertical*/
	flex-wrap: wrap;
	margin-bottom: 50px;
}
#thelogo {
	display: flex;
	min-width: 60%;
}
#theflags {
	display: flex;
	gap: 5px;
}

.anchorButton{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-weight: 600;
	padding: 10px 24px;
	border: 2px solid #CF3476;
	border-radius: 10px !important;
	background: transparent;
	width: fit-content;
	font-size: 15px;
	color: #CF3476;
	margin-right: 5px; 
	margin-bottom: 5px; 
}

.anchorButton:hover, #guestButton:hover, #loginButton:hover {  
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.24), 0 4px 8px 0 rgba(0, 0, 0, 0.19); /* Sombra para efecto 3D */
}

.anchorButton2{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-weight: 600;
	padding: 10px 24px;
	border: 0px solid #CF3476;
	border-radius: 6px !important;
	background: transparent;
	width: fit-content;
	font-size: 15px;
	color: #000000;
	margin-right: 5px; 
	margin-bottom: 5px; 
}

.anchorButton2:hover, #guestButton:hover, #loginButton:hover {  
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.24), 0 4px 8px 0 rgba(0, 0, 0, 0.19); /* Sombra para efecto 3D */
}

.activeSup{
	box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.24), 0 4px 8px 0 rgba(0, 0, 0, 0.19); /* Sombra para efecto 3D */
}

#envoltorio{
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
}

.contenedor-flex  {
	flex-shrink: 1; /* Permite que la imagen se reduzca si es necesario */
}

#ladoderecho {
	padding: 6px;
	padding-left: 30px;
}

#imagenXL {
	width: 500px; 
	height: auto;
}

#atfoot{
	display: flex;
	display: flex;
	flex-wrap: wrap;
	margin-top:5px;
}

#linksSidebar {
	font-size:12px;
}

#disclaimerFoot {
	font-size:10px;
	margin-left: 40px;
	min-width: 20%; 
	max-width: 20%; 
}

#linksFoot{
	font-size:11px;
	margin-left: 40px;
	min-width: 20%; 
	max-width: 20%; 
}
#phoemailFoot{
	font-size:11px;
	margin-left: 40px;
	min-width: 15%; 
	max-width: 20%; 
}
#aditionsFoot {
	font-size:10px;
	margin-left: 40px;
}

			
/* MEDIA */
@media screen and (max-width: 850px) {
	
	.contenedor-horizontal {
		flex-direction: column; /* Cambia la dirección del flex a columna */
		overflow-x: hidden; /* Oculta el desplazamiento horizontal */
		white-space: normal; /* Permite que el contenido se ajuste normalmente */
	  }

	#envoltorio {
		flex-wrap: wrap;
	}
	
	
	#menulogo{
		display: flex;
		justify-content: center; /* Centra horizontalmente los elementos */
	}
	#sidebarizq{
		justify-content: center;
		align-items: center;
		min-width:100%;
		height:70px;
		overflow:hidden;
	}
	
	#hamburgerButton {
		position: absolute;
		display: block;
		right: 0;
		margin-right:10px;
	}
	
	#ladoderecho {
		padding: 2px;
		padding-left: 10px;
	}
	
	#cabecera {
		width: 100%; 
		margin-right: 5px;
	}
	

	
	#imagenXL {
		width: 250px;
		height: auto;
	}	
	
	#aboutflags{
		display: flex;
		align-items: center; // Alineación vertical
		flex-wrap: wrap;
		margin-bottom: 10px;
	}
	#thelogo {
		width: 100%;
	}


	#disclaimerFoot,
	#linksFoot,
	#aditionsFoot ,
	#phoemailFoot {
		min-width: 100%; /* Establece el máximo ancho al 33% */
		margin-right:5px;
		padding-right:5px;
	}
	
	#theflags {
		gap: 1px;
	}
}	

/* Screen > 1280 */	
/* -------------------------------------------------------------------- */
@media screen and (min-width: 1280px) {
	#disclaimerFoot,
	#linksFoot,
	#phoemailFoot,
	#aditionsFoot {
		font-size:12px;
	}  
	#theflags {
		gap: 10px;
	}
}	
	
		
body {
  font-family: sans-serif;	
  font-size:13px; /* No afecta sidebar ni footer, sí al resto*/
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  text-align: left;
  background-color: #fff;
}
 



 #chart_tbodyTS td {
	text-align: center; /* Centra el contenido en las celdas */	
}

#tabla-situacion {
	margin-top: 40px;
}

#tabla-container-TAfusion {
    width: 100%;
    max-height: 600px; /* Ajusta esto según sea necesario */
    overflow-y: auto; /* Permite el desplazamiento vertical */
	overflow-y: auto; /* Habilitar el scroll vertical si es necesario */
    scrollbar-width: thin; /* Ancho delgado */
    scrollbar-color: transparent transparent; /* Color transparente */
}

#tableTS, #tableTS td{
    border: 1px solid rgba(235,230,230,0.5);
	text-align: center; /* Centra el contenido en las celdas */
}  

#tabla-container-TAfusion{
    
	text-align: center; /* Centra el contenido en las celdas */
}  

#tabla-container-TAfusion::-webkit-scrollbar {width: 0;}

#theadTS, #tbodyTS {
  margin-top: 40px; 
}

/* sticky*/
	#TAlevels::-webkit-scrollbar {width: 0;}
	
	#TAlevels {
		max-height: 100vh;
		overflow-y: auto; 
		display: flex; 
		align-items: flex-start;
		flex-wrap: wrap; 
	}

	#tablaLevels {	  
	  /*scrollbar-width: thin;*/ /* Ancho delgado para la barra de desplazamiento */
	  scrollbar-color: transparent transparent; /* Barras de desplazamiento transparentes */
	  flex-grow: 1;
	}

	#tablaLevels::-webkit-scrollbar {
	  width: 0; /* Ocultar la barra de desplazamiento para WebKit/Blink */
	}

	#tablaLevels thead {
	  position: sticky;
	  top: 0; /* Fija el encabezado en la parte superior del contenedor */
	  z-index: 1; /* Asegura que el encabezado esté por encima del contenido */
	  background-color: #fff; /* Fondo blanco para el encabezado, ajusta según tu diseño */
	}

	#sistemas {
		margin-left: 1rem;
		display: flex; /* Dispone los divs internos de forma flexible */
		flex-direction: column; /* Organiza los divs internos en columna */
		gap: 1rem; /* Espacio entre los divs internos, ajusta según necesites */
		flex-grow: 1;
	}

.contenedor-horizontal {
  display: flex; /* Esto alinea los elementos horizontalmente */
  overflow-x: auto; /* Habilita el desplazamiento horizontal si es necesario */
  white-space: nowrap; /* Evita que los elementos se envuelvan */
}

.elemento {
  flex: 0 0 auto; /* Esto asegura que los elementos no se estiren */
}


#indicadores-container::-webkit-scrollbar {width: 0;}
#tableTS::-webkit-scrollbar {width: 0;} /* Ocultar la barra de desplazamiento en navegadores WebKit (por ejemplo, Chrome) */

#textChart {
	margin-bottom: 6px; 
    margin-top: 6px; 
}


.canvasElement {
  flex: 1 1 calc(50% - 10px); /* Resta el doble del margen (por cada lado) del ancho base */
  margin: 2px;  /* Distribuye el espacio disponible entre d1 y d2 */
  min-width: 0; /* Evita que los elementos sean más anchos que su contenido */
  box-sizing: border-box; /* Incluye el padding en el ancho total */
  max-height: 200px; /* Altura fija del canvas */
  width: 50%; /* Ancho relativo al contenedor */
}


/* Levels and Summary Table */
.tablaCompacta3 td,
.tablaCompacta2 td {
    font-size: 0.8rem; /* Tamaño más pequeño de la fuente */
	font-family: monospace, serif;
}
	
.tablaCompacta3,
.tablaCompacta2 {
    font-size: 0.9rem; /* Tamaño más pequeño de la fuente */
    border-collapse: collapse; /* Para reducir el espacio entre celdas */
}

.tablaCompacta3 td, .tablaCompacta3 th,
.tablaCompacta2 td, .tablaCompacta2 th {
    padding: 5px; /* Espaciado interno reducido en celdas */
    border: 1px solid #ddd; /* Bordes ligeros para las celdas */

}

.tablaCompacta2 thead {
	font-size: 0.9rem;
	background-color:rgba(0, 215, 217, 0.015);
}

.vgnotavailable {
    opacity: 0.3;         /* Establece la transparencia a 0.5 */
    text-decoration: none; !Important/* Elimina el subrayado de los enlaces */
    color: grey;          /* Cambia el color del texto a gris */
}


.header-dark th {
	text-align: center;
	background-color: #cf3476 ; /* Color de fondo oscuro */
	color: white; /* Texto en color blanco para mejor contraste */
}

.soft-gray-border {
  border: 1px solid #ccc; /* Borde gris suave */
  border-radius: 5px;     /* Esquinas redondeadas */
  padding: 10px;          /* Espaciado interno */
}


.suprestablelider th {
	background: rgba(254, 252, 243, 0.1);
}

.suprestablelider td {
	width: 16%;
	text-align: center;
}

.suprestable td {
	width: 14%;
	text-align: center;
}

.supcolortext {
	color: rgba(0, 30, 175, 1);
	background: rgba(0, 30, 175, 0.03);
}

.rescolortext {
	color: rgba(175, 0, 50, 1);
	background: rgba(175, 0, 50, 0.03);
}

.modal {
    display: none; 
    position: fixed;
    z-index: 1000;
    left: 15%; /* Centrado horizontal */
    top: 50%; /* Comienza en la mitad de la altura de la ventana */
    width: 70%; 
    transform: translateY(-50%); /* Desplaza hacia arriba la mitad de su propia altura */
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    max-height: 80vh; /* Máximo 80% de la altura de la ventana */
    overflow-y: auto; /* Permite desplazamiento interno si es necesario */
}

.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#modalVideo {
    width: 100%;
    height: auto;
}

#research .links {
    text-align: center;
    margin-bottom: 10px;
}

#research .links a {
    color: #4CAF50; /* Color suave y profesional */
    padding: 5px 10px; /* Relleno ligero */
    margin: 0 5px; /* Espaciado pequeño entre enlaces */
    text-decoration: none; /* Quitar subrayado del texto */
    font-size: 14px; /* Tamaño de texto moderado */
    transition: color 0.2s; /* Transición suave del color */
}

#research .links a:hover, #research .links a:focus {
    color: #333; /* Cambio de color al interactuar */
    text-decoration: underline; /* Subrayar al pasar el ratón */
}



.accion-titulo /* Cuando pinchas en un link para ver la info idividual, el titulo del activo */{
  text-align: center;
  font-size: 25px; 
  margin-bottom: 15px;
  padding: 10px; 
  color: #FF5733;
}

#risk-container /* Las cajitas de riesgo individuales */{
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    
    flex-wrap: nowrap;
	width: 100%;
}

#risk-container:not(:last-child) {
  margin-right: 5px;
  gap: 18px; /* Espacio entre las cajitas */
}


.risk-meter /* Este es el rectangulo general */ {
  border: 2px solid #cccccc;
  border-radius: 10px;
  padding: 10px;
  position: relative;
  width: 100%;
  height: 245px;
  display: inline-block;
  text-align: left;
}

.risk-title /* Este es el titulo "Volatilidad" en su recuadro*/ {
  font-size: 1em;
  position: absolute;
  top: -15px; 
  left: 50%;
  transform: translateX(-50%); 
  background: #1c2a35;
  padding: 5px 10px; /* Espacio interno alrededor del texto */
  border: 2px solid #cccccc; /* Borde del rectángulo */
  border-radius: 5px; /* Bordes redondeados, opcional */
}
.risk-value {
  font-size: 1.1em;
  margin-top: 10px; /* Agrega margen superior para separar del elemento superior */
  margin-left: 10px; /* Agrega margen izquierdo para separar del borde izquierdo */
}

.risk-clasi {
  font-size: 15px;
  margin-bottom: 10px; /* Agrega margen inferior para separar del elemento inferior */
  margin-left: 10px; /* Agrega margen izquierdo para separar del borde izquierdo */
}

.risk-comment {
  font-size: 0.9em;
  color: #666666;
  font-family: Arial, sans-serif;
  text-transform: lowercase;
  margin-top: 10px; /* Agrega margen superior para separar del elemento superior */
  margin-left: 10px; /* Agrega margen izquierdo para separar del borde izquierdo */
  margin-right: 10px; /* Agrega margen derecho para separar del borde derecho */
}

.risk-termo {
  width: 70px;
  height: 70px;
  margin-left: 10px; /* Agrega margen izquierdo para separar del borde izquierdo */
  margin-top: 10px; /* Agrega margen superior para separar del elemento superior */
}


.riskIndice-title /* Este es el titulo "VaR" en su recuadro*/ {
  font-size: 1em;
  position: absolute;
  top: -20px; 
  left: 50%; 
  transform: translateX(-50%);
  background: #ffffff;
  padding: 5px 10px; /* Espacio interno alrededor del texto */
  border: 2px solid #cccccc; /* Borde del rectángulo */
  border-radius: 5px; /* Bordes redondeados, opcional */
}


#main-container /*Es el contenedor donde van soportes y resistencia e indicadores*/{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%; 
}
#SopRes-container {
  flex: 1; 
  margin-right: 18px;
}
#SopRes-situ-container{
  width: 100%;
  margin-right: 20px;
  max-width: 350px;
}
#situacion-tecnica {
  width: 100%;
}
#indicadores-container {
  flex: 3;
}

.SopRes-table {
  width: 100%;
  border-collapse: collapse; 
  font-family: Arial, sans-serif;
  margin-top: 20px;
}

.SopRes-table tr:nth-child(odd) {
  background-color: #D3D3D3; 
}

.SopRes-table tr:nth-child(even) {
  background-color: #FFFFFF; 
}

.SopRes-header {
    background-color: #f2f2f2; /* Color de fondo de los encabezados */
    text-align: center; /* Alineación del texto en los encabezados */
    padding: 5px; /* Espacio interno alrededor del texto en los encabezados */
	font-size: 10px;
}
.SopRes-caption {
	font-size: 14px; /* Tamaño de fuente de la caption */
	font-weight: bold; /* Negrita para la caption */
	margin-bottom: 10px; /* Espacio inferior debajo de la caption */
	text-align: center; /* Alineación del texto en la caption */
}
.SopRes-row {
	background-color: #D3D3D3; 
}
.SopRes-celda {
	text-align: center; /* Alineación del texto en las celdas de datos */
	height: 25px;
    padding: 2px;
	font-size: 10px;
}
.indicadores-table {
  width: 100%; 
  border-collapse: collapse; 
  font-family: Arial, sans-serif;
  margin-top: 20px;
}

.indicadores-header {
    background-color: #f2f2f2; /* Color de fondo de los encabezados */
    text-align: center; /* Alineación del texto en los encabezados */
    padding: 5px; /* Espacio interno alrededor del texto en los encabezados */
}
.indicadores-caption {
	font-size: 18px; /* Tamaño de fuente de la caption */
	font-weight: bold; /* Negrita para la caption */
	margin-bottom: 15px; /* Espacio inferior debajo de la caption */
	text-align: center; /* Alineación del texto en la caption */
}
.indicadores-row {
	background-color: #CCE8F1; 
}
.indicadores-celda {
	text-align: center; /* Alineación del texto en las celdas de datos */
    padding: 4px;
	font-size: 0.8em;
	color: inherit;
}
.situacion-tecnica {
  height: 50px;
  border: 2px solid #cccccc;
  text-align: center;
  margin-bottom: 20px;
  margin-top: 5px;
  padding: 10px;
  border: 1px solid #cccccc;
  border-radius: 5px;
  width: 95%;
  margin-left: 0; /* Cambia el margen izquierdo a 0 */
  margin-right: auto; /* Mantiene el margen derecho en automático para centrar horizontalmente */
  display: flex; /* Activa el uso de flexbox */
  align-items: center;
  justify-content: center;
}
.situacion-tecnica-comment {
  font-size: 10px; 
  color: #666666; 
  font-family: Arial, sans-serif; 
  text-transform: lowercase; /* Transforma el texto en mayúsculas */
  position: relative;
  top: 12px;  
  margin: 5px;
}
/* Esto es para poner una misma celda dividida en 2 (Bollinger) */
.sub-celda-container {
  display: flex;
  flex-direction: column;
  align-items: center; 
}

.sub-celda-container > span {
  margin-bottom: 3px; /* Espacio entre los valores*/
}
.indicadores-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.indicadores-selector select {
  background: transparent;
  width: 40px;
  height: 20px;
  border: none; 
  font-weight: bold; 
  color: inherit; 
  font-family: Arial, sans-serif;
  -webkit-appearance: none; /* Remueve el estilo por defecto en navegadores WebKit */
  -moz-appearance: none; /* Remueve el estilo por defecto en navegadores Mozilla */
  appearance: none; /* Remueve el estilo por defecto del select */
  padding: 2px; /* Sin relleno */
  cursor: pointer; /* Cambiar el cursor a pointer */
  font-size: 0.8em;
}

.tab {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* Estilo de los botones dentro de las pesta\u00f1as */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 17px;
}

 
/* Botones gráficos */
/* ---------------------------------------------------------------- */
	/* Estado normal del botón */
	
	/* Icono: Estado normal claro y dark
	.toggle-button.icon-color {
		color: rgba(200, 200, 200, 0.6);
	}
	*/

	/* Icono: No accesible */
	.noaccess {color: #DCDCDC;  cursor: auto;}
	.dark-mode .noaccess {color: #8A8A8A; cursor: auto;}
	
	/* Icono: Estado activo claro (cuando está "presionado") */
	.active {
		color: #cc3474; 
		cursor: pointer;
	}
	
	/* Icono: Estado activo oscuro (cuando está "presionado") */
	.activeD, .dark-mode .active {
		color: #2cbb7e; 
		cursor: pointer;
	}

	
	.inactive:not(.noaccess) {
		color: #1a2b3c; 
		cursor: pointer;
	}
	
	.dark-mode .inactive:not(.noaccess) {
		color: #ffffff; 
		cursor: pointer;
	}

	.toggle-button:not(.noaccess){
		cursor: pointer;
	}
	
	.toggle-button{
		padding-top: 2px;
		text-align: center; 
		border-bottom: 1px solid rgba(200, 200, 200, 0.5); /* Gris */
	}
	
	.toggle-button.lineabaja,
	.toggle-button.lineabajaFinal {
		border-bottom: 1px solid #333333;
		border-radius: 0px;
	}
	
	.dark-mode .toggle-button.lineabaja,
	.dark-mode .toggle-button.lineabajaFinal { 
		border-bottom: 1px solid #ffffff;
		border-radius: 0px;
	}
	
	.toggle-buttonExtra, .toggle-buttonBT{
		width: 100px;
		cursor: pointer;
		padding: 1px !important;
		background-color: #ffffff;
		text-align: center; 
		border: 1px solid #c;
		box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2); /* Sombra opcional */
		margin-left: 0px !important;
	}
	
	.toggle-buttonBT{
		height: 48px !important;
	}
	
	.toggle-buttonExtra:hover, .toggle-buttonBT:hover {
		border: 2px solid #E59BBA;	 
	}
	
	.dark-mode .toggle-buttonExtra, .dark-mode .toggle-buttonBT {
		background-color: #1a2b3c;
		border: 1px solid #2cbb7e;
	}
	
	.dark-mode .toggle-buttonExtra:hover, .dark-mode .toggle-buttonBT:hover {
		background-color: #919090 !important;
	}

.parejabotones {
	display:flex;
	margin-top: 1px;
}


select.chartnoborder {
    border: none !important;
    outline: none;
    padding: 5px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent; /* O cualquier color de fondo que prefieras */

    background-image: none;
    background-repeat: no-repeat;
    background-position: right 10px center; /* Ajustar según sea necesario */
}

/*	Bordes contenedores soft y dark mode */
	.generalBorder {
		border: 1px solid #333;
	}

	.bordeQuitaUno {
		border-right: none;
	}

	.dark-mode .generalBorder {
		border: 1px solid #a7a7a7;
	}
	
	.imagenBotones {
		text-align: center; 
		width: 30px;
		height: 20px;
	}


.dark-mode #thechart select:hover,
.dark-mode #thechart select:focus,
.dark-mode #thechart button:hover {
    background-color: #2c4154;
}

#thechart button {
  border-radius: 6px; /* Agrega bordes suaves */
  padding: 5px; /* Añade espacio interno */
  font-size: 13px; /* Tamaño de fuente */
  height: 40px; /* Altura más grande */
  outline: none; /* Elimina el contorno por defecto en algunos navegadores */
  transition: border-color 0.3s ease; /* Transición suave para el color del borde */
  cursor: pointer; /* Cambia el cursor al pasar el ratón sobre él */
}

#thechart select:hover,
#thechart button:hover {
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,1); 
}

.resistencia {
	color: #FE637D;
}

.soporte {
	color: red;
}

.sinSistemas {
	width: 100%;
}



.apiavailable {
  font-size: 0.7rem;
  font-style: italic;
  color: rgba(5, 140, 175, 0.75);
  padding: 2px;
}

.textomoonky {
  font-family: Roboto, Arial, sans-serif;
  font-size: 0.7rem;
  text-align: left;
  color: #333; /* Color del texto */
  background-color: #f7f7f7; /* Color de fondo */
  padding: 3px;
  border-radius: 1px; /* Bordes redondeados */
  border: 1px solid #cccccc;
  margin-bottom: 2px; 
}

/* Fondo y texto color de la barra moonkey y de las pestañas 
.dark-mode .textomoonky,
.dark-mode #botonsummary,
.dark-mode #botonasset,
.dark-mode #botonRcharts,
.dark-mode #botonindicators,
.dark-mode #botonTAlevels {
	background-color: #8C8C8C;
	color: #F4F4F4;
} */

.textomoonky2 {
  font-family: Roboto, Arial, sans-serif;
  font-size: 1rem;
  text-align: center;
  color: #333; /* Color del texto */
  background-color: #f2f2f2; /* Color de fondo */
  padding: 8px;
  border-radius: 1px; /* Bordes redondeados */
  border: 1px solid #cccccc;
  margin-bottom: 2px; 
}

/* Summary Charts*/

.4summarycharts {
	text-align:center;
	width: 25%;
	margin-right: 5px;
}

.4summarycharts:not(:last-child) {
  margin-right: 5px;
}

.lat4Element {
  flex: 1 1 calc(25% - 5px); /* Resta el doble del margen (por cada lado) del ancho base */
  margin: 2px;  /* Distribuye el espacio disponible entre d1 y d2 */
  min-width: 0; /* Evita que los elementos sean más anchos que su contenido */
  box-sizing: border-box; /* Incluye el padding en el ancho total */
}

.elementsAside {
  display: flex;
  align-items: center; /* Centra verticalmente los elementos en el contenedor */
}

.tabla-summary th:first-child, .tabla-summary td:first-child {width: 20%;}
.tabla-summary th:nth-child(2),.tabla-summary td:nth-child(2) {width: 10%;}
.tabla-summary th:nth-child(3),.tabla-summary td:nth-child(3) {width: 10%;}
.tabla-summary th:nth-child(4),.tabla-summary td:nth-child(4) {width: 10%;}
.tabla-summary th:nth-child(5),.tabla-summary td:nth-child(5) {width: 25%;}
.tabla-summary th:nth-child(6),.tabla-summary td:nth-child(6) {width: 25%;}


/* Estilos para cuando el div está en pantalla completa */



/*	
#thechart:fullscreen {
    width: 100%;
    height: 100%;
    background-color: white; /* o 'transparent' según lo que necesites 
}

#thechart:fullscreen .dark-mode{
    width: 100%;
    height: 100%;
    background-color: #151f28; /* o 'transparent' según lo que necesites 
}
*/

.tooltip .info-icon {
    cursor: pointer;
    display: inline-block;
    position: relative;
	color:rgba(40, 93, 205, 0.7);
}

.tooltip .info-icon .tooltip-content {
    position: absolute;
    z-index: 100;
    display: none; /* Oculta el tooltip por defecto */
    background-color: grey; /* Fondo del tooltip */
    color: white; /* Color del texto */
    text-align: center; /* Alineación del texto */
    border-radius: 5px; /* Bordes redondeados */
    padding: 5px 10px; /* Espaciado interno */
    width: 200px; /* Ancho del tooltip */
    bottom: 100%; /* Posición por debajo del ícono */
    left: 50%; /* Centrado horizontal */
    transform: translateX(-50%); /* Ajuste fino para centrar */
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2); /* Sombra opcional */
}

.tooltip .info-icon:hover .tooltip-content {
    display: block; /* Muestra el tooltip al pasar el mouse */
}

.align-center {
  text-align: center; }
  
.font-monospace  {
	font-family: monospace;
}

.toggle-button:not(.noaccess):hover {
	background:#E59BBA;
	color:white;
}

.dark-mode .toggle-button:not(.noaccess):hover {
	background:rgba(44, 187, 126, 0.5);
}

/* Estilos para modo claro y oscuro */
#laLeyenda.active {
    background: rgba(255, 255, 255, 1);
    color: black;
}

#laLeyenda.activeD , body.dark-mode #laLeyenda.active {
    background: rgba(0, 0, 0, 1);
    color: white;
}

.alertaText {
	position: absolute;
    top: 1px;
    left: 45%;
	transform: translate(-45%, 50%);
	padding: 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	display: none; 	
	background: rgba(255, 0, 0, 1);
	color: #ffffff;
	text-align: center;
	z-index: 201;
	width: 200px;
}

.dark-mode .alertaText {
	background: #E3FEB1;
	color: #1a2b3c;
}

#laLeyenda {
	text-align: left;
	padding: 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	display: none; 
	position: absolute; 
	margin-left: calc(10% - 100px);
	margin-top: 10px;
	z-index: 100;
	width: 200px;
}

#clonBT {
	position: absolute; 
	padding: 10px;
	margin-top: 2px;
	margin-left: calc(6% + 100px);
	overflow: auto; /* Permite que el contenido se desplace dentro del contenedor si no cabe en la pantalla */
	display: flex; /* Hace que el contenedor se comporte como un contenedor flexible */
	flex-direction: column; 
	gap: 0;
}

#indicatorDiv,
#search1Div,
#search2Div,
#elliottDiv,
#chartismDiv {
	border:none;
	display: none; 
	position: absolute; 
	top: Xpx; 
	margin-left: 3% !important;
	z-index: 100;
	cursor: pointer; /* Cambia el cursor al puntero cuando se coloca encima */
	max-width:6%;
	max-height: 30vh;
}


#botonesChart {
  cursor: pointer;
  border-right: none;
}

body:not(.dark-mode) #botonesChart {
    background-color: #eef3fb;
}

body.dark-mode #cTool {
    background-color: #1c2a35;
    color: white;
}

#thechart {
	flex: 1;
	min-height: 0;
	overflow: hidden;
}

#cTool {
	position: relative;
	width: 100% !important;
	height: 100%;
	margin-top: 0px;
	display: flex;
	flex-wrap: nowrap;
}


/* Gráficos candle*/
/*#rChart {
	max-height: 75vh;
}
*/

#tbodyTS a {
	color: rgba(204,52,116,0.9);
	border-bottom: 1px dotted rgba(204,52,116,0.9);
}

.dark-mode #tbodyTS a {
	color: #e9f4ff;
	border-bottom: 1px dotted #2cbb7e;
}	
	
#theadTS th:nth-child(1),
#tbodyTS td:nth-child(1) {
  width: 20%;
}

#theadTS th:nth-child(2),
#tbodyTS td:nth-child(2) {
  width: 4%;
}

#theadTS th:nth-child(3),
#tbodyTS td:nth-child(3) {
  width: 4%;
}

#theadTS th:nth-child(4),
#tbodyTS td:nth-child(4) {
  width: 4%;
}

#theadTS th:nth-child(5),
#tbodyTS td:nth-child(5) {
  width: 15%;
}

#theadTS th:nth-child(6),
#tbodyTS td:nth-child(6) {
  width: 53%;
}


/* Estos margen left de media no están funcionando*/
		@media (min-width: 1001px) {
			
		}
		@media (min-width: 851) and (max-width: 1000px) {
			
		}
		@media (min-width: 600px) and (max-width: 850px) {
			
		}
		@media (min-width: 559) and (max-width: 300px) {
			
		}
		@media (min-width: 300) {
			
		}
	
@media (max-width: 850px) {
	
	/*	Bordes contenedores soft y dark mode */
	.generalBorder {
		border: 1px solid #333;
	}

	.dark-mode .generalBorder {
		border: 1px solid #a7a7a7;
	}
	
	.bordeQuitaUno {
		border-bottom: none;
	}
	
	.imagenBotones {
		text-align: center !important; 
		width: 20px;
		height: 15px;
		padding-bottom: 1px;
	}

	
	#cTool{
		position: relative;
		display: flex;
		flex-wrap: wrap;
	}

/*
	#botonesChart > div > span{
		width: 10%;
		display: flex;
		flex-wrap: nowrap;
		font-size:0.8em;
		max-height: 200px;
	}
*/	
	#botonesChart > div{
		width: 9%;
		display: flex;
		flex-wrap: nowrap;
	}
		
	#botonesChart {
		display: flex;
		flex-wrap: nowrap;
		min-width: 100%;
	}
	
	#rChart {
		min-width: 100%;
		height: 250px; /* Ajusta la altura  */
	}
		
	#fullScreenIcon,
	#toggleDarkModeButton,
	#resetIcon,
	#undoIcon,
	#toggleTooltipButton,
	#draw_line,
	#horizontal_line,                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         
	#draw_patterns,
	#draw_elliott,
	#search_candle,
	#search_chartism{
		font-size:10px;
	}
	
	.toggle-button { 
		border-bottom: none;
	}
	
	.toggle-button.lineabaja {
		border-bottom: none;
		border-right: 1px solid #333333;
	}
	
	.dark-mode .toggle-button.lineabaja { 
		border-bottom: none;
		border-right: 1px solid #ffffff;
	}
	
	.toggle-button.lineabajaFinal,
	.dark-mode .toggle-button.lineabajaFinal
	{ 
		border-bottom: none;
	}
}
	

.textualIcon {
	color: black;
}

#search1, #search2 {
	margin-top:2px;
	text-align: left;
	padding: 10px;
    border-radius: 8px;
    border: 1px solid #98AABF;
	background: #6983A2;
	color: #D5DCE4;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
	position: absolute; 
	left: 7%; 
	z-index: 100;
	width: 200px;
}

.soft {background: #fff; color:#1a2b3c; }
.dark {background: #1a2b3c !important; color:#fff; }


.levelAlertBackground {background: #F9F9F9; }
.levelAlertText{color:#FF3200; }

.dark-mode .levelAlertBackground {background: #393939;}
.dark-mode .levelAlertText{color:#FF3200; }


/* Estilo para las celdas del encabezado */
.monihead th {
  background-color: #f2f2f2;
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
  font-size: 0.8rem;
}

.dark-mode .monihead th {
	background-color: #ddd;
	color: #1a2b3c;
	border: 1px solid #ddd;
}

.dark-mode .monihead2 th {
	background-color: #1a2b3c;
	color: #ddd;
	border: 1px solid #ddd;
}

.ATsummary table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.ATsummary table th,
.ATsummary table td {
  border: 1px solid #ddd; /* Grisáceo blanco */
  padding: 10px;
}

.ATsummary table th {
  background-color: #F9F9F9; /* Casi blanco */
  color: #1a2b3c; /*casi negro */
}

.ATsummary table tbody tr:nth-child(even) {
  background-color: #FCFCFC; /*Muy blanco */
}

.dark-mode .ATsummary td {
  background-color: #5a6570; /*Negro azulado 4D4D5F*/
}

#cTool:fullscreen{
	height: 100vh;
}