/* JeranJets — CORE styles
 * Funcionalidad de la app: forms de búsqueda, autocomplete, results,
 * trip detail, admin, debug console/panel, preview de aircraft,
 * stepper, payment, boarding pass, chat, currency.
 * Cárgalo DESPUÉS de web.css y ANTES de drawer.css. */


/* Cards */
.card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 24px; margin-bottom: 18px; box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.card-title { font-size: 16px; font-weight: 700; margin: 0 0 14px; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; }
.card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 12px; }

.page-head .link { font-size: 13px; }
.admin-head { display: flex; justify-content: space-between; align-items: center; }


/* Forms */
.form-card { max-width: 640px; margin: 0 auto; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; color: #4b5563; }
.field input, .field select, .field textarea {
    width: 100%; padding: 12px 14px; border: 1px solid #d1d5db; border-radius: 8px;
    font-size: 15px; color: #0b1f3a; background: #fff;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: #1152d4; box-shadow: 0 0 0 3px rgba(17,82,212,0.15); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } }


/* Flash messages */
.flash { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: 14px; }
.flash-success { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.flash-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.flash-info    { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }


/* ------------------------------------------------------------------ */
/*  Airport autocomplete — Google-Maps-style results                   */
/* ------------------------------------------------------------------ */
.autocomplete-dropdown { position: relative; }
.autocomplete-dropdown .ac-results {
    position: absolute; top: 6px; left: 0; right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    max-height: 420px;
    overflow-y: auto;
    z-index: 20;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .12);
    padding: 6px 0;
}

/* Each suggestion is a flex row: pin icon | text block */
.ac-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 18px;
    cursor: pointer;
    transition: background .12s ease;
    border-radius: 8px;
    margin: 2px 6px;
}
.ac-item:hover,
.ac-item.is-active {
    background: #eff6ff;
}
.ac-empty {
    color: #9ca3af;
    font-style: italic;
    padding: 18px;
    text-align: center;
}

.ac-icon {
    flex: 0 0 auto;
    width: 24px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1px;
}
.ac-pin {
    display: block;
    color: #5f6368;
}
.ac-item.is-active .ac-pin,
.ac-item:hover .ac-pin { color: #1152d4; }
.ac-item.is-active .ac-pin path,
.ac-item.is-active .ac-pin circle,
.ac-item:hover .ac-pin path,
.ac-item:hover .ac-pin circle { stroke: #1152d4; }

.ac-text {
    flex: 1 1 auto;
    min-width: 0;
}
.ac-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    font-size: 15px;
    line-height: 1.3;
    color: #0b1f3a;
    flex-wrap: wrap;
}
.ac-code {
    font-weight: 700;
    color: #1152d4;
    letter-spacing: .02em;
    font-size: 14px;
}
.ac-name {
    font-weight: 600;
    color: #0b1f3a;
}
.ac-sub {
    font-size: 13px;
    color: #6b7280;
    margin-top: 3px;
}


/* ------------------------------------------------------------------ */
/*  Search form (.form-search): big, airy origin/destination          */
/* ------------------------------------------------------------------ */
.form-search { padding: 22px 24px; }
.form-search .field { margin-bottom: 16px; }
.form-search .field label {
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    color: #0b1f3a;
    margin-bottom: 8px;
}

/* Big airport inputs with the pin icon inside */
.form-search .field-airport input {
    padding: 18px 18px 18px 50px;
    font-size: 17px;
    font-weight: 500;
    border-radius: 12px;
    border: 1.5px solid #d1d5db;
    background-color: #fff;
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='28' viewBox='0 0 22 28'><path d='M11 1.5C5.8 1.5 1.7 5.6 1.7 10.8c0 7 9.3 15.7 9.3 15.7s9.3-8.7 9.3-15.7C20.3 5.6 16.2 1.5 11 1.5z' fill='none' stroke='%235f6368' stroke-width='1.8'/><circle cx='11' cy='10.8' r='3.2' fill='none' stroke='%235f6368' stroke-width='1.8'/></svg>");
    background-repeat: no-repeat;
    background-position: 16px center;
    background-size: 20px 26px;
}
.form-search .field-airport input::placeholder { color: #9ca3af; font-weight: 400; }
.form-search .field-airport input:focus {
    border-color: #1152d4;
    box-shadow: 0 0 0 4px rgba(17,82,212,0.12);
    background-image:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='22' height='28' viewBox='0 0 22 28'><path d='M11 1.5C5.8 1.5 1.7 5.6 1.7 10.8c0 7 9.3 15.7 9.3 15.7s9.3-8.7 9.3-15.7C20.3 5.6 16.2 1.5 11 1.5z' fill='none' stroke='%231152d4' stroke-width='1.8'/><circle cx='11' cy='10.8' r='3.2' fill='none' stroke='%231152d4' stroke-width='1.8'/></svg>");
}

/* Date + pax row a bit taller too */
.form-search .grid-2 .field input { padding: 14px 16px; font-size: 15px; border-radius: 10px; }

.btn-lg { padding: 16px 22px; font-size: 16px; border-radius: 12px; margin-top: 6px; }


/* Flight cards */
.flight-card { padding: 18px 22px; }
.flight-card-body { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.flight-model { font-weight: 700; font-size: 16px; }
.flight-price { text-align: right; }
.price-value { font-weight: 700; font-size: 18px; color: #1152d4; }

/* Trip rows */
.trip-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; color: inherit; }
.trip-row:hover { text-decoration: none; box-shadow: 0 4px 14px rgba(0,0,0,.06); }
.trip-route { font-weight: 600; font-size: 16px; color: #0b1f3a; }

/* Badges */
.badge { display: inline-block; padding: 5px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.st-pending   { background: #fef3c7; color: #92400e; }
.st-quoted    { background: #dbeafe; color: #1e40af; }
.st-confirmed { background: #d1fae5; color: #065f46; }
.st-finish    { background: #ede9fe; color: #5b21b6; }
.st-closed    { background: #f3f4f6; color: #4b5563; }

/* KV dl */
.kv { display: grid; grid-template-columns: 140px 1fr; gap: 8px 16px; margin: 0; }
.kv dt { color: #6b7280; font-size: 13px; }

.kv dd { margin: 0; color: #0b1f3a; font-size: 14px; font-weight: 500; }
.flex-between { display: flex; justify-content: space-between; gap: 12px; }


/* Quotes */
.quote-card { border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 16px; margin-bottom: 12px; background: #fafbfc; }
.quote-title { font-weight: 600; color: #0b1f3a; }
.quote-message { background: #fff; border-left: 3px solid #1152d4; padding: 8px 12px; margin-top: 10px; font-size: 13px; color: #374151; }

/* Empty state */
.empty { text-align: center; padding: 40px 20px; color: #6b7280; }
.empty p { margin-bottom: 14px; }


/* Admin */
.filter-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.chip { padding: 6px 14px; border-radius: 999px; border: 1px solid #d1d5db; font-size: 13px; color: #4b5563; background: #fff; }
.chip-active { background: #0b1f3a; color: #fff; border-color: #0b1f3a; }
.chip:hover { text-decoration: none; }
.search-form { display: flex; gap: 8px; margin-bottom: 18px; }
.search-form input { flex: 1; padding: 10px 14px; border: 1px solid #d1d5db; border-radius: 8px; }
.admin-table-card { padding: 0; overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th, .admin-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #f3f4f6; font-size: 14px; }
.admin-table th { background: #f9fafb; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; font-weight: 700; }
.admin-table tr:hover td { background: #fafbfc; }
.markup-row { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.markup-row input { width: 110px; padding: 9px 12px; border: 1px solid #d1d5db; border-radius: 8px; }


.summary { background: #fafbfc; }

/* TODO: revisar si parte de este bloque (especialmente body.has-split
 * sobre .site-header/.site-footer) debería vivir en web.css. Se mantiene
 * en core porque es la capa funcional del home (form + map split). */

/* ------------------------------------------------------------------ */
/*  Home page split layout (form ↔ map)                                */
/* ------------------------------------------------------------------ */
/* Desktop: the right half of the viewport is a fixed map that takes the
   full 100vh. The whole rest of the page chrome (header, main content,
   footer) is constrained to the LEFT half via margin-right: 50vw, so the
   footer naturally appears only under the form column. On mobile the
   layout collapses to a single column with the map underneath the form. */

/* ---------- desktop (≥ 901px): map fixed on the right, 100vh ---------- */
@media (min-width: 901px) {
    /* Constrain all the normal page flow to the LEFT half of the viewport.
       The map sits position:fixed on the right. We target the body class
       directly (set by view() in helpers.php) so we don't depend on :has(). */
    body.has-split .site-header,
    body.has-split .site-footer {
        margin-right: 50vw;
    }
    /* The <main> is also .container — same element, so collapse both rules. */
    body.has-split main.container.main {
        margin-right: 50vw;
        max-width: none;
        padding: 24px 32px 40px;
    }
    body.has-split .site-header > .container { padding: 0 32px; }
    body.has-split .site-footer > .container { padding: 0 32px; }

    /* The form column flows normally inside the constrained .main. */
    .home-split { display: block; }

    .home-split__form {
        padding: 0;
    }
    .home-split__form .form-card { max-width: none; }
    .home-split__form .hero      { margin: 10px 0 24px; text-align: left; }
    .home-split__form .hero h1   { font-size: 30px; }

    /* Map: fixed to the right half, full viewport height. */
    .home-split__map {
        position: fixed;
        top: 0;
        right: 0;
        width: 50vw;
        height: 100vh;
        z-index: 50;            /* over normal content, below modals/dropdowns */
        background: #eef2f7;
        display: flex;
        flex-direction: column;
        margin: 0;
    }
    .home-map {
        flex: 1 1 auto;
        width: 100%;
        height: 100%;
        min-height: 0;
        background: #eef2f7;
    }
    .home-map__hint {
        margin: 0;
        padding: 8px 14px;
        font-size: 12px;
        color: #6b7280;
        background: rgba(255, 255, 255, 0.95);
        border-top: 1px solid #e5e7eb;
        text-align: center;
    }
}

/* ---------- mobile / tablet (≤ 900px): stacked, map below form ---------- */
@media (max-width: 900px) {
    .home-split { display: block; }
    .home-split__form { padding: 0; }
    body.has-split main.container.main { padding: 16px 14px 28px; }

    .home-split__map {
        /* Mobile: 100vh — el mapa ocupa toda la altura del viewport como
           pidió el usuario. Sin máximo, sin aire arriba. */
        margin-top: 6px;
        height: 100vh;
        min-height: 480px;
        display: flex;
        flex-direction: column;
        background: #eef2f7;
        border-radius: 14px;
        overflow: hidden;
        box-shadow: 0 4px 14px rgba(0,0,0,.08);
    }
    .home-map { flex: 1 1 auto; width: 100%; min-height: 0; }
    .home-map__hint {
        margin: 0; padding: 8px 14px;
        font-size: 12px; color: #6b7280;
        background: #fff; border-top: 1px solid #e5e7eb; text-align: center;
    }

    /* On mobile the page title and form inputs already have card padding,
       just make sure body and hero don't crowd the edges. */
    .form-search { padding: 18px; }
    .form-search .field-airport input { font-size: 16px; padding: 16px 16px 16px 46px; }
}


/* ------------------------------------------------------------------ */
/*  Results page — same split, polished left column                    */
/* ------------------------------------------------------------------ */
.results-head { margin-bottom: 20px; }
.results-head .back-link { font-size: 13px; color: #6b7280; }
.results-head .back-link:hover { color: #1152d4; }
.results-head h1 { font-size: 28px; margin: 8px 0 6px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.results-head h1 .arrow { color: #1152d4; font-weight: 400; }

/* Flight cards: wrap nicely on narrow widths, never stick to edges. */
.flight-card { padding: 18px 22px; margin-bottom: 14px; }
.flight-card-body {
    display: flex; align-items: center; justify-content: space-between;
    gap: 18px; flex-wrap: wrap;
}
.flight-info { flex: 1 1 220px; min-width: 0; }
.flight-price { text-align: right; flex: 0 0 auto; min-width: 130px; }
.flight-card .btn { flex: 0 0 auto; }

.flight-model { font-weight: 700; font-size: 16px; color: #0b1f3a; }
.flight-tagline { margin-top: 4px; font-size: 13px; }
.flight-category {
    display: inline-block;
    background: #eff6ff; color: #1152d4;
    font-weight: 600; font-size: 12px;
    padding: 2px 9px; border-radius: 999px;
    letter-spacing: .02em;
}
.flight-airport { margin-top: 6px; font-size: 12px; }
.flight-airport code { font-size: 11px; }

@media (max-width: 520px) {
    .flight-card { padding: 14px 16px; }
    .flight-card-body { gap: 12px; }
    .flight-price { text-align: left; }
    .flight-card .btn { width: 100%; }
    .results-head h1 { font-size: 22px; }
}

/* ── Filtros en el paso 2 (resultados): categoría + escalas ──────────── */
.results-filters {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0 0 16px;
}
.results-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.results-filter__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 13px;
    border: 1px solid var(--jj-line, #e8e8e8);
    border-radius: 999px;
    background: var(--jj-bg, #fff);
    color: var(--jj-ink, #0b1f3a);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .12s ease, background .12s ease;
}
.results-filter__chip:hover { border-color: var(--jj-ink, #0b1f3a); }
.results-filter__chip.is-active {
    background: var(--jj-ink, #0b1f3a);
    border-color: var(--jj-ink, #0b1f3a);
    color: #fff;
}
.results-filter__dot {
    width: 10px; height: 10px; min-width: 10px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.12);
    display: inline-block;
}
.results-filter__n {
    font-size: 11px;
    opacity: .65;
    font-variant-numeric: tabular-nums;
}
html[data-theme="dark"] .results-filter__chip { background: var(--jj-bg-soft); }
.results-filter__chip[disabled] { opacity: .4; cursor: not-allowed; }

/* Indicador Directo / con escala — mismo estilo neutro que el trip-badge
   (gris discreto, pastilla, mono). Solo cambia el icono. */
.flight-stops {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid var(--jj-line, #e8e8e8);
    border-radius: 999px;
    background: var(--jj-bg, #fff);
    color: var(--jj-ink-soft, #6b6b6b);
    font-family: var(--jj-font-mono, ui-monospace, monospace);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}
.flight-stops i { font-size: 11px; line-height: 1; }
.flight-stat__arrow { color: var(--jj-ink-soft, #9ca3af); font-weight: 400; margin: 0 1px; }
/* Pista informativa bajo el formulario de búsqueda (paso 1). */
.form-search__hint {
    display: flex; align-items: flex-start; gap: 6px;
    margin: 6px 0 12px;
    font-size: 12px; line-height: 1.45;
    color: var(--jj-ink-soft, #6b7280);
}
.form-search__hint i { margin-top: 2px; color: var(--jj-ink-soft, #6b7280); }

/* Pastilla "hora pendiente" (resumen paso 3 + página de gracias). Ámbar discreto. */
.step3-summary__note--pending,
.sent-summary__pending {
    display: inline-block;
    background: #fff7ed;
    color: #b45309;
    font-size: 11px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 999px;
    margin-left: 6px;
    vertical-align: middle;
}
.sent-summary__note { display: block; margin-top: 2px; font-size: 11px; color: var(--jj-ink-soft, #6b7280); }

/* (Estilos del antiguo bloque "Detalles del avión" en el paso 2 retirados.
    Se eliminó porque la info de find-aircraft no aporta al cliente; la ficha
    técnica se mantiene en el panel admin, donde sí vale al bróker.) */

/* Estado "sin resultados" mejorado (CTA al bróker + fechas cercanas). */
.empty-results { text-align: center; padding: 28px 22px; }
.empty-results__title { font-size: 16px; font-weight: 600; margin: 0 0 6px; }
.empty-results__dates { margin-top: 18px; }
.empty-results__dates-lbl { font-size: 13px; font-weight: 600; margin: 0 0 8px; }
.empty-results__date-chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

/* RTL para inputs funcionales del form-search y autocomplete (las RTL
 * del language switcher viven en web.css). */
html[dir="rtl"] .nav a       { margin-left: 0; margin-right: 24px; }
html[dir="rtl"] .form-search .field-airport input {
    padding: 18px 50px 18px 18px;
    background-position: calc(100% - 16px) center;
}
html[dir="rtl"] .ac-item { flex-direction: row-reverse; text-align: right; }


/* ------------------------------------------------------------------ */
/*  Flights preview list (rendered when origin is picked)              */
/* ------------------------------------------------------------------ */
.flights-preview-wrap { margin-top: 18px; }
.flights-preview-title {
    font-size: 12px; font-weight: 800; letter-spacing: .06em;
    text-transform: uppercase; color: #6b7280;
    margin: 0 0 10px;
}
.flights-preview-loading { font-size: 13px; color: #6b7280; padding: 14px; text-align: center; }
.flights-preview-empty   { font-size: 13px; color: #9ca3af; padding: 14px; text-align: center; font-style: italic; }

.flights-preview-list { display: flex; flex-direction: column; gap: 10px; }
.flights-preview-card {
    display: flex; align-items: center; gap: 14px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 12px 14px;
    transition: box-shadow .15s, transform .15s;
}
.flights-preview-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-1px); }

.flights-preview-card-left { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; }
.flights-preview-card-logo-wrap {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: #f3f4f6;
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto;
    position: relative;
    overflow: hidden;
}
.flights-preview-card-logo { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.flights-preview-card-logo-fallback { font-size: 22px; display: none; }
.flights-preview-card-logo-wrap.logo-failed .flights-preview-card-logo { display: none; }
.flights-preview-card-logo-wrap.logo-failed .flights-preview-card-logo-fallback { display: block; }

.flights-preview-card-route { min-width: 0; }
.route-airports { font-weight: 700; font-size: 14px; color: #0b1f3a; line-height: 1.3;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.route-meta { font-size: 12px; color: #6b7280; margin-top: 2px; }

.flights-preview-card-price { font-weight: 700; color: #0b1f3a; font-size: 15px; text-align: right; flex: 0 0 auto; }
.flights-preview-card-price small { display: block; font-size: 10px; font-weight: 500; color: #6b7280; margin-top: 1px; }

.btn-select-flight {
    background: #1152d4; color: #fff;
    border: none; border-radius: 8px;
    padding: 9px 16px; font-size: 12px; font-weight: 600;
    cursor: pointer; flex: 0 0 auto;
}
.btn-select-flight:hover { background: #0e44b3; }

@media (max-width: 520px) {
    .flights-preview-card { flex-wrap: wrap; gap: 10px; }
    .flights-preview-card-left { flex: 1 1 100%; }
    .flights-preview-card-price { flex: 1 1 auto; text-align: left; }
    .btn-select-flight { width: 100%; }
}

/* ------------------------------------------------------------------ */
/*  Debug panel (Avitor multi-variant trace)                           */
/* ------------------------------------------------------------------ */
.debug-panel {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 12px;
    padding: 14px 16px;
    margin: 16px 0 24px;
    font-size: 13px;
}
.debug-panel > summary {
    cursor: pointer;
    list-style: none;
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    color: #78350f;
}
.debug-panel > summary::-webkit-details-marker { display: none; }
.debug-panel > summary .meta { font-weight: 400; color: #92400e; font-size: 12px; }

.debug-attempts { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }

.debug-attempt {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-left: 4px solid #d1d5db;
    border-radius: 8px;
    padding: 10px 12px;
}
.debug-attempt.is-ok  { border-left-color: #16a34a; background: #f0fdf4; }
.debug-attempt.is-err { border-left-color: #ef4444; background: #fef2f2; }

.debug-attempt > summary {
    cursor: pointer;
    list-style: none;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.debug-attempt > summary::-webkit-details-marker { display: none; }
.debug-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 22px; height: 22px; border-radius: 50%;
    color: #fff; font-weight: 700; font-size: 12px;
}
.debug-attempt.is-ok  .debug-badge { background: #16a34a; }
.debug-attempt.is-err .debug-badge { background: #ef4444; }
.debug-label { font-weight: 600; color: #111827; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }
.debug-meta  { font-size: 11px; color: #6b7280; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.debug-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}
.debug-h {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: #6b7280;
    margin-bottom: 4px;
}
.debug-cols pre {
    background: #0b1f3a;
    color: #e5e7eb;
    border-radius: 6px;
    padding: 10px;
    margin: 0;
    overflow: auto;
    font-size: 11px;
    line-height: 1.5;
    max-height: 260px;
}
@media (max-width: 700px) {
    .debug-cols { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------------ */
/*  Progress Stepper — Premium booking flow progress indicator        */
/* ------------------------------------------------------------------ */
.stepper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    max-width: 640px;
    margin: 10px auto 30px auto;
    padding: 0 10px;
}
.stepper::before {
    content: '';
    position: absolute;
    top: 22px;
    left: 10%;
    right: 10%;
    height: 3px;
    background: #e5e7eb;
    z-index: 1;
}
.stepper-progress {
    position: absolute;
    top: 22px;
    left: 10%;
    height: 3px;
    background: #1152d4;
    z-index: 2;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.stepper-step {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    flex: 1;
    text-decoration: none;
    color: inherit;
    cursor: default;
}
a.stepper-step {
    cursor: pointer;
}
.stepper-circle {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #e5e7eb;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 16px;
    margin-bottom: 8px;
    transition: all 0.25s ease;
}
.stepper-label {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    transition: color 0.25s ease;
    white-space: nowrap;
}

/* Active step */
.stepper-step.is-active .stepper-circle {
    border-color: #1152d4;
    color: #1152d4;
    background: #eff6ff;
    box-shadow: 0 0 0 5px rgba(17, 82, 212, 0.12);
}
.stepper-step.is-active .stepper-label {
    color: #0b1f3a;
    font-weight: 700;
}

/* Completed step */
.stepper-step.is-completed .stepper-circle {
    border-color: #10b981;
    background: #10b981;
    color: #fff;
}
.stepper-step.is-completed .stepper-label {
    color: #10b981;
}

/* Hover effects for links */
a.stepper-step:hover .stepper-circle {
    border-color: #1152d4;
    color: #1152d4;
    background: #eff6ff;
}
a.stepper-step:hover .stepper-label {
    color: #1152d4;
}

/* Responsive adjustment for stepper labels */
@media (max-width: 520px) {
    .stepper-label {
        font-size: 10px;
        white-space: normal;
        max-width: 80px;
        line-height: 1.2;
    }
    .stepper-circle {
        width: 36px;
        height: 36px;
        font-size: 14px;
    }
    .stepper::before, .stepper-progress {
        top: 18px;
    }
}

/* ------------------------------------------------------------------ */
/*  Confirm Page 2-Column Grid (Desktop)                              */
/* ------------------------------------------------------------------ */
@media (min-width: 769px) {
    .confirm-grid {
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        gap: 30px;
        align-items: start;
    }
}

/* ==========================================================================
   Collapsible Debug Console Widget
   ========================================================================== */
.debug-console-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 380px;
    max-width: calc(100vw - 40px);
    background: #18191f;
    border: 1px solid #2d3139;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    z-index: 9999;
    color: #e3e6eb;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 45px;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s ease;
}

.debug-console-widget.is-expanded {
    max-height: 500px;
    width: 600px;
}

.debug-console-header {
    background: #20222a;
    padding: 12px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid #2d3139;
}

.debug-console-title {
    font-weight: 600;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #3b82f6;
}

.debug-console-summary {
    color: #9ca3af;
    font-size: 11px;
    font-weight: 400;
}

.debug-console-toggle {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    font-size: 10px;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.2s;
}

.debug-console-toggle:hover {
    color: #fff;
}

.debug-console-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: none;
    font-size: 12px;
}

.debug-console-widget.is-expanded .debug-console-body {
    display: block;
}

.debug-winning-variant {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 6px;
    padding: 8px 12px;
    margin-bottom: 12px;
    color: #34d399;
}

.debug-winning-variant code {
    background: rgba(0, 0, 0, 0.3);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: monospace;
    color: #a7f3d0;
}

.debug-no-attempts {
    color: #9ca3af;
    text-align: center;
    padding: 20px 10px;
    font-style: italic;
}

.debug-attempts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.debug-attempt-item {
    border: 1px solid #2d3139;
    border-radius: 6px;
    background: #1c1d24;
    overflow: hidden;
}

.debug-attempt-item.is-ok {
    border-left: 3px solid #10b981;
}

.debug-attempt-item.is-err {
    border-left: 3px solid #ef4444;
}

.debug-attempt-summary {
    padding: 8px 12px;
    cursor: pointer;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    background: #20222a;
}

.debug-attempt-summary::-webkit-details-marker {
    display: none;
}

.debug-badge {
    font-weight: bold;
    font-size: 13px;
}

.debug-attempt-item.is-ok .debug-badge { color: #10b981; }
.debug-attempt-item.is-err .debug-badge { color: #ef4444; }

.debug-label {
    color: #f3f4f6;
}

.debug-meta {
    margin-left: auto;
    font-size: 10px;
    color: #9ca3af;
}

.debug-attempt-details {
    padding: 12px;
    border-top: 1px solid #2d3139;
    background: #14151a;
    display: flex;
    gap: 12px;
}

.debug-detail-col {
    flex: 1;
    min-width: 0;
}

.debug-detail-h {
    font-weight: 600;
    color: #9ca3af;
    margin-bottom: 6px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.debug-attempt-details pre {
    margin: 0;
    padding: 8px;
    background: #0f1013;
    border-radius: 4px;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 10px;
    color: #34d399;
    max-height: 180px;
    border: 1px solid #20222a;
}

.debug-attempt-item.is-err pre {
    color: #fca5a5;
}

/* Adjust layout on mobile devices */
@media (max-width: 768px) {
    .debug-console-widget {
        bottom: 70px; /* Sit above the fixed mobile-nav-bar */
        right: 10px;
        left: 10px;
        width: auto;
        max-width: none;
    }
    .debug-console-widget.is-expanded {
        width: auto;
        max-height: 400px;
    }
    .debug-attempt-details {
        flex-direction: column;
    }
}

/* Premium Minimalist Scrollbars */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
    transition: background 0.2s;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Dark mode console scrollbars */
.debug-console-body::-webkit-scrollbar,
.ac-results::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
.debug-console-body::-webkit-scrollbar-thumb,
.ac-results::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}
.debug-console-body::-webkit-scrollbar-thumb:hover,
.ac-results::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ------------------------------------------------------------------ */
/*  Support Chat Box                                                  */
/* ------------------------------------------------------------------ */
.chat-container {
    display: flex;
    flex-direction: column;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    overflow: hidden;
    height: 450px;
    box-shadow: 0 4px 12px rgba(0,0,0,.03);
    margin-bottom: 20px;
}
.chat-header {
    background: #0b1f3a;
    color: #fff;
    padding: 14px 16px;
    font-weight: 700;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .05em;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.chat-messages {
    flex: 1;
    padding: 16px;
    overflow-y: auto;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.chat-bubble {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 13px;
    line-height: 1.5;
    position: relative;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
.chat-bubble-client {
    align-self: flex-end;
    background: linear-gradient(135deg, #1152d4, #0b1f3a);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.chat-bubble-admin {
    align-self: flex-start;
    background: #fff;
    color: #0b1f3a;
    border: 1px solid #e2e8f0;
    border-bottom-left-radius: 4px;
}
.chat-meta {
    font-size: 10px;
    margin-top: 4px;
    opacity: 0.7;
    text-align: right;
    display: block;
}
.chat-bubble-admin .chat-meta {
    color: #64748b;
}
.chat-bubble-client .chat-meta {
    color: #cbd5e1;
}
.chat-form {
    display: flex;
    padding: 10px;
    background: #fff;
    border-top: 1px solid #e5e7eb;
    gap: 8px;
}
.chat-form input {
    flex: 1;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 14px;
    background: #fff;
}
.chat-form input:focus {
    outline: none;
    border-color: #1152d4;
    box-shadow: 0 0 0 3px rgba(17,82,212,0.1);
}

/* ------------------------------------------------------------------ */
/*  Mock Payment Gateway & Credit Card                                */
/* ------------------------------------------------------------------ */
.payment-section {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}
@media (min-width: 769px) {
    .payment-section {
        grid-template-columns: 1fr 1fr;
    }
}
.card-preview-container {
    perspective: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    background: #f8fafc;
    border-radius: 12px;
    border: 1px dashed #e2e8f0;
}
.credit-card-mockup {
    width: 100%;
    max-width: 320px;
    height: 190px;
    border-radius: 16px;
    background: linear-gradient(135deg, #0b1f3a, #1152d4);
    color: #fff;
    padding: 20px;
    position: relative;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    overflow: hidden;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}
.card-shine {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0) 60%);
    border-radius: 16px;
    pointer-events: none;
}
.card-chip {
    width: 44px;
    height: 32px;
    background: linear-gradient(135deg, #fbbf24, #d97706);
    border-radius: 6px;
    margin-bottom: 10px;
    position: relative;
}
.card-chip::after {
    content: '';
    position: absolute;
    top: 4px; left: 8px; right: 8px; bottom: 4px;
    border: 1px solid rgba(255,255,255,0.25);
}
.card-logo {
    position: absolute;
    top: 20px;
    right: 20px;
    display: flex;
    align-items: center;
}
.card-logo-circle {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.9);
    display: inline-block;
}
.card-logo-circle-2 {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.9);
    display: inline-block;
    margin-left: -10px;
}
.card-number-display {
    font-size: 17px;
    letter-spacing: 2px;
    word-spacing: 2px;
    margin: 14px 0 8px 0;
    color: #f8fafc;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    text-align: center;
}
.card-bottom-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}
.card-holder-display {
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 1px;
    color: #cbd5e1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 170px;
}
.card-expiry-display {
    font-size: 11px;
    letter-spacing: 1px;
    color: #cbd5e1;
    text-align: right;
}
.card-expiry-label {
    font-size: 7px;
    color: #94a3b8;
    text-transform: uppercase;
    display: block;
}

.payment-tab-buttons {
    display: flex;
    border-bottom: 1px solid #e2e8f0;
    margin-bottom: 20px;
    gap: 4px;
}
.payment-tab-btn {
    flex: 1;
    padding: 12px;
    text-align: center;
    font-weight: 700;
    font-size: 13px;
    color: #64748b;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .05em;
    transition: all .2s;
}
.payment-tab-btn.is-active {
    color: #1152d4;
    border-bottom-color: #1152d4;
}
.payment-pane {
    display: none;
}
.payment-pane.is-active {
    display: block;
}
.wire-instructions {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    padding: 16px;
    font-size: 13px;
    line-height: 1.6;
}
.wire-table {
    width: 100%;
    margin-top: 10px;
    border-collapse: collapse;
}
.wire-table td {
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px solid #f1f5f9;
}
.wire-table td:first-child {
    font-weight: 600;
    color: #64748b;
    width: 35%;
}
.wire-table td:last-child {
    font-family: monospace;
    font-weight: 700;
    color: #0b1f3a;
}

/* ------------------------------------------------------------------ */
/*  Boarding Pass (Printable Airline-Style Ticket)                    */
/* ------------------------------------------------------------------ */
.boarding-pass-container {
    max-width: 750px;
    margin: 20px auto;
}
.boarding-pass {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 10px 25px rgba(0,0,0,0.06);
    position: relative;
}
@media (min-width: 769px) {
    .boarding-pass {
        flex-direction: row;
        height: 270px;
    }
}
.bp-main {
    flex: 3;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.bp-stub {
    flex: 1.1;
    background: #fafbfc;
    border-top: 2px dashed #e2e8f0;
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}
@media (min-width: 769px) {
    .bp-stub {
        border-top: none;
        border-left: 2px dashed #e2e8f0;
        background: #fafbfc;
    }
    .bp-stub::before, .bp-stub::after {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        background: #f7f5f0; /* matches body background */
        border-radius: 50%;
        left: -11px;
        z-index: 10;
        border: 1px solid #e2e8f0;
    }
    .bp-stub::before {
        top: -11px;
    }
    .bp-stub::after {
        bottom: -11px;
    }
}
.bp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #f1f5f9;
    padding-bottom: 12px;
    margin-bottom: 14px;
}
.bp-brand {
    font-weight: 800;
    font-size: 15px;
    color: #0b1f3a;
    display: flex;
    align-items: center;
    gap: 6px;
}
.bp-class {
    background: #0b1f3a;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.bp-flight-path {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}
.bp-airport-node {
    flex: 1;
}
.bp-airport-node:last-child {
    text-align: right;
}
.bp-code {
    font-size: 32px;
    font-weight: 800;
    color: #0b1f3a;
    line-height: 1;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.bp-city {
    font-size: 12px;
    color: #64748b;
    margin-top: 4px;
}
.bp-plane-icon {
    flex: 0 0 50px;
    text-align: center;
    color: #1152d4;
    font-size: 24px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bp-plane-icon::before {
    content: '';
    position: absolute;
    left: -20px;
    right: -20px;
    top: 50%;
    height: 1px;
    border-top: 2px dotted #cbd5e1;
    z-index: 1;
}
.bp-plane-icon svg {
    position: relative;
    z-index: 2;
    background: #fff;
    padding: 0 6px;
    width: 20px;
    height: 20px;
}
.bp-details-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 14px;
}
.bp-detail-item {
    display: flex;
    flex-direction: column;
}
.bp-detail-label {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    color: #94a3b8;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}
.bp-detail-value {
    font-size: 13px;
    font-weight: 700;
    color: #0b1f3a;
}
.bp-barcode-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 6px;
}
.bp-barcode-img {
    height: 36px;
    width: 100%;
    max-width: 320px;
    background-image: repeating-linear-gradient(90deg, #0b1f3a, #0b1f3a 2px, transparent 2px, transparent 5px, #0b1f3a 5px, #0b1f3a 7px, transparent 7px, transparent 9px);
    opacity: 0.85;
}
.bp-barcode-text {
    font-size: 10px;
    font-family: monospace;
    letter-spacing: 4px;
    margin-top: 4px;
    color: #64748b;
}
.bp-qr-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
}
.bp-qr-code {
    width: 84px;
    height: 84px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    padding: 6px;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bp-qr-code img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.bp-stub-route {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 8px 0;
}
.bp-stub-code {
    font-size: 18px;
    font-weight: 800;
    color: #0b1f3a;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
.bp-btn-print {
    margin-top: 14px;
    text-align: right;
}
@media print {
    body * {
        visibility: hidden;
    }
    .boarding-pass-container, .boarding-pass-container * {
        visibility: visible;
    }
    .boarding-pass-container {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
    }
    .bp-btn-print {
        display: none;
    }
}

/* ---- Cards ---- */
.card {
    background: var(--jj-bg) !important;
    border: 1px solid var(--jj-line) !important;
    border-radius: var(--jj-radius) !important;
    box-shadow: none !important;
    padding: 18px !important;
    margin-bottom: 14px !important;
}
.card-title {
    font-family: var(--jj-font-mono);
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em;
    color: var(--jj-ink) !important;
    text-transform: uppercase;
    margin-bottom: 12px !important;
}

/* ---- Inputs ---- */
.field label {
    font-family: var(--jj-font-mono);
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    color: var(--jj-ink) !important;
    margin-bottom: 6px !important;
}
.field input, .field select, .field textarea {
    background: var(--jj-bg) !important;
    border: 1px solid var(--jj-line) !important;
    border-radius: var(--jj-radius) !important;
    color: var(--jj-ink) !important;
    font-size: var(--jj-fs-md) !important;
    padding: 10px 12px !important;
    transition: border-color var(--jj-trans);
}
.field input:focus, .field textarea:focus, .field select:focus {
    border-color: var(--jj-ink) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* Form-search específico */
.form-search { padding: 16px !important; }
.form-search .field { margin-bottom: 14px !important; }
.form-search .field-airport input {
    border-radius: var(--jj-radius) !important;
    border: 1px solid var(--jj-line) !important;
    font-size: var(--jj-fs-md) !important;
    padding: 14px 14px 14px 42px !important;
    background-repeat: no-repeat !important;
    background-position: 14px center !important;
    background-size: 14px 14px !important;
}
.form-search .field-airport input::placeholder { color: var(--jj-ink-soft) !important; font-weight: 400 !important; }
.form-search .field-airport input:focus { border-color: var(--jj-ink) !important; }

/* ============================================================
 * SISTEMA VISUAL ORIGEN/DESTINO  ·  documentado en BIBLE_VISUAL.md
 * ------------------------------------------------------------
 * Regla absoluta:
 *   · ORIGEN     → pin teardrop ROSA  (#ff7eab) — accent
 *   · DESTINO    → pin teardrop NEGRO (#000)    — ink
 * El SVG es idéntico al usado por leaflet en /public/map.js (makePinIcon)
 * y por el helper PHP jj_pin_origin() / jj_pin_destination() en lib/helpers.php.
 * Si actualizas el shape acá, hay que actualizarlo en los tres sitios.
 * ============================================================ */
.form-search .field-airport input#origin {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='19' viewBox='0 0 22 30'><path d='M11 0C4.9 0 0 4.9 0 11c0 8.2 11 19 11 19s11-10.8 11-19C22 4.9 17.1 0 11 0z' fill='%23ff7eab'/><circle cx='11' cy='11' r='3.5' fill='%23fff'/></svg>") !important;
    background-size: 14px 19px !important;
    background-position: 16px center !important;
    padding-left: 42px !important;
}
.form-search .field-airport input#destination {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='19' viewBox='0 0 22 30'><path d='M11 0C4.9 0 0 4.9 0 11c0 8.2 11 19 11 19s11-10.8 11-19C22 4.9 17.1 0 11 0z' fill='%23000'/><circle cx='11' cy='11' r='3.5' fill='%23fff'/></svg>") !important;
    background-size: 14px 19px !important;
    background-position: 16px center !important;
    padding-left: 42px !important;
}

/* Componente reutilizable .jj-pin (renderizado por jj_pin_origin/destination)
   Úsalo en cualquier título, breadcrumb, card o tabla donde aparezca un par
   origen→destino. Siempre con el helper PHP — nunca hardcodees el SVG. */
.jj-pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 19px;
    line-height: 1;
    vertical-align: -3px;
    flex-shrink: 0;
}
.jj-pin .jj-pin-svg { display: block; width: 100%; height: 100%; }
/* Slightly larger version para h1 hero de results-head / trip_detail. */
.jj-pin--lg { width: 18px; height: 24px; vertical-align: -5px; }
.jj-pin--lg .jj-pin-svg { width: 18px; height: 24px; }
/* Diminutivo para listados densos como my_trips. */
.jj-pin--sm { width: 11px; height: 15px; vertical-align: -2px; }
.jj-pin--sm .jj-pin-svg { width: 11px; height: 15px; }

/* RTL: el ancla del pin sigue igual; los textos a su lado heredan dir=rtl. */
html[dir="rtl"] .form-search .field-airport input#origin,
html[dir="rtl"] .form-search .field-airport input#destination {
    background-position: calc(100% - 16px) center !important;
    padding-left: 14px !important;
    padding-right: 42px !important;
}

/* Route h1 — usado en results-head y trip_detail page-head.
   Las dos "legs" se envuelven y los pins se alinean con el texto.
   El layout es flex con wrap para que en mobile cada pierna baje sola. */
.route-h1 {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: -0.01em;
    line-height: 1.2;
}
.route-h1__leg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.route-h1__text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.route-h1 .arrow {
    color: var(--jj-ink-soft, #6b6b6b);
    font-weight: 400;
    font-size: 18px;
}
.route-h1__leg .jj-pin { margin-top: 1px; }

/* Inline route en card / dl / listado: kv-route, route-leg, route-leg__sep */
.kv-route, .trip-route {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}
.route-leg {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.route-leg__sep {
    color: var(--jj-ink-soft, #6b6b6b);
    font-weight: 400;
}
.trip-route .route-leg { font-weight: 700; }
.form-search .grid-2 .field input { padding: 10px 12px !important; font-size: var(--jj-fs-md) !important; border-radius: 0 !important; }


/* ---- Autocomplete dropdown ---- */
.autocomplete-dropdown .ac-results {
    border: 1px solid var(--jj-ink) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    top: 4px !important;
}
.ac-item {
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    gap: 12px !important;
    border-bottom: 1px solid var(--jj-line-soft);
}
.ac-item:last-child { border-bottom: none; }
.ac-item:hover, .ac-item.is-active { background: var(--jj-bg-soft) !important; }
.ac-item.is-active .ac-pin, .ac-item:hover .ac-pin { color: var(--jj-accent) !important; }
.ac-item.is-active .ac-pin path, .ac-item.is-active .ac-pin circle,
.ac-item:hover .ac-pin path, .ac-item:hover .ac-pin circle { stroke: var(--jj-accent) !important; }
.ac-code { color: var(--jj-ink) !important; font-family: var(--jj-font-mono); font-size: 11px !important; letter-spacing: 0.08em; }
.ac-name { color: var(--jj-ink) !important; font-weight: 500 !important; font-size: var(--jj-fs-md) !important; }
.ac-sub { color: var(--jj-ink-soft) !important; font-size: 11px !important; }

/* ---- Flight cards ---- */
.flight-card { padding: 16px 18px !important; border-radius: 0 !important; }
.flight-model { font-weight: 500 !important; font-size: var(--jj-fs-md) !important; color: var(--jj-ink) !important; letter-spacing: 0; }
.flight-tagline { font-size: 11px !important; color: var(--jj-ink-soft); }
.flight-category {
    background: var(--jj-bg) !important;
    color: var(--jj-ink) !important;
    border: 1px solid var(--jj-ink);
    border-radius: 0 !important;
    font-family: var(--jj-font-mono);
    font-size: 9px !important;
    letter-spacing: 0.1em;
    padding: 2px 7px !important;
}
.flight-airport {
    font-size: 12px !important;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.price-value { font-weight: 500 !important; font-size: var(--jj-fs-lg) !important; color: var(--jj-ink) !important; font-family: var(--jj-font-mono); letter-spacing: 0.02em; }
.flight-price small { font-family: var(--jj-font-mono); font-size: 9px !important; letter-spacing: 0.08em; text-transform: uppercase; }

/* Preview list home */
.flights-preview-title {
    font-family: var(--jj-font-mono);
    font-size: 10px !important;
    letter-spacing: 0.12em;
    color: var(--jj-ink) !important;
}
.flights-preview-card {
    border: 1px solid var(--jj-line) !important;
    border-radius: 0 !important;
    padding: 10px 12px !important;
    gap: 12px !important;
    transition: border-color var(--jj-trans), transform var(--jj-trans);
}
.flights-preview-card:hover {
    border-color: var(--jj-ink) !important;
    box-shadow: none !important;
    transform: none !important;
}
.flights-preview-card-logo-wrap {
    background: var(--jj-bg-soft) !important;
    border-radius: 0 !important;
    width: 36px !important;
    height: 36px !important;
}
.route-airports { font-size: var(--jj-fs-md) !important; font-weight: 500 !important; color: var(--jj-ink) !important; }
.route-meta { font-size: 10px !important; color: var(--jj-ink-soft) !important; }
.flights-preview-card-price { font-weight: 500 !important; font-size: var(--jj-fs-md) !important; color: var(--jj-ink) !important; font-family: var(--jj-font-mono); }
.flights-preview-card-price small { font-size: 9px !important; }
.btn-select-flight {
    background: var(--jj-ink) !important;
    color: var(--jj-bg) !important;
    border-radius: 0 !important;
    font-family: var(--jj-font-mono);
    font-size: 9px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
    padding: 8px 12px !important;
}
.btn-select-flight:hover { background: var(--jj-bg) !important; color: var(--jj-ink) !important; border: 1px solid var(--jj-ink); }

/* ---- Badges / status pills ---- */
.badge {
    border-radius: 0 !important;
    font-family: var(--jj-font-mono);
    font-size: 9px !important;
    letter-spacing: 0.12em !important;
    padding: 3px 8px !important;
    background: var(--jj-bg) !important;
    border: 1px solid var(--jj-ink);
    color: var(--jj-ink) !important;
}
/* Paleta completa de estados (badge outline). Cada estado, su color. */
.st-pending           { color:#b45309 !important; border-color:#f59e0b !important; }
.st-quoted            { color:#1e40af !important; border-color:#3b82f6 !important; }
.st-accepted          { color:#5b21b6 !important; border-color:#8b5cf6 !important; }
.st-paymentrequested  { color:#9a3412 !important; border-color:#fb923c !important; }
.st-paid              { color:#0f766e !important; border-color:#14b8a6 !important; }
.st-confirmed         { color:#065f46 !important; border-color:#10b981 !important; }
.st-finished          { color:#065f46 !important; border-color:#10b981 !important; }
.st-closed,
.st-cancelled         { color:#6b7280 !important; border-color:#9ca3af !important; }

/* ── Lista admin: acento de color a la izquierda de cada fila por estado ── */
.admin-table tbody tr { border-left: 4px solid var(--jj-line, #e8e8e8); }
.admin-table tbody tr.row-st-pending          { border-left-color:#f59e0b; }
.admin-table tbody tr.row-st-quoted           { border-left-color:#3b82f6; }
.admin-table tbody tr.row-st-accepted         { border-left-color:#8b5cf6; }
.admin-table tbody tr.row-st-paymentrequested { border-left-color:#fb923c; }
.admin-table tbody tr.row-st-paid             { border-left-color:#14b8a6; }
.admin-table tbody tr.row-st-confirmed,
.admin-table tbody tr.row-st-finished         { border-left-color:#10b981; }
.admin-table tbody tr.row-st-closed,
.admin-table tbody tr.row-st-cancelled        { border-left-color:#9ca3af; }

/* Marca "NUEVA" para solicitudes recién llegadas (pendientes < 48h). */
.tag-new {
    display:inline-block; margin-left:6px; padding:1px 6px; border-radius:999px;
    font-family: var(--jj-font-mono); font-size:8px; letter-spacing:.1em;
    background:#f59e0b; color:#fff; vertical-align:middle;
}

/* Leyenda de colores de estado. */
.status-legend { display:flex; flex-wrap:wrap; gap:12px; margin:0 0 14px; font-size:11px; color:var(--jj-ink-soft,#6b7280); }
.status-legend span { display:inline-flex; align-items:center; gap:5px; }
.status-legend i { width:10px; height:10px; border-radius:2px; display:inline-block; }

/* ---- Flash messages ---- */
.flash {
    border-radius: 0 !important;
    border: 1px solid !important;
    font-size: var(--jj-fs-md) !important;
}
.flash-success { background: var(--jj-bg) !important; border-color: var(--jj-success) !important; color: var(--jj-success) !important; }
.flash-error   { background: var(--jj-bg) !important; border-color: var(--jj-error)   !important; color: var(--jj-error)   !important; }
.flash-info    { background: var(--jj-bg) !important; border-color: var(--jj-ink)     !important; color: var(--jj-ink)     !important; }

/* ---- Stepper ---- */
.stepper { font-family: var(--jj-font-mono); }
/* Línea horizontal centrada con los círculos.
   Círculo Zara mide 24px (centro vertical = y:12px), así que la línea
   (1px) vive en top:11.5px → cruza el medio exacto de los números. */
.stepper::before {
    top: 11.5px !important;
    height: 1px !important;
    background: var(--jj-line) !important;
}
.stepper-progress {
    top: 11.5px !important;
    height: 1px !important;
    background: var(--jj-ink) !important;
}
.stepper-step .stepper-circle {
    background: var(--jj-bg) !important;
    color: var(--jj-ink) !important;
    border: 1px solid var(--jj-line) !important;
    border-radius: 50%;
    font-size: 10px !important;
    width: 24px !important; height: 24px !important;
    /* line-height fija para que el dígito quede ópticamente en el medio
       del círculo (el font-monospace tiende a sentarse 1px más bajo). */
    line-height: 1 !important;
    padding: 0 !important;
}
.stepper-step.is-active .stepper-circle { background: var(--jj-ink) !important; color: var(--jj-bg) !important; border-color: var(--jj-ink) !important; }
.stepper-step.is-completed .stepper-circle { background: var(--jj-accent) !important; color: var(--jj-bg) !important; border-color: var(--jj-accent) !important; }
.stepper-label { font-size: 9px !important; letter-spacing: 0.12em; text-transform: uppercase; color: var(--jj-ink-soft) !important; }
.stepper-step.is-active .stepper-label { color: var(--jj-ink) !important; }

/* Anula el subrayado global a:hover en los pasos clicables del stepper.
   El hover ya se comunica con cambio de color del número/label, no hace
   falta también una línea (que además queda mal sobre un dígito dentro
   de un círculo). */
a.stepper-step,
a.stepper-step:hover,
a.stepper-step:focus,
a.stepper-step:hover .stepper-circle,
a.stepper-step:hover .stepper-label {
    text-decoration: none !important;
}
/* Refresco visual al hover sobre pasos clicables (completed o linkables). */
a.stepper-step:hover .stepper-circle { border-color: var(--jj-ink) !important; }
a.stepper-step:hover .stepper-label  { color: var(--jj-ink) !important; }
a.stepper-step.is-completed:hover .stepper-circle {
    background: var(--jj-ink) !important;
    border-color: var(--jj-ink) !important;
}

/* ---- Map column ---- */
/* Antes: .home-split__map y .home-map usaban var(--jj-bg-soft) (#fafafa).
   Ahora unificados con el land color de CARTO Positron — se aplica abajo
   en el bloque "MAP 100%" al final del archivo. */
.home-map__hint  {
    font-family: var(--jj-font-mono);
    font-size: 9px !important;
    letter-spacing: 0.08em;
    color: var(--jj-ink-soft) !important;
    background: var(--jj-bg) !important;
    border-top: 1px solid var(--jj-line) !important;
}
/* Leaflet zoom controls minimal */
.leaflet-bar a {
    background: var(--jj-bg) !important;
    color: var(--jj-ink) !important;
    border-bottom: 1px solid var(--jj-line) !important;
    border-radius: 0 !important;
    width: 28px !important; height: 28px !important;
    line-height: 28px !important;
}
.leaflet-bar a:hover { background: var(--jj-ink) !important; color: var(--jj-bg) !important; }
.leaflet-bar { border: 1px solid var(--jj-ink) !important; border-radius: 0 !important; box-shadow: none !important; }
.leaflet-control-attribution { font-size: 9px !important; background: rgba(255,255,255,0.85) !important; }

/* ---- Chat ---- */
.chat-container { border: 1px solid var(--jj-line) !important; border-radius: 0 !important; box-shadow: none !important; }
.chat-header { background: var(--jj-ink) !important; color: var(--jj-bg) !important; font-family: var(--jj-font-mono); font-size: 10px !important; letter-spacing: 0.12em; text-transform: uppercase; }
.chat-bubble { border-radius: 0 !important; font-size: var(--jj-fs-md) !important; }
.chat-bubble-client { background: var(--jj-ink) !important; color: var(--jj-bg) !important; }
.chat-bubble-admin  { background: var(--jj-bg-soft) !important; color: var(--jj-ink) !important; border: 1px solid var(--jj-line); }
.chat-form input { border-radius: 0 !important; }

/* ---- Trip rows ---- */
.trip-row { border-radius: 0 !important; padding: 14px 16px !important; }
.trip-row:hover { box-shadow: none !important; background: var(--jj-bg-soft) !important; }
.trip-route { font-size: var(--jj-fs-md) !important; font-weight: 500 !important; color: var(--jj-ink) !important; }

/* ---- KV definition lists ---- */
.kv dt { font-family: var(--jj-font-mono); font-size: 10px !important; letter-spacing: 0.1em; text-transform: uppercase; color: var(--jj-ink-soft) !important; }
.kv dd { font-size: var(--jj-fs-md) !important; color: var(--jj-ink) !important; font-weight: 400 !important; }

/* ---- Debug console ---- */
.debug-console-widget {
    background: var(--jj-ink) !important;
    border: 1px solid var(--jj-ink) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.debug-console-header { background: #111 !important; border-bottom: 1px solid #222 !important; }
.debug-console-title { color: var(--jj-accent) !important; font-family: var(--jj-font-mono); font-size: 10px !important; letter-spacing: 0.12em; }
.debug-panel {
    background: var(--jj-bg-soft) !important;
    border: 1px solid var(--jj-line) !important;
    border-radius: 0 !important;
}
.debug-attempt { border-radius: 0 !important; }

/* ---- Confirm modal/info ---- */
#info-modal .card { border-radius: 0 !important; box-shadow: none !important; border: 1px solid var(--jj-ink); }

/* ---- Payment ---- */
.payment-tab-btn {
    font-family: var(--jj-font-mono) !important;
    font-size: 10px !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase;
    border-radius: 0 !important;
    padding: 10px 14px !important;
}
.payment-tab-btn.is-active { background: var(--jj-ink) !important; color: var(--jj-bg) !important; }

/* ---- Boarding pass minimalista ---- */
.bp-brand { font-family: var(--jj-font-mono); font-size: 11px !important; letter-spacing: 0.14em; }
.bp-class { font-family: var(--jj-font-mono); font-size: 9px !important; letter-spacing: 0.14em; }
.bp-code { font-family: var(--jj-font-mono); font-size: 28px !important; font-weight: 400 !important; letter-spacing: 0.02em; }
.bp-city { font-size: 11px !important; color: var(--jj-ink-soft); }
.bp-detail-label { font-family: var(--jj-font-mono); font-size: 9px !important; letter-spacing: 0.12em; text-transform: uppercase; }
.bp-detail-value { font-size: var(--jj-fs-md) !important; font-weight: 500 !important; }
.boarding-pass { border-radius: 0 !important; border: 1px solid var(--jj-ink) !important; box-shadow: none !important; }

/* ---- Quote cards ---- */
.quote-card { border-radius: 0 !important; border: 1px solid var(--jj-line) !important; background: var(--jj-bg) !important; }
.quote-title { font-weight: 500 !important; font-size: var(--jj-fs-md) !important; }
.quote-message { border-left: 2px solid var(--jj-ink) !important; background: var(--jj-bg-soft) !important; font-size: 12px !important; }

/* TODO: la regla .site-header .nav a en este media query podría
 * mudarse a web.css; se queda en core porque convive con
 * reglas funcionales (form-search, home-split__map). */
/* ---- Mobile fine-tuning ---- */
@media (max-width: 900px) {
    .hero h1 { font-size: 26px !important; }
    .page-head h1 { font-size: 19px !important; }
    .card { padding: 14px !important; }
    .btn { padding: 9px 16px !important; font-size: 10px !important; }
    .btn-lg { padding: 12px 18px !important; font-size: 11px !important; }
    .form-search .field-airport input { font-size: var(--jj-fs-md) !important; padding: 12px 12px 12px 38px !important; }
    .home-split__map { border-radius: 0 !important; }
    .site-header .nav a { margin-left: 12px !important; font-size: 10px !important; }
}

@media (max-width: 480px) {
    .hero h1 { font-size: 22px !important; line-height: 1.2; }
    .lead { font-size: 12px !important; }
}


/* ============================================================
   AJUSTES MÓVIL FINALES — bloque cerrado y reversible.
   Cubre 5 fixes pedidos: sin sombras laterales degradadas,
   footer oculto en mobile, mapa pegado al bottom y sin huecos,
   inputs a 16px (anti-zoom iOS), más aire lateral en mobile.
   ============================================================ */

/* (1) Quitar sombras laterales degradadas en cards/contenedores —
   conservamos las de :focus por accesibilidad (anillo de teclado). */
.card,
.flight-card,
.trip-row,
.flights-preview-card,
.flights-preview-card:hover,
.home-split__map,
.summary,
.boarding-pass,
.quote-card,
.confirm-summary-col .card,
.confirm-grid .card {
    box-shadow: none !important;
}

/* (2) Footer oculto en mobile — la bottom-nav ya cubre la navegación
       y el footer crea ruido visual extra en pantallas pequeñas. */
@media (max-width: 900px) {
    .site-footer { display: none !important; }
}

/* (3) Mapa pegado abajo en mobile, sin gap arriba ni recorte por nav-bar.
       100% del alto disponible, sin margen, sin border-radius en los lados
       laterales para que parezca extendido al edge de la pantalla. */
@media (max-width: 900px) {
    .home-split__map {
        margin: 0 !important;
        margin-top: 0 !important;
        height: 100vh !important;
        min-height: 100vh !important;
        max-height: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        /* Saca el mapa del padding lateral del .main para que toque
           edge-to-edge en mobile. */
        margin-left: -24px !important;
        margin-right: -24px !important;
        width: calc(100% + 48px) !important;
    }
    /* Si la mobile-nav-bar oculta los últimos 64px, el mapa pinta
       igualmente bajo ella; Leaflet se redimensiona solo. */
    .home-map { height: 100% !important; }
}

/* (4) Prevenir el zoom de iOS Safari al hacer focus en inputs.
       Regla: 16px es el mínimo para que NO haga zoom. Aplica a TODOS
       los inputs/select/textarea (incluyendo el form de búsqueda, los
       date/pax y cualquier campo del admin). NO tocamos
       `maximum-scale` en el viewport para no romper la a11y de zoom
       manual. */
@media (max-width: 900px) {
    input, select, textarea,
    .field input, .field select, .field textarea,
    .form-search input, .form-search select,
    .form-search .field-airport input,
    .form-search .grid-2 .field input {
        font-size: 16px !important;
    }
    /* También el welcome modal y los comboboxes del modal. */
    .welcome-modal__select { font-size: 16px !important; }
}

/* (5) Más aire lateral en mobile — el .container venía con 20px
       horizontal y se veía muy pegado en confirm/results.
       Subimos a 24px y damos un poco más al .main. */
@media (max-width: 900px) {
    .container { padding-left: 24px !important; padding-right: 24px !important; }
    main.container.main { padding-left: 24px !important; padding-right: 24px !important; }
    /* Excepción: en el home con split el mapa debe poder extenderse a edge
       (ver regla 3 arriba con los negative margins). El form sí mantiene
       padding normal de 24px. */
}

/* ============================================================
   NO LATERAL HALO — sweep final.
   Mata cualquier sombra que pueda crear un degradado lateral
   visible a izquierda/derecha del contenido principal.
   ============================================================ */

/* Layout root: sin sombras nunca. */
html, body,
main, main.container, main.container.main,
.container,
.home-split,
.home-split__form,
.site-header,
.site-footer {
    box-shadow: none !important;
    filter: none !important;
}

/* El debug console widget tenía box-shadow blur 30px → halo lateral visible.
   Reducido y limitado al eje vertical. */
.debug-console-widget {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18) !important;
}

/* Cualquier .card que tenga su sombra base — la dejamos solo vertical sutil
   o totalmente plana según el bloque anterior (.card ya está a none). */

/* ============================================================
   COMPARE / SAVE-FOR-COMPARISON
   Carrito-like: corazón en header (con badge), corazón en cada
   flight-card de /results, drawer con lista comparativa.
   ============================================================ */

/* ---- Badge counter (header + mobile nav) ---- */
.header-icon-btn { position: relative; }
.header-icon-btn__badge {
    position: absolute;
    top: 2px; right: 2px;
    min-width: 16px; height: 16px;
    padding: 0 4px;
    /* Antes era rosa accent (#ff7eab/#ec4899) — ahora círculo gris medio
       con número en blanco, neutro y menos llamativo. */
    background: #6b6b6b; /* gris medio (--jj-ink-soft) */
    color: #ffffff;
    font: 700 9px ui-monospace, "SF Mono", Menlo, monospace;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center; justify-content: center;
    letter-spacing: 0;
    line-height: 1;
    pointer-events: none;
}
/* El badge se ancla al ICONO (mobile-nav-icon ahora es position:relative),
   no al botón entero — así sale pegado al corazón en cualquier ancho. */
.mobile-nav-item--compare .mobile-nav-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.mobile-nav-badge {
    position: absolute;
    top: -6px;
    right: -10px;
    min-width: 15px; height: 15px;
    padding: 0 4px;
    background: #6b6b6b; /* gris medio, igual que el header badge */
    color: #ffffff;
    font: 700 9px ui-monospace, "SF Mono", Menlo, monospace;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center; justify-content: center;
    line-height: 1;
}

/* El corazón del header/nav se queda en el color base (--jj-ink negro) en
   todos los estados — la señal de "hay items guardados" la da el badge
   con el número. Antes pasaba a magenta y era demasiado ruidoso. */

/* ---- Heart button al lado de "Elegir →" en cada flight-card ---- */
.flight-card-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.heart-btn {
    appearance: none;
    background: transparent;
    border: 0;
    padding: 0;
    color: #9ca3af; /* gris medio cuando NO guardado */
    width: 40px; height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 20px;
    transition: color 0.15s ease, transform 0.15s ease;
    flex-shrink: 0;
}
.heart-btn:hover {
    color: #ec4899; /* magenta al hover */
    transform: scale(1.08);
}
.heart-btn.is-saved {
    color: #ec4899; /* magenta cuando guardado */
}
.heart-btn.is-pulsing {
    animation: heart-pop 0.55s cubic-bezier(.2,.9,.3,1.4);
}
@keyframes heart-pop {
    0%   { transform: scale(1); }
    35%  { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* ---- Drawer compare ---- */
.drawer-compare-count {
    font: 700 12px ui-monospace, "SF Mono", Menlo, monospace;
    color: var(--jj-ink-soft, #6b6b6b);
    margin-left: 4px;
}
.compare-empty {
    text-align: center;
    padding: 36px 20px;
    color: var(--jj-ink-soft, #6b6b6b);
}
.compare-empty__icon {
    color: var(--jj-line, #e8e8e8);
    margin: 0 auto 12px;
    display: inline-flex;
}
.compare-empty__title {
    font-size: 15px;
    font-weight: 700;
    color: var(--jj-ink, #000);
    margin: 0 0 6px;
}
.compare-empty__hint {
    font-size: 13px;
    margin: 0;
    line-height: 1.45;
}
.compare-empty__hint strong {
    color: var(--jj-ink, #000);
    font-weight: 700;
}
.compare-list {
    padding: 8px 12px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.compare-item {
    border: 1px solid var(--jj-line, #e8e8e8);
    border-radius: 12px;
    padding: 12px 14px;
    background: #fff;
    position: relative;
}
.compare-item__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.compare-item__model {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    color: var(--jj-ink, #000);
    line-height: 1.2;
    flex: 1;
}
.compare-item__remove {
    background: transparent;
    border: 0;
    color: var(--jj-ink-soft, #6b6b6b);
    cursor: pointer;
    padding: 2px 4px;
    font-size: 14px;
    border-radius: 4px;
    line-height: 1;
}
.compare-item__remove:hover {
    color: #ec4899;
    background: rgba(236, 72, 153, 0.08);
}
.compare-item__category {
    font: 600 10px ui-monospace, "SF Mono", Menlo, monospace;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--jj-ink-soft, #6b6b6b);
}
/* Fila de tags del compare-item: categoría + trip-badge. */
.compare-item__tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}
.compare-item__route {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    font: 700 13px ui-monospace, "SF Mono", Menlo, monospace;
    color: var(--jj-ink, #000);
}
.compare-item__arrow {
    color: var(--jj-ink-soft, #6b6b6b);
    font-weight: 400;
}
.compare-item__meta {
    font-size: 11.5px;
    color: var(--jj-ink-soft, #6b6b6b);
    margin-top: 4px;
}
.compare-item__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid var(--jj-line-soft, #f0f0f0);
}
.compare-item__price {
    font: 700 16px -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--jj-ink, #000);
    font-variant-numeric: tabular-nums;
}

/* Drawer footer del compare */
.compare-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 16px;
    border-top: 1px solid var(--jj-line, #e8e8e8);
    background: var(--jj-bg-soft, #fafafa);
}
.compare-footer__total {
    font-size: 11.5px;
    color: var(--jj-ink-soft, #6b6b6b);
    text-align: right;
    line-height: 1.35;
}

/* ============================================================
   FLIGHT CARD — stats reorganizados (categoría arriba, stats
   en columnas con la DURACIÓN destacada como dato principal).
   ============================================================ */
.flight-card .flight-category {
    display: inline-block;
    font: 700 10px ui-monospace, "SF Mono", Menlo, monospace;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--jj-ink-soft, #6b6b6b);
    margin-top: 4px;
    margin-bottom: 0;
    background: none;
    padding: 0;
}

.flight-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
    margin-top: 14px;
    margin-bottom: 4px;
}
.flight-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
}
.flight-stat__value {
    font: 600 15px -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--jj-ink, #0b1f3a);
    font-variant-numeric: tabular-nums;
}
.flight-stat__label {
    font: 500 10px ui-monospace, "SF Mono", Menlo, monospace;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--jj-ink-soft, #6b6b6b);
    margin-top: 3px;
}

/* La duración es el dato que más pesa en la decisión — la destacamos
   con tipografía más grande pero sin romper el aire minimalista. */
.flight-stat--duration .flight-stat__value {
    font-size: 19px;
    font-weight: 700;
}
.flight-stat--duration .flight-stat__label {
    color: var(--jj-ink, #0b1f3a);
    font-weight: 700;
}

/* Mobile: stats apretadas para no ocupar tanto */
@media (max-width: 600px) {
    .flight-stats { gap: 18px; margin-top: 12px; }
    .flight-stat__value { font-size: 14px; }
    .flight-stat--duration .flight-stat__value { font-size: 17px; }
}

/* ============================================================
   MAP 100% — sin aire arriba ni abajo en ningún escenario.
   El contenedor .home-split__map ya tiene 100vh; aquí garantizamos
   que el div #jets-map (donde Leaflet pinta tiles) ocupe el 100% real
   de su padre, sin flex shrink ni gaps.
   ============================================================ */
.home-split__map {
    /* Sin border-radius, sin shadow. El background coincide con el color
       del OCÉANO de CARTO Positron (gris azulado ≈ #dde0e3) — NO con el
       land (cream #fafaf8). Razón: cuando Leaflet muestra el mapa con la
       vista por defecto (Atlántico empty bounds), gran parte del viewport
       son tiles de océano gris. Si el contenedor fuera crema, cualquier
       gap (un píxel de redondeo, una rotación, un invalidateSize pendiente)
       crea un parche cream visible junto al gris del océano. Con ambos en
       el mismo gris azulado, la frontera desaparece. */
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #dde0e3 !important;
    overflow: hidden;
}
#jets-map, .home-map {
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    background: #dde0e3 !important; /* mismo gris ocean que Positron */
}

/* Mobile: el navegador SIEMPRE puede hacer scroll vertical a través del
   mapa. Sin esto, el touchstart de Leaflet bloquea el scroll del body.
   Combinado con dragging:false en map.js, garantiza que el usuario pueda
   subir/bajar la página aunque el dedo esté sobre el mapa. */
@media (max-width: 900px) {
    #jets-map, .home-map, .home-split__map {
        touch-action: pan-y !important;
    }
}
/* Si la vista activa cambia a "dark" (CARTO Dark Matter), el contenedor
   debería seguir al tile (gris muy oscuro ≈ #1a1a1a). Lo manejamos vía
   data-map-view en JS si lo necesitamos en el futuro. Por ahora el
   default Día (#fafaf8) cubre el 95% de casos. */

/* ============================================================
   FLIGHT CARD — layout 2 columnas final
   Izquierda: flight-info (model, categoría, stats, airport)
   Derecha: flight-card-right → precio arriba, heart+Elegir debajo
   ============================================================ */
.flight-card .flight-card-body {
    display: flex;
    align-items: stretch;
    gap: 20px;
    flex-wrap: nowrap;   /* desktop: SIEMPRE 2 columnas (no envolver la derecha
                            debajo cuando la columna de resultados es estrecha
                            por el mapa al lado). Solo apila en el media ≤600px. */
}
.flight-card .flight-info {
    flex: 1 1 auto;
    min-width: 0;
}
.flight-card-right {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    gap: 14px;
    flex-shrink: 0;
    min-width: 140px;
}
.flight-card-right .flight-price {
    text-align: right;
    margin: 0;
}
.flight-card-right .price-value {
    font: 700 22px -apple-system, BlinkMacSystemFont, sans-serif;
    color: var(--jj-ink, #0b1f3a);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.flight-card-right .flight-price .meta {
    display: block;
    margin-top: 2px;
}

/* Actions debajo del precio: heart a la izquierda, Elegir a la derecha */
.flight-card-right .flight-card-actions {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    width: 100%;
    justify-content: flex-end;
}

/* Heart "rosa palo apagado" en estado saved — más suave que la accent
   #ff7eab de la bible. La accent loud queda para badges y elementos de
   feedback rápido; aquí queremos algo más calmado y menos competitivo
   con el precio. */
.heart-btn.is-saved {
    color: #d99fb3 !important; /* rosa palo apagado */
}
.heart-btn:hover {
    color: #d99fb3;
}
/* El badge usa gris medio (definido arriba), no accent rosa, para que sea
   neutro y no compita con el precio o el botón primario. */

/* Mobile: la card pasa a vertical (flight-info arriba, right debajo).
   Mantenemos el orden: price arriba de actions. */
@media (max-width: 600px) {
    .flight-card .flight-card-body {
        flex-direction: column;
        gap: 14px;
    }
    .flight-card-right {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        min-width: 0;
        width: 100%;
    }
    .flight-card-right .flight-price { text-align: left; }
    .flight-card-right .flight-card-actions {
        width: auto;
    }
}

/* Drawer compare — icono corazón en el título */
.drawer-header__title-compare {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.drawer-header__heart {
    color: #d99fb3; /* rosa palo apagado, mismo que el saved del flight card */
    font-size: 15px;
}

/* ============================================================
   HEART FLOTANTE en flight-info (arriba-derecha) + estado activo
   del corazón del header cuando hay items guardados.
   ============================================================ */

/* Variante --light: heart muy discreto, gris super light por defecto.
   Solo "habla" cuando el usuario interactúa (hover) o lo activa. Se usa
   al lado del botón Elegir para no competir con el CTA primario. */
.heart-btn--light {
    width: 36px;
    height: 36px;
    font-size: 18px;
    color: #d1d5db; /* gris muy light, casi imperceptible */
}
.heart-btn--light:hover {
    color: #d99fb3;
    transform: scale(1.08);
}
.heart-btn--light.is-saved {
    color: #d99fb3 !important; /* rosa palo apagado cuando guardado */
}

/* Header (desktop) y mobile-nav heart: cuando hay items guardados
   (badge visible), el icono pasa a rosa palo apagado para que la
   navegación coincida con el estado "saved" del card.
   Usamos :has() para detectar el badge no-hidden. */
.header-icon-btn--compare:has([data-compare-count]:not([hidden])) i,
.mobile-nav-item--compare:has([data-compare-count]:not([hidden])) i {
    color: #d99fb3 !important; /* rosa palo apagado, igual que .heart-btn.is-saved */
}

/* Si el navegador no soporta :has() (Firefox <121 sin flag), fallback con
   data-attr aplicado por JS — el badge ya está visible/oculto vía hidden. */
.header-icon-btn--compare[data-has-items] i,
.mobile-nav-item--compare[data-has-items] i {
    color: #d99fb3 !important;
}

/* Mensaje de error inline bajo el botón Buscar del home, cuando la API
   /api/preview-flights devuelve 0 vuelos para la ruta y fecha pedidas. */
.form-search__error {
    margin-top: 12px;
    padding: 11px 14px;
    background: #fef2f8;
    border: 1px solid #fcd5e2;
    color: #98415e;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.4;
}

/* ════════════════════════════════════════════════════════════
   DARK THEME — SWEEP de contraste
   ──────────────────────────────────────────────────────────
   Muchos elementos tienen background:#fff hardcoded en lugar de
   var(--jj-bg). En vez de tocar cada sitio (riesgo de romper
   light), hacemos un override puntual aquí.
   Regla: si el bg es blanco hardcoded, en dark forzamos el bg
   soft del tema (var(--jj-bg-soft)) y el texto a var(--jj-ink).
   ════════════════════════════════════════════════════════════ */
html[data-theme="dark"] .card,
html[data-theme="dark"] .flight-card,
html[data-theme="dark"] .compare-item,
html[data-theme="dark"] .quote-card,
html[data-theme="dark"] .summary,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .confirm-summary-col .card,
html[data-theme="dark"] .step3-summary {
    background: var(--jj-bg-soft) !important;
    color: var(--jj-ink) !important;
    border-color: var(--jj-line) !important;
}

/* Texto interno: anulamos los color: #0b1f3a / #4b5563 / etc. */
html[data-theme="dark"] .card,
html[data-theme="dark"] .flight-card,
html[data-theme="dark"] .compare-item,
html[data-theme="dark"] .step3-summary {
    color: var(--jj-ink) !important;
}
html[data-theme="dark"] .flight-model,
html[data-theme="dark"] .compare-item__model,
html[data-theme="dark"] .step3-summary__value,
html[data-theme="dark"] .step3-summary__route-value,
html[data-theme="dark"] .step3-summary__value--strong,
html[data-theme="dark"] .price-value,
html[data-theme="dark"] .trip-route,
html[data-theme="dark"] .kv dd {
    color: var(--jj-ink) !important;
}

/* Labels/meta secundarios: gris medio del tema */
html[data-theme="dark"] .meta,
html[data-theme="dark"] .flight-category,
html[data-theme="dark"] .step3-summary__label,
html[data-theme="dark"] .step3-summary__title,
html[data-theme="dark"] .step3-summary__note,
html[data-theme="dark"] .compare-item__category,
html[data-theme="dark"] .compare-item__meta,
html[data-theme="dark"] .compare-item__dist,
html[data-theme="dark"] .kv dt {
    color: var(--jj-ink-soft) !important;
}

/* Stepper circles inactivos: estaban hardcoded a blanco/gris claro */
html[data-theme="dark"] .stepper-circle {
    background: var(--jj-bg-soft) !important;
    border-color: var(--jj-line) !important;
    color: var(--jj-ink-soft) !important;
}

/* ============================================================
   Leaflet — limpiar controles duplicados en top-left
   ============================================================ */
html .leaflet-top.leaflet-left { display: none !important; }


/* ============================================================
   Trip-type toggle (Solo ida / Ida y vuelta) — minimalista
   ------------------------------------------------------------
   Segmented control sin JS: dos radios ocultos + dos labels que
   actúan como botones. El estilo gana al estado :checked de su
   radio asociado vía selectores adyacentes.
   ============================================================ */
.trip-type {
    display: inline-flex;
    gap: 0;
    background: var(--jj-bg-soft, #fafafa);
    border: 1px solid var(--jj-line, #e8e8e8);
    border-radius: 999px;
    padding: 3px;
    margin: 0 0 12px;
    font-family: var(--jj-font-mono, ui-monospace, monospace);
}
.trip-type input[type="radio"] {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    opacity: 0;
}
.trip-type__opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 16px;
    border-radius: 999px;
    font: 700 10.5px var(--jj-font-mono, ui-monospace, monospace);
    text-transform: uppercase;
    letter-spacing: 0.10em;
    color: var(--jj-ink-soft, #6b6b6b);
    cursor: pointer;
    transition: background 0.18s var(--jj-ease, ease),
                color      0.18s var(--jj-ease, ease);
    user-select: none;
    margin: 0;
}
.trip-type input[type="radio"]:checked + .trip-type__opt {
    background: var(--jj-ink, #000);
    color: var(--jj-bg, #fff);
}
.trip-type input[type="radio"]:focus-visible + .trip-type__opt {
    box-shadow: 0 0 0 3px rgba(255, 126, 171, 0.30);
}

/* Campo de fecha de regreso: aparece con fade + slide cuando deja
   de tener [hidden]. */
.field-return {
    animation: tripReturnSlide 0.22s var(--jj-ease, ease) both;
}
.field-return[hidden] {
    display: none !important;
}
@keyframes tripReturnSlide {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Dark mode del toggle. */
html[data-theme="dark"] .trip-type {
    background: var(--jj-bg-soft) !important;
    border-color: var(--jj-line) !important;
}
html[data-theme="dark"] .trip-type input[type="radio"]:checked + .trip-type__opt {
    background: var(--jj-accent) !important;
    color: #ffffff !important;
}

/* ============================================================
   .search-grid — fechas + pasajeros con reflow según trip_type.
   Orden en DOM: salida → regreso → pasajeros.
     · one_way    → [salida] [pasajeros]   (regreso display:none)
     · round_trip → [salida] [regreso]     (fila 1)
                    [pasajeros full-width]  (fila 2)
   ============================================================ */
.search-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 14px;
}
/* one_way: el regreso oculto no ocupa celda → salida y pax quedan lado a lado. */
.search-grid .field-return[hidden] { display: none !important; }
/* round_trip: pasajeros baja a su propia fila a todo el ancho. */
.search-grid.is-round .field-pax { grid-column: 1 / -1; }
.search-grid .field { margin: 0; }
.search-grid .field input { width: 100%; }
.form-search .search-grid .field input {
    padding: 10px 12px !important;
    font-size: var(--jj-fs-md, 12px) !important;
    border-radius: 0 !important;
}
@media (max-width: 640px) {
    /* En mobile mantenemos 2 columnas para fechas; si es one_way pax sigue al lado. */
    .search-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Fecha + hora en una fila (field-dep / field-return) ── */
.datetime-row { display: flex; gap: 8px; }
.datetime-row input[type="date"] { flex: 1 1 60%; min-width: 0; }
.datetime-row input[type="time"] { flex: 0 0 38%; min-width: 0; }

/* Iconos de fecha y hora — Safari/iOS dejan el input blanco sin pista visual.
   Añadimos un SVG inline como background a la izquierda, hacemos hueco con
   padding-left, y ocultamos el indicador nativo de WebKit (que dibuja flecha/
   reloj feos a la derecha). Si el dispositivo no soporta el ::-webkit-* picker
   el icono sigue ahí y el click abre el selector nativo igual. */
input[type="date"],
input[type="time"] {
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 16px 16px;
    padding-left: 34px !important;
}
input[type="date"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'><path d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/></svg>");
}
input[type="time"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%236b7280'><path d='M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 1 0 .496-.868L8 8.71V3.5z'/><path d='M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0z'/></svg>");
}
/* Ocultamos el indicador nativo a la derecha (icono duplicado) — el click sobre
   todo el input sigue abriendo el picker nativo en móvil y escritorio. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    cursor: pointer;
    position: absolute;
    right: 0; top: 0;
    width: 100%; height: 100%;
}
/* Aseguramos posicionado para que el indicator absolute funcione. */
.field, .datetime-row { position: relative; }
.datetime-row input[type="date"],
.datetime-row input[type="time"] { position: relative; }

/* ── Multi-select de categorías (chips) ── */
.field-categories { margin-bottom: 14px; }
.cat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 11px;
    border: 1px solid var(--jj-line, #e8e8e8);
    border-radius: 999px;
    font-size: 11px;
    cursor: pointer;
    user-select: none;
    transition: border-color .15s ease, background .15s ease;
    background: var(--jj-bg, #fff);
    color: var(--jj-ink, #000);
}
.cat-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.cat-chip__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cat-chip:hover { border-color: var(--jj-ink-soft, #6b6b6b); }
.cat-chip:has(input:checked) {
    border-color: var(--jj-ink, #000);
    background: var(--jj-ink, #000);
    color: var(--jj-bg, #fff);
}
/* Texto blanco al seleccionar (algunos resets de label lo dejaban negro). */
.cat-chip:has(input:checked) .cat-chip__label { color: var(--jj-bg, #fff) !important; }
/* Fallback sin :has — el span es hermano del input dentro del label. */
.cat-chip input:checked ~ .cat-chip__label { color: var(--jj-bg, #fff) !important; }
.cat-chip input:focus-visible + .cat-chip__dot { outline: 2px solid var(--jj-accent, #ff7eab); outline-offset: 2px; }

/* ── Fila extras: fuel stops + group trip ── */
.field-extras { gap: 14px !important; margin-bottom: 14px; }
.seg-yesno {
    display: inline-flex;
    border: 1px solid var(--jj-line, #e8e8e8);
    border-radius: 999px;
    overflow: hidden;
}
.seg-yesno input { position: absolute; opacity: 0; width: 0; height: 0; }
.seg-yesno__opt {
    padding: 8px 18px;
    font-family: var(--jj-font-mono, ui-monospace, monospace);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--jj-ink-soft, #6b6b6b);
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.seg-yesno input:checked + .seg-yesno__opt { background: var(--jj-ink, #000) !important; color: var(--jj-bg, #fff) !important; }
/* Los labels del segmented (Sí/No) NO deben heredar el margin-bottom global
   de .field label — si no, descuadran la pastilla. */
.seg-yesno label, .seg-yesno .seg-yesno__opt { margin-bottom: 0 !important; }
.group-trip-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--jj-ink, #000);
    cursor: pointer;
    padding-top: 22px; /* alinea con el control fuel-stops de al lado */
}
.group-trip-check input { width: 16px; height: 16px; accent-color: var(--jj-ink, #000); }
@media (max-width: 640px) { .group-trip-check { padding-top: 0; } }

/* ============================================================
   .trip-badge — indicador "Solo ida / Ida y vuelta" coherente
   en TODO el flujo: results flight-info, compare-item, step3.
   Generado por jj_trip_badge() (PHP) y jjTripBadge() (compare.js).
   ============================================================ */
.trip-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 9px;
    border: 1px solid var(--jj-line, #e8e8e8);
    border-radius: 999px;
    font-family: var(--jj-font-mono, ui-monospace, monospace);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}
.trip-badge i { font-size: 11px; line-height: 1; }
/* Solo ida: monocromo discreto. */
.trip-badge--oneway {
    color: var(--jj-ink-soft, #6b6b6b);
    background: var(--jj-bg, #fff);
}
/* Ida y vuelta: gris medio discreto (mismo peso visual que solo-ida,
   solo cambia el icono ⇄). Sin acento rosa para no robar atención. */
.trip-badge--round {
    color: var(--jj-ink-soft, #6b6b6b);
    border-color: var(--jj-line, #e8e8e8);
    background: var(--jj-bg, #fff);
}
html[data-theme="dark"] .trip-badge--round {
    background: var(--jj-bg) !important;
    color: var(--jj-ink-soft) !important;
    border-color: var(--jj-line) !important;
}

/* Fila de meta en la flight-card (categoría + trip-badge lado a lado). */
.flight-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 4px 0 6px;
}
.flight-meta-row .flight-category { margin: 0; }

/* ── Overlay bloqueante (búsqueda / envío a Avitor) ── */
.jj-overlay {
    position: fixed;
    inset: 0;
    z-index: 3000;               /* por encima de drawers (1100) y backdrop */
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 10, 0.55);
    -webkit-backdrop-filter: blur(3px);
    backdrop-filter: blur(3px);
    padding: 24px;
}
.jj-overlay.is-open { display: flex; }
.jj-overlay__box {
    background: var(--jj-bg, #fff);
    border: 1px solid var(--jj-line, #e8e8e8);
    padding: 32px 36px;
    max-width: 360px;
    width: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}
.jj-overlay__spinner {
    width: 34px;
    height: 34px;
    border: 3px solid var(--jj-ink, #000);
    border-right-color: transparent;
    border-radius: 50%;
    animation: jj-spin 0.65s linear infinite;
}
.jj-overlay__msg {
    margin: 0;
    font-family: var(--jj-font-mono, ui-monospace, monospace);
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--jj-ink, #000);
}
/* X de cierre/cancelar arriba a la derecha del modal — siempre visible, por
   si el usuario quiere abortar la búsqueda/envío en cualquier momento. */
.jj-overlay__box { position: relative; }
.jj-overlay__close {
    position: absolute;
    top: 8px;
    right: 10px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--jj-ink-soft, #6b6b6b);
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    border-radius: 50%;
    transition: background .15s ease, color .15s ease;
}
.jj-overlay__close:hover { background: var(--jj-bg-soft, #f5f5f5); color: var(--jj-ink, #000); }

/* ── Estado de carga del botón de búsqueda (submit en home) ── */
.btn.is-loading {
    pointer-events: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    opacity: 0.92;
}
.btn-spinner {
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    display: inline-block;
    animation: jj-spin 0.6s linear infinite;
    flex-shrink: 0;
}
@keyframes jj-spin { to { transform: rotate(360deg); } }

/* ── Markup form (admin detalle) ── */
.markup-form label { display:block; font-size:12px; color: var(--jj-ink-soft,#6b7280); margin-bottom:8px; }
.markup-row { display:flex; align-items:center; gap:8px; }
.markup-row input { width:90px; }

/* ── Página de gracias (/sent) ── */
.sent-head { text-align: center; }
.sent-check {
    width: 56px; height: 56px; margin: 0 auto 16px;
    border-radius: 50%;
    background: var(--jj-ink, #000); color: var(--jj-bg, #fff);
    display: flex; align-items: center; justify-content: center;
    font-size: 28px;
}
.sent-card { max-width: 520px; margin: 0 auto; text-align: center; }
.sent-lead { font-size: 14px; line-height: 1.6; color: var(--jj-ink, #000); margin: 0 0 20px; }
.sent-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* Resumen de la solicitud dentro de la página de gracias */
.sent-summary {
    border: 1px solid var(--jj-line, #e8e8e8);
    padding: 16px 18px;
    margin: 0 0 20px;
    text-align: left;
}
.sent-summary__route {
    justify-content: center;
    font-family: var(--jj-font-mono, ui-monospace, monospace);
    font-weight: 700;
    font-size: 15px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.sent-summary__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 18px;
    margin: 0;
}
.sent-summary__grid dt {
    font-family: var(--jj-font-mono, ui-monospace, monospace);
    font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--jj-ink-soft, #6b6b6b); margin: 0 0 2px;
}
.sent-summary__grid dd { margin: 0; font-size: 13px; color: var(--jj-ink, #000); }
@media (max-width: 480px) { .sent-summary__grid { grid-template-columns: 1fr; } }

/* Botón cuadrado solo-icono (ej. "qué pasa después" en step3). */
.btn-icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0 !important;
    flex-shrink: 0;
}
.btn-icon-only i { font-size: 15px; line-height: 1; }

/* Variante fantasma: gris, sin borde. Para el botón de info "¿Qué pasa
   después?" — discreto, no compite con el CTA principal. */
.btn-icon-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--jj-ink-soft, #6b6b6b);
    cursor: pointer;
    border-radius: 50%;
    transition: background var(--jj-trans, 0.18s ease), color var(--jj-trans, 0.18s ease);
}
.btn-icon-ghost:hover {
    background: var(--jj-bg-soft, #f5f5f5);
    color: var(--jj-ink, #000);
}
.btn-icon-ghost i { font-size: 17px; line-height: 1; }

/* ╔══════════════════════════════════════════════════════════════╗
   ║  DARK SWEEP DEFINITIVO — bloque al FINAL del archivo para     ║
   ║  ganar siempre la cascada. Toca tres áreas:                   ║
   ║    1. Stepper activo (no más fondo blanco/oscuro confuso).    ║
   ║    2. Pin de #origin / #destination — borra cualquier bg-image║
   ║       previo y dibuja UN único pin theme-aware.               ║
   ║    3. Sweep de TODA card-like — si tiene bg blanco hardcoded, ║
   ║       lo pasamos a --jj-bg-soft con texto --jj-ink.           ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── 1. STEPPER ─────────────────────────────────────────────── */
/* Anclamos doblemente con html[data-theme="dark"] para subir la
   especificidad y vencer cualquier override previo o futuro. */
html[data-theme="dark"] .stepper-step.is-active .stepper-circle,
html[data-theme="dark"] .stepper.stepper .stepper-step.is-active .stepper-circle {
    background: var(--jj-accent, #ff7eab) !important;
    color: #ffffff !important;
    border-color: var(--jj-accent, #ff7eab) !important;
    box-shadow: 0 0 0 5px rgba(255, 126, 171, 0.20) !important;
}
html[data-theme="dark"] .stepper-step.is-active .stepper-label {
    color: var(--jj-ink) !important;
    font-weight: 700;
}
html[data-theme="dark"] .stepper-step.is-completed .stepper-circle {
    background: var(--jj-accent, #ff7eab) !important;
    border-color: var(--jj-accent, #ff7eab) !important;
    color: #ffffff !important;
}
html[data-theme="dark"] .stepper-step.is-completed .stepper-label {
    color: var(--jj-accent, #ff7eab) !important;
}
/* La barra de progreso del stepper también debe ser rosa en dark. */
html[data-theme="dark"] .stepper-progress {
    background: var(--jj-accent, #ff7eab) !important;
}


/* ── 2. AIRPORT PIN ─────────────────────────────────────────── */
/* En dark, primero ANULAMOS cualquier bg-image y bg-shorthand
   heredado del bloque light (líneas 139-160), forzando NONE en el
   selector base. Luego, sólo #origin/#destination redibujan el pin
   con TODAS las propiedades explícitas (image + size + position +
   repeat + padding-left) para que no haya posibilidad de cascada
   que reinstale un pin previo. */
html[data-theme="dark"] .form-search .field-airport input,
html[data-theme="dark"] .form-search .field-airport input:focus,
html[data-theme="dark"] .form-search .field-airport input:hover,
html[data-theme="dark"] .form-search .field-airport input:not(#origin):not(#destination) {
    background-image: none !important;
}

html[data-theme="dark"] .form-search .field-airport input#origin,
html[data-theme="dark"] .form-search .field-airport input#origin:focus,
html[data-theme="dark"] .form-search .field-airport input#origin:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='19' viewBox='0 0 22 30'><path d='M11 0C4.9 0 0 4.9 0 11c0 8.2 11 19 11 19s11-10.8 11-19C22 4.9 17.1 0 11 0z' fill='%23ff7eab'/><circle cx='11' cy='11' r='3.5' fill='%230a0a0a'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: 16px center !important;
    background-size: 14px 19px !important;
    padding-left: 42px !important;
}
html[data-theme="dark"] .form-search .field-airport input#destination,
html[data-theme="dark"] .form-search .field-airport input#destination:focus,
html[data-theme="dark"] .form-search .field-airport input#destination:hover {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='19' viewBox='0 0 22 30'><path d='M11 0C4.9 0 0 4.9 0 11c0 8.2 11 19 11 19s11-10.8 11-19C22 4.9 17.1 0 11 0z' fill='%23f5f5f5'/><circle cx='11' cy='11' r='3.5' fill='%230a0a0a'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: 16px center !important;
    background-size: 14px 19px !important;
    padding-left: 42px !important;
}

/* RTL en dark: el pin va al borde derecho. */
html[data-theme="dark"][dir="rtl"] .form-search .field-airport input#origin,
html[data-theme="dark"][dir="rtl"] .form-search .field-airport input#destination {
    background-position: calc(100% - 16px) center !important;
    padding-left: 14px !important;
    padding-right: 42px !important;
}


/* ── 3. CARDS — DARK CONTRAST SWEEP ─────────────────────────── */
/* Regla maestra: cualquier card en dark va a --jj-bg-soft (#161616)
   con texto --jj-ink (#f5f5f5). Esto cubre el caso "fondo blanco
   hardcoded + texto claro = ilegible". Se hace por nombre de clase
   en vez de [style*="background"] para mantener la cascada simple. */
html[data-theme="dark"] .card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .contact-form-card,
html[data-theme="dark"] .flight-card,
html[data-theme="dark"] .flights-preview-card,
html[data-theme="dark"] .flights-preview-card:hover,
html[data-theme="dark"] .compare-item,
html[data-theme="dark"] .quote-card,
html[data-theme="dark"] .quote-message,
html[data-theme="dark"] .summary,
html[data-theme="dark"] .step3-summary,
html[data-theme="dark"] .admin-table-card,
html[data-theme="dark"] .boarding-pass,
html[data-theme="dark"] .confirm-summary-col .card,
html[data-theme="dark"] .confirm-grid .card,
html[data-theme="dark"] .chip,
html[data-theme="dark"] .trip-row,
html[data-theme="dark"] .contact-aside .card {
    background: var(--jj-bg-soft, #161616) !important;
    color: var(--jj-ink, #f5f5f5) !important;
    border-color: var(--jj-line, #2a2a2a) !important;
}

/* Texto interno con color hardcoded. Forzamos contraste. */
html[data-theme="dark"] .card *,
html[data-theme="dark"] .form-card *,
html[data-theme="dark"] .contact-form-card *,
html[data-theme="dark"] .flight-card *,
html[data-theme="dark"] .flights-preview-card *,
html[data-theme="dark"] .quote-card *,
html[data-theme="dark"] .quote-message *,
html[data-theme="dark"] .trip-row *,
html[data-theme="dark"] .chip {
    border-color: var(--jj-line, #2a2a2a);
}

/* Texto primario dentro de cards: forzamos --jj-ink cuando el HTML
   trae color: #0b1f3a / #000 / etc hardcoded. */
html[data-theme="dark"] .card h1,
html[data-theme="dark"] .card h2,
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .card h4,
html[data-theme="dark"] .card p,
html[data-theme="dark"] .card dd,
html[data-theme="dark"] .card li,
html[data-theme="dark"] .card label,
html[data-theme="dark"] .card .ac-name,
html[data-theme="dark"] .card .ac-code,
html[data-theme="dark"] .card .price-value,
html[data-theme="dark"] .card .flight-model,
html[data-theme="dark"] .card .trip-route,
html[data-theme="dark"] .flights-preview-card,
html[data-theme="dark"] .flights-preview-card-route,
html[data-theme="dark"] .flights-preview-card-price,
html[data-theme="dark"] .quote-message,
html[data-theme="dark"] .trip-row {
    color: var(--jj-ink, #f5f5f5) !important;
}

/* Meta / labels secundarias: gris medio del tema. */
html[data-theme="dark"] .card .meta,
html[data-theme="dark"] .card .card-title,
html[data-theme="dark"] .card dt,
html[data-theme="dark"] .card small,
html[data-theme="dark"] .flights-preview-card-price small,
html[data-theme="dark"] .flight-category,
html[data-theme="dark"] .compare-item__category,
html[data-theme="dark"] .compare-item__meta {
    color: var(--jj-ink-soft, #9b9b9b) !important;
}

/* Inputs / textareas dentro de cards. */
html[data-theme="dark"] .card input,
html[data-theme="dark"] .card textarea,
html[data-theme="dark"] .card select,
html[data-theme="dark"] .form-card input,
html[data-theme="dark"] .form-card textarea,
html[data-theme="dark"] .form-card select,
html[data-theme="dark"] .contact-form-card input,
html[data-theme="dark"] .contact-form-card textarea {
    background: var(--jj-bg, #0a0a0a) !important;
    color: var(--jj-ink, #f5f5f5) !important;
    border-color: var(--jj-line, #2a2a2a) !important;
}

/* Admin table header — fondo gris claro hardcoded en light. */
html[data-theme="dark"] .admin-table th {
    background: var(--jj-bg, #0a0a0a) !important;
    color: var(--jj-ink-soft, #9b9b9b) !important;
    border-color: var(--jj-line, #2a2a2a) !important;
}
html[data-theme="dark"] .admin-table td {
    color: var(--jj-ink, #f5f5f5) !important;
    border-color: var(--jj-line, #2a2a2a) !important;
}

/* Cinturón de seguridad: si tras todo esto algún elemento todavía
   muestra fondo blanco real, hacemos un último override genérico para
   que el TEXTO directo dentro de ese elemento sea oscuro y se lea. */
html[data-theme="dark"] [style*="background:#fff"],
html[data-theme="dark"] [style*="background: #fff"],
html[data-theme="dark"] [style*="background:white"],
html[data-theme="dark"] [style*="background: white"],
html[data-theme="dark"] [style*="background-color:#fff"],
html[data-theme="dark"] [style*="background-color: #fff"] {
    color: #0a0a0a !important;
}

/* ============================================================
   Página de contacto — formulario + sidebar
   ============================================================ */
.contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 20px;
    margin-top: 16px;
}
@media (max-width: 900px) {
    .contact-grid { grid-template-columns: 1fr; }
}

.contact-form-card { padding: 22px 24px !important; }

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 6px;
}
.contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 520px) {
    .contact-row { grid-template-columns: 1fr; }
}

.contact-form .field input,
.contact-form .field textarea {
    width: 100%;
    background: var(--jj-bg, #fff) !important;
    border: 1px solid var(--jj-line, #e8e8e8) !important;
    border-radius: var(--jj-radius, 0) !important;
    color: var(--jj-ink, #000) !important;
    padding: 11px 14px !important;
    font-size: var(--jj-fs-md, 14px) !important;
    font-family: inherit;
    transition: border-color var(--jj-trans, 0.18s ease);
}
.contact-form .field textarea {
    resize: vertical;
    min-height: 140px;
    line-height: 1.5;
}
.contact-form .field input:focus,
.contact-form .field textarea:focus {
    border-color: var(--jj-ink, #000) !important;
    outline: none;
}

.contact-form .btn {
    align-self: flex-start;
}

.contact-foot {
    margin-top: 4px;
    font-size: 11px !important;
    color: var(--jj-ink-soft, #6b6b6b);
}

/* Honeypot — fuera de pantalla sin display:none. */
.contact-hp {
    position: absolute !important;
    left: -10000px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

/* Estados de respuesta. */
.contact-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 14px 8px 4px;
    color: var(--jj-success, #15803d);
}
.contact-success h3 {
    margin: 10px 0 4px;
    font-size: 18px;
    font-weight: 700;
    color: var(--jj-ink, #000);
}
.contact-success p {
    margin: 0;
    color: var(--jj-ink-soft, #6b6b6b);
    font-size: 14px;
    line-height: 1.5;
}

.contact-error {
    background: var(--jj-accent-2, #fde2ec);
    border: 1px solid var(--jj-accent, #ff7eab);
    color: #7f1d1d;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    line-height: 1.4;
}
html[data-theme="dark"] .contact-error {
    background: #3b1726;
    color: #ffb4b4;
}

.contact-aside { display: flex; flex-direction: column; gap: 12px; }

/* Inputs / textareas: sin esto el background sigue blanco */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    background: var(--jj-bg-soft) !important;
    color: var(--jj-ink) !important;
    border-color: var(--jj-line) !important;
}
html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: var(--jj-ink-soft) !important;
}

/* Separadores internos en cards: el #f0f0f0 hardcoded ya no funciona */
html[data-theme="dark"] .step3-summary__head,
html[data-theme="dark"] .step3-summary__item--span {
    border-color: var(--jj-line) !important;
}

/* Flights preview cards (resultados) si las usas */
html[data-theme="dark"] .flights-preview-card {
    background: var(--jj-bg-soft) !important;
    color: var(--jj-ink) !important;
    border-color: var(--jj-line) !important;
}


/* ============================================================
   CATEGORÍA DE AERONAVE — combo limpio (<details>/<summary>)
   ------------------------------------------------------------
   Reemplaza los chips: colapsa a una sola línea con resumen y
   despliega los mismos checkboxes (name="categories[]"). Estilo
   minimal b/n con acento rosa, coherente con el resto del form.
   Mantiene los puntos de color por categoría dentro del panel.
   ============================================================ */
.cat-combo {
    position: relative;
    border: 1px solid var(--jj-line, #e8e8e8);
    border-radius: var(--jj-radius, 0);
    background: var(--jj-bg, #fff);
}
.cat-combo__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 14px;
    cursor: pointer;
    list-style: none;
    color: var(--jj-ink, #000);
    font-size: 14px;
    user-select: none;
}
.cat-combo__summary::-webkit-details-marker { display: none; }
.cat-combo__chevron {
    font-size: 12px;
    color: var(--jj-ink-soft, #6b6b6b);
    transition: transform .2s var(--jj-ease, ease);
    flex-shrink: 0;
}
.cat-combo[open] .cat-combo__chevron { transform: rotate(180deg); }
.cat-combo[open] { border-color: var(--jj-ink, #000); }
/* Cuando hay categorías marcadas, el combo resalta para que se vea de un
   vistazo (en colapsado) que hay un filtro activo. */
.cat-combo.has-selection { border-color: var(--jj-ink, #000); }
.cat-combo.has-selection .cat-combo__text { color: var(--jj-ink, #000); font-weight: 600; }
.cat-combo__panel {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px;
    border-top: 1px solid var(--jj-line, #e8e8e8);
}
.cat-combo__opt {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--jj-radius, 0);
    cursor: pointer;
    color: var(--jj-ink, #000);
    font-size: 13px;
    margin: 0 !important;
    transition: background .12s ease;
}
.cat-combo__opt:hover { background: var(--jj-bg-soft, #fafafa); }
.cat-combo__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
/* El cuadradito de check NEGRO se elimina: el indicador de selección es el
   círculo de color (aro alrededor) + el nombre en negrita + fondo de la fila. */
.cat-combo__check { display: none; }
.cat-combo__dot {
    display: inline-block;
    box-sizing: border-box;
    width: 11px;
    height: 11px;
    min-width: 11px;
    border-radius: 50%;
    flex: 0 0 auto;
    border: 1px solid rgba(0,0,0,.12);   /* aro sutil para colores claros */
    align-self: center;
    transition: box-shadow .12s ease;
}
.cat-combo__label { flex: 1 1 auto; line-height: 1.2; }
/* Resumen colapsado: en vez de un número, los círculos de color de las
   categorías elegidas (más el nombre cuando solo hay una). */
.cat-combo__text {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.cat-combo__sumdot {
    display: inline-block;
    box-sizing: border-box;
    width: 12px;
    height: 12px;
    min-width: 12px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,.12);
}
.cat-combo__sumname { font-weight: 600; }
/* Estado seleccionado (sin cuadrado negro): aro alrededor del círculo de
   color, nombre en negrita y un leve fondo en la fila. */
.cat-combo__opt input:checked ~ .cat-combo__dot {
    box-shadow: 0 0 0 2px var(--jj-bg, #fff), 0 0 0 3px var(--jj-ink, #000);
}
.cat-combo__opt input:checked ~ .cat-combo__label { font-weight: 600; }
.cat-combo__opt:has(input:checked) { background: var(--jj-bg-soft, #f5f5f5); }
.cat-combo__opt input:focus-visible ~ .cat-combo__dot {
    outline: 2px solid var(--jj-accent, #ff7eab);
    outline-offset: 2px;
}
html[data-theme="dark"] .cat-combo { background: var(--jj-bg-soft); }
html[data-theme="dark"] .cat-combo__opt:hover { background: rgba(255,255,255,.04); }


/* ============================================================
   MÓVIL — "más aire" + anti-zoom iOS (sweep final público)
   ------------------------------------------------------------
   Este bloque va al final del bundle a propósito: necesita ganar
   por orden a reglas tardías como `.form-search .search-grid .field
   input` (12px) o `.form-search .grid-2 .field input`. Solo afecta
   a la parte pública; no toca selectores de admin.
   ============================================================ */
@media (max-width: 700px) {
    /* (A) ANTI-ZOOM: todos los campos del front público a >=16px.
       Selectores con la misma o mayor especificidad que las reglas
       tardías que forzaban var(--jj-fs-md) (~12-13px). */
    .form-search input,
    .form-search select,
    .form-search textarea,
    .form-search .field input,
    .form-search .field select,
    .form-search .field textarea,
    .form-search .field-airport input,
    .form-search .grid-2 .field input,
    .form-search .search-grid .field input,
    .search-grid .field input,
    .datetime-row input[type="date"],
    .datetime-row input[type="time"],
    .field input,
    .field select,
    .field textarea,
    .contact-form .field input,
    .contact-form .field textarea,
    .cat-combo__summary {
        font-size: 16px !important;
    }

    /* (B) FORM HOME — que respire. */
    .form-search { padding: 20px !important; }
    .form-search .field { margin-bottom: 18px !important; }

    /* Trip-type pill a ancho completo y con más golpe táctil. */
    .trip-type {
        display: flex !important;
        width: 100%;
        margin-bottom: 18px;
    }
    .trip-type__opt {
        flex: 1 1 0;
        padding: 11px 12px;
        font-size: 11px;
    }

    /* Search-grid: en pantallas estrechas una sola columna para que
       fecha/regreso/pax no queden apretados. Más gap vertical. */
    .search-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 18px;
    }
    .search-grid.is-round .field-pax { grid-column: auto; }
    .datetime-row { gap: 10px; }

    /* Extras (fuel + group): apila en columna con aire entre ellos. */
    .field-extras {
        grid-template-columns: 1fr !important;
        gap: 18px !important;
        margin-bottom: 18px;
    }
    .field-group-trip { padding-top: 4px; }
    .seg-yesno { width: 100%; }
    .seg-yesno__opt { flex: 1 1 0; text-align: center; }

    /* Botón buscar con más presencia. */
    .form-search .btn-block.btn-lg { padding: 15px 18px !important; }
}

/* A 360–414px afinamos: search-grid en 2 columnas vuelve a 1 ya cubierto
   arriba; aquí solo damos un punto más de aire al contenedor del form. */
@media (max-width: 420px) {
    .form-search { padding: 18px 16px !important; }
    .cat-combo__opt { padding: 11px 10px; }
}

/* (C) RESULTS — flight-cards con más respiro vertical en móvil. */
@media (max-width: 600px) {
    .flight-card { padding: 16px 18px !important; margin-bottom: 16px; }
    .flight-card .flight-card-body { gap: 16px; }
    .results-head { margin-bottom: 8px; }
}

/* (D) CONFIRM — separación entre las dos columnas/secciones apiladas. */
@media (max-width: 768px) {
    .confirm-grid { display: flex; flex-direction: column; gap: 22px; }
    .confirm-summary-col { margin-bottom: 4px; }
    .confirm-grid .grid-2 { gap: 14px; }
}