/* taf-buttons-theme.css — botones del chart, bordes, dark/light mode, fullscreen, leyenda, chartism (split de AIM_iTAfusion.css, fase 3 refactoring) */
/* 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;
	position: relative; /* ancla para #textChart absoluto (que no redimensione el chart) */
}

#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;
}