/* taf-containers.css — contenedores flex, indicadores, riesgo, estrellas, celdas Bollinger (split de AIM_iTAfusion.css, fase 3 refactoring) */
/* 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);
}