/* Bridges & Swaps (t165): el formulario y la lista de rutas. Sólo tokens de
   `blockboard.css`; probado a 375 px sin scroll de página. */

.br-form {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) minmax(130px, 1fr) auto minmax(130px, 1fr) minmax(110px, .9fr) auto;
  gap: var(--s3);
  align-items: end;
  margin-bottom: var(--s4);
}
.br-field { display: flex; flex-direction: column; gap: var(--s1); min-width: 0; }
.br-field label { font-size: var(--size-xs); color: var(--text-muted); font-weight: 560; }
.br-field select, .br-field input { width: 100%; min-height: 38px; font-size: var(--size-base); }
.br-swap { min-height: 38px; min-width: 38px; padding: 0; font-size: var(--size-md); }
.br-go { min-height: 38px; }
.br-error { color: var(--warn); margin: 0 0 var(--s4); }
.br-loading { padding: var(--s4) 0; }
.br-routes.br-busy { opacity: .55; transition: opacity .2s; }

.br-head { display: flex; justify-content: space-between; gap: var(--s3); flex-wrap: wrap;
  font-size: var(--size-xs); margin: 0 0 var(--s2); }
.br-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s2); }
.br-row {
  display: grid;
  /* Pistas iguales en todas las filas (cada fila es su propia rejilla): las
     columnas quedan alineadas de arriba abajo. */
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, .55fr) 210px;
  gap: var(--s3);
  align-items: center;
  padding: var(--s3) var(--s4);
}
.br-row.br-paused { opacity: .75; }
.br-who { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.br-name { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.br-kind { font-size: var(--size-xs); }
.br-cell { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--size-sm); }
.br-lab { font-size: var(--size-2xs); color: var(--text-faint); text-transform: uppercase; letter-spacing: .08em; }
.br-get b { font-size: var(--size-base); }
.br-go-cell { justify-self: end; text-align: right; }
.br-open { white-space: nowrap; min-height: 32px; }
.br-hidden { font-size: var(--size-xs); color: var(--warn); max-width: 22ch; display: inline-block; }
.br-note { grid-column: 1 / -1; margin: 0; font-size: var(--size-xs); }

/* La «i» de cada puente: cómo está asegurado y su historial de incidentes. */
.br-about { position: relative; display: inline-block; }
.br-about > summary {
  list-style: none; cursor: pointer;
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); color: var(--text-muted);
  font-size: var(--size-2xs); font-weight: 650; font-style: italic;
}
.br-about > summary::-webkit-details-marker { display: none; }
.br-about > summary:hover, .br-about[open] > summary { color: var(--accent); border-color: var(--accent); }
.br-about > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.br-about-p {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: -8px;
  width: min(360px, calc(100vw - 48px));
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: var(--s3); box-shadow: 0 12px 32px -12px rgba(0, 0, 0, .45);
  font-size: var(--size-sm); font-weight: 400; color: var(--text);
}
.br-about-p p { margin: 0 0 var(--s2); }
.br-inc { margin: 0; padding-left: var(--s4); display: grid; gap: var(--s1); }
.br-inc-d { color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* Los buscadores de rutas, aparte y plegados. */
.br-aggs { margin-top: var(--s5); }
.br-aggs > summary { cursor: pointer; font-weight: 600; padding: var(--s2) 0; }
.br-aggs-p { font-size: var(--size-sm); margin: 0 0 var(--s3); }
.br-agg { margin-bottom: var(--s3); }
.br-agg-h { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s2); }
.br-agg-h .br-open, .br-agg-h .br-hidden { margin-left: auto; }
.br-agg-scroll { overflow-x: auto; }
.br-agg-t th, .br-agg-t td { padding: 6px var(--s2); white-space: nowrap; }
.br-agg-t th { font-size: var(--size-xs); color: var(--text-muted); font-weight: 560; text-align: left; }
.br-agg-t th.num, .br-agg-t td.num { text-align: right; font-variant-numeric: tabular-nums; }

.br-disclaimer { margin-top: var(--s6); font-size: var(--size-xs); color: var(--text-muted); max-width: 80ch; }

@media (max-width: 720px) {
  .br-form { grid-template-columns: 1fr auto 1fr; }
  .br-form .br-field:first-child, .br-form .br-amt, .br-form .br-go { grid-column: 1 / -1; }
  .br-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.2fr) minmax(0, .7fr); padding: var(--s3); gap: var(--s2) var(--s3); align-items: start; }
  .br-who { grid-column: 1 / -1; }
  .br-time { text-align: right; align-items: flex-end; }
  .br-go-cell { grid-column: 1 / -1; justify-self: stretch; text-align: left; }
  .br-open { width: 100%; min-height: 36px; }
  .br-hidden { max-width: none; }
  .br-agg-t .d2 { display: none; }
  .br-about-p { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; }
}