/* Grabador Monarca · todo con prefijo mgr- para no chocar con el tema */

/* ---------- opción en la ficha de producto ---------- */
.mgr-wrap{margin:0 0 16px;font-family:inherit;color:#22354f}
.mgr-wrap [hidden]{display:none!important}
.mgr-opt{display:flex;gap:12px;align-items:flex-start;border:1.5px solid #d7dee2;border-radius:10px;padding:13px 14px;cursor:pointer;background:#fff;margin:0;transition:border-color .15s,background .15s;-webkit-tap-highlight-color:transparent}
.mgr-opt:hover,.mgr-opt.mgr-on{border-color:#22354f}
.mgr-opt.mgr-on{background:#f1f7f8}
.mgr-opt input{width:20px;height:20px;margin:2px 0 0;accent-color:#22354f;flex-shrink:0;cursor:pointer}
.mgr-opt-t{display:block;font-weight:700;font-size:15px;line-height:1.3}
.mgr-opt-t b{color:#0e7365;font-weight:800;white-space:nowrap}
.mgr-opt-s{display:block;font-size:13px;color:#5a6675;margin-top:3px;line-height:1.35}
.mgr-opt-p{display:inline-block;margin-top:7px;font-size:11.5px;font-weight:600;line-height:1.3;color:#0e7365;background:#e7f4f2;border-radius:999px;padding:3px 10px}
.mgr-res{display:flex;gap:10px;align-items:center;background:#f3f5f6;border-radius:10px;padding:10px;margin-top:8px;font-size:13px}
.mgr-thumbs{display:flex;gap:4px;flex-shrink:0}
.mgr-thumbs img{width:58px;height:58px;object-fit:cover;border-radius:6px;background:#eeedeb}
.mgr-res-txt{flex:1;min-width:0;line-height:1.35}
.mgr-res-txt b{display:block;font-size:14px}
.mgr-res-txt span{display:block;color:#5a6675;overflow-wrap:anywhere}
.mgr-res-txt span.mgr-warn{color:#b3530f}
.mgr-edit{background:#fff;border:1px solid #cfd8dc;border-radius:8px;padding:9px 12px;font-size:13px;font-weight:600;color:#22354f;cursor:pointer;flex-shrink:0;font-family:inherit}
.mgr-need{color:#a11d2b;font-size:13px;margin-top:6px;font-weight:600}

/* ---------- popup ---------- */
.mgr-modal{--g:#f4f6f7;--s:#fff;--s2:#eaeef0;--ink:#1b2433;--mut:#5c6670;--acc:#22354f;--hi:#0aa8b4;--acc-soft:#e3f3f5;--crit:#a11d2b;--crit-soft:#f7e3e4;--pos:#1f6b4d;--rule:#d7dee2;
  position:fixed;inset:0;background:rgba(10,14,18,.62);display:none;align-items:flex-end;justify-content:center;z-index:2147483000;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:16px;line-height:1.5;color:var(--ink);-webkit-font-smoothing:antialiased;text-align:left}
.mgr-modal *,.mgr-modal *::before,.mgr-modal *::after{box-sizing:border-box}
.mgr-modal [hidden]{display:none!important}
.mgr-modal.mgr-open{display:flex}
@media(min-width:640px){.mgr-modal{align-items:center}}
.mgr-modal p{margin:0}
.mgr-modal svg.mgr-i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
.mgr-sheet{background:var(--g);width:100%;max-width:34rem;max-height:96vh;max-height:96dvh;border-radius:14px 14px 0 0;display:flex;flex-direction:column;overflow:hidden}
@media(min-width:640px){.mgr-sheet{border-radius:12px;max-height:94vh}}
.mgr-head{display:flex;align-items:center;justify-content:space-between;gap:.7rem;padding:.65rem 1rem;border-bottom:1px solid var(--rule);background:var(--s);flex-shrink:0}
.mgr-head h3{font-size:1rem;font-weight:700;margin:0;color:var(--acc)}
.mgr-x{background:none;border:none;color:var(--mut);cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;padding:0}
.mgr-body{overflow-y:auto;padding:.8rem .9rem 1rem;display:flex;flex-direction:column;gap:.8rem;flex:1;min-height:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.mgr-body>*{flex-shrink:0}
.mgr-foot{padding:.7rem 1rem;border-top:1px solid var(--rule);background:var(--s);display:flex;gap:.6rem;flex-shrink:0}
.mgr-foot .mgr-btn{flex:1}
.mgr-err{margin:0;padding:.55rem 1rem;background:var(--crit-soft);color:var(--crit);font-size:.84rem;flex-shrink:0}

.mgr-btn{border:none;border-radius:8px;padding:.75rem 1rem;font-size:.95rem;font-weight:700;cursor:pointer;font-family:inherit;touch-action:manipulation;line-height:1.2}
.mgr-btn:disabled{opacity:.6;cursor:wait}
.mgr-btn-acc{background:var(--acc);color:#fff}
.mgr-btn-ghost{background:transparent;color:var(--ink);border:1px solid var(--rule)}
.mgr-btn-sm{padding:.55rem .8rem;font-size:.84rem}
.mgr-note{color:var(--mut);font-size:.83rem}

/* pestañas de botellas (combo) */
.mgr-btabs{display:flex;gap:.4rem;padding:.6rem .9rem 0;background:var(--g);flex-shrink:0}
.mgr-btabs button{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.6rem .4rem;border:1px solid var(--rule);border-radius:8px;background:var(--s);font:700 .84rem/1.2 inherit;font-family:inherit;color:var(--mut);cursor:pointer;touch-action:manipulation;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mgr-btabs button.mgr-on{border-color:var(--acc);color:var(--acc);box-shadow:inset 0 0 0 1px var(--acc)}
.mgr-ok{color:var(--pos);font-weight:800}
.mgr-dot{width:13px;height:13px;border-radius:50%;border:1px solid rgba(0,0,0,.25);flex-shrink:0;display:inline-block}
.mgr-colorrow{display:flex;align-items:center;gap:.6rem}
.mgr-colorrow label{font-size:.8rem;color:var(--mut);font-weight:600;white-space:nowrap}
.mgr-copyrow{display:flex;justify-content:center}

/* visor con columnas */
.mgr-stagerow{display:flex;justify-content:center;align-items:center;gap:8px}
.mgr-side{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0}
.mgr-sep{height:6px}
.mgr-slabel{font-size:.56rem;letter-spacing:.06em;text-transform:uppercase;color:var(--mut);line-height:1.2;text-align:center;font-weight:600}
.mgr-tb{width:44px;height:44px;border-radius:8px;border:1px solid var(--rule);background:var(--s);color:var(--ink);display:flex;align-items:center;justify-content:center;cursor:pointer;touch-action:manipulation;font:700 .8rem/1 inherit;font-family:inherit;-webkit-tap-highlight-color:transparent;padding:0}
.mgr-tb:active{transform:translateY(1px)}
.mgr-tb.mgr-on{background:var(--acc);color:#fff;border-color:var(--acc)}
.mgr-tb.mgr-danger{color:var(--crit)}
.mgr-tb:disabled{opacity:.3;cursor:default}
.mgr-nosel .mgr-side .mgr-tb{opacity:.3;pointer-events:none}
.mgr-nosel .mgr-side .mgr-tb.mgr-on{background:var(--s);color:var(--ink);border-color:var(--rule)}
@media (max-height:720px){.mgr-tb{width:40px;height:40px}.mgr-side{gap:3px}.mgr-sep{height:3px}}

.mgr-vp{position:relative;flex-shrink:0;height:min(540px,max(280px,calc(96vh - 230px)));height:min(540px,max(280px,calc(96dvh - 230px)));aspect-ratio:10/17;max-width:calc(100% - 108px);min-width:0;overflow:hidden;background:#eeedeb;border-radius:10px;border:1px solid var(--rule);touch-action:pan-y;user-select:none;-webkit-user-select:none}
.mgr-world{position:absolute;left:0;top:0;transform-origin:0 0;--inv:1}
.mgr-bottle{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none;max-width:none}
.mgr-zone{position:absolute;overflow:hidden}
.mgr-zone.mgr-guide{outline:calc(1.5px * var(--inv)) dashed var(--hi)}
.mgr-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;writing-mode:vertical-rl;font:600 9px/1 system-ui,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:rgba(34,53,79,.45);pointer-events:none}
.mgr-zone.mgr-light .mgr-empty{color:rgba(255,255,255,.75)}
.mgr-el{position:absolute;left:0;top:0;transform-origin:center center;cursor:pointer;touch-action:manipulation;transition:transform .18s ease,width .18s ease,height .18s ease}
.mgr-el img{display:block;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none;max-width:none}
.mgr-zone.mgr-light .mgr-el-art img{filter:invert(1) brightness(.88)}
.mgr-el-text .mgr-lbl{display:block;width:100%;text-align:center;white-space:pre;color:var(--engr,#000);pointer-events:none}
.mgr-sel{position:absolute;left:0;top:0;transform-origin:center center;pointer-events:none;border:calc(1.5px * var(--inv)) solid var(--hi);border-radius:calc(4px * var(--inv));--rot:0}
.mgr-sel.mgr-warnbox{border-color:#e8873d}
.mgr-hd{position:absolute;left:0;top:0;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.28);pointer-events:auto;touch-action:none;background:var(--crit);cursor:pointer;transform:scale(var(--inv)) rotate(calc(var(--rot) * -1deg))}
.mgr-hd .mgr-i{width:19px;height:19px}

.mgr-gaprow{display:flex;align-items:center;justify-content:center;gap:.6rem}
.mgr-gaprow .mgr-note{font-size:.78rem}
.mgr-zwarn{font-size:.8rem;color:#b3530f;text-align:center;line-height:1.4}
.mgr-hint{font-size:.8rem;color:var(--mut);text-align:center}

/* pestañas y paneles */
.mgr-tabs{display:flex;gap:.3rem;background:var(--s2);padding:.25rem;border-radius:8px}
.mgr-tabs button{flex:1;border:none;background:none;padding:.6rem .3rem;border-radius:6px;font-size:.86rem;font-weight:700;color:var(--mut);cursor:pointer;font-family:inherit;touch-action:manipulation}
.mgr-tabs button.mgr-on{background:var(--s);color:var(--acc);box-shadow:0 1px 2px rgba(21,25,30,.08),0 4px 12px rgba(21,25,30,.06)}
.mgr-pane{display:none;flex-direction:column;gap:.7rem}
.mgr-pane.mgr-on{display:flex}
.mgr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:.55rem}
.mgr-thumb{aspect-ratio:1/1;background:var(--s);border:1px solid var(--rule);border-radius:8px;padding:.55rem;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink);touch-action:manipulation}
.mgr-thumb:hover{border-color:var(--acc)}
.mgr-thumb svg{width:100%;height:100%}
.mgr-thumb img{width:100%;height:100%;object-fit:contain;display:block;pointer-events:none}
.mgr-field{display:flex;flex-direction:column;gap:.3rem}
.mgr-field>label,.mgr-flabel{font-size:.78rem;color:var(--mut);font-weight:600}
.mgr-modal select,.mgr-modal textarea{width:100%;padding:.65rem .75rem;border:1px solid var(--rule);border-radius:8px;background:var(--s);color:var(--ink);font-family:inherit;font-size:16px;margin:0;height:auto;box-shadow:none}
.mgr-modal textarea{resize:vertical;min-height:3.2rem;line-height:1.35}
.mgr-modal select:focus,.mgr-modal textarea:focus{outline:2px solid var(--hi);outline-offset:-1px}
.mgr-modal input[type=range]{width:100%;accent-color:var(--acc);height:28px;margin:0}
.mgr-row2{display:grid;grid-template-columns:1fr auto;gap:.5rem}
.mgr-btns{display:flex;flex-direction:column;gap:.4rem}
.mgr-seg{display:flex;background:var(--s2);padding:3px;border-radius:8px;gap:3px}
.mgr-seg button{flex:1;border:none;background:none;padding:.55rem;border-radius:6px;cursor:pointer;color:var(--mut);font-family:inherit;font-size:.9rem;touch-action:manipulation;white-space:nowrap}
.mgr-seg button.mgr-on{background:var(--s);color:var(--acc);box-shadow:0 1px 2px rgba(21,25,30,.08)}
.mgr-seg-sm button{padding:.4rem .6rem;font-size:.8rem}
.mgr-drop{border:1.5px dashed var(--rule);border-radius:8px;padding:1.1rem .8rem;text-align:center;cursor:pointer;background:var(--s)}
.mgr-drop:hover,.mgr-drop.mgr-over{border-color:var(--acc);background:var(--acc-soft)}
.mgr-drop-big{font-weight:700;font-size:.92rem}
.mgr-drop-sm{font-size:.78rem;color:var(--mut);margin-top:.2rem}
.mgr-adj{background:var(--s);border:1px solid var(--rule);border-radius:8px;padding:.75rem;display:flex;flex-direction:column;gap:.6rem}
.mgr-adj-t{font-size:.8rem;font-weight:700;color:var(--hi)}
.mgr-rng-l{display:flex;justify-content:space-between;font-size:.72rem;color:var(--mut);margin-top:-.2rem}
.mgr-btn[aria-pressed="true"]{background:var(--acc);color:#fff;border-color:var(--acc)}
.mgr-legal{font-size:.74rem;color:var(--mut);line-height:1.35}
body.mgr-lock{overflow:hidden!important}