#theater-app{
  max-width:1400px;
  margin:32px auto;
  padding:28px;
  text-align:center;
  font-family:Arial,sans-serif;
  color:#f5f7fb;
  background:linear-gradient(180deg, rgba(15,18,26,.96) 0%, rgba(7,9,14,.98) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:24px;
  box-shadow:0 25px 70px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
}

#theater-app h1{
  margin:0 0 24px;
  color:#ffffff;
  font-size:30px;
  font-weight:800;
  letter-spacing:.4px;
}

.stage{
  position:relative;
  background:radial-gradient(circle at center, #3a3f4f 0%, #1d2230 52%, #0b0f16 100%);
  color:#fff;
  width:600px;
  height:150px;
  margin:0 auto 34px;
  border-radius:0 0 60% 60%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  font-weight:800;
  letter-spacing:1px;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 25px 50px rgba(0,0,0,.38), inset 0 -10px 25px rgba(255,255,255,.05);
}

.stage::after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:92%;
  height:4px;
  background:linear-gradient(to right, transparent, rgba(212,175,55,.55), transparent);
  border-radius:10px;
}

.stage::before{
  content:"";
  position:absolute;
  top:-20px;
  left:50%;
  transform:translateX(-50%);
  width:70%;
  height:60px;
  background:radial-gradient(circle, rgba(255,255,255,.14), transparent);
  filter:blur(20px);
}

.overview-map{
  display:flex;
  flex-direction:column;
  gap:16px;
  max-width:640px;
  margin:0 auto;
}

.zone-block{
  padding:22px;
  font-size:20px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
  cursor:pointer;
  font-weight:800;
  letter-spacing:.6px;
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;
  box-shadow:0 12px 30px rgba(0,0,0,.24);
}

.zone-block:hover{
  transform:translateY(-2px);
  filter:brightness(1.05);
  box-shadow:0 18px 35px rgba(0,0,0,.28);
}

.zone-luneta{background:linear-gradient(135deg, #21468b 0%, #2e63c0 100%);}
.zone-primer{background:linear-gradient(135deg, #6c2aa8 0%, #a54bd5 100%);}
.zone-balcon{background:linear-gradient(135deg, #6f8c12 0%, #b8d63a 100%); color:#0d1117;}

.zone-title{
  margin:8px 0 10px;
  font-size:34px;
  font-weight:900;
  color:#ffffff;
  letter-spacing:.3px;
}

.zone-price{
  font-size:18px;
  margin-top:0;
  margin-bottom:24px;
  color:#d4af37;
  font-weight:700;
}

.map-wrapper{
  overflow-x:auto;
  padding:24px 0 10px;
  width:100%;
}

.theater-map{
  display:grid;
  grid-template-columns:1fr 1.3fr 1fr;
  gap:42px;
  justify-content:center;
  align-items:flex-start;
  width:max-content;
  min-width:900px;
  max-width:1100px;
  margin:0 auto;
  padding:18px 24px 28px;
  background:linear-gradient(180deg, rgba(255,255,255,.03) 0%, rgba(255,255,255,.015) 100%);
  border:1px solid rgba(255,255,255,.08);
  border-radius:22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 12px 30px rgba(0,0,0,.18);
}

.block{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.left-block{justify-self:end;}
.center-block{justify-self:center; position:relative;}
.right-block{justify-self:start;}

.seat-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:26px;
}

.left-block .seat-row{justify-content:flex-end;}
.center-block .seat-row{justify-content:center;}
.right-block .seat-row{justify-content:flex-start;}

.row-labels-column{
  position:absolute;
  top:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:7px;
  z-index:2;
}

.row-labels-column.left{left:-34px;}
.row-labels-column.right{right:-34px;}

.row-label{
  min-width:24px;
  height:26px;
  line-height:26px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:800;
  font-size:12px;
  color:#ffffff;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  border-radius:999px;
  box-shadow:0 6px 16px rgba(0,0,0,.18);
  text-shadow:0 1px 2px rgba(0,0,0,.35);
}

.center-block::before,
.center-block::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(180deg, rgba(212,175,55,.35), rgba(255,255,255,.08));
  border-radius:10px;
}

.center-block::before{left:-28px;}
.center-block::after{right:-28px;}

.seat{
  width:24px;
  height:24px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.14);
  font-size:8px;
  font-weight:800;
  cursor:pointer;
  color:#fff;
  box-shadow:0 4px 10px rgba(0,0,0,.22);
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease;
  position:relative;
  padding:0;
}

.seat:hover{
  transform:scale(1.14);
  box-shadow:0 8px 18px rgba(0,0,0,.30);
  border-color:rgba(255,255,255,.34);
}

.seat-luneta{background:linear-gradient(135deg, #234b96 0%, #366ed4 100%);}
.seat-primer{background:linear-gradient(135deg, #7331b2 0%, #ad58e0 100%);}
.seat-balcon{background:linear-gradient(135deg, #7e9d14 0%, #c1de41 100%); color:#10151c;}

.seat.selected{
  background:linear-gradient(135deg, #f5b53f 0%, #ff8c1a 100%)!important;
  color:#fff!important;
  border-color:rgba(255,255,255,.45);
  box-shadow:0 0 0 3px rgba(255,152,0,.22), 0 8px 16px rgba(0,0,0,.18);
}

.seat.sold,
.seat.blocked{
  background:linear-gradient(135deg, #5d6472 0%, #818899 100%)!important;
  color:#fff!important;
  cursor:not-allowed;
  opacity:.78;
}

.seat.sold:hover,
.seat.blocked:hover{
  transform:none;
  box-shadow:0 4px 10px rgba(0,0,0,.22);
}

.seat::after{
  content:attr(data-info);
  position:absolute;
  bottom:145%;
  left:50%;
  transform:translateX(-50%);
  background:#111827;
  color:#fff;
  padding:7px 10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.12);
  font-size:10px;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease;
  z-index:9999;
}

.seat:hover::after{opacity:1;}

.seat-row.balcony-section-break{margin-top:36px;}
.row-label.balcony-section-break-label{margin-top:36px;}

#zone-view{display:none;}

.back-btn{
  margin-bottom:20px;
  padding:12px 18px;
  background:rgba(255,255,255,.08);
  color:#fff;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  cursor:pointer;
  font-weight:800;
  box-shadow:0 8px 18px rgba(0,0,0,.18);
}

.back-btn:hover{
  background:rgba(255,255,255,.12);
}

.checkout-panel{
  max-width:700px;
  margin:28px auto 0;
  padding:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.04) 100%);
  border:1px solid rgba(255,255,255,.10);
  border-radius:18px;
  text-align:left;
  color:#f4f6fb;
  box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.checkout-panel h3{
  margin-top:0;
  margin-bottom:14px;
  color:#ffffff;
}

.checkout-item{
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.checkout-total{
  font-weight:800;
  font-size:20px;
  margin-top:14px;
  color:#d4af37;
}

.checkout-btn{
  width:100%;
  margin-top:16px;
  padding:14px;
  border:0;
  border-radius:12px;
  background:linear-gradient(135deg, #d62828 0%, #ff4d4d 100%);
  color:#fff;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 10px 20px rgba(214,40,40,.28);
}

.checkout-btn:disabled{
  opacity:.5;
  cursor:not-allowed;
  box-shadow:none;
}

.checkout-item-removable{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.remove-seat-btn{
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  padding:7px 12px;
  background:rgba(255,255,255,.10);
  color:#fff;
  font-size:12px;
  font-weight:800;
  cursor:pointer;
  white-space:nowrap;
}

.remove-seat-btn:hover{
  background:#d62828;
}

@media(max-width:900px){
  #theater-app{
    padding:16px;
    margin:16px auto;
    border-radius:18px;
  }

  #theater-app h1{
    font-size:24px;
  }

  .stage{
    width:330px;
    height:100px;
    font-size:20px;
  }

  .zone-title{
    font-size:28px;
  }

  .theater-map{
    min-width:850px;
    gap:28px;
    padding:16px 20px 22px;
  }

  .seat{
    width:20px;
    height:20px;
    font-size:7px;
  }

  .seat-row{
    height:20px;
    gap:4px;
  }

  .row-label{
    min-width:20px;
    height:20px;
    line-height:20px;
    font-size:10px;
  }

  .row-labels-column{gap:4px;}
  .row-labels-column.left{left:-26px;}
  .row-labels-column.right{right:-26px;}
  .center-block::before{left:-22px;}
  .center-block::after{right:-22px;}
}

@media(max-width:600px){
  .checkout-item-removable{
    align-items:flex-start;
    flex-direction:column;
  }

  .remove-seat-btn{
    width:100%;
  }
}


/* === Auto-fit map: sin deslizante horizontal === */
.map-wrapper{
  overflow:hidden;
  padding:24px 0 10px;
  width:100%;
  position:relative;
}

.theater-map{
  gap:34px;
  width:max-content;
  min-width:0;
  max-width:none;
  transform-origin:top center;
  will-change:transform;
}

.block{ gap:6px; }
.seat-row{ gap:5px; height:24px; }
.row-labels-column.left{ left:-30px; }
.row-labels-column.right{ right:-30px; }
.row-label{ min-width:22px; height:24px; line-height:24px; }
.center-block::before{ left:-24px; }
.center-block::after{ right:-24px; }
.seat{ width:22px; height:22px; }

@media(max-width:900px){
  .theater-map{ min-width:0; gap:26px; padding:14px 16px 20px; }
  .seat{ width:18px; height:18px; font-size:7px; }
  .seat-row{ height:18px; gap:4px; }
  .row-label{ min-width:18px; height:18px; line-height:18px; font-size:10px; }
  .row-labels-column.left{ left:-24px; }
  .row-labels-column.right{ right:-24px; }
  .center-block::before{ left:-20px; }
  .center-block::after{ right:-20px; }
}


/* === v1.0.6 Balance visual: mapa completo sin scroll y sin cortes por barra fija === */
body.mc-seatmap-page{
  padding-bottom:95px;
}

#theater-app{
  padding-bottom:125px;
}

#zone-view .stage{
  width:min(520px, 72vw);
  height:92px;
  margin:0 auto 24px;
  font-size:24px;
}

.map-wrapper{
  overflow:hidden!important;
  padding:18px 0 8px!important;
  width:100%;
  position:relative;
}

.theater-map{
  gap:22px!important;
  padding:14px 16px 20px!important;
  min-width:0!important;
  max-width:none!important;
  transform-origin:top center!important;
}

.block{
  gap:4px!important;
}

.seat-row{
  height:21px!important;
  gap:3px!important;
}

.seat{
  width:20px!important;
  height:20px!important;
  font-size:7px!important;
}

.row-labels-column{
  gap:4px!important;
}

.row-labels-column.left{
  left:-24px!important;
}

.row-labels-column.right{
  right:-24px!important;
}

.row-label{
  min-width:20px!important;
  height:21px!important;
  line-height:21px!important;
  font-size:10px!important;
}

.center-block::before{
  left:-19px!important;
}

.center-block::after{
  right:-19px!important;
}

/* Luneta tiene más filas: se compacta solo esta zona para que no se corte */
#seat-map.theater-map-luneta{
  gap:18px!important;
  padding:12px 14px 18px!important;
}

#seat-map.theater-map-luneta .seat{
  width:18px!important;
  height:18px!important;
  font-size:7px!important;
}

#seat-map.theater-map-luneta .seat-row{
  height:19px!important;
  gap:3px!important;
}

#seat-map.theater-map-luneta .block{
  gap:3px!important;
}

#seat-map.theater-map-luneta .row-labels-column{
  gap:3px!important;
}

#seat-map.theater-map-luneta .row-label{
  min-width:18px!important;
  height:19px!important;
  line-height:19px!important;
  font-size:9px!important;
}

#seat-map.theater-map-luneta .row-labels-column.left{
  left:-21px!important;
}

#seat-map.theater-map-luneta .row-labels-column.right{
  right:-21px!important;
}

#seat-map.theater-map-luneta .center-block::before{
  left:-17px!important;
}

#seat-map.theater-map-luneta .center-block::after{
  right:-17px!important;
}

.checkout-panel{
  margin-bottom:115px!important;
}

@media(max-width:900px){
  #theater-app{
    padding-bottom:130px;
  }

  .theater-map{
    gap:18px!important;
  }

  .seat{
    width:17px!important;
    height:17px!important;
    font-size:6px!important;
  }

  .seat-row{
    height:18px!important;
    gap:3px!important;
  }
}


/* === v1.0.7 Centrado fijo entre zonas === */
#zone-view .map-wrapper{
  display:flex!important;
  justify-content:center!important;
  align-items:flex-start!important;
  overflow:hidden!important;
}

#seat-map.theater-map{
  --mc-left-col:503px;
  --mc-center-col:365px;
  --mc-right-col:503px;
  grid-template-columns:var(--mc-left-col) var(--mc-center-col) var(--mc-right-col)!important;
  justify-content:center!important;
  justify-items:stretch!important;
  align-items:flex-start!important;
  width:max-content!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

#seat-map.theater-map .block,
#seat-map.theater-map .left-block,
#seat-map.theater-map .center-block,
#seat-map.theater-map .right-block{
  width:100%!important;
  min-width:0!important;
}

#seat-map.theater-map .left-block .seat-row{
  justify-content:flex-end!important;
}

#seat-map.theater-map .center-block .seat-row{
  justify-content:center!important;
}

#seat-map.theater-map .right-block .seat-row{
  justify-content:flex-start!important;
}

@media(max-width:900px){
  #seat-map.theater-map{
    --mc-left-col:430px;
    --mc-center-col:315px;
    --mc-right-col:430px;
  }
}


/* === v1.0.8 Aviso de cuenta antes de checkout === */
.mc-account-note{
  margin:14px 0 16px;
  padding:12px 14px;
  border-radius:14px;
  background:rgba(212,175,55,.10);
  border:1px solid rgba(212,175,55,.24);
  color:#f7e4a4;
  font-size:14px;
  line-height:1.45;
  text-align:left;
}