#buttons {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 10px; /* Espacio entre los botones y los filtros */
}

#buttons button {
    flex: 1; /* Asegura que los botones ocupen el mismo ancho */
    margin: 0 5px; /* Espacio entre los botones */
    max-width: 100%; /* Opcional: limita el ancho máximo de los botones */
    border: 1px solid black; /* Borde negro */
    color: black; /* Texto negro */
    background-color: white; /* Fondo blanco */
    -webkit-appearance: none; /* Elimina estilos predeterminados en Safari */
    -moz-appearance: none; /* Elimina estilos predeterminados en Firefox */
    appearance: none; /* Elimina estilos predeterminados en otros navegadores */
    border-radius: 0; /* Bordes angulosos */
    padding: 10px; /* Espaciado interno */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
}

#filters {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    border: 1px solid #ddd;
    padding: 10px;
    background-color: #f0f0f0; /* Fondo gris claro */
}

#filters select {
    width: 90%; /* Ajustado para ocupar el 90% del ancho */
    margin: 5px 0; /* Espacio entre los selectores */
    box-sizing: border-box; /* Asegura que el padding y el borde se incluyan en el ancho total */
    border: 1px solid black; /* Borde negro */
    color: black; /* Texto negro */
    background-color: white; /* Fondo blanco */
    -webkit-appearance: none; /* Elimina estilos predeterminados en Safari */
    -moz-appearance: none; /* Elimina estilos predeterminados en Firefox */
    appearance: none; /* Elimina estilos predeterminados en otros navegadores */
    border-radius: 0; /* Bordes angulosos */
    padding: 5px; /* Espaciado interno */
}










/* ---TITLAR EN ROJO--- */
.red-blink {
	color: red;
	animation: blink 1s infinite;
}
@keyframes blink {
	0% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 1; }
}






/* -----------GRAFICOS DE BARRAS DE DOS COLORES HISTORICAS----------- */
  .div-principalGraf2Barras {
    display: flex;
    flex-direction: column; /* Organiza los elementos hijos verticalmente */
    justify-content: flex-end; /* Alinea los hijos en la parte inferior */
    height: 200px; /* Altura fija para demostrar la alineación al fondo */
    margin: 1px; /* Espaciado entre los divs principales */
    border: 0px solid black; /* Borde para visualizar los contornos */
  }

  .div-rojo, .div-verde {
    width: 100px; /* Ancho de los divs internos */
  }

  .div-rojo {
    background-color: #ff4560;
  }

  .div-verde {
    background-color: #21de54;
  }
  












/* -----------ESTA ES LA TABLA DE CONTACTOS SOLAMENTE, TIENE FILETE----------- */
         table.gray-border {
            width: 100%;
            border-collapse: collapse;
        }

        table.gray-border th,
        table.gray-border td {
            border: 1px solid gray;
            padding: 8px;
            text-align: left;
        }

        table.gray-border th {
            background-color: #f2f2f2;
        }

  
  
  
  
  
  
  

/* -----------TABLAS EN GENERAL----------- */

table {
width: 100%;
}
    table, th, td {
        border: 0px solid #d9d9d9;
        border-collapse: collapse;

    }
    th, td {
        padding: 5px;
        text-align: left;
		white-space: nowrap; 
		overflow: hidden;    }
    th {
        cursor: pointer;
    }
    select, input {
        margin-bottom: 10px;
    }
    .decil10 { background-color: #C68C99; }
    .decil9 { background-color: #DEA3A0; }
    .decil8 { background-color: #EDBDAE; }
    .decil7 { background-color: #F2D7BC; }
    .decil6 { background-color: #F6EBCD; }
    .decil5 { background-color: #FAFAE4; }
    .decil4 { background-color: #E8EFCC; }
    .decil3 { background-color: #D2E4BD; }
    .decil2 { background-color: #B9D7B8; }
    .decil1 { background-color: #96C2A8; }
	
	
	

/* -----------ESTO LO USA EL ESCROLL DE LOS TXT DE CHATGPT EN EL INDEX----------- */
.scrollable {
	width: 100%;
	height: 300px;
	overflow-y: scroll;
	border: 1px solid #ccc;
	padding: 10px;
	margin: 0 auto;
}









	




/* -----------EL FONT DE GOOGLE FONTS----------- */
body {
    font-family: 'Barlow', sans-serif;
}
h1 {
    font-weight: 700; /* Bold */
}
p {
    font-weight: 400; /* Regular */
}

  /* Estilos generales */
  body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
  
 a {
    text-decoration: none;
	color: black; 
  }





/* -----------TAMAÑOS FONTS L, M y S----------- */
.fontS {
  font-size: 12px; /* Base font size */
}
.fontM {
  font-size: 16px; /* Larger font size using '+' concept */
}
.fontL {
  font-size: 20px; /* Smaller font size using '-' concept */
}




/* -----------ACCORDIONS NIVELES MULTIPLES----------- */
  .accordionMultiple-content {
    display: none;
    padding-left: 25px;
    background-color: #f9f9f9;
  }
  .accordionMultiple-button {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 10px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 2s;
//*	border-top: solid thin black; *//
  }
  .active, .accordionMultiple-button:hover {
    background-color: #ccc;
  }
/* -----------ACCORDIONS NIVELES MULTIPLES----------- */

	




/* -----------MAIN ACCORDIONS----------- */

.accordion-content {
  display: none;
  /* Añade otros estilos aquí, como padding, para cuando se muestra */
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}



.active, .accordion:hover {
  background-color: #582e82;
}

.panel {
  padding: 0 10px 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}









/* -----------CONTAINER MERCADOS, CON LOS CUADRADITOS DE COLORES----------- */

.panel .containerMercados {
  padding: 10px 0;
}

.containerMercados {
  display: flex; /* Use Flexbox to align items in a row */
  align-items: center; /* Center items vertically */
}

.text-part {
  margin-right: auto; /* Pushes all other elements to the right */
/*     font-size: 18px;*/
}

.square {
  width: 40px; /* Width of the squares */
  height: 40px; /* Height of the squares */
  color: white; /* Color of the text/number */
  display: flex; /* Use Flexbox to center the content inside the square */
  justify-content: center; /* Center horizontally inside the square */
  align-items: center; /* Center vertically inside the square */
  font-size: 15px; /* Size of the number */
  margin-left: 10px; /* Space between squares */
  padding: 10px; /* Adds padding inside the squares */
}

.red-square {
  background-color: red; /* Background color of the first square */
}

.green-square {
  background-color: green; /* Background color of the second square */
}

.yellow-square {
  background-color: #eeca06; /* Background color of the second square */
}





/* -----------ESTO ES PARA EL MINI GRAFICO DE BARRAS----------- */
.pixel-container {
  display: flex; /* Use flexbox to align children */
  align-items: flex-end; /* Aligns children at the bottom */
  position: relative; 
}

.pixel {
  background-color: #bfbfbf; /* Color of the "pixels" */
  margin-right: 1px; /* Space between "pixels" */
  /* agregar color especifico a un obketo poner en style  background-color: yellow;*/
}




#tooltip {
	display: none;
	position: absolute;
	padding: 10px;
	background: #636363;
	color: white;
	border-radius: 0px; /*redondear bordes?*/
	font-size: 14px;
	white-space: nowrap; /* Keeps the tooltip text on a single line */
	max-width: 200px; /* EL ANCHO A PARTIR DE DONDE HACE EL WRAP AL SIGUIENTE RENGLON */
	white-space: normal; /* Overrides the default nowrap */
	word-wrap: break-word; /* Allows long words to break and wrap to the next line */
	overflow-wrap: break-word;
	text-align: center;
	z-index: 1000; 
}




  .cabecera, .footer {
    background-color: #aca7cb;
    padding: 15px;
    display: flex;
    justify-content: center; /* Centrado para el footer, se ajustará para el header */
    align-items: center;
  }

  /* Ajuste para alinear el contenido del encabezado a la izquierda */
  .cabecera {
    justify-content: space-between;
  }

  .logo-texto, .footer a {
    color: black; /* Color negro para la palabra "CEREBRITO" */
    font-size: 20px;
    display: flex;
    align-items: center;
    text-decoration: none; /* Remueve el subrayado de los enlaces */
  }

  .logo-texto img, .footer img {
    height: 50px;
    margin-right: 10px; /* Espacio entre el logo y el texto "CEREBRITO" */
  }

  .cabecera i {
    color: white; /* Color blanco para el ícono del encabezado */
    font-size: 24px;
    cursor: pointer;
  }

.menu {
  background-color: #e9ecef;
  color: #333;
  overflow: hidden;
  transition: max-height 0.5s ease-out, padding 0.5s ease-out;
  text-align: center;
  margin-top: 0;
  padding: 0 20px; /* Mantiene el padding lateral */
  max-height: 0; /* Inicialmente cerrado */
}

/* Aplicar padding solo cuando el acordeón esté abierto */
.menu.open {
  padding-top: 10px;
  padding-bottom: 10px;
}

.menu i {
  color: #343a40; /* Gris oscuro para los íconos del menú */
  font-size: 48px;
  margin: 10px; /* Espacio aumentado entre iconos */
  display: inline-block;
  padding: 10px; /* Agrega padding alrededor de los íconos */
}

.contenido-principal {
    margin-top: 20px;
    margin-left: 20px;
    margin-right: 20px;
  }