/* Necsal · Unir imágenes */
.nui {
  --nui-blue: #1565c0;
  --nui-blue-soft: #e8f0fb;
  --nui-ink: #1d2733;
  --nui-muted: #5b6673;
  --nui-line: #d7dee7;
  --nui-bg: #f6f8fb;
  font-size: 15px;
  line-height: 1.5;
  color: var(--nui-ink);
  max-width: 820px;
  margin: 0 auto 2em;
}
.nui *, .nui *::before, .nui *::after { box-sizing: border-box; }
.nui [hidden] { display: none !important; }
.nui-loading { color: var(--nui-muted); text-align: center; padding: 2em 0; }
.nui-muted { color: var(--nui-muted); }
.nui-card {
  background: #fff;
  border: 1px solid var(--nui-line);
  border-radius: 12px;
  padding: 18px 20px;
  margin: 0 0 16px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}
.nui-h3 { font-size: 1em; font-weight: 700; margin: 0 0 12px; }

/* Zona para soltar */
.nui-file { display: none; }
.nui-drop {
  border: 2px dashed #b9c6d6;
  border-radius: 10px;
  background: var(--nui-bg);
  text-align: center;
  padding: 34px 16px;
  cursor: pointer;
  transition: border-color .15s, background .15s, padding .15s;
}
.nui-drop:hover, .nui-drop:focus { border-color: var(--nui-blue); outline: none; }
.nui-drop.is-over { border-color: var(--nui-blue); background: var(--nui-blue-soft); }
.nui-drop.is-compact { padding: 14px 16px; }
.nui-drop p { margin: 0; }
.nui-drop-title { font-weight: 700; font-size: 1.1em; margin-bottom: 4px !important; color: var(--nui-blue); }
.nui-drop.is-compact .nui-drop-title::before { content: "+ "; }

/* Lista */
.nui-listbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 14px 0 8px; font-size: .9em; }
.nui-spacer { flex: 1; }
.nui-list { list-style: none !important; margin: 0 !important; padding: 0 !important; display: grid; gap: 8px; }
.nui-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 !important;
  padding: 6px 8px;
  border: 1px solid var(--nui-line);
  border-radius: 8px;
  background: #fff;
  cursor: grab;
}
.nui-item.is-dragging { opacity: .4; }
.nui-item.is-target { border-color: var(--nui-blue); box-shadow: 0 0 0 2px var(--nui-blue-soft); }
.nui-pos { width: 22px; text-align: center; font-weight: 700; color: var(--nui-muted); flex: none; }
.nui-thumb { width: 52px; height: 52px; object-fit: cover; border-radius: 6px; background: var(--nui-bg); flex: none; margin: 0 !important; max-width: none !important; }
.nui-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.nui-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; font-size: .92em; }
.nui-dim { font-size: .82em; }
.nui-item-actions { display: flex; gap: 4px; flex: none; }
.nui-icon {
  width: 34px; height: 34px;
  border: 1px solid var(--nui-line);
  border-radius: 6px;
  background: #fff;
  color: var(--nui-ink);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.nui-icon:hover { border-color: var(--nui-blue); color: var(--nui-blue); }
.nui-remove:hover { border-color: #b42318; color: #b42318; }

/* Opciones */
.nui-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 4px 20px; }
.nui-field { margin: 6px 0 10px; }
.nui-field > label, .nui-label { display: block; font-weight: 600; font-size: .9em; margin-bottom: 4px; }
.nui-seg { display: inline-flex; flex-wrap: wrap; border: 1px solid var(--nui-line); border-radius: 8px; overflow: hidden; }
.nui-seg-btn {
  font: inherit;
  font-size: .9em;
  padding: 7px 11px;
  border: 0;
  border-right: 1px solid var(--nui-line);
  background: #fff;
  color: var(--nui-ink);
  cursor: pointer;
}
.nui-seg-btn:last-child { border-right: 0; }
.nui-seg-btn.is-on { background: var(--nui-blue); color: #fff; }
.nui-num { display: flex; align-items: center; gap: 8px; font-size: .9em; }
.nui input[type=number] {
  width: 90px;
  font: inherit;
  padding: 7px 9px;
  border: 1px solid var(--nui-line);
  border-radius: 8px;
  background: #fff;
  color: inherit;
}
.nui input[type=color] { width: 44px; height: 34px; padding: 2px; border: 1px solid var(--nui-line); border-radius: 8px; background: #fff; cursor: pointer; }
.nui input[type=color]:disabled { opacity: .4; cursor: default; }
.nui input[type=range] { flex: 1; max-width: 200px; }
.nui-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.nui-check { display: inline-flex !important; align-items: center; gap: 6px; cursor: pointer; font-weight: 600; font-size: .9em; }

/* Resultado */
.nui-preview {
  background-color: #fff;
  background-image: linear-gradient(45deg, #e9edf2 25%, transparent 25%), linear-gradient(-45deg, #e9edf2 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e9edf2 75%), linear-gradient(-45deg, transparent 75%, #e9edf2 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
  border: 1px solid var(--nui-line);
  border-radius: 8px;
  padding: 10px;
  text-align: center;
  max-height: 560px;
  overflow: auto;
}
.nui-canvas { max-width: 100%; max-height: 520px; height: auto; display: inline-block; vertical-align: middle; box-shadow: 0 1px 6px rgba(16, 24, 40, .12); }
.nui-info { margin: 10px 0 0; font-size: .9em; }
.nui-note { background: #fff8e6; border: 1px solid #f3d58a; border-radius: 8px; padding: 8px 12px; margin: 10px 0 0; font-size: .9em; }
.nui-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.nui-actions .nui-btn { flex: 1 1 180px; }
.nui-status { min-height: 1.4em; margin: 8px 0 0; font-size: .9em; color: #1e7e34; }
.nui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font: inherit;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid var(--nui-line);
  background: #fff;
  color: var(--nui-ink);
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.nui-btn:hover:not(:disabled) { border-color: var(--nui-blue); }
.nui-btn:disabled { opacity: .5; cursor: default; }
.nui-btn-primary { background: var(--nui-blue); border-color: var(--nui-blue); color: #fff !important; }
.nui-btn-primary:hover:not(:disabled) { background: #0f4f99; }
.nui-btn-small { padding: 5px 10px; font-size: .88em; }

@media (max-width: 520px) {
  .nui-card { padding: 14px 12px; }
  .nui-seg-btn { padding: 7px 9px; }
  .nui-icon { width: 32px; height: 32px; }
}