/* ============================================================================
   planificador.css — asistente del planificador (UI v2, oct-2026).
   El asistente es el componente común .ui-wizard .ui-wizard--fit de ui.css (una
   pregunta por paso, cada paso entero en pantalla) y la ruta es el componente común
   .ui-routelist (ui.css + ui-routelist.js, el mismo que la calculadora del JR Pass).
   Aquí solo lo propio del planificador: rejilla de 2 opciones, líneas de excursión
   dentro de cada ciudad, presupuesto saltado y la ventana "Añadir excursión".

   CONTRATO con planificador.js (no renombrar): .route-city-item, .route-drag-handle,
   .route-city-num, .pl-day-range, .route-nights-val, .pl-days-unit, .nights-up/-down,
   .route-city-remove, .route-exc-section/-list/-item/-day-tag/-item-text/-remove,
   .route-exc-add-btn, #budgetFields.is-skipped, .exc-modal*.
   ============================================================================ */

/* Dos opciones (modo de planificación): dos columnas en escritorio */
.ui-planner .pl-choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Presupuesto: equivalente en yenes y casilla de "sin presupuesto" (solo sin JS; con JS
   la sustituye el enlace "No tengo claro el presupuesto" bajo el botón) */
.ui-planner .pl-jpy { font-weight: 600; color: var(--ui-ink); }
.ui-planner .pl-jpy:empty { display: none; }
.ui-planner .pl-skip-nojs { display: flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 15px; color: var(--ui-ink-2); }
.ui-planner .ui-wizard.is-js .pl-skip-nojs { display: none; }
.ui-planner #budgetFields.is-skipped .ui-money { opacity: 0.45; }

/* Error del servidor (fechas): con JS se muestra dentro del paso de fechas */
.ui-planner .ui-wizard.is-js .pl-form-error { display: none; }

/* Ruta */
.ui-planner .pl-route { margin-top: 20px; }
.ui-planner .route-exc-list { display: contents; list-style: none; margin: 0; padding: 0; }
.ui-planner .route-exc-item { display: inline-flex; align-items: center; gap: 6px; color: var(--ui-ink-2); }
.ui-planner .route-exc-day-tag { font-weight: 600; color: var(--ui-ink); }
.ui-planner .route-exc-day-tag::after { content: ":"; }
.ui-planner .route-nights-val { font-variant-numeric: tabular-nums; }

/* ── Ventana "Añadir excursión": centrada (también en móvil) ───────────────── */
.exc-modal { position: fixed; inset: 0; z-index: 1100; display: grid; place-items: center; padding: 20px; }
.exc-modal[hidden] { display: none; }
.exc-modal-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.32); }
.exc-modal-dialog {
    position: relative; width: min(440px, 100%); max-height: calc(100svh - 40px); overflow: auto;
    padding: 26px; border-radius: 22px; background: var(--ui-bg); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.18);
}
body.ui2 .exc-modal-title { margin: 0; font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; color: var(--ui-ink); }
.exc-modal-sub { margin: 8px 0 0; font-size: 15px; line-height: 1.45; color: var(--ui-ink-2); }
.exc-modal-sub span { font-weight: 600; color: var(--ui-ink); }
.exc-modal-field { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.exc-modal-field span { font-size: 14px; color: var(--ui-ink-2); }
.exc-modal-actions { display: flex; justify-content: flex-end; align-items: center; gap: 18px; margin-top: 24px; }
.exc-modal-cancel { padding: 6px; border: 0; background: none; font: inherit; font-size: 15px; color: var(--ui-accent-ink); cursor: pointer; }
.exc-modal-confirm {
    height: 44px; padding: 0 22px; border: 0; border-radius: var(--ui-radius-pill); background: var(--ui-ink); color: #fff;
    font: inherit; font-size: 15px; font-weight: 500; cursor: pointer;
}

@media (hover: hover) {
    .exc-modal-confirm:hover { background: var(--ui-btn-hover); }
    .exc-modal-cancel:hover { text-decoration: underline; text-underline-offset: 3px; }
}
@media (max-width: 600px) {
    .ui-planner .pl-choices--2 { grid-template-columns: 1fr; }
    .exc-modal-dialog { padding: 22px 18px; }
}