/* =============================================================================
   Utiliobox — estilos propios del generador de firma de correo.
   Solo tokens de utiliobox.css. Reutiliza tabs, notice, field, input, select,
   segmented, dropzone, table y btn del sistema compartido.
   Ojo: esto estiliza LA HERRAMIENTA. La firma que se genera no usa nada de
   aquí; va con estilos en línea para sobrevivir a Outlook.
   ============================================================================= */

.sig-tool { overflow: hidden; }
.sig-tabsbar { padding-bottom: 0; }
.sig-tabsbar .tabs { margin-inline: calc(var(--s-5) * -1); padding-inline: var(--s-5); }

/* --- Dos columnas: formulario y vista previa --- */
.sig-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); }
.sig-form { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-5); min-width: 0; }
.sig-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-5);
}

/* --- Grupos del formulario --- */
.sig-set { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.sig-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);
}
.sig-set__grid {
  display: grid; gap: var(--s-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  align-items: start;
}
.sig-set__hint { margin-bottom: var(--s-1); }
.sig-tpls { flex-wrap: wrap; }
.sig-color { padding: 3px; height: 40px; cursor: pointer; }

/* --- Subida de imágenes --- */
.sig-img { display: flex; flex-direction: column; gap: var(--s-2); }
.sig-img__row { display: grid; grid-template-columns: auto 1fr; gap: var(--s-2); align-items: center; }
.sig-img__pick { position: relative; overflow: hidden; white-space: nowrap; }
.sig-img__pick input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.sig-img__thumb { display: flex; align-items: center; gap: var(--s-3); }
.sig-img__thumb img {
  max-width: 96px; max-height: 48px; width: auto; height: auto;
  border: 1px solid var(--border); border-radius: var(--r-xs); background: var(--g-0);
}
.sig-imgnote { align-items: flex-start; }
.sig-imgnote b { color: var(--ink); }

/* --- Vista previa --- */
.sig-prev { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
.sig-prev__bar {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--border);
}
.sig-prev__stage { background: #ffffff; }        /* el correo siempre es blanco */
.sig-prev__empty { padding: var(--s-6); text-align: center; font-size: var(--fs-sm); color: var(--g-500); }
.sig-frame { width: 100%; border: 0; height: 220px; display: block; background: #ffffff; }
.sig-prev__hint { padding: var(--s-2) var(--s-4) var(--s-3); font-size: var(--fs-2xs); color: var(--ink-mute); }
.sig-size { font-family: var(--mono); font-size: var(--fs-2xs); color: var(--ink-mute); }
.sig-size--warn { color: var(--warn); font-weight: var(--fw-medium); }

/* --- Botones de salida --- */
.sig-actions { display: flex; flex-direction: column; gap: var(--s-1); }
.sig-actions .btn + .sig-actions__hint { margin-bottom: var(--s-3); }
.sig-actions__hint { font-size: var(--fs-2xs); color: var(--ink-mute); padding-inline: var(--s-1); }

/* --- Instrucciones de instalación --- */
.sig-how { border-top: 1px solid var(--border); padding-top: var(--s-4); }
.sig-how__tabs { margin-top: var(--s-3); margin-bottom: var(--s-3); }
.sig-how__tabs .tab { padding-inline: var(--s-2); font-size: var(--fs-xs); }
.sig-how__steps {
  margin: 0; padding-left: var(--s-5);
  font-size: var(--fs-xs); line-height: 1.65; color: var(--ink-soft);
}
.sig-how__steps li { margin-bottom: var(--s-2); }
.sig-how__steps li::marker { color: var(--accent); font-weight: var(--fw-semi); }

/* --- Pestaña de equipo --- */
.sig-team { display: flex; flex-direction: column; gap: var(--s-4); }
.sig-team__intro { font-size: var(--fs-sm); color: var(--ink-soft); max-width: 78ch; }
.sig-team__cols {
  padding: var(--s-4); border-radius: var(--r-md);
  background: var(--surface-alt); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: var(--s-2); align-items: flex-start;
}
.sig-team__list { display: flex; flex-wrap: wrap; gap: var(--s-1); }
.sig-team__list code { font-size: var(--fs-2xs); }
.sig-team__prevtitle { font-size: var(--fs-xs); color: var(--ink-mute); margin-bottom: var(--s-2); }

@media (max-width: 1023px) {
  .sig-split { grid-template-columns: 1fr; }
  .sig-side { border-left: 0; border-top: 1px solid var(--border); }
}
@media (max-width: 539px) {
  .sig-form, .sig-side, .sig-team { padding-inline: var(--s-4); }
  .sig-tabsbar .tabs { margin-inline: calc(var(--s-4) * -1); padding-inline: var(--s-4); }
  .sig-img__row { 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. */
#sig-tool { --alto-herramienta: 1622px; }