/* Editor del sello automático (sello.js) — 29/10/2026 */
/* Misma tarjeta que los pasos plegables (Modelo, Tinta): sin márgenes propios */
.con-sello #configurator .steps--compact > [data-step="quantity"] {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3);
  padding: 10px var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff;
}
.con-sello #configurator [data-step="quantity"] .step-head { margin: 0; }
.con-sello #configurator [data-step="quantity"] .step-title { font-size: var(--text-base); }
.con-sello #configurator [data-step="quantity"] .step-body { margin: 0 0 0 auto; }
.con-sello #configurator [data-step="quantity"] .qty-min-note { flex-basis: 100%; }
.con-sello #configurator [data-step="quantity"] .qty-stepper button, .con-sello #configurator [data-step="quantity"] .qty-stepper input { height: 34px; min-height: 0; padding-top: 0; padding-bottom: 0; }
.con-sello #configurator [data-step="quantity"] .qty-stepper button { width: 40px; }
.con-sello #configurator [data-step="quantity"] .qty-stepper input { width: 56px; font-size: var(--text-base); }

.sl-editor {
  margin: var(--space-2) 0 var(--space-5);
  border: 1px solid var(--brand-400); border-radius: var(--radius-md); background: #fff;
}
.sl-head { display: flex; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); }
.sl-editor .sl-num { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.sl-head h2 { margin: 0; font-size: var(--text-base); }
.sl-head p { margin: 2px 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.sl-cuerpo { padding: var(--space-4); }

.sl-preview {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-5) var(--space-4); margin-bottom: var(--space-4); border-radius: var(--radius-md);
  background: repeating-linear-gradient(45deg, #f6f5f0 0 10px, #f1efe8 10px 20px);
}
.sl-canvas { width: 100%; max-width: 460px; height: auto; background: #fff; border-radius: 3px; box-shadow: 0 6px 18px -10px rgba(0, 0, 0, .35); }
.sl-medida { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
.sl-aviso { margin: 0; font-size: var(--text-sm); color: #9a5b00; text-align: center; }

.sl-lineas { display: flex; flex-direction: column; gap: var(--space-2); }
.sl-linea { display: flex; gap: 6px; height: 44px; }
.sl-linea input {
  flex: 1; min-width: 0; padding: 10px 12px; font: inherit; font-size: var(--text-base);
  border: 1px solid var(--color-border-input); border-radius: var(--radius-sm); background: #fff;
}
.sl-linea input:focus { outline: 0; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.sl-b, .sl-x {
  flex: none; width: 42px; border: 1px solid var(--color-border-input); border-radius: var(--radius-sm);
  background: #fff; font: inherit; cursor: pointer; color: var(--gray-700);
}
.sl-b { font-weight: 800; }
.sl-b.is-on { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.sl-x { font-size: 20px; line-height: 1; color: var(--gray-500); }
.sl-x:hover { color: #b42318; border-color: #b42318; }
.sl-mas { margin-top: var(--space-2); padding: 6px 0; border: 0; background: none; color: var(--brand-700); font: inherit; font-weight: 600; cursor: pointer; }
.sl-mas[hidden] { display: none; }

.sl-opciones { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin: var(--space-3) 0 var(--space-4); }
.sl-seg { display: inline-flex; border: 1px solid var(--color-border-input); border-radius: var(--radius-full); overflow: hidden; }
.sl-seg button { padding: 7px 14px; border: 0; background: #fff; font: inherit; font-size: var(--text-sm); font-weight: 600; color: var(--gray-700); cursor: pointer; }
.sl-seg button.is-on { background: var(--brand-600); color: #fff; }
.sl-check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }

.sl-logo { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.sl-logo-btn {
  display: inline-flex; align-items: center; padding: 8px 16px; border: 1px dashed var(--brand-500); border-radius: var(--radius-full);
  color: var(--brand-700); font-size: var(--text-sm); font-weight: 600; cursor: pointer;
}
.sl-logo-btn:hover { background: var(--color-primary-soft); }
.sl-logo-info { font-size: var(--text-sm); color: var(--gray-700); }
.sl-logo-quitar { border: 0; background: none; color: #b42318; font: inherit; font-size: var(--text-sm); cursor: pointer; }
.sl-nota { flex-basis: 100%; margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
@media (max-width: 560px) { .sl-cuerpo { padding: var(--space-3); } .sl-head p { display: none; } }

/* cuadrados y redondos (Trodat Printy) */
.sl-canvas.is-redondo { border-radius: 50%; }
.sl-canvas.is-redondo, .sl-canvas.is-cuadrado { max-width: 300px; }
.sl-borde { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--space-3); font-size: var(--text-sm); font-weight: 600; color: var(--gray-700); }
.sl-borde[hidden] { display: none; }
.sl-borde input {
  padding: 10px 12px; font: inherit; font-size: var(--text-base); font-weight: 400;
  border: 1px solid var(--color-border-input); border-radius: var(--radius-sm); background: #fff;
}
.sl-borde input:focus { outline: 0; border-color: var(--brand-500); box-shadow: 0 0 0 3px var(--color-primary-soft); }
.sl-seg[hidden] { display: none; }