/* nest-editor.css — editor visual de piezas de /nest (toolbar, overlays, chip de
   medidas, menú contextual). Salió de partials/_nest-editor.blade.php (2026-08-23).
   Los overlays compartidos con el catálogo siguen en _editor-overlay-styles. */
#ntEditorStage { position: absolute; inset: 0; z-index: 5; background: transparent;
user-select: none; -webkit-user-select: none; -moz-user-select: none; }
#ntEditorStage svg { width: 100%; height: 100%; display: block; }
#ntEditorStage .nt-ed-bed {
fill: none; stroke: var(--border);
stroke-width: 1.5; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke;
}
#ntEditorStage .sse-piece { cursor: move; }
/* Área de agarre invisible que captura el puntero en todo el interior */
#ntEditorStage .sse-hit { fill: none; stroke: none; pointer-events: all; }
/* Geometría real: respeta el color original de cada trazo (atributo stroke del
   path); los neutros se pasan a currentColor en JS para verse en claro/oscuro.
   Solo forzamos grosor constante para que el trazo no se pierda al hacer zoom. */
#ntEditorStage .sse-piece *:not(.sse-hit) {
fill: none; stroke-width: 1.2; vector-effect: non-scaling-stroke;
}
#ntEditorStage .sse-piece.hover *:not(.sse-hit) { stroke-width: 2.6; }
/* Selección: el área de agarre se vuelve un recuadro punteado azul */
#ntEditorStage .sse-piece.sel .sse-hit {
stroke: var(--orange); stroke-width: 1.5; stroke-dasharray: 5 3;
vector-effect: non-scaling-stroke;
}

/* Toolbar de herramientas — ahora vive DENTRO de la cabecera del canvas (modo edición),
   por eso es inline (sin position absolute ni pill flotante). */
.nt-ed-toolbar {
display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
}
/* Chip flotante de medidas (W/L/%) — esquina superior IZQUIERDA del canvas, solo al seleccionar */
/* Dos píldoras flotantes UNIFORMES a la derecha (como admin): chip de medidas arriba,
   espesor justo debajo. Compactas: mismo radio, sombra, fondo y padding. */
.nt-ed-dims-float, .nt-ed-thick {
position: absolute; right: 10px; z-index: 8;
background: var(--bg2); border: 1px solid var(--border);
border-radius: 11px; padding: 4px 8px; box-shadow: 0 5px 16px var(--shadow);
}
[data-theme="light"] .nt-ed-dims-float, [data-theme="light"] .nt-ed-thick { background: #fff; }
.nt-ed-dims-float { top: 10px; display: flex; align-items: center; }
/* Espesor: elemento INDEPENDIENTE debajo del chip (en admin son separados). Oculto si no
   se detecta. (El JS le pone display:flex; el top fijo lo deja bajo el chip.) */
.nt-ed-thick {
top: 47px;
display: flex; align-items: center; gap: 5px; flex-wrap: wrap; justify-content: flex-end;
font-family: 'DM Sans', sans-serif; font-size: 11.5px; color: var(--muted);
max-width: min(92%, 500px);
}
/* Selector de unidad para DXF sin $INSUNITS — debajo del espesor (top 94). Borde de acento. */
.nt-ed-unit {
position: absolute; right: 10px; top: 76px; z-index: 8; display: none;
align-items: center; gap: 6px; background: var(--bg2); border: 1px solid var(--cyan);
border-radius: 11px; padding: 4px 8px; box-shadow: 0 5px 16px var(--shadow);
font-family: 'DM Sans', sans-serif; font-size: 11.5px; color: var(--muted);
}
[data-theme="light"] .nt-ed-unit { background: #fff; }
.nt-ed-unit-lbl { color: var(--cyan); font-weight: 600; }
.nt-ed-unit-sel { background: var(--bg2); color: var(--text); border: 1px solid var(--border);
border-radius: 7px; padding: 2px 6px; font-size: 11.5px; max-width: 240px; }
[data-theme="light"] .nt-ed-unit-sel { background: var(--bg3); }
.nt-ed-thick b { color: var(--orange); font-family: 'Outfit', sans-serif; font-weight: 700; }
.nt-ed-thick label { display: inline-flex; align-items: center; gap: 4px; }
.nt-ed-thick-to {
background: var(--bg3); border: 1px solid var(--border); border-radius: 6px;
color: var(--text); font-size: 11.5px; padding: 1px 4px; cursor: pointer;
}
[data-theme="light"] .nt-ed-thick-to { background: var(--bg2); }
.nt-ed-thick-to:focus { outline: none; border-color: var(--orange); }
.nt-ed-thick-br { display: inline-flex; align-items: center; gap: 2px; }
.nt-ed-thick-br button {
width: 18px; height: 18px; border: 1px solid var(--border); background: var(--bg3);
color: var(--text); border-radius: 5px; cursor: pointer; line-height: 1; font-size: 12px;
display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
[data-theme="light"] .nt-ed-thick-br button { background: var(--bg2); }
.nt-ed-thick-br button:hover { border-color: var(--orange); color: var(--orange); }
.nt-ed-thick-n { font-size: 11px; color: var(--muted); min-width: 42px; text-align: center; }
/* .nt-ed-thick-hl / .nt-ed-thick-hl-halo y el "peek" (ocultar chrome al ver cotas) → estilo
   UNIFICADO con el catálogo en partials/_editor-overlay-styles.blade.php. */

/* ── Barra de colores (estilo LightBurn): flota abajo-centro del lienzo ── */
/* Una sola fila: crece HORIZONTAL (no hacia arriba). Si hay muchos colores, scroll-x oculto. */
.nt-ed-colors {
position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 8;
display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; justify-content: flex-start;
max-width: calc(100% - 24px); overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-card);
padding: 6px 12px; box-shadow: 0 6px 20px var(--shadow); font-family: 'DM Sans', sans-serif;
}
.nt-ed-colors::-webkit-scrollbar { display: none; }
[data-theme="light"] .nt-ed-colors { background: #fff; }
.nt-ed-colors-label { font-size: 11px; color: var(--muted); font-family: 'Outfit', sans-serif; text-transform: uppercase; letter-spacing: .5px; white-space: nowrap; flex: 0 0 auto; }
.nt-ed-colors-list { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; flex: 0 0 auto; }
.nt-ed-sw { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--border); background: var(--bg3); border-radius: 8px; padding: 3px 7px; cursor: pointer; }
[data-theme="light"] .nt-ed-sw { background: var(--bg2); }
.nt-ed-sw:hover { border-color: var(--orange); }
.nt-ed-sw.active { border-color: var(--orange); box-shadow: 0 0 0 2px color-mix(in srgb, var(--orange) 25%, transparent); }
.nt-ed-sw-dot { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,.25); display: block; }
.nt-ed-sw-n { font-size: 12px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.nt-ed-colors-conv { display: inline-flex; align-items: center; gap: 5px; padding-left: 6px; border-left: 1px solid var(--border); flex: 0 0 auto; }
.nt-ed-colors-arrow { font-size: 11px; color: var(--muted); white-space: nowrap; }
.nt-ed-cv { width: 24px; height: 24px; border: 1px solid var(--border); background: var(--bg3); border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
[data-theme="light"] .nt-ed-cv { background: var(--bg2); }
.nt-ed-cv:hover { border-color: var(--orange); }
.nt-ed-cv-dot { width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(0,0,0,.25); display: block; }
/* "Otro color": abre la rueda del sistema. El <input type=color> se tapa con el propio
   botón (no se puede dar estilo a su caja en todos los navegadores) y el punto lleva el
   degradado del arcoíris, que es como se lee "elige tú". */
.nt-ed-cv-otro { position: relative; overflow: hidden; }
.nt-ed-cv-input { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; padding: 0; border: 0; cursor: pointer; }
.nt-ed-cv-dot-otro { background: conic-gradient(#ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000); }
/* Eliminar las líneas del color activo. */
.nt-ed-cv-del { width: 26px; height: 24px; margin-left: 2px; border: 1px solid var(--border); background: var(--bg3); color: var(--muted);
border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
[data-theme="light"] .nt-ed-cv-del { background: var(--bg2); }
.nt-ed-cv-del:hover { border-color: var(--danger); color: var(--danger); }
.nt-ed-colors-uni { margin-left: 2px; border: 1px solid var(--border); background: transparent; color: var(--muted); border-radius: 8px; padding: 4px 9px; font-size: 12px; cursor: pointer; font-family: 'DM Sans', sans-serif; white-space: nowrap; flex: 0 0 auto; }
.nt-ed-colors-uni:hover { border-color: var(--orange); color: var(--orange); }
/* Resaltado de un color → atenuado UNIFICADO con el catálogo en partials/_editor-overlay-styles.blade.php */
.nt-ed-tbtn {
display: inline-flex; align-items: center; justify-content: center;
width: 34px; height: 34px; padding: 0; border: none; background: transparent;
border-radius: var(--radius-button); color: var(--text); cursor: pointer; transition: background .15s;
}
.nt-ed-tbtn svg { width: 18px; height: 18px; display: block; }
.nt-ed-tbtn:hover:not(:disabled) { background: var(--bg3); }
.nt-ed-tbtn:disabled { opacity: .35; cursor: default; }
.nt-ed-tsep { width: 1px; height: 22px; background: var(--border); margin: 0 4px; }
.nt-ed-tbtn.active, .nt-ed-tbtn.active:hover { background: var(--orange); color: #fff; }
/* En celular ocultamos las herramientas de DIBUJO (rectángulo/círculo): en móvil
   no se dibuja a mano y así la toolbar queda simple. Pinch-zoom sigue disponible. */
@media (max-width: 600px) {
.nt-ed-tbtn[data-act="addRect"],
.nt-ed-tbtn[data-act="addCircle"] { display: none; }
/* Al ocultar rect+círculo quedaban 2 separadores juntos ("2 palitos"):
   ocultamos el que sigue al círculo para dejar uno solo entre grupos. */
.nt-ed-tbtn[data-act="addCircle"] + .nt-ed-tsep { display: none; }
/* Detector de espesor (fila) fuera en celular — simple y limpio. */
.nt-ed-thick { display: none; }
}
.nt-ed-dims {
display: inline-flex; align-items: center; gap: 5px;
font-family: 'DM Sans', sans-serif; white-space: nowrap; padding: 0 2px;
font-variant-numeric: tabular-nums;
}
.nt-ed-dims b { color: var(--text); font-weight: 700; font-size: 12.5px; }
/* Cada control en su CONTENEDOR (como en admin): grupo con borde; los inputs van sin
   borde dentro. Admiten fórmulas (texto). */
.nt-ed-grp {
display: inline-flex; align-items: center; gap: 3px;
background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 2px 6px;
}
[data-theme="light"] .nt-ed-grp { background: var(--bg3); }
.nt-ed-grp:focus-within { border-color: var(--orange); box-shadow: 0 0 0 2px color-mix(in srgb, var(--orange) 22%, transparent); }
.nt-ed-grp input {
width: 54px; text-align: right; font-family: inherit; font-size: 12.5px; font-weight: 700;
color: var(--text); -webkit-text-fill-color: var(--text);
background: transparent; border: none; box-shadow: none; padding: 1px 1px;
-moz-appearance: textfield; appearance: textfield;
}
.nt-ed-grp input:focus { outline: none; }
.nt-ed-grp.nt-ed-pct input { width: 38px; }
.nt-ed-grp i { color: var(--muted); font-style: normal; font-size: 11.5px; }
.nt-ed-sep { width: 1px; height: 18px; background: var(--border); }
.nt-ed-reset {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; height: 24px; padding: 0; border: 1px solid var(--border);
background: var(--bg); border-radius: 7px; color: var(--muted); cursor: pointer;
font-size: 14px; line-height: 1; transition: background .15s, color .15s, border-color .15s;
}
[data-theme="light"] .nt-ed-reset { background: var(--bg3); }
.nt-ed-reset:hover { border-color: var(--orange); color: var(--orange); }
.nt-ed-lock {
display: inline-flex; align-items: center; justify-content: center;
width: 20px; height: 20px; padding: 0; border: none;
background: transparent; border-radius: 6px; color: var(--muted); cursor: pointer;
transition: background .15s, color .15s;
}
.nt-ed-lock svg { width: 12px; height: 12px; display: block; }
.nt-ed-lock:hover { background: var(--bg3); color: var(--text); }
.nt-ed-lock.active { background: var(--orange); color: #fff; }

/* Aviso breve flotante sobre el lienzo */
#ntEditorStage .nt-ed-toast {
position: absolute; bottom: 16px; left: 50%;
transform: translateX(-50%) translateY(8px); z-index: 8;
background: var(--bg2); border: 1px solid var(--border); border-radius: var(--radius-card);
padding: 8px 14px; font-family: 'DM Sans', sans-serif; font-size: 13px;
color: var(--text); box-shadow: 0 6px 20px var(--shadow);
opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; white-space: nowrap;
}
#ntEditorStage .nt-ed-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* C3 v2 — franjas de borde del canvas (soltar la pieza ahí = pasa a la mesa vecina).
   Fijas en píxeles (no escalan con el zoom), pointer-events:none para no estorbar. */
#ntEditorStage .nt-ed-edgeband {
position: absolute; left: 0; right: 0; height: 14%; min-height: 50px; max-height: 120px;
z-index: 30; pointer-events: none;
display: flex; justify-content: center;
font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 13px; letter-spacing: .4px;
color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.45);
}
#ntEditorStage .nt-ed-edgeband-top {
top: 0; align-items: flex-start; padding-top: 10px;
background: linear-gradient(to bottom, rgba(249,115,22,.55), rgba(249,115,22,0));
border-top: 3px solid #f97316;
}
#ntEditorStage .nt-ed-edgeband-bottom {
bottom: 0; align-items: flex-end; padding-bottom: 10px;
background: linear-gradient(to top, rgba(249,115,22,.55), rgba(249,115,22,0));
border-bottom: 3px solid #f97316;
}

/* Botón "Volver a las mesas" en el header del motor (junto a +/−/⊙) al editar un tablero */
.nt-back-btn {
background: var(--orange); color: #fff; border: none; border-radius: var(--radius-button);
padding: 6px 12px; margin-right: 6px; font-family: 'Outfit', sans-serif;
font-weight: 700; font-size: 13px; cursor: pointer; white-space: nowrap;
}
.nt-back-btn:hover { background: var(--orange2); }

/* En modo regla, las piezas y sus manijas NO reciben eventos (no se mueven ni
   seleccionan). Necesita !important porque .sse-hit fuerza pointer-events:all.
   Clase `sse-ruler-on` la pone el motor compartido window.SvgRulerTool (== catálogo). */
#ntEditorStage.sse-ruler-on .sse-piece,
#ntEditorStage.sse-ruler-on .sse-hit,
#ntEditorStage.sse-ruler-on .sse-rhandle,
#ntEditorStage.sse-ruler-on .sse-roth-hit { pointer-events: none !important; }
#ntEditorStage.sse-ruler-on .sse-piece { cursor: default; }

/* .sse-ruler-* (regla: línea, bolitas, etiqueta) → estilo/color UNIFICADO con el catálogo en
   partials/_editor-overlay-styles.blade.php. El ANCHO de la línea lo fuerza el motor inline (forceStrokeWidth). */

/* Rectángulo selector (marquee) */
#ntEditorStage .sse-marquee {
fill: color-mix(in srgb, var(--orange) 12%, transparent);
stroke: var(--orange); stroke-width: 1; stroke-dasharray: 4 3;
vector-effect: non-scaling-stroke; pointer-events: none;
}
/* Manijas propias de selección (overlay dibujado por nest-editor.js) */
#ntEditorStage .sse-selbox {
fill: none; stroke: var(--orange); stroke-width: 1.2; vector-effect: non-scaling-stroke;
}
#ntEditorStage .sse-rhandle {
fill: #e2e8f0; stroke: #475569; stroke-width: 1.2; vector-effect: non-scaling-stroke;
}
#ntEditorStage .sse-roth-ic {
fill: none; stroke: #475569; stroke-width: 2;
stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}

/* Menú contextual (clic derecho) */
.nt-ed-ctx {
position: fixed; z-index: 9999; min-width: 184px;
background: var(--bg2); border: 1px solid var(--border);
border-radius: var(--radius-card); padding: 5px; box-shadow: 0 12px 34px var(--shadow);
font-family: 'DM Sans', sans-serif; font-size: 13.5px; color: var(--text);
user-select: none; -webkit-user-select: none;
}
.nt-ed-ctx .it {
display: flex; align-items: center; gap: 9px;
padding: 8px 11px; border-radius: var(--radius-button); cursor: pointer; white-space: nowrap;
}
.nt-ed-ctx .it:hover { background: var(--bg3); }
.nt-ed-ctx .it.danger:hover { background: color-mix(in srgb, #ef4444 16%, transparent); color: #ef4444; }
.nt-ed-ctx .it.disabled { opacity: .4; cursor: default; }
.nt-ed-ctx .it .ico { width: 16px; height: 16px; display: inline-flex; align-items: center; opacity: .85; }
.nt-ed-ctx .it .ico svg { width: 16px; height: 16px; display: block; }
.nt-ed-ctx .it kbd {
margin-left: auto; padding-left: 14px; font-family: inherit; font-size: 11px;
color: var(--muted); letter-spacing: .02em;
}
.nt-ed-ctx .sep { height: 1px; background: var(--border); margin: 4px 6px; }

/* Soltar un archivo sobre el canvas → invitación a agregar */
#ntEditorStage.nt-ed-dragover::after {
content: 'Suelta para agregar el diseño';
position: absolute; inset: 10px; z-index: 7;
display: flex; align-items: center; justify-content: center; text-align: center;
border: 2.5px dashed var(--orange); border-radius: var(--radius-card);
background: color-mix(in srgb, var(--orange) 7%, transparent);
color: var(--orange); font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 20px;
pointer-events: none;
}

/* El overlay "agregar otro" (estilo zona de carga inicial) vive ahora como hermano
   del preview (#ntSvgPreviewWrap > .nt-ed-addmore-ov); su CSS está en nest.blade.php.
   La clase nt-ed-addmore la pone nest-editor.js sobre el WRAP. */