/* =========================================================
   MP RESERVAS - FRONT (CLEAN)
   - Theme via CSS variables: --mp-primary, --mp-font-base
   - Compatible con tus clases actuales (plan/vuelos/servicios)
   ========================================================= */

:root{
  --mp-primary: #e53935;
  --mp-primary-contrast: #ffffff;
  --mp-font-base: 14px;

  --mp-text: #111111;
  --mp-muted: #6b7280;
  --mp-border: #eeeeee;
  --mp-bg: #ffffff;
  --mp-soft: #f7f7f7;

  --mp-radius: 16px;
  --mp-shadow-sm: 0 6px 18px rgba(0,0,0,.04);
  --mp-shadow-md: 0 10px 25px rgba(0,0,0,.05);
}

/* Base */
.mp-wrap{
  max-width: 1200px;
  margin: 24px auto;
  padding: 0 16px;
  box-sizing: border-box;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: var(--mp-font-base, 14px);
  line-height: 1.45;
  color: var(--mp-text);
}

.mp-title{ font-size: 32px; margin: 6px 0 10px; line-height: 1.1; }
.mp-h3{ font-size: 18px; margin: 0 0 12px; }
.mp-h4{ font-size: 14px; margin: 12px 0 10px; font-weight: 900; letter-spacing: .3px; }

.mp-small, .mp-help{
  color: var(--mp-muted);
  font-size: 12px;
  margin-top: 6px;
}

.mp-box{
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius);
  background: var(--mp-bg);
  box-shadow: var(--mp-shadow-sm);
}

.mp-card{
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius);
  background: var(--mp-bg);
  box-shadow: var(--mp-shadow-md);
}

/* Botones */
.mp-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  border-radius: 12px;
  padding: 12px 14px;
  font-weight: 900;
  letter-spacing: .3px;
  text-decoration: none;
  font-size: 14px;
  user-select: none;
}

.mp-btn--primary{
  background: var(--mp-primary);
  color: var(--mp-primary-contrast);
}
.mp-btn--primary:hover{ filter: brightness(.95); }

.mp-btn--outline{
  background: #fff;
  color: var(--mp-primary);
  border: 2px solid var(--mp-primary);
}
.mp-btn--outline:hover{ filter: brightness(.98); }

.mp-btn--full{ width: 100%; }

/* Alerts */
.mp-alert{
  padding: 14px;
  border: 1px solid #ffe0e0;
  background: #fff5f5;
  border-radius: 14px;
}

.mp-alert--error{ border-color: #ffd1d1; background: #fff5f5; }
.mp-alert--success{ border-color: #c9f2d3; background: #f1fff5; }

/* ✅ Alimentación: pill principal con el tema (no rosado) */
.mp-alert--primary{
  background: var(--mp-primary) !important;
  color: #fff !important;
  border: 0 !important;
  font-weight: 900;
  border-radius: 14px;
}

/* Forms */
.mp-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 760px){
  .mp-grid{ grid-template-columns: 1fr; }
}

.mp-field label{
  display: block;
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 6px;
}

.mp-field input,
.mp-field textarea,
.mp-field select{
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 12px 12px;
  background: #fff;
  font-size: 14px;
}

.mp-qr{ display:flex; flex-direction:column; gap:10px; align-items:flex-start; }
.mp-qr__img img{
  max-width: 320px;
  height: auto;
  border-radius: 14px;
  border: 1px solid var(--mp-border);
  background: #fff;
  padding: 10px;
}

/* Helpers */
.mp-result-card__map{
  display: inline-block;
  margin-top: 6px;
  color: #1a73e8;
  text-decoration: none;
  font-weight: 800;
}
.mp-result-card__map:hover{ text-decoration: underline; }

.mp-result-card__address{ margin-top: 6px; color: #444; }

/* =========================
   STEPS (barra superior)
   ========================= */

.mp-steps{
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 12px;
  border: 1px solid var(--mp-border);
  border-radius: 14px;
  background: #fff;
  box-shadow: var(--mp-shadow-sm);
  margin-bottom: 18px;
}

.mp-step{
  padding: 8px 12px;
  border-radius: 999px;
  background: #f5f5f5;
  color: #222;
  font-weight: 800;
  font-size: 13px;
  text-decoration: none;
}

.mp-step--active{
  background: var(--mp-primary);
  color: #fff;
}

.mp-step--total{
  margin-left: auto;
  background: #111;
  color: #fff;
}

@media (max-width: 960px){
  .mp-step--total{ width: 100%; text-align: center; margin-left: 0; }
}

/* =========================
   PLAN (Hotel) layout
   ========================= */
.mp-plan{
  display: grid;
  grid-template-columns: 1.6fr .9fr;
  gap: 18px;
  align-items: start;
}

@media (max-width: 960px){
  .mp-plan{ grid-template-columns: 1fr; }
}

.mp-plan__right{
  position: sticky;
  top: 22px;
}

/* Summary (columna derecha) */
.mp-summary{
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius);
  background: #fff;
  box-shadow: var(--mp-shadow-md);
  padding: 14px;
}

.mp-summary__row{
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid #f1f1f1;
}
.mp-summary__row:first-of-type{ border-top: none; }
.mp-summary__row strong{ font-weight: 900; }

/* Galería */
.mp-gallery{
  display: flex;
  gap: 12px;
  overflow: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
}

.mp-gallery__item{
  min-width: 520px;
  max-width: 520px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--mp-border);
  background: #fff;
  scroll-snap-align: start;
  box-shadow: var(--mp-shadow-md);
}

@media (max-width: 960px){
  .mp-gallery__item{ min-width: 86vw; max-width: 86vw; }
}

.mp-gallery__item img{ width: 100%; height: auto; display: block; }

.mp-img-placeholder{
  height: 100%;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #777;
  font-weight: 800;
  background: #f7f7f7;
}

/* =========================
   BUSCADOR (oscuro)
   ✅ FIX: estos estilos SOLO deben afectar al buscador
   ========================= */

.mp-search .mp-searchbar{
  border-radius: 14px;
  padding: 14px;
  background: linear-gradient(90deg, #2b1f33, #241824);
  border: 1px solid rgba(255,255,255,.12);
}

.mp-searchbar__row{
  display: flex;
  gap: 10px;
  align-items: stretch;
  flex-wrap: wrap;
}

.mp-searchbar__row--bottom{
  margin-top: 10px;
  justify-content: space-between;
  align-items: center;
}

/* ✅ antes era .mp-field (rompía todo). Ahora está limitado a .mp-search */
.mp-search .mp-field{
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  min-width: 170px;
  flex: 1;
}

.mp-search .mp-field--wide{ min-width: 240px; flex: 1.3; }
.mp-search .mp-field--small{ min-width: 120px; flex: .7; }

.mp-field__label{
  display:flex;
  gap:8px;
  align-items:center;
  font-size:12px;
  opacity:.95;
  margin-bottom:6px;
  color:#fff;
}

/* ✅ antes era .mp-field input/select (rompía el formulario de datos) */
.mp-search .mp-field input,
.mp-search .mp-field select{
  width:100%;
  background: transparent;
  border: 0;
  outline: none;
  color:#fff;
  font-size:14px;
}

.mp-searchbar__btn{
  border-radius: 12px;
  padding: 0 18px;
  display:flex;
  align-items:center;
  gap:8px;
  min-width: 140px;
  justify-content:center;
  white-space: nowrap;
}

.mp-search-hint{ margin-top: 12px; opacity: .85; color:#fff; }
/* =========================
   RESULTADOS (cards)
   ========================= */

.mp-results{ margin-top: 18px; }
.mp-results-title{ margin: 0 0 14px 0; font-size: 22px; }

.mp-result-card{
  display: grid;
  grid-template-columns: 440px 1fr;
  gap: 18px;
  background: #fff;
  border: 1px solid var(--mp-border);
  border-radius: var(--mp-radius);
  overflow: hidden;
  box-shadow: var(--mp-shadow-md);
  margin-bottom: 16px;
}

@media (max-width: 980px){
  .mp-result-card{ grid-template-columns: 1fr; }
}

.mp-result-card__img{
  background: #f7f7f7;
  min-height: 280px;
}
.mp-result-card__img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mp-result-card__body{
  padding: 16px 16px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mp-result-card__title{
  margin: 0;
  font-size: 30px;
  line-height: 1.05;
}

.mp-result-card__chips{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.mp-chip{
  display: inline-flex;
  gap: 8px;
  align-items: center;
  background: #f3f4f6;
  border: 1px solid #e6e7ea;
  border-radius: 12px;
  padding: 8px 10px;
  font-weight: 800;
}

.mp-result-card__desc{
  margin: 6px 0 0 0;
  color: #444;
  line-height: 1.4;
}

.mp-result-card__bottom{
  margin-top: auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 14px;
  border-top: 1px solid #f0f0f0;
  padding-top: 12px;
}

@media (max-width: 980px){
  .mp-result-card__bottom{
    flex-direction: column;
    align-items: stretch;
  }
}

.mp-result-card__pricebox{ display:flex; flex-direction:column; gap:6px; }
.mp-result-card__nights{ font-weight: 900; color: #111; }

.mp-result-card__price{
  display:flex;
  gap: 18px;
  align-items: flex-end;
  flex-wrap: wrap;
}

.mp-result-card__pricepp strong{ display:block; font-size: 18px; font-weight: 900; }
.mp-result-card__pricetotal strong{ display:block; font-size: 30px; font-weight: 1000; }

.mp-btn--pill{
  border-radius: 14px;
  padding: 14px 18px;
  min-width: 180px;
}

/* =========================
   PLAN - Servicios + Más info
   (Corrige: desalineación + contenedor blanco)
   ========================= */

/* La caja de servicios (en plan.php se usa: .mp-box.mp-services > .mp-services-grid > .mp-service) */
.mp-step-plan .mp-services{
  background: #fff;
  border: 1px solid var(--mp-border);
  border-radius: 18px;
  padding: 16px;
}

.mp-step-plan .mp-services .mp-h3{ margin: 0 0 12px; }

.mp-step-plan .mp-services-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 18px;
}

@media (max-width: 980px){
  .mp-step-plan .mp-services-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .mp-step-plan .mp-services-grid{ grid-template-columns: 1fr; }
}

.mp-step-plan .mp-service{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: #111;
  min-width: 0;
}

.mp-step-plan .mp-service span:last-child{
  display: inline-block;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
}

.mp-step-plan .mp-service .dashicons{
  color: var(--mp-primary);
  font-size: 20px;
  line-height: 1;
}

/* Más información sobre el hotel (details) -> ahora SI en tarjeta blanca */
.mp-hotel-details{
  margin-top: 16px;
  border: 1px solid var(--mp-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--mp-shadow-sm);
  padding: 14px;
}

.mp-hotel-details > summary{
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mp-hotel-details > summary::-webkit-details-marker{ display:none; }

.mp-hotel-details__body{
  margin-top: 14px;
  padding: 0 2px 2px;
  color: #222;
  line-height: 1.55;
}

/* Evita que el summary “se salga” del contenedor */
.mp-hotel-details > summary.mp-btn{
  max-width: 100%;
  white-space: normal;
}

/* Fix pequeños */
.mp-plan__left{ min-width: 0; }
.mp-summary{ min-width: 0; }
/* =========================================================
   STEP: VUELOS (Paso 3) — estilo tipo OnVacation (captura)
   Soporta:
   - Columna izquierda filtros
   - Cards tipo ticket + panel de precio a la derecha
   - Resalta selección con el color del tema
   ========================================================= */

/* Wrapper de la pantalla (si existe clase de step) */
.mp-step-vuelo .mp-wrap,
.mp-wrap.mp-step-vuelo{
  max-width: 1280px;
}

/* Layout */
.mp-vuelos-layout{
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 980px){
  .mp-vuelos-layout{ grid-template-columns: 1fr; }
}

/* Sidebar filtros */
.mp-vuelos-filters,
.mp-filter-vuelos,
.mp-vuelos-sidebar{
  border: 0;
}

.mp-vuelos-filters .mp-h3,
.mp-filter-vuelos .mp-h3{
  font-size: 18px;
  font-weight: 1000;
}

.mp-filter-card{
  border: 1px solid var(--mp-border);
  border-radius: 14px;
  background: #fff;
  padding: 12px;
  box-shadow: var(--mp-shadow-sm);
}

.mp-filter-section{ margin-top: 14px; }
.mp-filter-label{ font-weight: 900; margin-bottom: 8px; }

.mp-filter-input{
  width: 100%;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  padding: 12px;
  background: #fff;
}

.mp-filter-actions{
  display: flex;
  justify-content: flex-end;
  margin-top: 10px;
}

.mp-filter-btn{
  border: 2px solid var(--mp-primary);
  color: var(--mp-primary);
  background: #fff;
  border-radius: 10px;
  padding: 8px 10px;
  font-weight: 900;
  cursor: pointer;
}

/* Ordenar */
.mp-vuelos-toolbar{
  display: flex;
  justify-content: center;
  margin: 10px 0 16px;
}
.mp-vuelos-toolbar .mp-order{
  border: 1px solid var(--mp-border);
  background: #fff;
  padding: 10px 12px;
  border-radius: 10px;
  min-width: 320px;
  text-align: center;
  box-shadow: var(--mp-shadow-sm);
}

/* Cards de vuelo */
.mp-flight-card{
  position: relative;
  display: block;
  border: 1px solid #dedede;
  border-radius: 14px;
  padding: 0;
  margin: 12px 0;
  background: #fff;
  box-shadow: var(--mp-shadow-md);
  cursor: pointer;
  overflow: hidden;
}

.mp-flight-card input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.mp-flight-card__main{
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 0;
  align-items: stretch;
}
@media (max-width: 980px){
  .mp-flight-card__main{ grid-template-columns: 1fr; }
}

.mp-flight-card__left{
  position: relative;
  padding: 14px 18px 14px 18px;
  background: #fff;
}

.mp-flight-card__left:before{
  content:"";
  position:absolute;
  left: 56px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: repeating-linear-gradient(
    to bottom,
    #d9d9d9 0 6px,
    transparent 6px 12px
  );
  opacity: .8;
}

.mp-flight-card__left:after{
  content: attr(data-side);
  position:absolute;
  left: 14px;
  top: 14px;
  bottom: 14px;
  width: 34px;
  display:flex;
  align-items:center;
  justify-content:center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-weight: 1000;
  letter-spacing: .6px;
  color: var(--mp-primary);
}

.mp-flight-top{
  font-size: 12px;
  color: #111;
  line-height: 1.35;
  padding-left: 56px;
}

.mp-flight-mid{
  margin-top: 10px;
  padding-left: 56px;
}

.mp-flight-air{
  font-weight: 1000;
  letter-spacing: .3px;
  margin-bottom: 8px;
}

.mp-flight-route{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}

.mp-flight-route .mp-from,
.mp-flight-route .mp-to{
  font-weight: 1000;
  font-size: 28px;
  color: #111;
  line-height: 1;
}

.mp-flight-route .mp-arrow{
  width: 140px;
  height: 2px;
  background: var(--mp-primary);
  position: relative;
  margin-top: 6px;
}
.mp-flight-route .mp-arrow:after{
  content:"";
  position:absolute;
  right:-2px;
  top:-4px;
  border-left: 8px solid var(--mp-primary);
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.mp-flight-conx{
  margin-top: 8px;
  color: var(--mp-primary);
  font-weight: 1000;
  padding-left: 56px;
}

.mp-flight-card__right{
  background: #dedede;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  align-items: center;
  border-left: 1px solid #cfcfcf;
}
@media (max-width: 980px){
  .mp-flight-card__right{
    border-left: 0;
    border-top: 1px solid #cfcfcf;
  }
}

.mp-flight-price{
  font-size: 30px;
  font-weight: 1000;
  color: #111;
}

.mp-flight-pick{
  font-weight: 900;
  color: #111;
}

.mp-flight-select{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
}

.mp-flight-select .mp-dot{
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid #777;
  background: #fff;
}

.mp-flight-card:has(input:checked){
  border-color: var(--mp-primary);
  box-shadow: 0 12px 28px rgba(0,0,0,.10);
}
.mp-flight-card:has(input:checked) .mp-flight-card__right{
  background: #d6d6d6;
}
.mp-flight-card:has(input:checked) .mp-flight-select .mp-dot{
  border-color: var(--mp-primary);
  box-shadow: inset 0 0 0 5px var(--mp-primary);
}

.mp-vuelos-continue{
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
.mp-vuelos-continue .mp-btn{
  min-width: 180px;
  border-radius: 10px;
}

.mp-flight-card.mp-ida .mp-flight-card__left:after{ content:"VUELO IDA"; }
.mp-flight-card.mp-regreso .mp-flight-card__left:after{ content:"VUELO REGRESO"; }

/* ===============================
   VUELOS - filtros + popover conexiones
   =============================== */

.mp-step-vuelo .mp-vuelos-layout{
  display:grid;
  grid-template-columns: 340px 1fr;
  gap:18px;
  align-items:start;
}
@media (max-width: 980px){
  .mp-step-vuelo .mp-vuelos-layout{ grid-template-columns:1fr; }
}

.mp-step-vuelo .mp-filter{
  border:1px solid #eee;
  border-radius:16px;
  background:#fff;
  box-shadow: 0 10px 25px rgba(0,0,0,.05);
  padding:16px;
}
.mp-step-vuelo .mp-filter h3{
  margin:0 0 12px 0;
  font-size:28px;
  font-weight:900;
}
.mp-step-vuelo .mp-filter .mp-field{
  background:#fff;
  border:1px solid #eee;
}
.mp-step-vuelo .mp-filter .mp-btn--outline{
  border-color: var(--mp-primary);
  color: var(--mp-primary);
}
.mp-step-vuelo .mp-filter .mp-filter__row{ margin-top:14px; }
.mp-step-vuelo .mp-filter__checks{
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  margin-top:8px;
}

.mp-step-vuelo .mp-sortbar{
  display:flex;
  justify-content:center;
  margin: 10px 0 18px 0;
}
.mp-step-vuelo .mp-sortbar select{
  border:1px solid #eee;
  border-radius:14px;
  padding:12px 14px;
  min-width: 360px;
  background:#fff;
}

.mp-step-vuelo [data-mp-conn-trigger]{
  cursor: help;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Popover */
#mpConnPopover{
  position:absolute;
  z-index:9999;
  width: 340px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow: 0 22px 60px rgba(0,0,0,.18);
  padding:14px;
  display:none;
}
#mpConnPopover .mp-conn__title{
  font-size:22px;
  font-weight:900;
  margin:0 0 10px 0;
}
#mpConnPopover .mp-conn__list{
  display:flex;
  flex-direction:column;
  gap:14px;
  position:relative;
}
#mpConnPopover .mp-conn__row{
  display:grid;
  grid-template-columns: 12px 1fr;
  gap:10px;
  align-items:start;
}
#mpConnPopover .mp-conn__dot{
  width:10px;height:10px;border-radius:999px;
  background:#0ea5a4;
  margin-top:6px;
}
#mpConnPopover .mp-conn__rowtext .mp-conn__line{
  font-size:16px;
}
#mpConnPopover .mp-conn__sub{
  font-size:14px;
  color:#6b7280;
  margin:2px 0;
}

/* Tooltip conexiones */
.mp-conn-pop{
  position: fixed;
  z-index: 99999;
  width: 320px;
  max-width: calc(100vw - 24px);
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
  padding: 12px 12px;
  font-size: 13px;
  color: #111;
}

.mp-conn-title{
  font-weight: 900;
  font-size: 14px;
  margin-bottom: 10px;
}

.mp-conn-list{ display: flex; flex-direction: column; gap: 10px; }

.mp-conn-item{
  display: grid;
  grid-template-columns: 14px 1fr;
  gap: 10px;
  align-items: start;
}

.mp-conn-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #10b981;
  margin-top: 6px;
}

.mp-conn-line{ font-size: 13px; }
.mp-conn-sub{ font-size: 12px; color: #6b7280; margin: 3px 0; }

.mp-flight-conx{ cursor: help; }

/* =========================================================
   ✅ FIX EXTRA: Blindaje del formulario de Datos
   (por si alguien vuelve a tocar el buscador después)
   ========================================================= */
.mp-step-datos .mp-field{
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}
.mp-step-datos .mp-field input,
.mp-step-datos .mp-field select,
.mp-step-datos .mp-field textarea{
  width: 100% !important;
  box-sizing: border-box !important;
  background: #fff !important;
  color: #111 !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 12px !important;
  padding: 12px 12px !important;
  outline: none !important;
}
.mp-step-datos select{
  appearance: auto !important;
  -webkit-appearance: auto !important;
}

/* =========================================================
   ✅ NUEVO (NO BORRA NADA): SERVICIOS DEL VUELO + MODAL + TOOLTIP ESCALAS
   - Arregla: cards 2 por fila, no se montan
   - Iconos distintos por servicio
   - Modal: selector cantidad visible (no “cuadro blanco”)
   - Tooltip escalas: #mpStopsTip con estilo tipo captura
   ========================================================= */

/* ===== Paso 4: Servicios del vuelo ===== */
.mp-step-servicios .mp-servicios-grid{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-top: 18px;
}
@media (max-width: 760px){
  .mp-step-servicios .mp-servicios-grid{
    grid-template-columns: 1fr;
  }
}

.mp-serv-card{
  display: grid;
  grid-template-columns: 92px 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 18px 18px;
  border: 1px solid var(--mp-border);
  border-radius: 18px;
  background: #fff;
  box-shadow: var(--mp-shadow-md);
  min-width: 0;
}

.mp-serv-ico{
  width: 72px;
  height: 72px;
  border-radius: 18px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.mp-serv-ico::before{
  content:"";
  width: 34px;
  height: 34px;
  background-color: var(--mp-primary);
  -webkit-mask: var(--mp-ico) center / contain no-repeat;
  mask: var(--mp-ico) center / contain no-repeat;
  display:block;
}

/* Iconos (mask SVG). Cada servicio distinto */
.mp-serv-card[data-key="equipaje"] .mp-serv-ico{
  --mp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 6a3 3 0 0 1 6 0v2h2a2 2 0 0 1 2 2v7a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3v-7a2 2 0 0 1 2-2h2V6zm2 2h2V6a1 1 0 0 0-2 0v2zM8 10v9a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-9H8z'/%3E%3C/svg%3E");
}
.mp-serv-card[data-key="equipaje_especial"] .mp-serv-ico{
  --mp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 6a3 3 0 0 1 6 0v2h2a2 2 0 0 1 2 2v7a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3v-7a2 2 0 0 1 2-2h2V6zm2 2h2V6a1 1 0 0 0-2 0v2zM7 12h10v7a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-7zm12-6 1.2 1.6 2 .3-1.5 1.2.5 2-1.7-1-1.7 1 .5-2-1.5-1.2 2-.3L19 6z'/%3E%3C/svg%3E");
}
.mp-serv-card[data-key="mascota_cabina"] .mp-serv-ico{
  --mp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M7.5 11.5a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm9 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zM6 15a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm12 0a2 2 0 1 1 0-4 2 2 0 0 1 0 4zm-6 7c-4 0-7-2.6-7-5.7 0-1.7 1.3-3.1 3-3.1 1.2 0 2.3.6 3 1.5.7-.9 1.8-1.5 3-1.5 1.7 0 3 1.4 3 3.1C19 19.4 16 22 12 22z'/%3E%3C/svg%3E");
}
.mp-serv-card[data-key="mascota_bodega"] .mp-serv-ico{
  --mp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 7a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v13H4V7zm2 0v2h12V7H6zm0 4v7h12v-7H6zM10 3h4v2h-4V3z'/%3E%3C/svg%3E");
}
.mp-serv-card[data-key="asistencia"] .mp-serv-ico{
  --mp-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 3a2 2 0 1 1 0 4 2 2 0 0 1 0-4zM8 21v-7a3 3 0 0 1 3-3h1v10H8zm7-10h-2V9h2a2 2 0 0 1 2 2v10h-2v-6h-1v-2h1v-2z'/%3E%3C/svg%3E");
}

.mp-serv-info{ min-width: 0; }
.mp-serv-title{
  font-weight: 1000;
  font-size: 20px;
  line-height: 1.1;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.mp-serv-from{
  margin-top: 4px;
  font-size: 13px;
  color: var(--mp-muted);
  font-weight: 800;
}
.mp-serv-price{
  margin-top: 2px;
  font-size: 22px;
  font-weight: 1000;
  color: #111;
}

.mp-serv-badge{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--mp-primary);
  color: #fff;
  font-weight: 1000;
  font-size: 12px;
}

.mp-serv-actions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.mp-serv-add{
  background: #fff;
  color: #111;
  border: 2px solid #111;
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 1000;
  letter-spacing: .3px;
  cursor: pointer;
  white-space: nowrap;
}
.mp-serv-add:hover{ filter: brightness(.98); }

/* Botón continuar abajo full */
.mp-step-servicios .mp-actions-right{
  margin-top: 18px;
}
.mp-step-servicios .mp-actions-right .mp-btn{
  width: 100%;
  border-radius: 16px;
  padding: 16px 18px;
  font-size: 16px;
}

/* ===== Modal servicios ===== */
.mp-modal{
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: none; /* se muestra por JS */
}
.mp-modal__overlay{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
}
.mp-modal__box{
  position: relative;
  max-width: 1100px;
  width: calc(100vw - 40px);
  margin: 40px auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,.35);
  overflow: hidden;
}

.mp-modal__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid #eee;
}
.mp-modal__head h3{
  margin: 0;
  font-size: 24px;
  font-weight: 1000;
}
.mp-modal__close{
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
}

.mp-modal__body{
  padding: 18px 20px 20px;
}
.mp-modal__cols{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 820px){
  .mp-modal__cols{ grid-template-columns: 1fr; }
}

.mp-modal__col{
  border: 1px solid #eee;
  border-radius: 14px;
  padding: 14px;
  background: #fff;
}
.mp-modal__coltitle{
  font-weight: 1000;
  font-size: 16px;
  margin-bottom: 10px;
}

.mp-modal__picker{
  margin-top: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

/* ✅ FIX: botones + valor visibles (ya no “cuadro blanco”) */
.mp-qty-btn,
.mp-qty-btn2{
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid #d6d6d6;
  background: #fff;
  cursor: pointer;
  font-size: 22px;
  font-weight: 1000;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.mp-qty-btn:hover,
.mp-qty-btn2:hover{ filter: brightness(.98); }

.mp-qty-val{
  min-width: 52px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid #d6d6d6;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 1000;
  font-size: 16px;
  color: #111;
}

.mp-modal__foot{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 16px 20px;
  border-top: 1px solid #eee;
  background: #fff;
}
@media (max-width: 820px){
  .mp-modal__foot{
    grid-template-columns: 1fr;
    justify-items: stretch;
  }
  .mp-modal__foot .mp-btn{ width: 100%; }
}

.mp-modal__total{
  text-align: right;
}
@media (max-width: 820px){
  .mp-modal__total{ text-align: left; }
}
.mp-modal__totalval{
  font-size: 26px;
  font-weight: 1000;
  color: #111;
}

/* ===== Tooltip escalas (vuelo.php: #mpStopsTip) ===== */
#mpStopsTip{
  position: fixed;
  z-index: 999999;
  width: 420px;
  max-width: calc(100vw - 24px);
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 14px;
  box-shadow: 0 22px 60px rgba(0,0,0,.18);
  padding: 14px 14px;
  display: none;
}

#mpStopsTip .mp-tip-title{
  font-weight: 1000;
  font-size: 16px;
  margin-bottom: 10px;
}

#mpStopsTip .mp-tip-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#mpStopsTip .mp-tip-leg{
  display: grid;
  grid-template-columns: 12px 1fr;
  gap: 10px;
  align-items: start;
  position: relative;
}

#mpStopsTip .mp-tip-dot{
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #10b981;
  margin-top: 7px;
}

#mpStopsTip .mp-tip-time{
  font-size: 14px;
  font-weight: 900;
  color: #111;
}

#mpStopsTip .mp-tip-air{
  grid-column: 2;
  font-size: 13px;
  color: #6b7280;
  margin-top: 2px;
}

#mpStopsTip .mp-tip-sub{
  grid-column: 2;
  font-size: 13px;
  color: #6b7280;
  margin-top: 2px;
}
/* =========================================================
   ✅ OVERRIDE Tooltip Escalas (vuelo) — arreglo layout roto
   ========================================================= */
#mpStopsTip{
  max-height: 70vh;
  overflow: auto;
}

#mpStopsTip .mp-tip-list{
  display: flex;
  flex-direction: column;
  gap: 12px;
}

#mpStopsTip .mp-tip-leg{
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

#mpStopsTip .mp-tip-dot{
  flex: 0 0 auto;
  margin-top: 7px;
}

#mpStopsTip .mp-tip-content{
  flex: 1;
  min-width: 0;
}

#mpStopsTip .mp-tip-time{
  font-size: 14px;
  line-height: 1.25;
  word-break: normal;
  overflow-wrap: normal;
}

#mpStopsTip .mp-tip-time strong{
  white-space: nowrap; /* evita que 2025-12-31 16:25:00 se parta */
}

#mpStopsTip .mp-tip-air,
#mpStopsTip .mp-tip-sub{
  font-size: 13px;
  margin-top: 2px;
  color: #6b7280;
}

#mpStopsTip .mp-tip-leg.is-lay .mp-tip-dot{
  background: #f59e0b; /* layover distinto */
}
/* =========================================================
   STEP 5: DATOS (Passenger data) — estilo tipo referencia
   ========================================================= */

.mp-step-datos .mp-datos-layout{
  display:grid;
  grid-template-columns: 1.6fr .9fr;
  gap: 18px;
  align-items: start;
}
@media (max-width: 980px){
  .mp-step-datos .mp-datos-layout{ grid-template-columns: 1fr; }
}

.mp-step-datos .mp-datos-right{
  position: sticky;
  top: 22px;
}
@media (max-width: 980px){
  .mp-step-datos .mp-datos-right{ position: static; }
}

/* Email box (verde) */
.mp-step-datos .mp-datos-emailbox{
  border: 1px solid #d1fae5;
  background: #ecfdf5;
  border-radius: 14px;
  padding: 16px;
  box-shadow: var(--mp-shadow-sm);
  margin-bottom: 16px;
}
.mp-step-datos .mp-datos-emailbox__title{
  font-weight: 1000;
  font-size: 20px;
  margin-bottom: 8px;
}
.mp-step-datos .mp-datos-emailbox__row{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
}
.mp-step-datos .mp-datos-emailbox__label{
  font-weight: 900;
  min-width: 140px;
}
.mp-step-datos .mp-datos-emailbox__inputwrap{
  display:flex;
  align-items:center;
  gap:10px;
  flex: 1;
  min-width: 260px;
}
.mp-step-datos .mp-datos-check{
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #10b981;
  color: #fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight: 1000;
}

/* Title */
.mp-step-datos .mp-datos-title{
  margin: 10px 0 12px;
  font-size: 44px;
  line-height: 1.05;
  font-weight: 1000;
  color: var(--mp-primary);
}

/* Room bar */
.mp-step-datos .mp-datos-roombar{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--mp-border);
  border-radius: 12px;
  background:#fff;
  box-shadow: var(--mp-shadow-sm);
  margin-bottom: 12px;
}
.mp-step-datos .mp-datos-roomchip{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  background:#f3f4f6;
  border: 1px solid #e6e7ea;
  border-radius: 10px;
  padding: 6px 10px;
  font-weight: 900;
  font-size: 13px;
}

/* Cards */
.mp-step-datos .mp-datos-card{
  border: 1px solid var(--mp-border);
  border-radius: 14px;
  background:#fff;
  box-shadow: var(--mp-shadow-md);
  padding: 14px;
  margin-bottom: 14px;
}
.mp-step-datos .mp-datos-card__head{
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
  margin-bottom: 10px;
}
.mp-step-datos .mp-datos-card__title{
  font-weight: 1000;
  font-size: 16px;
}
.mp-step-datos .mp-datos-holder{
  display:flex;
  align-items:center;
  gap: 8px;
  color: var(--mp-muted);
  font-weight: 800;
}

/* Grid 3 columnas de campos */
.mp-step-datos .mp-datos-grid3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
@media (max-width: 980px){
  .mp-step-datos .mp-datos-grid3{ grid-template-columns: 1fr; }
}
.mp-step-datos .mp-datos-field--full{ grid-column: 1 / -1; }

/* Inputs */
.mp-step-datos .mp-datos-input,
.mp-step-datos .mp-datos-select,
.mp-step-datos .mp-datos-textarea{
  width:100%;
  box-sizing:border-box;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px 12px;
  background:#fff;
  font-size: 14px;
  outline:none;
}
.mp-step-datos .mp-datos-textarea{ min-height: 46px; }

/* Subtitle + actions */
.mp-step-datos .mp-datos-subtitle{
  font-weight: 1000;
  margin: 18px 0 10px;
}
.mp-step-datos .mp-datos-actions{
  display:flex;
  justify-content: flex-end;
  margin-top: 12px;
}
.mp-step-datos .mp-datos-continue{
  min-width: 220px;
  border-radius: 12px;
  padding: 14px 16px;
}
@media (max-width: 980px){
  .mp-step-datos .mp-datos-actions{ justify-content: stretch; }
  .mp-step-datos .mp-datos-continue{ width:100%; }
}

/* Sidebar cards */
.mp-step-datos .mp-datos-sidecard{
  border: 1px solid var(--mp-border);
  border-radius: 14px;
  background:#fff;
  box-shadow: var(--mp-shadow-md);
  padding: 14px;
  margin-bottom: 14px;
}
.mp-step-datos .mp-datos-hotelname{
  font-weight: 1000;
  font-size: 26px;
  line-height: 1.05;
  margin-bottom: 6px;
}
.mp-step-datos .mp-datos-hotelimg{
  margin-top: 10px;
  border-radius: 14px;
  overflow:hidden;
  border: 1px solid var(--mp-border);
  background: #f7f7f7;
}
.mp-step-datos .mp-datos-hotelimg img{
  width:100%;
  height:auto;
  display:block;
}
.mp-step-datos .mp-datos-hotelimg--ph{
  padding: 80px 14px;
  text-align:center;
  font-weight: 900;
  color: #6b7280;
}

.mp-step-datos .mp-datos-sidehead{
  font-weight: 1000;
  margin-bottom: 10px;
}

/* Tabla simple */
.mp-step-datos .mp-datos-table{
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow:hidden;
}
.mp-step-datos .mp-datos-table__head,
.mp-step-datos .mp-datos-table__row{
  display:grid;
  grid-template-columns: 1fr 1fr;
}
.mp-step-datos .mp-datos-table__head{
  background:#f3f4f6;
  font-weight: 1000;
}
.mp-step-datos .mp-datos-table__head > div,
.mp-step-datos .mp-datos-table__row > div{
  padding: 12px;
  border-right: 1px solid #e5e7eb;
}
.mp-step-datos .mp-datos-table__head > div:last-child,
.mp-step-datos .mp-datos-table__row > div:last-child{
  border-right: 0;
}

/* Servicios: tabla IDA/REGRESO */
.mp-step-datos .mp-datos-servtable{
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow:hidden;
}
.mp-step-datos .mp-datos-servtable__head,
.mp-step-datos .mp-datos-servtable__row{
  display:grid;
  grid-template-columns: 1fr 1fr;
}
.mp-step-datos .mp-datos-servtable__head{
  background:#f3f4f6;
  font-weight: 1000;
}
.mp-step-datos .mp-datos-servtable__head > div,
.mp-step-datos .mp-datos-servtable__row > div{
  padding: 12px;
  border-right: 1px solid #e5e7eb;
}
.mp-step-datos .mp-datos-servtable__head > div:last-child,
.mp-step-datos .mp-datos-servtable__row > div:last-child{
  border-right: 0;
}

/* Total */
.mp-step-datos .mp-datos-totalcard{
  border: 1px solid var(--mp-border);
  border-radius: 14px;
  background: #eaeaea;
  box-shadow: var(--mp-shadow-md);
  padding: 16px;
  text-align: right;
}
.mp-step-datos .mp-datos-totalcard__label{
  font-size: 12px;
  color: var(--mp-muted);
}
.mp-step-datos .mp-datos-totalcard__val{
  font-size: 32px;
  font-weight: 1000;
  color:#111;
}
.hotels-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  align-items: stretch;
}

.hotel-card{
  min-width: 0;
  width: 100%;
}

.hotel-card img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}
html { outline: 8px solid red !important; }