/* ===============================================
   MOD_MEASURE.CSS
   Posicionament i estil del mòdul de mesura
   (integrat amb base_ui_variables.css)
   =============================================== */

.mod_measure-control {
  position: absolute;
  top: var(--measure-top, 46px);
  left: var(--measure-left, 8px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  z-index: 1000;
}

/* Botó principal */
.mod_measure-main img {
  width: 24px;
  height: 24px;
}

/* Estil base ui-button, però aquí podries afinar si cal */
.mod_measure-main {
  position: relative;
  z-index: 1001;
}

/* Estat actiu (igual filosofia que altres mòduls) */
.active-button {
  background: #0A56C2 !important;
  border-color: #0A56C2 !important;
}

.active-button img {
  filter: brightness(0) invert(1); /* icona blanca */
}

/* Grup desplegable — alineat a la dreta del botó */
.mod_measure-group {
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 6px;              /* separació entre botó i grup */
  transform: translateY(-50%);
  display: flex;
  flex-direction: row;
  gap: 6px;

  background: #fff;
  padding: 4px;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.mod_measure-group.hidden {
  display: none;
}

/* Subbotons */
.mod_measure-group button {
  background: var(--btn-bg, #fff);
  border: 1px solid var(--btn-border-color, #ccc);
  border-radius: var(--btn-radius, 6px);
  box-shadow: var(--btn-shadow, 0 1px 3px rgba(0,0,0,0.15));
  padding: 4px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.mod_measure-group button:hover {
  background-color: var(--btn-bg-hover, #f2f2f2);
}

.mod_measure-group .ui-button {
  width: 26px;
  height: 26px;
  padding: 3px;
}

.mod_measure-group img {
  width: 20px;
  height: 20px;
}

/* Etiquetas de medición (heredadas del módulo original) */
.measure-label {
  background: rgba(255, 255, 255, 0.85);
  border: 1px solid #b55fc4;
  border-radius: 6px;
  padding: 2px 6px;
  font-size: 12px;
  color: #80066c;
  font-weight: 500;
  white-space: nowrap;
  transition: opacity 0.3s ease-in;
  opacity: 0;
  z-index: 2000;
}

.measure-label.show {
  opacity: 1;
}

/* Etiqueta total destacada */
.measure-label.total {
  background: rgba(255, 255, 255, 0.95);
  border: 2px solid #80066c;
  color: #80066c;
  font-weight: bold;
  box-shadow: 0 0 4px rgba(128, 6, 108, 0.4);
  z-index: 9999 !important;
}