/* nest.css — estilos de /nest (panel, lienzo, tabs, resultados, móvil). Salió del
   <style> de resources/views/nest.blade.php (2026-08-23): 46 KB que la página
   cargaba en cada visita; como archivo queda cacheado por asset_v(). */
/* ── Layout general ── */
.nt-wrap {
    max-width: 1500px;
    margin: 0 auto;
    /* padding-top 16px: la tarjeta arranca en 64(nav)+16 = 80px, justo en su
       punto sticky (top:80px) → la herramienta aparece llena de inmediato y
       no salta al hacer scroll. El padding inferior deja aire para el catálogo. */
    padding: 16px 5% 80px;
    position: relative; z-index: 1;
}
/* Encabezado DENTRO del lienzo (sobre los tabs de motor): título + subtítulo
   al costado en una sola fila. Si el subtítulo no entra en su ancho, se desliza
   de derecha a izquierda (marquee, ver abajo). Sin "condensar al scroll" — ya no
   hace falta porque vive dentro de la tarjeta y no empuja la herramienta. */
.nt-canvas-head {
    display: flex; align-items: baseline; gap: 12px; flex-wrap: nowrap;
    min-width: 0; padding: 15px 18px; flex-shrink: 0;
}
.nt-canvas-head .nt-ch-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(18px,2vw,23px); font-weight: 800;
    letter-spacing: -0.5px; color: var(--text); margin: 0;
    white-space: nowrap; flex: 0 0 auto;
}
.nt-canvas-head .nt-ch-title span { color: var(--orange); }
/* Ventana de ancho definido para el subtítulo: recorta el texto cuando se
   desliza. La clase .is-marquee la pone el JS solo si el texto no entra. */
.nt-canvas-head .nt-ch-subwrap {
    flex: 1 1 auto; min-width: 0; overflow: hidden; position: relative;
}
.nt-canvas-head .nt-ch-sub {
    display: inline-block; white-space: nowrap;
    font-size: 13px; color: var(--muted); margin: 0; padding-left: 0;
}
/* Si el subtítulo NO entra en su ventana, se desliza de derecha a izquierda
   (marquee) con desvanecido suave en los bordes. Si cabe, queda fijo. */
.nt-canvas-head .nt-ch-subwrap.is-marquee {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}
.nt-canvas-head .nt-ch-subwrap.is-marquee .nt-ch-sub {
    padding-left: 100%;                       /* arranca fuera, por la derecha */
    animation: nt-hdr-marquee 24s linear infinite;
}
.nt-canvas-head .nt-ch-subwrap.is-marquee:hover .nt-ch-sub { animation-play-state: paused; }
@keyframes nt-hdr-marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-100%); }
}
.nt-canvas-head .lh-badge { flex: 0 0 auto; }
/* Movimiento reducido: sin marquee; el texto se recorta con … dentro de la ventana. */
@media (prefers-reduced-motion: reduce) {
    .nt-canvas-head .nt-ch-subwrap.is-marquee .nt-ch-sub {
        padding-left: 0; animation: none;
        display: block; max-width: 100%;
        overflow: hidden; text-overflow: ellipsis;
    }
}

/* ── Layout dos columnas ── */
/* minmax(0,1fr) (no 1fr): permite que la columna del lienzo se encoja por
   debajo de su min-content. Sin esto, el contenido nowrap (subtítulo, barra
   de herramientas) revienta la columna más allá del contenedor de 1500px y
   todo se sale por la derecha (grid blowout). */
.nt-layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 20px;
    align-items: stretch;
}

/* ── Panel izquierdo ── */
.nt-file-panel {
    background: var(--bg3); border: 1px solid var(--border);
    border-radius: var(--radius-card); padding: 20px;
    align-self: start;
    /* Sin scroll interno: el panel fluye a su alto natural. Como el lienzo
       (.nt-main) es sticky, al hacer scroll el panel sube y el lienzo se queda
       fijo en su lugar. */
}
[data-theme="light"] .nt-file-panel { background: var(--bg2); box-shadow: 0 2px 12px var(--shadow); }

.panel-label {
    display: block; font-family: 'Outfit', sans-serif;
    font-size: 11px; font-weight: 700; color: var(--muted);
    letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px;
}
/* Label con ícono informativo al costado */
.nt-panel-label-row { display: flex; align-items: center; gap: 7px; }
.nt-info-i {
    display: inline-flex; align-items: center; justify-content: center;
    width: 15px; height: 15px; border-radius: 50%;
    border: 1px solid var(--muted); color: var(--muted);
    font-size: 10px; font-weight: 700; font-style: normal;
    font-family: 'Outfit', sans-serif; line-height: 1;
    text-transform: none; letter-spacing: 0; cursor: help;
    flex: 0 0 auto; transition: border-color .15s, color .15s;
}
.nt-info-i:hover, .nt-info-i:focus { border-color: var(--orange); color: var(--orange); outline: none; }
.panel-section { margin-bottom: 20px; }
.panel-section:last-child { margin-bottom: 0; }
.panel-divider {
    border: none; border-top: 1px solid var(--border); margin: 20px 0;
}

/* ── Upload zone ── */
.upload-zone {
    border: 2px dashed var(--border); border-radius: var(--radius-card);
    padding: 24px 16px; text-align: center; cursor: pointer;
    transition: all .2s; background: var(--bg2);
}
[data-theme="light"] .upload-zone { background: var(--bg3); }
.upload-zone:hover, .upload-zone.drag-over {
    border-color: var(--orange); background: color-mix(in srgb, var(--orange) 5%, transparent);
}
.upload-icon { font-size: 28px; margin-bottom: 8px; }
.upload-text { font-size: 13px; color: var(--text); font-weight: 600; margin: 0 0 4px; }
.upload-sub  { font-size: 12px; color: var(--muted); margin: 0 0 8px; }
.upload-btn-link {
    background: none; border: none; color: var(--orange);
    cursor: pointer; font-size: 12px; text-decoration: underline; padding: 0;
}
.fmt-row {
    display: flex; gap: 4px; flex-wrap: wrap; justify-content: center; margin-top: 10px;
}
.fmt-tag {
    font-size: 10px; font-weight: 700; font-family: 'Outfit', sans-serif;
    padding: 2px 7px; border-radius: var(--radius-pill); letter-spacing: .4px;
}
.fmt-tag.svg { background: color-mix(in srgb, var(--orange) 12%, transparent); color: var(--orange); }
.fmt-tag.dxf { background: color-mix(in srgb, var(--cyan) 12%, transparent); color: var(--cyan); }
.fmt-tag.pdf { background: color-mix(in srgb, var(--purple) 12%, transparent); color: var(--purple); }
.fmt-tag.soon { background: var(--bg3); color: var(--muted); opacity: .6; }
[data-theme="light"] .fmt-tag.soon { background: var(--bg); }

/* ── File info bar ── */
.nt-file-info {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 12px; margin-top: 8px;
    background: color-mix(in srgb, var(--orange) 7%, transparent); border: 1px solid color-mix(in srgb, var(--orange) 20%, transparent);
    border-radius: var(--radius-button);
}
.fi-name  { font-size: 12px; color: var(--text); font-weight: 600; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-clear { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 0; line-height: 1; }
.fi-clear:hover { color: var(--danger); }

/* ── Mini-preview ── */
.nt-svg-preview-wrap { position: relative; margin-top: 10px; }
.nt-svg-preview {
    height: 160px; border-radius: var(--radius-button);
    border: 1px solid var(--border);
    background-color: #ffffff;
    background-image:
        linear-gradient(rgba(0,0,0,0.055) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,0,0,0.055) 1px, transparent 1px);
    background-size: 20px 20px;
    overflow: hidden; position: relative; cursor: grab; user-select: none;
}
.nt-svg-preview.grabbing { cursor: grabbing; }
.nt-svg-preview svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: 0 0; }

/* Overlay "agregar otro" — mismo estilo que la zona de carga inicial. Hermano del
   preview (sobrevive a injectSvg). Visible al pasar el cursor / arrastrar, solo con
   el editor activo (la clase nt-ed-addmore la pone nest-editor.js sobre el wrap). */
.nt-ed-addmore-ov {
    position: absolute; inset: 0; z-index: 6;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
    padding: 10px; box-sizing: border-box; text-align: center;
    background: color-mix(in srgb, var(--bg2) 88%, transparent);
    backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
    border: 2px dashed var(--orange); border-radius: var(--radius-button);
    opacity: 0; transition: opacity .15s; pointer-events: none;
}
.nt-svg-preview-wrap.nt-ed-addmore { cursor: pointer; }
.nt-svg-preview-wrap.nt-ed-addmore:hover .nt-ed-addmore-ov,
.nt-svg-preview-wrap.nt-ed-addmore.nt-ed-drop .nt-ed-addmore-ov { opacity: 1; }
.nt-am-ic   { font-size: 24px; line-height: 1; }
.nt-am-text { font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 13px; color: var(--orange); margin: 0; }
.nt-am-sub  { font-size: 11px; color: var(--muted); margin: 0; }
.nt-ed-addmore-ov .fmt-row { margin-top: 3px; }

/* ── Metadata tags ── */
.nt-meta { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.pm-tag {
    font-size: 11px; padding: 3px 9px; border-radius: var(--radius-pill);
    background: var(--bg3); color: var(--muted);
    border: 1px solid var(--border);
    font-family: 'Outfit', sans-serif; font-weight: 600;
}
.pm-svg { background: color-mix(in srgb, var(--orange) 10%, transparent);  color: var(--orange); border-color: color-mix(in srgb, var(--orange) 20%, transparent); }
.pm-dxf { background: color-mix(in srgb, var(--cyan) 10%, transparent);  color: #22d3ee;       border-color: color-mix(in srgb, var(--cyan) 20%, transparent); }
.pm-pdf { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--danger);       border-color: color-mix(in srgb, var(--danger) 20%, transparent); }
/* Metadata colapsable: el grupo secundario usa display:contents para que sus
   tags participen del flex de #ntMeta (envuelven uno a uno). [hidden] lo oculta. */
.pm-more { display: contents; }
.pm-more[hidden] { display: none; }
.pm-more-btn {
    flex: 0 0 100%;                /* siempre su propia fila, ancho completo */
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    font-size: 11px; padding: 4px 9px; border-radius: var(--radius-pill);
    background: transparent; color: var(--muted);
    border: 1px dashed var(--border); cursor: pointer;
    font-family: 'Outfit', sans-serif; font-weight: 600; line-height: 1.4;
}
.pm-more-btn:hover { color: var(--orange); border-color: var(--orange); background: color-mix(in srgb, var(--orange) 8%, transparent); }

/* ── Área de trabajo ── */
.nt-wa-presets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 5px; margin-bottom: 10px; }
.preset-btn {
    padding: 5px 4px; border-radius: var(--radius-input);
    border: 1px solid var(--border); background: var(--bg2);
    color: var(--muted); font-size: 11px; font-family: 'Outfit', sans-serif;
    font-weight: 600; cursor: pointer; transition: all .2s; white-space: nowrap;
    text-align: center;
}
[data-theme="light"] .preset-btn { background: var(--bg3); }
.preset-btn:hover, .preset-btn.active {
    border-color: var(--orange); color: var(--orange); background: color-mix(in srgb, var(--orange) 7%, transparent);
}
.nt-wa-custom { display: flex; align-items: center; gap: 5px; }
.wa-lbl { font-size: 10px; font-weight: 700; color: var(--muted); letter-spacing: .05em; }
.wa-input {
    width: 58px; padding: 5px 6px; background: var(--bg2);
    border: 1px solid var(--border); border-radius: var(--radius-input);
    color: var(--text); font-size: 13px; text-align: center;
    font-family: 'DM Sans', sans-serif; transition: border-color .2s;
    -moz-appearance: textfield;
}
.wa-input::-webkit-inner-spin-button,
.wa-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
[data-theme="light"] .wa-input { background: var(--bg3); }
.wa-input:focus { outline: none; border-color: var(--orange); }
.wa-sep { color: var(--muted); font-size: 13px; padding: 0 1px; }
.wa-unit { font-size: 11px; color: var(--muted); margin-left: 2px; }

/* ── Controles contextuales de tab ── */
.nt-tab-controls { display: none; }
.nt-tab-controls.active { display: block; }

/* ── Inputs estilo generator (igual que nesting viejo) ── */
.input-group { margin-bottom: 14px; }
.input-label { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.input-label span:first-child { font-size: 12px; color: var(--muted); }
.input-value { font-size: 12px; color: var(--orange); font-family: 'Outfit', sans-serif; font-weight: 700; }
.gen-range { width: 100%; accent-color: var(--orange); margin-bottom: 6px; cursor: pointer; }
.input-row { display: flex; align-items: center; gap: 6px; }
.gen-input {
    flex: 1; padding: 6px 8px;
    background: var(--bg2); border: 1px solid var(--border);
    border-radius: var(--radius-input); color: var(--text); font-size: 13px;
    font-family: 'DM Sans', sans-serif;
}
[data-theme="light"] .gen-input { background: var(--bg3); }
.gen-input:focus { outline: none; border-color: var(--orange); }
.unit-lbl { font-size: 12px; color: var(--muted); white-space: nowrap; }

/* ── Rotaciones ── */
.rot-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.rot-btn {
    padding: 5px 10px; border-radius: var(--radius-input);
    border: 1px solid var(--border); background: var(--bg2);
    color: var(--muted); font-size: 11px; font-family: 'Outfit', sans-serif;
    font-weight: 600; cursor: pointer; transition: all .2s;
}
[data-theme="light"] .rot-btn { background: var(--bg3); }
.rot-btn:hover  { border-color: var(--orange); color: var(--orange); }
.rot-btn.active { border-color: var(--orange); color: var(--orange); background: color-mix(in srgb, var(--orange) 10%, transparent); }

/* ── Botones de acción ── */
.btn-generate {
    width: 100%; padding: 11px; margin-bottom: 8px;
    background: var(--orange); border: none; border-radius: var(--radius-button);
    color: white; font-size: 13px; font-weight: 700;
    font-family: 'Outfit', sans-serif; cursor: pointer; transition: all .2s;
}
.btn-generate:hover:not(:disabled) { background: var(--orange2); box-shadow: 0 4px 14px color-mix(in srgb, var(--orange) 30%, transparent); }
.btn-generate:disabled { opacity: 0.4; cursor: not-allowed; }
/* Optimizar deshabilitado: AZUL CLARO visible (no casi-invisible). El "siempre a
   la vista" lo da el play flotante (FAB) sobre el lienzo; no se hace sticky aquí
   porque hay botón de reset + stats DEBAJO en el DOM y quedaría flotando raro. */
.nt-file-panel .btn-generate:disabled { opacity: 1; color: var(--orange);
    background: color-mix(in srgb, var(--orange) 16%, transparent);
    border: 1px solid color-mix(in srgb, var(--orange) 38%, transparent); }
.nt-file-panel input:disabled, .nt-file-panel button:disabled { opacity: 0.38; cursor: not-allowed; }
.btn-stop {
    width: 100%; padding: 10px; margin-bottom: 8px;
    background: color-mix(in srgb, var(--danger) 10%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent);
    border-radius: var(--radius-button); color: var(--danger);
    font-size: 13px; font-weight: 700;
    font-family: 'Outfit', sans-serif; cursor: pointer; transition: all .2s;
}
.btn-stop:hover { background: color-mix(in srgb, var(--danger) 18%, transparent); }
/* Botón secundario: empezar de nuevo (reset a editor vacío + cargar otro archivo) */
.btn-reset {
    width: 100%; padding: 9px; margin-bottom: 8px;
    background: transparent; border: 1px solid var(--border);
    border-radius: var(--radius-button); color: var(--muted);
    font-size: 12.5px; font-weight: 600;
    font-family: 'Outfit', sans-serif; cursor: pointer; transition: all .15s;
}
.btn-reset:hover { border-color: var(--orange); color: var(--orange); }

/* ── FAB flotante: atajo a "Optimizar", flotando en la esquina inferior
   derecha SOBRE el canvas (no fijo a la pantalla). Translúcido; al pasar el
   mouse se pinta del azul del optimizador. Solo aparece cuando se puede
   optimizar. */
.nt-fab {
    position: absolute; bottom: 16px; right: 16px; z-index: 8;
    width: 58px; height: 58px; border-radius: 50%;
    display: none; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--orange) 55%, transparent);
    border: 1px solid color-mix(in srgb, var(--orange) 45%, transparent);
    color: #fff; cursor: pointer; opacity: .55;
    box-shadow: 0 6px 18px rgba(0,0,0,.18);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    transition: opacity .2s ease, background-color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.nt-fab.show { display: flex; animation: nt-fab-in .25s ease-out; }
.nt-fab:hover {
    opacity: 1; background: var(--orange); transform: scale(1.07);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--orange) 45%, transparent);
}
.nt-fab svg { width: 26px; height: 26px; margin-left: 3px; }
@keyframes nt-fab-in { from { opacity: 0; transform: scale(.6); } to { opacity: .55; transform: scale(1); } }
@media (max-width: 600px) {
    .nt-fab { width: 52px; height: 52px; right: 14px; bottom: 14px; }
    .nt-fab svg { width: 23px; height: 23px; }
}

/* "Volver al editor" — pastilla flotante arriba a la derecha. Solo aparece cuando
   hay un resultado (mesas optimizadas): limpia las mesas/descarga y reabre el editor
   con las piezas intactas para retocar antes de volver a optimizar. */
.nt-fab-back {
    position: absolute; top: 16px; right: 16px; z-index: 8;
    display: none; align-items: center; gap: 7px;
    padding: 9px 15px; border-radius: 999px;
    background: color-mix(in srgb, var(--bg2) 90%, transparent);
    border: 1px solid var(--border); color: var(--text);
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 13px;
    cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.18);
    -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    transition: border-color .15s, color .15s, transform .15s, box-shadow .2s;
}
.nt-fab-back.show { display: inline-flex; animation: nt-back-in .25s ease-out; }
.nt-fab-back:hover { border-color: var(--orange); color: var(--orange); transform: translateY(-1px);
    box-shadow: 0 10px 26px color-mix(in srgb, var(--orange) 30%, transparent); }
.nt-fab-back svg { width: 16px; height: 16px; }
@keyframes nt-back-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) {
    .nt-fab-back { top: 12px; right: 12px; padding: 8px 11px; }
    .nt-fab-back span { display: none; }   /* móvil: solo el icono, no tapa el lienzo */
}
.btn-dl {
    width: 100%; padding: 10px; margin-bottom: 8px;
    background: transparent; border: 1px solid var(--border);
    border-radius: var(--radius-button); color: var(--muted);
    font-size: 13px; font-weight: 600;
    font-family: 'Outfit', sans-serif; cursor: pointer; transition: all .2s;
}
.btn-dl:hover:not(:disabled) { border-color: var(--orange); color: var(--orange); }
.btn-dl:disabled { opacity: 0.35; cursor: not-allowed; }

/* ── Descarga de resultado con selector de formato ──
   Bloque destacado post-éxito: card con icono, título limpio y formatos
   como chips refinados. */
[id$="DlResult"] {
    padding: 16px;
    margin-top: 10px;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--orange) 9%, var(--bg2)) 0%,
        var(--bg2) 65%);
    border: 1px solid color-mix(in srgb, var(--orange) 35%, var(--border));
    border-radius: var(--radius-card);
    animation: nt-dl-attract 1.8s ease-out 1;
}
[data-theme="light"] [id$="DlResult"] {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--orange) 10%, var(--bg3)) 0%,
        var(--bg3) 65%);
}
/* Pulso suave al aparecer — atrae la atención sin marear */
@keyframes nt-dl-attract {
    0%   { box-shadow: 0 0 0 0   color-mix(in srgb, var(--orange) 45%, transparent); }
    70%  { box-shadow: 0 0 0 12px color-mix(in srgb, var(--orange) 0%,  transparent); }
    100% { box-shadow: 0 0 0 0   transparent; }
}
.dl-result-header {
    display: flex; align-items: center; gap: 12px;
    margin-bottom: 14px;
}
.dl-result-icon {
    width: 32px; height: 32px;
    padding: 6px;
    border-radius: var(--radius-button);
    background: color-mix(in srgb, var(--orange) 18%, transparent);
    color: var(--orange);
    flex-shrink: 0;
}
.dl-result-text {
    display: flex; flex-direction: column;
    line-height: 1.2; min-width: 0;
}
.dl-result-title {
    font-size: 15px; font-weight: 800;
    color: var(--text);
    font-family: 'Outfit', sans-serif;
    letter-spacing: .01em;
}
.dl-result-sub {
    font-size: 11px;
    color: var(--muted);
    margin-top: 2px;
    font-weight: 500;
}
.dl-fmt-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dl-fmt-btn {
    position: relative;
    padding: 13px 6px;
    border-radius: var(--radius-button);
    border: 1.5px solid color-mix(in srgb, var(--orange) 40%, var(--border));
    background: var(--bg2);
    color: var(--orange);
    font-size: 13px; font-weight: 800;
    letter-spacing: .04em;
    font-family: 'Outfit', sans-serif;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .2s ease,
                border-color .2s ease, background-color .2s ease,
                color .2s ease;
    text-align: center;
    overflow: hidden;
}
[data-theme="light"] .dl-fmt-btn { background: var(--bg3); }
.dl-fmt-btn::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(135deg, var(--orange), var(--orange2));
    opacity: 0; transition: opacity .2s ease;
    z-index: 0;
}
.dl-fmt-btn > * { position: relative; z-index: 1; }
.dl-fmt-btn span { position: relative; z-index: 1; }
.dl-fmt-btn:hover {
    color: white;
    border-color: var(--orange);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px color-mix(in srgb, var(--orange) 38%, transparent);
}
.dl-fmt-btn:hover::before { opacity: 1; }
.dl-fmt-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px color-mix(in srgb, var(--orange) 25%, transparent);
}

/* ── Panel derecho ──
   Sticky + altura de viewport para que el preview siempre quepa en pantalla
   y no crezca para igualar al menú izquierdo (que puede ser muy largo). */
.nt-main {
    display: flex; flex-direction: column; min-width: 0;
    position: sticky; top: 80px; align-self: start;
    height: calc(100vh - 100px);
}
.nt-card {
    flex: 1; display: flex; flex-direction: column;
    background: var(--bg3); border: 1px solid var(--border);
    border-radius: var(--radius-card); overflow: hidden;
    position: relative; /* contenedor del FAB flotante sobre el canvas */
    min-height: 0; /* permite que flex:1 + overflow:hidden se respeten dentro del contenedor de altura fija */
}
[data-theme="light"] .nt-card { background: var(--bg2); box-shadow: 0 2px 12px var(--shadow); }

.tab-nav {
    display: flex; gap: 0; flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    background: var(--bg3);
}
[data-theme="light"] .tab-nav { background: var(--bg2); }
.tab-btn {
    padding: 13px 20px; border: none; background: transparent;
    font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 600;
    color: var(--muted); cursor: pointer; white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: color .2s, background .2s, border-color .2s;
}
.tab-btn:hover { color: var(--text); background: rgba(255,255,255,0.04); }
[data-theme="light"] .tab-btn:hover { background: rgba(0,0,0,0.03); }
.tab-btn.active { color: var(--orange); border-bottom-color: var(--orange); }
.tab-btn .wip {
    display: inline-block; font-size: 9px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .4px; padding: 1px 5px;
    border-radius: var(--radius-pill); background: color-mix(in srgb, var(--orange) 12%, transparent); color: var(--orange);
    margin-left: 5px; vertical-align: middle; line-height: 16px;
}
.tab-content { display: none; flex-direction: column; flex: 1; position: relative; }
.tab-content.active { display: flex; }

/* ── Canvas resultado ── */
.nt1-canvas {
    flex: 1; position: relative;
    overflow: hidden; cursor: grab;
    /* Modo oscuro: área de trabajo GRIS CLARO suave (no blanco intenso) para que
       los SVG fuera del tablero se noten; el tablero blanco igual resalta. */
    background-color: #aab4c3;
    background-image: repeating-linear-gradient(
        45deg, transparent, transparent 10px,
        rgba(0,0,0,0.035) 10px, rgba(0,0,0,0.035) 20px
    );
}
[data-theme="light"] .nt1-canvas {
    background-color: transparent;
    background-image: repeating-linear-gradient(
        45deg, transparent, transparent 10px,
        rgba(0,0,0,0.02) 10px, rgba(0,0,0,0.02) 20px
    );
}
.nt1-canvas.grabbing { cursor: grabbing; }
.nt1-canvas svg { display: block; transform-origin: 0 0; transition: none; }

/* ── Preview header del canvas ── */
.nt-preview-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 14px 20px; border-bottom: 1px solid var(--border); flex-wrap: wrap; gap: 8px;
}
.nt-preview-title { font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 700; color: var(--text); }
.nt-preview-info  { font-size: 12px; color: var(--muted); }
/* Modo edición: la cabecera muestra SOLO las herramientas (sin título) + zoom a la derecha */
.nt-preview-header.nt-editing { padding: 6px 12px; }
.nt-preview-header.nt-editing .nt-preview-title { display: none; }
.zoom-controls { display: flex; gap: 4px; }
.zoom-btn {
    width: 28px; height: 28px; border-radius: var(--radius-input);
    border: 1px solid var(--border); background: var(--bg2);
    color: var(--text); font-size: 15px; line-height: 1;
    cursor: pointer; transition: all .15s;
    display: flex; align-items: center; justify-content: center;
}
.zoom-btn:hover { border-color: var(--orange); color: var(--orange); }
[data-theme="light"] .zoom-btn { background: var(--bg3); }

/* ── Progreso ── */
.nt1-progress-wrap { padding: 10px 20px 0; }
.nt1-progress-bar {
    height: 6px; border-radius: var(--radius-pill);
    background: var(--border); overflow: hidden; margin-bottom: 6px;
}
.nt1-progress-fill {
    height: 100%; border-radius: var(--radius-pill);
    background: var(--orange);
    transition: width .3s ease, background-color .4s ease;
    position: relative;
    overflow: hidden;
}
/* Shimmer animado — rayas diagonales que recorren la barra dando
   sensación de "trabajando". Se activa con clase .working. */
.nt1-progress-fill.working::after {
    content: ''; position: absolute; inset: 0;
    background-image: linear-gradient(
        45deg,
        rgba(255,255,255,0.18) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255,255,255,0.18) 50%,
        rgba(255,255,255,0.18) 75%,
        transparent 75%
    );
    background-size: 18px 18px;
    animation: nt7-progress-stripes .8s linear infinite;
}
@keyframes nt7-progress-stripes {
    from { background-position: 0 0; }
    to   { background-position: 18px 0; }
}
/* Pulsing — efecto "respirando" para fase de preparación cuando el
   motor está cargando y aún no hay progreso visible. */
.nt1-progress-fill.preparing {
    animation: nt7-progress-pulse 1.4s ease-in-out infinite;
}
@keyframes nt7-progress-pulse {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}
.nt1-progress-lbl {
    font-size: 11px; color: var(--muted);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ── Estado vacío ── */
.preview-empty {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    color: var(--muted); text-align: center; padding: 20px;
}
.preview-empty .ei { font-size: 40px; margin-bottom: 12px; opacity: .5; }
.preview-empty p { font-size: 13px; margin: 0; }

/* ── Error ── */
.nt1-error {
    display: none; margin: 8px 16px 12px; padding: 10px 14px;
    background: color-mix(in srgb, var(--danger) 10%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
    border-radius: var(--radius-input); font-size: 12px; color: var(--danger);
}
.nt1-error.visible { display: block; }

/* ── Aviso de validación de entrada (al cargar archivo) ── */
.nt-input-warn {
    position: relative;   /* para la × de cerrar */
    margin-top: 10px; padding: 11px 13px;
    border-radius: var(--radius-input);
    font-size: 12px; line-height: 1.5;
    border: 1px solid transparent;
}
.nt-input-warn .niw-x {
    position: absolute; top: 5px; right: 7px;
    width: 20px; height: 20px; line-height: 18px; text-align: center;
    font-size: 17px; cursor: pointer; border-radius: var(--radius-button);
    color: var(--muted); opacity: .55; user-select: none;
}
.nt-input-warn .niw-x:hover { opacity: 1; background: rgba(0,0,0,.08); }
.nt-input-warn .niw-title { padding-right: 20px; }   /* no chocar con la × */
.nt-input-warn.warn {   /* naranja fuerte: avisa pero deja pasar */
    background: rgba(249, 115, 22, 0.13);
    border: 1px solid rgba(249, 115, 22, 0.45);
    border-left: 4px solid #f97316;
    color: var(--text);
}
.nt-input-warn.block {  /* rojo: caso sin solución (resultado vacío) */
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
    border-left: 4px solid var(--danger);
    color: var(--text);
}
.nt-input-warn .niw-title { font-weight: 700; font-family: 'Outfit', sans-serif; display: flex; align-items: center; gap: 6px; margin-bottom: 3px; font-size: 13px; }
.nt-input-warn.warn  .niw-title { color: #ea580c; }
[data-theme="dark"] .nt-input-warn.warn .niw-title { color: #fb923c; }
.nt-input-warn.block .niw-title { color: var(--danger); }
.nt-input-warn .niw-action {
    display: inline-flex; align-items: center; gap: 5px; margin-top: 8px;
    padding: 6px 12px; border-radius: var(--radius-pill);
    background: var(--orange); color: #fff; text-decoration: none;
    font-family: 'Outfit', sans-serif; font-size: 11.5px; font-weight: 700;
    transition: all .15s;
}
.nt-input-warn .niw-action:hover { background: var(--orange2); transform: translateY(-1px); }

/* ── Coming soon ── */
.nt-coming {
    flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 80px 20px; text-align: center; gap: 12px;
}
.nt-coming-icon  { font-size: 48px; opacity: .4; }
.nt-coming-title {
    font-family: 'Outfit', sans-serif; font-size: 20px;
    font-weight: 800; color: var(--text); margin: 0;
}
.nt-coming-desc  { font-size: 14px; color: var(--muted); max-width: 380px; line-height: 1.6; margin: 0; }
.nt-coming-badge {
    font-size: 11px; font-weight: 700; font-family: 'Outfit', sans-serif;
    padding: 3px 10px; border-radius: var(--radius-pill); letter-spacing: .5px;
    background: color-mix(in srgb, var(--orange) 10%, transparent); color: var(--orange);
    border: 1px solid color-mix(in srgb, var(--orange) 20%, transparent);
}

/* ── Palanca mm / in ── */
.nt-unit-toggle {
    display: flex; border: 1px solid var(--border); border-radius: var(--radius-button); overflow: hidden;
}
.nt-unit-btn {
    padding: 3px 10px; border: none; background: transparent;
    font-size: 11px; font-weight: 700; font-family: 'Outfit', sans-serif;
    color: var(--muted); cursor: pointer; transition: all .15s; line-height: 1.6;
}
.nt-unit-btn.active { background: var(--orange); color: #fff; }
.nt-unit-btn:not(.active):hover { background: color-mix(in srgb, var(--orange) 10%, transparent); color: var(--orange); }

/* ── Tutorial / demo (onboarding) ──
   Dos piezas:
   1) Overlay centrado con play grande sobre la mesa (visitas 1-2).
   2) Link discreto al pie, alineado derecha (visita 3+) que reabre (1). */

/* Wrap del canvas: contexto de posicionamiento para el overlay (que es
   hermano del canvas, no hijo — el motor borra el innerHTML del canvas). */
.nt-canvas-wrap {
    position: relative; flex: 1; min-height: 0;
    display: flex; flex-direction: column;
}

/* C2 — navegador flotante de mesas (vertical, derecha-centro del canvas) */
/* Consejos flotantes (rotan + aparecen suave) debajo del topbar */
.nt-tips {
    position: absolute; top: 12px; left: 12px; right: auto;   /* izquierda: el chip de medidas va a la derecha */
    transform: translateY(-8px);
    z-index: 9; max-width: min(58%, 300px);
    display: flex; align-items: flex-start; gap: 9px;
    padding: 8px 13px; border-radius: var(--radius-card);
    background: color-mix(in srgb, var(--bg2) 88%, transparent);
    border: 1px solid var(--border); box-shadow: 0 4px 18px var(--shadow);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    font-family: 'DM Sans', sans-serif; font-size: 12.5px; color: var(--text); line-height: 1.35; text-align: left;
    opacity: 0; pointer-events: none;
    transition: opacity .9s ease, transform .9s ease;   /* aparición suave */
}
.nt-tips.show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.nt-tips-ic  { font-size: 15px; flex: 0 0 auto; line-height: 1; }
.nt-tips-txt { flex: 1; }
/* Checkbox 💡 en el header (junto a +/−/⊙) para activar/desactivar consejos */
.nt-tips-chk {
    display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
    padding: 0 6px; font-size: 14px; user-select: none; opacity: .85;
}
.nt-tips-chk:hover { opacity: 1; }
.nt-tips-chk input { width: 13px; height: 13px; cursor: pointer; accent-color: var(--purple); }

.nt-mesa-nav {
    position: absolute; right: 12px; top: 50%;
    transform: translateY(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    z-index: 18;
    background: color-mix(in srgb, var(--bg2) 88%, transparent);
    border: 1px solid var(--border); border-radius: var(--radius-card);
    padding: 7px 6px; box-shadow: 0 4px 16px var(--shadow);
    backdrop-filter: blur(5px);
}
.nt-mesa-fab {
    width: 36px; height: 36px; border-radius: var(--radius-button);
    border: 1px solid var(--border); background: var(--bg3); color: var(--text);
    font-size: 14px; cursor: pointer; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s, color .15s, transform .08s;
}
.nt-mesa-fab:hover:not(:disabled) { background: var(--orange); color: #fff; border-color: var(--orange); }
.nt-mesa-fab:active:not(:disabled) { transform: scale(.9); }
.nt-mesa-fab:disabled { opacity: .3; cursor: default; }
.nt-mesa-lbl {
    display: flex; flex-direction: column; align-items: center; line-height: 1.05;
    font-family: 'Outfit', sans-serif; color: var(--text); user-select: none;
}
.nt-mesa-lbl small { font-size: 8.5px; letter-spacing: .6px; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.nt-mesa-lbl b { font-size: 14px; font-weight: 800; white-space: nowrap; }
/* Separador + botón "volver a las mesas" dentro de la navegación de mesas */
.nt-mesa-sep { width: 24px; height: 1px; background: var(--border); margin: 2px 0; }
.nt-mesa-back { font-size: 16px; color: var(--orange); }
.nt-mesa-back:hover:not(:disabled) { background: var(--orange); color: #fff; border-color: var(--orange); }

/* (1) Overlay centrado */
.nt-demo-overlay {
    display: none;  /* lo activa JS (clase .show) */
    position: absolute; inset: 0; z-index: 6;
    flex-direction: column; align-items: center; justify-content: center;
    pointer-events: none;  /* la mesa sigue interactiva; solo el cluster captura clicks */
}
.nt-demo-overlay.show { display: flex; }
.nt-demo-cluster {
    pointer-events: auto;
    display: flex; flex-direction: column; align-items: center; gap: 10px;
    padding: 22px 28px; border-radius: var(--radius-card);
    background: color-mix(in srgb, var(--bg2) 82%, transparent);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    border: 1px solid var(--border);
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    animation: ntDemoIn .35s ease;
}
@keyframes ntDemoIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.nt-demo-play {
    width: 58px; height: 58px; border-radius: 50%;
    background: var(--purple); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: #fff; box-shadow: 0 6px 18px color-mix(in srgb, var(--purple) 45%, transparent);
    transition: transform .15s, box-shadow .15s;
}
.nt-demo-play:hover { transform: scale(1.07); box-shadow: 0 8px 24px color-mix(in srgb, var(--purple) 60%, transparent); }
.nt-demo-play:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.nt-demo-play svg { width: 24px; height: 24px; margin-left: 3px; }
.nt-demo-label {
    font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 700;
    color: var(--text); text-align: center; line-height: 1.2;
}
.nt-demo-foot { display: flex; align-items: center; gap: 12px; margin-top: 2px; }

/* (2) Botón flotante en la esquina inferior derecha del área de preview.
   position:absolute sobre .tab-content (que es relative) → siempre visible
   sin scroll, porque el preview es el bloque fijo de la pantalla. */
.nt-demo-bar {
    display: none;  /* lo activa JS */
    position: absolute; left: 16px; bottom: 16px; z-index: 7;
    align-items: center; gap: 10px;
}
.nt-demo-bar.show { display: flex; }
.nt-demo-link {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 15px; border-radius: var(--radius-pill);
    background: var(--purple);
    border: none; color: #fff;
    font-family: 'Outfit', sans-serif; font-size: 12.5px; font-weight: 700;
    cursor: pointer; transition: all .15s;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--purple) 40%, transparent);
}
.nt-demo-link:hover { transform: translateY(-1px); box-shadow: 0 6px 18px color-mix(in srgb, var(--purple) 55%, transparent); }
.nt-demo-link:disabled { opacity: .55; cursor: not-allowed; }
.nt-demo-play-mini { font-size: 10px; line-height: 1; }

/* Compartido por ambas piezas */
.nt-demo-yt {
    font-size: 12px; font-weight: 600; color: var(--purple);
    text-decoration: none; display: inline-flex; align-items: center; gap: 4px;
}
.nt-demo-yt:hover { text-decoration: underline; }
.nt-demo-dismiss {
    font-size: 11.5px; color: var(--muted); background: none; border: none;
    cursor: pointer; padding: 0; text-decoration: underline;
}
.nt-demo-dismiss:hover { color: var(--text); }

/* Instrucciones de uso — se muestran al pulsar play, antes del ejemplo. */
.nt-demo-steps { max-width: 380px; gap: 14px; }
.nt-demo-steps-title {
    font-family: 'Outfit', sans-serif; font-size: 18px; font-weight: 800;
    color: var(--text); text-align: center; line-height: 1.2;
}
.nt-demo-steps-sub {
    font-family: 'DM Sans', sans-serif; font-size: 12.5px; line-height: 1.45;
    color: var(--muted); text-align: center;
}
.nt-demo-steps-benefit {
    align-self: stretch; text-align: center;
    font-family: 'DM Sans', sans-serif; line-height: 1.4;
    background: color-mix(in srgb, var(--purple) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--purple) 25%, transparent);
    border-radius: var(--radius-card); padding: 9px 12px;
}
.nt-benefit-lead  { display: block; color: var(--muted); font-size: 12px; }
.nt-benefit-money { display: block; margin-top: 4px; font-weight: 800; color: var(--purple); font-size: 13px; }

/* ── Modo oscuro: el morado del tema (--purple = #a78bfa) es pastel y deja el
   texto/ícono BLANCO con poco contraste. Usamos un morado más profundo en los
   elementos con texto blanco y reforzamos la tarjeta para que resalte sobre
   el canvas oscuro. ── */
[data-theme="dark"] .nt-demo-cluster {
    background: color-mix(in srgb, var(--bg3) 92%, transparent);
    border-color: color-mix(in srgb, var(--purple) 38%, transparent);
}
[data-theme="dark"] .nt-demo-play,
[data-theme="dark"] .nt-demo-link,
[data-theme="dark"] .nt-demo-start,
[data-theme="dark"] .nt-step-n { background: #7c3aed; }
[data-theme="dark"] .nt-demo-steps-benefit {
    background: color-mix(in srgb, #7c3aed 20%, transparent);
    border-color: color-mix(in srgb, #7c3aed 48%, transparent);
}
[data-theme="dark"] .nt-benefit-money { color: #c4b5fd; }
.nt-demo-steps-list {
    list-style: none; margin: 2px 0 0; padding: 0; align-self: stretch;
    display: flex; flex-direction: column; gap: 12px;
}
.nt-demo-steps-list li {
    display: flex; align-items: flex-start; gap: 11px;
    font-family: 'DM Sans', sans-serif; font-size: 14px; line-height: 1.45;
    color: var(--text); text-align: left;
}
.nt-step-n {
    flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%;
    background: var(--purple); color: #fff;
    font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 12.5px;
    display: inline-flex; align-items: center; justify-content: center; margin-top: 1px;
}
.nt-demo-start {
    margin-top: 4px; padding: 11px 22px; border-radius: var(--radius-pill);
    background: var(--purple); border: none; color: #fff;
    font-family: 'Outfit', sans-serif; font-size: 14px; font-weight: 700;
    cursor: pointer; transition: all .15s;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--purple) 45%, transparent);
}
.nt-demo-start:hover { transform: translateY(-1px); box-shadow: 0 8px 24px color-mix(in srgb, var(--purple) 60%, transparent); }
.nt-demo-start:disabled { opacity: .6; cursor: not-allowed; transform: none; }
/* Aviso de error dentro de la tarjeta del tutorial (la demo no pudo descargarse). */
.nt-demo-err {
    align-self: stretch; text-align: center;
    font-family: 'DM Sans', sans-serif; font-size: 12.5px; line-height: 1.4;
    color: var(--danger, #dc2626);
    background: color-mix(in srgb, var(--danger, #dc2626) 10%, transparent);
    border: 1px solid color-mix(in srgb, var(--danger, #dc2626) 30%, transparent);
    border-radius: var(--radius-button); padding: 8px 10px;
}

@media (max-width: 860px) {
    .nt-layout { grid-template-columns: 1fr; }
    /* El panel ya fluye natural; aquí solo el lienzo deja de ser sticky. */
    .nt-main { position: static; height: auto; min-height: 500px; }
}
/* ── Teléfono: controles cómodos al dedo ── */
@media (max-width: 600px) {
    /* Descarga 2×2 en vez de 4 en fila → botones más anchos. */
    .dl-fmt-grid { grid-template-columns: repeat(2, 1fr); }
    /* Zoom más grande para el dedo (28px era chico). */
    .zoom-btn { width: 36px; height: 36px; font-size: 17px; }
    /* font-size 16px evita el zoom automático de iOS al enfocar el input. */
    .gen-input { font-size: 16px; }

    /* ── Canvas protagonista: arriba del panel, de extremo a extremo y alto ── */
    .nt-main {
        order: -1;
        width: 100vw;
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
        border-radius: 0; border-left: none; border-right: none;
        min-height: 58vh;
    }
    /* Simplificar en celular: subtítulo del encabezado y consejos flotantes
       (el "foquito" 💡 estorbaba sobre el canvas). El título puede envolver
       (ya no comparte fila con el subtítulo). */
    .nt-canvas-head { flex-wrap: wrap; }
    .nt-canvas-head .nt-ch-title { white-space: normal; }
    .nt-canvas-head .nt-ch-sub { display: none; }
    .nt-tips, .nt-tips-chk { display: none !important; }

    /* ── Celular: simple y limpio, la mesa protagonista ── */
    /* El canvas usa 100vw; recortamos overflow-x del <html> para que ese ancho
       no genere scroll horizontal de la PÁGINA (mismo criterio que en tapas). */
    html { overflow-x: clip; }
    /* En los controles con slider dejamos SOLO la barra (ocultamos el número);
       el valor sigue visible en la etiqueta. */
    .nt-file-panel .input-group:has(.gen-range) .input-row { display: none; }
    /* Zona de carga más compacta → sube el resto del panel. */
    .upload-zone { padding: 16px 14px; }
    .upload-zone .upload-icon { font-size: 30px; margin-bottom: 4px; }
    .upload-zone .upload-text { font-size: 14px; }
    .upload-zone .upload-sub { font-size: 12px; }
    /* Área de trabajo: presets más compactos. */
    .nt-wa-presets .preset-btn { padding: 7px 6px; font-size: 12px; }
    /* Pestañas de motor ocultas — en celular corre el motor por defecto
       (Sparrow V7, el principal); no hay switcher visible. */
    .nt-main .tab-nav { display: none; }
    /* Zoom +/−/⊙ fuera: la mesa se ve más y el pinch-zoom sigue funcionando. */
    .zoom-controls { display: none; }
    /* Área de trabajo: solo 3 presets en celular (ocultamos los 2 últimos;
       para tamaños mayores queda la medida personalizada). */
    .nt-wa-presets .preset-btn:nth-child(n+4) { display: none; }
    /* Menos aire al pie → "Inspírate en otros diseños" no queda tan lejos
       (el padding-bottom de 80px era demasiado en móvil). */
    .nt-wrap { padding-bottom: 16px; }

    /* ── Tarjeta "Cómo se usa" del tutorial: en celular se salía del lienzo ──
       Medido a 390×844: la tarjeta medía 413 px de alto y 380 de ancho dentro
       de un lienzo de 352×388 → asomaba 25 px por arriba y 36 por abajo, y el
       título quedaba tapado por la barra de herramientas. Aquí se compacta
       (menos aire, letra un punto menor) y, si aun así no cabe, desplaza por
       dentro en vez de desbordar. El ancho deja 12 px de margen a cada lado. */
    .nt-demo-steps {
        max-width: calc(100% - 24px);
        max-height: calc(100% - 16px);
        overflow-y: auto; -webkit-overflow-scrolling: touch;
        padding: 14px 16px; gap: 9px;
    }
    .nt-demo-steps-title { font-size: 16px; }
    .nt-demo-steps-list { gap: 7px; }
    .nt-demo-steps-list li { font-size: 13px; line-height: 1.35; gap: 9px; }
    .nt-step-n { flex-basis: 21px; width: 21px; height: 21px; font-size: 11.5px; }
    .nt-demo-steps-benefit { padding: 7px 10px; }
    .nt-benefit-money { font-size: 12px; }
    .nt-demo-start { padding: 10px 18px; font-size: 13.5px; }
    /* El play también más liviano, para que la invitación no tape media mesa. */
    .nt-demo-cluster:not(.nt-demo-steps) { padding: 16px 20px; gap: 8px; }
    .nt-demo-play { width: 50px; height: 50px; }
}