html.mpl-lock, body.mpl-open{overflow:hidden}
.mpl-root{display:none;position:fixed;inset:0;z-index:999999;box-sizing:border-box}
.mpl-root *{box-sizing:border-box}
.mpl-root.mpl-visible{display:block}
.mpl-overlay{position:absolute;inset:0}
.mpl-dialog{position:absolute;left:50%;top:50%;width:calc(100% - 32px);max-height:calc(100vh - 32px);overflow:auto;transform:translate(-50%,-50%);padding:32px;box-shadow:0 24px 80px rgba(0,0,0,.28);outline:none;-ms-overflow-style:none;scrollbar-width:none}
.mpl-dialog::-webkit-scrollbar{width:0;height:0;display:none}
.mpl-content>:first-child{margin-top:0}.mpl-content>:last-child{margin-bottom:0}
.mpl-close{position:absolute;right:12px;top:8px;width:38px;height:38px;border:0;background:transparent;color:inherit;font-size:32px;line-height:32px;cursor:pointer;z-index:2;padding:0;opacity:.7}
.mpl-close:hover{opacity:1}
.mpl-visible.mpl-anim-fade .mpl-dialog{animation:mplFade .24s ease both}
.mpl-visible.mpl-anim-zoom .mpl-dialog{animation:mplZoom .26s ease both}
.mpl-visible.mpl-anim-slide_up .mpl-dialog{animation:mplUp .30s ease both}
.mpl-visible.mpl-anim-slide_down .mpl-dialog{animation:mplDown .30s ease both}
@keyframes mplFade{from{opacity:0}to{opacity:1}}
@keyframes mplZoom{from{opacity:0;transform:translate(-50%,-50%) scale(.92)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes mplUp{from{opacity:0;transform:translate(-50%,calc(-50% + 45px))}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes mplDown{from{opacity:0;transform:translate(-50%,calc(-50% - 45px))}to{opacity:1;transform:translate(-50%,-50%)}}

/* slide-ins */
.mpl-type-slide_left .mpl-dialog,.mpl-type-slide_right .mpl-dialog{top:auto;bottom:20px;max-width:420px!important;transform:none}
.mpl-type-slide_left .mpl-dialog{left:20px}
.mpl-type-slide_right .mpl-dialog{left:auto;right:20px}
.mpl-type-slide_left.mpl-visible .mpl-dialog{animation:mplLeft .3s ease both}
.mpl-type-slide_right.mpl-visible .mpl-dialog{animation:mplRight .3s ease both}
@keyframes mplLeft{from{opacity:0;transform:translateX(-50px)}to{opacity:1;transform:none}}
@keyframes mplRight{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:none}}

/* bars */
.mpl-type-bar_top,.mpl-type-bar_bottom{pointer-events:none}
.mpl-type-bar_top .mpl-overlay,.mpl-type-bar_bottom .mpl-overlay{display:none}
.mpl-type-bar_top .mpl-dialog,.mpl-type-bar_bottom .mpl-dialog{left:0;width:100%;max-width:none!important;max-height:50vh;border-radius:0!important;transform:none;pointer-events:auto}
.mpl-type-bar_top .mpl-dialog{top:0}
.mpl-type-bar_bottom .mpl-dialog{top:auto;bottom:0}

/* fullscreen */
.mpl-type-fullscreen .mpl-dialog{width:100%;height:100%;max-width:none!important;max-height:none;border-radius:0!important;display:flex;align-items:center;justify-content:center}
.mpl-type-fullscreen .mpl-content{width:100%;max-width:1100px}

.mpl-manual-trigger{cursor:pointer}
@media(max-width:767px){
  .mpl-dialog{width:calc(100% - 20px);max-height:calc(100vh - 20px);padding:25px 20px}
  .mpl-type-slide_left .mpl-dialog,.mpl-type-slide_right .mpl-dialog{left:10px;right:10px;bottom:10px;width:calc(100% - 20px);max-width:none!important}
}
@media(prefers-reduced-motion:reduce){
  .mpl-root .mpl-dialog{animation:none!important}
}


/* 1.2.7: contenido gráfico proporcional */
.mpl-content > :first-child{margin-top:0!important}
.mpl-content > :last-child{margin-bottom:0!important}
.mpl-content img{display:block;max-width:100%;height:auto}

/* Cuando el popup contiene únicamente una imagen, el marco se comporta
   como un visor: conserva la proporción y deja el mismo aire en los 4 lados. */
.mpl-image-only .mpl-dialog{overflow:auto}
.mpl-image-only .mpl-content,
.mpl-image-only .mpl-content p,
.mpl-image-only .mpl-content figure,
.mpl-image-only .mpl-content a{margin:0!important;padding:0!important;line-height:0}
.mpl-image-only .mpl-content img{
  display:block;
  width:auto!important;
  height:auto!important;
  max-width:100%!important;
  max-height:calc(100vh - 96px)!important;
  margin:0 auto!important;
  object-fit:contain;
}
@media(max-width:767px){
  .mpl-image-only .mpl-content img{max-height:calc(100vh - 60px)!important}
}


/* 1.3.0: controles de zoom para popups gráficos del frontend */
.mpl-zoom-controls{
  display:none;
  position:fixed;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  z-index:1000002;
  align-items:center;
  gap:4px;
  padding:5px;
  border-radius:999px;
  background:rgba(18,18,18,.88);
  box-shadow:0 8px 28px rgba(0,0,0,.30);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}
.mpl-image-only .mpl-zoom-controls{display:flex}
.mpl-zoom-controls button{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  margin:0;
  min-width:38px;
  height:36px;
  padding:0 10px;
  border-radius:999px;
  background:transparent;
  color:#fff;
  font:600 20px/36px Arial,sans-serif;
  text-align:center;
  cursor:pointer;
  outline:none;
}
.mpl-zoom-controls .mpl-zoom-reset{
  min-width:58px;
  font-size:12px;
  font-weight:700;
  letter-spacing:.2px;
}
.mpl-zoom-controls button:hover,
.mpl-zoom-controls button:focus{background:rgba(255,255,255,.14)}
.mpl-zoom-controls button:disabled{opacity:.35;cursor:default;background:transparent}
.mpl-image-only.mpl-zoom-active .mpl-dialog{overflow:auto}
.mpl-image-only.mpl-zoom-active .mpl-content{min-width:100%;text-align:center}
.mpl-image-only.mpl-zoom-active .mpl-content img{margin-left:auto!important;margin-right:auto!important}
@media(max-width:767px){
  .mpl-zoom-controls{bottom:10px}
  .mpl-zoom-controls button{min-width:36px;height:34px;line-height:34px}
}


/* 1.4.0: zoom dinámico + desplazamiento libre del afiche */
.mpl-image-only .mpl-dialog{
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.mpl-image-only .mpl-content img{
  -webkit-user-drag:none;
  user-select:none;
  -webkit-user-select:none;
  touch-action:none;
}
.mpl-image-only.mpl-can-pan .mpl-content img{cursor:grab}
.mpl-image-only.mpl-dragging .mpl-content img{cursor:grabbing}
.mpl-image-only.mpl-dragging .mpl-dialog{scroll-behavior:auto}


/* 1.6.1: espacio interno configurable por popup */
.mpl-dialog{box-sizing:border-box}