.dtf-wrap { font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.dtf-toolbar { display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-bottom:.75rem; }
.dtf-toolbar .btn { position:relative; display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .75rem; border:1px solid #ddd; border-radius:.5rem; background:#fff; cursor:pointer; }
.dtf-toolbar button { padding:.5rem .75rem; border:1px solid #ddd; background:#fff; border-radius:.5rem; cursor:pointer; }
.dtf-toolbar button.primary { background:#111; color:#fff; border-color:#111; }
.dtf-canvas-area { position:relative; overflow:auto; border:1px dashed #ccc; padding:8px; border-radius:.5rem; background:#fafafa; }
#dtf-canvas { background: repeating-conic-gradient(#f6f6f6 0% 25%, #fff 0% 50%) 50%/20px 20px; }
.dtf-warnings { margin-top:.5rem; color:#b00020; }
.dtf-note { color:#555; font-size:.9rem; }

.dtf-rulers { position:absolute; top:8px; left:8px; pointer-events:none; }
.ruler.horizontal { position:absolute; left:32px; top:0; height:20px; right:0; background:linear-gradient(to right, transparent 0); }
.ruler.vertical { position:absolute; top:32px; left:0; width:20px; bottom:0; background:linear-gradient(to bottom, transparent 0); }
.dtf-canvas-area { position: relative; }   /* IMPORTANTE para posicionar el badge */
.dtf-size-badge{
  position:absolute;
  padding:.25rem .5rem;
  background:#111;
  color:#fff;
  font-size:.8rem;
  line-height:1;
  border-radius:.375rem;
  pointer-events:none;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
  transform:translate(-50%,-120%);
  z-index: 9999;          /* súbelo por si queda detrás del canvas */
  white-space: nowrap;
}


/* pegs simples cada 1cm (render dinámico con JS dibuja marcas) */