/* 2026-07-16 (bug real reportado por Eduardo: las burbujas del hero
   "saltaban" visiblemente a su posicion arrastrada al cargar/recargar) -
   como editor-visual.js se carga al final del body (defer), el elemento
   se pinta primero en su posicion CSS por defecto y LUEGO salta a la
   posicion guardada cuando el script termina de ejecutarse. En vez de
   mostrar ese salto, se oculta el elemento hasta que el script aplique la
   posicion correcta y lo revele - la ocultacion es invisible para el
   usuario (dura milisegundos), el salto no lo era. */
[data-editable] { visibility: hidden; }

/* Solo tiene efecto visual cuando el body lleva la clase
   "editor-visual-activo" (ver base.html del proyecto anfitrion) - para
   el resto de visitantes estas reglas no coinciden con nada. */
body.editor-visual-activo [data-editable] {
  cursor: move;
  outline: 2px dashed #ff6b35;
  outline-offset: 3px;
  border-radius: 4px;
}
body.editor-visual-activo [data-editable]:hover {
  outline-color: #0f7a5c;
}
body.editor-visual-activo [data-editable]:active {
  outline-style: solid;
}

/* Aviso flotante fijo, discreto, para recordar que el modo edicion esta
   activo (facil de olvidar y arrastrar cosas sin querer). */
.editor-visual-aviso {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 9999;
  background: #ff6b35;
  color: #fff;
  font: 600 .78rem/1.4 system-ui, sans-serif;
  padding: .5rem .9rem;
  border-radius: 999px;
  box-shadow: 0 4px 16px rgba(0,0,0,.25);
  pointer-events: none;
}