/* ============ Sobres · editor (panel de edición) ============
   Todo con prefijo ed- para no chocar con app.css. El contenedor recibe la clase .ed
   desde Sobres.editor.mount(); .ed--open lo muestra. */

.ed{
  --hair:#e6ddd2; --ink:#1e1917; --ink2:#6f655d; --soft:#f6f2ec; --soft2:#efe9e1; --danger:#b3261e;
  --serif:"Fraunces",Georgia,serif; --sans:"Nunito",system-ui,sans-serif;
  position:fixed; z-index:40; background:#fff; color:var(--ink); font-family:var(--sans);
  display:flex; flex-direction:column; visibility:hidden; overflow:hidden;
  transition:transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s linear .32s;
  -webkit-font-smoothing:antialiased;
}
.ed.ed--open{visibility:visible; transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.ed.ed--drag{transition:none}
.ed *{box-sizing:border-box}
.ed [hidden]{display:none !important}
:where(.ed button){font:inherit; color:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent}
.ed button:disabled{cursor:default}
.ed button:focus-visible,.ed input:focus-visible{outline:3px solid var(--ink); outline-offset:2px}

/* PC: panel lateral derecho */
@media (min-width:900px){
  .ed{top:0; right:0; bottom:0; width:400px; border-left:1px solid var(--hair); box-shadow:-12px 0 40px rgba(0,0,0,.08); transform:translateX(100%)}
  .ed.ed--open{transform:none}
  .ed-grip{display:none}
}
/* Celular: hoja inferior con asa */
@media (max-width:899px){
  .ed{left:0; right:0; bottom:0; max-height:60svh; border-radius:22px 22px 0 0; box-shadow:0 -12px 40px rgba(0,0,0,.16); transform:translateY(100%)}
  .ed.ed--open{transform:none}
  .ed-grip,.ed-head{touch-action:none}
  .ed-head{padding-top:2px}
}

/* ---- asa, cabecera, pestañas ---- */
.ed-grip{height:22px; display:grid; place-items:center; cursor:grab; flex:none}
.ed-grip::before{content:""; width:48px; height:5px; border-radius:999px; background:#d2c9bf}
.ed-head{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 18px 8px; flex:none}
.ed-title{font-family:var(--serif); font-weight:600; font-size:22px; margin:0; line-height:1.1}
.ed-done{border:0; background:var(--ink); color:#fff; border-radius:999px; min-height:44px; padding:0 18px; font-weight:800; font-size:15px}
.ed-done:hover{background:#3a322d}

.ed-tabs{display:grid; grid-template-columns:repeat(5,1fr); gap:4px; padding:4px 12px 10px; border-bottom:1px solid var(--hair); flex:none}
.ed-tab{min-height:54px; border:0; background:transparent; border-radius:12px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; font-size:12px; font-weight:800; color:var(--ink2); padding:4px 2px}
.ed-tab i{font-style:normal; font-size:20px; line-height:1}
.ed-tab:hover{background:var(--soft)}
.ed-tab.on{background:var(--soft); color:var(--ink); box-shadow:inset 0 -3px 0 var(--ink)}

/* ---- cuerpo con scroll propio ---- */
.ed-body{flex:1; min-height:0; overflow:auto; overscroll-behavior:contain; padding:16px 18px 22px; scrollbar-width:thin; scrollbar-color:#d2c9bf transparent}
.ed-pane{display:none}
.ed-pane.on{display:block}
.ed-group{margin:0 0 18px}
.ed-group:last-child{margin-bottom:0}
.ed-lbl,.ed-field>span{display:block; font-size:13px; font-weight:800; color:var(--ink2); margin:0 0 8px}
.ed-sub{font-size:12.5px; color:var(--ink2); margin:8px 0 0; line-height:1.4}
.ed-mt{margin-top:8px}
.ed-row{display:flex; gap:8px; align-items:stretch; margin-top:8px}
.ed-two{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.ed-card{border:1.5px solid var(--hair); border-radius:14px; padding:2px 14px 12px; margin:0 0 18px}
.ed-card:has(.ed-welcome-fields[hidden]){padding-bottom:2px}

/* inputs */
.ed input[type=text]{width:100%; min-height:44px; border:1.5px solid var(--hair); border-radius:12px; padding:10px 12px; font:inherit; font-size:15px; background:#fff; color:var(--ink)}
.ed input[type=text]:focus{border-color:var(--ink)}
.ed input[type=text]::placeholder{color:#aaa196}
.ed-field{display:block; margin:0 0 10px}
.ed-field>span{margin-bottom:6px}
.ed-two .ed-field{margin-bottom:0}
.ed-welcome-fields{padding-top:4px}

/* botones */
.ed-btn{border:1.5px solid var(--hair); background:#fff; border-radius:12px; min-height:44px; padding:8px 14px; font-weight:800; font-size:14px; color:var(--ink); white-space:nowrap}
.ed-btn:hover{background:var(--soft)}
.ed-btn.primary{background:var(--ink); color:#fff; border-color:var(--ink)}
.ed-btn.primary:hover{background:#3a322d}
.ed-btn.big{width:100%; min-height:52px; font-size:15px}
.ed-btn.grow{flex:1 1 auto}
.ed-btn.on{background:var(--soft); border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink)}
.ed-btn.danger{color:var(--danger); border-color:#f1c9c5; background:#fff5f4}
.ed-btn.danger:hover{background:#ffe9e6}
.ed-btn:disabled{opacity:.4; background:#fff}

/* interruptor (fila completa tocable) */
.ed-switchrow{display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%; min-height:60px; border:0; background:transparent; padding:10px 0; text-align:left}
.ed-switchrow>span{min-width:0}
.ed-switchrow b{display:block; font-size:15px; font-weight:800}
.ed-switchrow small{display:block; font-size:12.5px; color:var(--ink2); margin-top:2px; line-height:1.35}
.ed-switch{position:relative; flex:none; width:50px; height:30px; border-radius:999px; background:#d8d0c6; transition:background .2s}
.ed-switch::after{content:""; position:absolute; top:3px; left:3px; width:24px; height:24px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s}
.ed-switchrow[aria-checked="true"] .ed-switch{background:var(--ink)}
.ed-switchrow[aria-checked="true"] .ed-switch::after{transform:translateX(20px)}

/* sliders: pista 12px, pulgar 24px */
.ed-sl{display:grid; grid-template-columns:1fr 48px; align-items:center; column-gap:10px}
.ed-sl label{grid-column:1 / -1; font-size:13px; font-weight:800; color:var(--ink2); margin-bottom:4px}
.ed-tone{display:grid; grid-template-columns:92px 1fr 48px; align-items:center; gap:10px; margin:4px 0}
.ed-tone label{font-size:13px; font-weight:800; color:var(--ink2)}
.ed-val{text-align:right; font-size:13px; font-weight:800; color:var(--ink2); font-variant-numeric:tabular-nums}
.ed-range{width:100%; height:32px; margin:0; -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer}
.ed-range::-webkit-slider-runnable-track{height:12px; border-radius:999px; background:var(--track,#ddd)}
.ed-range::-webkit-slider-thumb{-webkit-appearance:none; width:24px; height:24px; border-radius:50%; background:#fff; border:2px solid var(--ink); margin-top:-6px; box-shadow:0 2px 6px rgba(0,0,0,.2)}
.ed-range::-moz-range-track{height:12px; border-radius:999px; background:var(--track,#ddd)}
.ed-range::-moz-range-thumb{width:20px; height:20px; border-radius:50%; background:#fff; border:2px solid var(--ink); box-shadow:0 2px 6px rgba(0,0,0,.2)}

/* ---- Tema ---- */
.ed-themes{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.ed-theme{display:flex; align-items:center; gap:10px; min-height:58px; border:1.5px solid var(--hair); border-radius:14px; background:#fff; padding:10px 12px; font-weight:800; font-size:14px; text-align:left; line-height:1.15}
.ed-theme i{font-style:normal; font-size:26px; line-height:1; flex:none}
.ed-theme:hover{background:var(--soft)}
.ed-theme.on{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); background:var(--soft)}

/* ---- Sobre ---- */
.ed-emojis{display:grid; grid-template-columns:repeat(auto-fill,minmax(44px,1fr)); gap:8px}
.ed-emoji{width:100%; aspect-ratio:1; min-height:44px; border:1.5px solid var(--hair); border-radius:12px; background:#fff; font-size:22px; line-height:1; padding:0}
.ed-emoji:hover{background:var(--soft)}
.ed-emoji.on{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); background:var(--soft)}
.ed-patterns{display:flex; flex-wrap:wrap; gap:8px}
.ed-pat{display:flex; align-items:center; gap:8px; min-height:44px; border:1.5px solid var(--hair); border-radius:999px; padding:5px 14px 5px 6px; background:#fff; font-weight:800; font-size:13px}
.ed-pat i{width:32px; height:32px; border-radius:50%; flex:none; background-color:#a89d93; background-image:var(--p,none); background-size:14px 14px}
.ed-pat:hover{background:var(--soft)}
.ed-pat.on{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); background:var(--soft)}

/* ---- Hojas ---- */
.ed-strip{display:flex; gap:10px; overflow-x:auto; overflow-y:hidden; padding:4px 2px 10px; scroll-snap-type:x proximity; scrollbar-width:thin; scrollbar-color:#d2c9bf transparent}
.ed-thumb{position:relative; flex:none; height:64px; width:calc(64px * var(--ar,1.45)); min-width:44px; border:2px solid var(--hair); border-radius:10px; background:linear-gradient(var(--c,#fff),var(--c,#fff)),repeating-conic-gradient(#e6ddd2 0 25%,#fff 0 50%) 0 0/12px 12px; display:grid; place-items:center; padding:0; scroll-snap-align:center; box-shadow:0 2px 6px rgba(0,0,0,.08)}
.ed-thumb i{font-style:normal; font-size:20px; line-height:1}
.ed-thumb b{position:absolute; right:4px; bottom:3px; font-size:11px; font-weight:800; opacity:.8}
.ed-thumb.on{border-color:var(--ink); box-shadow:0 0 0 2px var(--ink)}
.ed-kinds{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:8px; padding:10px; border-radius:14px; background:var(--soft)}
.ed-kind{display:flex; align-items:center; gap:10px; min-height:56px; border:1.5px solid var(--hair); border-radius:12px; background:#fff; padding:8px 10px; text-align:left}
.ed-kind i{font-style:normal; font-size:24px; line-height:1; flex:none}
.ed-kind b{display:block; font-size:14px; font-weight:800}
.ed-kind small{display:block; font-size:12px; color:var(--ink2)}
.ed-kind:hover{border-color:var(--ink)}
.ed-fmts{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.ed-fmt{display:flex; align-items:center; gap:10px; min-height:48px; border:1.5px solid var(--hair); border-radius:12px; background:#fff; padding:8px 12px; font-weight:800; font-size:14px; text-align:left}
.ed-fmt i{height:20px; width:calc(20px * var(--ar,1.45)); max-width:40px; border:2px solid currentColor; border-radius:3px; flex:none; opacity:.8}
.ed-fmt:hover{background:var(--soft)}
.ed-fmt.on{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); background:var(--soft)}
.ed-seg{display:flex; background:var(--soft2); border-radius:14px; padding:4px; gap:4px}
.ed-seg button{flex:1; min-height:40px; border:0; background:transparent; border-radius:11px; padding:6px 8px; font-weight:800; font-size:14px; color:var(--ink2); display:flex; align-items:center; justify-content:center; gap:8px}
.ed-seg button.on{background:#fff; color:var(--ink); box-shadow:0 2px 6px rgba(0,0,0,.08)}

/* ---- Contenido ---- */
.ed-stock{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px}
.ed-stock-it{aspect-ratio:1;min-height:44px;border:1.5px solid var(--hair);border-radius:12px;background-color:#eee;background-size:cover;background-position:center;padding:0;cursor:pointer}
.ed-stock-it:hover{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.ed-paint{margin-top:12px; padding:12px; border-radius:14px; background:var(--soft)}
.ed-brushes{display:grid; grid-template-columns:repeat(auto-fill,minmax(40px,1fr)); gap:6px; justify-items:center}
.ed-brush{width:40px; height:40px; border-radius:50%; border:0; padding:0; background:transparent; display:grid; place-items:center}
.ed-brush::before{content:""; width:30px; height:30px; border-radius:50%; background:var(--c); box-shadow:0 0 0 1.5px rgba(0,0,0,.12), inset 0 0 0 2px #fff}
.ed-brush.on::before{box-shadow:0 0 0 3px var(--ink), inset 0 0 0 2px #fff}
.ed-sizes button i{display:block; border-radius:50%; background:currentColor; flex:none}
.ed-items{display:flex; flex-direction:column; gap:6px}
.ed-item{display:flex; align-items:center; gap:4px; border:1.5px solid var(--hair); border-radius:12px; background:#fff; padding:3px 3px 3px 10px}
.ed-item.on{border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); background:var(--soft)}
.ed-item-main{flex:1; min-width:0; display:flex; align-items:center; gap:10px; min-height:42px; border:0; background:transparent; text-align:left; font-weight:700; font-size:14px; padding:4px 0}
.ed-ico{font-style:normal; font-size:18px; line-height:1; flex:none}
.ed-item-name{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.ed-lock{font-size:13px; flex:none}
.ed-trash{width:42px; height:42px; flex:none; border:0; background:transparent; border-radius:10px; font-size:16px; line-height:1; padding:0}
.ed-trash:hover{background:#fff0ee}
.ed-empty{margin:0; padding:14px; border:1.5px dashed var(--hair); border-radius:12px; font-size:13.5px; color:var(--ink2); text-align:center; line-height:1.4}
.ed-tip{display:flex; gap:10px; align-items:flex-start; margin-top:18px; padding:12px 14px; border-radius:12px; background:var(--soft); font-size:13px; color:var(--ink2); line-height:1.45}
.ed-tip span:first-child{font-size:16px; line-height:1.2}

/* ---- Colores (acordeón de filas) ---- */
.ed-crow{border:1.5px solid var(--hair); border-radius:14px; background:#fff; margin-bottom:8px; overflow:hidden}
.ed-crow.open{border-color:var(--ink)}
.ed-crow-head{display:flex; align-items:center; gap:12px; width:100%; min-height:60px; border:0; background:transparent; padding:8px 14px 8px 10px; text-align:left}
.ed-crow-head:hover{background:var(--soft)}
.ed-cchip{width:44px; height:44px; border-radius:50%; flex:none; background:linear-gradient(var(--c,#fff),var(--c,#fff)),repeating-conic-gradient(#d9d2c9 0 25%,#fff 0 50%) 0 0/12px 12px; box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.12)}
.ed-crow-name{flex:1; min-width:0}
.ed-crow-name b{display:block; font-size:15px; font-weight:800}
.ed-crow-name small{display:block; font-size:12px; color:var(--ink2); font-weight:700}
.ed-chev{flex:none; color:var(--ink2); transition:transform .2s}
.ed-crow.open .ed-chev{transform:rotate(180deg)}
.ed-cpop{display:none; padding:6px 14px 14px; border-top:1px solid var(--hair); background:var(--soft)}
.ed-crow.open .ed-cpop{display:block}
.ed-presets{display:grid; grid-template-columns:repeat(5,1fr); gap:6px; justify-items:center; margin:8px 0 10px}
.ed-preset{width:44px; height:44px; border-radius:50%; border:0; padding:0; background:transparent; display:grid; place-items:center}
.ed-preset::before{content:""; width:34px; height:34px; border-radius:50%; background:var(--c); box-shadow:0 0 0 1.5px rgba(0,0,0,.12), inset 0 0 0 2px #fff}
.ed-preset.on::before{box-shadow:0 0 0 3px var(--ink), inset 0 0 0 2px #fff}
.ed-cdone{width:100%; margin-top:10px}

/* ---- pie y aviso ---- */
.ed-foot{display:flex; gap:8px; padding:10px 18px calc(14px + env(safe-area-inset-bottom,0px)); border-top:1px solid var(--hair); background:#fff; flex:none}
.ed-foot .ed-btn{padding-left:12px; padding-right:12px}
.ed-toast{position:absolute; left:50%; bottom:calc(84px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,10px); max-width:calc(100% - 36px); background:var(--ink); color:#fff; border-radius:999px; padding:10px 16px; font-weight:800; font-size:14px; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.ed-toast.show{opacity:1; transform:translate(-50%,0)}

/* ---- pantallas angostas ---- */
@media (max-width:380px){
  .ed-body{padding:14px 14px 20px}
  .ed-head{padding-left:14px; padding-right:14px}
  .ed-tab{font-size:11px}
  .ed-tone{grid-template-columns:80px 1fr 44px}
  .ed-foot{padding-left:14px; padding-right:14px}
  .ed-foot .ed-btn{font-size:13px; padding-left:10px; padding-right:10px}
}

/* ---- menos movimiento ---- */
@media (prefers-reduced-motion:reduce){
  .ed, .ed *{transition:none !important; animation:none !important}
  .ed-strip{scroll-behavior:auto}
}

/* mitad de una fila (Monto / Para quién…) */
.ed-half{flex:1 1 0; min-width:0}

/* ---- fondos (Club) ---- */
.ed-fondos{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ed-fondo{display:flex;align-items:center;gap:10px;min-height:52px;border:1.5px solid var(--hair);border-radius:14px;background:#fff;padding:8px 10px;font-weight:800;font-size:13.5px;text-align:left;cursor:pointer}
.ed-fondo i{width:34px;height:34px;border-radius:10px;flex:none;background:linear-gradient(160deg,#ffd9c9,#ffb39b)}
.ed-fondo-aurora i{background:linear-gradient(135deg,#0f2a44,#1d6b6b 45%,#7d49d3)}
.ed-fondo-dorado i{background:radial-gradient(circle at 30% 30%,#ffe38a,#d7a53b 60%,#7a5410)}
.ed-fondo-estrellas i{background:radial-gradient(circle at 70% 30%,#fff 1px,transparent 2px),radial-gradient(circle at 30% 60%,#fff 1px,transparent 2px),#101b3a}
.ed-fondo.on{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink);background:var(--soft)}
.ed-fondo.lock{opacity:.6}
html[data-theme="dark"] .ed .ed-fondo{background:#2a241e;border-color:#3a332b}
html[data-theme="dark"] .ed .ed-fondo.on{border-color:#f3ece2;box-shadow:inset 0 0 0 1px #f3ece2}