body {
    margin: 0;
    font-family: Arial, sans-serif;
    background-color: #f9f9f9;
  }
  
  .main {
    padding: 20px;
  }
  
  .logos {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
  }
  
  .logos div {
    padding: 10px;
  }
  
  .logos img {
    max-width: 150px;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    transition: transform 0.2s;
  }
  
  .logos img:hover {
    transform: scale(1.05);
  }

.dygraph-legend{
    background-color: transparent !important;
    box-shadow: none !important;
    color: black; /* Opcional: cambia el color del texto si es necesario */
}

.photo {
  width: 100%;
  height: 350px; /* ajusta según tu diseño */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background-color: #f0f0f0;
}

.foto-estacion {
  max-width:100%;
  max-height: 100%;
  object-fit: contain; /* o 'cover' si quieres recorte */
  object-position: center;
}


.graphs {
  display: flex;
  flex-direction: row;
  gap: 20px;
  padding: 20px;
}

.graphs-column {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 2;
}

.map-column {
  flex: 1;
}

#graph1, #graph2, #graph3 {
  width: 100%;
  height: 200px;
}

#map {
  width: 100%;
  height: 630px; /* 3x200px + 2x10px gap */
}

 .info-box {
    font-size: 10px;
    margin: 4px 0;
    line-height: 1.4;
  }

  .info-box p {
  transition: all 0.3s ease;
}