body.body-scroll-disabled { overflow: hidden; }

#popup-container {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 9998;
  animation: mioFadeIn 0.4s ease-out;
}
@keyframes mioFadeIn { from { opacity:0; transform:scale(0.95) } to { opacity:1; transform:scale(1) } }

.popup-wrapper {
  position: fixed; top:50%; left:50%;
  transform: translate(-50%, -50%);
  max-width: 700px; width: 90%;
  background: #fff;
  border-radius: 10px; overflow: hidden;
  z-index: 9999;
  box-shadow: 0 0 15px rgba(0,0,0,.4);
}

.popup-img-container { position: relative; width:100%; overflow:hidden; touch-action: pan-y; }
.popup-img { width: 100%; height: auto; display: block; }

.popup-controls {
  position: absolute; top:50%; width:100%;
  display:flex; justify-content:space-between; transform: translateY(-50%);
  pointer-events:none;
}
.popup-controls button {
  background: rgba(0,0,0,.6); color:#fff; font-size:16px;
  border:0; cursor:pointer; border-radius:50%; width:32px; height:32px;
  display:flex; align-items:center; justify-content:center; transition: .3s; pointer-events:auto;
}
.popup-controls button:hover { background: rgba(0,0,0,.8); }
.popup-controls button:first-child{ margin-left:10px } .popup-controls button:last-child{ margin-right:10px }

.cerrar-btn {
  position: absolute; top:10px; right:10px; width:32px; height:32px;
  font-size:24px; color:#fff; background: rgba(0,0,0,.7);
  border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:10000;
}

.cronometro { background:#444; text-align:center; padding: 20px 10px; }
.cronometro h3 { margin:0 0 15px; font-size:20px; color:#fff; font-weight:bold; }

.timer-wrapper { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.timer-box { background:#fff; color:#000; border-radius:6px; border:1px solid #ccc; width:70px; height:75px; display:flex; flex-direction:column; justify-content:center; align-items:center; padding:6px; }
.timer-box .value { font-size:24px; font-weight:bold; }
.timer-box .label { font-size:10px; margin-top:4px; color:#333; opacity:.8; text-align:center; text-transform:uppercase; }

/* ✅ Barra Oferta */
#barra-oferta {
  display:flex; position:fixed; bottom:48px; left:24px;
  background: var(--mio-barra-color, #444444);
  border-radius:12px; padding:8px 12px; z-index:10000;
  box-shadow:0 0 10px rgba(0,0,0,.2);
  gap:10px; align-items:center; cursor:pointer; flex-direction:row;
  max-width:480px; width:auto; flex-wrap:nowrap;
  transform: translateX(0);
  transition: transform .4s ease, opacity .4s ease;
}
#barra-oferta img { height:70px; border-radius:8px; object-fit:cover; display:block; flex-shrink:0; margin-top:2px; }
.texto-barra { color:#fff; font-size:13px; font-weight:bold; display:flex; flex-direction:column; justify-content:center; height:100%; flex:1 1 auto; min-width:0; padding-left:6px; }
.subtitulo-barra { font-size:12px; font-weight:normal; color:#fff; margin-top:2px; text-transform:uppercase; letter-spacing:.5px; }
.timer-mini { font-size:14px; margin-top:4px; display:flex; gap:6px; }
.timer-mini span { background:#fff; color:#444; padding:3px 6px; border-radius:5px; font-weight:bold; min-width:24px; text-align:center; }

.cerrar-barra { margin-left:10px; font-size:20px; color:#fff; font-weight:bold; cursor:pointer; user-select:none; display:none; }
.flecha-deslizar { display:none; margin-left:auto; animation:moverFlecha 1s infinite alternate; }
@keyframes moverFlecha { from{ transform:translateX(0) } to{ transform:translateX(-6px) } }
@keyframes slideOutLeft { to{ transform:translateX(-120%); opacity:0 } }
@keyframes slideInLeft { from{ transform:translateX(-120%); opacity:0 } to{ transform:translateX(0); opacity:1 } }
.animar-salida { animation: slideOutLeft .4s forwards; }
.animar-entrada { animation: slideInLeft .4s ease-out; }

@media (min-width:769px){
  .cerrar-barra{ display:inline-block }
  .flecha-deslizar{ display:none !important }
}

@media (max-width:768px){
  #barra-oferta{ left:12px; width:92%; max-width:300px; justify-content:flex-start; padding:6px 10px; bottom:80px !important; }
  #barra-oferta img{ height:50px; margin-top:4px }
  .texto-barra{ font-size:11.5px } .subtitulo-barra{ font-size:10.5px }
  .timer-mini{ font-size:11.5px } .timer-mini span{ padding:2px 4px; min-width:20px; font-size:10px }
  .flecha-deslizar{ display:inline-block }
}

/* 🔧 Popup más flexible + cronómetro escalable */
.popup-wrapper{ max-width:min(700px,96vw); width:min(92vw,700px) }
.cronometro{ padding: clamp(12px, 4vw, 20px) 10px; }
.cronometro h3{ font-size: clamp(16px, 4.5vw, 20px); margin-bottom: clamp(8px, 2.8vw, 15px); line-height:1.2; white-space:nowrap; }
.timer-wrapper{ display:flex; justify-content:center; align-items:stretch; gap: clamp(6px, 2.2vw, 12px); flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.timer-wrapper::-webkit-scrollbar{ display:none; }
.timer-box{ width: clamp(58px, 21vw, 80px); height: clamp(62px, 22vw, 90px); padding: clamp(4px, 1.2vw, 10px); }
.timer-box .value{ font-size: clamp(16px, 6vw, 28px); line-height:1.05 }
.timer-box .label{ font-size: clamp(9px, 2.6vw, 12px); margin-top: clamp(2px, .6vw, 6px) }
@media (max-width:360px){ .timer-wrapper{ gap:6px } .timer-box{ width: clamp(52px, 24vw, 70px); height: clamp(58px, 24vw, 82px) } }