/* =========================================
   FotoID Print Studio — Neumorfismo 2.0
   ========================================= */
:root {
  --bg: #e8ecf1;
  --bg-d: #d1d9e6;
  --s1: rgba(255,255,255,0.78);
  --s2: rgba(163,177,198,0.78);
  --i1: rgba(163,177,198,0.65);
  --i2: rgba(255,255,255,0.72);
  --acc: #4f7cff;
  --acc2: #7b5ea7;
  --ag: linear-gradient(135deg,#4f7cff,#7b5ea7);
  --tx: #3d4a5c;
  --mu: #7a8699;
  --li: #b0bec5;
  --ok: #43a57c;
  --er: #e05c6a;
  --r: 16px; --rs: 10px; --rx: 6px;
  --tr: 0.22s cubic-bezier(0.4,0,0.2,1);
  --fh: 'Space Grotesk', sans-serif;
  --fb: 'DM Sans', sans-serif;
}
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }
html { font-size:16px; scroll-behavior:smooth }
body { font-family:var(--fb); background:var(--bg); color:var(--tx); min-height:100vh; overflow-x:hidden }

/* --- NEUMORFISMO --- */
.nf { background:var(--bg); box-shadow:6px 6px 14px var(--s2),-6px -6px 14px var(--s1); border-radius:var(--r) }
.np { background:var(--bg); box-shadow:inset 4px 4px 10px var(--i1),inset -4px -4px 10px var(--i2); border-radius:var(--r) }
.nb { background:var(--bg); box-shadow:5px 5px 12px var(--s2),-5px -5px 12px var(--s1); border-radius:var(--rs); border:none; cursor:pointer; transition:all var(--tr); font-family:var(--fb); font-weight:500; color:var(--tx) }
.nb:hover { box-shadow:7px 7px 18px var(--s2),-7px -7px 18px var(--s1) }
.nb:active { box-shadow:inset 3px 3px 8px var(--i1),inset -3px -3px 8px var(--i2) }
.nbp { background:var(--ag); color:#fff; border:none; border-radius:var(--rs); cursor:pointer; font-family:var(--fb); font-weight:600; box-shadow:5px 5px 14px rgba(79,124,255,.35),-3px -3px 10px rgba(255,255,255,.6); transition:all var(--tr) }
.nbp:hover { filter:brightness(1.08); box-shadow:7px 7px 20px rgba(79,124,255,.45),-3px -3px 12px rgba(255,255,255,.7) }
.nbp:active { box-shadow:inset 3px 3px 8px rgba(0,0,0,.15) }

/* --- LAYOUT --- */
.app { display:flex; flex-direction:column; min-height:100vh }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:14px 28px; background:var(--bg); box-shadow:0 4px 16px rgba(163,177,198,.45); position:sticky; top:0; z-index:100 }
.logo { display:flex; align-items:center; gap:10px; font-family:var(--fh); font-weight:700; font-size:1.2rem; color:var(--tx); letter-spacing:-.5px }
.logo-i { width:36px; height:36px; background:var(--ag); border-radius:10px; display:flex; align-items:center; justify-content:center; box-shadow:3px 3px 8px rgba(79,124,255,.35) }
.logo-i svg { width:20px; height:20px; fill:#fff }
.bc { display:flex; align-items:center; gap:8px; font-size:.8rem; color:var(--mu) }
.bc .A { color:var(--acc); font-weight:600 }
.bc .sep { opacity:.4 }

/* --- SCREENS --- */
.sc { display:none; flex:1; padding:28px 24px; max-width:1200px; margin:0 auto; width:100%; animation:fi .3s ease }
.sc.A { display:flex; flex-direction:column }
@keyframes fi { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

/* --- SETUP --- */
.sg { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px }
@media(max-width:680px){.sg{grid-template-columns:1fr}}
.fg { display:flex; flex-direction:column; gap:8px }
.fl { font-size:.8rem; font-weight:600; text-transform:uppercase; letter-spacing:.8px; color:var(--mu) }
.fc { appearance:none; background:var(--bg); box-shadow:inset 3px 3px 8px var(--i1),inset -3px -3px 8px var(--i2); border:none; outline:none; border-radius:var(--rs); padding:12px 16px; font-family:var(--fb); font-size:.95rem; color:var(--tx); width:100%; transition:box-shadow var(--tr) }
.fc:focus { box-shadow:inset 3px 3px 8px var(--i1),inset -3px -3px 8px var(--i2),0 0 0 2px rgba(79,124,255,.35) }
.tog-r { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-radius:var(--rs) }
.tl { font-size:.9rem; font-weight:500 }
.tsw { position:relative; width:48px; height:26px; flex-shrink:0 }
.tsw input { opacity:0; width:0; height:0 }
.ttr { position:absolute; inset:0; border-radius:999px; background:var(--bg); box-shadow:inset 2px 2px 6px var(--i1),inset -2px -2px 6px var(--i2); cursor:pointer; transition:all var(--tr) }
.ttr::after { content:''; position:absolute; left:3px; top:3px; width:20px; height:20px; border-radius:50%; background:var(--bg); box-shadow:2px 2px 5px var(--s2); transition:transform var(--tr),background var(--tr) }
.tsw input:checked + .ttr { background:#d8e3ff }
.tsw input:checked + .ttr::after { transform:translateX(22px); background:var(--acc); box-shadow:2px 2px 5px rgba(79,124,255,.45) }
.cpr { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:8px }
.stit { font-family:var(--fh); font-size:1.4rem; font-weight:700; color:var(--tx); margin-bottom:4px }
.ssub { font-size:.9rem; color:var(--mu); margin-bottom:20px }
.cta { display:flex; gap:14px; justify-content:flex-end; margin-top:28px; flex-wrap:wrap }
.btn { padding:12px 28px; border-radius:var(--rs); font-size:.95rem; font-weight:600 }

/* --- UPLOAD --- */
.ua { border:2.5px dashed rgba(79,124,255,.35); border-radius:var(--r); padding:48px 32px; text-align:center; background:linear-gradient(135deg,rgba(79,124,255,.04),rgba(123,94,167,.04)); cursor:pointer; transition:all var(--tr); margin-bottom:20px }
.ua:hover,.ua.dov { border-color:var(--acc); background:linear-gradient(135deg,rgba(79,124,255,.08),rgba(123,94,167,.08)); box-shadow:0 0 0 4px rgba(79,124,255,.12) }
.uic { font-size:3rem; margin-bottom:12px }
.utt { font-family:var(--fh); font-size:1.1rem; font-weight:600; margin-bottom:6px }
.usb { font-size:.85rem; color:var(--mu) }
.tgrd { display:grid; grid-template-columns:repeat(auto-fill,minmax(100px,1fr)); gap:12px; margin-top:8px }
.ti { position:relative; border-radius:var(--rs); overflow:hidden; aspect-ratio:3/4; cursor:pointer; transition:all var(--tr) }
.ti img { width:100%; height:100%; object-fit:cover; display:block }
.tov { position:absolute; inset:0; background:rgba(0,0,0,0); display:flex; align-items:center; justify-content:center; gap:6px; transition:background var(--tr) }
.ti:hover .tov { background:rgba(0,0,0,.45) }
.tbtn { background:rgba(255,255,255,.9); border:none; border-radius:50%; width:30px; height:30px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:.8rem; opacity:0; transition:opacity var(--tr) }
.ti:hover .tbtn { opacity:1 }
.tsta { position:absolute; bottom:4px; right:4px; font-size:.65rem; background:var(--ok); color:#fff; padding:2px 5px; border-radius:4px; opacity:0 }
.ti.dn .tsta { opacity:1 }

/* --- EDITOR --- */
.el { display:grid; grid-template-columns:1fr 320px; gap:20px; flex:1 }
@media(max-width:960px){.el{grid-template-columns:1fr}}
.cw { position:relative; border-radius:var(--r); overflow:hidden; min-height:340px; display:flex; align-items:center; justify-content:center; background:#cdd3dc; box-shadow:inset 4px 4px 14px rgba(163,177,198,.7),inset -4px -4px 14px rgba(255,255,255,.6); touch-action:none; user-select:none }
#ec { display:block; max-width:100%; max-height:calc(100vh - 220px); border-radius:8px; cursor:grab }
#ec:active { cursor:grabbing }
.ep { display:flex; flex-direction:column; gap:14px; overflow-y:auto; max-height:calc(100vh - 180px); padding-right:4px }
.pc2 { border-radius:var(--rs); padding:16px }
.ph { display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-family:var(--fh); font-size:.9rem; font-weight:600 }
.pb { margin-top:14px; display:flex; flex-direction:column; gap:12px }
.pb.col { display:none }
.chev { transition:transform var(--tr) }
.chev.op { transform:rotate(180deg) }
.ar { display:flex; flex-direction:column; gap:4px }
.alr { display:flex; justify-content:space-between; align-items:center; font-size:.78rem }
.an { color:var(--mu); font-weight:500; text-transform:uppercase; letter-spacing:.5px }
.av { color:var(--acc); font-weight:600; min-width:30px; text-align:right; font-size:.8rem }
.asl { -webkit-appearance:none; appearance:none; height:6px; border-radius:999px; outline:none; border:none; background:var(--bg); box-shadow:inset 2px 2px 5px var(--i1),inset -2px -2px 5px var(--i2); width:100%; cursor:pointer }
.asl::-webkit-slider-thumb { -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--ag); box-shadow:2px 2px 6px rgba(79,124,255,.4); cursor:pointer; transition:transform var(--tr) }
.asl::-webkit-slider-thumb:hover { transform:scale(1.2) }
.asl::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:var(--acc); border:none; cursor:pointer }
.fgrd { display:grid; grid-template-columns:repeat(auto-fill,minmax(68px,1fr)); gap:8px }
.ft { display:flex; flex-direction:column; align-items:center; gap:4px; cursor:pointer; padding:6px 4px; border-radius:var(--rx); transition:all var(--tr) }
.ft canvas { width:56px; height:56px; border-radius:8px; display:block; border:2px solid transparent; transition:border-color var(--tr) }
.ft:hover canvas,.ft.A canvas { border-color:var(--acc) }
.ft span { font-size:.65rem; color:var(--mu); text-align:center; line-height:1.1; font-weight:500 }
.ft.A span { color:var(--acc); font-weight:600 }
#curvec { width:100%; height:120px; border-radius:var(--rx); display:block; cursor:crosshair }
#levelsc { width:100%; height:70px; border-radius:var(--rx); display:block }
.zc { position:absolute; bottom:12px; right:12px; display:flex; gap:6px }
.zb { width:32px; height:32px; border-radius:8px; border:none; background:rgba(255,255,255,.9); box-shadow:2px 2px 8px rgba(163,177,198,.5); cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center; transition:all var(--tr) }
.zb:hover { background:#fff }

/* --- PREVIEW --- */
.pl { display:grid; grid-template-columns:1fr 260px; gap:20px; flex:1 }
@media(max-width:840px){.pl{grid-template-columns:1fr}}
.pw { position:relative; background:#cdd3dc; border-radius:var(--r); overflow:hidden; min-height:400px; display:flex; align-items:center; justify-content:center; box-shadow:inset 4px 4px 14px rgba(163,177,198,.7),inset -4px -4px 14px rgba(255,255,255,.6); touch-action:none; user-select:none }
#pvc { display:block; max-width:100%; max-height:calc(100vh - 200px); cursor:grab }
#pvc:active { cursor:grabbing }
.ps { display:flex; flex-direction:column; gap:14px }
.gir { display:flex; justify-content:space-between; font-size:.82rem; color:var(--mu); border-bottom:1px dashed rgba(163,177,198,.4); padding:4px 0 }
.gir span:last-child { color:var(--tx); font-weight:600 }

/* --- BATCH BAR --- */
.bbar { display:flex; gap:8px; overflow-x:auto; padding:10px 4px; margin-bottom:10px; scrollbar-width:thin }
.bi { flex-shrink:0; width:64px; height:80px; border-radius:var(--rx); overflow:hidden; cursor:pointer; position:relative; border:2px solid transparent; transition:all var(--tr) }
.bi img { width:100%; height:100%; object-fit:cover }
.bi.A { border-color:var(--acc) }
.binum { position:absolute; top:2px; left:3px; background:rgba(0,0,0,.55); color:#fff; font-size:.6rem; font-weight:700; border-radius:3px; padding:1px 4px }

/* --- PROGRESS --- */
.pw2 { display:none; margin-top:10px }
.pw2.vis { display:block }
.pb2 { height:6px; border-radius:999px; background:var(--bg); box-shadow:inset 2px 2px 5px var(--i1),inset -2px -2px 5px var(--i2); overflow:hidden }
.pf { height:100%; border-radius:999px; background:var(--ag); width:0%; transition:width .4s ease }
.plbl { font-size:.8rem; color:var(--mu); margin-top:4px }

/* --- MODAL --- */
.mo { position:fixed; inset:0; z-index:200; background:rgba(209,217,230,.65); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity var(--tr) }
.mo.op { opacity:1; pointer-events:all }
.mb { background:var(--bg); border-radius:var(--r); box-shadow:12px 12px 32px var(--s2),-12px -12px 32px var(--s1); padding:28px 32px; width:min(480px,92vw); display:flex; flex-direction:column; gap:16px }
.mt { font-family:var(--fh); font-size:1.2rem; font-weight:700 }
.mr { display:flex; flex-direction:column; gap:6px }
.ma { display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; margin-top:6px }

/* --- TOAST --- */
.toast { position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(60px); background:var(--tx); color:#fff; padding:10px 22px; border-radius:999px; font-size:.88rem; font-weight:500; z-index:300; opacity:0; transition:all .3s ease; white-space:nowrap }
.toast.sh { transform:translateX(-50%) translateY(0); opacity:1 }
.toast.er { background:var(--er) }
.toast.ok { background:var(--ok) }

/* --- UTILS --- */
.hid { display:none !important }
.fr { display:flex; align-items:center; gap:10px }
.fb { display:flex; align-items:center; justify-content:space-between }
::-webkit-scrollbar { width:5px; height:5px }
::-webkit-scrollbar-thumb { background:rgba(163,177,198,.5); border-radius:999px }
@media(max-width:600px) {
  .topbar { padding:10px 16px }
  .sc { padding:16px 14px }
  .mb { padding:20px 18px }
  .btn { padding:10px 18px; font-size:.88rem }
  .pc2 { padding:12px }
}

/* --- MODO SELECTOR --- */
.msec { display:flex; gap:14px; margin-bottom:18px; flex-wrap:wrap }
.mcard { flex:1; min-width:140px; border-radius:var(--r); padding:18px 16px; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; border:2.5px solid transparent; transition:all var(--tr) }
.mcard:hover { border-color:rgba(79,124,255,.3); box-shadow:8px 8px 20px var(--s2),-8px -8px 20px var(--s1) }
.mcard.A { border-color:var(--acc); box-shadow:0 0 0 3px rgba(79,124,255,.15),6px 6px 14px var(--s2),-6px -6px 14px var(--s1) }
.mcard .mi { font-size:2rem; line-height:1 }
.mcard .mn { font-family:var(--fh); font-size:.92rem; font-weight:700; color:var(--tx) }
.mcard .ms { font-size:.75rem; color:var(--mu); line-height:1.3 }

/* --- TOOLTIP --- */
.tip { position:relative; display:inline-flex; align-items:center; justify-content:center; width:18px; height:18px; background:rgba(79,124,255,.15); color:var(--acc); border-radius:50%; font-size:.7rem; font-weight:700; cursor:help; flex-shrink:0 }
.tip::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%); background:var(--tx); color:#fff; padding:8px 12px; border-radius:8px; font-size:.75rem; font-weight:400; line-height:1.4; white-space:normal; width:220px; pointer-events:none; opacity:0; transition:opacity .2s; z-index:50; text-align:left; box-shadow:4px 4px 12px rgba(0,0,0,.25) }
.tip::before { content:''; position:absolute; bottom:calc(100% + 3px); left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--tx); pointer-events:none; opacity:0; transition:opacity .2s }
.tip:hover::after,.tip:hover::before { opacity:1 }

/* --- PANEL ENCUADRE EN EDITOR --- */
.zctrl { display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; margin-top:4px }
.zcb { aspect-ratio:1; border-radius:8px; border:none; background:var(--bg); box-shadow:3px 3px 8px var(--s2),-3px -3px 8px var(--s1); cursor:pointer; font-size:1rem; display:flex; align-items:center; justify-content:center; transition:all var(--tr); color:var(--tx) }
.zcb:hover { box-shadow:5px 5px 12px var(--s2),-5px -5px 12px var(--s1) }
.zcb:active { box-shadow:inset 2px 2px 6px var(--i1),inset -2px -2px 6px var(--i2) }
.zcb.ctr { background:linear-gradient(135deg,rgba(79,124,255,.12),rgba(123,94,167,.12)); color:var(--acc); font-size:.75rem; font-weight:700 }

.fctrl { display:flex; align-items:center; background:rgba(255,255,255,0.5); border-radius:6px; box-shadow:inset 1px 1px 3px rgba(0,0,0,0.1); padding:1px; height:22px }
.fbtn { width:22px; height:20px; border:none; background:transparent; color:var(--tx); font-weight:bold; cursor:pointer; font-size:14px; line-height:1; display:flex; align-items:center; justify-content:center; border-radius:4px }
.fbtn:hover { background:rgba(79,124,255,.15); color:var(--acc) }
.finp { width:38px; border:none; background:transparent; text-align:center; font-size:.7rem; font-weight:700; color:var(--tx); outline:none; -moz-appearance:textfield }
.finp::-webkit-outer-spin-button, .finp::-webkit-inner-spin-button { -webkit-appearance:none; margin:0 }