header {
  padding: 10px 15px;
  background: #333;
  color: white;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;  /* o fixed se preferisci header sempre fisso */
  top: 0;
  z-index: 100;      /* > mappa (che sta a 50) */

}

.top-buttons {
  display: flex;
  gap: 10px;
}

.icon-btn {
  background: none;
  border: none;
  font-size: 22px;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 6px;
}

.icon-btn:hover {
  background: rgba(255,255,255,0.15);
}

.icon-btn {
  background: none;
  border: none;
  font-size: 22px;
  padding: 6px 10px;
  cursor: pointer;
  border-radius: 6px;
  color: white; /* 🔥 questo mancava */
}

/* Testo solo per screen reader */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,1px,1px);
  white-space: nowrap; border: 0;
}

/* Bottone */
.icon-btn.logout-btn {
  --size: 36px;
  --bg-hover: rgba(255,255,255,0.12);   /* hover chiaro su sfondo nero */
  --ring: rgba(255,255,255,0.35);       /* focus ring chiaro */

  width: var(--size);
  height: var(--size);
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color .15s ease, box-shadow .15s ease, transform .05s ease;
}

.icon-btn.logout-btn:hover { background: var(--bg-hover); }
.icon-btn.logout-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }
.icon-btn.logout-btn:active { transform: translateY(1px); }

/* PNG bianco: se l'originale è scuro/nero su trasparente */
.logout-icon {
  width: 22px;
  height: 22px;
  display: block;
  filter: brightness(0) invert(1);   /* → bianco */
  /* facoltativo, per nitidezza */
  image-rendering: -webkit-optimize-contrast;
}

/* Se hai una versione retina 2x, usa srcset nell'HTML */