/* Toast cute: fondo opaco, mejor contraste y sombra */
.toast.cute{
  --bs-toast-bg: #ffffff;                 /* fondo opaco */
  --bs-toast-color: #0f172a;              /* texto principal */
  --bs-toast-border-color: rgba(0,0,0,.06);
  --bs-toast-header-bg: transparent;      /* header transparente */
  --bs-toast-header-color: #0f172a;
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(2,6,23,.12);
  overflow: hidden;
  backdrop-filter: none;                   /* sin blur */
}
.toast.cute .bar{width:100%; height:3px; opacity:.9;}

/* Icono circular por variante, con colores sólidos */
.toast-icon{width:28px; height:28px; border-radius:50%; display:inline-grid; place-items:center;}
.toast-icon.bg-success{background:#e8f7ef; color:#148a3a;}
.toast-icon.bg-danger {background:#fde8e8; color:#b42318;}
.toast-icon.bg-warning{background:#fff4e5; color:#b35c00;}
.toast-icon.bg-info   {background:#e8f3fd; color:#0b6bd6;}


/* ——— Unique Travel Card ——— */
.x-card{position:relative; border:0; border-radius:18px; overflow:hidden; background:#fff;}
.x-card::before{
  content:""; position:absolute; inset:-1px; border-radius:20px;
  background:linear-gradient(135deg,rgba(0,102,255,.18),rgba(0,200,180,.18));
  z-index:0;
}
.x-inner{position:relative; z-index:1; background:#fff; border-radius:17px; overflow:hidden;}

/* ✅ Siempre en fila (también en móvil) */
.x-row{
  display:flex;                 /* <— clave para móvil */
  min-height:120px;             /* alto mínimo en móvil */
}

/* Mini thumb a la izquierda en móvil; crece por breakpoint */
.x-media-wrap{
  position:relative;
  flex:0 0 120px;               /* ancho del panel de imagen en móvil */
}
.x-media{
  width:100%;
  height:100%;
  object-fit:cover;
}

/* Suavizar overlay y badge */
.x-media-wrap::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.0) 60%, rgba(0,0,0,.08));
}
/* Chip país: aire seguro a la derecha + permite 2 líneas */
.x-badge-country{
  position:absolute;
  left:8px;                  /* margen al borde izquierdo */
  top:8px;
  display:inline-flex;
  align-items:flex-start;    /* la bandera se alinea con la 1ra línea de texto */
  gap:.0rem;

  /* 👉 clave: nunca ocupar más que el ancho de la imagen menos los gutters */
  max-width: calc(100% - 16px);   /* 8px izq + 8px “aire” a la derecha */
  padding:.18rem .18rem .18rem .18rem; /* un poco más de aire interno a la derecha */

  /* permitir multilínea sin desbordar */
  white-space: normal;
  line-height: 1.1;
  word-break: break-word;
  hyphens: auto;

  border-radius:999px;
  -webkit-backdrop-filter:blur(6px); /* compat Safari */
  backdrop-filter:blur(6px);
  background:rgba(255,255,255,.75);
  border:1px solid rgba(255,255,255,.8);
  font-size:.65rem; color:#0f172a;
}

/* ❗ La bandera NO se puede encoger */
.x-badge-country .flag-18,
.x-badge-country .fi{               /* soporta lipis/flag-icons (.fi fi-mx) o <img class="flag-18"> */
  width:18px; height:12px;
  min-width:18px; min-height:12px;
  flex:0 0 18px;                    /* bloquea el flex-shrink */
  object-fit:cover;
  border-radius:2px;
  border:1px solid #e5e7eb;
  display:block;
}


/* Un poco más de aire en pantallas > sm si lo deseas */
@media (min-width:576px){
  .x-badge-country{ max-width: calc(100% - 20px); }
}


/* Texto a la derecha */
.x-body{
  padding:.75rem .9rem 1rem;    /* un poco más compacto en móvil */
  flex:1 1 auto;
}
.x-title{margin:0; font-size:1.05rem; display:flex; align-items:center; gap:.4rem;}
.x-meta{color:#64748b; font-size:.9rem; display:flex; align-items:center; gap:.6rem; margin-top:.25rem;}
.x-price{display:flex; align-items:end; gap:.35rem; margin-top:.6rem;}
.x-price .from{font-size:.8rem; color:#64748b;}
.x-price .amount{font-weight:800; font-size:1.05rem; letter-spacing:.2px;}
.x-cta{margin-top:.8rem; display:flex; gap:.6rem; flex-wrap:wrap;}
.x-btn{border-radius:12px; padding:.55rem .9rem; display:inline-flex; align-items:center; gap:.45rem;}
.x-save{border:1px dashed #c7d2fe; color:#334155; background:#f8fafc;}

/* Hover / motion */
.x-card{transition:transform .18s ease, box-shadow .18s ease;}
.x-card:hover{transform:translateY(-2px); box-shadow:0 14px 30px rgba(16,24,40,.10);}

/* 🔁 Breakpoints: ampliar el panel de imagen y el alto */
@media (min-width:576px){
  .x-row{min-height:150px;}
  .x-media-wrap{flex-basis:160px;}
}
@media (min-width:768px){
  .x-row{min-height:200px;}
  .x-media-wrap{flex-basis:260px;}         /* tu tamaño de desktop original */
  .x-body{padding:1.1rem 1.25rem;}
}


/* === Section title (responsive, jerarquía correcta) === */
.section-title{
  font-weight: 800;
  letter-spacing: -.02em;
  /* h2 en desktop, h4 en móvil */
  font-size: clamp(1.25rem, 1rem + 2.2vw, 2rem);
  margin-bottom: .5rem;
}
.section-sub{
  color:#64748b;
  font-size: clamp(.85rem, .8rem + .4vw, 1rem);
  margin-bottom: .75rem;
}

/* === Select “neo” centrado & moderno === */
.select-neo{ position: relative; max-width: 440px; margin-left:auto; }
.select-neo .pill{
  position: relative;
  border-radius: 999px;
  overflow: hidden;
  padding: 0;
  isolation: isolate;
}
.select-neo .pill::before{
  content:""; position:absolute; inset:0;
  background: radial-gradient(90% 120% at 10% 10%, rgba(13,110,253,.12), transparent 50%),
              radial-gradient(60% 100% at 90% 20%, rgba(16,185,129,.12), transparent 60%);
  z-index:0;
}
.select-neo .leading, .select-neo .caret{
  position:absolute; top:50%; transform:translateY(-50%); z-index:2; pointer-events:none;
  color:#0d6efd;
}
.select-neo .leading{ left:14px; font-size:1.1rem;}
.select-neo .caret{ right:14px; font-size:1rem; color:#94a3b8;}

.select-neo select{
  position: relative; z-index:1;
  width:100%;
  height:3.1rem;
  border-radius:999px;
  border:0;                           /* 0px solid es redundante */
  background: transparent;            /* ✅ corrige el error */
  -webkit-backdrop-filter: blur(6px); /* compat Safari */
  backdrop-filter: blur(6px);

  padding: .75rem 2.5rem;             /* espacio para iconos */
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  font-weight: 600;
  /* ⬇️ centra el texto mostrado en el control */
  text-align:center; 
  text-align-last:center;
}
.select-neo select:focus{
  border-color:#6ea8fe;
  box-shadow: 0 0 0 .25rem rgba(13,110,253,.14), 0 10px 28px rgba(2,6,23,.10);
  outline:0;
}
@supports selector(:has(*)){
  /* centra el texto también si hay iconos decorativos */
  .select-neo .pill:has(select){ display:block; }
}
@media (max-width: 575.98px){
  .select-neo select{ height:2.8rem; }
  .select-neo .leading{ left:12px; }
  .select-neo .caret{ right:12px; }
}

.ac-header{background:#fff; box-shadow:0 0 0 1px rgba(0,0,0,.04);border-bottom:0!important;}
.ac-header.is-scrolled{box-shadow:0 6px 18px rgba(2,6,23,.08);}
.ac-topbar{padding:.55rem 0;}

.ac-appnav{border-top:1px solid #eef2f7; border-bottom:0!important;}

.ac-tabs{
  display:grid; grid-template-columns:repeat(5,1fr);
  gap:.25rem; padding:.35rem 0; margin:0; list-style:none;
}

.ac-tab{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:.4rem .25rem .65rem; /* aire para subrayado */
  user-select:none; cursor:pointer;
  color:#475569; text-decoration:none;
  transition:color .15s ease, background .15s ease;
  border-radius:12px;
}
.ac-tab i{font-size:1.25rem; line-height:1;}
.ac-tab span{display:block; margin-top:.25rem; font-size:.8rem; line-height:1.05; text-wrap:balance;}
.ac-tab:hover{background:#f8fafc; color:#0b6bd6;}

/* Underline corta */
.ac-underline{
  position:absolute; left:50%; bottom:0; width:38px; height:3px;
  transform:translateX(-50%); border-radius:2px; opacity:0; background:#0b6bd6;
  transition:opacity .15s ease;
}
.ac-tab.is-active{color:#0b6bd6; background:transparent;}
.ac-tab.is-active .ac-underline{opacity:1;}

/* ---------- CHIP "Soon" ENCIMA DEL ÍCONO ---------- */
.ac-chip{
  display:none;                 /* visible solo en tabs marcadas */
  position:absolute;
  left:50%;
  top:.2rem;                    /* sobre el ícono */
  transform:translateX(-50%);
  padding:.06rem .34rem;
  font-size:.55rem;
  line-height:1;
  font-weight:800;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:#fff;                   /* texto blanco */
  background:#0b6bd6;          /* azul fuerte del tema */
  border-radius:999px;          /* pill */
  box-shadow:0 2px 6px rgba(11,107,214,.25);
  pointer-events:none;
}

/* Mostrar chip solo si es "soon" y dar un pelín más de aire arriba */
.ac-tab[data-soon="1"] .ac-chip{ display:inline-flex; }
.ac-tab[data-soon="1"]{ opacity:.85; filter:saturate(.95); padding-top:1.25rem; }
.ac-tab[data-soon="1"]:hover{ background:transparent; color:#475569; cursor:not-allowed; }
.ac-tab[data-soon="1"] .ac-underline{ opacity:0!important; }

@media (max-width:380px){
  .ac-tab i{font-size:1.1rem;}
  .ac-tab span{font-size:.75rem;}
  .ac-underline{width:32px;}
  .ac-chip{ font-size:.5rem; padding:.05rem .28rem; top:.15rem; }
}









.airport-input { padding-right: 2.25rem; } /* espacio para el loader/clear */
.clear-btn { line-height: 1; }

/* —— Account dropdown (inspirado en Priceline) —— */
.account-menu.dropdown .dropdown-menu{
  width: 330px; max-width: 90vw;
  border: 0; border-radius: 18px;
  box-shadow: 0 10px 30px rgba(16,24,40,.15);
  padding: 14px; background: #fff;
}
.account-card{ border-radius: 16px; background: #f8fafc; padding: 14px; }
.account-row{ display:flex; gap:12px; align-items:center; }
.account-avatar{
  width:48px; height:48px; border-radius: 50%;
  background: linear-gradient(135deg,#e3eefc,#f4f9ff);
  display:flex; align-items:center; justify-content:center;
  font-size:22px; color:#0d6efd; box-shadow: inset 0 0 0 1px rgba(13,110,253,.15);
}
.account-name{ font-weight:700; color:#0f172a; line-height:1.1; }
.account-email{ font-size:.85rem; color:#64748b; }
.role-badge{
  display:inline-flex; align-items:center; gap:.35rem;
  background:#eff6ff; color:#1d4ed8; border-radius:999px;
  padding:.25rem .6rem; font-size:.75rem; font-weight:600;
}
.dropdown-title{ font-size:.8rem; color:#94a3b8; text-transform:uppercase; letter-spacing:.06em; margin:10px 12px 6px; }
.menu-item{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius:12px;
  color:#0f172a; text-decoration:none;
  transition: background .18s ease, transform .08s ease;
}
.menu-item:hover{ background:#f1f5f9; }
.menu-item i{ font-size:1.1rem; color:#0d6efd; }
.menu-danger{ color:#b91c1c !important; }
.menu-danger i{ color:#ef4444; }
.account-footer{ padding:10px 2px 2px; display:flex; gap:10px; }
.account-footer .btn{ flex:1; border-radius:12px; }

@media (prefers-color-scheme: dark) {
  .account-menu .dropdown-menu{ background:#0b1220; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
  .account-card{ background:#05203c; }
  .account-name{ color:#e5e7eb; }
  .account-email{ color:#94a3b8; }
  .dropdown-title{ color:#94a3b8; }
  .menu-item{ color:#e5e7eb; }             /* mejor contraste en dark */
  .menu-item:hover{ background:#1f2937; }  /* hover más sutil en dark */
  .role-badge{ background:#0b1b38; color:#93c5fd; }
}

.skeleton{position:relative; overflow:hidden; background:#eef2f7;}
.skeleton::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent); animation:sh 1.2s infinite; transform:translateX(-100%);}
@keyframes sh{to{transform:translateX(100%);}}

/* Stepper */
.step-badge{display:flex;align-items:center;gap:.5rem;color:#64748b;}
.step-badge span{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;background:#e9ecef;color:#34495e;font-weight:700;}
.step-badge.active{color:#0d6efd;}
.step-badge.active span{background:#0d6efd;color:#fff;}