/* ══ Runoff × Photoshop — grises neutros estilo PS + rojo Runoff de acento ══ */
:root {
  --n-primary: #E8402D;
  --n-primary-hover: #F25542;
  --n-primary-glow: rgba(232, 64, 45, .35);
  --n-secondary: #3a3a3a;
  --n-accent: #FF6B57;
  --n-accent-glow: rgba(255, 107, 87, .25);

  /* Dark surfaces (paleta Photoshop) */
  --n-bg: #1e1e1e;
  --n-bg-card: #252525;
  --n-bg-elevated: #2e2e2e;
  --n-bg-input: #191919;
  --n-bg-hover: #323232;

  /* Text */
  --n-text: #d8d8d8;
  --n-text-muted: #969696;
  --n-text-bright: #f2f2f2;
  --n-text-dim: #6b6b6b;

  /* Borders */
  --n-border: rgba(255, 255, 255, .08);
  --n-border-hover: rgba(255, 255, 255, .18);
  --n-border-active: rgba(255, 255, 255, .3);

  /* Radii — más cuadrado, look Photoshop */
  --n-radius: 6px;
  --n-radius-sm: 4px;
  --n-radius-lg: 8px;

  /* Template brand defaults — restored after Hito 6 removed the Colors panel.
     Templates reference these via `var(--cbrand, …)` / `var(--ccta, …)`. When
     a Client_Configuration loads it can override these per-ad-element. */
  --cbrand: #0170b9;
  --ccta: #0a258f;
  /* Secondary had NO default — any layer using var(--csecondary) got an
     invalid fill and vanished when no Client_Configuration set it. Default to
     the brand color so secondary-tinted shapes stay visible (a sensible
     fallback; a real config still overrides per-ad-element). */
  --csecondary: var(--cbrand, #0170b9);
}

/* ══ Reset & Layout ══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--n-bg);color:var(--n-text);height:100vh;display:flex;flex-direction:column}
.app{display:flex;flex:1;min-height:0}
/* Unified sidebar wrapper (templates rail + icon-bar/panel).
   Zoom + JSON stay floating bottom-left of the canvas — see .zoom-bar. */
:root{--sidebar-w:320px}
.sidebar{display:flex;flex-direction:column;width:var(--sidebar-w);flex-shrink:0;background:var(--n-bg-card);border-right:1px solid var(--n-border);height:100%;min-width:0;overflow:hidden;transition:width .25s ease}
.app.panel-closed .sidebar{width:56px}
.rail-and-panel{flex:1;min-height:0;display:flex;overflow:hidden}
.panel-wrap{flex:1;min-width:0;transition:width .25s ease;overflow:hidden}
.app.panel-closed .panel-wrap{width:0}
.app.panel-closed .resize-handle{width:0;overflow:hidden}
.resize-handle{flex-shrink:0;width:5px}

/* ══ Icon sidebar ══ */
.icon-bar{background:var(--n-bg-card);border-right:1px solid var(--n-border);display:flex;flex-direction:column;align-items:center;padding:8px 0;gap:2px;overflow-y:auto;z-index:10;width:56px;flex-shrink:0;height:100%;position:relative}
/* Templates icon stays anchored at top (normal flow). .ib-center-group is absolutely centered in the icon-bar so it sits at the true vertical middle of the viewport, independent of how much space Templates takes above. */
.ib-center-group{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:2px}
.ib-btn{background:none;border:none;color:var(--n-text-dim);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:8px;width:48px;transition:all .15s;font-family:inherit}
.ib-btn span{font-size:8px;letter-spacing:.3px;line-height:1}
.ib-btn .ib-icon{font-size:18px;line-height:1;display:flex;align-items:center;justify-content:center}
.ib-btn:hover{color:var(--n-text);background:rgba(255,255,255,.06)}
/* Activo estilo Photoshop: fondo hundido + barra de acento Runoff a la izquierda */
.ib-btn.active{color:#fff;background:rgba(255,255,255,.08);box-shadow:inset 2px 0 0 var(--n-primary);border-radius:4px}
.ib-btn.active .ib-icon{filter:none}
.ib-sep{width:32px;height:1px;background:var(--n-border);margin:4px 0}
/* Brand panel */
.brand-logo{width:80px;height:80px;object-fit:contain;background:rgba(255,255,255,.08);border-radius:8px;padding:8px;margin-bottom:12px}
.brand-color-row{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:6px;cursor:pointer;transition:background .15s}
.brand-color-row:hover{background:rgba(255,255,255,.06)}
.brand-color-box{width:32px;height:32px;border-radius:6px;border:2px solid rgba(255,255,255,.12);flex-shrink:0}
.brand-color-info{display:flex;flex-direction:column;gap:1px;min-width:0}
.brand-color-name{font-size:11px;color:var(--n-text);font-weight:500}
.brand-color-hex{font-size:11px;color:var(--n-text-dim);font-family:'SF Mono',SFMono-Regular,Consolas,monospace;letter-spacing:.3px}
.brand-applied{display:flex;gap:6px;margin-top:4px}
.brand-applied-item{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:8px;background:rgba(255,255,255,.04);cursor:pointer;transition:background .15s}
.brand-applied-item:hover{background:rgba(255,255,255,.08)}
.brand-applied-box{width:40px;height:40px;border-radius:8px;border:2px solid rgba(255,255,255,.12)}
.brand-applied-label{font-size:9px;color:var(--n-text-dim);text-transform:uppercase;letter-spacing:.3px;text-align:center}
.brand-applied-hex{font-size:10px;color:var(--n-text);font-family:'SF Mono',SFMono-Regular,Consolas,monospace}
.brand-field{margin-bottom:14px}
.brand-field-label{font-size:13px;font-weight:600;color:var(--n-primary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.brand-field-value{font-size:12px;color:var(--n-text);line-height:1.5;word-break:break-word}
.brand-divider{height:1px;background:var(--n-border);margin:12px 0}
.ib-sep{width:28px;height:1px;background:var(--n-border);margin:4px 0;flex-shrink:0}

/* Scrollbar styling */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.14)}

/* ══ Panel (sidebar) ══ */
.panel{background:var(--n-bg-card);border-right:1px solid var(--n-border);padding:12px 12px 40px;overflow-y:auto;height:100%;width:100%;min-width:0}
/* Panel section toggle + transition */
.panel-section{display:none;opacity:0;transform:translateY(18px) scale(.97);filter:blur(3px)}
.panel-section.active{display:block;animation:panelIn .35s cubic-bezier(.22,1,.36,1) forwards}
.panel-section.panel-out{display:block;animation:panelOut .18s cubic-bezier(.55,.06,.68,.19) forwards}
@keyframes panelIn{0%{opacity:0;transform:translateY(18px) scale(.97);filter:blur(3px)}100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}}
@keyframes panelOut{0%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}100%{opacity:0;transform:translateY(-10px) scale(.98);filter:blur(2px)}}
.panel-section-title{font-size:15px;font-weight:700;color:#fff;margin:-12px -12px 12px;padding:14px 12px;border-bottom:1px solid var(--n-border);display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.03)}

.ph{margin-bottom:10px;padding:4px 2px}
.ph h1{font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:var(--n-text-bright);margin-bottom:1px;letter-spacing:.2px}
.ph p{font-size:10px;color:var(--n-text-dim);letter-spacing:.3px}

/* Section headers (collapsible) — WHITE titles for clear hierarchy */
.sec-header{font-size:12px;font-weight:600;color:#fff;margin:0;padding:12px 2px 8px;border-bottom:none;cursor:pointer;display:flex;align-items:center;gap:6px;user-select:none;transition:color .15s}
.sec-header:hover{color:var(--n-primary)}
.sec-chevron{font-size:9px;transition:transform .2s;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;text-align:center;color:var(--n-text-muted);border-radius:3px;transition:transform .2s,background .15s}
.sec-header:hover .sec-chevron{background:rgba(255,255,255,.05);color:var(--n-text)}
.sec-header.collapsed .sec-chevron{transform:rotate(-90deg)}
.sec-body{overflow:hidden;transition:max-height .25s ease,opacity .2s ease;max-height:1200px;opacity:1;padding:6px 0 8px;margin-bottom:0;border-bottom:1px solid var(--n-border)}
.sec-header.collapsed+.sec-body{max-height:0;opacity:0;padding:0;margin-bottom:0;border-bottom-color:transparent}
/* Subsection labels — smaller, muted, uppercase */
.sec-sub{font-size:10px;font-weight:500;color:var(--n-text-muted);margin:10px 0 6px;letter-spacing:.3px}
.sec{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--n-text-dim);margin:12px 0 5px;padding-bottom:4px;border-bottom:1px solid var(--n-border)}

/* ══ Fields ══ */
.fld{margin-bottom:8px}
.fld label{display:block;font-size:11px;color:var(--n-text);margin-bottom:3px}
.fld input[type="text"],.fld textarea{width:100%;background:var(--n-bg-input);border:1px solid var(--n-border);border-radius:5px;padding:7px 9px;color:var(--n-text);font-family:inherit;font-size:12px;outline:none;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}
.fld input:focus,.fld textarea:focus{border-color:var(--n-border-active);box-shadow:0 0 0 2px rgba(1,112,185,.15)}

/* Color row */
.crow{display:flex;gap:4px;align-items:center}
.crow input[type="color"]{width:28px;height:28px;padding:1px;border:1px solid var(--n-border);border-radius:5px;background:var(--n-bg-input);cursor:pointer;flex-shrink:0}
.crow .hi{flex:1;background:var(--n-bg-input);border:1px solid var(--n-border);border-radius:5px;padding:6px 8px;color:var(--n-text-muted);font-family:'SF Mono',ui-monospace,monospace;font-size:11px;outline:none;transition:border-color .15s}
.crow .hi:focus{border-color:var(--n-border-active)}
.elcol-row input[type="color"]{width:24px;height:24px;padding:1px;border:1px solid var(--n-border);border-radius:4px;background:var(--n-bg-input);cursor:pointer;flex-shrink:0}
.elcol-row .hi{width:62px;flex:none;background:var(--n-bg-input);border:1px solid var(--n-border);border-radius:4px;padding:3px 5px;color:var(--n-text-muted);font-family:'SF Mono',ui-monospace,monospace;font-size:10px;outline:none}

/* Tabs (format 1:1 / 9:16) — segmented control inspired by shadcn default variant */
.tabs{display:inline-flex;border-radius:var(--n-radius);padding:3px;background:var(--n-bg-elevated);border:1px solid var(--n-border);margin-bottom:4px;gap:2px}
.tab{flex:1;background:none;border:none;border-radius:calc(var(--n-radius) - 3px);color:var(--n-text-muted);font-size:12px;font-weight:500;padding:7px 16px;cursor:pointer;transition:all .15s ease;text-align:center;font-family:inherit;position:relative;white-space:nowrap}
.tab:hover{color:var(--n-text)}
.tab.active{background:var(--n-bg-card);color:var(--n-text-bright);box-shadow:0 1px 3px rgba(0,0,0,.2),0 0 0 1px rgba(255,255,255,.04)}
.tab:focus-visible{outline:none;box-shadow:0 0 0 2px var(--n-primary-glow)}

/* Sliders */
.srow{display:flex;align-items:center;gap:5px;margin-bottom:3px}
.srow label{font-size:10px;color:var(--n-text-muted);width:32px;flex-shrink:0;letter-spacing:.2px}
.srow span{font-size:10px;color:var(--n-text-dim);width:32px;text-align:right;flex-shrink:0}

/* Custom range slider — inspired by Radix Slider */
.srow input[type="range"]{flex:1;height:18px;cursor:pointer;-webkit-appearance:none;appearance:none;background:transparent;padding:0;margin:0}
/* Track — Webkit */
.srow input[type="range"]::-webkit-slider-runnable-track{height:4px;border-radius:20px;background:rgba(255,255,255,.08);transition:height .12s,box-shadow .2s}
.srow input[type="range"]:hover::-webkit-slider-runnable-track{height:6px;box-shadow:0 0 8px rgba(1,112,185,.1)}
/* Track — Firefox */
.srow input[type="range"]::-moz-range-track{height:4px;border-radius:20px;background:rgba(255,255,255,.08);border:none;transition:height .12s}
.srow input[type="range"]:hover::-moz-range-track{height:6px}
/* Fill (progress) — Firefox */
.srow input[type="range"]::-moz-range-progress{height:4px;border-radius:20px;background:var(--n-primary);transition:height .12s}
.srow input[type="range"]:hover::-moz-range-progress{height:6px}
/* Thumb — Webkit */
.srow input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;border:none;margin-top:-5px;box-shadow:0 1px 4px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.08);transition:width .12s,height .12s,margin-top .12s,box-shadow .2s;cursor:grab;position:relative;z-index:2}
.srow input[type="range"]:hover::-webkit-slider-thumb{width:18px;height:18px;margin-top:-6px;box-shadow:0 2px 8px rgba(0,0,0,.3),0 0 0 1px rgba(0,0,0,.08),0 0 12px var(--n-primary-glow)}
.srow input[type="range"]:active::-webkit-slider-thumb{cursor:grabbing;box-shadow:0 2px 8px rgba(0,0,0,.3),0 0 0 1px rgba(0,0,0,.08),0 0 16px var(--n-primary-glow);transform:scale(1.05)}
/* Thumb — Firefox */
.srow input[type="range"]::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:none;box-shadow:0 1px 4px rgba(0,0,0,.25),0 0 0 1px rgba(0,0,0,.08);transition:width .12s,height .12s,box-shadow .2s;cursor:grab}
.srow input[type="range"]:hover::-moz-range-thumb{width:18px;height:18px;box-shadow:0 2px 8px rgba(0,0,0,.3),0 0 0 1px rgba(0,0,0,.08),0 0 12px var(--n-primary-glow)}
.srow input[type="range"]:active::-moz-range-thumb{cursor:grabbing}
/* Focus */
.srow input[type="range"]:focus-visible::-webkit-slider-thumb{box-shadow:0 2px 8px rgba(0,0,0,.3),0 0 0 3px var(--n-primary-glow)}
.srow input[type="range"]:focus-visible::-moz-range-thumb{box-shadow:0 2px 8px rgba(0,0,0,.3),0 0 0 3px var(--n-primary-glow)}
.vinput{width:38px;background:var(--n-bg);border:1px solid var(--n-border);border-radius:4px;color:var(--n-text-dim);font-size:10px;text-align:center;padding:3px 2px;flex-shrink:0;font-family:inherit;transition:border-color .15s,color .15s}
.vinput:focus{border-color:var(--n-border-active);outline:none;color:var(--n-text)}
.vinput::-webkit-inner-spin-button,.vinput::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.vinput{-moz-appearance:textfield}

/* ══ Adjustment sliders — label-above layout (inspired by reference) ══ */
.adj-group-title{font-size:12px;font-weight:600;color:#fff;margin:14px 0 8px;display:flex;align-items:center;gap:5px}
.adj-slider{margin-bottom:10px}
.adj-slider-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:3px}
.adj-slider-label{font-size:11px;color:var(--n-text)}
.adj-slider .vinput{width:38px;background:var(--n-bg);border:1px solid var(--n-border);border-radius:4px;color:var(--n-text-muted);font-size:10px;text-align:center;padding:3px 2px}
/* Full-width range for adj sliders */
.adj-range{width:100%;height:18px;cursor:pointer;-webkit-appearance:none;appearance:none;background:transparent;padding:0;margin:0}
.adj-range::-webkit-slider-runnable-track{height:4px;border-radius:20px;background:rgba(255,255,255,.1);transition:height .12s}
.adj-range:hover::-webkit-slider-runnable-track{height:5px}
.adj-range::-moz-range-track{height:4px;border-radius:20px;background:rgba(255,255,255,.1);border:none}
.adj-range::-moz-range-progress{height:4px;border-radius:20px;background:var(--n-primary)}
.adj-range::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#fff;border:none;margin-top:-5px;box-shadow:0 1px 4px rgba(0,0,0,.3),0 0 0 1px rgba(0,0,0,.1);cursor:grab;transition:width .12s,height .12s,margin-top .12s,box-shadow .2s}
.adj-range:hover::-webkit-slider-thumb{width:16px;height:16px;margin-top:-5.5px;box-shadow:0 2px 8px rgba(0,0,0,.3),0 0 10px var(--n-primary-glow)}
.adj-range:active::-webkit-slider-thumb{cursor:grabbing}
.adj-range::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:#fff;border:none;box-shadow:0 1px 4px rgba(0,0,0,.3);cursor:grab}
.adj-range:hover::-moz-range-thumb{width:16px;height:16px;box-shadow:0 2px 8px rgba(0,0,0,.3),0 0 10px var(--n-primary-glow)}
/* Colored tracks for white balance */
.adj-range--temp::-webkit-slider-runnable-track{background:linear-gradient(90deg,#4a90d9,#8b8b8b 50%,#d4a843)}
.adj-range--temp::-moz-range-track{background:linear-gradient(90deg,#4a90d9,#8b8b8b 50%,#d4a843)}
.adj-range--tint::-webkit-slider-runnable-track{background:linear-gradient(90deg,#5da86a,#8b8b8b 50%,#c46ab8)}
.adj-range--tint::-moz-range-track{background:linear-gradient(90deg,#5da86a,#8b8b8b 50%,#c46ab8)}
/* Reset button — full width, clean */
.adj-reset-btn{width:100%;padding:10px;margin-top:8px;background:none;border:1px solid var(--n-border);border-radius:6px;color:var(--n-text-muted);font-size:11px;font-weight:500;cursor:pointer;font-family:inherit;transition:all .15s}
.adj-reset-btn:hover{border-color:var(--n-border-hover);color:var(--n-text);background:rgba(255,255,255,.02)}

/* Bullet list */
.blist{list-style:none;display:flex;flex-direction:column;gap:3px}
.brow{display:flex;align-items:flex-start;gap:4px}
.brow textarea{flex:1;background:var(--n-bg-input);border:1px solid var(--n-border);border-radius:5px;padding:6px 8px;color:var(--n-text);font-size:11px;outline:none;transition:border-color .15s;resize:vertical;font-family:inherit;line-height:1.4;min-height:42px}
.brow textarea:focus{border-color:var(--n-border-active);box-shadow:0 0 0 2px rgba(1,112,185,.15)}
.brm{background:none;border:none;color:var(--n-text-dim);cursor:pointer;font-size:14px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:color .15s,background .15s}
.brm:hover{color:#f87171;background:rgba(248,113,113,.08)}
.badd{background:none;border:1px dashed rgba(255,255,255,.06);color:var(--n-text-dim);width:100%;padding:6px;border-radius:5px;cursor:pointer;font-size:11px;margin-top:4px;font-family:inherit;transition:border-color .15s,color .15s}
.badd:hover{border-color:var(--n-border-hover);color:var(--n-text-muted)}

/* Photo drop — large zone for clear interaction */
.pdrop{border:1.5px dashed rgba(255,255,255,.1);border-radius:8px;padding:24px 16px;text-align:center;cursor:pointer;position:relative;overflow:hidden;transition:border-color .15s,background .15s;background:var(--n-bg);min-height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px}
.pdrop:hover{border-color:var(--n-primary);background:rgba(1,112,185,.03)}
.pdrop.is-dropping{border-color:var(--n-primary);background:rgba(1,112,185,.08);border-style:solid}
.pdrop.has-img{border-style:solid;border-color:var(--n-border);padding:8px;min-height:0;background:transparent}
.pdrop.has-img .pdrop-icon{display:none}
.pdrop p{font-size:11px;color:var(--n-text-muted);line-height:1.5}
.pdrop-icon{font-size:20px;opacity:.4;margin-bottom:2px}
.pdrop input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.thumb{width:100%;height:60px;object-fit:cover;border-radius:6px;display:none;margin-bottom:3px}
.thumb.contain{object-fit:contain}

/* Misc controls */
.bclr{background:var(--n-bg-elevated);border:none;color:var(--n-text-muted);font-size:10px;padding:3px 8px;border-radius:4px;cursor:pointer;margin-top:2px;position:relative;z-index:2;transition:background .15s,color .15s}
.bclr:hover{background:var(--n-bg-hover);color:var(--n-text)}
.flbl{font-size:9px;color:var(--n-accent);background:rgba(123,220,181,.06);border-radius:3px;padding:1px 5px;margin-left:4px}
.hint{font-size:10px;color:var(--n-text-dim);margin-top:2px;line-height:1.3}
.hint a{color:var(--n-primary);text-decoration:none}
.hint a:hover{text-decoration:underline}

/* Element groups */
.egrp{margin-bottom:6px;padding:4px 0;border-bottom:1px solid var(--n-border)}
.egrp-name{font-size:11px;font-weight:600;color:var(--n-text);margin-bottom:4px;display:flex;align-items:center;gap:5px}
.egrp-name span{font-size:8px;color:var(--n-text-dim);font-weight:400;text-transform:uppercase;letter-spacing:1px}
.erst{background:none;border:1px solid var(--n-border);color:var(--n-text-dim);font-size:10px;padding:3px 8px;border-radius:4px;cursor:pointer;margin-left:auto;transition:all .15s}
.erst:hover{border-color:var(--n-border-hover);color:var(--n-text-muted)}
.erst.active{border-color:var(--n-accent);color:var(--n-accent);background:rgba(123,220,181,.04)}

/* Steps */
.step-row{display:flex;align-items:center;gap:5px;margin-bottom:4px;padding:4px 6px;background:var(--n-bg);border-radius:5px}
.step-num{width:16px;height:16px;border-radius:50%;background:var(--n-primary);display:flex;align-items:center;justify-content:center;font-size:8px;color:#fff;flex-shrink:0;font-weight:700}
.step-txt{font-size:9px;color:var(--n-text-muted);line-height:1.3}

/* ══ Preview area ══ */
.prev{display:flex;flex-direction:column;align-items:center;padding:0;gap:0;height:100%;position:relative;background:var(--n-bg);overflow:hidden;flex:1;min-width:0}
.prev-content{overflow:visible}
.prev.pan-ready .prev-content,.prev.pan-ready #sbox{cursor:grab}
.prev.is-panning .prev-content,.prev.is-panning #sbox{cursor:grabbing !important}
.prev-content{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:10px;width:100%;padding:20px;position:relative;z-index:1}

/* .tpl-bar removed — templates moved to left sidebar (.templates-rail). */
/* Export buttons moved to header — see .top-bar-export below */
/* Radial glow behind preview — inspired by GradientCard */
/* Photoshop reskin: mesa de trabajo plana — el glow ámbar de Needles se eliminó. */
.plbl{font-size:8px;color:var(--n-text-dim);letter-spacing:1px;text-transform:uppercase}
/* .sbox is overflow:visible so the bbox-overlay handles can extend OUTSIDE
   the canvas frame — matches Canva: the user can still grab a side handle
   even when it'd sit beyond the canvas edge. The visual canvas frame stays
   rounded because .ad has its own border-radius scaled to 1080 coord space. */
.sbox{position:relative;overflow:visible;border-radius:var(--n-radius);flex-shrink:0;box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04),0 0 40px rgba(1,112,185,.08)}
.sbox.f11{width:540px;height:540px}
.sbox.f916{width:338px;height:600px}
/* Drag-and-drop target feedback — element being dropped from the catalog/gallery. */
.sbox.is-dropping{box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 0 2px var(--n-primary),0 0 40px rgba(1,112,185,.25)}
/* Empty-frame placeholder hint (editor-only; data-export-hide strips it). */
.frame-empty-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;color:rgba(0,0,0,.38)}
.frame-empty-hint svg{width:38%;height:38%;max-width:130px;max-height:130px}
/* Canva-style ghost drag — floating preview that scales toward canvas size.
   No box/shadow: just the figure itself (matches what gets inserted). */
.el-drag-ghost{position:fixed;left:0;top:0;z-index:100000;pointer-events:none;opacity:.92;will-change:left,top,width,height}
.el-drag-ghost img,.el-drag-ghost svg{width:100%;height:100%;display:block;object-fit:contain}
/* Icons/shapes are inserted white by default — recolor the black thumb art to
   white so the preview matches the dropped element. */
.el-drag-ghost--white img,.el-drag-ghost--white svg{filter:brightness(0) invert(1)}
body.is-ghost-dragging,body.is-ghost-dragging *{cursor:grabbing !important;user-select:none}

.ad{position:absolute;top:0;left:0;transform-origin:top left;overflow:hidden}
/* border-radius scaled per format so the rounded corners stay 10px visually
   (matching --n-radius) regardless of the .ad's 1080-coord space. */
/* Sin border-radius: es un print — esquinas vivas siempre (fix 2026-07-29). */
.ad.f11{width:1080px;height:1080px;transform:scale(.5)}
.ad.f916{width:1080px;height:1920px;transform:scale(.3125);border-radius:32px}
.adphoto{position:absolute;inset:0;background:#080c14 50% 50%/cover no-repeat}
.advignette{position:absolute;inset:0;pointer-events:none;z-index:50;transition:opacity .2s}

/* ══ Resize handle ══ */
.resize-handle{background:var(--n-bg-card);cursor:col-resize;transition:background .2s,width .25s ease;position:relative}
.resize-handle:hover,.resize-handle.active{background:var(--n-bg-elevated)}
.resize-handle::after{content:'';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1px;height:40px;background:rgba(255,255,255,.06);border-radius:1px}

/* ══ Zoom bar ══ */
/* Minimal floating zoom — no panel chrome, fixed bottom-left of the canvas.
   Layout: −  ─────●─────  +   67 %   ⧉ JSON   (compact, ~180px wide) */
.zoom-bar{display:flex;align-items:center;gap:6px;z-index:50;position:absolute;bottom:12px;left:12px;background:transparent;border:0;padding:0;box-shadow:none;backdrop-filter:none;transition:opacity .15s ease,transform .2s ease}
/* Canvas overlap: keep the zoom visible with a subtle white backdrop instead
   of hiding it — otherwise the user can't zoom out from an oversized canvas. */
.zoom-bar.hidden-by-canvas{background:rgba(255,255,255,.06);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:8px;padding:5px 10px;box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 2px 12px rgba(255,255,255,.06);transition:background .2s, padding .2s, box-shadow .2s}
.zoom-tick{background:transparent;border:0;color:var(--n-text-muted);font-size:14px;line-height:1;width:14px;height:14px;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:.55;transition:opacity .15s,color .15s}
.zoom-tick:hover{opacity:1;color:var(--n-text)}
.zoom-val{font-size:11px;color:var(--n-text-muted);min-width:34px;text-align:left;font-variant-numeric:tabular-nums;margin-left:4px}
.zoom-bar input[type="range"]{width:110px;height:14px;cursor:pointer;-webkit-appearance:none;appearance:none;background:transparent;padding:0;margin:0}
.zoom-bar input[type="range"]::-webkit-slider-runnable-track{height:3px;border-radius:20px;background:rgba(255,255,255,.12)}
.zoom-bar input[type="range"]::-moz-range-track{height:3px;border-radius:20px;background:rgba(255,255,255,.12);border:none}
.zoom-bar input[type="range"]::-moz-range-progress{height:3px;border-radius:20px;background:rgba(255,255,255,.35)}
.zoom-bar input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:11px;height:11px;border-radius:50%;background:#fff;border:none;margin-top:-4px;box-shadow:0 1px 3px rgba(0,0,0,.4);cursor:grab}
.zoom-bar input[type="range"]::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:#fff;border:none;box-shadow:0 1px 3px rgba(0,0,0,.4);cursor:grab}
.zoom-bar input[type="range"]:active::-webkit-slider-thumb{cursor:grabbing}
.zoom-bar input[type="range"]:active::-moz-range-thumb{cursor:grabbing}

/* ══ Export buttons ══ */
.export-btn{background:var(--n-bg-elevated);border:1px solid var(--n-border);border-radius:var(--n-radius);padding:12px 26px;color:var(--n-text);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;display:flex;align-items:center;gap:6px;letter-spacing:.3px}
.export-btn:hover{border-color:var(--n-primary);color:#fff;background:rgba(1,112,185,.1);box-shadow:0 0 12px var(--n-primary-glow)}
.export-btn--save{background:var(--n-primary);border-color:var(--n-primary);color:#fff}
.export-btn--save:hover{background:var(--n-primary-hover);box-shadow:0 0 16px var(--n-primary-glow)}
.export-btn:disabled{opacity:.35;cursor:not-allowed}
.export-btn:disabled:hover{border-color:var(--n-border);color:var(--n-text);background:var(--n-bg-elevated);box-shadow:none}

/* ══ Template picker ══ */
.tpl-trigger{width:100%;background:var(--n-bg);border:1px solid var(--n-border);border-radius:6px;padding:8px 10px;color:var(--n-text);font-size:12px;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-family:inherit;transition:border-color .15s}
.tpl-trigger:hover{border-color:rgba(255,255,255,.1)}
.tpl-change{font-size:10px;color:var(--n-text-dim);font-weight:500;transition:color .15s}
.tpl-trigger:hover .tpl-change{color:var(--n-text-muted)}
.tpl-picker{position:fixed;inset:0;z-index:9998;background:rgba(4,8,20,.85);display:none;align-items:center;justify-content:center;backdrop-filter:blur(8px)}
.tpl-picker.open{display:flex}
.tpl-picker-inner{background:var(--n-bg-card);border:1px solid var(--n-border);border-radius:var(--n-radius-lg);width:900px;max-width:94vw;max-height:90vh;overflow-y:auto;padding:32px;box-shadow:0 24px 80px rgba(0,0,0,.5),0 0 60px rgba(1,112,185,.06)}
.tpl-picker-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px;font-family:'Inter',sans-serif;font-size:16px;font-weight:600;color:var(--n-text-bright)}
.tpl-picker-close{background:none;border:none;color:var(--n-text-dim);font-size:16px;cursor:pointer;padding:4px;transition:color .2s}
.tpl-picker-close:hover{color:var(--n-text)}
.tpl-grid{display:grid;grid-template-columns:1fr;gap:16px}
.tpl-card{background:var(--n-bg);border:2px solid var(--n-border);border-radius:var(--n-radius);padding:16px;cursor:pointer;transition:border-color .2s,box-shadow .2s}
.tpl-card:hover{border-color:var(--n-border-hover);box-shadow:0 4px 20px var(--n-primary-glow)}
.tpl-card.active{border-color:var(--n-primary);box-shadow:0 0 20px var(--n-primary-glow)}
.tpl-card-name{font-family:'Inter',sans-serif;font-size:15px;font-weight:600;color:var(--n-text-bright);margin-bottom:6px}
.tpl-card-desc{font-size:11px;color:var(--n-text-dim);margin-bottom:12px;line-height:1.4}
.tpl-card-samples{display:flex;gap:10px;align-items:flex-start}
.tpl-card-samples img{flex:1;max-height:320px;object-fit:contain;border-radius:var(--n-radius-sm);background:var(--n-bg)}

.fsel{width:100%;background:var(--n-bg-input);border:1px solid var(--n-border);border-radius:5px;padding:6px 8px;color:var(--n-text);font-size:11px;outline:none;cursor:pointer;font-family:inherit;transition:border-color .15s}
.fsel:focus{border-color:var(--n-border-active)}

/* ══ Top toolbar ══ */
/* z-index:70 keeps the top-bar (and its .camp-list dropdown, an internal
   z-index:60 inside this stacking context) above the .fmt-float floater (50).
   Templates rail / zoom rail / export buttons now live inside the sidebar
   and the top-bar itself — no stacking conflicts. */
.top-bar{background:var(--n-bg-card);border-bottom:1px solid var(--n-border);padding:8px 20px;display:flex;align-items:center;gap:20px;position:relative;z-index:70}
.top-bar-left{display:flex;align-items:center;gap:16px;flex-shrink:0}
.top-bar-center{position:absolute;left:calc(var(--viewer-left,341px) + 6px);right:0;display:flex;justify-content:center;pointer-events:none}
.top-bar-center .visual-tabs{pointer-events:auto}
.top-bar-right{flex-shrink:0;margin-left:auto;display:flex;align-items:center;gap:12px}
.top-bar-export{display:flex;align-items:center;gap:8px}
.top-bar-export .export-btn{font-size:12px;padding:6px 12px;letter-spacing:.2px}
/* Autosave indicator (B6) — floating top-right inside the canvas area.
   Grey (not green) per request; cloud-check icon; sits below the topbar. */
.save-status{position:absolute;top:14px;right:14px;z-index:40;display:flex;align-items:center;gap:6px;padding:6px 11px;border-radius:8px;background:var(--n-bg-elevated,#161b22);border:1px solid var(--n-border,#30363d);font-size:12px;font-weight:500;letter-spacing:.2px;white-space:nowrap;color:#8b949e;box-shadow:0 2px 8px rgba(0,0,0,.28);transition:color .15s,opacity .15s;pointer-events:none}
.save-status.is-idle{display:none}
.save-status .save-status-ico{flex-shrink:0;width:15px;height:15px}
.save-status .save-status-txt:empty{display:none}
.save-status.is-saving,.save-status.is-unsaved,.save-status.is-saved{color:#8b949e}
.save-status.is-error{color:#f85149}

/* Logo — inline with controls */
.top-bar-logo{display:flex;align-items:center;gap:10px;line-height:1;flex-shrink:0}
.logo-img{height:22px;width:auto;display:block}
.logo-sub{font-size:9px;color:var(--n-text-dim);letter-spacing:2px;text-transform:uppercase;padding-bottom:1px}

/* Controls group — mode switch + campaign selector */
.top-bar-controls{display:flex;align-items:center;gap:10px}

/* Visual tabs in top bar */
.top-bar .visual-tabs{border-bottom:none;gap:8px;height:auto}
.top-bar .vtab{padding:8px 18px;font-size:13px;font-weight:600;border-bottom:none;border-radius:var(--n-radius-sm);margin-bottom:0}
.top-bar .vtab.active{background:rgba(1,112,185,.15);color:var(--n-primary);border-bottom:none}

/* Mode switch */
.mode-switch{display:inline-flex;border-radius:var(--n-radius);padding:3px;background:var(--n-bg-elevated);border:1px solid var(--n-border);flex-shrink:0;gap:2px}
.mode-btn{background:none;border:none;border-radius:calc(var(--n-radius) - 3px);color:var(--n-text-muted);font-size:12px;font-weight:500;padding:8px 18px;cursor:pointer;font-family:inherit;transition:all .15s ease;white-space:nowrap}
.mode-btn:hover{color:var(--n-text)}
.mode-btn.active{background:var(--n-bg-card);color:var(--n-text-bright);box-shadow:0 1px 3px rgba(0,0,0,.2),0 0 0 1px rgba(255,255,255,.04)}
.mode-btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--n-primary-glow)}

.campaign-select-wrap{display:flex;align-items:center;gap:8px;flex-shrink:0}
.campaign-select-wrap select{display:none}
/* Header button — shows current campaign + arrow; click opens the sidebar Campaigns panel. */
.camp-current-btn{display:inline-flex;align-items:center;gap:8px;background:var(--n-bg-elevated);border:1px solid var(--n-border);border-radius:var(--n-radius);padding:6px 12px;color:var(--n-text);font-size:12px;cursor:pointer;font-family:inherit;transition:border-color .15s,background .15s;min-width:200px;max-width:280px}
.camp-current-btn:hover{border-color:var(--n-border-active);background:var(--n-bg-card)}
.camp-current-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.camp-current-label.placeholder{color:var(--n-text-muted)}
.camp-current-arrow{color:var(--n-text-muted);flex-shrink:0}
/* Sticky search at the top of the sidebar Campaigns panel */
.camp-search-wrap{position:sticky;top:0;background:var(--n-bg-card);padding:8px 0 8px 0;display:flex;align-items:center;gap:6px;z-index:2;margin-bottom:4px}
.camp-search-icon{color:var(--n-text-muted);flex-shrink:0;margin-left:4px}
.camp-search{flex:1;background:var(--n-bg);border:1px solid var(--n-border);border-radius:5px;padding:6px 8px;color:var(--n-text);font-size:12px;font-family:inherit;outline:none;transition:border-color .15s,box-shadow .15s}
.camp-search:focus{border-color:var(--n-border-active);box-shadow:0 0 0 2px rgba(1,112,185,.15)}
.camp-search::placeholder{color:var(--n-text-dim)}
.camp-search-clear{background:none;border:0;color:var(--n-text-muted);cursor:pointer;font-size:11px;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:4px;flex-shrink:0}
.camp-search-clear:hover{color:var(--n-text);background:rgba(255,255,255,.06)}
/* Status groups — each gets its own color identity (left accent bar + tinted bg + colored text + colored count). */
.camp-group{border-radius:6px;margin:6px 0;overflow:hidden}
.camp-group-header{display:flex;align-items:center;gap:8px;width:100%;padding:9px 12px 9px 9px;border:0;border-left:3px solid var(--cg-accent,rgba(255,255,255,.2));background:var(--cg-bg,transparent);color:var(--cg-text,var(--n-text-muted));font-size:11px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;cursor:pointer;font-family:inherit;text-align:left;transition:filter .12s,background .12s}
.camp-group-header:hover{filter:brightness(1.15)}
.camp-group-chevron{display:inline-block;width:10px;font-size:8px;transition:transform .15s;flex-shrink:0;color:currentColor;opacity:.65}
.camp-group.collapsed .camp-group-chevron{transform:rotate(-90deg)}
.camp-group-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:currentColor}
.camp-group-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.camp-group-count{background:var(--cg-badge-bg,rgba(255,255,255,.08));color:var(--cg-text,var(--n-text-muted));font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;letter-spacing:.2px;flex-shrink:0;border:1px solid var(--cg-badge-border,transparent)}
.camp-group-body{padding:2px 0 6px}
.camp-group.collapsed .camp-group-body{display:none}
/* Per-status color identity. */
.camp-group[data-status="Review Client"]{--cg-accent:#3b9bff;--cg-bg:rgba(59,155,255,.08);--cg-text:#7cc1ff;--cg-badge-bg:rgba(59,155,255,.18);--cg-badge-border:rgba(59,155,255,.25)}
.camp-group[data-status="Review Consultant"]{--cg-accent:#22d3ee;--cg-bg:rgba(34,211,238,.07);--cg-text:#67e8f9;--cg-badge-bg:rgba(34,211,238,.18);--cg-badge-border:rgba(34,211,238,.25)}
.camp-group[data-status="Changes Client"]{--cg-accent:#f87171;--cg-bg:rgba(248,113,113,.08);--cg-text:#fca5a5;--cg-badge-bg:rgba(248,113,113,.18);--cg-badge-border:rgba(248,113,113,.25)}
.camp-group[data-status="Changes Consultant"]{--cg-accent:#fb923c;--cg-bg:rgba(251,146,60,.08);--cg-text:#fdba74;--cg-badge-bg:rgba(251,146,60,.18);--cg-badge-border:rgba(251,146,60,.25)}
.camp-group[data-status="Generate Visuals"]{--cg-accent:#c084fc;--cg-bg:rgba(192,132,252,.08);--cg-text:#d8b4fe;--cg-badge-bg:rgba(192,132,252,.18);--cg-badge-border:rgba(192,132,252,.25)}
.camp-empty{padding:18px 12px;text-align:center;color:var(--n-text-dim);font-size:11px;font-style:italic}
/* Loading state — shown while the API call is in flight */
.camp-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:24px 12px;color:var(--n-text-muted);font-size:11px}
.camp-loading-spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.1);border-top-color:var(--n-primary);border-radius:50%;animation:campSpin .8s linear infinite}
@keyframes campSpin{to{transform:rotate(360deg)}}
/* Campaign cards — row layout mirroring .tpl-card-row */
.camp-card-row{display:flex;align-items:center;gap:10px;border-radius:8px;border:1px solid var(--n-border);background:var(--n-bg);padding:8px 10px;margin:4px 0;cursor:pointer;transition:border-color .12s,background .12s;font-family:inherit}
.camp-card-row:hover{border-color:var(--n-border-hover);background:var(--n-bg-hover)}
.camp-card-row.active{border-color:var(--n-primary);background:rgba(1,112,185,.08);box-shadow:0 0 0 1px var(--n-primary),0 0 12px var(--n-primary-glow)}
.camp-card-thumb{flex-shrink:0;width:60px;height:60px;border-radius:4px;background:#000;border:1px solid rgba(255,255,255,.04);display:block;overflow:hidden}
.camp-card-thumb-img{width:60px;height:60px;object-fit:cover}
.camp-card-thumb-empty{display:flex;align-items:center;justify-content:center}
.camp-card-thumb-empty.review{background:rgba(1,112,185,.18)}
.camp-card-thumb-empty.pending{background:rgba(245,158,11,.18)}
.camp-card-thumb-empty.done{background:rgba(123,220,181,.18)}
.camp-card-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.camp-card-name{font-size:12px;line-height:1.25;letter-spacing:.2px;color:var(--n-text-bright);display:flex;align-items:baseline;gap:6px;min-width:0}
.camp-card-code{color:var(--n-primary);font-weight:700;letter-spacing:.4px;flex:0 0 auto;white-space:nowrap}
.camp-card-row.active .camp-card-code{color:#7cc1ff}
.camp-card-title{font-weight:600;color:var(--n-text-bright);flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.camp-card-row.active .camp-card-title{color:#fff}
.camp-card-desc{font-size:10.5px;color:var(--n-text-muted);line-height:1.35;display:flex;align-items:center;gap:8px}
.camp-card-status{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.camp-card-dots{color:var(--n-text-dim);font-size:11px;letter-spacing:1px;flex-shrink:0}
.camp-card-row.active .camp-card-dots{color:var(--n-primary)}
/* Legacy .camp-item kept only for defensive compat; new rows use .camp-card-row. */
.camp-item{display:none}
.camp-item-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.camp-item-dot.pending{background:#f59e0b}
.camp-item-dot.review{background:var(--n-primary)}
.camp-item-dot.done{background:var(--n-accent)}
.camp-label{font-weight:600;color:#fff;flex-shrink:0}
.camp-status{font-size:10px;padding:2px 7px;border-radius:4px;font-weight:500;flex-shrink:0}
.camp-status.st-generate{background:rgba(245,158,11,.2);color:#fbbf24}
.camp-status.st-review{background:rgba(1,112,185,.2);color:#4db8ff}
.camp-status.st-changes{background:rgba(239,68,68,.2);color:#f87171}
.camp-status.st-default{background:rgba(255,255,255,.1);color:var(--n-text-dim)}
.camp-dots{color:var(--n-text-dim);font-size:11px;margin-left:auto;flex-shrink:0}
.campaign-status{font-size:10px;border-radius:4px;padding:3px 10px;letter-spacing:.3px;font-weight:500;color:var(--n-text-dim);background:rgba(255,255,255,.1)}
.campaign-status.st-generate{background:rgba(245,158,11,.2);color:#fbbf24}
.campaign-status.st-review{background:rgba(1,112,185,.2);color:#4db8ff}
.campaign-status.st-changes{background:rgba(239,68,68,.2);color:#f87171}
.campaign-status.st-default{background:rgba(255,255,255,.1);color:var(--n-text-dim)}

/* Templates gallery — row-style list inside .panel-section[data-section="templates"].
   Each row: static 1:1 sample image (left) + name & description (right).
   Hovering a row for >300ms surfaces a floating popup (.tpl-hover-popup) with
   the 1:1 + 9:16 samples side by side — see js/templates-rail.js. */
.templates-rail-list{display:flex;flex-direction:column;gap:6px;padding:8px 0 4px}
.tpl-card-row{display:flex;align-items:center;gap:10px;border-radius:8px;border:1px solid var(--n-border);background:var(--n-bg);padding:8px 10px;cursor:pointer;transition:border-color .12s,background .12s;font-family:inherit}
.tpl-card-row:hover{border-color:var(--n-border-hover);background:var(--n-bg-hover)}
.tpl-card-row.active{border-color:var(--n-primary);background:rgba(1,112,185,.08);box-shadow:0 0 0 1px var(--n-primary),0 0 12px var(--n-primary-glow)}
.tpl-card-sample{flex-shrink:0;width:60px;height:60px;object-fit:cover;border-radius:4px;background:#000;border:1px solid rgba(255,255,255,.04);pointer-events:none;display:block}
.tpl-card-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.tpl-card-name{font-size:12px;font-weight:600;color:var(--n-text-bright);line-height:1.25;letter-spacing:.2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpl-card-id{color:var(--n-text-muted);font-weight:700;letter-spacing:.4px}
.tpl-card-row.active .tpl-card-id{color:var(--n-primary)}
.tpl-card-desc{font-size:10.5px;color:var(--n-text-muted);line-height:1.35;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.tpl-card-row.active .tpl-card-name{color:#fff}

/* Custom (global) templates in the rail (T11, T12, …) — created from the app.
   Live preview (no static image): the 1080×1080 ad scaled into the 60px box. */
.tpl-card-sample--live{overflow:hidden;position:relative}
.tpl-card-sample--live .cg-ad{transform:scale(.0556);transform-origin:top left;pointer-events:none}

/* Hover popup — appears 300ms after pointer enters a .tpl-card-row.
   Anchored to the right of the card (or left if it would overflow). */
.tpl-hover-popup{position:fixed;z-index:1000;background:var(--n-bg-card);border:1px solid var(--n-border);border-radius:var(--n-radius);padding:14px;box-shadow:0 12px 40px rgba(0,0,0,.5),0 0 30px rgba(1,112,185,.06);opacity:0;pointer-events:none;transition:opacity .15s ease,transform .2s ease;transform:translateX(-4px)}
.tpl-hover-popup.visible{opacity:1;transform:translateX(0)}
.tpl-hover-popup .thp-head{display:flex;align-items:baseline;gap:8px;margin-bottom:10px}
.tpl-hover-popup .thp-id{font-size:11px;font-weight:700;letter-spacing:.5px;color:var(--n-primary)}
.tpl-hover-popup .thp-name{font-family:'Inter',sans-serif;font-size:14px;font-weight:600;color:#fff}
.tpl-hover-popup .thp-imgs{display:flex;gap:10px;align-items:flex-end}
.tpl-hover-popup .thp-img{display:block;border-radius:6px;background:#000;object-fit:contain}
.tpl-hover-popup .thp-img-11{width:240px;height:240px}
.tpl-hover-popup .thp-img-916{width:135px;height:240px}

/* Floating format toggle — below template bar */
.fmt-float{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:50;display:inline-flex;border-radius:var(--n-radius);padding:3px;background:var(--n-bg);border:1px solid var(--n-border);gap:2px;box-shadow:0 4px 20px rgba(0,0,0,.3);transition:opacity .15s ease,transform .2s ease}
.fmt-float.hidden-by-canvas{opacity:0;transform:translate(-50%,-30px);pointer-events:none}
.fmt-btn{background:none;border:none;border-radius:calc(var(--n-radius) - 3px);color:var(--n-text-muted);font-size:12px;font-weight:600;padding:8px 18px;cursor:pointer;font-family:inherit;transition:all .15s;white-space:nowrap}
.fmt-btn:hover{color:var(--n-text)}
.fmt-btn.active{background:var(--n-primary);color:#fff;box-shadow:0 1px 8px var(--n-primary-glow)}

/* Visual tabs */
.visual-tabs{display:flex;gap:24px;justify-content:center;border-bottom:2px solid transparent;position:relative;z-index:2;flex-shrink:0;height:100%}
.vtab{background:none;border:none;border-bottom:2px solid transparent;color:var(--n-text-muted);font-size:13px;font-weight:500;padding:10px 4px;margin-bottom:-2px;cursor:pointer;font-family:inherit;display:inline-flex;align-items:center;gap:6px;transition:all .15s ease;white-space:nowrap}
.vtab:hover{color:var(--n-primary)}
.vtab.active{color:var(--n-primary);border-bottom-color:var(--n-primary)}
.vtab:focus-visible{outline:none;box-shadow:0 0 0 2px var(--n-primary-glow);border-radius:var(--n-radius-sm)}
.vtab-indicator{width:7px;height:7px;border-radius:50%;display:inline-block;transition:all .2s}
.vtab-indicator.saved{background:var(--n-accent);box-shadow:0 0 6px var(--n-accent-glow)}
.vtab-indicator.saving{background:#f59e0b;animation:pulse .8s infinite alternate;box-shadow:0 0 6px rgba(245,158,11,.3)}
.vtab-indicator.has-data{background:rgba(255,255,255,.12)}
@keyframes pulse{from{opacity:.4}to{opacity:1}}

/* ══ Buttons ══ */
.dl-btn{width:100%;padding:10px;margin-top:8px;background:var(--n-primary);border:none;border-radius:6px;color:#fff;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;position:relative;overflow:hidden;letter-spacing:.3px}
.dl-btn:hover{background:var(--n-primary-hover);box-shadow:0 2px 12px var(--n-primary-glow)}
.dl-btn:disabled{background:var(--n-bg-elevated);color:var(--n-text-dim);cursor:not-allowed;box-shadow:none}
.save-btn{background:var(--n-secondary);margin-top:4px}
.save-btn:hover:not(:disabled){background:#081b54;box-shadow:0 2px 12px rgba(4,17,61,.4)}

/* ══ Save Modal ══ */
.save-overlay{position:fixed;inset:0;z-index:90000;background:rgba(4,8,20,.7);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .2s;backdrop-filter:blur(8px)}
.save-overlay.open{opacity:1;pointer-events:auto}
.save-modal{background:var(--n-bg-card);border:1px solid var(--n-border);border-radius:var(--n-radius-lg);padding:24px 28px;min-width:320px;max-width:400px;box-shadow:0 24px 80px rgba(0,0,0,.5),0 0 60px rgba(1,112,185,.06);position:relative;overflow:hidden}
/* Glass reflection on modal */
.save-modal::before{content:'';position:absolute;top:0;left:0;right:0;height:50%;background:linear-gradient(180deg,rgba(255,255,255,.02) 0%,transparent 100%);pointer-events:none;border-radius:var(--n-radius-lg) var(--n-radius-lg) 0 0}
.save-modal h3{font-family:'Inter',sans-serif;font-size:16px;font-weight:600;color:var(--n-text-bright);margin-bottom:16px}
.save-modal-btns{display:flex;flex-direction:column;gap:8px}
.save-modal-btn{padding:12px 16px;border:1px solid var(--n-border);border-radius:var(--n-radius);background:var(--n-bg);color:var(--n-text);font-size:13px;font-weight:500;cursor:pointer;text-align:left;font-family:inherit;transition:all .2s}
.save-modal-btn:hover{background:var(--n-bg-hover);border-color:var(--n-border-hover)}
.save-modal-btn.primary{background:var(--n-primary);border-color:var(--n-primary);color:#fff}
.save-modal-btn.primary:hover{background:var(--n-primary-hover);box-shadow:0 0 16px var(--n-primary-glow)}
.save-modal-btn .btn-sub{font-size:11px;color:var(--n-text-dim);margin-top:2px}
.save-modal-btn.primary .btn-sub{color:rgba(255,255,255,.6)}
.save-modal-cancel{margin-top:8px;padding:8px;background:none;border:none;color:var(--n-text-dim);font-size:12px;cursor:pointer;font-family:inherit;text-align:center;width:100%;transition:color .2s}
.save-modal-cancel:hover{color:var(--n-text)}

/* ══ Custom Checkbox (inspired by React Checkbox component) ══ */
.nchk{display:inline-flex;align-items:center;cursor:pointer;position:relative;flex-shrink:0}
.nchk input{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;white-space:nowrap;border:0;clip:rect(0,0,0,0)}
.nchk-box{width:16px;height:16px;border-radius:4px;border:1px solid rgba(255,255,255,.15);background:var(--n-bg-input);display:inline-flex;align-items:center;justify-content:center;transition:all .2s;flex-shrink:0}
.nchk-box svg{width:14px;height:14px;stroke:transparent;transition:stroke .15s}
.nchk:hover .nchk-box{border-color:var(--n-border-hover);background:var(--n-bg-hover)}
.nchk input:checked+.nchk-box{background:var(--n-primary);border-color:var(--n-primary);box-shadow:0 0 10px var(--n-primary-glow)}
.nchk input:checked+.nchk-box svg{stroke:#fff}
.nchk input:focus-visible+.nchk-box{box-shadow:0 0 0 3px var(--n-primary-glow)}

/* Approved templates list + .atpl-* moved to canva.css → .cfg-modal scope (Step 32). */

/* ══ Preview mode (?preview=1) — solo el print, embebible en iframe ══
   La clase vive en <html> (script en <head>, pre-primer-paint): el fondo
   crema aplica desde el frame 0 y el chrome oscuro nunca llega a verse. */
html.preview-mode,
html.preview-mode body{background:#f2eee7}
html.preview-mode .top-bar,
html.preview-mode .sidebar,
html.preview-mode .resize-handle,
html.preview-mode .save-status,
html.preview-mode .zoom-bar,
html.preview-mode .fmt-float,
html.preview-mode .tpl-picker,
html.preview-mode .mask-modal,
html.preview-mode .save-overlay,
html.preview-mode .blank-pick-modal{display:none !important}
html.preview-mode .prev{pointer-events:none;background:transparent}
html.preview-mode .prev::before{display:none}
/* A sangre completa: el print llena el viewport del iframe de borde a borde —
   sin padding, sin sombras ni radios propios (el marco lo pone el panel). */
html.preview-mode .prev-content{padding:0;gap:0}
html.preview-mode .plbl{display:none}
html.preview-mode .sbox{box-shadow:none;border-radius:0}

/* Overlay de carga del preview: crema + logo pulsando hasta montar el print */
#preview-loading{position:fixed;inset:0;z-index:99999;background:#f2eee7;display:flex;align-items:center;justify-content:center;opacity:1;transition:opacity .3s ease}
#preview-loading img{width:120px;height:auto;animation:pl-pulse 1.6s ease-in-out infinite}
#preview-loading.is-done{opacity:0;pointer-events:none}
@keyframes pl-pulse{0%,100%{opacity:.4}50%{opacity:.95}}

/* ══ Photoshop shell (2026-07-27) — options bar superior + dock derecho ══ */
/* Barra de opciones contextual a lo Photoshop: aloja el #canvasTopbar dockeado
   (topbar.js lo monta aquí). Franja fija bajo la top bar, ancho completo. */
#optionsBar{height:42px;flex-shrink:0;background:var(--n-bg-card);border-bottom:1px solid var(--n-border);display:flex;align-items:center;padding:0 10px;overflow:visible;position:relative;z-index:70}
#optionsBar .canvas-topbar{position:static;transform:none;margin:0;box-shadow:none;border:none;background:transparent;border-radius:0;max-width:100%;overflow:visible;padding:0}
#optionsBar .ob-hint{font-size:11px;color:var(--n-text-dim);letter-spacing:.2px;user-select:none}
/* La pista solo se ve cuando el topbar contextual está oculto (sin selección). */
#optionsBar:has(.canvas-topbar[style*="flex"]) .ob-hint{display:none}

/* Dock derecho estilo Photoshop: Properties (arriba) + Layers (abajo), siempre visibles. */
.right-dock{width:268px;flex-shrink:0;background:var(--n-bg-card);border-left:1px solid var(--n-border);display:flex;flex-direction:column;min-height:0;overflow:hidden}
.right-dock.is-hidden{display:none}
.dock-panel{display:flex;flex-direction:column;min-height:0}
.dock-title{font-size:11px;font-weight:600;color:var(--n-text);padding:9px 12px;background:var(--n-bg-elevated);border-top:1px solid var(--n-border);border-bottom:1px solid var(--n-border);letter-spacing:.4px;flex-shrink:0}
.dock-panel:first-child .dock-title{border-top:none}
.dock-body{padding:10px 12px;overflow-y:auto}
#propsDock{flex:0 1 auto;max-height:48%}
#layersDock{flex:1 1 0;min-height:0}
#layersDock .dock-body{flex:1;min-height:0}
/* Ambos panes del antiguo panel Position viven ahora apilados en el dock. */
.right-dock .pos-pane{display:block}

/* El modo preview (iframe del panel LP) oculta todo el chrome nuevo también. */
.preview-mode #optionsBar,.preview-mode .right-dock{display:none}

/* Compactación del pane Arrange dentro del dock (heredó el layout del panel ancho). */
#propsDock{max-height:56%}
.right-dock .pp-grid{gap:4px}
.right-dock .pp-btn{display:flex;flex-direction:row;justify-content:flex-start;align-items:center;gap:8px;padding:6px 8px;min-height:0}
.right-dock .pp-btn .pp-btn-icon{display:flex}
.right-dock .pp-btn .pp-btn-icon svg{width:14px;height:14px}
.right-dock .pp-btn-label{font-size:11px}
.right-dock .pp-section{margin-bottom:10px}
.right-dock .pp-section-title{font-size:10px;letter-spacing:.5px;color:var(--n-text-muted);margin-bottom:6px}
.right-dock .pp-coord span{font-size:10px}

/* Rail = barra de herramientas Photoshop: estrecha, solo iconos (tooltip via
   title), apilados desde arriba (sin centrado vertical de Needles). */
.icon-bar{width:44px;padding:6px 0;gap:4px}
.ib-btn{width:34px;padding:8px 0;gap:0}
.ib-btn > span:not(.ib-icon){display:none}
.ib-center-group{position:static;transform:none;margin-top:2px;display:flex;flex-direction:column;align-items:center;gap:4px}
.app.panel-closed .sidebar{width:44px}