/* =====================================================================
   GUIDE PER L'ARTISTA
   ---------------------------------------------------------------------
   Quando il <body> ha la classe "guide-attive", ogni elemento con
   l'attributo data-guida mostra un'etichetta con cosa disegnare e in che
   dimensione. Si attivano/disattivano con il bottone in basso a sinistra.
   Questo file si può eliminare quando il sito è finito.
   ===================================================================== */
:root { --guida-colore: #7c3aed; }

body.guide-attive [data-guida] {
  position: relative;
  outline: 2px dashed var(--guida-colore);
  outline-offset: -2px;
}
body.guide-attive [data-guida]::before {
  content: attr(data-guida);
  position: absolute; top: 0; left: 0; z-index: 5;
  background: var(--guida-colore); color: #fff;
  font: 600 11px/1.4 system-ui, sans-serif;
  padding: 3px 9px; border-bottom-right-radius: 8px;
  pointer-events: none; max-width: 100%;
}

.guide-toggle {
  position: fixed; left: 1rem; bottom: 1rem; z-index: 30;
  font: 600 12px/1 system-ui, sans-serif; cursor: pointer;
  padding: 0.7em 1em; border-radius: 999px; border: 0;
  background: var(--guida-colore); color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}

/* Nei blocchi di testo l'etichetta coprirebbe il titolo: facciamo spazio. */
body.guide-attive .sezione-intestazione[data-guida],
body.guide-attive form[data-guida],
body.guide-attive .contenitore[data-guida] { padding-top: 1.8rem; }