/* Nuevo viaje y Configuración: ajustes de vista que se suman a app.css. Solo tokens de tokens.css, sin colores literales. */

/* ── Mis lugares a un toque, bajo Desde y Hasta ─────────────────────────────
   Una sola fila que se desliza hacia el costado, así el formulario no crece con la cantidad de lugares; «Más…» queda siempre a la vista. */
.trip-places[hidden] { display: none; }
.trip-places { display: flex; flex-wrap: nowrap; gap: var(--s-2); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: thin; padding-bottom: var(--s-1); }
.trip-place-chip { flex: 0 0 auto; min-height: var(--touch-size); max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; scroll-snap-align: start; }
.trip-place-chip.is-more { position: sticky; right: 0; color: var(--c-brand); font-weight: 600; }

/* ── Estado de la entrada del campo elegido (agua = colores de aviso; nunca verde de «pasable») ── */
.trip-entry[hidden] { display: none; }
.trip-entry { margin: 0; font-size: var(--t-small-size); line-height: var(--t-small-lh); color: var(--c-ink-muted); }
.trip-entry.is-warn { padding: var(--s-1) var(--s-2); border-radius: var(--r-sm); background: var(--c-warn-bg); color: var(--c-warn); font-weight: 600; }

/* ── Formulario más corto: chips compactos y menos aire, para ver «Cuándo» sin desplazarse ──
   En pantallas táctiles los chips siguen en 44 px; con puntero fino bajan a 36 px. */
.trip-quick { gap: var(--s-3); }
#trip-kind .chip, #trip-day .chip, #trip-window .chip { padding: 0 var(--s-3); font-size: var(--t-small-size); }
@media (min-width: 768px) and (hover: hover) and (pointer: fine) {
  #trip-kind .chip, #trip-day .chip, #trip-window .chip { min-height: 36px; }
}
/* La etiqueta del buscador repite el título del bloque («Desde», «Hasta»): queda para lectores de pantalla, no ocupa lugar */
.trip-block .place-search > label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Configuración en teléfono: las cuatro secciones caben en una sola fila (menos aire a los costados, mismo tamaño de letra); si la pantalla es aún más angosta, la fila se desliza ──
   El título y la nota ocupan todo el ancho y no se mueven con la barra. */
@media (max-width: 767px) {
  .config-nav { display: grid; grid-template-columns: repeat(4, max-content); justify-content: space-between; gap: 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
  .config-nav::-webkit-scrollbar { display: none; }
  .config-nav h1, .config-nav p { grid-column: 1 / -1; position: sticky; left: 0; box-sizing: border-box; width: calc(100vw - 2 * var(--s-4)); }
  .config-nav a { white-space: nowrap; padding: 0 var(--s-1); }
}