:root{
      --bg:#0b0b10; --card:#0f1720; --accent:#ff6201; --accent-2:#fe8b38;
      --muted:#9aa3b2; --glass: rgba(255,255,255,0.03);
      --seat-w: clamp(17px, 5vw, 38px); 
      --seat-h: clamp(17px, 5vw, 38px);
      --an-stg: 800px;
      --alt-stg: 400px;

      --color1:#ff6201;
      --color2:#ffffff;

      --color3:#d80d8d;
      --color4:#ffffff;
      --color5:#d80d8d;
      --color6:#ffffff;
      --color7:#d80d8d;
      --color8:#ffffff;

      --color9:#7318a1;
      --color10:#ffffff;
      --color11:#7318a1;
      --color12:#ffffff;
      --color13:#7318a1;
      --color14:#ffffff;
    }

    *{box-sizing:border-box;font-family:Inter,system-ui,Arial,sans-serif}
    body{
      margin:0;
      padding: 0;      
      /*background:radial-gradient(circle, #501A66 0%, #000000 70%);*/
      background-image: url("images/bg.jpg");
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      color:#e6eef8;
    }

/* Header */
header{
  padding:15px 15px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.brand{display:flex;gap:15px;align-items:center}
.logo{
  width:40px;height:40px;border-radius:10px;
  background:linear-gradient(135deg,var(--accent),var(--accent-2));
  display:flex;align-items:center;justify-content:center;font-weight:800;color:#fff
}
h1{margin:0;font-size:25px}
.subtitle{font-size:19px;color:#9aa3b2}
.small{font-size:17px;color:#9aa3b2}

/* Main layout */
main{
  display:grid;
  grid-template-columns: 1fr minmax(280px, 360px);
  padding:0px 28px;
  margin: 0 auto;
}

/* Stage & Plan */


.tarima{
  position: relative;
  width:100%;
  --an: calc(var(--an-stg) * 0.41);
  max-width:var(--an);
  height:60px;  
  padding:14px;
  margin: 30px auto 15px auto;
  border-radius:10px;
  border: 2px solid white;
  font-weight:700;
  font-size: 29px;
  /*background:white;/*linear-gradient(90deg,#18202a,#0d2536);*/
  color:white;
  box-shadow:0 7px 24px rgba(0,0,0,0.6);
  display: flex;           /* activa flexbox */
  align-items: center;     /* centra vertical */
  justify-content: center; /* centra horizontal */
  text-align: center;      /* opcional, para compatibilidad con varias líneas */
}

.stage {
  align-items:center;
  justify-items:center;
  position: relative;
  width: var(--an-stg);
  margin: 30px auto;
  /*border: 2px solid #333;*/
  padding-top: 8px;
  background-color: rgba(0, 0, 0, 0.25);

}


/* contenedor plano */
.plan {
  position: relative;
  width: 100%;
  height: var(--alt-stg);/*ALTO AQUIIIIIIIIIIIIIIIIIIIIIIII*/
  
}

/* estilo general */
.zone {
  position: absolute;
  font-weight: bold;
  text-align: center;
  line-height: 1.5;
  display: flex;          /* activa flexbox */
  align-items: center;    /* centra vertical */
  justify-content: center;/* centra horizontal */
}
/* estilo general AGREGAR TODAS LAS zoneS AQUI!!!!!!!!!!!!!! */
.zone.vip, .zone.g1, .zone.g2, .zone.g3, .zone.p1, .zone.p2, .zone.p3{
  display: flex;
  flex-direction: column;   /* apila las filas verticalmente */
  align-items: center;      /* centra horizontal las filas */
  justify-content: center;  /* centra vertical todo dentro de la zone */
}

/*LINEAS PARA TESTINGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGGG*/
/*.zone, .plan { border: 2px solid;border-color: rgba(255, 255, 255, 0.3); }

/* zonas azules */
.p1 {
  --altox: calc(var(--alt-stg) * 0.65);
  --rows: 6;
  --an: calc(var(--an-stg) * 0.05);
  --cols: 1;
  left: calc(var(--alt-stg) * 0.1);
  top: calc(var(--alt-stg) * 0.025);
  width: var(--an);
  height: var(--altox);
}
.p2 {
  --altox: calc(var(--alt-stg) * 0.65);
  --rows: 6;
  --an: calc(var(--an-stg) * 0.05);
  --cols: 1;
  right: calc(var(--alt-stg) * 0.1);
  top: calc(var(--alt-stg) * 0.025);
  width: var(--an);
  height: var(--altox);
}
.p3 {
  --altox: var(--seat-h);
  --rows: 1;
  --an: calc(var(--an-stg) * 0.79);
  --cols: 9.8;
  bottom:calc(var(--alt-stg) * 0.0867);
  left: calc((var(--an-stg) - var(--an)) / 2);
  right: calc((var(--an-stg) - var(--an)) / 2);
  height: var(--altox);
}

/* zonas rojas */
.g1 {
  --altox: calc(var(--alt-stg) * 0.552);  
  --rows: 4;
  --an: calc(var(--alt-stg) * 0.22);
  --cols: 2;
  left: calc(var(--alt-stg) * 0.22);
  top: calc(var(--alt-stg) * 0.125);
  width: var(--an);
  height: var(--altox);
}
.g2 {
  --altox: calc(var(--alt-stg) * 0.552);
  --rows: 4;
  --an: calc(var(--alt-stg) * 0.22);
  --cols: 2;
  right: calc(var(--alt-stg) * 0.22);
  top: calc(var(--alt-stg) * 0.125);
  width: var(--an);
  height: var(--altox);
}
.g3 {
  --altox: var(--seat-h);
  --rows: 1;
  --an: calc(var(--an-stg) * 0.54);
  --cols: 10.2;
  bottom: calc(var(--alt-stg) * 0.2); /* justo encimaa de p3, supuestamente se ubican igual pero se coloca valor aqui para subir */
  left: calc((var(--an-stg) - var(--an)) / 2);
  right: calc((var(--an-stg) - var(--an)) / 2);
  height: var(--altox);
}
.vip {
  --altox: calc(var(--alt-stg) * 0.65);
  --rows: 6;
  --an: calc(var(--an-stg) * 0.54);
  --cols: 10.2;
  top: calc(var(--alt-stg) * 0.025);
  left: calc((var(--an-stg) - var(--an)) / 2);
  right: calc((var(--an-stg) - var(--an)) / 2);
  height: var(--altox);
}

/* Colores */ 
.zone.vip .seat { background: var(--color1); color: var(--color2);}
.zone.g1 .seat { background: var(--color3); color: var(--color4);}
.zone.g2 .seat { background: var(--color5); color: var(--color6);}
.zone.g3 .seat { background: var(--color7); color: var(--color8);}
.zone.p1 .seat { background: var(--color9); color: var(--color10);}
.zone.p2 .seat { background: var(--color11); color: var(--color12);}
.zone.p3 .seat { background: var(--color13); color: var(--color14);}

/* Asientos */

/* cada fila de asientos */
.fila {
  display: flex;
  justify-content: space-evenly; /* reparte asientos proporcionalmente */
  align-items: center;  
  margin: calc((var(--altox) - (var(--seat-h) * var(--rows))) / (var(--rows) - 1) / 2) 0 calc((var(--altox) - (var(--seat-h) * var(--rows))) / (var(--rows) - 1) / 2) 0;
}

/* Quita el margin-top en la primera fila */
.fila:first-child {
  margin-top: 0;
}

/* Quita el margin-bottom en la última fila */
.fila:last-child {
  margin-bottom: 0;
}

/* El primer asiento de cada fila no lleva margin-left */
.fila .seat:first-child {
  margin-left: 0;
}

/* El último asiento de cada fila no lleva margin-right */
.fila .seat:last-child {
  margin-right: 0;
}

.seat {
  width: var(--seat-w);
  height: var(--seat-h);
  border-radius: 6px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: 0.2s;
  margin: 0 calc((var(--an) - var(--seat-w) * var(--cols)) / (2 * (var(--cols)))) 0;

}
.seat:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 22px rgba(0,0,0,0.6);
  filter:brightness(0.95);
}
.seat.selected {
  background: #23c35f !important;
  color: #ffffff !important;
  outline:3px solid rgba(255,99,60,0.12);
  transform:translateY(-6px) scale(1.06);
  box-shadow:0 18px 28px rgba(255,98,1,0.12);
}
.seat.reserved{
  background:#000000 !important;
  color:#fff;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
  opacity: 0.7;
}

/* Panel lateral */
.panel{
  background:linear-gradient(180deg,#071227,#0a1b29);
  padding:18px;
  border-radius:12px;
  min-height:520px;
  position:relative;
  box-shadow:0 10px 30px rgba(2,6,23,0.6);
}
.panel h3{margin-top:0}
.cart{margin-top:8px;display:flex;flex-direction:column;gap:8px}
.cart-item{display:flex;justify-content:space-between;align-items:center;padding:8px;border-radius:8px;background:rgba(255,255,255,0.02)}
.cart-item .meta{font-size:13px;color:var(--muted)}
.total{display:flex;justify-content:space-between;align-items:center;padding:12px;margin-top:12px;border-radius:8px;background:linear-gradient(90deg, rgba(255,98,1,0.06), rgba(254,139,56,0.03));font-weight:700}
.pay-btn{
  margin-top:14px;
  background: linear-gradient(90deg, #ec4a93, #f97119);
  color:white;
  border:none;
  padding:14px;
  border-radius:0px;
  font-weight:600;
  font-size:16px;
  width:100%;
  cursor:pointer;
  box-shadow:0 8px 24px rgba(255,98,1,0.14);
}
.pay-btn:disabled{opacity:0.5;cursor:not-allowed}

/* Footer y modal */
footer{margin-top:150px;padding:8px 8px;text-align:center;color:var(--muted);font-size:13px}
.modal-back{position:fixed;inset:0;background:rgba(2,6,23,0.6);display:none;align-items:center;justify-content:center;z-index:9999}
.modal{width:90%;max-width:420px;background:#071226;padding:18px;border-radius:12px;color:#e6eef8;overflow-y:auto}
.reserva-close{float:right;font-size:24px;font-weight:bold;cursor:pointer;color:#fff}

/* Inputs */
label{display:block;margin-top:8px;font-size:13px;color:var(--muted)}
input[type="text"], input[type="email"], input[type="tel"], select{
  width:100%;padding:10px;border-radius:8px;border:none;margin-top:6px;background:#0b1220;color:#e6eef8
}
.file-input{padding:8px;border:2px dashed rgba(255,255,255,0.2);border-radius:8px;text-align:center;cursor:pointer;margin-top:10px}
.note{background:rgba(255,255,255,0.05);padding:8px;border-radius:8px;margin-top:10px;font-size:13px}

/* Botón reservado */
button.reserved {
  background-color: #ccc;
  cursor: not-allowed;
  opacity: 0.6;
}

.cart-title {
  color: white;  
  font-size: 18px;
  font-weight: 600;
  margin-top: 20px;
}

.cart {
  color: #919fc2 !important;
  font-size: 14px;
  display: flex;
}

#totalAmount{
  color: #f8d110;
  font-size: 25px;
}

.legend {
  background: rgba(255,255,255,0.02); /* fondo semi-transparente */
  padding: 12px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  margin-top: 12px;
}

.legend-title {
  color: #919fc2;  
  font-size: 15px;
  margin-bottom: 8px;
  font-weight: 600;
}

.legend-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 12px;
}

.legend-grid div {
  color: #919fc2;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.legend .color {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  display: inline-block;
  border: 1px solid #fff2; /* opcional para resaltar */
}

.legend-grid div:hover .color {
  transform: scale(1.2);
  box-shadow: 0 0 6px rgba(255,255,255,0.6);
  transition: 0.2s;
}

.legend-grid div .color {
  transition: 0.2s;
}

/*MODIFICAR ZONAS*/
/* Colores según tus zones */

.legend .color.vip { background: var(--color1);}
.legend .color.general { background: var(--color3);}
.legend .color.palco { background: var(--color9);}
.legend .color.selected { background: #23c35f;}










.bd-cd-timer {
  display: flex;
  width: 100%;
  justify-content: center; }

  @media (max-width: 767px) {
    .bd-cd-timer {
      padding: 10px 0; } }

  .bd-cd-timer .time-card { /* cuadrados */
    display: flex;
    flex-direction: column;
    text-align: center;
    width: 80px;
    position: relative;
    margin-right: 20px; }

    @media (max-width: 575px) {
      .bd-cd-timer .time-card {
        width: calc( 25% - 50px);
        margin-right: 10px; } }

    .bd-cd-timer .time-card .time-count { /* txt numeros*/
      display: flex;
      width: 100%;
      height: 100px;
      background-color: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(255, 255, 255, 0.1);
      align-items: center;
      justify-content: center;
      font-size: 50px;
      padding: 38px 38px 60px 38px;
      font-weight: 500;
      border-radius: 6px; }

      @media (max-width: 991px) {
        .bd-cd-timer .time-card .time-count {
          height: 100px;
          font-size: 30px; } }

    .bd-cd-timer .time-card .time-label { /* txt letras */
      display: block;
      font-size: 14px;
      font-weight: 400;
      color: #eeeeee;
      position: relative;
      bottom: 20px;
      width: 100%;
      text-align: center; }

      @media (max-width: 991px) {
        .bd-cd-timer .time-card .time-label {
          font-size: 12px; bottom: 50px;} }

.txt{
  display: flex;
  width: 100%;
  justify-content: center;
    margin: 0px 0 0px 0; 
}

@media (max-width: 900px) {
        .txt{
    margin: 0; 
    font-size: 30px;
} }












/* ///////////////Media Queries */
@media (max-width: 600px){

 body, html {
  margin:0;
  padding:0;
  overflow-x: auto; /* ❌ Antes estaba hidden, ahora permitimos scroll horizontal */
  overflow-y: auto; /* vertical */
  zoom: 0.85;
  transform-origin: top center; /* ancla arriba */
}

main {
  display:flex;
  flex-direction:column;
  gap:16px;
  padding:12px;
}


h1{font-size:18px;}
.subtitle{font-size:11px;}

.plan {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
}

.seat.reserved{
  background:#000000 !important;
  color:#fff;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
  opacity: 0.7;
}

/* Panel carrito al final */
.panel{
  width:100%;
  min-height: 90%;
  margin-top:12px;
}

.tarima {
    position: relative;      /* ahora fluye en el layout */
    width: auto;             /* quitar width 100% */
    max-width: var(--an);
    margin: 25px auto 10px auto;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

/*MODIFICAR ZONAS*/
.legend .color.vip { background: var(--color1);}
.legend .color.general { background: var(--color3);}
.legend .color.palco { background: var(--color9);}
.legend .color.selected { background: #23c35f;}

}