/* =============================================================================
   Utiliobox — estilos propios del generador de etiquetas.
   Solo tokens de utiliobox.css. Reutiliza tabs, segmented, dropzone, notice,
   progress, field, slider, select e input del sistema compartido.
   ============================================================================= */

.bc-tool { overflow: hidden; }

.bc-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 420px); }
.bc-form { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.bc-side {
  padding: var(--s-5); min-width: 0;
  border-left: 1px solid var(--border); background: var(--surface-alt);
  display: flex; flex-direction: column; gap: var(--s-4);
}

.bc-set { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.bc-set legend {
  padding: 0; margin-bottom: var(--s-1);
  font-family: var(--mono); font-size: var(--fs-2xs); font-weight: var(--fw-medium);
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute);
}
.bc-set__grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr));
  align-items: start;
}
.bc-text { font-family: var(--mono); font-size: var(--fs-xs); line-height: 1.6; resize: vertical; min-height: 96px; }
.bc-syms { flex-wrap: wrap; }
.bc-count { font-size: var(--fs-xs); color: var(--accent); font-weight: var(--fw-medium); }
.bc-count:empty { display: none; }
.bc-outtabs { margin-bottom: var(--s-3); }
.bc-custom { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); margin-top: var(--s-3); }

/* --- Editor de campos --- */
.bc-fields { list-style: none; padding: 0; display: flex; flex-direction: column; gap: var(--s-1); }
.bc-field {
  margin: 0; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-2) var(--s-3); border-radius: var(--r-sm);
  background: var(--surface-alt); border: 1px solid var(--border);
}
.bc-field--off { opacity: .6; background: transparent; border-style: dashed; }
.bc-field__mv { display: flex; gap: 2px; }
.bc-field__mv .btn { min-height: 26px; padding-inline: var(--s-2); font-size: var(--fs-sm); }

/* --- Vista previa: es el PDF real --- */
.bc-prev { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.bc-prev__bar { padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border); }
.bc-prev__stage {
  padding: var(--s-3); background: var(--surface-sunken);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
  min-height: 200px; justify-content: center;
}
.bc-page {
  display: block; max-width: 100%; height: auto;
  background: #ffffff; box-shadow: var(--sh-md);
  border: 1px solid var(--border);
}
.bc-prev__nav { display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-xs); color: var(--ink-mute); }
.bc-prev__empty { padding: var(--s-6); text-align: center; font-size: var(--fs-sm); color: var(--ink-mute); }
.bc-prev__hint { padding: var(--s-2) var(--s-4) var(--s-3); font-size: var(--fs-2xs); color: var(--ink-mute); }

.bc-actions { display: flex; flex-direction: column; gap: var(--s-2); }
.bc-actions__hint { font-size: var(--fs-2xs); color: var(--ink-mute); padding-inline: var(--s-1); }

@media (max-width: 1023px) {
  .bc-split { grid-template-columns: 1fr; }
  .bc-side { border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 539px) {
  .bc-form, .bc-side { padding-inline: var(--s-4); }
  .bc-custom { grid-template-columns: 1fr; }
}

/* Alto reservado de la tarjeta mientras el JavaScript la monta. Medido en el
   sitio, no estimado: sin esto la herramienta empuja al aparecer y eso es
   CLS en la primera pantalla. Si la herramienta cambia de tamaño, este
   número hay que volver a medirlo. */
#bc-tool { --alto-herramienta: 1346px; }