/* taf-tables.css — tablas, loading, movil base, pie charts, agenda, macro, separadores (split de AIM_iTAfusion.css, fase 3 refactoring) */
.scrollable-table {
    overflow: hidden; /* Oculta la barra de desplazamiento en el div */
}

.margen45{
	margin-top:45px;
}

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

#rChart {
	height: 100% !important;
	position: relative;
	flex: 1;
	min-width: 0;
	background-color: #ffffff;
}
body.dark-mode #rChart {
	background-color: #182732;
}

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 */
  
}