/* Exclivia · canales/ruta_publica.css — la pestaña del recorrido en el perfil.
 *
 * Vive en `canales` —de donde es la herramienta— y se la manda a Momentos, que
 * es quien pinta el perfil. Es la misma costura que la carta y la plaza: el día
 * que `canales` se mude a un VPS, su hoja viene de donde viva él.
 *
 * Tres piezas: las HERRAMIENTAS de arriba (buscar y los operadores), el VISOR
 * —un solo mapa que cambia de ruta— y la LISTA. Antes cada ruta traía su propio
 * marco; con siete, el teléfono acababa con siete mapas apilados.
 */

.cr-ruta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .9rem;
}

.cr-h {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 800;
}

.cr-intro {
  margin: 0;
  color: var(--exc-muted);
  font-size: .9rem;
  line-height: 1.55;
  max-width: 68ch;
}

/* ── Buscar, y «la que me pasa más cerca» ─────────────────────────────────────
 *
 * El buscador no abre un desplegable: FILTRA la lista de abajo, que ya está en
 * pantalla. En un teléfono el teclado tapa media pantalla y una capa flotante
 * deja la respuesta justo donde no se ve.
 */
.cr-herr {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

.cr-buscar {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1 1 14rem;
  min-width: 0;
  padding: 0 .75rem;
  background: var(--exc-surface);
  border: var(--exc-border-width) solid var(--exc-border);
  border-radius: 999px;
}
.cr-buscar svg { flex: none; color: var(--exc-muted); }
.cr-buscar:focus-within { border-color: var(--exc-accent); }

.cr-q {
  flex: 1;
  min-width: 0;
  padding: .7rem 0;
  background: none;
  border: 0;
  color: var(--exc-text);
  font: inherit;
  font-size: .95rem;
}
.cr-q:focus { outline: none; }
/* La X nativa del `type=search` sale negra sobre oscuro en WebKit. */
.cr-q::-webkit-search-cancel-button { filter: invert(.5); }

.cr-cerca {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  flex: none;
  padding: .7rem 1rem;
  background: var(--exc-surface);
  border: var(--exc-border-width) solid var(--exc-border);
  border-radius: 999px;
  color: var(--exc-text);
  font: inherit;
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
}
.cr-cerca:hover { border-color: var(--exc-accent); color: var(--exc-accent); }
.cr-cerca:disabled { opacity: .6; cursor: default; }

/* ── El MENÚ: primero el camión, después la ruta ──────────────────────────────
 *
 * Eran pastillas de 13 px en una tira que se desplazaba, y eso se lee como un
 * filtro opcional: aquí es el camino principal. Son tarjetas de 72 px de alto,
 * con el icono, el nombre grande y el número de rutas en grande a la derecha —
 * pensadas para un dedo y para alguien que no trae las gafas puestas.
 */
.cr-menu {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .6rem;
}

.cr-menu-t {
  margin: .2rem 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--exc-text);
}

.cr-grupo {
  display: flex;
  align-items: center;
  gap: .9rem;
  width: 100%;
  min-height: 72px;
  padding: .9rem 1rem;
  background: var(--exc-surface);
  border: 2px solid var(--exc-border);
  border-radius: var(--exc-radius-card);
  color: var(--exc-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, transform .08s;
}
.cr-grupo:hover  { border-color: var(--cr-c, var(--exc-accent)); }
.cr-grupo:active { transform: scale(.995); }

/* El color de la línea, en un disco: una ruta se reconoce por su color antes
   que por su nombre, y así la tarjeta se distingue de un vistazo. */
.cr-grupo-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--cr-c, var(--exc-accent)) 18%, transparent);
  color: var(--cr-c, var(--exc-accent));
  font-size: 1.5rem;
}

.cr-grupo-txt { flex: 1; min-width: 0; }
.cr-grupo-txt b {
  display: block;
  font-size: 1.1rem;
  font-weight: 800;
  line-height: 1.25;
}
.cr-grupo-txt span {
  display: block;
  margin-top: .15rem;
  color: var(--exc-muted);
  font-size: .88rem;
}

.cr-grupo-n {
  flex: none;
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--cr-c, var(--exc-accent));
}
.cr-grupo > svg:last-child { flex: none; color: var(--exc-muted); }

/* ── La vuelta al menú ────────────────────────────────────────────────────────
 * Un camino de ida sin vuelta visible deja a quien entró por error dándole al
 * botón de atrás del navegador, que aquí se lleva la página entera.
 */
.cr-atras {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex-wrap: wrap;
}
.cr-atras[hidden] { display: none; }
.cr-atras b { font-size: 1.05rem; font-weight: 800; }

.cr-volver {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding: .5rem .9rem;
  background: var(--exc-surface-2);
  border: var(--exc-border-width) solid var(--exc-border);
  border-radius: 999px;
  color: var(--exc-text);
  font: inherit;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
}
.cr-volver:hover { border-color: var(--exc-accent); color: var(--exc-accent); }

/* ── Las ciudades de un grupo ─────────────────────────────────────────────────
 * MetroRed va a llevar líneas de Rioverde y de Ciudad Valles además de las de
 * la capital, y una lista que las mezcle no la reconoce nadie. Con una sola
 * ciudad no se pintan: un filtro con una opción no filtra nada.
 */
.cr-ciudades {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: .15rem;
}
.cr-ciudades::-webkit-scrollbar { display: none; }
.cr-ciudades[hidden] { display: none; }

.cr-ciudad {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  flex: none;
  min-height: 44px;
  padding: .55rem 1rem;
  background: var(--exc-surface);
  border: var(--exc-border-width) solid var(--exc-border);
  border-radius: 999px;
  color: var(--exc-text);
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}
.cr-ciudad i {
  font-style: normal;
  font-size: .8rem;
  font-variant-numeric: tabular-nums;
  color: var(--exc-muted);
}
.cr-ciudad.is-on {
  background: var(--exc-accent);
  border-color: var(--exc-accent);
  color: var(--exc-on-accent, #111);
}
.cr-ciudad.is-on i { color: inherit; opacity: .75; }

/* ── El aviso de estado (ubicación, orden por cercanía) ───────────────────── */
.cr-estado {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  padding: .55rem .8rem;
  border-radius: var(--exc-radius-sm);
  background: var(--exc-surface-2);
  color: var(--exc-muted);
  font-size: .85rem;
}
.cr-estado.is-ok  { color: var(--exc-success); }
.cr-estado.is-mal { color: var(--exc-danger, #e5484d); }
.cr-estado[hidden] { display: none; }

/* ── El visor ─────────────────────────────────────────────────────────────── */

/* ── El ALTO del mapa, en un solo sitio ──────────────────────────────────────
 *
 * Es un ALTO y no una proporción. Con `aspect-ratio: 16/10` el mapa medía
 * **243 px en un teléfono de 844**, y ahí no cabe: el plano de MegacityGo pinta
 * encima su rótulo de ruta, su leyenda de ida y vuelta, el botón de «cómo
 * llego» y la barra de atribución — casi esa altura entera solo en capas.
 *
 * Una proporción da un alto que depende del ancho, y lo que este mapa necesita
 * no depende del ancho: depende de cuánto ocupan sus capas, que miden lo mismo
 * en un teléfono que en un escritorio.
 */
.cr-visor {
  --cr-alto: 26rem;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  background: var(--exc-surface);
  border: var(--exc-border-width) solid var(--exc-border);
  border-radius: var(--exc-radius-card);
  overflow: hidden;
}
.cr-visor[hidden] { display: none; }

.cr-visor-cab {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .85rem;
  border-bottom: var(--exc-border-width) solid var(--exc-border);
}

.cr-visor-punto {
  flex: none;
  width: .9rem;
  height: .9rem;
  border-radius: 999px;
  background: var(--exc-accent);
}

.cr-visor-txt { flex: 1; min-width: 0; }
.cr-visor-txt b {
  display: block;
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cr-visor-txt small {
  display: block;
  color: var(--exc-muted);
  font-size: .78rem;
}

.cr-visor-btn {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex: none;
  padding: .5rem .8rem;
  background: var(--exc-surface-2);
  border: 0;
  border-radius: 999px;
  color: var(--exc-text);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}
.cr-visor-btn:hover { color: var(--exc-accent); }

.cr-visor-marco { background: var(--exc-surface-2); }
.cr-visor-marco iframe {
  display: block;
  width: 100%;
  height: var(--cr-alto);
  border: 0;
}

/* La guía andando vive DENTRO del mapa; aquí solo se dice que está. */
.cr-visor-pie {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  padding: .55rem .85rem;
  border-top: var(--exc-border-width) solid var(--exc-border);
  color: var(--exc-muted);
  font-size: .8rem;
}
.cr-visor-pie svg { flex: none; color: var(--exc-accent); }

/* El dato EN VIVO es lo único que pide cuenta, y se dice debajo del mapa: quien
   no entre se queda con el recorrido entero, que es a lo que vino. */
.cr-visor-cuenta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .4rem;
  margin: 0;
  padding: .6rem .85rem;
  border-top: var(--exc-border-width) solid var(--exc-border);
  background: var(--exc-surface-2);
  font-size: .82rem;
}
.cr-visor-cuenta svg { flex: none; color: var(--exc-accent); }
.cr-visor-cuenta a { font-weight: 700; color: var(--exc-accent); }

/* ── La lista ─────────────────────────────────────────────────────────────── */

.cr-lista {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cr-lista[hidden] { display: none; }

.cr-item { min-width: 0; }
.cr-item[hidden] { display: none; }

.cr-item-b {
  display: flex;
  align-items: stretch;
  gap: .7rem;
  width: 100%;
  padding: .75rem .85rem;
  background: var(--exc-surface);
  border: var(--exc-border-width) solid var(--exc-border);
  border-radius: var(--exc-radius-card);
  color: var(--exc-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.cr-item-b:hover { border-color: var(--exc-accent); }
.cr-item.is-on .cr-item-b {
  border-color: var(--exc-accent);
  background: var(--exc-surface-2);
}

.cr-item-barra {
  flex: none;
  width: .3rem;
  border-radius: 999px;
  background: var(--cr-c, var(--exc-accent));
}

.cr-item-txt { flex: 1; min-width: 0; }

.cr-item-n {
  display: block;
  font-size: .98rem;
  font-weight: 700;
  line-height: 1.3;
}

.cr-item-emp {
  display: block;
  margin-top: .1rem;
  color: var(--exc-muted);
  font-size: .8rem;
}

.cr-item-ext {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .25rem .4rem;
  margin-top: .35rem;
  color: var(--exc-muted);
  font-size: .8rem;
}
.cr-item-ext svg { flex: none; opacity: .5; }

.cr-item-der {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: .3rem;
  flex: none;
}

/* A cuánto pasa de quien mira. Nace vacío: este servidor no sabe dónde está. */
.cr-item-dist {
  padding: .15rem .5rem;
  border-radius: 999px;
  background: var(--exc-accent);
  color: var(--exc-on-accent, #111);
  font-size: .75rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.cr-item-dist[hidden] { display: none; }

.cr-item-vivo {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  color: var(--exc-success);
  font-size: .72rem;
  font-weight: 700;
  white-space: nowrap;
}

.cr-item-ver {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  color: var(--exc-muted);
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}
.cr-item-b:hover .cr-item-ver { color: var(--exc-accent); }

.cr-vacio {
  margin: 0;
  padding: 1.2rem 1rem;
  text-align: center;
  color: var(--exc-muted);
  font-size: .88rem;
  background: var(--exc-surface-2);
  border-radius: var(--exc-radius-sm);
}
.cr-vacio[hidden] { display: none; }

.cr-credito {
  margin: 0;
  color: var(--exc-muted);
  font-size: .76rem;
  opacity: .8;
}

/* ── En un teléfono, el mapa de BORDE A BORDE ────────────────────────────────
 *
 * Medido con la pestaña anterior: entre la sangría del contenedor (1rem) y la
 * de la tarjeta (1rem), el mapa se quedaba en 324 px de los 390 de la pantalla.
 * Son 66 px de margen alrededor de lo único de esta pestaña que se mira de
 * verdad, y en un mapa eso no es aire: es ciudad que no se ve.
 */
@media (max-width: 720px) {
  .cr-visor {
    margin-inline: -1rem;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }

  /* En un teléfono el alto lo manda la PANTALLA y no un número fijo: un valor
     en `rem` se queda corto en uno grande y se come la pestaña en uno pequeño.
     Estuvo en 56vh y se quedaba corto de verdad: el plano de MegacityGo pinta
     encima su rótulo, su leyenda de sentidos, el botón de «cómo llego» y la
     cinta de abajo —150 px de capas que miden lo mismo en cualquier pantalla—,
     así que de 472 px quedaban tres dedos de ciudad. Con 70vh son 590 en uno de
     844, y lo que se mira es el mapa. El suelo de 24rem es para los pequeños. */
  .cr-visor { --cr-alto: max(24rem, 70vh); }

  /* Y lo de debajo del mapa se encoge para no robarle esa altura: son dos
     renglones de ayuda, no contenido. */
  .cr-visor-pie,
  .cr-visor-cuenta { padding: .45rem .8rem; font-size: .76rem; }
  .cr-salir { min-height: 44px; font-size: .88rem; }

  .cr-item-der { align-items: flex-end; }
}

/* En una pantalla ancha se alarga: ahí el ancho sobra y lo que falta para
   entender un recorrido es ver más ciudad arriba y abajo. */
@media (min-width: 1100px) {
  .cr-visor { --cr-alto: 30rem; }
}

/* Y un tope por ALTO, que es lo que escasea en un teléfono acostado: ahí la
   pantalla mide 844 de ancho y 390 de alto, así que pasa de largo la consulta
   de arriba —que mira el ancho— y se quedaría con las 26rem de base: un mapa
   más alto que lo que se ve. Va DESPUÉS para ganar por orden. */
@media (max-height: 560px) {
  .cr-visor { --cr-alto: min(26rem, 78vh); }
}

/* ── Pantalla completa (ver ruta_publica.js) ──────────────────────────────────
 *
 * Es CSS y no la API del navegador: en iPhone un elemento no puede ponerse a
 * pantalla completa, y el botón tiene que servir igual ahí, que es donde más
 * falta hace. Salir es un botón GRANDE con palabras, no una X de esquina.
 */
.cr-salir {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 0 1rem;
  margin: 0;
  background: var(--exc-surface-2);
  border: 0;
  border-top: var(--exc-border-width) solid var(--exc-border);
  color: var(--exc-text);
  font: inherit;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
}

.cr-visor.is-full {
  position: fixed;
  inset: 0;
  z-index: 3000;
  margin: 0;
  border: 0;
  border-radius: 0;
  grid-template-rows: auto 1fr auto;
  background: var(--exc-surface);
}
.cr-visor.is-full .cr-visor-marco { min-height: 0; }
.cr-visor.is-full .cr-visor-marco iframe { height: 100%; }
.cr-visor.is-full .cr-visor-pie,
.cr-visor.is-full .cr-visor-cuenta { display: none; }
.cr-visor.is-full .cr-salir {
  min-height: 54px;
  background: var(--exc-accent);
  color: var(--exc-on-accent, #111);
  font-size: 1rem;
  font-weight: 800;
}

html.cr-bloqueo, html.cr-bloqueo body { overflow: hidden; }

/* ── La cabecera del visor, en un teléfono ───────────────────────────────────
 *
 * Medido a 390 px: con el botón escrito entero, el nombre de la ruta se quedaba
 * en «Ruta 6 Las…» y su empresa partía renglón. El botón se queda con el icono
 * —que es el que se reconoce— y el nombre recupera la línea entera.
 */
@media (max-width: 560px) {
  .cr-visor-btn span { display: none; }
  .cr-visor-btn { padding: .5rem .6rem; }
  .cr-visor-txt small {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ── Los extremos, en un teléfono ────────────────────────────────────────────
 *
 * «CETRAM Centro de Transferencia Metropolitano → CETRAM Centro de
 * Transferencia Metropolitano» ocupa TRES renglones a 390 px y deja el renglón
 * en 200 px de alto: siete rutas así son cuatro pantallas de scroll para elegir
 * una. Recortado con puntos suspensivos tampoco sirve —«CETRAM C… → CETRAM C…»
 * no dice nada— así que en un teléfono no se pinta: de dónde a dónde va se lee
 * en el mapa, que está a un toque.
 */
@media (max-width: 560px) {
  .cr-item-ext { display: none; }
}

/* El nombre, a dos renglones como mucho en un teléfono ───────────────────────
 * «Ruta 2 Av. Morales Saucito-Hospital-Central-Circuito Interior» ocupa cuatro
 * renglones a 390 px: con 56 rutas eso son ocho pantallas de scroll. Dos líneas
 * dejan ver el número y por dónde empieza, que es lo que se busca al recorrer
 * la lista; el nombre entero sale en el visor al abrirla.
 */
@media (max-width: 560px) {
  .cr-item-n {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
  }
}

/* ── La barra del pulgar ──────────────────────────────────────────────────────
 *
 * Solo en el teléfono. Con 56 rutas, cambiar de camión o buscar obligaba a
 * subir cinco pantallas, y ese es el gesto que se deja de hacer.
 *
 * Es `fixed` y vive DENTRO del panel de la pestaña: un panel con `hidden` no
 * pinta nada, así que la barra se va sola al cambiar a «Momentos» sin una
 * línea de guion que lo vigile.
 */
.cr-nav { display: none; }

@media (max-width: 720px) {
  .cr-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 900;
    display: flex;
    gap: .25rem;
    padding: .35rem .5rem calc(.35rem + env(safe-area-inset-bottom));
    background: var(--exc-surface);
    border-top: var(--exc-border-width) solid var(--exc-border);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, .18);
  }

  .cr-nav-b {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;
    flex: 1;
    min-height: 56px;          /* lo que pide un pulgar */
    padding: .35rem .2rem;
    background: none;
    border: 0;
    border-radius: 12px;
    color: var(--exc-muted);
    font: inherit;
    font-size: .72rem;
    font-weight: 700;
    cursor: pointer;
  }
  .cr-nav-b svg { font-size: 1.25rem; }
  .cr-nav-b.is-on { color: var(--exc-accent); background: var(--exc-surface-2); }
  .cr-nav-b:disabled { opacity: .4; cursor: default; }

  /* Para que la barra no se coma el final de la lista ni el crédito. */
  .cr-ruta { padding-bottom: 76px; }

  /* Con el mapa a pantalla completa taparía ciudad, y ahí el único control que
     hace falta es «Cerrar el mapa». */
  .cr-ruta:has(.cr-visor.is-full) .cr-nav { display: none; }
}

/* ── «¿A dónde vas?» ──────────────────────────────────────────────────────────
 *
 * Va arriba del buscador de rutas y pesa más que él: entre «busca tu ruta» y
 * «¿a dónde vas?», la segunda es la que sirve a quien no se sabe la red — que
 * es casi todo el mundo.
 */
.cr-ir {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .6rem;
  padding: 1rem;
  background: color-mix(in srgb, var(--exc-accent) 10%, var(--exc-surface));
  border: 2px solid color-mix(in srgb, var(--exc-accent) 35%, transparent);
  border-radius: var(--exc-radius-card);
}

.cr-ir-t {
  display: flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  font-size: 1.15rem;
  font-weight: 800;
}
.cr-ir-t svg { color: var(--exc-accent); }

.cr-ir-campo { display: flex; gap: .5rem; flex-wrap: wrap; }

.cr-ir-q {
  flex: 1 1 12rem;
  min-width: 0;
  min-height: 52px;              /* se teclea de pie y con una mano */
  padding: .7rem 1rem;
  background: var(--exc-surface);
  border: var(--exc-border-width) solid var(--exc-border);
  border-radius: 12px;
  color: var(--exc-text);
  font: inherit;
  font-size: 1rem;
}
.cr-ir-q:focus { outline: none; border-color: var(--exc-accent); }

.cr-ir-btn {
  flex: none;
  min-height: 52px;
  padding: .7rem 1.4rem;
  background: var(--exc-accent);
  border: 0;
  border-radius: 12px;
  color: var(--exc-on-accent, #111);
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  cursor: pointer;
}

/* Las sugerencias del destino SÍ son un desplegable: tres o cuatro renglones
   que aparecen y se van, no una lista que se recorre. */
.cr-ir-sug {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cr-ir-sug[hidden] { display: none; }

.cr-ir-sug-b {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: .6rem .8rem;
  background: var(--exc-surface);
  border: var(--exc-border-width) solid var(--exc-border);
  border-radius: 10px;
  color: var(--exc-text);
  font: inherit;
  font-size: .92rem;
  text-align: left;
  cursor: pointer;
}
.cr-ir-sug-b:hover { border-color: var(--exc-accent); }

.cr-ir-aviso {
  margin: 0;
  color: var(--exc-muted);
  font-size: .88rem;
}
.cr-ir-aviso.is-mal { color: var(--exc-danger, #e5484d); }
.cr-ir-aviso[hidden] { display: none; }

/* ── El itinerario ───────────────────────────────────────────────────────── */
.cr-ir-res { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; }
.cr-ir-res[hidden] { display: none; }

.cr-via {
  padding: .9rem 1rem;
  background: var(--exc-surface);
  border: var(--exc-border-width) solid var(--exc-border);
  border-radius: var(--exc-radius-card);
}
.cr-via.is-mejor { border-color: var(--exc-accent); }

.cr-via-t { margin: 0; font-size: 1.05rem; font-weight: 800; }

.cr-via-chip {
  margin: .2rem 0 .7rem;
  color: var(--exc-muted);
  font-size: .85rem;
  font-weight: 700;
}

.cr-via-pasos {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .5rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: paso;
}

/* Cada paso con la barra de color de su ruta: el mismo con el que se dibuja en
   el mapa, así que quien ya la conoce la reconoce sin leer. */
.cr-via-paso {
  position: relative;
  padding: .55rem .7rem .55rem 1rem;
  background: var(--exc-surface-2);
  border-radius: 10px;
  border-left: 5px solid var(--cr-c, var(--exc-accent));
  font-size: .92rem;
}
.cr-via-paso b { display: block; font-size: 1rem; font-weight: 800; }
.cr-via-paso span { display: block; margin-top: .15rem; color: var(--exc-muted); font-size: .85rem; }
.cr-via-paso.is-fin {
  background: none;
  border-left-color: var(--exc-success, #22c55e);
  font-weight: 700;
}

.cr-via-mapa {
  margin-top: .45rem;
  padding: .4rem .8rem;
  background: none;
  border: var(--exc-border-width) solid var(--exc-border);
  border-radius: 999px;
  color: var(--exc-text);
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  cursor: pointer;
}
.cr-via-mapa:hover { border-color: var(--exc-accent); color: var(--exc-accent); }

/* Lo que NO se puede prometer, dicho donde se lee: no hay horarios publicados,
   y un «llegas en 35 min» inventado es por lo que alguien pierde una cita. */
.cr-via-nota {
  margin: .6rem 0 0;
  color: var(--exc-muted);
  font-size: .78rem;
}

/* Los pasos a PIE se ven distintos del camión: son los que la persona tiene
   que hacer con sus piernas, y en un itinerario eso es lo que se pregunta dos
   veces («¿y cuánto camino?»). */
.cr-via-paso.is-pie {
  background: none;
  border-left-style: dashed;
  border-left-color: var(--exc-border);
  color: var(--exc-muted);
  font-size: .86rem;
}
.cr-via-paso.is-pie { border-left-width: 3px; padding-left: 1.1rem; }

/* Un sitio del CATÁLOGO de la ciudad —el hospital, la plaza, la central— se ve
   distinto de una dirección cualquiera: son los que casi siempre se buscan, y
   los que de verdad tienen camión que llegue. */
.cr-ir-sug-b.is-conocido {
  border-color: color-mix(in srgb, var(--exc-accent) 45%, transparent);
  font-weight: 700;
}
.cr-ir-sug-b.is-conocido::before {
  content: '';
  display: inline-block;
  width: .5rem;
  height: .5rem;
  margin-right: .5rem;
  border-radius: 50%;
  background: var(--exc-accent);
  vertical-align: middle;
}

/* ── De dónde sales ───────────────────────────────────────────────────────────
 * Plegado, porque es el caso raro: casi siempre se sale de donde se está. Pero
 * el GPS falla, hay quien lo tiene apagado y hay quien planea el viaje de
 * mañana desde su casa — y a todos ésos la pestaña les decía «no pasa ningún
 * camión» sin más salida.
 */
.cr-ir-desde > summary {
  cursor: pointer;
  padding: .35rem .1rem;
  color: var(--exc-muted);
  font-size: .86rem;
  font-weight: 700;
}
.cr-ir-desde > summary::marker { color: var(--exc-accent); }
.cr-ir-desde[open] > summary { margin-bottom: .4rem; }
.cr-ir-desde .cr-ir-campo { margin-bottom: .4rem; }

.cr-ir-elegido {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .4rem 0 0;
  color: var(--exc-text);
  font-size: .88rem;
  font-weight: 700;
}
.cr-ir-elegido[hidden] { display: none; }

.cr-ir-quitar {
  padding: .3rem .7rem;
  background: var(--exc-surface-2);
  border: var(--exc-border-width) solid var(--exc-border);
  border-radius: 999px;
  color: var(--exc-text);
  font: inherit;
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
}
.cr-ir-quitar:hover { border-color: var(--exc-accent); color: var(--exc-accent); }