.ew-lapiz, .ew-salir {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 9998;
  display: inline-flex; align-items: center; gap: 0;
  height: 36px; padding: 0 10px; border-radius: var(--radio-pastilla);
  text-decoration: none; font-size: var(--t-sm); line-height: 1;
  font-family: var(--tipo-interfaz);
  
  background: rgba(var(--navy-rgb), .60); color: var(--papel);
  transition: opacity .18s ease, background-color .18s ease, gap .18s ease;
}
.ew-lapiz .ew-lapiz-texto {
  max-width: 0; overflow: hidden; white-space: nowrap;
  transition: max-width .22s ease;
}
.ew-lapiz:hover, .ew-lapiz:focus-visible {
  opacity: 1; background: var(--navy); color: var(--papel); gap: .5rem;
}
.ew-lapiz:hover .ew-lapiz-texto, .ew-lapiz:focus-visible .ew-lapiz-texto {
  max-width: 14rem;
}


.ew-salir {
  opacity: 1; background: var(--oro); color: var(--tinta); padding: 0 1rem;
  box-shadow: 0 6px 22px rgba(var(--navy-hondo-rgb), .28);
}
.ew-salir:hover { background: var(--oro-claro); color: var(--tinta); }

.ew-editable {
  border-bottom: 1px dashed rgba(var(--oro-rgb), .55);
  cursor: text; border-radius: var(--radio-xs);
  transition: background-color .15s ease;
}
.ew-editable:hover { background: rgba(var(--oro-rgb), .16); }


.ew-cambiado { border-bottom-color: var(--oro); border-bottom-style: solid; }

.ew-abierto {
  background: var(--pergamino); outline: 2px solid var(--oro); outline-offset: 2px;
  cursor: text;
}
.ew-guardando { opacity: .55; }

#ew-barra {
  position: absolute; z-index: 9999; display: flex; gap: .4rem;
  align-items: center; background: var(--navy); padding: .4rem .5rem;
  border-radius: var(--radio-s); box-shadow: 0 8px 26px rgba(var(--navy-hondo-rgb), .32);
  font-family: var(--tipo-interfaz);
}
.ew-btn {
  border: 0; border-radius: var(--radio-xs); padding: .3rem .7rem; font-size: var(--t-sm);
  background: rgba(255, 255, 255, .16); color: var(--papel); cursor: pointer;
}
.ew-btn:hover { background: rgba(255, 255, 255, .28); }
.ew-btn-si { background: var(--oro); color: var(--tinta); font-weight: 600; }
.ew-btn-si:hover { background: var(--oro-claro); }
.ew-btn-tenue { background: transparent; color: var(--papel); text-decoration: underline; }
.ew-pista { color: var(--oro-claro); font-size: var(--t-s); padding-left: .2rem; }

.ew-aviso {
  position: fixed; left: 50%; transform: translateX(-50%) translateY(-8px);
  bottom: auto; top: 1rem; z-index: 10000;
  background: var(--navy); color: var(--papel); padding: .6rem 1.1rem; border-radius: var(--radio-s);
  font-size: var(--t-m); opacity: 0; pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  font-family: var(--tipo-interfaz);
  max-width: min(90vw, 34rem); text-align: center;
}
.ew-aviso.ew-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.ew-bien { background: var(--correcto-hondo); }
.ew-mal  { background: var(--error); }


.ew-modo-edicion .revelar { opacity: 1 !important; transform: none !important; }
.ew-modo-edicion * { transition: none !important; animation: none !important; }