/* 10Carga: mantener mapa y resumen al costado en PC/tablet. */
@media (min-width: 769px) {
  #cot10 {
    width: min(94vw, 1500px) !important;
    max-width: 1500px !important;
    margin: 30px auto !important;
  }

  #cot10 > .cot-layout {
    display: grid !important;
    grid-template-columns: minmax(420px, 0.95fr) minmax(360px, 0.85fr) !important;
    gap: 28px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto !important;
  }

  #cot10 > .cot-layout > .cot-card:first-child {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  #cot10 > .cot-layout > .cot-side {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    position: sticky !important;
    top: 20px !important;
    width: auto !important;
    max-width: none !important;
    min-width: 0 !important;
    margin-top: 0 !important;
  }

  #cot10 .cot-side > .cot-card {
    width: 100% !important;
    max-width: none !important;
  }

  #mapCot,
  #cot10 .mapa-cotizador {
    width: 100% !important;
    min-height: 340px !important;
  }
}

@media (max-width: 768px) {
  #cot10 {
    width: 100% !important;
    margin: 0 auto !important;
  }

  #cot10 > .cot-layout {
    display: block !important;
    width: 94% !important;
    max-width: 94% !important;
    margin: 0 auto !important;
  }

  #cot10 > .cot-layout > .cot-side {
    position: static !important;
    width: 100% !important;
    margin-top: 18px !important;
  }
}

/* Paginas 6 y 7: flujo normal, no ventana flotante. */
#cot10 > .modal-reserva,
#cot10 > .modal-reserva-premium {
  width: min(94vw, 1500px) !important;
  max-width: 1500px !important;
  margin: 30px auto !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  position: static !important;
}

#cot10 > .modal-reserva .modal-close {
  display: none !important;
}

#cot10 .paso-reserva-layout,
#cot10 .pago-layout {
  width: 100% !important;
  max-width: 1500px !important;
  margin: 0 auto !important;
}

@media (min-width: 769px) {
  #cot10 .paso-reserva-layout,
  #cot10 .pago-layout {
    display: grid !important;
    grid-template-columns: minmax(520px, 1.05fr) minmax(380px, 0.9fr) !important;
    gap: 28px !important;
    align-items: start !important;
  }

  #cot10 .paso-reserva-layout > .pago-side,
  #cot10 .pago-layout > .pago-side {
    position: sticky !important;
    top: 20px !important;
    width: auto !important;
    min-width: 0 !important;
  }
}

@media (max-width: 768px) {
  #cot10 > .modal-reserva,
  #cot10 > .modal-reserva-premium {
    width: 94% !important;
    margin: 18px auto !important;
  }

  #cot10 .paso-reserva-layout,
  #cot10 .pago-layout {
    display: block !important;
    padding: 0 !important;
  }

  #cot10 .paso-reserva-layout > .pago-main,
  #cot10 .paso-reserva-layout > .pago-side,
  #cot10 .pago-layout > .pago-main,
  #cot10 .pago-layout > .pago-side {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #cot10 .paso-reserva-layout > .pago-side,
  #cot10 .pago-layout > .pago-side {
    position: static !important;
    margin-top: 18px !important;
  }
}

.calculo-paquetes-status{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  margin:16px auto 24px;
  padding:14px 18px;
  border:1px solid #dbeafe;
  border-radius:10px;
  background:#eff6ff;
  color:#0B3D91;
  font-weight:800;
}

.calculo-spinner{
  width:22px;
  height:22px;
  border:3px solid #bfdbfe;
  border-top-color:#F58220;
  border-radius:50%;
  animation:calculoSpin .8s linear infinite;
}

@keyframes calculoSpin{
  to{ transform:rotate(360deg); }
}

.cot-btn:disabled{
  opacity:.7;
  cursor:not-allowed;
}

/* ==================================================
   PASARELA SIMULADA - PAGO / VALIDACION TARJETA
================================================== */

.pasarela-box{
  border:1px solid #d8e0ec;
  border-radius:18px;
  padding:22px;
  background:linear-gradient(180deg,#ffffff 0%,#f8fafc 100%);
  box-shadow:0 14px 34px rgba(15,23,42,.06);
}

.pasarela-option{
  display:flex;
  align-items:center;
  gap:12px;
  border:1px solid #d8e0ec;
  border-radius:14px;
  padding:15px 16px;
  margin-bottom:10px;
  background:#ffffff;
  color:#081735;
  font-weight:900;
  cursor:pointer;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.pasarela-option:hover{
  border-color:#ff7900;
  box-shadow:0 10px 24px rgba(255,121,0,.10);
  transform:translateY(-1px);
}

.pasarela-option input{
  width:18px;
  height:18px;
  accent-color:#ff7900;
}

.pasarela-card-fields{
  margin-top:20px;
  border:1px solid #d8e0ec;
  border-radius:16px;
  padding:18px;
  background:#ffffff;
}

.pasarela-card-fields label{
  display:block;
  margin:12px 0 7px;
  color:#0b3d91;
  font-size:14px;
  font-weight:900;
}

.pasarela-card-fields input{
  width:100%;
  border:1px solid #cbd5e1;
  border-radius:13px;
  padding:14px 15px;
  background:#f8fafc;
  color:#081735;
  font-size:16px;
  font-weight:800;
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.pasarela-card-fields input:focus{
  border-color:#ff7900;
  background:#ffffff;
  box-shadow:0 0 0 4px rgba(255,121,0,.12);
}

.pasarela-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.pasarela-note{
  margin:16px 0 0;
  border:1px solid #fed7aa;
  border-radius:14px;
  padding:13px 15px;
  background:#fff7ed;
  color:#7c2d12;
  font-size:14px;
  font-weight:800;
  line-height:1.35;
}

@media (max-width: 640px){
  .pasarela-box{
    padding:16px;
  }

  .pasarela-grid{
    grid-template-columns:1fr;
    gap:0;
  }

  .pasarela-option{
    padding:14px;
  }
}