/* ============================================================
   FUENTE INTER — @font-face (faltaba; el token --font-primary la pedía
   pero no se cargaba en ningún sitio). Archivos servidos por el módulo
   en /o/com.balearia.fase2.searcher.redesign/fonts/
   ============================================================ */
@font-face {
  font-family: 'Inter';
  src: url('/o/com.balearia.fase2.searcher.redesign/fonts/Inter-Regular.woff2') format('woff2'),
       url('/o/com.balearia.fase2.searcher.redesign/fonts/Inter-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/o/com.balearia.fase2.searcher.redesign/fonts/Inter-Medium.woff2') format('woff2'),
       url('/o/com.balearia.fase2.searcher.redesign/fonts/Inter-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/o/com.balearia.fase2.searcher.redesign/fonts/Inter-SemiBold.woff2') format('woff2'),
       url('/o/com.balearia.fase2.searcher.redesign/fonts/Inter-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/o/com.balearia.fase2.searcher.redesign/fonts/Inter-Bold.woff2') format('woff2'),
       url('/o/com.balearia.fase2.searcher.redesign/fonts/Inter-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/o/com.balearia.fase2.searcher.redesign/fonts/Inter-Black.woff2') format('woff2'),
       url('/o/com.balearia.fase2.searcher.redesign/fonts/Inter-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   DESIGN TOKENS — variables.css exacto de PatternLab
   ============================================================ */
:root {
  --primary-150: #006876; --primary-100: #008193; --primary-20: #e2f1f3; --primary-10: #f3f9fa;
  --neutral-100: #333333; --neutral-90: #666666; --neutral-40: #bdbdbd; --neutral-30: #d6d6d6;
  --neutral-20: #eeeeee;  --neutral-10: #f8f8f8; --neutral-0: #ffffff;
  --white: #ffffff;

  --text-neutral-default: var(--neutral-100);
  --text-neutral-medium: #999999;
  --text-neutral-dark: var(--neutral-90);
  --text-neutral-extra-weak: var(--neutral-0);
  --text-primary-default: var(--primary-100);
  --text-primary-dark: var(--primary-150);
  --icon-primary-default: var(--primary-100);
  --border-primary-default: var(--primary-100);
  --border-primary-dark: var(--primary-150);
  --border-primary-weak: var(--primary-10);
  --border-primary-selected-dark: var(--primary-20);
  --border-width-1: 1px; --border-width-2: 2px; --border-width-3: 3px;
  --background-primary-default: var(--primary-100);
  --background-primary-dark: var(--primary-150);
  --background-primary-weak: var(--primary-10);
  --background-primary-selected: var(--primary-10);
  --background-primary-selected-dark: var(--primary-20);
  --background-neutral-extra-weak: var(--neutral-0);
  --background-neutral-weak: var(--neutral-10);
  --background-neutral-disabled: var(--neutral-20);

  --font-primary: 'Inter', sans-serif;
  --text-xxs: 10px; --text-xs: 12px; --text-sm: 14px; --text-base: 16px;
  --text-lg: 18px; --text-xl: 1.25rem;
  --font-normal: 400; --font-semibold: 600; --font-bold: 700;
  --litepicker-month-width: 18rem;
  --litepicker-container-months-background-color: transparent;
  --litepicker-container-months-box-shadow: none;
  --litepicker-day-color: var(--neutral-100);
  --litepicker-day-color-hover: var(--primary-150);
  --litepicker-is-today-color: var(--primary-100);
  --litepicker-is-in-range-color: var(--primary-20);
  --litepicker-is-locked-color: var(--neutral-40);
  --litepicker-is-start-day-color: #ffffff;
  --litepicker-is-start-day-color-bg: var(--primary-100);
  --litepicker-is-end-day-color: #ffffff;
  --litepicker-is-end-day-color-bg: var(--primary-100);
  --litepicker-button-prev-month-color: var(--primary-100);
  --litepicker-button-prev-month-color-hover: var(--primary-150);
  --litepicker-button-next-month-color: var(--primary-100);
  --litepicker-button-next-month-color-hover: var(--primary-150);

  --spacing-0: 0;    --spacing-1: 0.125rem; --spacing-2: 0.25rem; --spacing-3: 0.5rem;
  --spacing-4: 0.75rem; --spacing-5: 1rem;  --spacing-6: 1.5rem;
  --spacing-7: 2rem;    --spacing-8: 2.5rem; --spacing-9: 3rem; --spacing-10: 3.5rem; --spacing-11: 4rem;
  --spacing-13: 5rem;
  /* Tokens que solo traia el tema (CE balearia-theme-css). En paginas sin el, como el
     funnel al editar la busqueda, la regla que los usaba se caia entera: sin
     --spacing-12 el input de origen perdia el hueco y el barco tapaba el placeholder. */
  --spacing-12: 4.5rem;
  --icon-neutral-dark: var(--neutral-90);
  --leading-tight: 1.286;
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
  --font-regular: 400;

  --radius-xs: 0.25rem; --radius-sm: 0.5rem; --radius-md: 1rem; --radius-full: 9999px;
  --transition-fast: 0.3s;
  --shadow-xs: 0px 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0px 4px 13px rgba(0,0,0,0.1);
  --accent-100: #ffa745;
  --background-accent-default: var(--accent-100);
  --border-neutral-default: var(--neutral-20);
  --border-neutral-weak: var(--neutral-10);
  --border-neutral-dark: var(--neutral-40);
  --border-neutral-disabled: var(--neutral-30);
  --background-neutral-disabled-weak: var(--neutral-15);
  --neutral-15: #f6f6f6;
  --text-neutral-disabled: var(--neutral-40);
  --link-neutral-weak: var(--white);
  --link-primary-default: var(--primary-100);
  --link-primary-active: var(--primary-150);
  --spacing-5-5: 1.25rem;
}

/* ============================================================
   Scope + reset
   ============================================================ */
.pl-test *, .pl-test *::before, .pl-test *::after { box-sizing: border-box; }
.pl-test {
  font-family: var(--font-primary) !important;
  font-size: var(--text-base);
  color: var(--text-neutral-default);
  line-height: 1.5;
  /* Full-bleed: rompe el portlet wrapper de Liferay y ocupa todo el viewport.
     100vw incluye la barra de scroll vertical: sin restarla la franja salía 15px más
     ancha que la pantalla y aparecía scroll horizontal (hueco a la derecha).
     --pl-scrollbar-w lo calcula searcher-new.js; en mobile vale 0. */
  width: calc(100vw - var(--pl-scrollbar-w, 0px));
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* ============================================================
   Utilities: hidden / lg-flex  (del sistema de PatternLab)
   ============================================================ */
.pl-test .hidden { display: none !important; }
@media (min-width: 1024px) {
  .pl-test .lg-flex { display: flex !important; }
}

/* ============================================================
   layout/container.css  — PatternLab .container
   max-width 1280px a ≥1280px  (vs Liferay .o-container 1400px)
   ============================================================ */
.pl-test .container {
  margin: 0 auto;
  padding-left: var(--spacing-5);
  padding-right: var(--spacing-5);
  width: 100%;
}
@media (min-width: 1280px) { .pl-test .container { max-width: 1280px; } }
@media (min-width: 1536px) { .pl-test .container { max-width: 1536px; } }

/* ============================================================
   molecules/input-search.css  (verbatim PatternLab)
   ============================================================ */
.pl-test .input-search {
  position: relative;
  width: 100%;
}
.pl-test .input-search__icon ~ .input-search__input {
  padding-left: var(--spacing-9);
}
/* Regla aparte: un navegador sin :has descarta la regla ENTERA si va en la misma lista. */
.pl-test .input-search:has(.input-search__icon) .input-search__input {
  padding-left: var(--spacing-9);
}
.pl-test .input-search__input {
  background-color: var(--background-primary-weak);
  border: var(--border-width-1) solid var(--border-primary-weak);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-family: var(--font-primary) !important;
  font-weight: var(--font-semibold);
  outline: none;
  height: var(--spacing-10);
  padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) var(--spacing-4);
  transition: all var(--transition-fast);
  width: 100%;
  color: var(--text-neutral-default);
}
.pl-test .input-search__input::placeholder {
  color: var(--text-neutral-dark);
  font-weight: var(--font-normal);
}
.pl-test .input-search__input:hover {
  background-color: var(--background-primary-selected-dark);
  border-color: var(--border-primary-selected-dark);
}
.pl-test .input-search__input:focus {
  background-color: var(--background-primary-selected);
  border-color: var(--border-primary-default);
  outline: var(--border-width-1) solid var(--border-primary-default);
}
.pl-test .input-search__input:not(:placeholder-shown),
.pl-test .input-search__input[value]:not([value=""]) {
  background-color: var(--background-primary-selected);
  border-color: var(--border-primary-selected, var(--primary-10));
}
.pl-test .input-search__icon {
  color: var(--icon-primary-default);
  left: var(--spacing-4);
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--spacing-6);
  z-index: 1;
}

/* ============================================================
   molecules/buttons.css — solo lo necesario para .btn--xl--primary
   ============================================================ */
.pl-test .btn, .pl-modal .btn {
  align-items: center;
  background-color: transparent;
  border-radius: var(--radius-sm);
  border-width: var(--border-width-2);
  border-style: solid;
  display: inline-flex;
  font-weight: var(--font-semibold);
  font-family: var(--font-primary) !important;
  justify-content: center;
  outline: none;
  transition: all var(--transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  text-decoration: none;
}
.pl-test .btn--xl, .pl-modal .btn--xl {
  gap: var(--spacing-3);
  height: var(--spacing-10);
  padding-left: var(--spacing-6);
  padding-right: var(--spacing-6);
  font-size: var(--text-base);
}
.pl-test .btn--lg, .pl-modal .btn--lg {
  gap: var(--spacing-3);
  height: var(--spacing-9);
  padding-left: var(--spacing-6);
  padding-right: var(--spacing-6);
  font-size: var(--text-base);
}
.pl-test .btn--primary, .pl-modal .btn--primary,
.searcher__dropdown--vehicles .btn--primary {
  background-color: var(--background-primary-default);
  border-color: var(--border-primary-default);
  color: var(--text-neutral-extra-weak);
}
.pl-test .btn--primary:hover, .pl-modal .btn--primary:hover,
.searcher__dropdown--vehicles .btn--primary:hover {
  background-color: var(--background-primary-dark);
  border-color: var(--border-primary-dark);
}
.pl-test .btn:disabled, .pl-modal .btn:disabled,
.pl-test .btn.is-disabled, .pl-modal .btn.is-disabled {
  background-color: var(--background-neutral-disabled-weak);
  border-color: var(--border-neutral-weak);
  color: var(--text-neutral-disabled);
  pointer-events: none;
}
.pl-test .btn--border, .pl-modal .btn--border {
  border-color: var(--border-primary-default);
  color: var(--text-primary-default);
}
.pl-test .btn--border:hover, .pl-modal .btn--border:hover {
  background-color: var(--background-primary-dark);
  border-color: var(--border-primary-dark);
  color: var(--text-neutral-extra-weak);
}
.pl-test .btn--ghost, .pl-modal .btn--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--text-primary-default);
}
.pl-test .btn--ghost:hover, .pl-modal .btn--ghost:hover {
  color: var(--text-primary-dark);
}

/* ============================================================
   organisms/search-bar.css  (verbatim PatternLab)
   ============================================================ */
.pl-test .search-bar {
  background-color: var(--background-primary-default);
  padding: var(--spacing-4) var(--spacing-0);
  position: relative;
}
.pl-test .search-bar__container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}
.pl-test .search-bar__wrapper {
  align-items: center;
  background-color: var(--background-neutral-extra-weak);
  border-radius: var(--radius-md) !important;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  padding: var(--spacing-3);
}
.pl-test .search-bar__form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  width: 100%;
}
/* Mobile: ocultar inputs completos, mostrar solo search-bar__mobile */
.pl-test .search-bar__mobile {
  align-items: center;
  display: flex;
  gap: var(--spacing-4);
  padding-left: var(--spacing-3);
  width: 100%;
}
.pl-test .search-bar__mobile input {
  color: var(--text-neutral-dark);
  font-weight: var(--font-semibold);
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  pointer-events: none;
}
.pl-test .search-bar__mobile input::placeholder {
  color: var(--text-neutral-dark);
}
.pl-test .search-bar__mobile button {
  background-color: var(--background-primary-default);
  border-radius: var(--radius-md);
  color: var(--text-neutral-extra-weak);
  flex-shrink: 1;
  padding: var(--spacing-5);
  border: none;
  cursor: pointer;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pl-test .search-bar__mobile button svg {
  width: var(--spacing-5-25, 1.3125rem);
}
.pl-test .search-bar__inputs {
  display: none;
  flex-direction: column;
  gap: var(--spacing-3);
  flex-grow: 1;
}
.pl-test .search-bar__inputs-row {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  flex-grow: 1;
}
.pl-test .search-bar__input-column {
  flex: 1;
  min-width: 0;
  display: none;
}
.pl-test .search-bar__input-column:has(.input-search) {
  display: block;
}

@media (min-width: 1024px) {
  .pl-test .search-bar {
    padding: var(--spacing-3) var(--spacing-0) var(--spacing-4);
  }
  .pl-test .search-bar__wrapper {
    padding: 0;
    background-color: transparent;
    gap: 0;
    align-items: stretch;
    width: 100%;
  }
  .pl-test .search-bar__form {
    background-color: var(--background-neutral-extra-weak) !important;
    border-radius: var(--radius-md) !important;
    flex-direction: row;
    padding: var(--spacing-3) !important;
    align-items: center;
  }
  .pl-test .search-bar__mobile { display: none; }
  .pl-test .search-bar__inputs { display: flex; }
  .pl-test .search-bar__inputs-row {
    flex-direction: row;
  }
  .pl-test .search-bar__input-column {
    display: block;
  }
}

/* compact search bar — clickable */
.pl-test .search-bar { cursor: pointer; }

/* ============================================================
   MODAL — pl-modal overlay & structure
   ============================================================ */
.pl-modal *, .pl-modal *::before, .pl-modal *::after { box-sizing: border-box; }
.pl-modal {
  font-family: var(--font-primary) !important;
  font-size: var(--text-base);
  color: var(--text-neutral-default);
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  /* Prevenir scroll horizontal que en iOS desplaza elementos fixed */
  overflow-x: hidden;
  /* Asegurar que ocupa el 100% del viewport en todos los casos */
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
}
.pl-modal.is-open { display: flex; }
.pl-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  cursor: pointer;
}
/* Botón cerrar desktop — absoluto, solo visible en desktop */
.pl-modal__close {
  position: absolute;
  top: var(--spacing-5);
  right: var(--spacing-5);
  background: none;
  border: none;
  color: white !important;
  cursor: pointer;
  width: 2rem;
  height: 2rem;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: 0;
  pointer-events: all;
}
.pl-modal__close svg { width: 1.5rem; height: 1.5rem; }
@media (min-width: 1024px) {
  .pl-modal__close { display: flex; }
}
/* Botón cerrar mobile — inline dentro de searcher__header */
.pl-modal__close-inline {
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  width: 2rem;
  height: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}
.pl-modal__close-inline svg { width: 1.5rem; height: 1.5rem; }
/* Con .pl-modal delante: el main.css del tema pone ".pl-modal button { color: inherit }",
   que gana a la clase sola y la X salía oscura. margin-left:auto la manda a la derecha
   también cuando no hay selector de moneda (Canarias), que era quien la empujaba. */
.pl-modal .pl-modal__close-inline {
  color: white;
  margin-left: auto;
}

/* container inside modal */
.pl-modal .container {
  margin: 0 auto;
  padding-left: var(--spacing-5);
  padding-right: var(--spacing-5);
  width: 100%;
}
@media (min-width: 1280px) { .pl-modal .container { max-width: 1280px; } }
@media (min-width: 1536px) { .pl-modal .container { max-width: 1536px; } }

/* dialog — contenedor scrollable encima del overlay */
.pl-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

/* searcher — solo altura natural (azul) */
.pl-modal .searcher {
  background-color: var(--background-primary-default);
  display: flex;
  flex-direction: column;
  width: 100%;
  flex-shrink: 0;
}

/* body — rellena el resto del alto, sin fondo propio: deja ver el de debajo */
.pl-modal__body {
  flex: 1;
  min-height: 8rem;
}
/* En movil el buscador ya ocupa toda la pantalla: esos 8rem vacios dejaban la
   modal desplazable arriba y abajo aunque todo cupiera. overscroll-behavior evita
   que el arrastre pase a la pagina de detras. */
@media (max-width: 1023px) {
  .pl-modal__body { min-height: 0; }
  .pl-modal__dialog { overscroll-behavior: contain; }
}

/* iOS hace zoom al enfocar un campo con letra de menos de 16px. Solo en iOS
   (-webkit-touch-callout) para no cambiar el tamano en el resto. */
@supports (-webkit-touch-callout: none) {
  :is([id^="searcher-"], .pl-test) :is(input:not([type="radio"]):not([type="checkbox"]), select, textarea) {
    font-size: 16px !important;
  }
}

.pl-modal .searcher__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-5);
}

/* routes-nav external (fuera del modal, dentro de .pl-test) */
.pl-test .routes-nav {
  background-color: var(--background-primary-default);
  border-top: var(--border-width-1, 1px) solid var(--border-primary-dark);
  overflow-x: auto;
  padding: var(--spacing-3) 0;
  scrollbar-width: none;
  width: 100%;
}
.pl-test .routes-nav::-webkit-scrollbar { display: none; }
.pl-test .routes-nav--no-border { border-top: none; }

.pl-test .tabs-nav {
  display: flex;
  align-items: center;
  gap: var(--spacing-4);
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: fit-content;
}

.pl-test .main-menu__tab {
  align-items: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  display: flex;
  font-family: var(--font-primary) !important;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  gap: var(--spacing-2);
  height: var(--spacing-7);
  padding: 0 var(--spacing-3);
  text-decoration: none;
  transition: none !important;
  white-space: nowrap;
}
.pl-test .main-menu__tab--dark { color: var(--text-neutral-extra-weak); }
.pl-test .main-menu__tab--dark:hover,
.pl-test .main-menu__tab--dark.is-active { background-color: var(--background-primary-dark); }

.pl-test .tag {
  align-items: center;
  border-radius: var(--radius-full);
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  height: var(--spacing-6);
  line-height: 1;
  padding: var(--spacing-1) var(--spacing-3);
}
.pl-test .tag--orange {
  background-color: var(--background-accent-default);
  color: var(--text-neutral-extra-weak);
}

/* routes-nav — Ferry/Hotel/etc tabs — hereda blue del .searcher padre */
/* flex-shrink: 0 porque la modal es una columna flex de alto fijo: en pantallas
   bajas (iPhone con las barras de Safari) la fila se encogia y la tarjeta tapaba
   las pestanas. */
.pl-modal .routes-nav {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  padding: var(--spacing-3) var(--spacing-5);
}
.pl-modal .routes-nav--no-border { border-top: none; }

/* tabs-nav */
.pl-modal .tabs-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  flex-wrap: wrap;
}
.pl-modal .tabs-nav--secondary { gap: var(--spacing-3); }

/* main-menu__tab */
.pl-modal .main-menu__tab {
  align-items: center;
  border-radius: var(--radius-sm);
  display: flex;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  font-family: var(--font-primary) !important;
  gap: var(--spacing-2);
  height: var(--spacing-7);
  padding: 0 var(--spacing-3);
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: none !important;
}
.pl-modal .main-menu__tab--dark { color: var(--text-neutral-extra-weak); }
.pl-modal .main-menu__tab--dark:hover,
.pl-modal .main-menu__tab--dark.is-active { background-color: var(--background-primary-dark); }
.pl-modal .main-menu__tab--light {
  background-color: var(--background-neutral-extra-weak);
  color: var(--text-primary-default);
}
.pl-modal .main-menu__tab--light:hover { background-color: var(--background-primary-selected-dark); }
.pl-modal .main-menu__tab--light.is-active {
  background-color: var(--background-primary-dark);
  color: white;
}
.pl-modal .main-menu__tab--sm { font-size: var(--text-xs); }

/* link */
.pl-modal .link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2);
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-primary) !important;
  text-decoration: none;
  line-height: 1.5;
}
.pl-modal .link--md { font-size: var(--text-sm); }
.pl-modal .link--white { color: var(--link-neutral-weak); }
.pl-modal .link--semibold { font-weight: var(--font-semibold); }

/* tag */
.pl-modal .tag {
  align-items: center;
  border-radius: var(--radius-full);
  display: inline-flex;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  height: var(--spacing-6);
  padding: var(--spacing-1) var(--spacing-3);
  line-height: 1;
}
.pl-modal .tag--orange {
  background-color: var(--background-accent-default);
  color: var(--text-neutral-extra-weak);
}

/* search-bar inside modal — altura natural, azul del .searcher rellena el espacio restante */
.pl-modal .search-bar {
  background-color: transparent;
  padding: var(--spacing-4) 0;
  cursor: default;
}
/* wrapper = contenedor blanco PatternLab; gap 0 para que tabs y form queden pegados */
.pl-modal .search-bar__wrapper {
  gap: 0;
}

/* ── MOVIL: tarjeta blanca del buscador ───────────────────────────────────
   Copiado literal de diseño/patternlab.css:9485. La regla existia en este
   fichero pero scopeada a .pl-test, que no esta en el modal, asi que en movil
   los campos flotaban sueltos sobre el fondo teal.

   Arregla DOS cosas de una: el contenedor, y el aspecto de los tabs de viaje.
   Los tabs son .main-menu__tab--light, con fondo blanco (patternlab.css:8488):
   sobre el teal se veian como pildoras blancas con borde, y sobre la tarjeta
   blanca desaparecen y quedan como texto teal, que es el diseño correcto.
   El activo mantiene su pildora teal oscuro. */
@media (max-width: 1023px) {
  .pl-modal .search-bar__wrapper {
    align-items: center;
    background-color: var(--background-neutral-extra-weak);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-3);
    padding: var(--spacing-3);
  }

  /* Los 4 tabs de viaje no caben en 390px y se partian en dos lineas.
     PatternLab los desplaza en horizontal (patternlab.css:9502). */
  .pl-modal .search-bar__tabs {
    overflow-x: auto;
    scrollbar-width: none;
    width: 100%;
  }
  .pl-modal .search-bar__tabs::-webkit-scrollbar {
    display: none;
  }
  /* Los tabs de viaje van en una fila con scroll, como patternlab
     (patternlab.css:9502). Se deja el wrap por defecto: con nowrap a 390px el
     ultimo tab queda cortado y es peor que partir la fila. */

  /* Centrado de "Ida y vuelta / Solo ida / ...". Es como centra patternlab su
     .tabs-nav (patternlab.css:6525): margin auto + ancho al contenido. */
  .pl-modal .search-bar__tabs .tabs-nav {
    margin: 0 auto;
    width: fit-content;
    justify-content: center;
  }
  /* El header reparte con space-between y empujaba los tabs a la izquierda. */
  .pl-modal .search-bar__header,
  .pl-modal .search-bar__header-left {
    justify-content: center;
    width: 100%;
  }
}
/* header: grupo izq (tabs+EUR) | grupo der (código promo) */
.pl-modal .search-bar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
}
/* grupo izquierdo: tabs + EUR€ pegados */
.pl-modal .search-bar__header-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}
/* EUR€ en search-bar__header-left: solo desktop (en mobile está en searcher__header) */
.pl-modal .pl-desktop-only {
  display: none;
}
@media (min-width: 1024px) {
  .pl-modal .pl-desktop-only {
    display: flex;
  }
}
/* search-bar__tabs: padding PatternLab restaurado (apretujado sin él) */
.pl-modal .search-bar__tabs {
  overflow-x: auto;
  scrollbar-width: none;
}
@media (min-width: 1024px) {
  .pl-modal .search-bar__tabs {
    padding: var(--spacing-3);
    width: fit-content;
  }
}
.pl-modal .search-bar__tabs ul,
.pl-modal .search-bar__tabs .tabs-nav { list-style: none; margin: 0; padding: 0; }
/* links: link--white=blanco puro (ok en bar oscuro, no en modal blanco) → usar color primario */
.pl-modal .search-bar__links {
  display: none;
  align-items: center;
  gap: var(--spacing-5);
}
.pl-modal .search-bar__links .link {
  color: white !important;
}
/* Mobile: el código promocional va FUERA de la tarjeta blanca, centrado debajo y en
   blanco, como el buscador actual. En mobile la tarjeta es .search-bar__wrapper y el
   link vive dentro de ella (.search-bar__header), así que se saca con absolute bajo
   la tarjeta y el margin-bottom le reserva el hueco. Solo CSS: moverlo en el DOM
   obligaría a devolverlo al pasar a desktop. La moneda en mobile ya está en
   .searcher__header. El :has() deja fuera los wrappers de Ferry+hotel y Hotel, que
   no llevan link y se quedarían con el hueco vacío. */
@media (max-width: 1023px) {
  .pl-modal .search-bar__wrapper:has(.search-bar__links) {
    margin-bottom: 3.5rem;
    position: relative;
  }
  .pl-modal .search-bar__links {
    display: flex;
    justify-content: center;
    left: 0;
    padding-top: var(--spacing-5);
    position: absolute;
    right: 0;
    top: 100%;
  }
}
.pl-modal .link__icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
}

/* form: el wrapper ya provee el fondo — solo layout y ancla de posicionamiento */
.pl-modal .search-bar__form {
  display: flex !important;
  flex-direction: column;
  gap: var(--spacing-3);
  width: 100%;
  position: relative; /* contexto de posicionamiento para el dropdown */
}
/* FH wrapper: oculto por defecto (mismo control que .search-bar del ferry) */
#fh-search-wrapper { display: none; }
/* fh-search-dt: ocupa todo el espacio horizontal disponible (equivale a .search-bar__inputs en el ferry) */
#fh-search-dt { flex: 1; }
/* Hotel wrapper: oculto por defecto */
#hotel-search-wrapper { display: none; }
/* h-search-dt: ocupa todo el espacio horizontal disponible (igual que fh-search-dt) */
#h-search-dt { flex: 1; }
/* Contenedores legacy FH/Hotel: sibling del input dentro de search-bar__input-column.
   El módulo los usa solo para leer/escribir items internos — nunca deben ser visibles. */
#route_g-dropdown-origin_fh,
#route_g-dropdown-destination_fh,
#route_g-dropdown_h { display: none !important; }
/* Destino FH: sin sidebar de categorías (igual que destino Ferry) */
#pl-dropdown-destination-fh .searcher__list-categories { display: none !important; }
.pl-modal .search-bar__inputs {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  flex: 1;
  position: relative; /* ancla de posicionamiento para todos los dropdowns */
  z-index: 2; /* supera a #pl-multijourney-row (z-index:1) para que sus dropdowns queden por encima */
}
.pl-modal .search-bar__inputs-row {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  flex: 1;
}
/* flex:1 + width:auto neutralizan o-col-md-* que inyecta mostrarMascota()
   del módulo antiguo (baleariaSearcherModule) al renderizar el calendario.
   flex:1 !important es OBLIGATORIO — o-col-md-5 puede tener flex:0 0 41.67% con !important */
.pl-modal .search-bar__input-column { flex: 1 !important; min-width: 0 !important; display: block !important; width: auto !important; max-width: none !important; }

/* input-search dentro de la modal — fondo azulado, borde transparente */
.pl-modal .input-search {
  display: flex !important;
  position: relative;
  width: 100%;
}
/* El hueco del icono iba SOLO con :has(), y sin :has (iOS < 15.4, Samsung Internet
   antiguo) el texto empezaba debajo del barco. El icono va antes que el input en
   todas las JSP, asi que el selector de hermano cubre lo mismo en cualquier navegador. */
.pl-modal .input-search__icon ~ .input-search__input {
  padding-left: var(--spacing-9);
}
/* Regla aparte: un navegador sin :has descarta la regla ENTERA si va en la misma lista. */
.pl-modal .input-search:has(.input-search__icon) .input-search__input {
  padding-left: var(--spacing-9);
}
.pl-modal .input-search__input {
  background-color: var(--background-primary-weak);
  border: var(--border-width-1) solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-family: var(--font-primary) !important;
  font-weight: var(--font-semibold);
  outline: none;
  height: var(--spacing-10);
  padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) var(--spacing-4);
  transition: all var(--transition-fast);
  width: 100%;
  color: var(--text-neutral-default);
}
.pl-modal .input-search__input::placeholder {
  color: var(--text-neutral-dark);
  font-weight: var(--font-normal);
}
.pl-modal .input-search__input:hover {
  background-color: var(--background-primary-selected-dark);
  border-color: transparent;
}
.pl-modal .input-search__input:focus {
  background-color: var(--background-primary-selected);
  border-color: var(--border-primary-default);
  outline: var(--border-width-1) solid var(--border-primary-default);
}
.pl-modal .input-search__icon {
  color: var(--icon-primary-default);
  left: var(--spacing-4);
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--spacing-6);
  z-index: 1;
}

@media (min-width: 1024px) {
  .pl-modal .search-bar__form {
    flex-direction: row !important;
    align-items: center;
  }
  .pl-modal .search-bar__inputs { flex-direction: row; }
  .pl-modal .search-bar__inputs-row { flex-direction: row; }
}

/* ============================================================
   SEARCHER DROPDOWN — Origen / Destino
   Fuente exacta: onemultiplica-balearia-fine-tunning/src/css/components/organisms/searcher.css
                  + molecules/list-menu.css + molecules/submenu.css
   ============================================================ */
/* position: relative está en .search-bar__form — el dropdown se ancla al form completo */

.pl-modal .searcher__dropdown {
  display: none;
  flex-direction: column;
  padding: var(--spacing-5);
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  background-color: var(--background-neutral-extra-weak);
  position: absolute;
  top: calc(100% + var(--spacing-5));
  right: 0;
  width: 100%;
  z-index: var(--z-index-10);
}
/* Abierto vía plOpenDropdown (searcher-new.js) */
.pl-modal .searcher__dropdown.is-open { display: flex; }
/* Abierto vía baleariaSearcherModule (añade clase 'active' al .g-dropdown-click padre) */
.pl-modal .g-dropdown-click.active .searcher__dropdown { display: flex; }
/* El .g-dropdown-click wrapper es position:relative para que el dropdown se posicione bien */
.pl-modal .g-dropdown-click { position: relative; cursor: pointer; }

/* Todos los dropdowns anclan a .search-bar__inputs (position:relative).
   .g-dropdown-click es position:static en todos los casos para que no cree su propio contexto. */
#pl-col-origin .g-dropdown-click,
#pl-col-destination .g-dropdown-click,
#pl-col-passengers .g-dropdown-click,
#pl-col-vehicle .g-dropdown-click,
#pl-col-pets .g-dropdown-click { position: static; }

/* FH: origin/destination/passengers/vehicle anclan a .search-bar__inputs.
   Fechas NO: #calendar_dropdown_fh es position:relative (igual que Ferry dates)
   para que plSizeDatesDropdownFH funcione con el mismo patrón right:0 + width. */
#pl-col-origin-fh .g-dropdown-click,
#pl-col-destination-fh .g-dropdown-click,
#pl-col-passengers-fh .g-dropdown-click,
#pl-col-vehicle-fh .g-dropdown-click { position: static; }

/* Los dropdowns del 2º tramo anclan a .search-bar__inputs-row dentro de #pl-multijourney-row.
   Mismo patrón: g-dropdown-click → static, inputs-row → relative (ancla). */
#pl-col-origin-mj .g-dropdown-click,
#pl-col-destination-mj .g-dropdown-click { position: static; }
#pl-multijourney-row .search-bar__inputs-row { position: relative; }

/* Origen/destino Ferry: se extienden desde el borde izquierdo de inputs hasta el borde derecho del form
   left:0 = inicio de inputs, width = inputs + 7rem (botón Buscar) → cubre el ancho completo del form */
#pl-dropdown-origin,
#pl-dropdown-destination { left: 0; right: auto; width: calc(100% + 7rem); }

/* Origen/destino FH: mismo ancho extendido — búton searcherButton_fh es sibling de #fh-search-dt */
#pl-dropdown-origin-fh,
#pl-dropdown-destination-fh { left: 0; right: auto; width: calc(100% + 7rem); }

.pl-modal .searcher__dropdown-content {
  display: flex;
  gap: var(--spacing-6);
  overflow: hidden;
  width: 100%;
  flex-grow: 1;
}
@media (min-width: 1024px) {
  .pl-modal .searcher__dropdown-content:has(.searcher__image) { height: 24rem; }
}
@media (min-width: 1280px) {
  .pl-modal .searcher__dropdown-content:has(.searcher__image) { height: 30rem; }
}
@media (min-width: 1536px) {
  .pl-modal .searcher__dropdown-content:has(.searcher__image) { height: 35rem; }
}
.pl-modal .searcher__dropdown-content-left { flex: 1; min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
.pl-modal .searcher__dropdown-content-right { flex: 1; min-width: 0; overflow: hidden; }

/* Cabecera del dropdown de destino: "Destinos desde X" + contador — PatternLab: searcher__typing-list-header */
.pl-modal .searcher__typing-list-header {
  align-items: center;
  border-bottom: var(--border-width-2) solid var(--border-neutral-default);
  display: flex;
  gap: var(--spacing-5);
  justify-content: space-between;
  padding: var(--spacing-5);
  flex-shrink: 0;
}

.pl-modal #route_g-dropdown-destination{
    padding-left: 0px;
}

.pl-modal .searcher__typing-list-header .heading--base {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-neutral-default);
  margin: 0;
}
.pl-modal .searcher__typing-list-header .text--sm {
  font-size: var(--text-sm);
  color: var(--text-neutral-dark);
  margin: 0;
}

/* Contenedores AJAX — baleariaSearcherModule inyecta HTML del servidor aquí.
   !important en display para neutralizar CSS legado que los oculta cuando
   .g-dropdown-click pierde .active (clearOpenedSearcherSections lo quita). */
.pl-modal .g-dropdown-click--route,
.pl-modal .g-dropdown-click--passenger,
.pl-modal .g-dropdown-click--vehicle,
.pl-modal .g-dropdown-click--pet {
  display: block !important;
  flex: 1;
  width: auto;
  overflow-y: auto;
}
/* FH: el contenedor legacy de pasajeros (.g-dropdown-click--passenger_fh) NO se
   usa en el rediseño (la UI de habitaciones la pinta el JS). Forzar oculto para
   que el AJAX legacy no aparezca duplicado encima del rediseño. */
.pl-modal #pl-dropdown-passengers-fh .g-dropdown-click--passenger_fh {
  display: none !important;
}

/* ============================================================
   ROUTE ITEMS — estilo PatternLab para .item.separate pre-renderizados
   ============================================================ */

/* Ocultar elementos del HTML servidor que no encajan en el nuevo diseño */
.pl-modal .balearia-front-message,
.pl-modal #div-offert,
.pl-modal .title.title_popularity { display: none !important; }

/* Items de ruta en estilo list-menu PatternLab */
.pl-modal .g-dropdown-click--route .item.separate,
.pl-modal .g-dropdown-click--route-mj .item.separate {
  display: flex !important;  /* !important: neutraliza CSS externo PL que oculta items cuando .g-dropdown-click pierde .active */
  align-items: center;
  min-height: var(--spacing-9);
  padding: var(--spacing-4) var(--spacing-5);
  border-bottom: var(--border-width-1) solid var(--border-neutral-default);
  cursor: pointer;
  background: none;
  transition: background var(--transition-fast);
}
.pl-modal .g-dropdown-click--route .item.separate:last-child,
.pl-modal .g-dropdown-click--route-mj .item.separate:last-child { border-bottom: none; }
.pl-modal .g-dropdown-click--route .item.separate.is-last-visible,
.pl-modal .g-dropdown-click--route-mj .item.separate.is-last-visible { border-bottom: none; }
.pl-modal .g-dropdown-click--route .item.separate:hover,
.pl-modal .g-dropdown-click--route-mj .item.separate:hover { background-color: var(--background-neutral-weak); }
.pl-modal .g-dropdown-click--route .item.separate.dn,
.pl-modal .g-dropdown-click--route-mj .item.separate.dn { display: none !important; }

/* Info del item — ciudad izquierda, región/país derecha en la misma fila */
.pl-modal .g-dropdown-click--route .item.separate .info.start,
.pl-modal .g-dropdown-click--route-mj .item.separate .info.start {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: var(--spacing-3);
  width: 100%;
}
.pl-modal .g-dropdown-click--route .item.separate p.city,
.pl-modal .g-dropdown-click--route-mj .item.separate p.city {
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  color: var(--text-neutral-default);
  margin: 0 0 4px 0;
  padding: 0;
  line-height: 1;
  transition: color var(--transition-fast);
}
.pl-modal .g-dropdown-click--route .item.separate:hover p.city,
.pl-modal .g-dropdown-click--route-mj .item.separate:hover p.city { color: var(--text-primary-default); }
.pl-modal .g-dropdown-click--route .item.separate span.country,
.pl-modal .g-dropdown-click--route-mj .item.separate span.country {
  font-size: var(--text-xs); color: var(--text-neutral-dark); display: inline !important; line-height: 1;
}
/* Highlight de búsqueda */
.pl-modal .g-dropdown-click--route mark,
.pl-modal .g-dropdown-click--route-mj mark {
  background: none;
  color: var(--text-primary-default);
  font-weight: var(--font-bold);
}

/* Ocultar span.selected y iconos del diseño viejo */
.pl-modal .g-dropdown-click--route .item.separate .selected,
.pl-modal .g-dropdown-click--route .item.separate .icon-boat,
.pl-modal .g-dropdown-click--route .item.separate .item--favorite__star,
.pl-modal .g-dropdown-click--route-mj .item.separate .selected,
.pl-modal .g-dropdown-click--route-mj .item.separate .icon-boat,
.pl-modal .g-dropdown-click--route-mj .item.separate .item--favorite__star { display: none; }

/* Contador de búsqueda — origen-items / destination-items */
.pl-modal #origen-items,
.pl-modal #destination-items {
  padding: var(--spacing-3) var(--spacing-5);
  font-size: var(--text-sm);
  color: var(--text-neutral-dark);
  border-bottom: var(--border-width-1) solid var(--border-neutral-default);
}
.pl-modal #origen-items p,
.pl-modal #destination-items p { margin: 0; }
.pl-modal .color-titulo-ruta { color: var(--text-primary-default); }

/* Favoritos — mismo estilo que items normales */
.pl-modal #favourite-routes-list { border-bottom: var(--border-width-1) solid var(--border-neutral-default); margin-bottom: 0; }

.pl-modal .searcher__image {
  border-radius: var(--radius-sm);
  height: auto; max-height: 100%;
  object-fit: cover; width: 100%;
}
.pl-modal .searcher-item__body {
  flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0;
  overflow-y: auto; overflow-x: hidden;
}

.pl-modal .searcher__empty {
    background-color: var(--background-neutral-weak);
    border-radius: var(--radius-sm);
    gap: var(--spacing-5);
    padding: var(--spacing-6) var(--spacing-13) var(--spacing-9);
}

.pl-modal .searcher__empty, .pl-modal .searcher__empty-content {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pl-modal .searcher__empty-content{
    gap: var(--spacing-3);
    text-align: center;
}



/* Dropdown fechas — sin recorte vertical para que se vean todas las semanas */
#pl-dropdown-dates,
#pl-dropdown-dates-fh,
#pl-dropdown-dates-h { max-height: none; overflow: visible; }
.pl-modal .searcher__list { display: flex; height: 280px; overflow: hidden; min-width: 0; width: 100%; }
/* Dentro de searcher__dropdown-content-left ocupa toda la altura disponible */
.pl-modal .searcher__dropdown-content-left .searcher__list { height: 100%; }

/* Categories sidebar */
.pl-modal .searcher__list-categories {
  display: flex; flex-direction: column; flex-shrink: 0;
  width: 10rem;
  border-right: var(--border-width-1) solid var(--neutral-30);
  overflow-y: auto;
  align-self: flex-start; position: sticky; top: 0;
}
.pl-modal .searcher__list-categories-list {
  display: flex; flex-direction: column;
  gap: var(--spacing-3);
  padding: var(--spacing-4) var(--spacing-5) var(--spacing-4) var(--spacing-3);
  list-style: none; margin: 0;
}
.pl-modal .searcher__list-category-item { list-style: none; }
.pl-modal .submenu__link {
  align-items: center;
  border-radius: var(--radius-sm);
  display: flex;
  font-size: var(--text-sm);
  padding: var(--spacing-2) var(--spacing-3);
  transition: all var(--transition-fast);
  white-space: nowrap;
  cursor: pointer; background: none; border: none;
  font-family: var(--font-primary) !important; text-decoration: none;
  color: var(--text-neutral-default);
}
.pl-modal .submenu__link:hover { color: var(--text-primary-default); }
.pl-modal .submenu__link.is-active {
  background-color: var(--background-primary-selected-dark);
  color: var(--text-primary-default);
  font-weight: var(--font-semibold);
}

/* Content panels */
.pl-modal .searcher__list-content { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; position: relative; }
.pl-modal .searcher__list-panel { display: none; flex-direction: column; }
.pl-modal .searcher__list-panel.is-active { display: flex; }
.pl-modal .searcher__list-panel-title {
  font-size: var(--text-base); font-weight: var(--font-bold);
  padding: 0 var(--spacing-5) var(--spacing-5);
  border-bottom: var(--border-width-2) solid var(--border-neutral-default);
}
@media (min-width: 1024px) {
  .pl-modal .searcher__list-panel-title { padding: 0 var(--spacing-5) var(--spacing-5); }
}

.pl-modal .list-menu { display: flex; flex-direction: column; list-style: none; margin: 0; padding: 0; }
.pl-modal .list-menu.pb-5 {
  padding-bottom: var(--spacing-5); margin-bottom: var(--spacing-3);
  border-bottom: var(--border-width-1) solid var(--border-neutral-default);
}
.pl-modal .list-menu__item {
  list-style: none; display: flex; align-items: center;
  min-height: var(--spacing-9);
  padding: var(--spacing-5);
  border-bottom: var(--border-width-1) solid var(--border-neutral-default);
}
.pl-modal .list-menu__item:last-child { border-bottom: none; }

/* Port buttons */
.pl-modal .searcher__list-item-button {
  align-items: center; cursor: pointer; display: flex;
  column-gap: var(--spacing-4); row-gap: var(--spacing-2);
  text-align: left; font-size: var(--text-sm);
  position: relative; width: 100%; flex-wrap: wrap;
  background: none; border: none; font-family: var(--font-primary) !important;
}
.pl-modal .searcher__list-item-button:hover .searcher__list-item-name { color: var(--text-primary-default); }
.pl-modal .searcher__list-item-button--vertical {
  flex-direction: column; align-items: flex-start; gap: var(--spacing-2);
}
.pl-modal .searcher__list-item-name {
  font-weight: var(--font-semibold);
  transition: all var(--transition-fast);
}
.pl-modal .searcher__list-item-detail { font-size: var(--text-xs); color: var(--text-neutral-dark); }
.pl-modal .searcher__list-item-name mark { background: var(--background-primary-selected-dark); color: var(--text-primary-default); font-weight: var(--font-bold); border-radius: 2px; padding: 0 1px; }
.pl-modal .searcher__list-item-close {
  position: absolute; right: var(--spacing-5); top: 50%; transform: translateY(-50%);
  width: var(--spacing-5); height: var(--spacing-5);
  cursor: pointer; transition: all var(--transition-fast);
}
.pl-modal .searcher__list-item-close:hover { color: var(--text-primary-default); }
.pl-modal .searcher__no-results { padding: var(--spacing-5); font-size: var(--text-sm); color: var(--text-neutral-dark); text-align: center; }

/* ============================================================
   SEARCHER — DROPDOWN WIDTH AUTO (Fechas / Pasajeros / Vehículo / Mascotas)
   Fuente: organisms/searcher.css — .searcher__dropdown--auto
   ============================================================ */
.pl-modal .searcher__dropdown--auto {
  width: auto;
  min-width: 16.438rem;
}

/* ============================================================
   SEARCHER — CALENDAR (Fechas)
   Fuente: organisms/searcher.css
   ============================================================ */
.pl-modal .searcher__calendar {
  background-color: var(--background-neutral-weak);
  display: flex;
  justify-content: center;
  padding: var(--spacing-6) var(--spacing-5);
  flex-grow: 1;
}

/* ============================================================
   SEARCHER — COUNTERS (Pasajeros / Vehículo / Mascotas)
   Fuente: organisms/searcher.css + organisms/counter.css
   ============================================================ */
.pl-modal .searcher__counters {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--spacing-5);
  padding: var(--spacing-5);
  background-color: var(--background-neutral-weak);
}

/* Counter item */
.pl-modal .counter {
  align-items: center;
  background-color: var(--background-neutral-extra-weak);
  border-radius: var(--radius-md);
  display: flex;
  gap: var(--spacing-3);
  padding: var(--spacing-5) var(--spacing-3);
}
.pl-modal .counter.is-selected {
  background-color: var(--background-primary-selected-dark);
}
.pl-modal .counter__content {
  display: flex;
  gap: var(--spacing-4);
  flex-grow: 1;
  align-items: center;
}
.pl-modal .counter__caption {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: var(--spacing-2);
}
.pl-modal .counter__title {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-neutral-dark);
}
.pl-modal .counter__subtitle {
  font-size: var(--text-xs);
  color: var(--text-neutral-dark);
}
/* Capitalizar la inicial del subtítulo (patternlab: "De 14 a 59…", la clave
   Liferay viene en minúscula). No cambia las claves. */
.pl-modal .counter__subtitle::first-letter {
  text-transform: uppercase;
}
.pl-modal .counter__right {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.pl-modal .counter__counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) 0;
}
.pl-modal .counter__counter-value {
  align-items: center;
  color: var(--text-neutral-disabled);
  display: flex;
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  height: var(--spacing-7);
  justify-content: center;
  width: var(--spacing-7);
}
.pl-modal .counter.is-selected .counter__counter-value {
  color: var(--text-neutral-default);
}
.pl-modal .counter__counter-buttons {
  align-items: center;
  display: flex;
  gap: var(--spacing-2);
  justify-content: space-between;
}
.pl-modal .counter__counter-btn {
  align-items: center;
  background-color: var(--background-primary-default);
  border-radius: var(--radius-sm);
  color: var(--text-neutral-extra-weak);
  display: flex;
  height: var(--spacing-7);
  justify-content: center;
  width: var(--spacing-7);
  border: none;
  cursor: pointer;
  transition: none;
}
.pl-modal .counter__counter-btn:disabled {
  background-color: var(--background-neutral-disabled);
  color: var(--text-neutral-disabled);
  cursor: default;
}
.pl-modal .counter__counter-btn svg {
  width: var(--spacing-5);
  height: var(--spacing-5);
}

/* ============================================================
   PASAJEROS / MASCOTAS — remap g-accountant → counter PatternLab
   El módulo inyecta select_passengers.jsp / select_pets.jsp (HTML antiguo
   con .g-accountant--item) en .g-dropdown-click--passenger / --pet.
   Mapeamos ese HTML para que luzca como el componente counter de PatternLab.
   ============================================================ */

/* Wrapper g-accountant → searcher__counters */
#pl-dropdown-passengers .g-accountant,
#pl-dropdown-pets .g-accountant {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  padding: var(--spacing-5);
  background-color: var(--background-neutral-weak);
  margin: 0;
}

/* g-accountant--item → counter */
#pl-dropdown-passengers .g-accountant--item,
#pl-dropdown-pets .g-accountant--item {
  display: flex !important;
  align-items: center;
  background-color: var(--background-neutral-extra-weak);
  border-radius: var(--radius-md);
  padding: var(--spacing-5);
  gap: var(--spacing-3);
  border-bottom: none !important;  /* elimina u-bb--gray-main */
  border: none !important;
  margin: 0 !important;
}

/* g-accountant--item__text → counter__caption */
#pl-dropdown-passengers .g-accountant--item__text,
#pl-dropdown-pets .g-accountant--item__text {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}
#pl-dropdown-passengers .g-accountant--item__text .text2,
#pl-dropdown-pets .g-accountant--item__text .text2 {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-neutral-dark);
  margin: 0;
}
#pl-dropdown-passengers .g-accountant--item__text .text1,
#pl-dropdown-pets .g-accountant--item__text .text1 {
  font-size: var(--text-xs);
  color: var(--text-neutral-dark);
}

/* g-accountant--item__nro → counter__counter (minus | value | plus) */
#pl-dropdown-passengers .g-accountant--item__nro,
#pl-dropdown-pets .g-accountant--item__nro {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  flex-shrink: 0;
}
/* Reorder: original order is value | minus | plus → show as minus | value | plus */
#pl-dropdown-passengers .g-accountant--item__nro .nro,
#pl-dropdown-pets .g-accountant--item__nro .nro {
  order: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  color: var(--text-neutral-default);
  width: var(--spacing-7);
  height: var(--spacing-7);
  min-width: var(--spacing-7);
}
#pl-dropdown-passengers .g-accountant--item__nro .js-minus,
#pl-dropdown-pets .g-accountant--item__nro .js-minus { order: 1; }
#pl-dropdown-passengers .g-accountant--item__nro .js-plus,
#pl-dropdown-pets .g-accountant--item__nro .js-plus  { order: 3; }

/* Botones minus/plus → counter__counter-btn */
#pl-dropdown-passengers .g-accountant--item__nro .btn--small,
#pl-dropdown-pets .g-accountant--item__nro .btn--small {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background-color: var(--background-primary-default) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-neutral-extra-weak) !important;
  width: var(--spacing-7) !important;
  height: var(--spacing-7) !important;
  min-width: var(--spacing-7);
  border: none !important;
  cursor: pointer;
  padding: 0 !important;
  font-size: var(--text-base);
  box-shadow: none !important;
  transition: none;
}
#pl-dropdown-passengers .g-accountant--item__nro .btn--small:disabled,
#pl-dropdown-pets .g-accountant--item__nro .btn--small:disabled {
  background-color: var(--background-neutral-disabled) !important;
  color: var(--text-neutral-disabled) !important;
  cursor: default;
}

/* Ocultar secciones de bonus/residente (ruido visual en diseño nuevo) */
#pl-dropdown-passengers #passenger_bonus_click,
#pl-dropdown-passengers #passenger_bonus_text,
#pl-dropdown-passengers .g-dropdown-click--passenger__info { display: none !important; }

/* Botones Cancelar / Confirmar */
#pl-dropdown-passengers .g-dropdown-click--passenger__btn {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-3);
  padding: var(--spacing-4) var(--spacing-5);
  background-color: var(--background-neutral-weak);
}
/* #passenger_confirm ahora usa clase btn btn--lg btn--primary — no override específico */

/* pets: radio viaja-mascota → ocultar (en nuevo diseño se gestiona en dropdown propio) */
#pl-dropdown-passengers .g-accountant--item:has(input[name="viajasMascota"]) { display: none !important; }

/* ---- MASCOTAS: estructura diferente → pet__item tiene pet-nro-box (texto) + mascot_list (counter) ---- */
#pl-dropdown-pets .g-dropdown-click--pet {
  display: flex;
  flex-direction: column;
}
#pl-dropdown-pets .g-dropdown-click--pet__item {
  display: flex !important;
  align-items: center;
  background-color: var(--background-neutral-extra-weak);
  border-radius: var(--radius-md);
  padding: var(--spacing-5);
  gap: var(--spacing-3);
  border-bottom: none !important;
  border: none !important;
}
#pl-dropdown-pets .pet-nro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  width: 100%;
}
#pl-dropdown-pets .pet-nro--box {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  flex-grow: 1;
}
#pl-dropdown-pets .pet-nro--box__icon { display: none; } /* icono viejo innecesario */
#pl-dropdown-pets .pet-nro--box__text { display: flex; flex-direction: column; gap: var(--spacing-1); }
#pl-dropdown-pets .pet-nro--box__text .text1 {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-neutral-dark);
  margin: 0;
}
#pl-dropdown-pets .pet-nro--box__text .text2 {
  font-size: var(--text-xs);
  color: var(--text-neutral-dark);
}
/* Counter buttons dentro de pets */
#pl-dropdown-pets .mascot_list .g-accountant--item {
  display: flex !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}
#pl-dropdown-pets .mascot_list .g-accountant--item__nro {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}
#pl-dropdown-pets .mascot_list .g-accountant--item__nro .nro {
  order: 2;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--text-base); font-weight: var(--font-bold);
  color: var(--text-neutral-default);
  width: var(--spacing-7); height: var(--spacing-7); min-width: var(--spacing-7);
}
#pl-dropdown-pets .mascot_list .g-accountant--item__nro .js-minus { order: 1; }
#pl-dropdown-pets .mascot_list .g-accountant--item__nro .js-plus  { order: 3; }
#pl-dropdown-pets .mascot_list .g-accountant--item__nro .btn--small {
  display: flex !important; align-items: center; justify-content: center;
  background-color: var(--background-primary-default) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-neutral-extra-weak) !important;
  width: var(--spacing-7) !important; height: var(--spacing-7) !important;
  min-width: var(--spacing-7); border: none !important;
  cursor: pointer; padding: 0 !important; font-size: var(--text-base);
  box-shadow: none !important;
}
#pl-dropdown-pets .mascot_list .g-accountant--item__nro .btn--small:disabled {
  background-color: var(--background-neutral-disabled) !important;
  color: var(--text-neutral-disabled) !important;
  cursor: default;
}
/* Info texto y enlace FAQs */
#pl-dropdown-pets .g-dropdown-click--pet__info { display: none; }
#pl-dropdown-pets .u-link { display: none; }
/* #mascot_confirm ahora usa clase btn btn--lg btn--primary — no override específico */

/* ============================================================
   FERRY+HOTEL — PASSENGER DROPDOWN (PatternLab HTML nativo)
   El módulo inyecta select_passengers_ferryhotel.jsp en
   .g-dropdown-click--passenger_fh. El JSP ya usa clases PL:
   searcher__counters-row, counter, counter__counter-btn, etc.
   ============================================================ */

/* Container AJAX: flex column → searcher-item__body + bottom-bar apilados */
#pl-dropdown-passengers-fh .g-dropdown-click--passenger_fh {
  display: flex !important;
  flex-direction: column;
}

/* searcher__counters con habitaciones: scroll interno */
.pl-modal .searcher__counters:has(.searcher__counters-row) {
  max-height: 24.75rem;
  overflow-y: auto;
}

/* Room row (una por habitación) */
.pl-modal .searcher__counters-row {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--spacing-5);
  border-bottom: var(--border-width-1) solid var(--border-neutral-disabled);
  padding-bottom: var(--spacing-5);
}
.pl-modal .searcher__counters-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.pl-modal .searcher__counters-row-heading {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-5);
}
.pl-modal .searcher__counters-row-content {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--spacing-5);
}
.pl-modal .searcher__counters-row-ages {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}
.pl-modal .searcher__counters-row-ages-heading {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}
.pl-modal .searcher__counters-row-ages-heading svg {
  width: 1.25rem;
  height: 1.25rem;
  flex-shrink: 0;
  color: var(--icon-neutral-dark);
}
.pl-modal .searcher__counters-row-ages-inputs {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--spacing-4);
  justify-content: flex-start;
}

/* Ferry+Hotel: aviso al llegar al tope de 9 pasajeros */
.pl-modal .pl-fh-pax-warning {
  color: var(--text-neutral-default);
  font-size: 0.875rem;
  margin: 0;
}

/* Suppress u-bb--gray-main added by module on counters when kids > 0 */
#pl-dropdown-passengers-fh .g-accountant--item.u-bb--gray-main {
  border-bottom: none !important;
}

/* Age selector fields in FH — cajetillas de edad de niños */
#pl-dropdown-passengers-fh .age-selector-container .field--input {
  width: 7.5rem;
}

/* ============================================================
   FH ROOMS (rediseño nuevo) — #pl-fh-rooms-list
   Cada habitación = card gris; contadores a ANCHO COMPLETO (texto izq, +/- der);
   edades en una fila debajo del heading.
   ============================================================ */
/* Base (mobile): contenedor gris, habitaciones apiladas separadas por borde,
   contadores a ancho completo. (Desktop sobreescribe a 2 columnas más abajo.) */
#pl-fh-rooms-list {
  display: flex !important;
  flex-direction: column;
  gap: var(--spacing-5);
  max-height: 24.75rem;
  overflow-y: auto;
  background-color: var(--background-neutral-weak);
  border-radius: var(--radius-sm);
  padding: var(--spacing-5);
}
#pl-fh-rooms-list .searcher__counters-row {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  border-bottom: var(--border-width-1) solid var(--border-neutral-disabled);
  padding-bottom: var(--spacing-5);
}
#pl-fh-rooms-list .searcher__counters-row:last-child { border-bottom: none; padding-bottom: 0; }
#pl-fh-rooms-list .searcher__counters-row-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
}
#pl-fh-rooms-list .counter { width: 100%; }
#pl-fh-rooms-list .searcher__counters-row-ages-inputs { display: flex; flex-wrap: wrap; gap: var(--spacing-3); }
#pl-fh-rooms-list .searcher__counters-row-ages-inputs .field--input { width: 9rem; flex: 0 0 auto; }
/* En la modal de movil el tope de 24.75rem dejaba la segunda habitacion y el
   aviso de edad cortados dentro de un scroll propio, con media pantalla vacia
   debajo. Alli desplaza la modal entera. */
@media (max-width: 1023px) {
  #searcher-passengers-fh-modal #pl-fh-rooms-list { max-height: none; overflow: visible; }
}
/* Fila "Quitar bonificacion" / "Eliminar descuento" (PatternLab: searcher-remove-passenger-*-modal). */
#add-passenger-bonus-fh-modal .list-menu__item--bg,
#add-passenger-resident-modal .list-menu__item--bg { background: var(--bg-neutral-lightest, #f8f8f8); }
#add-passenger-bonus-fh-modal .list-menu__item--bg[hidden],
#add-passenger-resident-modal .list-menu__item--bg[hidden] { display: none; }
#add-passenger-bonus-fh-modal .list-menu__item--bg .link,
#add-passenger-resident-modal .list-menu__item--bg .link { display: flex; align-items: center; gap: 4px; padding: 0; }
#add-passenger-bonus-fh-modal .list-menu__item--bg .link__icon,
#add-passenger-resident-modal .list-menu__item--bg .link__icon { width: 20px; height: 20px; }
.searcher__cta-botton .chip[data-modal-trigger] { cursor: pointer; }
/* Edad sin rellenar al confirmar (plFhValidarEdades, searcher-new-hotel.js). */
#pl-fh-rooms-list .input.is-invalid,
#pl-fh-rooms-list .input.is-invalid:focus { border-color: var(--border-danger-default, #d93025); }
#pl-fh-rooms-list .pl-fh-age-error {
  color: var(--text-error-default, #d93025);
  font-size: var(--text-xs);
  margin: var(--spacing-1, 0.25rem) 0 0;
}

/* Desktop (≥1024): habitación = [heading | (Adultos | Niños)], edades debajo
   a la derecha. Igual que el diseño (searcher.css: grid auto 1fr + content 2col). */
@media (min-width: 1024px) {
  #pl-fh-rooms-list .searcher__counters-row {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
    column-gap: var(--spacing-6);
    row-gap: var(--spacing-4);
  }
  #pl-fh-rooms-list .searcher__counters-row-heading { align-self: center; min-width: 8rem; }
  #pl-fh-rooms-list .searcher__counters-row-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-5);
  }
  #pl-fh-rooms-list .searcher__counters-row-ages {
    grid-column: 1 / -1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-3);
  }
}
/* CTAs (Añadir habitación / Residente / Bonificación) en fila horizontal */
/* CTAs FH (Añadir habitación / Residente / Bonificación): APILADAS en mobile,
   en FILA en desktop (igual que el diseño .searcher__ctas--horizontal). */
#pl-dropdown-passengers-fh .searcher__ctas--horizontal {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-5);
  padding: var(--spacing-5) 0;
}
#pl-dropdown-passengers-fh .searcher__ctas--horizontal .searcher__cta {
  flex-direction: column;
  padding: 0;
  border: none;
}
@media (min-width: 1024px) {
  #pl-dropdown-passengers-fh .searcher__ctas--horizontal {
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-8);
  }
  #pl-dropdown-passengers-fh .searcher__ctas--horizontal .searcher__cta {
    flex-direction: row;
    align-items: center;
  }
  #pl-dropdown-passengers-fh .searcher__ctas--horizontal .searcher__cta:first-child { flex-grow: 1; }
}
#pl-dropdown-passengers-fh .age-selector-container .field__wrapper {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}
#pl-dropdown-passengers-fh .age-selector-container .input {
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  border: var(--border-width-1) solid var(--border-neutral-default);
  padding: var(--spacing-2) var(--spacing-3);
  background-color: var(--background-neutral-extra-weak);
  color: var(--text-neutral-default);
  width: 100%;
}
#pl-dropdown-passengers-fh .age-selector-container .input:focus {
  border-color: var(--border-primary-default);
  outline: var(--border-width-1) solid var(--border-primary-default);
}
#pl-dropdown-passengers-fh .age-selector-container .field__label {
  font-size: var(--text-xs);
  color: var(--text-neutral-dark);
  margin: 0;
  position: static;
  transform: none;
}
#pl-dropdown-passengers-fh .age-selector-container input.g-input-not-valid {
  border-color: var(--border-danger-default, #d32f2f) !important;
}

/* age_selector_template: oculto */
#pl-dropdown-passengers-fh #age_selector_template { display: none !important; }

/* CTAs Residente / Bonificación: inline dentro de searcher__cta */
#pl-dropdown-passengers-fh .fh-cta-select-wrapper {
  display: flex;
  flex-direction: row !important;
  align-items: center;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
#pl-dropdown-passengers-fh .fh-cta-select-wrapper .form__input-wrapper {
  display: flex !important;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-2);
  margin: 0 !important;
  width: auto !important;
}
#pl-dropdown-passengers-fh .fh-cta-select-wrapper .form__input-wrapper label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-neutral-dark);
  white-space: nowrap;
  order: 1;
  margin: 0;
  cursor: pointer;
}
#pl-dropdown-passengers-fh .fh-cta-select-wrapper .form__select {
  border: none !important;
  background-color: transparent;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-primary-default);
  cursor: pointer;
  padding: 0;
  box-shadow: none !important;
  outline: none;
  order: 2;
}

/* Desktop */
@media (min-width: 1024px) {
  /* Con rooms: forzar 1 columna (override del 2-col desktop de searcher__counters) */
  .pl-modal .searcher__counters:has(.searcher__counters-row) {
    grid-template-columns: repeat(1, 1fr);
  }
  /* Room row: heading a la izquierda (auto) + counters a la derecha (1fr) */
  .pl-modal .searcher__counters-row {
    grid-template-columns: auto 1fr;
    align-items: start;
  }
  .pl-modal .searcher__counters-row-heading {
    flex-direction: column;
    align-items: flex-start;
    padding-top: var(--spacing-2);
    min-width: 7rem;
    padding: var(--spacing-5) var(--spacing-5) 0;
  }
  .pl-modal .searcher__counters-row-content {
    grid-template-columns: repeat(2, 1fr);
  }
  .pl-modal .searcher__counters-row-ages {
    align-items: center;
    flex-direction: row;
    grid-column: span 2 / span 2;
    justify-content: flex-end;
  }
}

/* ============================================================
   SEARCHER — CTAs (Bonificación / Residente)
   Fuente: organisms/searcher.css
   ============================================================ */
.pl-modal .searcher__ctas {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
  padding: var(--spacing-6) var(--spacing-5) var(--spacing-8);
}

@media (min-width: 1024px) {
    .searcher__form {
        &:has(.searcher__ctas) {
            & .searcher__ctas {
                padding: var(--spacing-5);
            }
        }
    }
}

.pl-modal .searcher__cta {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  padding-bottom: var(--spacing-5);
  border-bottom: var(--border-width-1) solid var(--border-neutral-default);
}
.pl-modal .searcher__cta:last-child { border-bottom: none; padding-bottom: 0; }
.pl-modal .searcher__cta-wrapper { display: flex; gap: var(--spacing-3); width: 100%; }
.pl-modal .searcher__cta-icon {
  width: var(--spacing-5); height: var(--spacing-5); margin-top: var(--spacing-1); flex-shrink: 0;
  color: var(--icon-primary-default);
}
.pl-modal .searcher__cta-content { display: flex; align-items: center; gap: var(--spacing-3); flex-grow: 1; }
.pl-modal .searcher__cta-caption { font-size: var(--text-sm); color: var(--text-neutral-default); flex-grow: 0; }
.pl-modal .searcher__cta-caption strong { font-weight: var(--font-semibold); }
.pl-modal .searcher__cta-link {
  font-size: var(--text-sm); color: var(--text-primary-default); font-weight: var(--font-semibold);
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.pl-modal .searcher__cta-link:hover { text-decoration: underline; }

/* ------ Horizontal CTAs variant (FH/Hotel passenger dropdown) ------ */
.pl-modal .searcher__ctas--horizontal {
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  padding: var(--spacing-4) var(--spacing-5);
  gap: var(--spacing-5);
}
.pl-modal .searcher__ctas--horizontal .searcher__cta {
  flex-direction: row;
  align-items: center;
  border-bottom: none;
  padding-bottom: 0;
  gap: 0;
}
.pl-modal .searcher__ctas--horizontal .fh-cta-add-room {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
}
.pl-modal .searcher__ctas--horizontal .fh-cta-select-new .searcher__cta-wrapper {
  gap: var(--spacing-2);
  align-items: center;
}
.pl-modal .searcher__ctas--horizontal .fh-cta-select-new .searcher__cta-icon {
  margin-top: 0;
  width: 1rem;
  height: 1rem;
}
.pl-modal .searcher__ctas--horizontal .fh-cta-select-new .searcher__cta-content {
  gap: var(--spacing-2);
}

/* Select styled as primary link in horizontal CTAs */
.pl-modal .fh-select-link {
  border: none;
  background: transparent;
  color: var(--text-primary-default);
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  cursor: pointer;
  padding: 0;
  outline: none;
  white-space: nowrap;
}
.pl-modal .fh-select-link:focus { outline: none; }

/* ============================================================
   HOTEL — FORM (PatternLab)
   ============================================================ */
#hotel-search-wrapper .search-bar__inputs-row {
  gap: var(--spacing-3);
}
/* Destino/pasajeros anclan a .search-bar__inputs (position:relative).
   Fechas NO: calendar_dropdown_h mantiene position:relative propio. */
#pl-col-route-h .g-dropdown-click,
#pl-col-passengers-h .g-dropdown-click { position: static; }
/* Destino Hotel: ocupa todo el ancho de .search-bar__inputs */
#pl-dropdown-route-h { left: 0; right: auto; width: 100%; }
/* Destino Hotel: mostrar items de destino (override del hide genérico de title_popularity) */
#route_g-dropdown_h .title.title_popularity {
  display: list-item !important;
  padding: var(--spacing-2) var(--spacing-4);
  cursor: pointer;
  color: var(--text-neutral-default);
  font-size: var(--text-sm);
}
#route_g-dropdown_h .title.title_popularity:hover {
  background-color: var(--background-neutral-subtle);
  color: var(--text-primary-default);
}
#route_g-dropdown_h ul { list-style: none; margin: 0; padding: var(--spacing-2) 0; }
/* Passenger dropdown Hotel: same structure as FH */
#pl-dropdown-passengers-h .g-dropdown-click--passenger_h {
  display: flex !important;
  flex-direction: column;
}
#hotel-search-wrapper .searcher__counters:has(.searcher__counters-row) {
  max-height: 24.75rem;
  overflow-y: auto;
}

/* ============================================================
   BOTTOM-BAR (footer de dropdowns)
   Fuente: molecules/bottom-bar.css
   ============================================================ */
.pl-modal .bottom-bar {
  border-top: var(--border-width-1) solid var(--border-neutral-default);
  display: flex;
  align-items: center;
  column-gap: var(--spacing-3);
  row-gap: var(--spacing-3);
  padding: var(--spacing-5);
  justify-content: flex-end;
  flex-shrink: 0;
}
/* Nested rule: btn inside bottom-bar gets flex-shrink:1 (PatternLab: & .btn { flex-shrink:1; min-width:0 }) */
.pl-modal .bottom-bar .btn {
  flex-shrink: 1;
  min-width: 0;
}
.pl-modal .bottom-bar--vertical {
  flex-direction: column;
  gap: var(--spacing-3);
}
.pl-modal .bottom-bar--primary {
  background-color: var(--background-primary-dark);
  padding: var(--spacing-3) var(--spacing-5);
}
@media (min-width: 1024px) {
  .pl-modal .bottom-bar {
    column-gap: var(--spacing-5);
  }
}

/* Mascotas: contenido gris de borde a borde (el overflow:hidden + border-radius del
   dropdown lo recorta limpiamente). Se elimina el marco blanco del padding estándar. */
#pl-dropdown-pets {
  padding: 0;
}

/* ============================================================
   RADIO FIELD (Vehículo list-menu)
   Fuente: molecules/fields.css + atoms/radio.css
   ============================================================ */
.pl-modal .field {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  gap: var(--spacing-3);
}
.pl-modal .field--radio {
  flex-direction: row;
  gap: var(--spacing-4);
  align-items: center;
  cursor: pointer;
  width: 100%;
}
.pl-modal .field--radio .radio {
  flex-shrink: 0;
  margin-top: 0;
}
.pl-modal .field__label {
  position: static;
  transform: none;
  flex-grow: 1;
  color: var(--text-neutral-dark);
  font-size: var(--text-sm);
  left: var(--spacing-5);
  top: 24px;
  transition: all var(--transition-fast);
}

.pl-modal {
    .field__icon,
    .field__label {
        pointer-events: none;
        position: absolute;
        transform: translateY(-50%);
    }
}

.pl-modal .field--bold .field__label { font-weight: var(--font-semibold); }
/* Campo deshabilitado (p.ej. MODELO hasta elegir marca): la etiqueta salía en
   oscuro y parecía un campo ya relleno. */
.pl-modal .input:disabled ~ .field__label { color: var(--text-neutral-disabled); }
/* Modal móvil de vehículo: el título del panel ("Coche o furgoneta"...) iba
   pegado al borde de la tarjeta gris; los campos sí tienen margen. */
#searcher-vehicle-modal .searcher__form > .searcher__form-legend {
  padding: var(--spacing-4) var(--spacing-5) 0;
}
.pl-modal .radio {
  accent-color: var(--background-primary-default);
  appearance: none;
  background-color: var(--background-neutral-extra-weak);
  border-radius: var(--radius-full);
  border: var(--border-width-1) solid var(--border-neutral-dark);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--transition-fast), border-width var(--transition-fast), background-color var(--transition-fast);
}
.pl-modal .radio--sm {
  height: var(--spacing-5); width: var(--spacing-5);
}
.pl-modal .radio--sm:checked {
  background-color: var(--background-neutral-extra-weak);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='6' r='6' transform='matrix(1 0 0 -1 0 12)' fill='%23008193'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  border-color: var(--border-primary-default);
}
.pl-modal .radio--sm:hover:not(:checked) {
  border-color: var(--border-primary-default);
  border-width: var(--border-width-3);
}
.pl-modal .field--radio .radio-icon {
  width: var(--spacing-6); height: var(--spacing-6); flex-shrink: 0; color: var(--text-neutral-dark);
}

/* ============================================================
   CHECKBOX (Ruta alternativa)
   Fuente: atoms/checkbox.css + molecules/fields.css
   ============================================================ */
.pl-modal .checkbox {
  accent-color: var(--background-primary-default);
  appearance: none;
  background-color: var(--background-neutral-extra-weak);
  border-radius: var(--radius-xs);
  border: var(--border-width-1) solid var(--border-neutral-dark);
  cursor: pointer;
  flex-shrink: 0;
  height: var(--spacing-5);
  width: var(--spacing-5);
  background-position: center;
  background-repeat: no-repeat;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
.pl-modal .checkbox:hover:not(:checked) {
  border-color: var(--border-primary-default);
  border-width: var(--border-width-3);
}
.pl-modal .checkbox:checked {
  background-color: var(--background-neutral-extra-weak);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='12' height='12' rx='2' fill='%23008193'/%3E%3C/svg%3E");
  border-color: var(--border-primary-default);
}
.pl-modal .field--checkbox {
  flex-direction: row;
  gap: var(--spacing-4);
  align-items: center;
  cursor: pointer;
  width: 100%;
}
.pl-modal .field--checkbox .checkbox { flex-shrink: 0; margin-top: 0; }
.pl-modal .field--checkbox .field__label { font-size: var(--text-sm); color: var(--text-neutral-default); position: static; transform: none; flex-grow: 0; }
.pl-modal .field--checkbox.field--bold .field__label { font-weight: var(--font-semibold); }
/* inner flex wrapper (items-center gap-3) */
.pl-modal .field--checkbox .pl-flex-row { display: flex; align-items: center; gap: var(--spacing-3); flex-grow: 1; }

/* ============================================================
   SEARCHER — ALTERNATIVE BLOCK (sobre el calendario)
   Fuente: organisms/searcher.css
   ============================================================ */
.pl-modal .searcher__alternative {
  padding: var(--spacing-5);
}
@media (min-width: 1024px) {
  .pl-modal .searcher__alternative {
    padding: 0 0 var(--spacing-5);
  }
  .pl-modal .searcher__calendar {
    padding: var(--spacing-5);
    border-radius: var(--radius-sm);
    overflow: visible;
  }
}

/* ============================================================
   LITEPICKER — estilos exactos de PatternLab
   Fuente: molecules/datepicker.css
   ============================================================ */
.pl-modal .litepicker {
  font-size: var(--text-base);
  font-family: var(--font-primary) !important;
  display: block !important;
  width: 100% !important;
}
.pl-modal .litepicker .container__months {
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  gap: var(--spacing-4) !important;
  width: var(--litepicker-month-width) !important;
  margin: 0 !important;
  padding: 0 !important;
}
.pl-modal .litepicker .container__months.columns-2 {
  gap: var(--spacing-6) !important;
  justify-content: center !important;
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}
.pl-modal .litepicker .container__months .month-item {
  padding: 0 !important;
  width: var(--litepicker-month-width) !important;
}
.pl-modal .litepicker .container__months .month-item-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px 5px !important;
  font-weight: 500 !important;
  text-align: center !important;
  border: none !important;
  border-bottom: none !important;
}
/* ── Navegacion de meses del calendario ───────────────────────────────────
   view_new.jsp carga SOLO searcher-new.css. La hoja base de Litepicker no se
   carga en ninguna parte (litepicker.js viene del CDN, sin su CSS) y el diseno
   viejo las estilaba desde formenteraExpress.scss, que aqui no entra. Sin estas
   reglas los botones de mes existen en el DOM pero no se ven: es el "no hay
   boton para moverse por los meses".

   Portado de diseno/patternlab.css (.litepicker .container__months
   .month-item-header .button-*) con los tokens del sistema nuevo. Litepicker
   deja los dos botones en visibility:hidden y solo destapa el del primer y
   ultimo mes, por eso las tres reglas de visibility van juntas: quitar una
   deja la navegacion muerta. Patternlab NO los oculta en movil (el diseno
   viejo si lo hacia, en formenteraExpress.scss bajo 767px). */
.pl-modal .litepicker .container__months .month-item-header div {
  flex: 1 !important;
}
.pl-modal .litepicker .container__months .month-item-header .button-previous-month,
.pl-modal .litepicker .container__months .month-item-header .button-next-month {
  visibility: hidden;
  /* El main.css del tema arrastra la regla del diseno viejo, sin scope y global:
     @media (max-width:767px) { .container__months ... .button-next-month { display:none } }
     Eso mataba los botones en movil. Se reafirma el display aqui, que es mas
     especifico; el !important es por si el tema cambia de orden de carga. */
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  padding: 3px 5px !important;
  border-radius: 3px !important;
  text-decoration: none !important;
  transition: color .3s, border .3s !important;
}
.pl-modal .litepicker .container__months .month-item-header .button-previous-month *,
.pl-modal .litepicker .container__months .month-item-header .button-next-month * {
  pointer-events: none;
}
.pl-modal .litepicker .container__months .month-item:first-child .button-previous-month,
.pl-modal .litepicker .container__months .month-item:last-child .button-next-month,
.pl-modal .litepicker .container__months.split-view .month-item-header .button-previous-month,
.pl-modal .litepicker .container__months.split-view .month-item-header .button-next-month {
  visibility: visible;
}
.pl-modal .litepicker .container__months .month-item.no-previous-month .button-previous-month,
.pl-modal .litepicker .container__months .month-item.no-next-month .button-next-month {
  visibility: hidden;
}
.pl-modal .litepicker .container__months .month-item-header .button-previous-month {
  color: var(--litepicker-button-prev-month-color) !important;
}
.pl-modal .litepicker .container__months .month-item-header .button-previous-month > svg {
  fill: var(--litepicker-button-prev-month-color) !important;
}
.pl-modal .litepicker .container__months .month-item-header .button-previous-month:hover {
  color: var(--litepicker-button-prev-month-color-hover) !important;
}
.pl-modal .litepicker .container__months .month-item-header .button-previous-month:hover > svg {
  fill: var(--litepicker-button-prev-month-color-hover) !important;
}
.pl-modal .litepicker .container__months .month-item-header .button-next-month {
  color: var(--litepicker-button-next-month-color) !important;
}
.pl-modal .litepicker .container__months .month-item-header .button-next-month > svg {
  fill: var(--litepicker-button-next-month-color) !important;
}
.pl-modal .litepicker .container__months .month-item-header .button-next-month:hover {
  color: var(--litepicker-button-next-month-color-hover) !important;
}
.pl-modal .litepicker .container__months .month-item-header .button-next-month:hover > svg {
  fill: var(--litepicker-button-next-month-color-hover) !important;
}

.pl-modal .litepicker .month-item-header .month-item-name,
.pl-modal .litepicker .month-item-header .month-item-year {
  font-size: var(--text-lg) !important;
  font-weight: var(--font-bold) !important;
  font-family: var(--font-primary) !important;
}
.pl-modal .litepicker .month-item-name { text-transform: capitalize !important; }
.pl-modal .litepicker .month-item-weekdays-row { gap: var(--spacing-1) !important; }
.pl-modal .litepicker .month-item-weekdays-row > div {
  font-size: var(--text-xs) !important;
  padding: var(--spacing-3) 0 !important;
  text-transform: uppercase !important;
  width: calc((100% - 6 * var(--spacing-1)) / 7) !important;
  text-align: center !important;
  border: none !important;
}
.pl-modal .litepicker .container__days { gap: var(--spacing-1) !important; }
/* Anular margin/border fijos de formenteraExpress + width responsive */
.pl-modal .litepicker .container__days > div,
.pl-modal .litepicker .container__days > a {
  margin: 0 !important;
  border: none !important;
  width: calc((100% - 6 * var(--spacing-1)) / 7) !important;
}
/* Cabeceras de día de la semana (LUN, MAR...) — sin fondo ni caja */
.pl-modal .litepicker .container__days .day-item.day-name {
  background-color: transparent !important;
  border-radius: 0 !important;
  height: auto !important;
  padding: var(--spacing-3) 0 !important;
  font-size: var(--text-xs) !important;
  text-transform: uppercase !important;
  text-align: center !important;
  color: var(--text-neutral-dark) !important;
  cursor: default !important;
}
.pl-modal .litepicker .container__days .day-item {
  background-color: var(--background-neutral-extra-weak) !important;
  border-radius: var(--radius-sm) !important;
  border: none !important;
  color: var(--text-neutral-default) !important;
  height: var(--spacing-9) !important;
  padding: var(--spacing-3) !important;
  text-align: left !important;
  display: block !important;
}
/* Dias bloqueados: main.css les pone `border: 3px solid white !important` y un
   :hover gris oscuro, herencia del buscador clasico. La maqueta no lleva bordes:
   se anulan y se deja solo el numero apagado sobre celda blanca. */
.pl-modal .litepicker .container__days .day-item.is-locked,
.pl-modal .litepicker .container__days .day-item.is-locked:hover,
.pl-modal .litepicker .container__days .day-item.is-in-range.is-locked,
.pl-modal .litepicker .container__days .day-item.is-in-range.is-locked:hover {
  border: none !important;
  background-color: var(--background-neutral-extra-weak) !important;
  color: var(--litepicker-is-locked-color) !important;
}
#searcher-modal .litepicker .container__days .day-item:hover:not(.is-locked) {
  background-color: var(--background-neutral-extra-weak) !important;
  box-shadow: inset 0 0 0 1px var(--litepicker-day-color-hover) !important;
  color: var(--litepicker-day-color-hover) !important;
  border: none !important;
}
.pl-modal .litepicker .container__days .day-item.is-locked {
  color: var(--litepicker-is-locked-color) !important;
}
.pl-modal .litepicker .container__days .day-item.is-today {
  font-weight: var(--font-bold) !important;
  color: var(--text-primary-default) !important;
}
.pl-modal .litepicker .container__days .day-item.is-start-date,
.pl-modal .litepicker .container__days .day-item.is-end-date {
  background-color: var(--background-primary-default) !important;
  color: var(--text-neutral-extra-weak) !important;
  border-radius: var(--radius-sm) !important;
}
.pl-modal .litepicker .container__days .day-item.is-in-range {
  background-color: var(--background-primary-selected-dark) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--text-primary-dark) !important;
}
/* Dias DISPONIBLES: contorno gris para que se distingan de los bloqueados, que solo
   cambiaban el color del numero. Con box-shadow y no con border para no mover la
   rejilla ni pisar el dotted de los alternativos. :not(:hover) deja paso al contorno
   del hover; con estos :not() esta regla pesaria mas que la de hover. */
.pl-modal .litepicker .container__days .day-item:not(.day-name):not(:empty):not(.is-locked):not(.is-alternative):not(.day-item-alternative):not(.is-start-date):not(.is-end-date):not(.is-in-range):not(:hover),
#searcher-dates-modal .container__days .day-item:not(.day-name):not(:empty):not(.is-locked):not(.is-alternative):not(.day-item-alternative):not(.is-start-date):not(.is-end-date):not(.is-in-range):not(:hover),
#searcher-dates-fh-modal .container__days .day-item:not(.day-name):not(:empty):not(.is-locked):not(.is-alternative):not(.day-item-alternative):not(.is-start-date):not(.is-end-date):not(.is-in-range):not(:hover) {
  box-shadow: inset 0 0 0 var(--border-width-1, 1px) var(--border-neutral-dark, #bdbdbd) !important;
}
/* is-alternative = PatternLab | day-item-alternative = BaleariaCalendarModule.js (producción)

   Los selectores con ID son para los dos modales full-screen de movil. Alli hay
   una regla `#searcher-dates-modal ... .day-item { border: none !important }`
   (los dias de la maqueta no llevan borde) que, al ir por ID, gana a cualquier
   regla por clases: el dia alternativo se quedaba SIN el dotted en movil. */
.pl-modal .litepicker .container__days .day-item.is-alternative,
.pl-modal .litepicker .container__days .day-item.day-item-alternative,
#searcher-dates-modal .container__days .day-item.is-alternative,
#searcher-dates-modal .container__days .day-item.day-item-alternative,
#searcher-dates-fh-modal .container__days .day-item.is-alternative,
#searcher-dates-fh-modal .container__days .day-item.day-item-alternative {
  border: var(--border-width-2) dotted var(--text-neutral-medium, #979797) !important;
}
/* Dia alternativo SELECCIONADO: sigue siendo dotted.
   Antes esta regla solo cambiaba el border-COLOR y daba por hecho que el estilo
   dotted seguiria puesto. Basta con que otra regla declare el atajo `border`
   (solido) con mas peso para perderlo: al seleccionar, el dia pasaba a borde
   continuo y dejaba de distinguirse de uno normal. Se declara el borde ENTERO.

   Se repite para los dos modales full-screen de movil, que no cuelgan de
   .pl-modal .litepicker y ademas llevan sus propias reglas de dia seleccionado
   con !important (ver #searcher-dates-modal ... .is-start-date). */
.pl-modal .litepicker .container__days .day-item.is-alternative.is-start-date,
.pl-modal .litepicker .container__days .day-item.is-alternative.is-end-date,
.pl-modal .litepicker .container__days .day-item.day-item-alternative.is-start-date,
.pl-modal .litepicker .container__days .day-item.day-item-alternative.is-end-date,
#searcher-dates-modal .container__days .day-item.is-alternative.is-start-date,
#searcher-dates-modal .container__days .day-item.is-alternative.is-end-date,
#searcher-dates-modal .container__days .day-item.day-item-alternative.is-start-date,
#searcher-dates-modal .container__days .day-item.day-item-alternative.is-end-date,
#searcher-dates-fh-modal .container__days .day-item.is-alternative.is-start-date,
#searcher-dates-fh-modal .container__days .day-item.is-alternative.is-end-date,
#searcher-dates-fh-modal .container__days .day-item.day-item-alternative.is-start-date,
#searcher-dates-fh-modal .container__days .day-item.day-item-alternative.is-end-date {
  border: var(--border-width-2) dotted var(--border-primary-dark) !important;
}
@media (min-width: 1280px) {
  .pl-modal .litepicker .container__months.columns-2 {
    gap: var(--spacing-10) !important;
    width: calc(var(--litepicker-month-width) * 2 + var(--spacing-10)) !important;
  }
  .pl-modal .litepicker .container__days .day-item {
    height: var(--spacing-10) !important;
  }
}

/* ============================================================
   @media (min-width: 1024px) — PatternLab: searcher.css + counter.css
   ============================================================ */
@media (min-width: 1024px) {
  /* searcher__counters: 2 columnas + border-radius */
  .pl-modal .searcher__counters {
    grid-template-columns: repeat(2, 1fr);
    border-radius: var(--radius-sm);
  }
  .pl-modal .searcher__counters--vertical {
    grid-template-columns: repeat(1, 1fr);
  }

  /* searcher__ctas: sin padding horizontal, row en modo horizontal */
  .pl-modal .searcher__ctas {
    padding: var(--spacing-6) 0;
  }
  .pl-modal .searcher__ctas--horizontal {
    flex-direction: row;
    gap: var(--spacing-8);
  }
  .pl-modal .searcher__ctas--horizontal .searcher__cta:first-child {
    flex-grow: 1;
  }

  /* searcher__cta: horizontal con items en fila */
  .pl-modal .searcher__cta {
    flex-direction: row;
    align-items: center;
    padding: var(--spacing-3) 0 var(--spacing-6);
  }
  .pl-modal .searcher__cta-caption {
    flex-grow: 0;
  }

  /* counter: padding corregido + caption en fila */
  .pl-modal .counter {
    padding: var(--spacing-5);
  }
  .pl-modal .counter__caption {
    flex-wrap: wrap;
    flex-direction: row;
    row-gap: var(--spacing-2);
    column-gap: var(--spacing-3);
    align-items: baseline;
  }
  .pl-modal .counter__title {
    font-size: var(--text-base);
  }
  .pl-modal .counter__subtitle {
    order: 1;
    flex: 1 1 100%;
  }
}

/* ============================================================
   LINK (Añadir bonificación)
   Fuente: atoms/links.css
   ============================================================ */
.pl-modal .link--primary { color: var(--link-primary-default); }
.pl-modal .link--primary:hover { color: var(--link-primary-active); }

/* ============================================================
   CHIP (Bonificación seleccionada)
   Fuente: molecules/chip.css
   ============================================================ */
.pl-modal .chip {
  align-items: center;
  background-color: var(--background-primary-selected-dark);
  border-radius: var(--radius-full);
  color: var(--text-primary-default);
  display: inline-flex;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  gap: var(--spacing-3);
  padding: var(--spacing-2) var(--spacing-4);
  max-width: 100%;
}
.pl-modal .chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.pl-modal .chip__action {
  color: var(--icon-primary-default);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.pl-modal .chip__action svg { width: var(--spacing-6); height: var(--spacing-6); }
.pl-modal .chip__action:hover { opacity: 0.7; }
.pl-modal .searcher__cta-botton { padding-top: var(--spacing-3); }

/* Utilities */
.pl-modal .w-full { width: 100%; }
@media (min-width: 640px) { .pl-modal .sm-w-auto { width: auto !important; } }
.pl-modal .flex { display: flex; }
.pl-modal .flex-grow { flex-grow: 1; }
.pl-modal .flex-col { flex-direction: column; }
.pl-modal .flex-shrink-0 { flex-shrink: 0; }
.pl-modal .items-center { align-items: center; }
.pl-modal .gap-2 { gap: var(--spacing-2); }
.pl-modal .gap-3 { gap: var(--spacing-3); }
.pl-modal .p-5 { padding: var(--spacing-5); }
.pl-modal .w-6 { width: var(--spacing-6); }
.pl-modal .h-6 { height: var(--spacing-6); }
.pl-modal .font-semibold { font-weight: var(--font-semibold); }
@media (min-width: 1024px) { .pl-modal .lg-px-0 { padding-left: 0; padding-right: 0; } }

/* counter__icon (vehicle subcategory counters) */
.pl-modal .counter__icon {
  width: var(--spacing-6);
  height: var(--spacing-6);
  flex-shrink: 0;
  color: var(--icon-primary-default);
}
/* searcher__counters--vertical: siempre 1 col */
.pl-modal .searcher__counters--vertical {
  grid-template-columns: repeat(1, 1fr) !important;
}
/* heading (pets info) */
.pl-modal .heading--sm { font-size: var(--text-sm); line-height: 1.5; }

/* VEHICLE: right panel with subcategory counters */
.pl-modal .searcher__dropdown-content-right--double {
  flex: 2 !important;
  overflow: hidden;
  display: none;
}
.pl-modal .searcher__dropdown-content-right--double.is-visible {
  display: grid;
}
.pl-modal .searcher__dropdown-content-right--double [data-panel-id] { display: none; }
.pl-modal .searcher__dropdown-content-right--double [data-panel-id].is-active { display: grid; }
/* bottom-bar--no-border */
.pl-modal .bottom-bar--no-border { border-top: none; }

/* ============================================================
   LITEPICKER — empty padding cells + weekday divs (transparent, sin box)
   ============================================================ */
/* Celdas vacías de relleno al inicio/final del mes */
.pl-modal .litepicker .container__days .day-item[data-time=""],
.pl-modal .litepicker .container__days .day-item:empty {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  cursor: default !important;
  color: transparent !important;
}

/* ============================================================
   MASCOTAS — input siempre visible (baleariaSearcherModule oculta tanto #mascot_dropdown
   (el wrapper .g-dropdown-click) como #mascot_click (el input-search) con d-none
   basándose en si la ruta permite mascotas, pero el nuevo diseño los muestra siempre)
   ============================================================ */
#pl-col-pets #mascot_dropdown { display: block !important; }
#pl-col-pets #mascot_click { display: flex !important; }

/* ============================================================
   DROPDOWN FECHAS — se ancla por la izquierda de la columna y
   se extiende a la derecha según el contenido (calendario 2 meses)
   left: 0 = borde izq de la columna dates; right: auto cancela el
   right: 0 heredado de .searcher__dropdown base
   ============================================================ */
#pl-dropdown-dates,
#pl-dropdown-dates-fh,
#pl-dropdown-dates-h {
  left: 0;
  right: auto;
}

/* ============================================================
   DROPDOWN WIDTHS — Pasajeros / Vehículo / Mascotas
   Ancla: .g-dropdown-click (position: relative) = la propia columna
   100% = ancho de la columna (1/6 del row de inputs)
   right: -7rem → extiende hasta el borde derecho del form (btn Buscar + gap)
   width: 4/6 × col_width + 7rem → izquierda en col Fechas, derecha en form right
   ============================================================ */
#pl-dropdown-passengers,
#pl-dropdown-vehicle,
#pl-dropdown-pets {
  right: -7rem;
}

/* ============================================================
   VEHÍCULO — remap g-dropdown--list-radiobtn → list-menu PatternLab
   El módulo inyecta select_vehicle.jsp en .g-dropdown-click--vehicle.
   ============================================================ */

/* Lista principal de tipos de vehículo */
#pl-dropdown-vehicle .g-dropdown--list-radiobtn {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  background-color: var(--background-neutral-extra-weak);
  overflow-y: auto;
  max-height: 280px;
}
#pl-dropdown-vehicle .g-dropdown--list-radiobtn .item {
  padding: 0;
  border-bottom: var(--border-width-1) solid var(--neutral-20);
}
#pl-dropdown-vehicle .g-dropdown--list-radiobtn .item:last-child { border-bottom: none; }

/* label radio → full-width flex row: icon + text + checkmark right */
#pl-dropdown-vehicle .g-radiobtn {
  display: flex !important;
  align-items: center;
  gap: var(--spacing-3);
  padding: var(--spacing-4) var(--spacing-5);
  cursor: pointer;
  width: 100%;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  color: var(--text-neutral-default);
  position: relative;
}
#pl-dropdown-vehicle .g-radiobtn:hover { background-color: var(--background-neutral-weak); }
/* Icono del vehículo */
#pl-dropdown-vehicle .g-radiobtn [class^="icon-"],
#pl-dropdown-vehicle .g-radiobtn [class*=" icon-"] {
  font-size: 1.25rem;
  color: var(--icon-primary-default);
  flex-shrink: 0;
  margin: 0 !important;
  padding: 0 !important;
}
/* Ocultar el input real */
#pl-dropdown-vehicle .g-radiobtn input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
/* Checkmark circular — PatternLab style, push to right */
#pl-dropdown-vehicle .g-radiobtn--checkmark {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: var(--spacing-5);
  height: var(--spacing-5);
  min-width: var(--spacing-5);
  border: var(--border-width-2) solid var(--neutral-40);
  border-radius: 50%;
  margin-left: auto;
  background-color: var(--neutral-0);
  flex-shrink: 0;
}
#pl-dropdown-vehicle .g-radiobtn input[type="radio"]:checked ~ .g-radiobtn--checkmark {
  border-color: var(--border-primary-default);
  background-color: var(--background-primary-default);
  box-shadow: inset 0 0 0 3px var(--neutral-0);
}

/* Botones Cancelar / Confirmar */
#pl-dropdown-vehicle .g-dropdown-click--vehicle__btn {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-3);
  padding: var(--spacing-4) var(--spacing-5);
  background-color: var(--background-neutral-weak);
}
#pl-dropdown-vehicle #cancel_vehicle {
  background-color: transparent;
  border: var(--border-width-1) solid var(--border-primary-default);
  color: var(--text-primary-default);
  border-radius: var(--radius-sm);
  padding: var(--spacing-2) var(--spacing-4);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  cursor: pointer;
}
#pl-dropdown-vehicle #confirm_vehicle {
  background-color: var(--background-primary-default);
  border: var(--border-width-2) solid var(--border-primary-default);
  color: var(--text-neutral-extra-weak);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
#pl-dropdown-vehicle #confirm_vehicle:disabled {
  background-color: var(--background-neutral-disabled);
  border-color: var(--neutral-40);
  cursor: default;
}

/* ============================================================
   VEHÍCULO — panel derecho promo (estado por defecto: Sin vehículo)
   ============================================================ */
.pl-modal .searcher__vehicle-promo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 12rem;
  padding: var(--spacing-6) var(--spacing-5);
  gap: var(--spacing-4);
  text-align: center;
}
.pl-modal .searcher__vehicle-promo-icon {
  width: 4rem;
  height: 4rem;
  color: var(--icon-primary-default);
}
.pl-modal .searcher__vehicle-promo-text {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  color: var(--text-neutral-default);
}

/* ============================================================
   MASCOTAS — bloque informativo (reemplaza utility classes Bootstrap-conflicting)
   ============================================================ */
.pl-modal .searcher__pets-info {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
  padding: var(--spacing-5);
}
@media (min-width: 1024px) {
  .pl-modal .searcher__pets-info {
    padding-left: 0;
    padding-right: 0;
  }
}
.pl-modal .searcher__pets-info-icon {
  width: 2.25rem;
  height: 2.25rem;
  flex-shrink: 0;
}
.pl-modal .searcher__pets-info-text {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-2);
  flex-grow: 1;
}

/* ============================================================
   RESPONSIVE — fixes derivados de auditoría PatternLab
   ============================================================ */

/* --- Mobile base (< 1024px) --- */

/* P1: Searcher ocupa toda la altura del viewport en móvil */
.pl-modal .searcher {
  height: 100%;
  padding-bottom: var(--spacing-5);
}

/* Respiro del buscador con la modal abierta.
   Va con .is-open y despues de las otras dos reglas .pl-modal .searcher (esta
   misma y la de mas arriba) a proposito: la de aqui encima ya fija un
   padding-bottom, asi que hace falta mas especificidad (0-3-0 frente a 0-2-0)
   para no depender del orden del fichero. */
.pl-modal.is-open .searcher {
  padding-top: 2rem;
  padding-bottom: 4rem;
}

/* P6: Header del searcher (back/close móvil) — ocultar en desktop */
/* En móvil se muestra para navegación; en desktop el .pl-modal__close lo reemplaza */
.pl-modal .searcher__header {
  display: flex;
}


/* --- Desktop (≥ 1024px) --- */
@media (min-width: 1024px) {

  /* P1: Searcher vuelve a altura natural en desktop */
  .pl-modal .searcher {
    height: auto;
    padding-bottom: 0;
  }

  /* P6: Ocultar header de navegación móvil en desktop */
  .pl-modal .searcher__header {
    display: none;
  }

  /* P2: Counter — layout desktop (título crece, subtítulo reordena, caption en fila) */
  .pl-modal .counter {
    padding: var(--spacing-5);
  }
  .pl-modal .counter__caption {
    flex-direction: row;
    flex-wrap: wrap;
    column-gap: var(--spacing-3);
    row-gap: var(--spacing-1);
    align-items: baseline;
  }
  .pl-modal .counter__title {
    font-size: var(--text-base);
  }
  .pl-modal .counter__subtitle {
    order: 1;
    flex: 1 1 100%;
  }

  /* P8: CTAs (Bonificación/Residente) — horizontal en desktop */
  .pl-modal .searcher__ctas {
    padding: var(--spacing-6) 0;
  }
  .pl-modal .searcher__cta {
    flex-direction: row;
    align-items: center;
    padding-bottom: var(--spacing-5);
  }
  /* search-bar__links (código promo) — visible solo en desktop */
  .pl-modal .search-bar__links {
    display: flex;
  }
}

/* --- Tablet ancho (≥ 1280px) --- */
@media (min-width: 1280px) {
  /* P10: Litepicker — variables de tamaño de celda en pantallas grandes */
  :root {
    --litepicker-day-width: var(--spacing-11);
    --litepicker-month-width: calc(var(--litepicker-day-width) * 7 + 0.125rem * 6);
  }
}

/* ============================================================
   MODAL LOADER — z-index por encima del buscador (pl-modal: 9999)
   !important necesario: formenteraExpress tiene z-index:1051!important
   sobre #modal-loader que gana sin !important en nuestra regla.
   ============================================================ */
#modal-loader.is-open {
  position: fixed !important;
  inset: 0;
  z-index: 10000 !important;
  display: block;
}

/* ============================================================
   MODALES QUE ABRE EL MOTOR AL CORTAR LA BUSQUEDA
   ------------------------------------------------------------
   Cuando baleariaSearcherModule hace `continueSubmit = false` abre uno de
   estos modales en lugar de buscar. Vienen del tema con z-index 1200, muy por
   debajo del buscador del rediseno (#searcher-modal: 9999), asi que en MOBILE
   se abrian DETRAS del propio buscador: el usuario pulsaba Buscar y no veia
   nada, ni el modal ni error alguno. En desktop no pasaba porque la barra es
   inline y no hay ninguna capa por encima.

   Se suben por encima del buscador, igual que ya se hacia con #modal-loader.
   ============================================================ */
#modal-redireccion-funnel-marruecos.is-open,
#modal-redireccion-funnel-argelia.is-open,
#modal-error-marca-modelo.is-open,
#modal-excursiones-tarifa-tanger.is-open,
#modal-aviso-reserva-dia.is-open {
  position: fixed !important;
  inset: 0;
  z-index: 10001 !important;
  display: block;
}

/* Botón X de clickItemShowTextInputOrigin.js — no visible en nuevo diseño */
#searcher-modal #reset-route-origin-button,
#searcher-modal #reset-route-origin-button-fh {
  display: none !important;
}

/* ============================================================
   MODAL DE MONEDA (#currency-modal)
   Fuente: organisms/modal.css + molecules/top-bar.css +
           molecules/list-menu.css + molecules/fields.css + atoms/radio.css
   ============================================================ */

/* --- dialog base: PatternLab modal.css, con !important para ganar a Bootstrap --- */
#currency-modal {
  --modal-size: 28rem;
  font-family: var(--font-primary) !important;
  background-color: var(--background-neutral-extra-weak) !important;
  border: none !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  box-shadow: var(--shadow-md);
  display: none !important;
  flex-direction: column;
  height: min-content !important;
  inset-block-end: 0;
  inset-block-start: auto;
  max-height: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: fixed !important;
  width: 100% !important;
}
#currency-modal[open] {
  display: flex !important;
}
/* Desktop (640px+): centrado y tamaño fijo */
@media (min-width: 640px) {
  #currency-modal {
    border-radius: var(--radius-md) !important;
    inset-block-end: 0;
    inset-block-start: 0;
    max-height: calc(100% - var(--spacing-7)) !important;
    max-width: min(calc(100% - var(--spacing-7)), var(--modal-size)) !important;
  }
}
#currency-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.4);
}

/* --- modal__close --- */
#currency-modal .modal__close {
  position: absolute;
  right: var(--spacing-5);
  top: var(--spacing-5);
  z-index: 1;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-neutral-default);
  padding: 0;
  display: flex;
  align-items: center;
}
#currency-modal .modal__close svg {
  width: var(--spacing-6);
  height: var(--spacing-6);
}

/* --- top-bar --- */
#currency-modal .top-bar {
  border-bottom: var(--border-width-1) solid var(--border-neutral-default);
  display: flex;
  align-items: center;
  gap: var(--spacing-5);
  padding: var(--spacing-5) var(--spacing-9) var(--spacing-5) var(--spacing-5);
  min-height: var(--spacing-10);
}
#currency-modal .top-bar__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  flex-grow: 1;
}
#currency-modal .heading--base {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}

/* --- modal__body / modal__content --- */
#currency-modal .modal__body {
  overflow-y: auto;
  display: flex;
  width: 100%;
}
#currency-modal .modal__body--no-padding {
  padding: 0;
}
#currency-modal .modal__content {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  width: 100%;
}

/* --- list-menu --- */
#currency-modal .list-menu {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
#currency-modal .list-menu__item {
  padding: var(--spacing-5);
  border-bottom: var(--border-width-1) solid var(--border-neutral-default);
  min-height: var(--spacing-9);
  display: flex;
  align-items: center;
}
#currency-modal .list-menu__item:last-child {
  border-bottom: none;
}

/* --- field--radio --- */
#currency-modal .field {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-4);
  align-items: center;
  width: 100%;
}
#currency-modal .field__label {
  color: var(--text-neutral-default);
  font-size: var(--text-sm);
  position: static;
  transform: none;
  pointer-events: auto;
}
#currency-modal .field--bold .field__label {
  font-weight: var(--font-semibold);
}

/* --- radio--sm (fuente: atoms/radio.css) --- */
#currency-modal .radio {
  accent-color: var(--background-primary-default);
  appearance: none;
  background-color: var(--background-neutral-extra-weak);
  border-radius: var(--radius-full);
  border: var(--border-width-1) solid var(--border-neutral-dark);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color var(--transition-fast), border-width var(--transition-fast), background-color var(--transition-fast);
}
#currency-modal .radio--sm {
  height: var(--spacing-5);
  width: var(--spacing-5);
}
#currency-modal .radio--sm:checked {
  background-color: var(--background-neutral-extra-weak);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='6' r='6' transform='matrix(1 0 0 -1 0 12)' fill='%23008193'/%3E%3C/svg%3E%0A");
  background-position: center;
  background-repeat: no-repeat;
  border-color: var(--border-primary-default);
}
#currency-modal .radio--sm:hover:not(:checked) {
  border-color: var(--border-primary-default);
  border-width: var(--border-width-3);
}

/* ============================================================
   MODAL DE CÓDIGO PROMOCIONAL (#promo-code-modal)
   Fuente: organisms/modal.css + molecules/top-bar.css +
           molecules/buttons.css + atoms/inputs.css + atoms/fields.css
   ============================================================ */

/* --- Bonus modal ---
   Centrado nativo: <dialog> usa margin: auto por defecto → no sobreescribir position/inset.
   Solo se estilan dimensiones, fuente y componentes internos. */
#add-passenger-bonus-modal {
  font-family: var(--font-primary) !important;
  border: none;
  border-radius: var(--radius-md);
  padding: 0;
  width: min(26rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 4rem);
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
  position: relative; /* no sobreescribir el top-layer del dialog */
}
#add-passenger-bonus-modal::backdrop {
  background: rgba(0, 0, 0, 0.4);
}
#add-passenger-bonus-modal .modal__close {
  position: absolute; top: var(--spacing-4); right: var(--spacing-4);
  background: none; border: none; cursor: pointer; padding: var(--spacing-2);
  color: var(--text-neutral-default); width: 2rem; height: 2rem;
  display: flex; align-items: center; justify-content: center;
}
#add-passenger-bonus-modal .modal__close svg { width: 1.25rem; height: 1.25rem; }
#add-passenger-bonus-modal .top-bar {
  display: flex; align-items: center;
  padding: var(--spacing-5) var(--spacing-10) var(--spacing-5) var(--spacing-5);
  border-bottom: var(--border-width-1) solid var(--border-neutral-default);
  min-height: var(--spacing-10);
}
#add-passenger-bonus-modal .heading--base {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}
#add-passenger-bonus-modal .modal__body--no-padding { padding: 0; }
#add-passenger-bonus-modal .modal__content { width: 100%; }
#add-passenger-bonus-modal .list-menu { list-style: none; margin: 0; padding: 0; }
#add-passenger-bonus-modal .list-menu__item {
  border-bottom: var(--border-width-1) solid var(--border-neutral-default);
}
#add-passenger-bonus-modal .list-menu__item:last-child { border-bottom: none; }
#add-passenger-bonus-modal .field--radio {
  display: flex; align-items: center; gap: var(--spacing-3);
  margin: 0;
}
#add-passenger-bonus-modal .field__label {
  color: var(--text-neutral-default);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  position: static; transform: none; pointer-events: auto;
}
#add-passenger-bonus-modal .radio--sm {
  accent-color: var(--background-primary-default);
  appearance: none;
  background-color: var(--background-neutral-extra-weak);
  border-radius: var(--radius-full);
  border: var(--border-width-1) solid var(--border-neutral-dark);
  cursor: pointer; flex-shrink: 0;
  height: var(--spacing-5); width: var(--spacing-5);
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}
#add-passenger-bonus-modal .radio--sm:checked {
  background-color: var(--background-neutral-extra-weak);
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='6' r='6' transform='matrix(1 0 0 -1 0 12)' fill='%23008193'/%3E%3C/svg%3E");
  background-position: center; background-repeat: no-repeat;
  border-color: var(--border-primary-default);
}

/* --- dialog base (mismo patrón que #currency-modal) --- */
#promo-code-modal {
  --modal-size: 28rem;
  font-family: var(--font-primary) !important;
  background-color: var(--background-neutral-extra-weak) !important;
  border: none !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  box-shadow: var(--shadow-md);
  display: none !important;
  flex-direction: column;
  height: min-content !important;
  inset-block-end: 0;
  inset-block-start: auto;
  max-height: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: fixed !important;
  width: 100% !important;
}
#promo-code-modal[open] {
  display: flex !important;
}
@media (min-width: 640px) {
  #promo-code-modal {
    border-radius: var(--radius-md) !important;
    inset-block-end: 0;
    inset-block-start: 0;
    max-height: calc(100% - var(--spacing-7)) !important;
    max-width: min(calc(100% - var(--spacing-7)), var(--modal-size)) !important;
  }
}
#promo-code-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.4);
}

/* --- modal__close --- */
#promo-code-modal .modal__close {
  position: absolute;
  right: var(--spacing-5);
  top: var(--spacing-5);
  z-index: 1;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-neutral-default);
  padding: 0;
  display: flex;
  align-items: center;
}
#promo-code-modal .modal__close svg {
  width: var(--spacing-6);
  height: var(--spacing-6);
}

/* --- top-bar --- */
#promo-code-modal .top-bar {
  border-bottom: var(--border-width-1) solid var(--border-neutral-default);
  display: flex;
  align-items: center;
  gap: var(--spacing-5);
  padding: var(--spacing-5) var(--spacing-9) var(--spacing-5) var(--spacing-5);
  min-height: var(--spacing-10);
}
#promo-code-modal .top-bar__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  flex-grow: 1;
}
#promo-code-modal .heading--base {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}

/* --- modal__body / modal__content --- */
#promo-code-modal .modal__body {
  overflow-y: auto;
  display: flex;
  width: 100%;
  padding: var(--spacing-5);
}
#promo-code-modal .modal__content {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  width: 100%;
}

/* --- field--input (floating label) — fuente: atoms/inputs.css + molecules/fields.css --- */
#promo-code-modal .field__wrapper {
  position: relative;
}
#promo-code-modal .input {
  background-color: var(--background-neutral-extra-weak);
  border-color: var(--border-neutral-dark);
  border-radius: var(--radius-sm);
  border-style: solid;
  border-width: var(--border-width-1);
  color: var(--text-neutral-default);
  font-size: var(--text-sm);
  height: var(--spacing-9);
  outline: none;
  padding: 0.719rem var(--spacing-5);
  transition: all var(--transition-fast);
  width: 100%;
}
#promo-code-modal .input::placeholder {
  color: transparent;
}
#promo-code-modal .input:focus {
  border-color: var(--border-primary-default);
  box-shadow: var(--shadow-xs);
}
/* Confirmar sin código (plPromoError). */
#promo-code-modal .input.is-invalid,
#promo-code-modal .input.is-invalid:focus {
  border-color: var(--border-danger-default, #d93025);
}
#promo-code-modal .pl-promo-error {
  color: var(--text-error-default, #d93025);
  font-size: var(--text-xs);
  margin: var(--spacing-2) 0 0;
}
#promo-code-modal .pl-promo-error[hidden] {
  display: none;
}
#promo-code-modal .field__label {
  color: var(--text-neutral-medium);
  font-size: var(--text-sm);
  left: var(--spacing-5);
  pointer-events: none;
  position: absolute;
  top: 24px;
  transform: translateY(-50%);
  transition: all var(--transition-fast);
}
/* Floating label: sube cuando el input tiene foco o valor */
#promo-code-modal .field--input:has(.input:focus) .field__label,
#promo-code-modal .field--input:has(.input:not(:placeholder-shown)) .field__label {
  top: var(--spacing-3);
  transform: translateY(0);
  color: var(--text-neutral-dark);
  font-size: var(--text-xxs);
  text-transform: uppercase;
}
#promo-code-modal .field--input:has(.input:focus) .input,
#promo-code-modal .field--input:has(.input:not(:placeholder-shown)) .input {
  padding-top: 1.25rem;
  padding-bottom: 0.375rem;
}

/* --- bottom-bar --- */
#promo-code-modal .bottom-bar {
  border-top: var(--border-width-1) solid var(--border-neutral-default);
  display: flex;
  justify-content: flex-end;
  padding: var(--spacing-5);
  gap: var(--spacing-3);
}
#promo-code-modal .bottom-bar .btn { flex-shrink: 1; min-width: 0; }

/* --- btn base + variantes (scoped a #promo-code-modal) --- */
#promo-code-modal .btn {
  align-items: center;
  background-color: transparent;
  border-radius: var(--radius-sm);
  border-style: solid;
  border-width: var(--border-width-2);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-primary) !important;
  font-weight: var(--font-semibold);
  justify-content: center;
  outline: none;
  text-decoration: none;
  transition: all var(--transition-fast);
}
#promo-code-modal .btn--lg {
  font-size: var(--text-base);
  gap: var(--spacing-3);
  height: var(--spacing-9);
  padding-left: var(--spacing-6);
  padding-right: var(--spacing-6);
}
#promo-code-modal .btn--primary {
  background-color: var(--background-primary-default);
  border-color: var(--border-primary-default);
  color: var(--text-neutral-extra-weak);
}
#promo-code-modal .btn--primary:hover {
  background-color: var(--background-primary-dark);
  border-color: var(--border-primary-dark);
}
#promo-code-modal .btn--ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--text-primary-default);
}
#promo-code-modal .btn--ghost:hover {
  color: var(--text-primary-dark);
}

/* ============================================================
   #modal-error-carnet-joven — Modal de error Bonus J
   Estructura PatternLab: modal--lg (32rem), sin top-bar ni X.
   ============================================================ */

/* --- dialog base --- */
#modal-error-carnet-joven {
  --modal-size: 32rem;
  font-family: var(--font-primary) !important;
  background-color: var(--background-neutral-extra-weak) !important;
  border: none !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  box-shadow: var(--shadow-md);
  display: none !important;
  flex-direction: column;
  height: min-content !important;
  inset-block-end: 0;
  inset-block-start: auto;
  max-height: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: fixed !important;
  width: 100% !important;
}
#modal-error-carnet-joven[open] {
  display: flex !important;
}
@media (min-width: 640px) {
  #modal-error-carnet-joven {
    border-radius: var(--radius-md) !important;
    inset-block-end: 0;
    inset-block-start: 0;
    max-height: calc(100% - var(--spacing-7)) !important;
    max-width: min(calc(100% - var(--spacing-7)), var(--modal-size)) !important;
  }
}
#modal-error-carnet-joven::backdrop {
  background-color: rgba(0, 0, 0, 0.4);
}

/* --- modal__body / modal__content --- */
#modal-error-carnet-joven .modal__body {
  overflow-y: auto;
  display: flex;
  width: 100%;
  padding: var(--spacing-6);
}
#modal-error-carnet-joven .modal__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  margin: 0 !important;
  width: 100%;
}

/* --- stack icono + título --- */
#modal-error-carnet-joven .ecj-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}
#modal-error-carnet-joven .ecj-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
}

/* --- heading--xl (PatternLab, no definida en CSS base) --- */
#modal-error-carnet-joven .heading--xl {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  line-height: 1.3;
  color: var(--text-neutral-default);
  margin: 0;
}

/* --- párrafo cuerpo --- */
#modal-error-carnet-joven .ecj-body {
  font-size: var(--text-sm);
  color: var(--text-neutral-default);
  line-height: 1.6;
  margin: 0;
}
/* Separación visual entre las dos frases del <br> del literal */
#modal-error-carnet-joven .ecj-body br {
  display: block;
  content: '';
  margin-bottom: var(--spacing-3);
}

/* --- bottom-bar --- */
#modal-error-carnet-joven .bottom-bar {
  border-top: var(--border-width-1) solid var(--border-neutral-default);
  display: flex;
  justify-content: flex-end;
  padding: var(--spacing-5);
  gap: var(--spacing-3);
}

/* --- btn (scoped) --- */
#modal-error-carnet-joven .btn {
  align-items: center;
  background-color: transparent;
  border-radius: var(--radius-sm);
  border-style: solid;
  border-width: var(--border-width-2);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-primary) !important;
  font-weight: var(--font-semibold);
  justify-content: center;
  outline: none;
  text-decoration: none;
  transition: all var(--transition-fast);
}
#modal-error-carnet-joven .btn--lg {
  font-size: var(--text-base);
  gap: var(--spacing-3);
  height: var(--spacing-9);
  padding-left: var(--spacing-6);
  padding-right: var(--spacing-6);
}
#modal-error-carnet-joven .btn--primary {
  background-color: var(--background-primary-default);
  border-color: var(--border-primary-default);
  color: var(--text-neutral-extra-weak);
}
#modal-error-carnet-joven .btn--primary:hover {
  background-color: var(--background-primary-dark);
  border-color: var(--border-primary-dark);
}
/* w-full en móvil, auto en sm+ */
#modal-error-carnet-joven .ecj-btn-full {
  width: 100%;
}
@media (min-width: 640px) {
  #modal-error-carnet-joven .ecj-btn-full {
    width: auto;
  }
}

/* ============================================================
   #modal-error-promotional-code — Código promocional no válido
   PatternLab: bc-templates-searcher-invalid-promo-code-modal. Misma caja que la
   de Carnet Joven (copiada con el id cambiado) + X, botón ghost y el párrafo de
   condiciones (#modal-error-promotional-code-p2) que inserta baleariaSearcherModule.
   ============================================================ */
/* --- dialog base --- */
#modal-error-promotional-code {
  --modal-size: 32rem;
  font-family: var(--font-primary) !important;
  background-color: var(--background-neutral-extra-weak) !important;
  border: none !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  box-shadow: var(--shadow-md);
  display: none !important;
  flex-direction: column;
  height: min-content !important;
  inset-block-end: 0;
  inset-block-start: auto;
  max-height: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: fixed !important;
  width: 100% !important;
}
#modal-error-promotional-code[open] {
  display: flex !important;
}
@media (min-width: 640px) {
  #modal-error-promotional-code {
    border-radius: var(--radius-md) !important;
    inset-block-end: 0;
    inset-block-start: 0;
    max-height: calc(100% - var(--spacing-7)) !important;
    max-width: min(calc(100% - var(--spacing-7)), var(--modal-size)) !important;
  }
}
#modal-error-promotional-code::backdrop {
  background-color: rgba(0, 0, 0, 0.4);
}

/* --- modal__body / modal__content --- */
#modal-error-promotional-code .modal__body {
  overflow-y: auto;
  display: flex;
  width: 100%;
  padding: var(--spacing-6);
}
#modal-error-promotional-code .modal__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  margin: 0 !important;
  width: 100%;
}

/* --- stack icono + título --- */
#modal-error-promotional-code .ecj-stack {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}
#modal-error-promotional-code .ecj-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
}

/* --- heading--xl (PatternLab, no definida en CSS base) --- */
#modal-error-promotional-code .heading--xl {
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  line-height: 1.3;
  color: var(--text-neutral-default);
  margin: 0;
}

/* --- párrafo cuerpo --- */
#modal-error-promotional-code .ecj-body {
  font-size: var(--text-sm);
  color: var(--text-neutral-default);
  line-height: 1.6;
  margin: 0;
}
/* Separación visual entre las dos frases del <br> del literal */
#modal-error-promotional-code .ecj-body br {
  display: block;
  content: '';
  margin-bottom: var(--spacing-3);
}

/* --- bottom-bar --- */
#modal-error-promotional-code .bottom-bar {
  border-top: var(--border-width-1) solid var(--border-neutral-default);
  display: flex;
  justify-content: flex-end;
  padding: var(--spacing-5);
  gap: var(--spacing-3);
}

/* --- btn (scoped) --- */
#modal-error-promotional-code .btn {
  align-items: center;
  background-color: transparent;
  border-radius: var(--radius-sm);
  border-style: solid;
  border-width: var(--border-width-2);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-primary) !important;
  font-weight: var(--font-semibold);
  justify-content: center;
  outline: none;
  text-decoration: none;
  transition: all var(--transition-fast);
}
#modal-error-promotional-code .btn--lg {
  font-size: var(--text-base);
  gap: var(--spacing-3);
  height: var(--spacing-9);
  padding-left: var(--spacing-6);
  padding-right: var(--spacing-6);
}
#modal-error-promotional-code .btn--primary {
  background-color: var(--background-primary-default);
  border-color: var(--border-primary-default);
  color: var(--text-neutral-extra-weak);
}
#modal-error-promotional-code .btn--primary:hover {
  background-color: var(--background-primary-dark);
  border-color: var(--border-primary-dark);
}
/* w-full en móvil, auto en sm+ */
#modal-error-promotional-code .ecj-btn-full {
  width: 100%;
}
@media (min-width: 640px) {
  #modal-error-promotional-code .ecj-btn-full {
    width: auto;
  }
}
#modal-error-promotional-code .modal__close {
  align-items: center;
  background: none;
  border: none;
  color: var(--text-neutral-default);
  cursor: pointer;
  display: flex;
  padding: 0;
  position: absolute;
  right: var(--spacing-5);
  top: var(--spacing-5);
  z-index: 1;
}
#modal-error-promotional-code .modal__close svg { height: var(--spacing-6); width: var(--spacing-6); }
#modal-error-promotional-code .btn--ghost {
  border-color: transparent;
  color: var(--text-primary-default);
}
#modal-error-promotional-code .btn--ghost:hover { background-color: var(--background-primary-extra-weak, rgba(0, 129, 147, .08)); }
/* Condiciones del código (las pide baleariaSearcherModule a /o/hexagonal/promocodeConditions
   cuando el código existe pero la búsqueda no las cumple): recuadro con scroll, el texto
   puede ser largo y los botones tienen que seguir a la vista. */
#modal-error-promotional-code #modal-error-promotional-code-p2,
#modal-error-promotional-code #modal-error-promotional-code-p2 * {
  font-family: var(--font-primary) !important;
}
#modal-error-promotional-code #modal-error-promotional-code-p2 {
  background-color: var(--background-neutral-weak);
  border-radius: var(--radius-sm);
  color: var(--text-neutral-default);
  font-size: var(--text-sm);
  line-height: 1.6;
  margin: 0;
  max-height: 40vh;
  overflow-y: auto;
  padding: var(--spacing-4) var(--spacing-5);
  text-align: left;
}
#modal-error-promotional-code #modal-error-promotional-code-p2 b {
  display: block;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  margin-bottom: var(--spacing-2);
}
#modal-error-promotional-code #modal-error-promotional-code-p2 b + br { display: none; }
@media (max-width: 639px) {
  #modal-error-promotional-code .bottom-bar { flex-direction: column-reverse; }
  #modal-error-promotional-code .bottom-bar .btn { width: 100%; }
}

/* ============================================================
   MULTITRAYECTO — Segunda fila del buscador PL
   #pl-multijourney-row: oculta por defecto, flex cuando tripMode="multiple"
   ============================================================ */

#pl-multijourney-row {
  display: none; /* JS pone display:flex cuando isMultiJourney=true */
  width: 100%;
  border-top: var(--border-width-1) solid var(--border-neutral-default);
  padding-top: var(--spacing-3);
  margin-top: var(--spacing-1);
  position: relative;
  z-index: 1; /* contexto propio: sus dropdowns flotan por encima del contenido de la modal */
}

#pl-multijourney-row .search-bar__inputs-row {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  flex: 1;
  align-items: stretch;
}

@media (min-width: 1024px) {
  /* En desktop, search-bar__form pasa a flex-row pero necesitamos que
     la segunda fila salte de línea y ocupe el ancho total */
  .pl-modal .search-bar__form {
    flex-wrap: wrap;
  }
  #pl-multijourney-row {
    /* Mismo ancho que .search-bar__inputs:
       el form completo menos el botón Buscar (≈7rem) menos el gap entre flex items */
    flex-basis: calc(100% - 7rem - var(--spacing-3));
    flex-shrink: 0;
  }
  #pl-multijourney-row .search-bar__inputs-row {
    flex-direction: row;
  }
  /* Cada columna MJ debe medir lo mismo que una columna de la 1ª fila.
     La 1ª fila tiene 6 columnas en el DOM, pero la de mascotas (#pl-bar-col-pets)
     esta en display:none salvo que el usuario viaje con mascota, y al no generarse
     tampoco consume gap: lo normal es que haya 5 columnas visibles repartiendose
     todo el ancho.

     La regla anterior dividia siempre entre 6, asi que los campos del 2o trayecto
     salian mas estrechos que los del 1o (168 px frente a 201). Se divide entre las
     que hay de verdad, y solo entre 6 cuando la columna de mascotas esta a la vista. */
  #pl-multijourney-row .search-bar__input-column {
    flex: 0 0 calc((100% - 4 * var(--spacing-3)) / 5) !important;
  }
  .search-bar__form:has(#pl-bar-col-pets.pl-pets-visible) #pl-multijourney-row .search-bar__input-column {
    flex: 0 0 calc((100% - 5 * var(--spacing-3)) / 6) !important;
  }
}

/* Botón eliminar segundo tramo */
.pl-mj-remove-wrap {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.pl-mj-remove-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-neutral-default);
  padding: var(--spacing-2);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-fast);
  flex-shrink: 0;
}
.pl-mj-remove-btn:hover {
  background-color: var(--background-neutral-weak);
}
.pl-mj-remove-btn svg {
  width: var(--spacing-5);
  height: var(--spacing-5);
}

/* Dropdown del 2º tramo — anclados a .search-bar__inputs-row (position:relative).
   top:calc(100%+spacing) los sitúa justo debajo de la fila de inputs MJ.
   width:100% = ancho completo de inputs-row MJ (sin botón Buscar → mismo que 1er tramo). */
.pl-modal #pl-dropdown-origin-mj,
.pl-modal #pl-dropdown-destination-mj {
  left: 0;
  right: auto;
  width: 100%;
}

/* Calendario 2º tramo — mismo auto-sizing que el del 1er tramo */
.pl-modal #pl-dropdown-dates-mj {
  left: 0;
  right: auto;
}

/* ============================================================
   MODALES EXTRAS VEHÍCULO: equipaje / portabicis / remolque
   ============================================================ */
#add-luggage-modal,
#add-bike-rack-modal,
#add-trailer-modal {
  --modal-size: 28rem;
  font-family: var(--font-primary) !important;
  background-color: var(--background-neutral-extra-weak) !important;
  border: none !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  box-shadow: var(--shadow-md);
  display: none !important;
  flex-direction: column;
  height: min-content !important;
  inset-block-end: 0;
  inset-block-start: auto;
  max-height: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: fixed !important;
  width: 100% !important;
}
#add-luggage-modal[open],
#add-bike-rack-modal[open],
#add-trailer-modal[open] {
  display: flex !important;
}
@media (min-width: 640px) {
  #add-luggage-modal,
  #add-bike-rack-modal,
  #add-trailer-modal {
    border-radius: var(--radius-md) !important;
    inset-block-end: 0;
    inset-block-start: 0;
    max-height: calc(100% - var(--spacing-7)) !important;
    max-width: min(calc(100% - var(--spacing-7)), var(--modal-size)) !important;
  }
}
#add-luggage-modal::backdrop,
#add-bike-rack-modal::backdrop,
#add-trailer-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.4);
}
#add-luggage-modal .modal__close,
#add-bike-rack-modal .modal__close,
#add-trailer-modal .modal__close {
  position: absolute;
  right: var(--spacing-5);
  top: var(--spacing-5);
  z-index: 1;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-neutral-default);
  padding: 0;
  display: flex;
  align-items: center;
}
#add-luggage-modal .modal__close svg,
#add-bike-rack-modal .modal__close svg,
#add-trailer-modal .modal__close svg {
  width: var(--spacing-6);
  height: var(--spacing-6);
}
#add-luggage-modal .top-bar,
#add-bike-rack-modal .top-bar,
#add-trailer-modal .top-bar {
  border-bottom: var(--border-width-1) solid var(--border-neutral-default);
  display: flex;
  align-items: center;
  gap: var(--spacing-5);
  padding: var(--spacing-5) var(--spacing-9) var(--spacing-5) var(--spacing-5);
  min-height: var(--spacing-10);
}
#add-luggage-modal .top-bar__content,
#add-bike-rack-modal .top-bar__content,
#add-trailer-modal .top-bar__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  flex-grow: 1;
}
#add-luggage-modal .heading--base,
#add-bike-rack-modal .heading--base,
#add-trailer-modal .heading--base {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}
#add-luggage-modal .modal__body,
#add-bike-rack-modal .modal__body,
#add-trailer-modal .modal__body {
  overflow-y: auto;
  display: flex;
  width: 100%;
}
#add-luggage-modal .modal__body--no-padding,
#add-bike-rack-modal .modal__body--no-padding,
#add-trailer-modal .modal__body--no-padding {
  padding: 0;
}
#add-luggage-modal .modal__content,
#add-bike-rack-modal .modal__content,
#add-trailer-modal .modal__content {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  width: 100%;
}
#add-luggage-modal .list-menu,
#add-bike-rack-modal .list-menu,
#add-trailer-modal .list-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
#add-luggage-modal .list-menu__item,
#add-bike-rack-modal .list-menu__item,
#add-trailer-modal .list-menu__item {
  border-bottom: var(--border-width-1) solid var(--border-neutral-default);
  padding: var(--spacing-4) var(--spacing-5);
}
#add-luggage-modal .list-menu__item:last-child,
#add-bike-rack-modal .list-menu__item:last-child,
#add-trailer-modal .list-menu__item:last-child {
  border-bottom: none;
}
#add-luggage-modal .field,
#add-bike-rack-modal .field,
#add-trailer-modal .field {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
  width: 100%;
}
#add-luggage-modal .field__label,
#add-bike-rack-modal .field__label,
#add-trailer-modal .field__label {
  color: var(--text-neutral-default);
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
}
#add-luggage-modal .field--bold .field__label,
#add-bike-rack-modal .field--bold .field__label,
#add-trailer-modal .field--bold .field__label {
  font-weight: var(--font-semibold);
}

/* ============================================================
   BASE GENÉRICA DE MODALES CENTRADOS (modal--md / modal--lg)
   Un <dialog> con showModal() entra al top-layer, pero el theme
   mantiene `.pl-modal .modal { display:none }` y el dialog nativo
   usa el atributo [open] (no la clase .is-open del patternlab),
   así que su contenido queda invisible mientras el ::backdrop
   bloquea TODOS los clics. Esta base por CLASE enciende el display
   segun [open] para todos los modales centrados (cupo, info,
   conditions, etc.) sin declararlos uno a uno.
   NO afecta a .modal--full (origin/dest/dates/pasajeros/mascotas)
   ni a los modales que solo se estilan por ID (currency/promo/...).
   ============================================================ */
.pl-modal-scope .modal--md { --modal-size: 28rem; }
.pl-modal-scope .modal--lg { --modal-size: 35.313rem; }

.pl-modal-scope dialog.modal--md,
.pl-modal-scope dialog.modal--lg {
  font-family: var(--font-primary) !important;
  background-color: var(--background-neutral-extra-weak) !important;
  border: none !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  box-shadow: var(--shadow-md);
  display: none !important;
  flex-direction: column;
  height: min-content !important;
  inset-block-end: 0;
  inset-block-start: auto;
  max-height: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: fixed !important;
  width: 100% !important;
}
.pl-modal-scope dialog.modal--md[open],
.pl-modal-scope dialog.modal--lg[open] {
  display: flex !important;
}
@media (min-width: 640px) {
  .pl-modal-scope dialog.modal--md,
  .pl-modal-scope dialog.modal--lg {
    border-radius: var(--radius-md) !important;
    inset-block-end: 0;
    inset-block-start: 0;
    max-height: calc(100% - var(--spacing-7)) !important;
    max-width: min(calc(100% - var(--spacing-7)), var(--modal-size)) !important;
  }
}
.pl-modal-scope dialog.modal--md::backdrop,
.pl-modal-scope dialog.modal--lg::backdrop {
  background-color: rgba(0, 0, 0, 0.4);
}
.pl-modal-scope dialog.modal--md .modal__close,
.pl-modal-scope dialog.modal--lg .modal__close {
  position: absolute;
  right: var(--spacing-5);
  top: var(--spacing-5);
  z-index: 1;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-neutral-default);
  padding: 0;
  display: flex;
  align-items: center;
}
.pl-modal-scope dialog.modal--md .modal__close svg,
.pl-modal-scope dialog.modal--lg .modal__close svg {
  width: var(--spacing-6);
  height: var(--spacing-6);
}
.pl-modal-scope dialog.modal--md .top-bar,
.pl-modal-scope dialog.modal--lg .top-bar {
  border-bottom: var(--border-width-1) solid var(--border-neutral-default);
  display: flex;
  align-items: center;
  gap: var(--spacing-5);
  padding: var(--spacing-5) var(--spacing-9) var(--spacing-5) var(--spacing-5);
  min-height: var(--spacing-10);
}
.pl-modal-scope dialog.modal--md .top-bar__content,
.pl-modal-scope dialog.modal--lg .top-bar__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  flex-grow: 1;
}
.pl-modal-scope dialog.modal--md .heading--base,
.pl-modal-scope dialog.modal--lg .heading--base {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}
.pl-modal-scope dialog.modal--md .modal__body,
.pl-modal-scope dialog.modal--lg .modal__body {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  width: 100%;
}
.pl-modal-scope dialog.modal--md .modal__content,
.pl-modal-scope dialog.modal--lg .modal__content {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  width: 100%;
}
.pl-modal-scope dialog.modal--md .bottom-bar,
.pl-modal-scope dialog.modal--lg .bottom-bar {
  border-top: var(--border-width-1) solid var(--border-neutral-default);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-4);
  padding: var(--spacing-5);
}

/* ============================================================
   MODALES HUB DE EXTRAS (modal--lg)
   add-vehicle-extras-modal / add-caravan-extras-modal.
   Sin estas reglas el <dialog> entra al top-layer (crea ::backdrop
   que bloquea los clics) pero su contenido queda en display:none.
   ============================================================ */
#add-vehicle-extras-modal,
#add-caravan-extras-modal {
  --modal-size: 35.313rem;
  font-family: var(--font-primary) !important;
  background-color: var(--background-neutral-extra-weak) !important;
  border: none !important;
  border-radius: var(--radius-md) var(--radius-md) 0 0 !important;
  box-shadow: var(--shadow-md);
  display: none !important;
  flex-direction: column;
  height: min-content !important;
  inset-block-end: 0;
  inset-block-start: auto;
  max-height: 100% !important;
  max-width: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: fixed !important;
  width: 100% !important;
}
#add-vehicle-extras-modal[open],
#add-caravan-extras-modal[open] {
  display: flex !important;
}
@media (min-width: 640px) {
  #add-vehicle-extras-modal,
  #add-caravan-extras-modal {
    border-radius: var(--radius-md) !important;
    inset-block-end: 0;
    inset-block-start: 0;
    max-height: calc(100% - var(--spacing-7)) !important;
    max-width: min(calc(100% - var(--spacing-7)), var(--modal-size)) !important;
  }
}
#add-vehicle-extras-modal::backdrop,
#add-caravan-extras-modal::backdrop {
  background-color: rgba(0, 0, 0, 0.4);
}
#add-vehicle-extras-modal .modal__close,
#add-caravan-extras-modal .modal__close {
  position: absolute;
  right: var(--spacing-5);
  top: var(--spacing-5);
  z-index: 1;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-neutral-default);
  padding: 0;
  display: flex;
  align-items: center;
}
#add-vehicle-extras-modal .modal__close svg,
#add-caravan-extras-modal .modal__close svg {
  width: var(--spacing-6);
  height: var(--spacing-6);
}
#add-vehicle-extras-modal .top-bar,
#add-caravan-extras-modal .top-bar {
  border-bottom: var(--border-width-1) solid var(--border-neutral-default);
  display: flex;
  align-items: center;
  gap: var(--spacing-5);
  padding: var(--spacing-5) var(--spacing-9) var(--spacing-5) var(--spacing-5);
  min-height: var(--spacing-10);
}
#add-vehicle-extras-modal .top-bar__content,
#add-caravan-extras-modal .top-bar__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  flex-grow: 1;
}
#add-vehicle-extras-modal .heading--base,
#add-caravan-extras-modal .heading--base {
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}
#add-vehicle-extras-modal .modal__body,
#add-caravan-extras-modal .modal__body {
  overflow-y: auto;
  display: flex;
  width: 100%;
}
#add-vehicle-extras-modal .modal__content,
#add-caravan-extras-modal .modal__content {
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  width: 100%;
}
#add-vehicle-extras-modal .bottom-bar,
#add-caravan-extras-modal .bottom-bar {
  border-top: var(--border-width-1) solid var(--border-neutral-default);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--spacing-4);
  padding: var(--spacing-5);
}

/* ============================================================
   MODALES FULL-SCREEN MÓVIL — PatternLab dialog.modal pattern
   Solo activos en mobile (< 1024px). En desktop: display:none.
   ============================================================ */

/* --- Base del <dialog> --- */
#searcher-origin-modal {
  background: var(--background-neutral-extra-weak);
  border: none;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', var(--font-primary), sans-serif;
  height: 100%;
  inset: 0;
  margin: 0;
  max-height: 100%;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  position: fixed;
  width: 100%;
  z-index: var(--z-index-10);
}
#searcher-origin-modal:not([open]) { display: none; }

@media (min-width: 1024px) {
  #searcher-origin-modal { display: none !important; }
}

/* --- Inner layout PatternLab --- */
#searcher-origin-modal .modal__body {
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
  width: 100%;
}
#searcher-origin-modal .modal__content {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  overflow: hidden;
  width: 100%;
}
#searcher-origin-modal .searcher-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  width: 100%;
}

/* --- Header teal (background-primary-default = rgb(0,129,147)) --- */
#searcher-origin-modal .searcher-item__header {
  background-color: var(--background-primary-default);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
}
#searcher-origin-modal .searcher-item__header-content {
  align-items: center;
  display: flex;
  gap: var(--spacing-3);
}
#searcher-origin-modal .searcher-item__close-btn {
  background: none;
  border: none;
  color: var(--text-neutral-extra-weak);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: var(--spacing-6);
  padding: 0;
  width: var(--spacing-6);
}
#searcher-origin-modal .searcher-item__title {
  color: var(--text-neutral-extra-weak);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  margin: 0;
}

/* Input de búsqueda dentro del header */
#searcher-origin-modal .searcher-item__header .input-search {
  position: relative;
  width: 100%;
}
#searcher-origin-modal .searcher-item__header .input-search__icon {
  color: var(--icon-neutral-default);
  height: var(--spacing-6);
  left: var(--spacing-4);
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--spacing-6);
}
#searcher-origin-modal .searcher-item__header .input-search__input {
  background-color: var(--background-primary-weak);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-primary) !important;
  font-size: var(--text-sm);
  height: 3.5rem;
  outline: none;
  padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) var(--spacing-12);
  width: 100%;
}

/* --- Body scrollable (contendrá la lista de orígenes) --- */
#searcher-origin-modal .searcher-item__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

/* --- searcher__list dentro del modal (flex row: categorías | contenido) --- */
#searcher-origin-modal .searcher__list {
  display: flex;
  flex: 1;
  flex-direction: row;
  min-height: 0;
  overflow: hidden;
}
#searcher-origin-modal .searcher__list-categories {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
  position: sticky;
  top: 0;
  width: 8.25rem;
}
#searcher-origin-modal .searcher__list-categories-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  list-style: none;
  margin: 0;
  padding: var(--spacing-4) var(--spacing-3);
}
#searcher-origin-modal .submenu__link {
  align-items: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-neutral-default);
  cursor: pointer;
  display: flex;
  /* text-sm como los puertos de la lista: a text-base "Fuerteventura" no cabía
     en la columna de 8.25rem y se cortaba contra el borde. */
  font-size: var(--text-sm);
  padding: var(--spacing-4) var(--spacing-5);
  text-align: left;
  transition: all var(--transition-fast);
  white-space: nowrap;
  width: 100%;
}
#searcher-origin-modal .submenu__link:hover,
#searcher-origin-modal .submenu__link.is-active {
  color: var(--text-primary-default);
}
#searcher-origin-modal .submenu__link.is-active {
  background-color: var(--background-primary-selected-dark);
  font-weight: var(--font-semibold);
}
#searcher-origin-modal .searcher__list-content {
  border-left: var(--border-width-1) solid var(--border-neutral-default);
  flex: 1;
  overflow-y: auto;
  position: relative;
}
#searcher-origin-modal .searcher__list-panel {
  display: none;
  flex-direction: column;
}
#searcher-origin-modal .searcher__list-panel.is-active {
  display: flex;
}

/* --- Items de origen (old style .item.separate adaptados) ---
   :not(.dn) igual que en destino: el id le gana a la regla que oculta .dn, y sin
   esto el filtro por isla marca los puertos pero el diálogo móvil los enseña. */
#searcher-origin-modal .item.separate:not(.dn) {
  align-items: flex-start;
  border-bottom: 1px solid var(--border-neutral-default);
  cursor: pointer;
  display: flex !important;
  flex-direction: column;
  padding: var(--spacing-3) var(--spacing-5);
}
#searcher-origin-modal .item.separate:hover {
  background-color: var(--background-primary-weak);
}
#searcher-origin-modal .item.separate .city {
  color: var(--text-neutral-strong);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  margin: 0;
}
#searcher-origin-modal .item.separate .city .selected { display: none; }
#searcher-origin-modal .item.separate .country {
  color: var(--text-neutral-dark);
  font-size: var(--text-xs);
}
/* Panel title */
#searcher-origin-modal .searcher__list-panel-title {
  border-bottom: var(--border-width-2) solid var(--border-neutral-default);
  color: var(--text-neutral-strong);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  padding: var(--spacing-5);
}
/* Forzar visibilidad del contenedor de rutas dentro del modal */
#searcher-origin-modal .g-dropdown-click--route { display: block !important; }
/* Ocultar el buscador de items (usa el search input del modal) */
#searcher-origin-modal #origen-items { display: none !important; }

/* Sin padding heredado del viejo buscador */
#searcher-origin-modal #route_g-dropdown-origin {
  padding: 0;
}

/* Ciudad + descripción: en línea si caben, apilados si no */
#searcher-origin-modal .item.separate .info {
  align-items: baseline;
  column-gap: var(--spacing-3);
  display: flex;
  flex-wrap: wrap;
  row-gap: 0;
  width: 100%;
}
#searcher-origin-modal .item.separate .city {
  display: inline;
}

/* Evitar scroll horizontal */
#searcher-origin-modal .searcher__list {
  overflow-x: hidden;
}
#searcher-origin-modal .searcher__list-content {
  overflow-x: hidden;
}
#searcher-origin-modal .searcher-item__body {
  overflow-x: hidden;
}

/* ============================================================
   MOBILE DESTINATION MODAL — #searcher-destination-modal
   Misma estructura base que el modal de origen, sin sidebar de
   categorías. La lista es full-width con header dinámico.
   ============================================================ */

#searcher-destination-modal {
  background: var(--background-neutral-extra-weak);
  border: none;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', var(--font-primary), sans-serif;
  height: 100%;
  inset: 0;
  margin: 0;
  max-height: 100%;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  position: fixed;
  width: 100%;
  z-index: var(--z-index-10);
}
#searcher-destination-modal:not([open]) { display: none; }

@media (min-width: 1024px) {
  #searcher-destination-modal { display: none !important; }
}

/* Inner layout */
#searcher-destination-modal .modal__content {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  overflow: hidden;
  width: 100%;
}
#searcher-destination-modal .modal__body {
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
  width: 100%;
}
#searcher-destination-modal .searcher-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  width: 100%;
}

/* Header teal */
#searcher-destination-modal .searcher-item__header {
  background-color: var(--background-primary-default);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
}
#searcher-destination-modal .searcher-item__header-content {
  align-items: center;
  display: flex;
  gap: var(--spacing-3);
}
#searcher-destination-modal .searcher-item__close-btn {
  background: none;
  border: none;
  color: var(--text-neutral-extra-weak);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: var(--spacing-6);
  padding: 0;
  width: var(--spacing-6);
}
#searcher-destination-modal .searcher-item__title {
  color: var(--text-neutral-extra-weak);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  margin: 0;
}

/* Input búsqueda en header */
#searcher-destination-modal .searcher-item__header .input-search {
  position: relative;
  width: 100%;
}
#searcher-destination-modal .searcher-item__header .input-search__icon {
  color: var(--icon-neutral-default);
  height: var(--spacing-6);
  left: var(--spacing-4);
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--spacing-6);
}
#searcher-destination-modal .searcher-item__header .input-search__input {
  background-color: var(--background-primary-weak);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-primary) !important;
  font-size: var(--text-sm);
  height: 3.5rem;
  outline: none;
  padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) var(--spacing-12);
  width: 100%;
}

/* Body scrollable */
#searcher-destination-modal .searcher-item__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

/* .searcher__dropdown-content-left movido al body — full width, sin mapa */
#searcher-destination-modal .searcher__dropdown-content-left {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
}

/* Header dinámico "Destinos desde X" */
#searcher-destination-modal .searcher__typing-list-header {
  border-bottom: var(--border-width-2) solid var(--border-neutral-default);
  flex-shrink: 0;
  padding: var(--spacing-5);
}
#searcher-destination-modal .searcher__typing-list-header .pl-heading {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  margin: 0;
}
#searcher-destination-modal .searcher__typing-list-header p {
  color: var(--text-neutral-default);
  font-size: var(--text-sm);
  margin: 0;
}

/* Lista de destinos — full width, sin sidebar */
#searcher-destination-modal .searcher__list {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
#searcher-destination-modal .searcher__list-content {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
}
#searcher-destination-modal .searcher__list-panel {
  display: none;
  flex-direction: column;
}
#searcher-destination-modal .searcher__list-panel.is-active {
  display: flex;
}

/* Items .item.separate — mismos estilos que origen */
#searcher-destination-modal .item.separate:not(.dn) {
  align-items: flex-start;
  border-bottom: 1px solid var(--border-neutral-default);
  cursor: pointer;
  display: flex !important;
  flex-direction: column;
  padding: var(--spacing-3) var(--spacing-5);
}
#searcher-destination-modal .item.separate:hover {
  background-color: var(--background-primary-weak);
}
#searcher-destination-modal .item.separate .info {
  align-items: baseline;
  column-gap: var(--spacing-3);
  display: flex;
  flex-wrap: wrap;
  row-gap: 0;
  width: 100%;
}
#searcher-destination-modal .item.separate .city {
  color: var(--text-neutral-strong);
  display: inline;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  margin: 0;
}
#searcher-destination-modal .item.separate .city .selected { display: none; }
#searcher-destination-modal .item.separate .country {
  color: var(--text-neutral-dark);
  font-size: var(--text-xs);
}

/* Forzar visibilidad y quitar padding heredado */
#searcher-destination-modal .g-dropdown-click--route { display: block !important; }
#searcher-destination-modal #route_g-dropdown-destination { padding: 0; }

/* ============================================================
   MOBILE PASSENGERS MODAL — #searcher-passengers-modal
   Lleva clase pl-modal para heredar todos los estilos de
   counter, searcher__ctas, bottom-bar, etc. ya definidos.
   Los overrides de display son necesarios porque .pl-modal usa
   is-open pero nosotros usamos showModal() / [open] nativo.
   ============================================================ */

/* Override display: el dialog usa [open], no .is-open */
#searcher-passengers-modal.pl-modal { display: none !important; }
#searcher-passengers-modal.pl-modal[open] { display: flex !important; }

@media (min-width: 1024px) {
  #searcher-passengers-modal { display: none !important; }
}

/* Shell del dialog: full-screen, fondo neutro */
#searcher-passengers-modal {
  background: var(--background-neutral-extra-weak);
  border: none;
  flex-direction: column;
  font-family: 'Inter', var(--font-primary), sans-serif;
  height: 100%;
  inset: 0;
  margin: 0;
  max-height: 100%;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  position: fixed;
  width: 100%;
  z-index: var(--z-index-10);
}

/* Inner layout */
#searcher-passengers-modal .modal__body {
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
  width: 100%;
}
#searcher-passengers-modal .modal__content {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  overflow: hidden;
  width: 100%;
}
#searcher-passengers-modal .searcher-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  width: 100%;
}

/* Header teal */
#searcher-passengers-modal .searcher-item__header {
  background-color: var(--background-primary-default);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding: var(--spacing-4);
}
#searcher-passengers-modal .searcher-item__header-content {
  align-items: center;
  display: flex;
  gap: var(--spacing-3);
}
#searcher-passengers-modal .searcher-item__close-btn {
  background: none;
  border: none;
  color: var(--text-neutral-extra-weak);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: var(--spacing-6);
  padding: 0;
  width: var(--spacing-6);
}
#searcher-passengers-modal .searcher-item__title {
  color: var(--text-neutral-extra-weak);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  margin: 0;
}

/* Body: flex column — searcher-item__body + bottom-bar apilados */
#searcher-passengers-modal .searcher-item__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

/* .g-dropdown-click--passenger ocupa todo el espacio disponible.
   !important en display: .pl-modal .g-dropdown-click--passenger tiene
   display:block!important con menor especificidad pero gana por !important;
   necesitamos igualarlo aquí para recuperar flex y que .bottom-bar sea visible. */
#searcher-passengers-modal .g-dropdown-click--passenger {
  display: flex !important;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
/* El body interior (counters + CTAs) scrollea; el bottom-bar queda fijo abajo */
#searcher-passengers-modal .g-dropdown-click--passenger > .searcher-item__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
#searcher-passengers-modal .bottom-bar {
  flex-shrink: 0;
}

/* ============================================================
   MOBILE VEHICLE MODAL — #searcher-vehicle-modal
   Mismo patrón que pasajeros (pl-modal + showModal()/[open]).
   Recibe .g-dropdown-click--vehicle (paneles + footers) por JS;
   los paneles scrollean y el footer activo queda fijo abajo.
   ============================================================ */
#searcher-vehicle-modal.pl-modal { display: none !important; }
#searcher-vehicle-modal.pl-modal[open] { display: flex !important; }
@media (min-width: 1024px) {
  #searcher-vehicle-modal { display: none !important; }
}
#searcher-vehicle-modal {
  background: var(--background-neutral-extra-weak);
  border: none;
  flex-direction: column;
  font-family: 'Inter', var(--font-primary), sans-serif;
  height: 100%;
  inset: 0;
  margin: 0;
  max-height: 100%;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  position: fixed;
  width: 100%;
  z-index: var(--z-index-10);
}
#searcher-vehicle-modal .modal__body { display: flex; flex: 1 1 auto; overflow: hidden; width: 100%; }
#searcher-vehicle-modal .modal__content { display: flex; flex-direction: column; margin-top: 0; overflow: hidden; width: 100%; }
#searcher-vehicle-modal .searcher-item { display: flex; flex-direction: column; height: 100%; overflow: hidden; width: 100%; }
/* Header teal */
#searcher-vehicle-modal .searcher-item__header {
  background-color: var(--background-primary-default);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding: var(--spacing-4);
}
#searcher-vehicle-modal .searcher-item__header-content { align-items: center; display: flex; gap: var(--spacing-3); }
#searcher-vehicle-modal .searcher-item__close-btn {
  background: none; border: none; color: var(--text-neutral-extra-weak); cursor: pointer;
  display: flex; flex-shrink: 0; height: var(--spacing-6); padding: 0; width: var(--spacing-6);
}
#searcher-vehicle-modal .searcher-item__title {
  color: var(--text-neutral-extra-weak); font-size: var(--text-base); font-weight: var(--font-bold); margin: 0;
}
/* Body del modal que recibe el #pl-dropdown-vehicle movido */
#pl-vehicle-modal-body {
  display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow: hidden; padding: 0;
}
/* El #pl-dropdown-vehicle se mueve aquí entero: anular su layout de dropdown
   (absolute / sombra / ancho fijo) y dejarlo como contenedor flex a pantalla. */
#searcher-vehicle-modal #pl-dropdown-vehicle {
  position: static;
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  z-index: auto;
}
/* .g-dropdown-click--vehicle ocupa todo el alto (override de display:block!important) */
#searcher-vehicle-modal .g-dropdown-click--vehicle {
  display: flex !important; flex: 1; flex-direction: column; min-height: 0; overflow: hidden; width: 100%;
}
/* Región de paneles: scrollea; el footer (bottom-bar) queda fijo abajo.
   En mobile el contenido se APILA (column): el panel de la izquierda (lista de
   tipos) y el panel derecho --double (subcategorías/contadores del vehículo ya
   cargado) NO deben ir lado a lado o desbordan el viewport (scroll horizontal). */
#searcher-vehicle-modal .searcher__dropdown-content {
  flex: 1 1 auto; min-height: 0; overflow-x: hidden; overflow-y: auto; gap: 0;
  flex-direction: column; width: 100%; max-width: 100%;
}
#searcher-vehicle-modal .searcher__dropdown-content-left {
  flex: 1 1 auto; min-height: 0; min-width: 0; width: 100%; max-width: 100%;
  overflow-y: auto; overflow-x: hidden; padding: var(--spacing-5);
}
/* Panel derecho (subcategorías del vehículo cargado): ancho completo apilado,
   anula el flex:2 de desktop y cualquier desbordamiento horizontal */
#searcher-vehicle-modal .searcher__dropdown-content-right,
#searcher-vehicle-modal .searcher__dropdown-content-right--double {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: hidden !important;
}
/* Salvaguarda: nada dentro del modal de vehículo provoca scroll horizontal */
#searcher-vehicle-modal,
#searcher-vehicle-modal #pl-dropdown-vehicle,
#searcher-vehicle-modal #pl-vehicle-modal-body { overflow-x: hidden; }
#searcher-vehicle-modal .searcher__dropdown-content-left .searcher-item__body { overflow: visible; }
#searcher-vehicle-modal [data-footer-panel-id] { flex-shrink: 0; padding: var(--spacing-4) var(--spacing-5); }
#searcher-vehicle-modal .bottom-bar { flex-shrink: 0; }

/* ── Bonus modal responsive — #add-passenger-bonus-modal ──────────────────
   modal--md: ancho fijo en desktop, full-width en mobile.
   Usa top-bar (título) + modal__body con lista de radios.
   Funciona igual en desktop y mobile sin duplicar CSS.
   ─────────────────────────────────────────────────────────────────────── */
#add-passenger-bonus-modal {
  background: var(--background-neutral-extra-weak);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: 0 var(--spacing-2) var(--spacing-8) rgba(0,0,0,.18);
  display: none;
  flex-direction: column;
  font-family: 'Inter', var(--font-primary), sans-serif;
  margin: auto;
  max-height: 90dvh;
  overflow: hidden;
  padding: 0;
  position: fixed;
  width: min(28rem, 100%);
  z-index: calc(var(--z-index-10) + 1);
}
#add-passenger-bonus-modal[open] { display: flex; }

/* Cerrar con X — posición absoluta arriba-derecha */
#add-passenger-bonus-modal .modal__close {
  background: none;
  border: none;
  color: var(--icon-neutral-default);
  cursor: pointer;
  height: var(--spacing-6);
  padding: 0;
  position: absolute;
  right: var(--spacing-5);
  top: var(--spacing-5);
  width: var(--spacing-6);
}
#add-passenger-bonus-modal .modal__close:hover {
  color: var(--icon-neutral-dark);
}

/* Top-bar: título con padding para no chocar con el X */
#add-passenger-bonus-modal .top-bar {
  border-bottom: var(--border-width-1) solid var(--border-neutral-default);
  flex-shrink: 0;
  padding: var(--spacing-5) var(--spacing-12) var(--spacing-5) var(--spacing-5);
}
#add-passenger-bonus-modal .top-bar__content .pl-heading {
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  margin: 0;
}

/* Body scrollable */
#add-passenger-bonus-modal .modal__body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0;
  width: 100%;
}
#add-passenger-bonus-modal .modal__content {
  margin-top: 0;
  width: 100%;
}

/* Lista de opciones */
#add-passenger-bonus-modal .list-menu__item {
  border-bottom: var(--border-width-1) solid var(--border-neutral-default);
}
#add-passenger-bonus-modal .list-menu__item:last-child {
  border-bottom: none;
}
#add-passenger-bonus-modal .field--radio {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: var(--spacing-4);
  padding: var(--spacing-4) var(--spacing-5);
  width: 100%;
}
#add-passenger-bonus-modal .field__label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}
#add-passenger-bonus-modal .radio--sm {
  flex-shrink: 0;
}

/* En mobile: ocupa casi todo el ancho */
@media (max-width: 639px) {
  #add-passenger-bonus-modal {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    bottom: 0;
    left: 0;
    margin: 0;
    max-height: 80dvh;
    right: 0;
    top: auto;
    width: 100%;
    /* La hoja del NAVEGADOR da a <dialog> un `max-width: calc(100% - 6px - 2em)`,
       que recortaba la hoja a 337px de 390 y dejaba los margenes laterales que no
       tiene la maqueta. `width: 100%` no basta: hay que levantar ese tope. */
    max-width: 100%;
  }
}

/* ============================================================
   MOBILE PETS MODAL — #searcher-pets-modal
   Misma estrategia que pasajeros: lleva pl-modal para heredar
   estilos de counter y bottom-bar. El bloque informativo de
   mascotas grandes tiene sus propios estilos responsive.
   ============================================================ */

#searcher-pets-modal.pl-modal { display: none !important; }
#searcher-pets-modal.pl-modal[open] { display: flex !important; }

@media (min-width: 1024px) {
  #searcher-pets-modal { display: none !important; }
}

#searcher-pets-modal {
  background: var(--background-neutral-extra-weak);
  border: none;
  flex-direction: column;
  font-family: 'Inter', var(--font-primary), sans-serif;
  height: 100%;
  inset: 0;
  margin: 0;
  max-height: 100%;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  position: fixed;
  width: 100%;
  z-index: var(--z-index-10);
}
#searcher-pets-modal .modal__body {
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
  width: 100%;
}
#searcher-pets-modal .modal__content {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  overflow: hidden;
  width: 100%;
}
#searcher-pets-modal .searcher-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  width: 100%;
}
#searcher-pets-modal .searcher-item__header {
  background-color: var(--background-primary-default);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding: var(--spacing-4);
}
#searcher-pets-modal .searcher-item__header-content {
  align-items: center;
  display: flex;
  gap: var(--spacing-3);
}
#searcher-pets-modal .searcher-item__close-btn {
  background: none;
  border: none;
  color: var(--text-neutral-extra-weak);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: var(--spacing-6);
  padding: 0;
  width: var(--spacing-6);
}
#searcher-pets-modal .searcher-item__title {
  color: var(--text-neutral-extra-weak);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  margin: 0;
}
#searcher-pets-modal .searcher-item__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}
#searcher-pets-modal .g-dropdown-click--pet {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Bloque info mascotas grandes (SVG ilustración + texto + enlace) */
#searcher-pets-modal .searcher__cta-wrapper {
  align-items: flex-start;
  gap: var(--spacing-3);
}
#searcher-pets-modal .searcher__cta-icon {
  flex-shrink: 0;
  height: var(--spacing-9);
  width: var(--spacing-9);
}

/* ============================================================
   MOBILE DATES MODAL — #searcher-dates-modal
   Sin input de búsqueda en el header. Contiene:
   - .searcher__alternative (checkbox ruta alternativa)
   - #pl-calendar con Litepicker (2 meses apilados verticalmente)
   ============================================================ */

#searcher-dates-modal {
  background: var(--background-neutral-extra-weak);
  border: none;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', var(--font-primary), sans-serif;
  height: 100%;
  inset: 0;
  margin: 0;
  max-height: 100%;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  position: fixed;
  width: 100%;
  z-index: var(--z-index-10);
}
#searcher-dates-modal:not([open]) { display: none; }

@media (min-width: 1024px) {
  #searcher-dates-modal { display: none !important; }
}

/* Inner layout */
#searcher-dates-modal .modal__content {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  overflow: hidden;
  width: 100%;
}
#searcher-dates-modal .modal__body {
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
  width: 100%;
}
#searcher-dates-modal .searcher-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  width: 100%;
}

/* Header teal — sin input-search */
#searcher-dates-modal .searcher-item__header {
  background-color: var(--background-primary-default);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding: var(--spacing-4);
}
#searcher-dates-modal .searcher-item__header-content {
  align-items: center;
  display: flex;
  gap: var(--spacing-3);
}
#searcher-dates-modal .searcher-item__close-btn {
  background: none;
  border: none;
  color: var(--text-neutral-extra-weak);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: var(--spacing-6);
  padding: 0;
  width: var(--spacing-6);
}
#searcher-dates-modal .searcher-item__title {
  color: var(--text-neutral-extra-weak);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  margin: 0;
}

/* Body scrollable */
#searcher-dates-modal .searcher-item__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

/* ── Checkbox Ruta alternativa ── */
#searcher-dates-modal .searcher__alternative {
  border-bottom: var(--border-width-1) solid var(--border-neutral-default);
  flex-shrink: 0;
  padding: var(--spacing-4) var(--spacing-5);
}
#searcher-dates-modal .field--checkbox {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: var(--spacing-3);
}
#searcher-dates-modal .field__label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}
#searcher-dates-modal .searcher__cta-icon {
  color: var(--icon-primary-default);
  flex-shrink: 0;
  height: var(--spacing-5);
  width: var(--spacing-5);
}

/* ── Calendario: full-width, meses apilados verticalmente ── */
#searcher-dates-modal .searcher__calendar {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--spacing-4) 0;
  width: 100%;
}
#searcher-dates-modal .litepicker {
  display: block !important;
  width: 100% !important;
}
#searcher-dates-modal .container__main {
  width: 100% !important;
}
/* Mobile: celdas de tamaño FIJO (spacing-9, cuadradas) y calendario CENTRADO,
   como patternlab — no estiradas a ancho completo de pantalla.
   (El módulo no definía --litepicker-day-width en mobile, solo a 1280px.) */
#searcher-dates-modal {
  --litepicker-day-width: var(--spacing-9);
  --litepicker-month-width: calc(var(--litepicker-day-width) * 7 + var(--spacing-1) * 6);
}
/* 2 meses apilados (PatternLab muestra columns-2 en desktop; en mobile 1 columna) */
#searcher-dates-modal .container__months {
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}
#searcher-dates-modal .month-item {
  width: var(--litepicker-month-width) !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}
/* Cabeceras de día de semana: misma rejilla (día-width + gap) que los días */
#searcher-dates-modal .month-item-weekdays-row {
  gap: var(--spacing-1) !important;
  justify-content: center !important;
}
#searcher-dates-modal .month-item-weekdays-row > div {
  width: var(--litepicker-day-width) !important;
}
/* Días: flex con gap, celdas de ancho fijo, centradas */
#searcher-dates-modal .container__days {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--spacing-1) !important;
  /* flex-start, NO center: con 'center' la ultima fila del mes (la que no llena
     las 7 celdas) se centraba en el contenedor y los dias caian bajo el dia de
     la semana equivocado. En septiembre de 2026, el 28 (lunes) aparecia bajo
     MIE. Litepicker usa flex-start por este motivo; solo se rompia en movil
     porque esta regla es exclusiva de #searcher-dates-modal. */
  justify-content: flex-start !important;
  width: 100% !important;
}
#searcher-dates-modal .container__days > div,
#searcher-dates-modal .container__days > a {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: var(--litepicker-day-width) !important;
}
#searcher-dates-modal .day-item {
  text-align: left;
  width: 100% !important;
}

/* ================================================================
   icon-simple-btn — vehicle selector drill-down list items
   ================================================================ */
.icon-simple-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: inherit;
  font-family: inherit;
  font-size: inherit;
}
.icon-simple-btn__content {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.icon-simple-btn__left {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.icon-simple-btn__icon {
  width: 24px;
  height: 24px;
}
.icon-simple-btn__label {
  font-size: 14px;
  font-weight: 600;
}
.icon-simple-btn__action {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.icon-simple-btn__check-wrapper {
  display: none;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background-color: var(--color-primary, #008193);
  border-radius: 50%;
  flex-shrink: 0;
}
.icon-simple-btn.is-selected .icon-simple-btn__check-wrapper {
  display: flex;
}
.icon-simple-btn__check {
  width: 16px;
  height: 16px;
  color: #fff;
}
.icon-simple-btn__chevron {
  width: 20px;
  height: 20px;
  color: var(--color-neutral-500, #6b7280);
}
/* selected row background */
.list-menu__item:has(.icon-simple-btn.is-selected) {
  background-color: var(--background-primary-weak, #f3f9fa);
  border-radius: var(--radius-md, 8px);
}

/* list-menu layout */
.list-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.list-menu__legend {
  padding: 12px 0 8px;
  list-style: none;
}

/* Ancho fijo del dropdown de vehículo (diseño: --lg = 42rem) — el tema
   antiguo no trae --lg, por eso lo definimos aquí. Evita el "demasiado ancho". */
.pl-modal .searcher__dropdown--lg {
  width: 42rem;
  max-width: calc(100vw - var(--spacing-8));
}
/* --vehicles: el select de etiqueta debe poder desbordar (overflow visible) */
.pl-modal .searcher__dropdown--vehicles {
  overflow: visible;
}
.pl-modal .searcher__dropdown--vehicles .searcher__dropdown-content,
.pl-modal .searcher__dropdown--vehicles .searcher-item__body {
  overflow-y: visible;
}

/* footer panel visibility — mirror [hidden] for [data-footer-panel-id] */
[data-footer-panel-id] {
  display: block;
}
[data-footer-panel-id][hidden] {
  display: none !important;
}

/* ============================================================
   FASE 1 — SISTEMA DE DISEÑO BASE (portado de patternlab del tema,
   aplanado y scopeado bajo .pl-modal para mantener el módulo autocontenido)
   Fuente: themes/balearia-booking-theme/src/css/patternlab/components/
     atoms/{toggle,inputs,selects}.scss · molecules/fields.scss
     organisms/searcher.scss (form)
   ============================================================ */

/* Tokens que faltaban y usan inputs/selects/fields */
:root {
  --icon-neutral-default: var(--neutral-90);
  --text-neutral-weak: var(--neutral-40);
}

/* --- Inputs (atoms/inputs.scss) --- */
.pl-modal .input,
.pl-modal textarea {
  border: var(--border-width-1) solid var(--border-neutral-dark);
  background-color: var(--background-neutral-extra-weak);
  border-radius: var(--radius-sm);
  color: var(--text-neutral-default);
  font-size: var(--text-sm);
  outline: none;
  padding: 0.719rem var(--spacing-5);
  transition: all var(--transition-fast);
  width: 100%;
}
.pl-modal .input::placeholder,
.pl-modal textarea::placeholder {
  color: transparent;
}
.pl-modal .input {
  height: var(--spacing-9);
}

.pl-modal .input:focus,
.pl-modal textarea:focus {
  border-color: var(--border-primary-default);
  box-shadow: var(--shadow-xs);
}
.pl-modal .input:disabled,
.pl-modal .input[readonly],
.pl-modal textarea:disabled {
  background-color: var(--background-neutral-disabled-weak);
  color: var(--text-neutral-disabled);
  border-color: var(--border-neutral-disabled);
  cursor: not-allowed;
}

/* --- Fields (molecules/fields.scss, subconjunto usado por la modal) --- */
.pl-modal .field {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  width: 100%;
}
.pl-modal .field__wrapper {
  position: relative;
}
.pl-modal .field__label {
  color: var(--text-neutral-medium);
  font-size: var(--text-sm);
  left: var(--spacing-5);
  pointer-events: none;
  position: absolute;
  top: 24px;
  transform: translateY(-50%);
  transition: all var(--transition-fast);
}
.pl-modal .field__icon {
  color: var(--text-neutral-default);
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--spacing-6);
}
.pl-modal .field__icon--left {
  left: var(--spacing-5);
}
.pl-modal .field__icon--right {
  right: var(--spacing-5);
}
/* label flotante: sube al enfocar o cuando hay valor */
.pl-modal .field--input:has(.field__label):has(.input:focus) .field__label,
.pl-modal .field--input:has(.field__label):has(.input:not(:placeholder-shown)) .field__label {
  top: var(--spacing-3);
  transform: translateY(0);
  color: var(--text-neutral-dark);
  font-size: var(--text-xxs);
  text-transform: uppercase;
}
.pl-modal .field--input:has(.field__label):has(.input:focus) .input,
.pl-modal .field--input:has(.field__label):has(.input:not(:placeholder-shown)) .input {
  padding-top: 1.25rem;
  padding-bottom: 0.375rem;
}

/* Combobox de marca/modelo: estado invalido y opcion activa del teclado.
   El aspecto del desplegable (.g-dropdown--autocomplete) lo pone el tema; aqui
   solo van las dos cosas que el tema no cubre porque antes no existian. */
.pl-modal #pl-vehicle-brand.is-invalid,
.pl-modal #pl-vehicle-model.is-invalid {
  border-color: var(--border-danger-default, #d93025);
  box-shadow: none;
}

/* Aviso de plValidarCoche(): sin marca y modelo de la lista no se confirma. */
.pl-modal .pl-vehicle-car-error {
  color: var(--text-error-default, #d93025);
  font-size: var(--text-xs);
  margin: var(--spacing-1) 0 0;
}
.pl-modal .pl-vehicle-car-error[hidden] {
  display: none;
}

/* Resaltado de la opcion sobre la que esta el teclado o el raton. Sin esto,
   navegar con las flechas no se ve: el tema no trae ningun :hover. */
.pl-modal .g-dropdown--autocomplete p {
  cursor: pointer;
}
.pl-modal .g-dropdown--autocomplete p:hover,
.pl-modal .g-dropdown--autocomplete p.is-active {
  background-color: var(--background-primary-extra-weak, #f3f9fa);
  color: var(--text-primary-default, #008193);
}
/* field--toggle: label en línea con el switch */
.pl-modal .field--toggle {
  align-items: center;
  flex-direction: row;
  gap: var(--spacing-4);
}
.pl-modal .field--toggle .toggle {
  flex-shrink: 0;
}
.pl-modal .field--toggle .field__label {
  color: var(--text-neutral-default);
  font-size: var(--text-sm);
  position: static;
  transform: none;
}

/* --- Toggle (atoms/toggle.scss) --- */
.pl-modal .toggle {
  display: inline-flex;
  position: relative;
}
.pl-modal .toggle__input {
  appearance: none;
  background-color: var(--background-primary-selected-dark);
  border: none;
  border-radius: var(--radius-full);
  height: var(--spacing-6);
  width: var(--spacing-9);
  transition: all var(--transition-fast);
  cursor: pointer;
}
.pl-modal .toggle__dot {
  background-color: var(--border-primary-default);
  border-radius: var(--radius-full);
  display: block;
  height: var(--spacing-5-5);
  width: var(--spacing-5-5);
  left: var(--spacing-1);
  top: var(--spacing-1);
  pointer-events: none;
  position: absolute;
  transition: all var(--transition-fast);
}
.pl-modal .toggle:has(.toggle__input:hover) .toggle__dot {
  background-color: var(--background-primary-dark);
}
.pl-modal .toggle:has(.toggle__input:checked) .toggle__input {
  background-color: var(--background-primary-default);
  border-color: var(--border-primary-default);
}
.pl-modal .toggle:has(.toggle__input:checked) .toggle__dot {
  background-color: var(--background-neutral-extra-weak);
  transform: translateX(var(--spacing-6));
}
.pl-modal .toggle:has(.toggle__input:hover:checked) .toggle__dot {
  background-color: var(--background-primary-selected-dark);
}
.pl-modal .toggle:has(.toggle__input:disabled) .toggle__input {
  background-color: var(--background-neutral-disabled);
}
.pl-modal .toggle:has(.toggle__input:disabled) .toggle__dot {
  background-color: var(--background-neutral-extra-weak);
}
/* toggle--dark: variante usada en algunos CTAs */
.pl-modal .toggle--dark .toggle__input {
  background-color: var(--background-neutral-extra-weak);
}

/* --- Select (atoms/selects.scss) --- */
.pl-modal .select {
  appearance: none;
  background-color: var(--background-neutral-extra-weak);
  border: var(--border-width-1) solid var(--border-neutral-dark);
  border-radius: var(--radius-sm);
  color: var(--text-neutral-default);
  font-size: var(--text-sm);
  height: var(--spacing-9);
  outline: none;
  padding: 0.719rem var(--spacing-8) 0.719rem var(--spacing-5);
  transition: all var(--transition-fast);
  width: 100%;
}
.pl-modal .select:focus {
  border-color: var(--border-primary-default);
  box-shadow: var(--shadow-xs);
}
.pl-modal .select--hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.pl-modal .select__trigger {
  appearance: none;
  background-color: var(--background-neutral-extra-weak);
  border: var(--border-width-1) solid var(--border-neutral-dark);
  border-radius: var(--radius-sm);
  color: var(--text-neutral-default);
  cursor: pointer;
  font-size: var(--text-sm);
  height: var(--spacing-9);
  outline: none;
  padding: 0.719rem var(--spacing-8) 0.719rem var(--spacing-5);
  transition: all var(--transition-fast);
  width: 100%;
}
.pl-modal .select__trigger:hover {
  border-color: var(--border-neutral-default);
}
.pl-modal .select__trigger:focus {
  border-color: var(--border-primary-default);
  box-shadow: var(--shadow-xs);
}
.pl-modal .select__trigger-text {
  color: inherit;
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Sin etiqueta seleccionada, el texto del trigger actúa de placeholder atenuado
   (el diseño no usa label flotante en el select de etiqueta ambiental). */
.pl-modal .field--select-dropdown:not(.is-selected) .select__trigger-text {
  color: var(--text-neutral-disabled);
}
.pl-modal .select__dropdown-wrapper .select__dropdown {
  width: 100%;
  overflow: hidden;
}
.pl-modal .select__dropdown-wrapper > .select__dropdown {
  max-height: 14rem;
}
.pl-modal .select__dropdown .list-menu__item {
  cursor: pointer;
}
.pl-modal .select__dropdown .list-menu__item:hover {
  background-color: var(--background-neutral-weak);
}
.pl-modal .field--select-dropdown .field__icon--right {
  transition: transform var(--transition-fast);
}
.pl-modal .field--select-dropdown:has(.select__dropdown-wrapper.is-open) .field__icon--right {
  transform: translateY(-50%) rotate(180deg);
}

/* ── Etiqueta ambiental: que la lista no la recorte el panel ──────────────
   El desplegable de la etiqueta es position:absolute con z-index 10, pero eso
   no sirve de nada frente a un ancestro con overflow: el recorte gana siempre
   al apilamiento. Los tres contenedores del panel de vehiculo
   (.searcher__dropdown-content, su -left y .searcher-item__body) llevan
   overflow auto/hidden y cortaban la lista por abajo: se veia "Sin etiqueta"
   y "ECO" ya partido, con O / C / B fuera.

   Mientras el select esta abierto dejan de recortar. Se limita a ese estado
   para no perder el scroll del panel el resto del tiempo. */
.pl-modal .searcher__dropdown-content:has(.select__dropdown-wrapper.is-open),
.pl-modal .searcher__dropdown-content-left:has(.select__dropdown-wrapper.is-open),
.pl-modal .searcher-item__body:has(.select__dropdown-wrapper.is-open),
.pl-modal .g-dropdown-click--vehicle:has(.select__dropdown-wrapper.is-open),
.pl-modal .g-dropdown-click--vehicle_fh:has(.select__dropdown-wrapper.is-open) {
  overflow: visible;
}

/* ── Marca y modelo: lo mismo para la lista del combobox ──────────────────
   Mismo problema y misma cura que la etiqueta ambiental de aqui arriba, solo
   que el estado abierto se marca con .active en vez de .is-open. Sin esto la
   lista sale por debajo del resto del panel: no es cuestion de z-index, la
   recortan los contenedores con overflow. */
.pl-modal .searcher__dropdown-content:has(.g-dropdown--autocomplete.active),
.pl-modal .searcher__dropdown-content-left:has(.g-dropdown--autocomplete.active),
.pl-modal .searcher-item__body:has(.g-dropdown--autocomplete.active),
.pl-modal .searcher__form:has(.g-dropdown--autocomplete.active),
.pl-modal .searcher__form-content:has(.g-dropdown--autocomplete.active),
.pl-modal .searcher__form-fields:has(.g-dropdown--autocomplete.active),
.pl-modal .g-dropdown-click--vehicle:has(.g-dropdown--autocomplete.active),
.pl-modal .g-dropdown-click--vehicle_fh:has(.g-dropdown--autocomplete.active) {
  overflow: visible;
}

/* Y por encima de los campos hermanos que vienen despues (modelo, etiqueta). */
.pl-modal .field:has(.g-dropdown--autocomplete.active) {
  position: relative;
  z-index: 30;
}
.pl-modal .g-dropdown--autocomplete {
  z-index: 30;
}

/* Marca y modelo en mayusculas tambien con el campo vacio.
   Lo que se ve ahi NO es el placeholder del input: en esta modal el placeholder
   es transparente (.pl-modal .input::placeholder) y solo existe para que
   :placeholder-shown haga flotar el label. El texto visible es el <label>, que
   ya se pone en mayusculas al flotar; esto lo iguala en reposo.
   Con text-transform y no reescribiendo el texto en el JSP, para no romperlo el
   dia que esas etiquetas pasen por una clave de idioma. */
.pl-modal .field--input:has(#pl-vehicle-brand) .field__label,
.pl-modal .field--input:has(#pl-vehicle-model) .field__label {
  text-transform: uppercase;
}

/* --- searcher__form (organisms/searcher.scss) --- */
.pl-modal .searcher__form {
  background-color: var(--background-neutral-weak);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.pl-modal .searcher__form-content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
  padding: var(--spacing-5);
}
.pl-modal .searcher__form-fields {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
}
@media (min-width: 1024px) {
  .pl-modal .searcher__form-fields {
    display: grid;
    gap: var(--spacing-5);
    grid-template-columns: repeat(2, 1fr);
  }
  .pl-modal .searcher__form-fields--cols-3 {
    grid-template-columns: repeat(3, 1fr);
  }
  /* Sin etiqueta ambiental, dos columnas.
     La fila marca/modelo/etiqueta se reparte en tres, pero en el site de
     Canarias la etiqueta esta oculta (.pl-modal.pl-canarias .pl-etiqueta-eco
     { display:none }, requisito de las rutas peninsulares/baleares). Un hijo
     con display:none no ocupa celda, pero la TERCERA COLUMNA se sigue
     reservando: marca y modelo se quedaban estrechos y con medio ancho de
     tarjeta vacio a la derecha.
     Se condiciona por .pl-canarias, que es exactamente lo que oculta la
     etiqueta: si algun dia se oculta por otro motivo, habra que ampliarlo. */
  .pl-modal.pl-canarias .searcher__form-fields--cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================
   FASE 2 — Componente select "Etiqueta ambiental" (maqueta visual)
   Mecanismo data-dropdown (molecules/dropdown.scss) + opciones con icono
   ============================================================ */

/* Tokens que faltaban */
:root {
  --shadow-sm: 0px 2px 6px rgba(0, 0, 0, 0.08);
  --z-index-10: 10;
}

/* Mecanismo dropdown (abre/cierra con animación de grid-rows) */
.pl-modal [data-dropdown] {
  position: relative;
}
.pl-modal [data-dropdown-content] {
  background-color: var(--background-neutral-extra-weak);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  display: grid;
  grid-template-rows: 0fr;
  left: 0;
  max-height: 44rem;
  position: absolute;
  top: calc(100% + var(--spacing-3));
  transition: grid-template-rows var(--transition-fast);
  width: max-content;
  min-width: 100%;
  z-index: var(--z-index-10);
}
.pl-modal [data-dropdown-content] > div {
  opacity: 0;
  overflow: hidden;
  transition: opacity var(--transition-fast);
}
.pl-modal [data-dropdown].is-open > [data-dropdown-content] {
  grid-template-rows: 1fr;
}
.pl-modal [data-dropdown].is-open > [data-dropdown-content] > div {
  opacity: 1;
  overflow-y: auto;
}

/* Opción de lista con icono de color (etiqueta DGT) */
.pl-modal .list-menu__item-option {
  display: flex;
  align-items: center;
  gap: var(--spacing-3);
}
.pl-modal .list-menu__item-option-icon {
  width: var(--spacing-5);
  height: var(--spacing-5);
  flex-shrink: 0;
}

/* Icono a la izquierda del campo (offset de label/trigger) */
.pl-modal .field:has(.field__icon--left) .field__label {
  left: var(--spacing-9);
}
.pl-modal .field:has(.field__icon--left) .input,
.pl-modal .field:has(.field__icon--left) .select__trigger {
  padding-left: var(--spacing-9);
}

/* field--select: label flotante al seleccionar o enfocar */
.pl-modal .field--select:has(.field__label):has(.select.is-selected) .field__label,
.pl-modal .field--select:has(.field__label):has(.select__trigger:focus) .field__label {
  top: var(--spacing-3);
  transform: translateY(0);
  color: var(--text-neutral-dark);
  font-size: var(--text-xxs);
  text-transform: uppercase;
}
.pl-modal .field--select:has(.field__label):has(.select.is-selected) .select__trigger,
.pl-modal .field--select:has(.field__label):has(.select__trigger:focus) .select__trigger {
  padding-top: 1.25rem;
  padding-bottom: 0.375rem;
}

/* ============================================================
   FASE 5 — searcher__counters--vehicles (counters dentro del dropdown
   de vehículo: necesitan padding propio al no tener wrapper de form)
   ============================================================ */
.pl-modal .searcher__counters--vehicles {
  padding: var(--spacing-5);
  gap: var(--spacing-4);
}

/* ============================================================
   FASE 4 — CTA de Cupo: caption + link de info en línea
   ============================================================ */
.pl-modal .searcher__cta-caption-wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  flex-grow: 1;
}

/* ============================================================
   FASE 3 — Estado "filled" de extras: searcher__cta-summary
   (CSS listo; la integración del flujo queda para el pase de
   correcciones — decisión 3-modales Balearía vs 1-modal mockup)
   ============================================================ */
.pl-modal .searcher__cta-summary {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  list-style: none;
  margin: 0;
  padding: 0;
}
.pl-modal .searcher__cta-summary-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-3);
}
.pl-modal .searcher__cta-summary-icon {
  width: var(--spacing-5);
  height: var(--spacing-5);
  flex-shrink: 0;
  color: var(--icon-primary-default);
  margin-top: var(--spacing-1);
}
.pl-modal .searcher__cta-summary-text {
  font-size: var(--text-sm);
  color: var(--text-neutral-default);
}
.pl-modal .searcher__cta-summary-text strong {
  font-weight: var(--font-semibold);
}

/* Scope de patternlab para los <dialog> de modales: les da los estilos
   .pl-modal sin generar el overlay (display:contents = sin caja propia). */
.pl-modal.pl-modal-scope {
  display: contents;
}

/* counter__ctas: el cupo va en su PROPIA fila (ancho completo) con divisoria
   superior, igual que el diseño (.counter:has(.counter__ctas){flex-wrap:wrap}
   + .counter__ctas{border-top;padding-top;width:100%}). */
.pl-modal .counter:has(.counter__ctas) {
  flex-wrap: wrap;
  gap: var(--spacing-5);
}
.pl-modal .counter__ctas {
  flex-basis: 100%;
  width: 100%;
  border-top: var(--border-width-1) solid var(--border-primary-medium);
  padding-top: var(--spacing-5);
  margin-top: 0;
}
.pl-modal .counter__ctas .searcher__ctas { padding: 0; }
.pl-modal .counter .chip { background-color: var(--background-primary-selected); }
/* etiqueta + papelera separadas en la cabecera del counter */
.pl-modal .counter__right { gap: var(--spacing-5); }
.pl-modal .counter__delete {
  color: var(--icon-primary-default);
  flex-shrink: 0;
}
.pl-modal .counter__delete .link__icon { width: var(--spacing-6); height: var(--spacing-6); }
/* Enlace "Añadir otra/otro" deshabilitado al llegar al tope de adultos.
   OJO: NO usar pointer-events:none ni el atributo disabled, o el enlace no
   recibiría hover y el tooltip de aviso nunca aparecería. El clic se ignora
   en JS cuando tiene .is-disabled. */
.pl-modal .link.is-disabled {
  color: var(--text-neutral-disabled);
  cursor: default;
}
/* Aviso del límite (1 vehículo por pasajero adulto): tooltip flotante del
   diseño (caja blanca con sombra + icono info + flecha), anclado a la cabecera. */
.pl-modal .searcher__counters-row-heading { position: relative; }
.pl-modal .tooltip {
  --_tail: 0.75rem;
  --_tail-half: -0.375rem;
  --_gap: var(--spacing-3);
  align-items: flex-start;
  background-color: var(--background-neutral-extra-weak);
  border-radius: var(--radius-md);
  display: none;
  filter: drop-shadow(var(--shadow-md, 0 4px 16px rgba(0,0,0,0.16)));
  gap: var(--spacing-3);
  max-width: 19.875rem;
  padding: var(--spacing-4);
  position: absolute;
  width: max-content;
  z-index: var(--z-index-10, 10);
}
.pl-modal .tooltip.is-open { display: flex; }
/* Clay/Bootstrap trae su propio .tooltip con opacity:0 (lo sube .tooltip.show):
   el aviso se abria (display:flex) pero era invisible. Tambien su tipografia. */
.pl-modal .tooltip {
  font-family: var(--font-primary);
  line-height: 1.4;
  margin: 0;
  opacity: 1;
  text-align: left;
}
.pl-modal .tooltip::after {
  background-color: var(--background-neutral-extra-weak);
  border-radius: 0.125rem;
  content: '';
  height: var(--_tail);
  position: absolute;
  transform: rotate(45deg);
  width: var(--_tail);
}
.pl-modal .tooltip--bottom-center {
  bottom: calc(100% + var(--_gap));
  left: 50%;
  transform: translateX(-50%);
}
.pl-modal .tooltip--bottom-center::after {
  bottom: var(--_tail-half);
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}
/* Hacia abajo: la cabecera va pegada al borde superior del dropdown
   (overflow:hidden), así que el aviso se abre debajo (sobre las cards) para
   que no quede recortado. */
.pl-modal .tooltip--top-center {
  top: calc(100% + var(--_gap));
  left: 50%;
  transform: translateX(-50%);
}
.pl-modal .tooltip--top-center::after {
  top: var(--_tail-half);
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
}
.pl-modal .tooltip__icon { flex-shrink: 0; height: var(--spacing-6); width: var(--spacing-6); }
.pl-modal .tooltip__icon--info { color: var(--icon-info-default); }
.pl-modal .tooltip__content { display: flex; flex-direction: column; flex-grow: 1; gap: var(--spacing-3); }
.pl-modal .tooltip__title { font-size: var(--text-sm); font-weight: var(--font-bold); color: var(--text-neutral-default); }
/* En desktop, icono+título y select+papelera comparten la 1ª fila; el cupo baja */
@media (min-width: 1024px) {
  .pl-modal .counter:has(.field--select-dropdown):has(.counter__ctas) {
    flex-wrap: wrap;
    align-items: center;
  }
  .pl-modal .counter:has(.field--select-dropdown):has(.counter__ctas) > .counter__right {
    flex: 0 1 auto;
  }
  .pl-modal .counter:has(.field--select-dropdown):has(.counter__ctas) .counter__right .field--select {
    width: auto;
  }
}

/* CTA: caption a la izquierda, botón "Añadir/Modificar/Añadir justificación"
   y el toggle de exportación alineados a la DERECHA */
.pl-modal .searcher__cta .searcher__cta-content,
.pl-modal .counter__ctas .searcher__cta-content {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--spacing-3);
  width: 100%;
}
.pl-modal .searcher__cta-caption-wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-2);
  flex: 1 1 auto;
  min-width: 0;
}
/* El botón/toggle del CTA no se encoge y va a la derecha */
.pl-modal .searcher__cta-content > .link,
.pl-modal .searcher__cta-content > .toggle,
.pl-modal .searcher__cta-content > button {
  flex: 0 0 auto;
  margin-left: auto;
}

/* ============================================================
   FIX TIPOGRAFÍA — fuerza Inter en TODO el dropdown del buscador.
   Algunos elementos (icon-simple-btn__label, sublabel, counter__title…)
   no tienen font-family propia y la herencia no llegaba a Inter dentro
   del dropdown (los <button> cortan la herencia), cayendo al serif del
   navegador. Como el dropdown usa SVG (no icon-font), forzar la fuente en
   todos sus descendientes de texto es seguro.
   ============================================================ */
.searcher__dropdown,
.searcher__dropdown button,
.searcher__dropdown span,
.searcher__dropdown p,
.searcher__dropdown small,
.searcher__dropdown li,
.searcher__dropdown label,
.searcher__dropdown input,
.searcher__dropdown select,
.searcher__dropdown h1,
.searcher__dropdown h2,
.searcher__dropdown h3,
.searcher__dropdown h4,
.searcher__dropdown h5,
.searcher__dropdown .pl-heading {
  font-family: var(--font-primary, 'Inter', sans-serif) !important;
}

/* ============================================================
   FIX modal info de cupo (cupo-info-modal): icono a tamaño normal,
   gaps entre secciones, bullets en las listas. El SVG traía viewBox
   0 0 400 400 con clases utilitarias inexistentes (w-10 h-10) → gigante.
   ============================================================ */
.pl-modal #cupo-info-modal .modal__body { padding: var(--spacing-6) var(--spacing-5); }
.pl-modal #cupo-info-modal .modal__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}
.pl-modal #cupo-info-modal .modal__content > svg {
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
}
.pl-modal #cupo-info-modal .pl-heading { font-size: var(--text-xl, 1.375rem); font-weight: var(--font-semibold); color: var(--text-neutral-default); }
.pl-modal #cupo-info-modal p { color: var(--text-neutral-dark); font-size: var(--text-sm); }
.pl-modal #cupo-info-modal .simple-list {
  list-style: disc;
  padding-left: var(--spacing-6);
  margin: var(--spacing-2) 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}
.pl-modal #cupo-info-modal .simple-list li { color: var(--text-neutral-dark); font-size: var(--text-sm); }

/* ============================================================
   LISTA DE VEHÍCULOS = TARJETAS (1:1 patternlab icon-simple-button.css
   + list-menu.css). El módulo había dejado .icon-simple-btn plano
   (border:none; padding:0); el diseño lo quiere como tarjeta dentro de
   un panel gris con gap. Scopeado en .pl-modal para ganar al tema.
   ============================================================ */
.pl-modal .list-menu:has(.icon-simple-btn) {
  display: flex;
  flex-direction: column;
  background-color: var(--background-neutral-weak);
  gap: var(--spacing-3);
  padding: var(--spacing-5);
  border-radius: var(--radius-sm);
}
.pl-modal .list-menu:has(.icon-simple-btn) .list-menu__item {
  border-bottom: none;
  min-height: 0;
  padding: 0;
  list-style: none;
}
.pl-modal .icon-simple-btn {
  align-items: center;
  background-color: var(--background-neutral-extra-weak);
  border-radius: var(--radius-sm);
  border: var(--border-width-1) solid var(--border-neutral-default);
  display: flex;
  gap: var(--spacing-6);
  padding: var(--spacing-5);
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.pl-modal .icon-simple-btn:hover {
  background-color: var(--background-primary-weak);
  border-color: var(--border-primary-default);
}
.pl-modal .icon-simple-btn.is-selected {
  background-color: var(--background-primary-selected-dark);
  border-color: var(--border-primary-selected-dark);
}
.pl-modal .icon-simple-btn__content { display: flex; align-items: center; gap: var(--spacing-5); flex-grow: 1; }
.pl-modal .icon-simple-btn__icon { color: var(--text-neutral-default); width: var(--spacing-6); height: var(--spacing-6); }
.pl-modal .icon-simple-btn.is-selected .icon-simple-btn__icon { color: var(--icon-primary-default); }
.pl-modal .icon-simple-btn__label { color: var(--text-neutral-default); flex-grow: 1; font-size: var(--text-sm); font-weight: var(--font-semibold); }
.pl-modal .icon-simple-btn__chevron { color: var(--icon-primary-default); flex-shrink: 0; width: var(--spacing-6); height: var(--spacing-6); }

/* ============================================================
   LAYOUT counters (1:1 patternlab searcher.css): panel gris en grid de
   1 columna; cada row apila heading (fila h4 + link), sublabel y contenido;
   las tarjetas van a ancho completo. Arregla el car-saved/caravan-saved/moto
   donde el sublabel salía a la derecha y las tarjetas estrechas.
   ============================================================ */
.pl-modal .searcher__counters {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--spacing-5);
  padding: var(--spacing-5);
  background-color: var(--background-neutral-weak);
  border-radius: var(--radius-sm);
}
.pl-modal .searcher__counters-row {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--spacing-5);
}
.pl-modal .searcher__counters-row-heading {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-5);
}
.pl-modal .searcher__counters-row-content {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  gap: var(--spacing-3);
}
/* El patternlab del tema le pone a .searcher__counters-row un min-width de
   55.5rem (888px) a partir de 1024px (patternlab/components/organisms/
   searcher.scss:465). Alli esa fila vive en una modal ancha; aqui vive dentro
   del dropdown de vehiculo, que mide 42rem (672px). Con ese suelo de 888px la
   fila no cabia y el panel salia con scroll horizontal y el contenido cortado
   (ciclomotores, bicicletas, listas de guardados...). Quitamos el suelo: ningun
   contenedor nuestro es tan ancho. */
.pl-modal .searcher__counters-row {
  min-width: 0;
}
/* Lista de guardados (coche/caravana): tarjetas a ancho completo, apiladas */
.pl-modal .searcher__saved-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  width: 100%;
}
.pl-modal .searcher__saved-list .counter--card { width: 100%; margin-bottom: 0; }

/* ============================================================
   FASE D — Vehículos guardados (panel *-saved)
   ============================================================ */
.pl-modal .searcher__counters-row-sublabel {
  color: var(--text-neutral-weak);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  margin: var(--spacing-3) 0 var(--spacing-2);
}
.pl-modal .searcher__saved-list .icon-simple-btn__label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-1);
}
.pl-modal .icon-simple-btn__sublabel {
  color: var(--text-neutral-weak);
  font-size: var(--text-xs);
  font-weight: var(--font-regular);
}
/* Canarias: el JSP pinta mapa_general.png y plMapaCanarias() lo cambia al cargar el JS;
   hasta entonces se veia un instante el mapa de la peninsula. */
.pl-canarias img.searcher__image[src*="mapa_general"] { visibility: hidden; }

/* Motos / Ciclomotores: nombre + cilindrada debajo (plActualizarCilindrada). */
.pl-modal .pl-vehiculo-tipo {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: var(--spacing-1);
}
.pl-modal .pl-vehiculo-tipo .icon-simple-btn__sublabel[hidden] { display: none; }
/* counter--inline: tarjeta con matrícula + lápiz + "Seleccionar" (lista moto/ciclo) */
.pl-modal .searcher__counters-row-content .counter--inline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  background: #fff;
  border: var(--border-width-1) solid var(--border-neutral-default);
  border-radius: var(--radius-md);
  padding: var(--spacing-4) var(--spacing-5);
  margin-bottom: var(--spacing-3);
}
.pl-modal .counter--inline .counter__content { display: flex; align-items: center; gap: var(--spacing-3); flex: 1; }
.pl-modal .counter--inline .counter__icon { width: var(--spacing-6); height: var(--spacing-6); color: var(--text-neutral-default); flex-shrink: 0; }
.pl-modal .counter--inline .counter__caption {
  align-items: center;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--spacing-2);
}
.pl-modal .counter--inline .counter__title { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-neutral-dark); }
/* Counter activo (nuevo vehículo en moto/ciclo) en card azul */
.pl-modal .searcher__counters-row-content .counter.is-selected {
  background: var(--background-primary-weak, #e6f3f5);
  border: var(--border-width-1) solid var(--border-primary-medium, #9fd3da);
  border-radius: var(--radius-md);
  padding: var(--spacing-4) var(--spacing-5);
  margin-bottom: var(--spacing-3);
}
/* La etiqueta dentro de un counter va estrecha (auto), no full-width */
.pl-modal .counter__right .field--select { width: auto; min-width: 11rem; max-width: 14rem; }
.pl-modal .counter--inline .counter__caption .link { margin-left: var(--spacing-2); }
.pl-modal .counter--inline .counter__caption .link__icon { width: var(--spacing-5); height: var(--spacing-5); }
/* Tarjeta de vehículo guardado (coche/caravana): icono + matrícula + modelo + chevron */
.pl-modal .counter--card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-3);
  width: 100%;
  text-align: left;
  background: #fff;
  border: var(--border-width-1) solid var(--border-neutral-default);
  border-radius: var(--radius-md);
  padding: var(--spacing-4) var(--spacing-5);
  cursor: pointer;
  margin-bottom: var(--spacing-3);
}
.pl-modal .counter--card:hover { border-color: var(--border-primary-medium); }
.pl-modal .counter--card .counter__content { display: flex; align-items: center; gap: var(--spacing-3); flex: 1; }
.pl-modal .counter--card .counter__icon { width: var(--spacing-6); height: var(--spacing-6); color: var(--text-neutral-default); flex-shrink: 0; }
.pl-modal .counter--card .counter__caption { display: flex; flex-direction: column; gap: var(--spacing-1); }
.pl-modal .counter--card .counter__title { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--text-neutral-dark); }
.pl-modal .counter--card .counter__subtitle { font-size: var(--text-xs); color: var(--text-neutral-weak); }
.pl-modal .counter--card .counter__chevron { width: var(--spacing-6); height: var(--spacing-6); color: var(--icon-primary-default, #008193); flex-shrink: 0; }
/* Cabecera de vehículo guardado seleccionado (panel *-saved-selected) */
.pl-modal .searcher-item__selection-header {
  align-items: center;
  column-gap: var(--spacing-3);
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--spacing-5);
  width: 100%;
}
.pl-modal .searcher-item__selection-header-icon { flex-shrink: 0; }
.pl-modal .searcher-item__selection-header-vehicle-icon {
  color: var(--text-neutral-default);
  height: var(--spacing-6);
  width: var(--spacing-6);
}
.pl-modal .searcher-item__selection-header-sub {
  align-items: center;
  display: flex;
  gap: var(--spacing-3);
}
.pl-modal .searcher-item__selection-header-name {
  color: var(--text-neutral-default);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
}
.pl-modal .searcher-item__selection-header-details {
  color: var(--text-neutral-dark);
  font-size: var(--text-sm);
}
.pl-modal .searcher-item__selection-header-select { flex-basis: 100%; }
/* El select de etiqueta en la cabecera va estrecho (auto), no a ancho completo */
.pl-modal .searcher-item__selection-header-select .field--select { width: auto; min-width: 12rem; max-width: 16rem; }
/* Lápiz de editar: pequeño junto al modelo (sin texto) */
.pl-modal .searcher-item__selection-header-sub .link__icon { width: var(--spacing-5); height: var(--spacing-5); }
/* Modal de edición de vehículo guardado: campos apilados con padding */
.pl-modal [id^="edit-saved-"] .modal__content { padding: var(--spacing-5); }
.pl-modal [id^="edit-saved-"] .searcher__form-fields {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-5);
}

/* Token success (faltaba) + icono verde del resumen de extras */
:root { --icon-success-default: #6BAE3D; --text-success-default: #6BAE3D; }
.pl-modal .searcher__cta-summary-icon { color: var(--icon-success-default); }
.pl-modal .searcher__cta-summary-item { gap: var(--spacing-2); }

/* En desktop (>=1024px) hay reglas que ponen .searcher__cta en fila; eso
   coloca el RESUMEN de extras (lista de checks verdes) al LADO del wrapper
   (que es width:100%) en vez de DEBAJO, dejándolo invisible. La CTA que
   contiene un resumen debe seguir en columna. */
.pl-modal .searcher__cta:has(.searcher__cta-summary) {
  flex-direction: column;
  align-items: stretch;
}
.pl-modal .searcher__cta > .searcher__cta-summary {
  width: 100%;
}
/* En cambio, la CTA que contiene un CHIP (valor seleccionado de extras o cupo)
   va en FILA: caption a la izquierda y chip a la derecha, con wrap si no cabe
   (igual que el diseño: .searcher__cta:has(.chip)). */
.pl-modal .searcher__cta:has(.chip) {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-2);
}
.pl-modal .searcher__cta:has(.chip) > .searcher__cta-botton {
  width: auto;
  padding-top: 0;
}
/* El wrapper del caption no debe ocupar el 100% (mi base sí lo hace), si no el
   chip se va a la línea de abajo con flex-wrap. Que crezca pero deje sitio al
   chip a su derecha (caption izquierda / chip derecha, igual que el diseño). */
.pl-modal .searcher__cta:has(.chip) > .searcher__cta-wrapper {
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
}
.pl-modal .searcher__cta:has(.chip) .searcher__cta-caption,
.pl-modal .searcher__cta:has(.searcher__cta-summary) .searcher__cta-caption {
  color: var(--text-neutral-default);
}

/* ============================================================
   CTAs dentro de una MODAL (add-vehicle-extras, etc.): padding lateral
   garantizado y separación compacta entre items (no el padding de panel).
   ============================================================ */
.pl-modal .modal__content .searcher__ctas {
  padding: var(--spacing-5) !important;
  gap: var(--spacing-5) !important;
}
.pl-modal .modal__content .searcher__cta {
  padding: 0 0 var(--spacing-5) !important;
}
.pl-modal .modal__content .searcher__cta:last-child {
  padding-bottom: 0 !important;
  border-bottom: none !important;
}
/* Hub de extras del vehículo: plIgualarFilasExtras (JS) da a cada fila la altura
   que tendría con su opción elegida, para que no cambie al elegir. El contenido
   se centra en vertical dentro de esa altura: las filas sin elegir van en
   columna (justify) y las que tienen chip en fila con wrap (align-content). */
[data-extras-modify-list] > .searcher__cta:not(:has(.chip)) { justify-content: center; }
[data-extras-modify-list] > .searcher__cta:has(.chip) { align-content: center; }

/* ============================================================
   Radio (atoms/radio.css) + field--radio EN LÍNEA (faltaba portar:
   por eso los radios salían encima del texto en las modales).
   ============================================================ */
.pl-modal .radio {
  accent-color: var(--background-primary-default);
  appearance: none;
  background-color: var(--background-neutral-extra-weak);
  border-radius: var(--radius-full);
  border: var(--border-width-1) solid var(--border-neutral-dark);
  cursor: pointer;
  height: var(--spacing-4);
  width: var(--spacing-4);
  transition: all var(--transition-fast);
  flex-shrink: 0;
}
.pl-modal .radio:hover:not(:checked) {
  border-color: var(--border-primary-default);
  border-width: var(--border-width-3);
}
.pl-modal .radio:checked:not(:disabled) {
  background-position: center;
  background-repeat: no-repeat;
  border-color: var(--border-primary-default);
}
.pl-modal .radio--sm { height: var(--spacing-5); width: var(--spacing-5); }
.pl-modal .radio--sm:checked:not(:disabled) {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='6' r='6' transform='matrix(1 0 0 -1 0 12)' fill='%23008193'/%3E%3C/svg%3E%0A");
}
.pl-modal .field--radio,
.pl-modal .field--checkbox {
  flex-direction: row !important;
  align-items: center;
  gap: var(--spacing-4);
}
.pl-modal .field--radio .field__label,
.pl-modal .field--checkbox .field__label {
  color: var(--text-neutral-default);
  font-size: var(--text-sm);
  position: static;
  transform: none;
}
.pl-modal .field--bold .field__label { font-weight: var(--font-semibold); }
.pl-modal .list-menu__item .field--radio { width: 100%; }

/* Menos espacio vertical en los CTAs dentro de modal (estaba el padding de panel) */
.pl-modal .modal__content .searcher__ctas {
  /* Solo padding lateral: arriba y abajo ya lo ponen el padding de la primera y
     de la ultima fila; con el del contenedor encima quedaba doble. */
  padding: 0 var(--spacing-5) !important;
  /* Sin gap: la separacion la dan el padding de cada item y su borde inferior.
     Con el gap de arriba (--spacing-5) sumado al padding, el espacio entre filas
     no cuadraba con el de dentro de cada fila, y como el ultimo item ademas
     perdia su padding inferior, las filas del medio parecian mas altas que la
     ultima (equipaje / PORTABICIS / remolque en la modal de equipaje extra). */
  gap: 0 !important;
}
.pl-modal .modal__content .searcher__cta {
  padding: var(--spacing-3) 0 !important;
}
/* El ultimo conserva su padding inferior (sin borde, eso si): la regla de mas
   arriba se lo quitaba y la fila quedaba 8px mas baja que las demas. */
.pl-modal .modal__content .searcher__cta:last-child {
  padding-bottom: var(--spacing-3) !important;
}

/* ============================================================
   FERRY+HOTEL MOBILE — dropdowns full-screen + cabecera teal
   FH no tenía versión móvil (abría el dropdown desktop). En mobile los
   mostramos a pantalla completa con cabecera (atrás + título), reutilizando
   el contenido y los handlers de selección existentes.
   ============================================================ */
@media (max-width: 1023px) {
  #pl-dropdown-origin-fh.is-open,
  #pl-dropdown-destination-fh.is-open,
  #pl-dropdown-passengers-fh.is-open {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 60 !important;
    overflow-y: auto !important;
    box-shadow: none !important;
    background-color: var(--background-neutral-extra-weak) !important;
    padding: 0 !important;
  }
  /* Ocultar el mapa de la derecha en mobile */
  #pl-dropdown-origin-fh .searcher__dropdown-content-right,
  #pl-dropdown-destination-fh .searcher__dropdown-content-right { display: none !important; }
  #pl-dropdown-origin-fh .searcher__dropdown-content,
  #pl-dropdown-destination-fh .searcher__dropdown-content { display: block !important; }
  /* Cabecera móvil teal (inyectada por plFhMobileHeaderEnsure) */
  .pl-fh-mobile-head {
    display: flex;
    align-items: center;
    gap: var(--spacing-3);
    background-color: var(--background-primary-default);
    color: var(--text-neutral-extra-weak);
    padding: var(--spacing-4);
    position: sticky;
    top: 0;
    z-index: 2;
  }
  .pl-fh-mobile-head .pl-heading {
    margin: 0;
    font-size: var(--text-base);
    font-weight: var(--font-bold);
    color: var(--text-neutral-extra-weak);
  }
  .pl-fh-mobile-back {
    background: none;
    border: none;
    color: var(--text-neutral-extra-weak);
    cursor: pointer;
    display: flex;
    flex-shrink: 0;
    width: var(--spacing-6);
    height: var(--spacing-6);
    padding: 0;
  }
}
@media (min-width: 1024px) {
  .pl-fh-mobile-head { display: none !important; }
}

/* ============================================================
   MULTITRAYECTO MOBILE — 2º tramo full-screen (< 1024px)
   Mismo tratamiento que los dropdowns FH: el dropdown inline del
   2º tramo pasa a pantalla completa con cabecera teal + botón atrás
   (inyectada por plMjMobileHeaderEnsure).
   ============================================================ */
@media (max-width: 1023px) {
  #pl-dropdown-origin-mj.is-open,
  #pl-dropdown-destination-mj.is-open,
  #pl-dropdown-dates-mj.is-open {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    margin: 0 !important;
    border-radius: 0 !important;
    z-index: 60 !important;
    overflow-y: auto !important;
    box-shadow: none !important;
    background-color: var(--background-neutral-extra-weak) !important;
    padding: 0 !important;
  }
  /* Ocultar el mapa lateral en mobile y apilar el contenido */
  #pl-dropdown-origin-mj .searcher__dropdown-content-right,
  #pl-dropdown-destination-mj .searcher__dropdown-content-right { display: none !important; }
  #pl-dropdown-origin-mj .searcher__dropdown-content,
  #pl-dropdown-destination-mj .searcher__dropdown-content,
  #pl-dropdown-dates-mj .searcher__dropdown-content { display: block !important; }

  /* El calendario del 2º tramo ocupa el ancho completo en mobile */
  #pl-dropdown-dates-mj .searcher__dropdown-content-left { width: 100% !important; }

  /* En mobile el form apila en columna: reordenar para que el botón Buscar
     quede DESPUÉS del 2º tramo (como en patternlab), no entre leg1 y leg2.
     inputs(order 0) → multitrayecto(1) → Buscar(2). En desktop no se aplica
     (el form es flex-row con wrap y el orden DOM ya es correcto). */
  .pl-modal #pl-multijourney-row { order: 1; }
  .pl-modal #pl-buscar-btn { order: 2; }

  /* Botón eliminar 2º tramo: patternlab no lo muestra en mobile → ocultar
     (se sale del multitrayecto cambiando de pestaña de tipo de viaje). */
  #pl-multijourney-row .pl-mj-remove-wrap { display: none !important; }
}

/* ============================================================
   MOBILE DATES MODAL — FERRY+HOTEL — #searcher-dates-fh-modal
   Mismos estilos que #searcher-dates-modal (calendario FH movido aquí).
   ============================================================ */
#searcher-dates-fh-modal {
  background: var(--background-neutral-extra-weak);
  border: none;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', var(--font-primary), sans-serif;
  height: 100%;
  inset: 0;
  margin: 0;
  max-height: 100%;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  position: fixed;
  width: 100%;
  z-index: var(--z-index-10);
}
#searcher-dates-fh-modal:not([open]) { display: none; }

@media (min-width: 1024px) {
  #searcher-dates-fh-modal { display: none !important; }
}

/* Inner layout */
#searcher-dates-fh-modal .modal__content {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  overflow: hidden;
  width: 100%;
}
#searcher-dates-fh-modal .modal__body {
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
  width: 100%;
}
#searcher-dates-fh-modal .searcher-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  width: 100%;
}

/* Header teal — sin input-search */
#searcher-dates-fh-modal .searcher-item__header {
  background-color: var(--background-primary-default);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding: var(--spacing-4);
}
#searcher-dates-fh-modal .searcher-item__header-content {
  align-items: center;
  display: flex;
  gap: var(--spacing-3);
}
#searcher-dates-fh-modal .searcher-item__close-btn {
  background: none;
  border: none;
  color: var(--text-neutral-extra-weak);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: var(--spacing-6);
  padding: 0;
  width: var(--spacing-6);
}
#searcher-dates-fh-modal .searcher-item__title {
  color: var(--text-neutral-extra-weak);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  margin: 0;
}

/* Body scrollable */
#searcher-dates-fh-modal .searcher-item__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

/* ── Checkbox Ruta alternativa ── */
#searcher-dates-fh-modal .searcher__alternative {
  border-bottom: var(--border-width-1) solid var(--border-neutral-default);
  flex-shrink: 0;
  padding: var(--spacing-4) var(--spacing-5);
}
#searcher-dates-fh-modal .field--checkbox {
  align-items: center;
  cursor: pointer;
  display: flex;
  gap: var(--spacing-3);
}
#searcher-dates-fh-modal .field__label {
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}
#searcher-dates-fh-modal .searcher__cta-icon {
  color: var(--icon-primary-default);
  flex-shrink: 0;
  height: var(--spacing-5);
  width: var(--spacing-5);
}

/* ── Calendario: full-width, meses apilados verticalmente ── */
#searcher-dates-fh-modal .searcher__calendar {
  flex: 1;
  overflow-x: hidden;
  overflow-y: auto;
  padding: var(--spacing-4) 0;
  width: 100%;
}
#searcher-dates-fh-modal .litepicker {
  display: block !important;
  width: 100% !important;
}
#searcher-dates-fh-modal .container__main {
  width: 100% !important;
}
/* Mobile: celdas de tamaño FIJO (spacing-9, cuadradas) y calendario CENTRADO,
   como patternlab — no estiradas a ancho completo de pantalla.
   (El módulo no definía --litepicker-day-width en mobile, solo a 1280px.) */
#searcher-dates-fh-modal {
  --litepicker-day-width: var(--spacing-9);
  --litepicker-month-width: calc(var(--litepicker-day-width) * 7 + var(--spacing-1) * 6);
}
/* 2 meses apilados (PatternLab muestra columns-2 en desktop; en mobile 1 columna) */
#searcher-dates-fh-modal .container__months {
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
}
#searcher-dates-fh-modal .month-item {
  width: var(--litepicker-month-width) !important;
  max-width: 100% !important;
  margin: 0 auto !important;
}
/* Cabeceras de día de semana: misma rejilla (día-width + gap) que los días */
#searcher-dates-fh-modal .month-item-weekdays-row {
  gap: var(--spacing-1) !important;
  justify-content: center !important;
}
#searcher-dates-fh-modal .month-item-weekdays-row > div {
  width: var(--litepicker-day-width) !important;
}
/* Días: flex con gap, celdas de ancho fijo, centradas */
#searcher-dates-fh-modal .container__days {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--spacing-1) !important;
  /* flex-start, NO center: igual que en #searcher-dates-modal (ver alli). */
  justify-content: flex-start !important;
  width: 100% !important;
}
#searcher-dates-fh-modal .container__days > div,
#searcher-dates-fh-modal .container__days > a {
  border: none !important;
  margin: 0 !important;
  padding: 0 !important;
  width: var(--litepicker-day-width) !important;
}
#searcher-dates-fh-modal .day-item {
  text-align: left;
  width: 100% !important;
}

/* ============================================================
   MOBILE ORIGIN/DESTINATION MODALS — FERRY+HOTEL
   Mismos estilos que #searcher-origin-modal (chrome del modal).
   ============================================================ */
#searcher-origin-fh-modal {
  background: var(--background-neutral-extra-weak);
  border: none;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', var(--font-primary), sans-serif;
  height: 100%;
  inset: 0;
  margin: 0;
  max-height: 100%;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  position: fixed;
  width: 100%;
  z-index: var(--z-index-10);
}
#searcher-origin-fh-modal:not([open]) { display: none; }

@media (min-width: 1024px) {
  #searcher-origin-fh-modal { display: none !important; }
}

/* --- Inner layout PatternLab --- */
#searcher-origin-fh-modal .modal__body {
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
  width: 100%;
}
#searcher-origin-fh-modal .modal__content {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  overflow: hidden;
  width: 100%;
}
#searcher-origin-fh-modal .searcher-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  width: 100%;
}

/* --- Header teal (background-primary-default = rgb(0,129,147)) --- */
#searcher-origin-fh-modal .searcher-item__header {
  background-color: var(--background-primary-default);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
}
#searcher-origin-fh-modal .searcher-item__header-content {
  align-items: center;
  display: flex;
  gap: var(--spacing-3);
}
#searcher-origin-fh-modal .searcher-item__close-btn {
  background: none;
  border: none;
  color: var(--text-neutral-extra-weak);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: var(--spacing-6);
  padding: 0;
  width: var(--spacing-6);
}
#searcher-origin-fh-modal .searcher-item__title {
  color: var(--text-neutral-extra-weak);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  margin: 0;
}

/* Input de búsqueda dentro del header */
#searcher-origin-fh-modal .searcher-item__header .input-search {
  position: relative;
  width: 100%;
}
#searcher-origin-fh-modal .searcher-item__header .input-search__icon {
  color: var(--icon-neutral-default);
  height: var(--spacing-6);
  left: var(--spacing-4);
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--spacing-6);
}
#searcher-origin-fh-modal .searcher-item__header .input-search__input {
  background-color: var(--background-primary-weak);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-primary) !important;
  font-size: var(--text-sm);
  height: 3.5rem;
  outline: none;
  padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) var(--spacing-12);
  width: 100%;
}

/* --- Body scrollable (contendrá la lista de orígenes) --- */
#searcher-origin-fh-modal .searcher-item__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

/* --- searcher__list dentro del modal (flex row: categorías | contenido) --- */
#searcher-origin-fh-modal .searcher__list {
  display: flex;
  flex: 1;
  flex-direction: row;
  min-height: 0;
  overflow: hidden;
}
#searcher-origin-fh-modal .searcher__list-categories {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
  position: sticky;
  top: 0;
  width: 8.25rem;
}
#searcher-origin-fh-modal .searcher__list-categories-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  list-style: none;
  margin: 0;
  padding: var(--spacing-4) var(--spacing-3);
}
#searcher-origin-fh-modal .submenu__link {
  align-items: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-neutral-default);
  cursor: pointer;
  display: flex;
  font-size: var(--text-base);
  padding: var(--spacing-4) var(--spacing-5);
  text-align: left;
  transition: all var(--transition-fast);
  white-space: nowrap;
  width: 100%;
}
#searcher-origin-fh-modal .submenu__link:hover,
#searcher-origin-fh-modal .submenu__link.is-active {
  color: var(--text-primary-default);
}
#searcher-origin-fh-modal .submenu__link.is-active {
  background-color: var(--background-primary-selected-dark);
  font-weight: var(--font-semibold);
}
#searcher-origin-fh-modal .searcher__list-content {
  border-left: var(--border-width-1) solid var(--border-neutral-default);
  flex: 1;
  overflow-y: auto;
  position: relative;
}
#searcher-origin-fh-modal .searcher__list-panel {
  display: none;
  flex-direction: column;
}
#searcher-origin-fh-modal .searcher__list-panel.is-active {
  display: flex;
}

/* --- Items de origen (old style .item.separate adaptados) --- */
#searcher-origin-fh-modal .item.separate {
  align-items: flex-start;
  border-bottom: 1px solid var(--border-neutral-default);
  cursor: pointer;
  display: flex !important;
  flex-direction: column;
  padding: var(--spacing-3) var(--spacing-5);
}
#searcher-origin-fh-modal .item.separate:hover {
  background-color: var(--background-primary-weak);
}
#searcher-origin-fh-modal .item.separate .city {
  color: var(--text-neutral-strong);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  margin: 0;
}
#searcher-origin-fh-modal .item.separate .city .selected { display: none; }
#searcher-origin-fh-modal .item.separate .country {
  color: var(--text-neutral-dark);
  font-size: var(--text-xs);
}
/* Panel title */
#searcher-origin-fh-modal .searcher__list-panel-title {
  border-bottom: var(--border-width-2) solid var(--border-neutral-default);
  color: var(--text-neutral-strong);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  padding: var(--spacing-5);
}
/* Forzar visibilidad del contenedor de rutas dentro del modal */
#searcher-origin-fh-modal .g-dropdown-click--route { display: block !important; }
/* Ocultar el buscador de items (usa el search input del modal) */
#searcher-origin-fh-modal #origen-items { display: none !important; }

/* Sin padding heredado del viejo buscador */
#searcher-origin-fh-modal #route_g-dropdown-origin {
  padding: 0;
}

/* Ciudad + descripción: en línea si caben, apilados si no */
#searcher-origin-fh-modal .item.separate .info {
  align-items: baseline;
  column-gap: var(--spacing-3);
  display: flex;
  flex-wrap: wrap;
  row-gap: 0;
  width: 100%;
}
#searcher-origin-fh-modal .item.separate .city {
  display: inline;
}

/* Evitar scroll horizontal */
#searcher-origin-fh-modal .searcher__list {
  overflow-x: hidden;
}
#searcher-origin-fh-modal .searcher__list-content {
  overflow-x: hidden;
}
#searcher-origin-fh-modal .searcher-item__body {
  overflow-x: hidden;
}

#searcher-destination-fh-modal {
  background: var(--background-neutral-extra-weak);
  border: none;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', var(--font-primary), sans-serif;
  height: 100%;
  inset: 0;
  margin: 0;
  max-height: 100%;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  position: fixed;
  width: 100%;
  z-index: var(--z-index-10);
}
#searcher-destination-fh-modal:not([open]) { display: none; }

@media (min-width: 1024px) {
  #searcher-destination-fh-modal { display: none !important; }
}

/* --- Inner layout PatternLab --- */
#searcher-destination-fh-modal .modal__body {
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
  width: 100%;
}
#searcher-destination-fh-modal .modal__content {
  display: flex;
  flex-direction: column;
  margin-top: 0;
  overflow: hidden;
  width: 100%;
}
#searcher-destination-fh-modal .searcher-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  width: 100%;
}

/* --- Header teal (background-primary-default = rgb(0,129,147)) --- */
#searcher-destination-fh-modal .searcher-item__header {
  background-color: var(--background-primary-default);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: var(--spacing-4);
  padding: var(--spacing-4);
}
#searcher-destination-fh-modal .searcher-item__header-content {
  align-items: center;
  display: flex;
  gap: var(--spacing-3);
}
#searcher-destination-fh-modal .searcher-item__close-btn {
  background: none;
  border: none;
  color: var(--text-neutral-extra-weak);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: var(--spacing-6);
  padding: 0;
  width: var(--spacing-6);
}
#searcher-destination-fh-modal .searcher-item__title {
  color: var(--text-neutral-extra-weak);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  margin: 0;
}

/* Input de búsqueda dentro del header */
#searcher-destination-fh-modal .searcher-item__header .input-search {
  position: relative;
  width: 100%;
}
#searcher-destination-fh-modal .searcher-item__header .input-search__icon {
  color: var(--icon-neutral-default);
  height: var(--spacing-6);
  left: var(--spacing-4);
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--spacing-6);
}
#searcher-destination-fh-modal .searcher-item__header .input-search__input {
  background-color: var(--background-primary-weak);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-family: var(--font-primary) !important;
  font-size: var(--text-sm);
  height: 3.5rem;
  outline: none;
  padding: var(--spacing-3) var(--spacing-3) var(--spacing-3) var(--spacing-12);
  width: 100%;
}

/* --- Body scrollable (contendrá la lista de orígenes) --- */
#searcher-destination-fh-modal .searcher-item__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

/* --- searcher__list dentro del modal (flex row: categorías | contenido) --- */
#searcher-destination-fh-modal .searcher__list {
  display: flex;
  flex: 1;
  flex-direction: row;
  min-height: 0;
  overflow: hidden;
}
#searcher-destination-fh-modal .searcher__list-categories {
  align-self: flex-start;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  overflow-y: auto;
  position: sticky;
  top: 0;
  width: 8.25rem;
}
#searcher-destination-fh-modal .searcher__list-categories-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-3);
  list-style: none;
  margin: 0;
  padding: var(--spacing-4) var(--spacing-3);
}
#searcher-destination-fh-modal .submenu__link {
  align-items: center;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--text-neutral-default);
  cursor: pointer;
  display: flex;
  font-size: var(--text-base);
  padding: var(--spacing-4) var(--spacing-5);
  text-align: left;
  transition: all var(--transition-fast);
  white-space: nowrap;
  width: 100%;
}
#searcher-destination-fh-modal .submenu__link:hover,
#searcher-destination-fh-modal .submenu__link.is-active {
  color: var(--text-primary-default);
}
#searcher-destination-fh-modal .submenu__link.is-active {
  background-color: var(--background-primary-selected-dark);
  font-weight: var(--font-semibold);
}
#searcher-destination-fh-modal .searcher__list-content {
  border-left: var(--border-width-1) solid var(--border-neutral-default);
  flex: 1;
  overflow-y: auto;
  position: relative;
}
#searcher-destination-fh-modal .searcher__list-panel {
  display: none;
  flex-direction: column;
}
#searcher-destination-fh-modal .searcher__list-panel.is-active {
  display: flex;
}

/* --- Items de origen (old style .item.separate adaptados) --- */
#searcher-destination-fh-modal .item.separate {
  align-items: flex-start;
  border-bottom: 1px solid var(--border-neutral-default);
  cursor: pointer;
  display: flex !important;
  flex-direction: column;
  padding: var(--spacing-3) var(--spacing-5);
}
#searcher-destination-fh-modal .item.separate:hover {
  background-color: var(--background-primary-weak);
}
#searcher-destination-fh-modal .item.separate .city {
  color: var(--text-neutral-strong);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  margin: 0;
}
#searcher-destination-fh-modal .item.separate .city .selected { display: none; }
#searcher-destination-fh-modal .item.separate .country {
  color: var(--text-neutral-dark);
  font-size: var(--text-xs);
}
/* Panel title */
#searcher-destination-fh-modal .searcher__list-panel-title {
  border-bottom: var(--border-width-2) solid var(--border-neutral-default);
  color: var(--text-neutral-strong);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  padding: var(--spacing-5);
}
/* Forzar visibilidad del contenedor de rutas dentro del modal */
#searcher-destination-fh-modal .g-dropdown-click--route { display: block !important; }
/* Ocultar el buscador de items (usa el search input del modal) */
#searcher-destination-fh-modal #origen-items { display: none !important; }

/* Sin padding heredado del viejo buscador */
#searcher-destination-fh-modal #route_g-dropdown-origin {
  padding: 0;
}

/* Ciudad + descripción: en línea si caben, apilados si no */
#searcher-destination-fh-modal .item.separate .info {
  align-items: baseline;
  column-gap: var(--spacing-3);
  display: flex;
  flex-wrap: wrap;
  row-gap: 0;
  width: 100%;
}
#searcher-destination-fh-modal .item.separate .city {
  display: inline;
}

/* Evitar scroll horizontal */
#searcher-destination-fh-modal .searcher__list {
  overflow-x: hidden;
}
#searcher-destination-fh-modal .searcher__list-content {
  overflow-x: hidden;
}
#searcher-destination-fh-modal .searcher-item__body {
  overflow-x: hidden;
}

/* ============================================================
   MOBILE PASSENGERS MODAL — FERRY+HOTEL — #searcher-passengers-fh-modal
   Full-screen: header teal "Pasajeros", cuerpo scrollable con las
   habitaciones, footer "Confirmar" a ancho completo (Cancelar oculto,
   el botón atrás del header hace de cancelar). Como patternlab.
   ============================================================ */
#searcher-passengers-fh-modal {
  background: var(--background-neutral-extra-weak);
  border: none;
  display: flex;
  flex-direction: column;
  font-family: 'Inter', var(--font-primary), sans-serif;
  height: 100%;
  inset: 0;
  margin: 0;
  max-height: 100%;
  max-width: 100%;
  overflow: hidden;
  padding: 0;
  position: fixed;
  width: 100%;
  z-index: var(--z-index-10);
}
#searcher-passengers-fh-modal:not([open]) { display: none; }
@media (min-width: 1024px) {
  #searcher-passengers-fh-modal { display: none !important; }
}
#searcher-passengers-fh-modal .modal__body {
  display: flex;
  flex: 1 1 auto;
  overflow: hidden;
  width: 100%;
}
#searcher-passengers-fh-modal .modal__content {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin-top: 0;
  overflow: hidden;
  width: 100%;
}
#searcher-passengers-fh-modal .searcher-item {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  width: 100%;
}
/* Header teal */
#searcher-passengers-fh-modal .searcher-item__header {
  background-color: var(--background-primary-default);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  padding: var(--spacing-4);
}
#searcher-passengers-fh-modal .searcher-item__header-content {
  align-items: center;
  display: flex;
  gap: var(--spacing-3);
}
#searcher-passengers-fh-modal .searcher-item__close-btn {
  background: none;
  border: none;
  color: var(--text-neutral-extra-weak);
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  height: var(--spacing-6);
  padding: 0;
  width: var(--spacing-6);
}
#searcher-passengers-fh-modal .searcher-item__title {
  color: var(--text-neutral-extra-weak);
  font-size: var(--text-base);
  font-weight: var(--font-bold);
  margin: 0;
}
/* Body del modal: contenedor flex que recibe el dropdown movido entero */
#pl-passengers-fh-modal-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  padding: 0;
}
/* Neutralizar el chrome del dropdown (#pl-dropdown-passengers-fh) movido al
   modal y hacerlo llenar el espacio. Mantiene todas las reglas scopeadas a
   #pl-dropdown-passengers-fh (legacy oculto, CTAs en columna, edades…). */
#searcher-passengers-fh-modal #pl-dropdown-passengers-fh {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100% !important;
  inset: auto !important;
  margin: 0 !important;
  max-height: none !important;
  max-width: none !important;
  min-height: 0;
  overflow: hidden !important;
  padding: 0 !important;
  position: static !important;
  width: 100% !important;
  z-index: auto !important;
}
#searcher-passengers-fh-modal #pl-dropdown-passengers-fh .searcher__dropdown-content,
#searcher-passengers-fh-modal #pl-dropdown-passengers-fh .searcher__dropdown-content-left {
  display: flex !important;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
/* Habitaciones + CTAs: zona scrollable */
#searcher-passengers-fh-modal #pl-dropdown-passengers-fh .searcher-item__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: var(--spacing-5);
}
/* Footer pinned: Confirmar a ancho completo, Cancelar oculto */
#searcher-passengers-fh-modal #pl-dropdown-passengers-fh .bottom-bar {
  background: var(--background-neutral-extra-weak);
  border-top: var(--border-width-1) solid var(--border-neutral-default);
  flex-shrink: 0;
  padding: var(--spacing-4) var(--spacing-5);
}
#searcher-passengers-fh-modal .bottom-bar [data-fh-passenger-cancel] { display: none; }
#searcher-passengers-fh-modal .bottom-bar #pl-fh-passenger-confirm { width: 100%; }

/* ============================================================
   ORIGIN ARMAS — re-skin del searcher nuevo a la marca Naviera
   Armas (rojo). Se activa con la clase origin-armas en <html>, que
   inyecta view_new.jsp cuando LIFERAY_SHARED_siteOrigin = "armas"
   (igual que view.jsp y que el SCSS del theme origin-armas.scss, que
   solo cubre el diseño ANTIGUO). Como casi todo el color primario del
   diseño nuevo deriva de la escala --primary-*, redefinirla re-skina
   backgrounds, bordes, textos, botones y calendario de una vez.
   Rojos Armas: #dd052b (principal) / #ac0825 (oscuro).
   ============================================================ */
html.origin-armas {
  --primary-150: #ac0825;
  --primary-100: #dd052b;
  --primary-50:  #e8526a;
  --primary-20:  #f9d7db;
  --primary-10:  #faf3f3;
  /* fallbacks usados sin variable derivada (var(--x, #008193)) */
  --color-primary: #dd052b;
  --icon-primary-default: #dd052b;
}
/* Radio seleccionado: aro y punto en UN solo SVG que ocupa toda la caja, sin borde CSS.
   Con borde de 1px + punto de 12px centrado, al 125 %/150 % de escala (Edge) el borde y
   el punto se redondeaban a pixeles por separado y el punto salia descentrado. */
.pl-modal .radio--sm:checked,
.pl-modal .radio--sm:checked:not(:disabled),
#currency-modal .radio--sm:checked,
#add-passenger-bonus-modal .radio--sm:checked {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.5' fill='%23fff' stroke='%23008193'/%3E%3Ccircle cx='8' cy='8' r='6' fill='%23008193'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  border-width: 0;
}
/* Punto rojo de radios seleccionados (SVG con teal embebido) */
html.origin-armas .pl-modal .radio--sm:checked,
html.origin-armas .pl-modal .radio--sm:checked:not(:disabled),
html.origin-armas #currency-modal .radio--sm:checked,
html.origin-armas #add-passenger-bonus-modal .radio--sm:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='7.5' fill='%23fff' stroke='%23dd052b'/%3E%3Ccircle cx='8' cy='8' r='6' fill='%23dd052b'/%3E%3C/svg%3E");
}
/* Tick rojo de checkbox seleccionado (SVG con teal embebido) */
html.origin-armas .pl-modal .checkbox:checked {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='12' height='12' rx='2' fill='%23dd052b'/%3E%3C/svg%3E");
}
/* ── Calendario movil: recuperar la CAJA de los dias ──────────────────────
   Los resets de arriba (#searcher-dates-modal .container__days > div) anulan
   border y padding para neutralizar formenteraExpress, pero se llevaban por
   delante la caja de los dias: sin padding ni altura, el fondo blanco se encoge
   al tamaño del numero y no se distingue del fondo. Por eso los dias salian como
   numeros sueltos en vez de las tarjetas de la maqueta.

   SIN BORDES: en la maqueta los dias no llevan borde. Lo que los separa es el
   contraste entre el fondo del calendario (gris, --background-neutral-weak) y el
   de cada dia (blanco). */
#searcher-dates-modal .container__days .day-item,
#searcher-dates-fh-modal .container__days .day-item {
  box-sizing: border-box !important;
  border: none !important;
  border-radius: var(--radius-sm) !important;
  height: var(--spacing-9) !important;
  padding: var(--spacing-3) !important;
  text-align: left !important;
}
/* El fondo blanco SOLO en los dias sin estado. Si se aplica a todos, aplasta el
   teal de is-start-date/is-end-date/is-in-range y el dia elegido queda blanco
   sobre blanco: invisible. */
#searcher-dates-modal .container__days .day-item:not(.is-start-date):not(.is-end-date):not(.is-in-range),
#searcher-dates-fh-modal .container__days .day-item:not(.is-start-date):not(.is-end-date):not(.is-in-range) {
  background-color: var(--background-neutral-extra-weak) !important;
}
/* Estados de seleccion, con los colores de la maqueta. */
#searcher-dates-modal .container__days .day-item.is-start-date,
#searcher-dates-modal .container__days .day-item.is-end-date,
#searcher-dates-fh-modal .container__days .day-item.is-start-date,
#searcher-dates-fh-modal .container__days .day-item.is-end-date {
  background-color: var(--background-primary-default) !important;  /* #008193 */
  color: var(--text-neutral-extra-weak) !important;                /* blanco */
}
#searcher-dates-modal .container__days .day-item.is-in-range:not(.is-start-date):not(.is-end-date),
#searcher-dates-fh-modal .container__days .day-item.is-in-range:not(.is-start-date):not(.is-end-date) {
  background-color: var(--background-primary-selected-dark) !important;  /* #e2f1f3 */
  color: var(--text-primary-dark) !important;                            /* #006876 */
}

/* Hover: main.css deja `color: white !important` del buscador clasico. Si el fondo
   se queda blanco, el numero desaparece: era lo que pasaba al pasar el raton.
   Se fija el par completo (fondo teal + texto blanco), como el buscador clasico.
   Los :not() de estado son para pesar mas que la regla del fondo blanco de abajo;
   sin ellos ganaba ella y el dia tocado en movil quedaba blanco sobre blanco. */
#searcher-dates-modal .container__days .day-item:hover:not(.is-locked):not(.is-start-date):not(.is-end-date):not(.is-in-range),
#searcher-dates-fh-modal .container__days .day-item:hover:not(.is-locked):not(.is-start-date):not(.is-end-date):not(.is-in-range) {
  background-color: var(--background-primary-default) !important;
  color: var(--text-neutral-extra-weak) !important;
  box-shadow: none !important;
}

/* Dias bloqueados: sin caja teal ni hover gris; solo el numero apagado. */
#searcher-dates-modal .container__days .day-item.is-locked:not(.is-start-date):not(.is-end-date),
#searcher-dates-modal .container__days .day-item.is-locked:hover:not(.is-start-date):not(.is-end-date),
#searcher-dates-fh-modal .container__days .day-item.is-locked:not(.is-start-date):not(.is-end-date),
#searcher-dates-fh-modal .container__days .day-item.is-locked:hover:not(.is-start-date):not(.is-end-date) {
  background-color: var(--background-neutral-extra-weak) !important;
  color: var(--litepicker-is-locked-color) !important;
  border: none !important;
}

/* Cabeceras LUN/MAR/... no son celdas: sin caja. */
#searcher-dates-modal .container__days .day-item.day-name,
#searcher-dates-fh-modal .container__days .day-item.day-name {
  background-color: transparent !important;
  height: auto !important;
  padding: var(--spacing-3) 0 !important;
  text-align: center !important;
}

/* ── Calendario movil: fondo y rejilla ────────────────────────────────────
   1) .litepicker se pinta BLANCO y tapaba el #f8f8f8 del contenedor: por eso
      el fondo se seguia viendo blanco aunque #pl-calendar fuera correcto.
   2) Los dias tenian ancho FIJO (48px): 7 celdas + 6 gaps = 348px dentro de un
      contenedor de 384, mientras la fila de LUN/MAR/... ocupa el ancho completo.
      Por eso los dias no cuadraban debajo de su dia de la semana. Se reparte el
      ancho entre 7 columnas para que ambas filas coincidan. */
@media (max-width: 767px) {
  .litepicker {
    margin: 0;
    left: 0 !important;
    transform: initial !important;
    top: 0 !important;
    bottom: 0 !important;
    background: #f8f8f8;
  }

  #searcher-dates-modal .container__days > div,
  #searcher-dates-modal .container__days > a,
  #searcher-dates-fh-modal .container__days > div,
  #searcher-dates-fh-modal .container__days > a {
    width: calc((100% - 6 * var(--spacing-1)) / 7) !important;
  }
}

/* ── Loader: forzar el overlay visible mientras esta abierto ──────────────
   Sintoma: al buscar en movil aparece un BLOQUE BLANCO en vez del loader. El
   modal esta correcto (.is-open + aria-hidden="false") pero su .modal__overlay
   llega con `style="display: none"` EN LINEA, puesto en tiempo de ejecucion.

   PARCHE, no arreglo de raiz: no he conseguido identificar quien lo escribe.
   Descartados con pruebas: jQuery .hide() (instrumentado, no dispara),
   BaleariaModule.open/closeMicroModal, BaleariaModalModule (solo toca
   body.overflow) y el JSP del portlet balearia-modal-loader.
   Sospecha abierta: el script de pagina de la BBDD que reescribe style.cssText
   de todos los elementos con atributo [style]. */
#modal-loader.is-open .modal__overlay,
#pl-modal-loader.is-open .modal__overlay {
  display: flex !important;
}

/* ── Modal de bonificaciones: altura de fila como la maqueta ──────────────
   La regla general `.pl-modal .list-menu__item` da padding 16px al <li>, pero el
   <label> de dentro ya trae 12px 16px: sumados daban filas de 78px frente a las
   ~54px del diseño. PatternLab no pone padding al <li> (solo cursor:pointer):
   el espaciado lo aporta el label. Se anula aqui, solo en este modal. */
#add-passenger-bonus-modal .list-menu__item {
  padding: 0;
  min-height: 0;
}
#add-passenger-bonus-modal .list-menu__item > label {
  width: 100%;
}

/* ── Canarias: sin etiqueta ambiental ──────────────────────────────────────
   Es un requisito de las rutas peninsulares/baleares. La marca pl-canarias la
   pone _modal.jsp en la raiz de la modal.

   Se apaga por CSS y no con un <% if %> en _vehicle_etiqueta_select.jsp porque
   ese parcial se incluye ONCE veces de forma estatica: el scriptlet se
   multiplicaba por once en _jspService y reventaba el limite de 64 KB de
   bytecode ("code too large for try statement"), dejando el portlet en blanco. */
/* Alto de los paneles de vehiculo (motos, ciclomotores, coche, caravana).
   Se apilaban cuatro separaciones de 16px que no hacian falta:
     - el heading repetia el padding-top del contenedor (16 + 16)
     - entre el titulo de la card y la fila del cupo habia gap 16 + padding-top 16
     - el .searcher__cta de dentro metia otros 8
     - cada .counter llevaba margin-bottom 8 ademas del gap del grid
   La card baja de 111px a 83 y el desplegable de 300 a 256, sin tocar tipografias
   ni el diseno de la tarjeta. */
.pl-modal .searcher__counters--vehicles .searcher__counters-row-heading {
  padding-top: 0;
}
.pl-modal .searcher__counters--vehicles .counter:has(.counter__ctas) {
  gap: var(--spacing-2);
}
.pl-modal .searcher__counters--vehicles .counter__ctas {
  padding-top: var(--spacing-3);
}
.pl-modal .searcher__counters--vehicles .counter__ctas .searcher__cta {
  padding-top: 0;
}
.pl-modal .searcher__counters--vehicles .counter {
  margin-bottom: 0;
}

/* Clase de la moto (_moto_class_radios.jsp): filas compactas, que son tres encima de la
   tarjeta. Y sin cupo en la ruta (plUpdateCupoAvailability lo oculta en linea) la fila
   de CTAs de la tarjeta se queda vacia: fuera, para que no deje hueco. */
.pl-modal .pl-moto-class .list-menu__item {
  min-height: 0;
  padding-bottom: var(--spacing-4);
  padding-top: var(--spacing-4);
}
.pl-modal [data-panel-id^="moto"] .counter__ctas:not(:has(.searcher__cta:not([style*="none"]))) {
  display: none;
}
.pl-modal [data-panel-id^="moto"] .counter:not(:has(.counter__ctas .searcher__cta:not([style*="none"]))) {
  align-items: center;
}
/* El titulo es la clase elegida y es largo: que se parta en dos lineas antes que mandar
   el contador a otra fila (la tarjeta tiene flex-wrap por la fila del cupo). */
.pl-modal [data-panel-id^="moto"] .counter__content {
  flex: 1 1 0;
  min-width: 0;
}

/* Canarias solo opera "Ida y vuelta" y "Solo ida": ni vuelta abierta ni
   multitrayecto. La regla de negocio ya vive en el portlet
   (BaleariaSearcherPortlet.getTravelTypeOptions(), que excluye ambos modos para
   canarias, caribe, argelia, Formentera Express y el Armas externo), pero el
   diseno pinta los modos como pestanas fijas en _modal.jsp en vez de recorrer esa
   lista, asi que hay que apagarlas.

   Se apagan por CSS y NO con un scriptlet en el JSP a proposito: view_new.jsp esta
   pegado al limite de 64 KB de bytecode de _jspService y cualquier bloque Java
   nuevo lo tira con "code too large for try statement" (probado: se queda sin
   pintar el buscador entero). La clase .pl-canarias ya la pone el unico scriptlet
   que hay en la raiz del modal, asi que esto no cuesta bytecode.

   !important porque plSyncTripModeTabs() (searcher-new.js) usa jQuery .toggle(),
   que escribe display en el style inline del boton. */
.pl-modal.pl-canarias #searcher-tabs .tablinks[data-tripmode="vuelta-abierta"],
.pl-modal.pl-canarias #searcher-tabs .tablinks[data-tripmode="multiple"] {
  display: none !important;
}

.pl-modal.pl-canarias .pl-etiqueta-eco {
  display: none !important;
}

/* ── Loader de respaldo: que se vea TAMBIEN sin el tema ───────────────────
   El loader se apoyaba entero en el tema de Balearia: .micromodal-slide
   (display none/block), .modal__overlay (fixed + fondo oscuro) y
   .modal__container (tarjeta blanca) viven en booking-theme/common/_modal.scss.
   En una pagina que NO lleve ese tema, el modal se abre pero queda transparente
   y sin caja: se pulsa Buscar y no se ve nada. Paso en DEV.

   Estos valores son LOS MISMOS que los del tema (overlay rgba(0,0,0,.6),
   tarjeta blanca de 500px, radio 4px, padding 30px, margen 14px), asi que donde
   el tema si esta el aspecto no cambia.

   Se engancha por .pl-loader y no por el id: searcher-new.js renombra el div a
   "modal-loader" cuando el portlet central no esta en la pagina. */
.pl-loader {
  display: none;
}
.pl-loader.is-open {
  display: block;
}
.pl-loader .modal__overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10050;
}
.pl-loader .modal__container {
  background-color: #fff;
  border-radius: 4px;
  box-sizing: border-box;
  margin: 14px;
  max-height: 90vh;
  max-width: 500px;
  overflow-y: auto;
  padding: 30px;
  height: auto;
}
/* Sin el tema no hay utilidades o-* / u-*: el contenido queda apilado y centrado. */
.pl-loader .modal__container img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
.pl-loader .modal__container p,
.pl-loader .modal__container span {
  display: block;
  text-align: center;
}

/* ── Avisos del motor POR ENCIMA del buscador ────────────────────────────
   Estos modales son los de siempre (view.jsp los pinta con .modal
   .micromodal-slide y z-index 1200) y los abre baleariaSearcherModule al
   cancelar la busqueda. El buscador rediseñado es un modal a pantalla completa
   con z-index 9999, asi que el aviso salia DETRAS: pulsabas Buscar, la busqueda
   se cancelaba en silencio y no veias nada. Sintoma tipico: codigo promocional
   que no aplica a esa ruta o esas fechas ("Lo sentimos, la busqueda no cumple
   con las condiciones del codigo promocional o el codigo no existe").

   Por debajo del loader (10050), que debe seguir tapandolo todo. */
#modal-error-promotional-code,
#modal-error-carnet-joven,
#modal-error-carnet-joven-ok {
  z-index: 10010;
}

/* ── Canarias: Ferry y Ferry + hotel ─────────────────────────────────────
   Baleària Canarias no vende Hotel ni Actividades. El portlet lo resuelve asi en
   getTabLinks() (BaleariaSearcherPortlet: para canarias, Ferry y Ferry-Hotel),
   pero el rediseno pinta las cuatro pestanas fijas en _modal.jsp y _searchbar.jsp
   en vez de recorrer esa lista.

   Se apagan por CSS y no con un scriptlet, por lo de siempre: view_new.jsp esta
   pegado al limite de 64 KB de bytecode de _jspService. La clase .pl-canarias la
   ponen la raiz de la modal y la de la barra colapsada.

   Cubre las dos barras de pestanas: #pl-routes-tabs (modal) y
   #pl-routes-tabs-external (barra). */
.pl-canarias [data-target-form="hotel"],
.pl-canarias [data-target-form="actividades"] {
  display: none !important;
}
/* El <li> que envuelve una pestana apagada tampoco tiene que ocupar. */
.pl-canarias .tabs-nav__item:has([data-target-form="hotel"]),
.pl-canarias .tabs-nav__item:has([data-target-form="actividades"]) {
  display: none !important;
}

/* ── Ciclomotores y patinetes: el corte va por RUTA, no por site ─────────
   AQUI HABIA UN CORTE POR SITE (.pl-canarias) Y ERA INCORRECTO. Produccion no
   mira el site, mira la ruta (BaleariaSearcherRenderSelectVehicle.java:51):

     boolean isCanarias = isCanariasOTAS(originNode, destinationNode)
                       || isAlboranOTAS(originNode, destinationNode, redirectFromArmas);

   y con eso select_vehicle_items.jsp pinta el V1 (ciclomotor) solo si
   !isCanarias, y el PE (patinete) solo si !isFredOlsen && !isCanarias.

   Es la distincion de isCanarias() frente a isCanariasOTAS() que ya esta
   documentada en .claude/rules/gotchas-liferay.md: geografica contra seleccion
   de proveedor. El site de Canarias NO vende solo rutas de Armas; tambien las
   peninsulares de Baleària (Cadiz-Arrecife, Cadiz-Las Palmas...), donde
   produccion SI ofrece ciclomotor. Cortando por site desaparecian ahi.

   El corte correcto ya lo hacia plUpdateVehicleTypesAvailability() en
   searcher-new.js, que usa plRouteIsOta() =
   plIsCanariasOtasRoute() || plIsAlboranOtasRoute(), el espejo exacto del Java.
   Este CSS lo pisaba con !important. Se quita y manda el JS. */

/* ── Cuadro blanco sobre el loader ────────────────────────────────────────
   El tema (/o/balearia-theme-css/css/main.css) trae el .modal del sistema de
   diseno NUEVO, sin scope:

     .modal { background-color: var(--background-neutral-extra-weak);
              border-radius: var(--radius-md) var(--radius-md) 0 0;
              height: min-content }

   Los loaders son markup LEGACY de micromodal (<div class="modal
   micromodal-slide" id="modal-loader">) y comparten esa clase, asi que se
   tragaban el fondo claro y el height:min-content: salia un rectangulo de
   390x230 fijo arriba mientras su .modal__overlay (fixed, inset 0) si cubria
   la pantalla. De ahi el "cuadro blanco" al pulsar Buscar.

   Esto se arregla de verdad en el tema, acotando su .modal para que no pise
   el markup legacy. Mientras tanto se neutraliza aqui SOLO para los loaders,
   no para todos los .micromodal-slide, para no mover otras modales. */
#modal-loader.micromodal-slide,
#pl-modal-loader.micromodal-slide,
.pl-loader.micromodal-slide {
  background-color: transparent !important;
  border-radius: 0 !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ── Calendario descentrado en escritorio ─────────────────────────────────
   El main.css del tema arrastra el centrado del diseno VIEJO, donde el
   calendario iba posicionado en absoluto:

     @media (max-width: 1450px) { .litepicker { margin-left: 0; left: 50% !important } }

   Aqui el calendario es position:relative dentro de #pl-calendar, que ya lo
   centra con flex (justify-content:center). Ese left:50% se calcula sobre el
   propio calendario (1080px a partir de 1280px de viewport), asi que lo empujaba
   540px a la derecha: se salia del panel y aparecia cortado por la derecha.

   Se anula de 768px hacia arriba, en Ferry y en Ferry + hotel (#pl-calendar-fh):
   por debajo manda la regla de movil de este mismo fichero (max-width: 767px),
   que lo fija a left:0. */
@media (min-width: 768px) {
  .pl-modal #pl-calendar .litepicker,
  .pl-modal #pl-calendar-fh .litepicker {
    left: auto !important;
    margin-left: 0 !important;
  }
}

/* ── Pasajeros: contadores en rejilla de dos columnas ─────────────────────
   .searcher__counters ya es display:grid, pero a una sola columna: los cuatro
   contadores salian apilados en un panel estrecho. La maqueta los quiere en 2x2
   (Seniors | Adultos / Ninos | Bebes) con Mascotas a lo ancho debajo.

   Mascotas NO entra aqui: vive fuera de .searcher__counters, asi que se queda
   a ancho completo sin tocar nada.

   Solo escritorio: en movil el panel es full-screen y la columna unica es la
   correcta. Ojo, en las rutas que ofrecen "Jovenes" son CINCO contadores y la
   ultima fila queda a un solo elemento; es el comportamiento normal de una
   rejilla y coincide con lo que hace la maqueta al haber impares. */
@media (min-width: 1024px) {
  /* OJO: hay DOS .searcher__counters en el panel. El primero lleva los contadores
     de edades; el segundo lleva SOLO Mascotas. Sin acotar, Mascotas tambien se
     partia en dos columnas y se quedaba en la celda izquierda con medio panel
     vacio al lado. El :has solo deja pasar el contenedor que tiene mas de un
     contador, que es el de edades. */
  .pl-modal #pl-dropdown-passengers .searcher__counters:has(> [data-counter-item]:nth-child(2)) {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Leyenda "Ruta alternativa" ───────────────────────────────────────────
   Antes era un checkbox de verdad que no hacia nada. Ahora es un recuadro que
   reproduce el borde dotted de los dias alternativos del calendario, con las
   mismas variables que .day-item.is-alternative, para que se lea como leyenda. */
.pl-modal .pl-alt-legend {
  align-items: center;
  display: flex;
  /* La clase .field del sistema de diseño trae flex-direction:column y un ancho
     del 100%: el recuadro se iba al centro de la fila y el icono caia debajo del
     texto. Se fuerzan direccion y ancho aqui. */
  flex-direction: row !important;
  gap: var(--spacing-3);
  justify-content: flex-start;
  width: auto !important;
}
/* El texto y el icono de informacion, juntos y en linea con el recuadro. */
.pl-modal .pl-alt-legend .pl-flex-row {
  align-items: center;
  display: flex;
  gap: var(--spacing-2);
  width: auto;
}
/* .field__label es la etiqueta FLOTANTE de los campos del sistema de diseño:
   position:absolute con top/left fijos y un transform que la sube. Dentro de la
   leyenda no hay campo sobre el que flotar, asi que se montaba encima del
   recuadro. Aqui es texto normal en el flujo. */
.pl-modal .pl-alt-legend .field__label {
  position: static !important;
  transform: none !important;
  white-space: nowrap;
}
.pl-modal .pl-alt-legend__swatch {
  border: var(--border-width-2) dotted var(--text-neutral-medium, #979797);
  border-radius: var(--radius-sm);
  display: inline-block;
  flex: none;
  height: var(--spacing-6);
  width: var(--spacing-6);
}

/* ── Hover de los dias de RUTA ALTERNATIVA: se mantiene dotted ────────────
   La regla de hover de los dias hace `border: none !important` para quitar el
   borde de los dias normales, y de paso se llevaba el dotted que identifica a
   los alternativos: al pasar el raton pasaba a borde solido y el dia dejaba de
   distinguirse. Se repone con mas especificidad (id + clase del alternativo).

   Van las dos clases porque el dia lo marca uno u otro segun quien pinte:
   is-alternative en PatternLab, day-item-alternative en BaleariaCalendarModule. */
#searcher-modal .litepicker .container__days .day-item.is-alternative:hover,
#searcher-modal .litepicker .container__days .day-item.day-item-alternative:hover,
#searcher-dates-modal .container__days .day-item.is-alternative:hover,
#searcher-dates-modal .container__days .day-item.day-item-alternative:hover,
#searcher-dates-fh-modal .container__days .day-item.is-alternative:hover,
#searcher-dates-fh-modal .container__days .day-item.day-item-alternative:hover {
  /* Sin el recuadro interior (box-shadow inset) del hover de los días normales:
     en el alternativo lo que cambia es el COLOR de la línea discontinua. */
  border: var(--border-width-2) dotted var(--border-primary-dark, #006876) !important;
  box-shadow: none !important;
}

/* ── Codigo promocional siempre en MAYUSCULAS ────────────────────────────
   El valor ya se pasaba a mayusculas al pulsar Aplicar, pero mientras escribias
   se veia en minusculas. Esto lo muestra en mayusculas desde la primera tecla;
   el valor real lo normaliza el listener de searcher-new.js. */
.pl-modal #pl-promo-input {
  text-transform: uppercase;
}

/* ============================================================
   .pl-heading — títulos del buscador que antes eran h2/h3/h4.
   Revisión SEO (sept. 2026): los modales ocultos del buscador metían 2 H2,
   1 H3 y ~60 H4 al principio de la home, delante de las secciones reales.
   Ahora son <div class="... pl-heading">. Esta regla reproduce lo único que
   Clay daba a los h* y que el reset del tema no pisa (peso 500, interlineado
   1.2). Va con :where() (especificidad 0) para que cualquier clase existente
   (.heading, .counter__title, .searcher-item__title…) siga mandando igual que
   antes mandaba sobre la etiqueta.
   ============================================================ */
:where(.pl-heading) {
  font-weight: 500;
  line-height: 1.2;
}

/* Dentro del buscador (.pl-modal) el tema base resetea los h*:
     .pl-modal h1…h6 { font-size: inherit; font-weight: inherit;
                       line-height: var(--leading-tight); text-wrap: balance; }
     .pl-modal h1…h6 { margin: 0; }
   con especificidad 0,1,1: les ganaba a las clases sueltas (.heading,
   .heading--base…, 0,1,0) y perdía contra reglas de 0,2,0 o más. Aquí,
   .pl-modal :where(.pl-heading) es 0,1,0 y es la ÚLTIMA regla del fichero,
   así que le gana a esas mismas clases (van antes) y sigue perdiendo contra
   lo de 0,2,0: el resultado visual es el mismo que con los h*.
   Debe seguir siendo la última regla de este fichero. */
.pl-modal :where(.pl-heading) {
  font-size: inherit;
  font-weight: inherit;
  line-height: var(--leading-tight);
  margin: 0;
  text-wrap: balance;
}

/* ── Remolque (add-trailer-modal / remove-trailer-modal) ─────────────────
   Diseño de PatternLab (bc-templates-searcher-add/remove-trailer-modal): altura y
   longitud por separado, cada grupo con su dibujo, "Confirmar" y el aviso de
   remolques de más de 7 m al pie. Las utilidades del diseño (px-5, w-25, h-15…)
   no están en esta hoja: se traducen aquí con sus mismos valores. */
#add-trailer-modal .pl-remolque .modal__content, #remove-trailer-modal .pl-remolque .modal__content {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-6);
  padding-top: var(--spacing-5);
}
#remove-trailer-modal .pl-remolque .modal__content { padding-top: 0; }
#add-trailer-modal .pl-remolque__grupo, #remove-trailer-modal .pl-remolque__grupo {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-4);
  padding-inline: var(--spacing-5);
}
#add-trailer-modal .pl-remolque__titulo, #remove-trailer-modal .pl-remolque__titulo {
  color: var(--text-neutral-default);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
}
#add-trailer-modal .pl-remolque__fila, #remove-trailer-modal .pl-remolque__fila {
  align-items: center;
  display: flex;
  gap: var(--spacing-4);
}
#add-trailer-modal .pl-remolque__imagen, #remove-trailer-modal .pl-remolque__imagen {
  align-items: center;
  background-color: var(--background-neutral-weak);
  border-radius: var(--radius-sm);
  display: flex;
  flex-shrink: 0;
  height: var(--spacing-15, 6rem);
  justify-content: center;
  padding: var(--spacing-5);
  width: var(--spacing-25, 11rem);
}
#add-trailer-modal .pl-remolque__imagen img, #remove-trailer-modal .pl-remolque__imagen img { width: auto; max-width: 100%; }
#add-trailer-modal .pl-remolque__img--alto, #remove-trailer-modal .pl-remolque__img--alto  { height: var(--spacing-9, 3rem); }
#add-trailer-modal .pl-remolque__img--largo, #remove-trailer-modal .pl-remolque__img--largo { height: var(--spacing-10, 3.5rem); }
#add-trailer-modal .pl-remolque__opciones, #remove-trailer-modal .pl-remolque__opciones { flex: 1; min-width: 0; }
#add-trailer-modal .pl-remolque__confirmar, #remove-trailer-modal .pl-remolque__confirmar { width: 100%; }
#add-trailer-modal .pl-remolque__confirmar:disabled, #remove-trailer-modal .pl-remolque__confirmar:disabled { cursor: not-allowed; opacity: .5; }
#add-trailer-modal .pl-remolque__aviso, #remove-trailer-modal .pl-remolque__aviso {
  align-items: center;
  background-color: var(--background-neutral-weak);
  border-top: var(--border-width-1) solid var(--border-neutral-default);
  display: flex;
  gap: var(--spacing-3);
  padding: var(--spacing-6) var(--spacing-5);
}
#add-trailer-modal .pl-remolque__aviso[hidden], #remove-trailer-modal .pl-remolque__aviso[hidden] { display: none; }
#add-trailer-modal .pl-remolque__aviso-icono, #remove-trailer-modal .pl-remolque__aviso-icono {
  color: var(--icon-info-default, currentColor);
  flex-shrink: 0;
  height: var(--spacing-5);
  width: var(--spacing-5);
}
#add-trailer-modal .pl-remolque__aviso-texto, #remove-trailer-modal .pl-remolque__aviso-texto {
  flex: 1;
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  margin: 0;
}
@media (max-width: 479px) {
  /* En móvil estrecho el dibujo encoge para que las opciones quepan al lado. */
  #add-trailer-modal .pl-remolque__imagen, #remove-trailer-modal .pl-remolque__imagen { width: 7rem; padding: var(--spacing-3); }
}

/* ── Tooltip de "Ruta alternativa" (leyenda del calendario) ──────────────
   Componente .tooltip del diseño (el mismo que el aviso de "Añadir otra/otro").
   Lo posiciona searcher-new.js (plAltTooltip) en fixed; la flecha va donde
   esté el icono (--pl-flecha-x). */
.pl-modal .pl-alt-legend__info {
  align-items: center;
  border-radius: 50%;
  cursor: help;
  display: inline-flex;
  outline-offset: 2px;
  position: relative;
}
.pl-modal .pl-alt-tooltip {
  cursor: default;
  white-space: normal;
  width: min(19.875rem, calc(100vw - 16px));
  z-index: 10020;
}
.pl-modal .pl-alt-tooltip.tooltip--top-center::after {
  left: var(--pl-flecha-x, 50%);
}
.pl-modal .pl-alt-tooltip .tooltip__title,
.pl-modal .pl-alt-tooltip .tooltip__text {
  display: block;
}
.pl-modal .pl-alt-tooltip .tooltip__text {
  color: var(--text-neutral-default);
  font-size: var(--text-sm);
  font-weight: var(--font-regular, 400);
  line-height: 1.5;
}

/* ── X para borrar origen / destino (searcher-new.js, plBotonesBorrarRuta) ── */
.pl-modal .input-search__clear {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 50%;
  color: var(--icon-neutral-default, var(--text-neutral-default));
  cursor: pointer;
  display: none;
  height: var(--spacing-7, 2rem);
  justify-content: center;
  padding: 0;
  position: absolute;
  right: var(--spacing-2, .5rem);
  top: 50%;
  transform: translateY(-50%);
  width: var(--spacing-7, 2rem);
  z-index: 2;
}
.pl-modal .input-search__clear:hover { background-color: var(--background-primary-selected, rgba(0, 0, 0, .06)); }
.pl-modal .input-search__clear svg { height: var(--spacing-5); width: var(--spacing-5); }
.pl-modal .input-search.pl-con-valor .input-search__clear { display: flex; }
.pl-modal .input-search.pl-con-valor .input-search__input { padding-right: var(--spacing-9); }

/* ── Tarjeta blanca del buscador en ESCRITORIO (también al "Editar búsqueda") ──
   Estas reglas venían SOLO del main.css del booking theme (su copia .pl-modal del
   diseño), no de esta hoja. Donde la página carga otra versión del tema o la CE
   balearia-theme-css sin la base (pasó en PRE el 24/09), el formulario se quedaba
   sin fondo blanco ni esquinas redondeadas sobre el teal. Se copian aquí solo las
   de ASPECTO (fondo, radio, relleno), no las que muestran u ocultan columnas.
   Con #searcher-modal ganan también a CSS propio del layout que las pise. */
@media (min-width: 1024px) {
  #searcher-modal .search-bar__wrapper {
    background-color: transparent;
    padding: 0;
  }
  #searcher-modal .search-bar__tabs {
    background-color: var(--background-neutral-extra-weak, #fff);
    border-radius: var(--radius-md, 1rem) var(--radius-md, 1rem) 0 0;
    padding: var(--spacing-3, .5rem);
    width: fit-content;
  }
  #searcher-modal .search-bar__form {
    background-color: var(--background-neutral-extra-weak, #fff);
    border-radius: var(--radius-md, 1rem);
    padding: var(--spacing-3, .5rem);
  }
}
/* Regla aparte: sin :has() el navegador descartaría también la de arriba. */
@media (min-width: 1024px) {
  #searcher-modal .search-bar__wrapper:has(.search-bar__tabs) .search-bar__form {
    border-top-left-radius: 0;
  }
}

/* ── Modal de extras del vehículo (hub) como el diseño ───────────────────
   PatternLab: bc-templates-searcher-add/remove-vehicle-extras-modal. La regla
   general ".pl-modal .modal__content .searcher__ctas" compacta las filas de todas
   las modales (sin relleno ni gap, 8px por fila); aquí el diseño quiere 24px
   arriba y abajo, 16px entre filas y 16px bajo cada una (la última sin borde),
   la etiqueta en gris mientras no hay nada elegido y el chip pequeño (26px). */
#add-vehicle-extras-modal [data-extras-modify-list],
#add-caravan-extras-modal [data-extras-modify-list] {
  gap: var(--spacing-5) !important;
  padding: var(--spacing-6) var(--spacing-5) !important;
}
#add-vehicle-extras-modal [data-extras-modify-list] > .searcher__cta,
#add-caravan-extras-modal [data-extras-modify-list] > .searcher__cta {
  padding: 0 0 var(--spacing-5) !important;
}
#add-vehicle-extras-modal [data-extras-modify-list] > .searcher__cta:last-child,
#add-caravan-extras-modal [data-extras-modify-list] > .searcher__cta:last-child {
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
#add-vehicle-extras-modal [data-extras-modify-list] .searcher__cta-caption,
#add-caravan-extras-modal [data-extras-modify-list] .searcher__cta-caption {
  color: var(--text-neutral-dark);
}
#add-vehicle-extras-modal [data-extras-modify-list] .chip,
#add-caravan-extras-modal [data-extras-modify-list] .chip {
  line-height: var(--leading-tight, 1.25);
  padding: var(--spacing-2) var(--spacing-3);
}
#add-vehicle-extras-modal [data-extras-modify-list] .chip__action svg,
#add-caravan-extras-modal [data-extras-modify-list] .chip__action svg {
  height: var(--spacing-5);
  width: var(--spacing-5);
}
/* Con un extra elegido (chip), la etiqueta pasa a negro como en el diseño. */
#add-vehicle-extras-modal [data-extras-modify-list] .searcher__cta:has(.chip) .searcher__cta-caption,
#add-caravan-extras-modal [data-extras-modify-list] .searcher__cta:has(.chip) .searcher__cta-caption {
  color: var(--text-neutral-default);
}
/* El chip no puede ser más ancho que la fila: en móvil el del remolque se salía
   del modal (scroll horizontal). Como el diseño, el texto se corta con "…". */
#add-vehicle-extras-modal [data-extras-modify-list] .searcher__cta-botton,
#add-caravan-extras-modal [data-extras-modify-list] .searcher__cta-botton {
  max-width: 100%;
  min-width: 0;
}
#add-vehicle-extras-modal [data-extras-modify-list] .chip,
#add-caravan-extras-modal [data-extras-modify-list] .chip {
  max-width: 100%;
  min-width: 0;
  overflow: hidden;
}

/* Barra de la página en móvil con una ruta puesta (plSincronizarBarraCerrada):
   el valor en el color normal, no en el gris del texto por defecto. */
.pl-test .search-bar__mobile input:not(:placeholder-shown) {
  color: var(--text-neutral-default);
  text-overflow: ellipsis;
}

/* X de los buscadores de las modales móviles de origen/destino: su input lleva
   padding propio por id (más fuerte que la regla general), así que el hueco
   para la X se reserva aquí. */
#searcher-origin-modal .searcher-item__header .input-search.pl-con-valor .input-search__input,
#searcher-destination-modal .searcher-item__header .input-search.pl-con-valor .input-search__input,
#searcher-origin-fh-modal .searcher-item__header .input-search.pl-con-valor .input-search__input,
#searcher-destination-fh-modal .searcher-item__header .input-search.pl-con-valor .input-search__input {
  padding-right: var(--spacing-9);
}