/* Las vistas proceden del POS real, capturado con datos ficticios. */
#demo-dialog { width:1180px; max-width:calc(100vw - 40px); }
#demo-dialog[open] { display:flex; flex-direction:column; overflow:hidden; }
#demo-dialog .modal-head { position:relative; flex-shrink:0; }
#demo-dialog .modal-head p { max-width:740px; }
#demo-dialog .modal-body { overflow:auto; overscroll-behavior:contain; padding:20px; min-height:0; }
#demo-dialog .demo-nav { position:sticky; top:0; z-index:2; margin-bottom:18px; }
.demo-view-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin:0 2px 15px; }
#demo-dialog .demo-view-heading h3 { font-size:17px; line-height:1.35; }
.demo-view-heading p { font-size:11px; line-height:1.65; color:#747474; margin-top:5px; }
.demo-view-actions { display:flex; align-items:center; gap:7px; flex-shrink:0; }
.demo-enlarge { display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:40px; padding:10px 14px; border:1px solid #dedede; border-radius:30px; font-size:11px; font-weight:500; background:#fff; white-space:nowrap; }
.demo-enlarge svg { width:14px; height:14px; }
.demo-enlarge:hover { border-color:#191919; }
.demo-enlarge:focus-visible { outline:2px solid #191919; outline-offset:3px; }
.demo-zoom { cursor:pointer; color:inherit; }
.demo-zoom[aria-pressed="true"] { color:#fff; border-color:#191919; background:#191919; }
.demo-zoom[aria-pressed="true"] [data-zoom-plus] { display:none; }
.demo-zoom:disabled { opacity:.5; cursor:default; }
.demo-zoom-hint { margin:-5px 2px 12px; color:#747474; font-size:11px; line-height:1.5; }
.demo-image-error { margin:12px 2px 0; color:#747474; font-size:12px; line-height:1.6; }
.demo-screen { display:block; overflow:hidden; border-radius:17px; border:1px solid #e4e4e4; background:#f5f6f8; }
.demo-screen img { display:block; width:100%; height:auto; }
.demo-screen.is-zoomed { max-height:min(64dvh,720px); overflow:auto; overscroll-behavior:contain; touch-action:pan-x pan-y pinch-zoom; scrollbar-color:#a9acb1 #edf0f4; scrollbar-width:thin; }
.demo-screen.is-zoomed img { width:1440px; min-width:1440px; max-width:none; }
.demo-screen:focus-visible { outline:2px solid #191919; outline-offset:3px; }
#demo-dialog .demo-panel-note { margin:15px 2px 0; font-size:10px; }
@media(max-width:640px) {
  #demo-dialog { width:calc(100vw - 16px); max-width:calc(100vw - 16px); max-height:calc(100dvh - 20px); border-radius:22px; }
  #demo-dialog .modal-head { padding:20px 16px 16px; gap:10px; }
  #demo-dialog .modal-head h2 { font-size:20px; }
  #demo-dialog .modal-head p { font-size:10px; line-height:1.6; }
  #demo-dialog .modal-body { padding:12px; }
  #demo-dialog .demo-nav { margin-bottom:14px; }
  #demo-dialog .demo-nav button { padding-inline:5px; font-size:11px; }
  .demo-view-heading { gap:10px; align-items:flex-start; flex-direction:column; }
  #demo-dialog .demo-view-heading h3 { font-size:14px; }
  .demo-view-heading p { font-size:10px; }
  .demo-enlarge { font-size:10px; padding:9px 10px; gap:4px; }
  .demo-screen { border-radius:13px; }
}