/* ==========================================================================
   Transporte (app/busqueda/transporte · plantillas/busqueda/transporte/ · agencia/traslados*)
   --------------------------------------------------------------------------
   · Todas las clases empiezan por «tr-»; encima de las fichas de luz.css y de busqueda.css.
   · Sin JavaScript: las pestañas de modo son enlaces; el sentido del traslado, radios.
   · Las tarjetas de socio (enlace de afiliado, sin precio aquí) esconden la caja de precio del
     envoltorio común, que diría «A consultar… te lo confirmamos nosotros»: el precio está en el
     socio y así se dice dentro de la tarjeta. Sin :has() (navegadores viejos) se ven las dos.
   · Puntos de corte de la casa: 480, 700 y 1060 px. Sin desbordes a 320 px.
   ========================================================================== */

/* ---------- pestañas de modo ---------- */
.tr-modos { margin-bottom: var(--e4); }
.tr-modos ul { list-style: none; margin: 0; padding: 4px; display: inline-flex; flex-wrap: wrap; gap: 4px;
  border: 1px solid var(--borde); border-radius: var(--radio-g); background: var(--superficie); max-width: 100%; }
.tr-modo { display: inline-flex; align-items: center; gap: var(--e2); min-height: 44px; padding: 0 var(--e4);
  border-radius: var(--radio); color: var(--noche); font: 600 var(--t-s)/1.2 var(--f-texto); text-decoration: none; }
.tr-modo:hover { background: var(--arena); color: var(--noche); }
.tr-modo.activo { background: var(--noche); color: #fff; }
.tr-modo.activo .ico { color: var(--luz-viva); }
@media (forced-colors: active) { .tr-modo.activo { outline: 2px solid Highlight; } }

/* ---------- formulario ---------- */
/* Rejilla de campos: dos columnas en el móvil (los campos cortos, a pares; aeropuerto y zona a lo
   ancho), tres en escritorio (cuatro en el tren). Una sola por debajo de 360 px. */
.bq-campos.tr-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tr-rejilla .tr-ancho, .tr-rejilla.cuatro > .bq-campo:nth-child(-n+2) { grid-column: 1 / -1; }
@media (max-width: 359px) { .bq-campos.tr-rejilla { grid-template-columns: minmax(0, 1fr); } }
@media (min-width: 700px) {
  .bq-campos.tr-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .bq-campos.tr-rejilla.cuatro { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tr-rejilla .tr-ancho, .tr-rejilla.cuatro > .bq-campo:nth-child(-n+2) { grid-column: auto; }
}
.tr-sentido { margin: 0; padding: 0; border: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: var(--e2) var(--e4); }
.tr-sentido legend { width: 100%; margin-bottom: var(--e2); padding: 0; font: 600 var(--t-xs)/1.2 var(--f-texto); color: var(--tinta); }
.tr-opcion { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 var(--e4);
  border: 1.5px solid var(--bq-borde-control, #857D6E); border-radius: var(--radio); background: var(--superficie);
  color: var(--tinta); font-size: var(--t-s); cursor: pointer; }
.tr-opcion input { width: 18px; height: 18px; margin: 0; accent-color: var(--noche); flex: none; }
.tr-opcion:has(input:checked) { border-color: var(--noche); background: var(--miel); }
.tr-opcion:has(input:focus-visible) { box-shadow: var(--anillo); }

/* Lo opcional del formulario (niños y sus edades, la vuelta, algo más): plegado, abierto si ya trae algo (19-10-2026). */
.tr-mas { margin: 0 0 var(--e4); border: 1px solid var(--borde); border-radius: var(--radio-g); background: var(--superficie); min-width: 0; }
.tr-mas > summary { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); min-height: 48px; padding: 0 var(--e4);
  cursor: pointer; list-style: none; font: 600 var(--t-s)/1.3 var(--f-texto); color: var(--noche); }
.tr-mas > summary::-webkit-details-marker { display: none; }
.tr-mas > summary .ico { transition: transform .18s var(--curva); color: var(--ambar); }
.tr-mas[open] > summary .ico { transform: rotate(90deg); }
.tr-mas > summary:focus-visible { box-shadow: var(--anillo); border-radius: var(--radio-g); }
.tr-mas > .bq-campos { padding: 0 var(--e4) var(--e4); }

/* Encima de la lista, con vuelta dicha: el precio es de un trayecto, y la búsqueda del de vuelta. */
.tr-vuelta { margin: 0 0 var(--e4); display: flex; gap: var(--e2); align-items: flex-start; font-size: var(--t-s); color: var(--texto); }
.tr-vuelta .ico { flex: none; margin-top: 2px; color: var(--noche-suave); }

/* ---------- otras plataformas (solo portada) ---------- */
.tr-otros { margin-top: var(--e4); border: 1px solid var(--borde); border-radius: var(--radio-g); background: var(--superficie); }
.tr-otros > summary { display: flex; align-items: center; gap: var(--e2); min-height: 48px; padding: 0 var(--e4); cursor: pointer;
  list-style: none; font: 600 var(--t-s)/1.3 var(--f-texto); color: var(--noche); }
.tr-otros > summary::-webkit-details-marker { display: none; }
.tr-otros > summary .ico { transition: transform .18s var(--curva); color: var(--ambar); }
.tr-otros[open] > summary .ico { transform: rotate(90deg); }
.tr-otros-nota { margin: 0; padding: 0 var(--e4) var(--e3); font-size: var(--t-xs); line-height: 1.5; color: var(--suave); max-width: 80ch; }
.tr-otros-lista { list-style: none; margin: 0; padding: 0 var(--e4) var(--e4); display: grid; gap: var(--e3);
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.tr-otros-lista li { display: grid; gap: var(--e2); align-content: start; padding: var(--e4); border: 1px solid var(--borde);
  border-radius: var(--radio); background: var(--fondo); }
.tr-otros-nombre { margin: 0; font: 650 var(--t-s)/1.3 var(--f-texto); color: var(--noche); }
.tr-otros-texto { margin: 0; font-size: var(--t-xs); line-height: 1.5; color: var(--texto); }
.tr-otros-lista .boton { justify-self: start; }

/* ---------- tarjetas ---------- */
.tr-ruta, .tr-lleva, .tr-caducado { margin: 0; display: flex; gap: var(--e2); align-items: flex-start; font-size: var(--t-s); color: var(--texto); }
.tr-ruta .ico, .tr-lleva .ico { flex: none; margin-top: 2px; color: var(--noche-suave); }
.tr-condiciones { margin: 0; font-size: var(--t-xs); line-height: 1.5; color: var(--suave); }
.tr-cuenta { margin: 0; font-size: var(--t-xs); color: var(--suave); font-variant-numeric: tabular-nums lining-nums; }
.tr-caducado { font-size: var(--t-xs); color: var(--aviso); }
.tr-caducado .ico { flex: none; margin-top: 1px; }
.tr-horario { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4); }
.tr-extremo { display: grid; gap: 2px; min-width: 0; }
.tr-extremo .bq-hora { font: 650 var(--t-l)/1.1 var(--f-texto); color: var(--noche); }
.tr-lugar { font-size: var(--t-xs); color: var(--suave); }
.tr-flecha { display: inline-flex; align-items: center; gap: 6px; color: var(--ambar); }
.tr-flecha::before, .tr-flecha::after { content: ""; width: 22px; height: 1.5px; background: var(--linea); }
.tr-mas-uno { font: 600 var(--t-xs)/1 var(--f-texto); color: var(--aviso); }

/* La tarjeta de socio: una SALIDA (proveedor «enlace»). El núcleo la pinta aparte, al final, con
   «Precio en <socio>» en su columna (r.datos.precio_en). Aquí solo su cuerpo. */
.tr-socio { display: grid; gap: var(--e3); }
.tr-socio-accion { margin: 0; }
.tr-afiliacion { margin: 0; font-size: var(--t-xs); line-height: 1.5; color: var(--suave); }

/* ---------- Puente: traslados contratados ---------- */
.tr-puente-zonas { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0; padding: 0; list-style: none; }
.tr-puente-zonas li { padding: 2px 8px; border-radius: var(--radio-pildora); background: var(--arena); font-size: var(--t-xs); color: var(--texto); }
.tr-puente-precio { white-space: nowrap; font-variant-numeric: tabular-nums lining-nums; }
.tr-puente-precio small { display: block; color: var(--suave); white-space: normal; }
.tr-puente-caducado { color: var(--aviso); font-weight: 600; }
.tr-puente-grupo { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: var(--e4); }
.tr-puente-grupo + .tr-puente-grupo { margin-top: var(--e3); padding-top: var(--e5); border-top: 1px solid var(--borde); }
.tr-puente-solo { max-width: 920px; }
.tr-puente-grupo .campos-2, .tr-puente-grupo .campos-3 { align-items: start; }
/* La leyenda flotada deja de ir montada en el borde del fieldset (la raya la cruzaba a media altura y el padding caía
   entre ella y el primer campo): es una fila más de la rejilla (el float no hace nada en ella), con el mismo aire hasta
   el primer campo en todos los grupos y la raya encima. Como .tl-grupo-rotulo en taller.css. */
.tr-puente-grupo legend { float: left; width: 100%; padding: 0; margin: 0; font: 620 var(--t-xs)/1.2 var(--f-texto); letter-spacing: .06em;
  text-transform: uppercase; color: var(--ambar); }
.tr-puente-acciones { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }
.tr-puente-lateral { display: grid; gap: var(--e4); }
.tr-puente-lateral form { margin: 0; }
.tr-puente-explica { max-width: 90ch; margin-bottom: var(--e4); }
.tr-puente-socios { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e3);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); }
.tr-puente-socios li { display: grid; gap: 6px; align-content: start; padding: var(--e4); border: 1px solid var(--borde);
  border-radius: var(--radio); background: var(--fondo); font-size: var(--t-s); }
.tr-puente-socios small { color: var(--suave); line-height: 1.45; }
.tr-puente-socios .etiqueta { margin-left: 4px; }
.tr-puente-verificado summary { cursor: pointer; font-size: var(--t-xs); color: var(--noche-suave); }
.tr-puente-verificado small { display: block; margin-top: 4px; }
.campo.error .tr-puente-mensaje, .tr-puente-mensaje { color: var(--mal); font-size: var(--t-xs); font-weight: 520; margin: 0; }

/* ---------- anchos ---------- */
@media (max-width: 480px) {
  .tr-modos ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
  .tr-modos li { display: flex; }
  .tr-modo { width: 100%; flex-direction: column; justify-content: center; gap: 4px; min-height: 60px; padding: var(--e2) 6px;
    font-size: var(--t-xs); text-align: center; line-height: 1.2; }
  .tr-opcion { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .tr-otros > summary .ico, .tr-mas > summary .ico { transition: none; }
}
/* Plataformas de solo portada, a la vista cuando no hay ninguna opción con precio (08-10-2026). */
.tr-otros-vacio { margin: 0 0 var(--e5); padding: var(--e4); border: 1px solid var(--linea, rgba(0,0,0,.12)); border-radius: var(--radio-s, 8px); }
/* Tren con el trayecto pero sin día: el botón a Omio, que enseña horarios y precios sin fecha. */
.tr-omio-sin-fecha { margin-top: var(--e3); display: flex; flex-wrap: wrap; gap: var(--e2); align-items: center; }
.tr-otros-vacio h3 { margin: 0 0 var(--e2); }