/* ============================================================
   Motor de demos NND — chrome de edición en vivo
   Compartido por todas las demos. Estilos de contenido = inline por demo.
   ============================================================ */
:root {
  --nnd-ink: #08182B;
  --nnd-cyan: #07C4DA;
  --nnd-cyan-deep: #0E7E94;
  --nnd-line: #E2E8F0;
}
* { box-sizing: border-box; }
body { margin: 0; }

/* Bandera superior */
.demo-flag {
  background: var(--nnd-ink); color: #fff; text-align: center;
  font-size: .74rem; padding: .45rem 1rem; font-weight: 600;
  font-family: "Hanken Grotesk", system-ui, sans-serif;
}
.demo-flag a { color: var(--nnd-cyan); text-decoration: underline; font-weight: 700; }

/* Barra de edición (NND chrome) */
.edit-bar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .55rem .9rem; background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--nnd-line);
  font-family: "Hanken Grotesk", system-ui, sans-serif;
}
.edit-hint { font-size: .76rem; color: #51657a; font-weight: 600; margin-right: auto; display: flex; align-items: center; gap: .4rem; }
.edit-hint b { color: var(--nnd-ink); }
.edit-btn {
  display: inline-flex; align-items: center; gap: .4rem; border: 1.5px solid var(--nnd-line);
  background: #fff; color: var(--nnd-ink); font-weight: 700; font-size: .82rem;
  padding: .5rem .95rem; border-radius: 100px; cursor: pointer; transition: .2s; font-family: inherit;
}
.edit-btn:hover { border-color: var(--nnd-cyan); }
.edit-btn.primary { background: linear-gradient(135deg, var(--nnd-cyan), #1577DA); color: #fff; border-color: transparent; }
.edit-btn.active { background: var(--nnd-ink); color: #fff; border-color: var(--nnd-ink); }
.edit-btn.ghost { background: transparent; }

/* Estado editable */
[data-demo-root].is-editing [data-edit] {
  outline: 1.5px dashed var(--nnd-cyan); outline-offset: 3px; border-radius: 4px;
  cursor: text; transition: background .15s;
}
[data-demo-root].is-editing [data-edit]:hover { background: rgba(7,196,218,.08); }
[data-demo-root].is-editing [data-edit]:focus { outline: 2px solid var(--nnd-cyan); background: rgba(7,196,218,.1); }
[data-edit] { outline: none; }

/* Auto-edición (data-edit-auto) */
[data-ek] { outline: none; }
[data-demo-root].is-editing [data-ek] { outline: 1.5px dashed var(--nnd-cyan); outline-offset: 3px; border-radius: 4px; cursor: text; transition: background .15s; }
[data-demo-root].is-editing [data-ek]:hover { background: rgba(7,196,218,.08); }
[data-demo-root].is-editing [data-ek]:focus { outline: 2px solid var(--nnd-cyan); background: rgba(7,196,218,.12); }

/* Imágenes editables (clic para subir foto) */
[data-demo-root].is-editing img[data-ik] { outline: 2px dashed var(--nnd-cyan); outline-offset: 2px; cursor: pointer; transition: outline-color .2s, filter .2s; }
[data-demo-root].is-editing img[data-ik]:hover { outline-color: var(--nnd-cyan-deep); filter: brightness(.9); }

/* ---- Editor avanzado (panel lateral) ---- */
.nnd-adv-btn {
  position: fixed; right: 14px; bottom: 64px; z-index: 2147483600;
  display: inline-flex; align-items: center; gap: .35rem;
  background: #fff; color: #08182B; border: 1.5px solid #d9e5ef;
  font-family: "Hanken Grotesk", system-ui, sans-serif; font-weight: 700; font-size: .8rem;
  padding: .55rem .95rem; border-radius: 100px; cursor: pointer;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,.45);
}
.nnd-adv-btn:hover { border-color: var(--nnd-cyan); }
.nnd-adv {
  position: fixed; top: 50%; right: 80px; transform: translate(24px, -50%);
  width: min(92vw, 380px); max-height: 86vh;
  background: #fff; color: #08182B; z-index: 2147483601;
  border: 1px solid #e6eef5; border-radius: 22px;
  box-shadow: 0 40px 90px -28px rgba(8,24,43,.5), 0 6px 18px rgba(8,24,43,.1);
  display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; pointer-events: none;
  transition: opacity .22s ease, transform .32s cubic-bezier(.22,.61,.36,1);
  font-family: "Hanken Grotesk", system-ui, sans-serif;
}
.nnd-adv.open { opacity: 1; pointer-events: auto; transform: translate(0, -50%); }
.nnd-adv__head { display: flex; align-items: center; justify-content: space-between; padding: 1.05rem 1.3rem; background: linear-gradient(135deg, var(--nnd-cyan), #1577DA); color: #fff; }
.nnd-adv__head b { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; }
.nnd-adv__x { border: 0; background: rgba(255,255,255,.22); color: #fff; width: 32px; height: 32px; border-radius: 10px; cursor: pointer; font-size: 1rem; transition: background .15s; }
.nnd-adv__x:hover { background: rgba(255,255,255,.38); }
.nnd-adv__body { padding: 1.1rem; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 1rem; }
.nnd-adv__sec { background: #f7fafc; border: 1px solid #eef3f8; border-radius: 16px; padding: 1rem; margin: 0; }
.nnd-adv__sec h4 { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--nnd-cyan-deep); margin: 0 0 .4rem; font-weight: 800; }
.nnd-adv__sec p { font-size: .75rem; color: #6e839a; margin: 0 0 .7rem; line-height: 1.45; }
.nnd-adv__color { width: 100%; height: 48px; border: 1px solid #dde7f0; border-radius: 12px; cursor: pointer; background: #fff; padding: 4px; }
.nnd-adv__fotohead { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .7rem; }
.nnd-adv__sectitle { font-size: .78rem; font-weight: 700; color: #08182B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nnd-adv__toggle { border: 1px solid #dbe6f0; background: #fff; color: var(--nnd-cyan-deep); font-weight: 700; font-size: .68rem; cursor: pointer; padding: .28rem .65rem; border-radius: 100px; flex: none; transition: .15s; }
.nnd-adv__toggle:hover { border-color: var(--nnd-cyan); background: #f4fbfc; }
.nnd-adv__seg { display: flex; gap: 3px; background: #eaf0f6; border-radius: 100px; padding: 3px; margin-bottom: .6rem; }
.nnd-adv__seg button { flex: 1; border: 0; background: transparent; font: inherit; font-size: .72rem; font-weight: 700; color: #6e839a; padding: .4rem; border-radius: 100px; cursor: pointer; transition: .15s; }
.nnd-adv__seg button.active { background: #fff; color: var(--nnd-cyan-deep); box-shadow: 0 1px 3px rgba(8,24,43,.14); }
.nnd-adv__search { width: 100%; border: 1px solid #dde7f0; border-radius: 10px; padding: .5rem .7rem; font: inherit; font-size: .78rem; margin-bottom: .6rem; background: #fff; box-sizing: border-box; }
.nnd-adv__search:focus { outline: none; border-color: var(--nnd-cyan); box-shadow: 0 0 0 3px rgba(7,196,218,.15); }
.nnd-adv__sectitle, .nnd-adv__sectitle2 { font-size: .66rem; font-weight: 800; color: #8499ac; margin-bottom: .5rem; text-transform: uppercase; letter-spacing: .06em; }
.nnd-adv__img-cta { transition: opacity .15s; }
.nnd-adv__empty { font-size: .78rem; color: #6e839a; padding: .6rem; text-align: center; }
.nnd-adv__imgs, .nnd-adv__txts { display: flex; flex-direction: column; gap: .45rem; }
.nnd-adv__img, .nnd-adv__txt { display: flex; align-items: center; gap: .7rem; padding: .5rem; border: 1px solid #e9f0f6; border-radius: 12px; background: #fff; cursor: pointer; text-align: left; font: inherit; transition: border-color .15s, box-shadow .15s, transform .12s; }
.nnd-adv__img:hover, .nnd-adv__txt:hover { border-color: var(--nnd-cyan); box-shadow: 0 8px 18px -12px rgba(7,196,218,.7); transform: translateY(-1px); }
.nnd-adv__thumb { width: 48px; height: 48px; flex: none; border-radius: 10px; background-color: #16161c; background-position: center; background-size: cover; background-repeat: no-repeat; border: 1px solid #e9f0f6; }
.nnd-adv__img-label, .nnd-adv__txt-label { flex: 1; min-width: 0; font-size: .76rem; color: #41576c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nnd-adv__img-cta { font-size: .66rem; font-weight: 800; color: #fff; background: var(--nnd-cyan-deep); padding: .22rem .6rem; border-radius: 100px; flex: none; }
.nnd-adv__txt-ic { flex: none; width: 30px; height: 30px; display: grid; place-items: center; background: rgba(7,196,218,.12); border-radius: 9px; font-size: .85rem; }
.nnd-edit-target { outline: 2px solid var(--nnd-cyan) !important; outline-offset: 3px; background: rgba(7,196,218,.1); border-radius: 4px; scroll-margin-top: 90px; }
.nnd-adv__reset { width: 100%; padding: .8rem; border: 1.5px solid #f0dada; background: #fff; border-radius: 12px; font-weight: 700; cursor: pointer; color: #b14444; transition: .15s; }
.nnd-adv__reset:hover { background: #fff5f5; border-color: #e0a8a8; }
@media (max-width: 560px) { .nnd-adv { right: 12px; transform: translate(24px, -50%); } .nnd-adv.open { transform: translate(0, -50%); } }
@media (prefers-reduced-motion: reduce) { .nnd-adv { transition: none; } }

/* ---- Mover elementos ---- */
.nnd-move-btn {
  position: fixed; right: 14px; bottom: 110px; z-index: 2147483600;
  display: inline-flex; align-items: center; gap: .35rem;
  background: #fff; color: #08182B; border: 1.5px solid #d9e5ef;
  font-family: "Hanken Grotesk", system-ui, sans-serif; font-weight: 700; font-size: .8rem;
  padding: .55rem .95rem; border-radius: 100px; cursor: pointer;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,.45);
}
.nnd-move-btn.active { background: linear-gradient(135deg, var(--nnd-cyan), #1577DA); color: #fff; border-color: transparent; }
.nnd-undo-btn {
  position: fixed; right: 14px; bottom: 156px; z-index: 2147483600;
  display: inline-flex; align-items: center; gap: .35rem;
  background: #fff; color: #08182B; border: 1.5px solid #d9e5ef;
  font-family: "Hanken Grotesk", system-ui, sans-serif; font-weight: 700; font-size: .8rem;
  padding: .55rem .95rem; border-radius: 100px; cursor: pointer;
  box-shadow: 0 8px 24px -10px rgba(0,0,0,.45);
}
.nnd-undo-btn:hover { border-color: var(--nnd-cyan); }
[data-demo-root].nnd-moving { user-select: none; -webkit-user-select: none; }
[data-demo-root].nnd-moving::before {
  content: ""; position: fixed; inset: 0; z-index: 2900; pointer-events: none;
  background-image:
    linear-gradient(rgba(7,196,218,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(7,196,218,.14) 1px, transparent 1px);
  background-size: 16px 16px;
  transform: translateZ(0); /* capa propia: no se repinta al mover */
}
/* En modo mover, sin transiciones ni animaciones -> el arrastre no rebota (causa principal del lag) */
[data-demo-root].nnd-moving [data-mk] { cursor: move; touch-action: none; transition: none !important; }
[data-mk].nnd-hover { outline: 1.5px dashed var(--nnd-cyan); outline-offset: 2px; background: rgba(7,196,218,.06); }
[data-mk].nnd-dragging { opacity: .9; outline: 2px solid var(--nnd-cyan) !important; position: relative; z-index: 5000; cursor: grabbing; }
.nnd-resize { position: fixed; width: 16px; height: 16px; background: var(--nnd-cyan); border: 2px solid #fff; border-radius: 4px; cursor: nwse-resize; z-index: 2147483602; display: none; box-shadow: 0 2px 6px rgba(0,0,0,.35); touch-action: none; }
.nnd-resize.show { display: block; }

/* ---- Dock de edición (centro, borde derecho) ---- */
.nnd-dock {
  position: fixed; right: 14px; top: 50%; transform: translateY(-50%);
  z-index: 2147483600; display: flex; flex-direction: column; gap: .3rem; align-items: center;
  padding: .45rem; background: rgba(255,255,255,.96); backdrop-filter: blur(12px) saturate(1.3);
  border: 1px solid #dbe6f0; border-radius: 20px;
  box-shadow: 0 24px 60px -22px rgba(8,24,43,.5), 0 2px 8px rgba(8,24,43,.08);
  font-family: "Hanken Grotesk", system-ui, sans-serif;
}
.nnd-dock-btn {
  width: 46px; height: 46px; border: 0; border-radius: 14px; background: transparent;
  color: #08182B; cursor: pointer; display: grid; place-items: center; font-size: 1.2rem;
  transition: background .15s, transform .08s; line-height: 1;
}
.nnd-dock-btn:hover { background: #eef6f9; }
.nnd-dock-btn:active { transform: scale(.9); }
.nnd-dock-btn.active { background: linear-gradient(135deg, var(--nnd-cyan), #1577DA); color: #fff; }
.nnd-dock-main { background: linear-gradient(135deg, var(--nnd-cyan), #1577DA); color: #fff; box-shadow: 0 6px 16px -6px rgba(7,196,218,.65); }
.nnd-dock-main:hover { background: linear-gradient(135deg, var(--nnd-cyan), #1577DA); filter: brightness(1.06); }
@media (max-width: 560px) { .nnd-dock-btn { width: 42px; height: 42px; } }

/* Controles que solo aparecen en modo edición */
[data-demo-root]:not(.is-editing) .edit-only { display: none !important; }

/* Toggle "agotado" / disponibilidad */
.sold-toggle, .img-swap {
  display: inline-flex; align-items: center; gap: .35rem; margin-top: .5rem;
  border: 1.5px solid var(--nnd-line); background: #fff; color: #51657a;
  font-weight: 700; font-size: .68rem; padding: .3rem .65rem; border-radius: 100px; cursor: pointer;
  font-family: "Hanken Grotesk", system-ui, sans-serif; transition: .2s;
}
.sold-toggle:hover, .img-swap:hover { border-color: var(--nnd-cyan); color: var(--nnd-cyan-deep); }
.is-sold .sold-toggle { background: var(--nnd-cyan); color: #fff; border-color: var(--nnd-cyan); }

/* Insignia "Agotado" (oculta hasta marcar) */
.sold-badge { display: none; font-size: .62rem; background: #F0E6E6; color: #9B5151; padding: .12rem .5rem; border-radius: 100px; font-weight: 700; white-space: nowrap; }
.is-sold .sold-badge { display: inline-block; }

/* Toast al entrar en edición */
.edit-toast {
  position: fixed; left: 50%; bottom: 1.1rem; transform: translate(-50%, 160%);
  background: var(--nnd-ink); color: #fff; padding: .8rem 1.2rem; border-radius: 14px;
  font-family: "Hanken Grotesk", system-ui, sans-serif; font-size: .85rem; font-weight: 600;
  box-shadow: 0 20px 50px -20px rgba(8,24,43,.6); z-index: 2147483605; max-width: 90vw; text-align: center;
  transition: transform .5s cubic-bezier(.22,.61,.36,1); display: flex; align-items: center; gap: .5rem;
}
.edit-toast.show { transform: translate(-50%, 0); }
.edit-toast b { color: var(--nnd-cyan); }

@media (prefers-reduced-motion: reduce) { .edit-toast { transition: none; } }