/* LOGO */
#brandContainer {
  display: flex;
  align-items: center;
  position: fixed;
  top: 2px;
  left: 20px;
  z-index: 1000;
}

#brandContainer img {
  width: auto;
  height: 40px;
}

#logoContainer {
  display: flex;
  align-items: center;
  position: fixed;
  top: 2px;
  right: 20px;
  z-index: 1000;
}

#logoContainer img {
  width: 48px;
  height: auto;
}

/* NORTE */
.ol-ext-print-dialog .ol-print-map .ol-control.olext-print-compass {
  position: absolute !important;
  top: 75px !important;
  margin-right: 5% !important;
  width: 100px !important;
  height: 100px !important;
  z-index: 1000 !important; 
}
/* TITULO */
#titleSection {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 43px; 
  background-color: white;
  font-size: 14px;
  font-weight: bold;
  color: #070707;
  border: 1px solid black; 
  text-align: center;
  line-height: 27px; 
  text-transform: uppercase;
}

/* SUBTITULO */
#subtitleSection {
  display: none;
  position: absolute;
  top: 20px;
  left: 0;
  width: 100%;
  height: 25px;
  font-size: 12px;
  color: #070707;
  text-align: center;
}

/* COMENTARIO */
#commentSection {
  display: none;
  position: fixed; 
  bottom: 0; 
  width: 100%; 
  background-color: white;
  box-sizing: border-box;
  word-wrap: break-word;
  white-space: normal;
  visibility: visible !important; 
  z-index: 1000; 
  height: 14px; 
  border: 1px solid black; 
}

#commentContent {
  font-size: 10px;
  line-height: 90%;
}

/* ESCALA */
#scaleSection {
  display: none; 
  position: absolute;
  bottom: 214px; 
  top: auto;
  left: 0;
  width: 100%; 
  height: 30px;
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
  background-color: white; 
  z-index: 999; 
}

.ol-scale-line {
  display: none;
  position: fixed !important;  
  bottom: 218px; 
  left: 50%; 
  transform: translateX(-50%); 
  z-index: 1000;                 
  background-color: white;
  pointer-events: none;         
}

/* LEGENDA */
#printLegend {
  position: fixed;
  display: none;
/*   bottom: 14px; */
bottom: 14px;
  right: 0;
  height: 200px; 
  width: 100%; /* Occupies the full width */
  background-color: white;
  overflow-y: auto;
  box-sizing: border-box;
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
  padding-top: 25px; /* Reserve space for the title */
  flex-wrap: wrap; /* Wrap items to the next row when necessary */
  align-content: flex-start; /* Start wrapping from the top */
  gap: 5px; /* Spacing between legend items */
  align-items: flex-start; /* Prevent flex items from growing vertically to match others */
}

/* Legend title heading styling (h3 at the top) */
#printLegend h3 {
  font-weight: bold;
  font-size: 13px;
  color: #070707;
  text-align: center;
  margin: 0;
  padding: 1px 0;
  height: 20px;
  width: 100%; 
  position: absolute;
  top: 0;
  z-index: 1;
  box-sizing: border-box;
}

/* Container for each legend item (title + image) */
#printLegend div {
  display: flex;
  flex-direction: column; /* Title above the image */
  justify-content: flex-start;
  align-items: flex-start; /* Prevents stretching, align to the top */
  /* padding: 10px; */
  padding-left: 3px;
  padding-right: 3px;
  flex: 0 1 auto; /* Adjusted to let items shrink when necessary */
  min-width: 100px; /* Minimum size for the item container */
  max-width: 170px; /* Ensure it doesn’t get too large */
  word-break: break-word;
  text-align: center;
  box-sizing: border-box;
}

/* Title (layer name) styling inside each legend item */
#printLegend .legend-title {
  font-weight: bold;
  font-size: 10px;
  text-align: center;
  word-wrap: break-word;
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Legend images styling */
#printLegend img {
  max-width: 100px; /* Control image size */
  height: auto;
  display: block; /* Ensure the image stays inside its block */
  margin: 0 auto; /* Center the image horizontally */
}