@font-face {
  font-family: 'Atkinson';
  src: url('/fonts/atkinson-hyperlegible-latin-400-normal.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Atkinson';
  src: url('/fonts/atkinson-hyperlegible-latin-700-normal.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Rotulo';
  src: url('/fonts/big-shoulders-display-latin-600-normal.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'Rotulo';
  src: url('/fonts/big-shoulders-display-latin-800-normal.woff2') format('woff2');
  font-weight: 800; font-display: swap;
}

:root {
  --cal: #F6F8F9;
  --superficie: #FFFFFF;
  --tinta: #0E2A3B;
  --marea: #5B7280;
  --espuma: #E3EBEF;
  --noche: #10283A;
  --noche-fila: #17344A;
  --led: #FFB547;
  --led-suave: #C9A46A;
  --foco: #1F6FEB;
  --verde: #0B7A3F;        /* "Llega" sobre fondo claro */
  --verde-led: #4ADE80;    /* "Llega" en el panel oscuro */
  --rojo-fin: #C62828;     /* "Finalizada" sobre fondo claro */
  --rojo-led: #FF6B6B;     /* "Finalizada" en el panel oscuro */
  --borde-boton: #B7C6D0;  /* borde y relieve de los botones */
  --relieve: #9FB1BD;
  --sombra-hoja: 0 -8px 28px rgba(14, 42, 59, .14);

  --l1: #E2231A; --l1-t: #FFFFFF;
  --l2: #FDBC30; --l2-t: #0E2A3B;
  --l3: #1F3FD6; --l3-t: #FFFFFF;
  --l5: #6B3A0E; --l5-t: #FFFFFF;
  --l7: #1A1466; --l7-t: #FFFFFF;

  --texto: 'Atkinson', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --rotulo: 'Rotulo', 'Arial Narrow', sans-serif;

  --hoja-baja: 168px;
  --hoja-media: 50dvh;
  --hoja-alta: 88dvh;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cal: #0C1B25; --superficie: #12242F; --tinta: #E8EFF3; --marea: #93A7B3; --espuma: #22394A;
    --noche: #081520; --noche-fila: #0F2232; --sombra-hoja: 0 -8px 28px rgba(0, 0, 0, .45);
    --l7: #4B43C9; --verde: #4ADE80; --borde-boton: #35546A; --relieve: #061019; --rojo-fin: #FF6B6B; color-scheme: dark;
  }
  :root:not([data-theme="light"]) .aviso-parada { color: #FFC266; }
}
:root[data-theme="dark"] .aviso-parada { color: #FFC266; }
:root[data-theme="dark"] {
  --cal: #0C1B25; --superficie: #12242F; --tinta: #E8EFF3; --marea: #93A7B3; --espuma: #22394A;
  --noche: #081520; --noche-fila: #0F2232; --sombra-hoja: 0 -8px 28px rgba(0, 0, 0, .45);
  --l7: #4B43C9; --verde: #4ADE80; --borde-boton: #35546A; --relieve: #061019; --rojo-fin: #FF6B6B; color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--cal);
  color: var(--tinta);
  font-family: var(--texto);
  font-size: 18px;
  line-height: 1.45;
  overflow: hidden;
  -webkit-text-size-adjust: 100%;
}
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; }
button svg, label svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Mapa */
.mapa { position: fixed; inset: 0; z-index: 0; background: var(--espuma); }
.leaflet-container { font-family: var(--texto); }
.leaflet-control-attribution { font-size: 11px; }
.capa-superior {
  position: fixed; z-index: 500; left: 12px; right: 12px; top: calc(env(safe-area-inset-top) + 12px);
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; pointer-events: none;
}
.capa-lineas { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; max-width: 100%; pointer-events: auto; padding: 2px; }
.nota-buses {
  margin: 0; padding: 6px 12px; border-radius: 10px; font-size: 16px; max-width: 34ch;
  background: var(--superficie); color: var(--tinta); box-shadow: 0 1px 4px rgba(14, 42, 59, .18);
}
.bus-mapa span {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: var(--lc); color: var(--lt); border: 2px solid var(--superficie);
  box-shadow: 0 2px 6px rgba(14, 42, 59, .35);
}
/* Flecha de marcha: gira alrededor del icono y apunta hacia donde va el bus */
.bus-mapa { position: relative; }
.bus-mapa .flecha { position: absolute; inset: -9px; pointer-events: none; }
.bus-mapa .flecha::before {
  content: ""; position: absolute; left: 50%; top: 0; margin-left: -7px;
  border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 10px solid var(--tinta);
  filter: drop-shadow(0 0 1.5px var(--superficie)) drop-shadow(0 0 1.5px var(--superficie));
}
.bus-mapa span { position: relative; z-index: 1; }
.bus-mapa svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.leaflet-popup-content { font-family: var(--texto); font-size: 17px; line-height: 1.4; }
.leaflet-popup-content small { color: var(--marea); }
.capa-lineas::-webkit-scrollbar { display: none; }

/* Número de línea: el mismo sello en chips, listas y panel */
.sello {
  display: inline-grid; place-items: center; flex: none;
  min-width: 34px; height: 34px; padding: 0 6px; border-radius: 8px;
  font-family: var(--rotulo); font-weight: 800; font-size: 24px; line-height: 1;
  background: var(--lc, var(--marea)); color: var(--lt, #fff);
}
.sello.pequeno { min-width: 30px; height: 30px; font-size: 22px; border-radius: 7px; }
.chip-linea {
  border: 0; padding: 5px; border-radius: 12px; background: var(--superficie);
  box-shadow: 0 3px 0 rgba(14, 42, 59, .28), 0 1px 4px rgba(14, 42, 59, .18); display: flex; align-items: center; gap: 6px;
}
.chip-linea .sello { min-width: 40px; height: 40px; font-size: 28px; }
.chip-linea:active { transform: translateY(2px); }
.chip-linea[aria-pressed="false"] .sello { background: transparent; color: var(--tinta); box-shadow: inset 0 0 0 2px var(--lc); }

.boton-ubicacion {
  position: fixed; z-index: 500; right: 14px;
  bottom: calc(var(--hoja-actual, var(--hoja-media)) + 14px);
  width: 48px; height: 48px; border-radius: 50%; border: 0;
  background: var(--superficie); box-shadow: 0 2px 8px rgba(14, 42, 59, .22);
  display: grid; place-items: center; transition: bottom .25s ease;
}
.boton-ubicacion .relleno { fill: currentColor; }
.boton-ubicacion[data-activo="true"] { color: var(--foco); }

/* Hoja inferior */
.hoja {
  position: fixed; z-index: 600; left: 0; right: 0; bottom: 0;
  height: var(--hoja-actual, var(--hoja-media));
  background: var(--superficie); border-radius: 20px 20px 0 0; box-shadow: var(--sombra-hoja);
  display: flex; flex-direction: column;
  transition: height .25s ease;
  padding-bottom: env(safe-area-inset-bottom);
}
.hoja[data-estado="baja"] { --hoja-actual: var(--hoja-baja); }
.hoja[data-estado="media"] { --hoja-actual: var(--hoja-media); }
.hoja[data-estado="alta"] { --hoja-actual: var(--hoja-alta); }
.asa { border: 0; background: none; padding: 10px 0 6px; width: 100%; display: grid; place-items: center; flex: none; touch-action: none; }
.asa span { width: 40px; height: 5px; border-radius: 3px; background: var(--espuma); }
.vista { overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 24px; flex: 1; }

.buscador {
  display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 14px;
  background: var(--superficie); border: 2px solid var(--borde-boton); border-radius: 12px; color: var(--marea);
}
.buscador input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; color: var(--tinta); outline: none; }
.buscador:focus-within { box-shadow: 0 0 0 3px var(--foco); }
.buscador input::placeholder { color: var(--marea); }

.bloque { margin-top: 20px; }
.titulo-bloque { font-size: 20px; font-weight: 700; color: var(--tinta); margin: 0 0 4px; }
.lista-paradas { list-style: none; margin: 0; padding: 0; }
.lista-paradas li + li { border-top: 1px solid var(--espuma); }
.fila-parada {
  width: 100%; border: 0; background: none; text-align: left; padding: 12px 0;
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center;
}
.fila-parada .nombre { font-weight: 700; }
.fila-parada .distancia { color: var(--marea); font-size: 16px; grid-row: span 2; text-align: right; }
.fila-parada .sellos { display: flex; gap: 6px 14px; flex-wrap: wrap; margin-top: 2px; }
.fila-parada .sentido { display: inline-flex; align-items: center; gap: 8px; font-size: 17px; color: var(--tinta); }
.vacio { color: var(--marea); padding: 12px 0; margin: 0; }
.lista-lineas { list-style: none; margin: 0; padding: 0; }
.lista-lineas li + li { border-top: 1px solid var(--espuma); }
.fila-linea { width: 100%; border: 0; background: none; text-align: left; padding: 12px 0; display: flex; align-items: center; gap: 14px; }
.texto-linea { display: flex; flex-direction: column; min-width: 0; }
.texto-linea .nombre { font-weight: 700; }
.texto-linea .recorrido { color: var(--marea); font-size: 17px; }
.aviso-ubicacion p { margin: 8px 0 12px; color: var(--marea); }
.boton-secundario {
  min-height: 52px; border: 2px solid var(--tinta); background: var(--superficie); border-radius: 12px; padding: 0 18px; font-weight: 700;
  box-shadow: 0 4px 0 var(--tinta); transition: transform .08s ease, box-shadow .08s ease;
}
.boton-secundario:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--tinta); }
.pie { margin-top: 28px; color: var(--marea); font-size: 16px; }
.pie p { margin: 0; max-width: 60ch; }
/* Instalar en el móvil */
.aviso-instalar { margin-top: 20px; padding: 14px 16px; border: 2px solid var(--borde-boton); border-radius: 14px; background: var(--superficie); }
.aviso-instalar > strong { font-size: 19px; }
.aviso-instalar > p { margin: 4px 0 10px; color: var(--marea); }
.aviso-instalar .pasos { margin: 6px 0 10px; padding-left: 22px; display: flex; flex-direction: column; gap: 6px; line-height: 1.35; }
.aviso-instalar .pasos svg { width: 18px; height: 18px; vertical-align: -3px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.aviso-instalar .acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.enlace-instalar { background: none; border: 0; padding: 8px 0; min-height: 44px; color: inherit; font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#pie-instalar { margin-bottom: 10px; }

/* Parada */
.cabecera-parada {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "volver extra" "titulo titulo";
  align-items: center; gap: 12px 8px; padding-top: 2px;
}
.cabecera-parada .volver { grid-area: volver; justify-self: start; }
.cabecera-parada .titulo-parada { grid-area: titulo; min-width: 0; }
.cabecera-parada .favorito, .cabecera-parada #sello-linea { grid-area: extra; }
/* Botones con relieve: borde firme y sombra sólida debajo, se hunden al pulsar */
.boton-tactil {
  display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 18px 0 12px;
  border: 2px solid var(--borde-boton); border-radius: 12px; background: var(--superficie); color: var(--tinta);
  font-size: 18px; font-weight: 700; box-shadow: 0 4px 0 var(--relieve);
  transition: transform .08s ease, box-shadow .08s ease;
}
.boton-tactil:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--relieve); }
.boton-tactil.favorito svg { color: var(--marea); }
.boton-tactil.favorito[aria-pressed="true"] { background: #FFF1D6; border-color: #E8B04B; color: #10283A; box-shadow: 0 4px 0 #C98F27; }
.boton-tactil.favorito[aria-pressed="true"] svg { color: #B57A00; }
.boton-tactil.favorito[aria-pressed="true"] path { fill: currentColor; }
.titulo-parada h1 { font-size: 26px; line-height: 1.15; margin: 4px 0 4px; text-wrap: balance; }
.titulo-parada p { margin: 0; color: var(--marea); font-size: 18px; }
.direcciones { list-style: none; padding: 0; margin: 12px 0 14px; display: flex; flex-direction: column; gap: 6px; }
.direcciones li { display: flex; align-items: center; gap: 10px; font-size: 18px; }

/* Lista de paradas de una línea */
#sello-linea .sello { min-width: 48px; height: 48px; font-size: 34px; border-radius: 10px; }
.sentidos { display: flex; gap: 6px; margin: 14px 0 6px; background: var(--cal); padding: 4px; border-radius: 12px; }
.pestana { flex: 1; min-width: 0; border: 0; background: none; border-radius: 9px; padding: 11px 8px; font-size: 17px; font-weight: 700; color: var(--marea); min-height: 52px; }
.pestana[aria-selected="true"] { background: var(--superficie); color: var(--tinta); box-shadow: 0 1px 3px rgba(14, 42, 59, .16); }
.paradas-linea { list-style: none; margin: 8px 0 0; padding: 0; }
.paradas-linea li { position: relative; padding-left: 34px; }
/* tramo vertical del color de la línea */
.paradas-linea li::before { content: ""; position: absolute; left: 11px; top: 0; bottom: 0; width: 4px; background: var(--lc); }
.paradas-linea li.primera::before { top: 50%; }
.paradas-linea li.ultima::before { bottom: 50%; }
.parada-linea::after {
  content: ""; position: absolute; left: 5px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  border-radius: 50%; background: var(--superficie); border: 3px solid var(--lc); box-sizing: border-box;
}
.parada-linea button { width: 100%; border: 0; background: none; text-align: left; padding: 10px 0; display: flex; align-items: center; gap: 12px; }
.parada-linea .texto-parada { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.parada-linea .espera-linea { font-family: var(--rotulo); font-weight: 800; font-size: 28px; line-height: 1; color: var(--tinta); font-variant-numeric: tabular-nums; }
.parada-linea .espera-linea small { font-weight: 600; font-size: 17px; margin-left: 2px; }
.parada-linea + .parada-linea button { border-top: 1px solid var(--espuma); }
.parada-linea .nombre { font-weight: 700; }
.parada-linea .numero { font-size: 16px; color: var(--marea); }
.bus-en-linea { display: flex; align-items: center; gap: 10px; padding: 6px 0; font-size: 15px; font-weight: 700; color: var(--tinta); }
.bus-en-linea .icono-bus {
  position: absolute; left: 0; top: 50%; margin-top: -13px; z-index: 1;
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--lc); color: var(--lt, #fff);
  border: 2px solid var(--superficie);
}
.bus-en-linea .icono-bus svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.aviso-parada { display: block; font-size: 16px; font-weight: 700; color: #9A5B00; }
.titulo-parada .aviso-parada { margin-top: 2px; }
.paradas-linea li.parcial::after { border-style: dashed; }
.nota-lista { color: var(--marea); font-size: 16px; margin: 14px 0 0; }
.parada-linea .tambien { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; }
.parada-linea .tambien .sello.pequeno { min-width: 26px; height: 26px; font-size: 19px; }

/* El panel de la marquesina: el único momento llamativo */
.marquesina { background: var(--noche); color: #F2F5F7; border-radius: 14px; padding: 6px 0 0; overflow: hidden; }
.llegadas { list-style: none; margin: 0; padding: 0; }
.llegada {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px;
  padding: 12px 14px; border-bottom: 1px solid var(--noche-fila);
}
.llegada .destino { font-size: 19px; line-height: 1.2; }
.llegada .destino small { display: block; color: #AFC0CC; font-size: 15px; margin-top: 2px; }
.llegada .espera { font-family: var(--rotulo); font-weight: 800; color: var(--led); font-size: 44px; line-height: .9; text-align: right; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.llegada .espera span { font-weight: 600; font-size: 20px; margin-left: 2px; }
.llegada.programado .espera, .llegada.mas_de .espera { color: var(--led-suave); font-size: 28px; font-weight: 600; }
/* Las horas del horario: el número de línea y el destino van normales (apagados parecía que no
   había servicio, 7/11); lo dice el texto «Puede variar» y el tiempo algo más suave */
.llegada .destino small.despues { color: #C8D5DE; font-size: 16px; }
.llegada .destino small.en-parada { color: var(--verde-led); font-weight: 600; }
.llegada.en_cabecera .espera { font-family: var(--texto); font-weight: 700; font-size: 18px; color: var(--led); }
.llegada.sin_servicio .espera { color: #9DB0BE; font-family: var(--texto); font-weight: 700; font-size: 17px; }
.llegada.llega .espera {
  font-family: var(--texto); font-size: 22px; font-weight: 700; color: var(--verde-led);
  background: rgba(74, 222, 128, .14); border-radius: 8px; padding: 8px 12px;
}
.parada-linea .espera-linea.llega { font-family: var(--texto); font-size: 20px; font-weight: 700; color: var(--verde); }
.llegada.inminente .espera { animation: parpadeo 1.6s steps(2, jump-none) infinite; }
@keyframes parpadeo { 50% { opacity: .35; } }
.mensaje-panel { padding: 18px 14px; margin: 0; color: #C8D5DE; }
.mensaje-panel strong { color: #fff; display: block; margin-bottom: 4px; }
.marquesina-pie { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 12px; padding: 12px 14px 14px; font-size: 16px; color: #AFC0CC; }
/* Actualizar: el botón ámbar del panel, con relieve para que se vea que se pulsa */
.boton-refrescar {
  display: inline-flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 20px;
  border: 0; border-radius: 12px; background: var(--led); color: #10283A; font-size: 18px; font-weight: 700;
  box-shadow: 0 4px 0 #A8691C; transition: transform .08s ease, box-shadow .08s ease;
}
.boton-refrescar:active { transform: translateY(3px); box-shadow: 0 1px 0 #A8691C; }
.marquesina[aria-busy="true"] .boton-refrescar { opacity: .5; }
.esqueleto { height: 30px; margin: 16px 14px; border-radius: 6px; background: var(--noche-fila); }

/* Tus paradas: el próximo bus a la vista, como un trozo del panel */
.fila-parada .proximos {
  grid-column: 1 / -1; margin-top: 8px; display: flex; flex-direction: column;
  background: var(--noche); color: #F2F5F7; border-radius: 10px; padding: 4px 12px;
}
.proximo { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 7px 0; }
.proximo + .proximo { border-top: 1px solid var(--noche-fila); }
.proximo-destino { font-size: 17px; line-height: 1.2; min-width: 0; }
.proximo-espera { font-family: var(--rotulo); font-weight: 800; font-size: 28px; line-height: 1; color: var(--led); font-variant-numeric: tabular-nums; white-space: nowrap; }
.proximo-espera.horario { color: var(--led-suave); font-size: 22px; font-weight: 600; }
.proximo-espera.llega { font-family: var(--texto); font-size: 19px; font-weight: 700; color: var(--verde-led); }
.proximos-nota { font-size: 16px; color: #C8D5DE; padding: 8px 0; }

/* Marcadores */
.marcador { display: grid; place-items: center; }
.marcador-parada {
  display: block; width: 100%; height: 100%; border-radius: 50%;
  background: var(--superficie); border: 3px solid var(--borde-parada, var(--tinta));
  transition: transform .15s ease;
}
.marcador-parada.sin-panel { border-color: var(--marea); }
.marcador-parada.activa { background: var(--led); border-color: var(--noche); }
.mapa[data-distancia="lejos"] .marcador-parada:not(.activa) { transform: scale(.5); border-width: 4px; }
.mapa[data-distancia="media"] .marcador-parada:not(.activa) { transform: scale(.72); }
.punto-yo { background: var(--foco); border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 6px rgba(31, 111, 235, .22); }

/* Tablet y ordenador: la lista en una columna a la izquierda, de arriba abajo, y el mapa a la
   derecha (7/11: en la tablet la ventana quedaba flotando en medio) */
@media (min-width: 640px) {
  .hoja { left: 0; top: 0; bottom: 0; right: auto; width: min(420px, 48vw); height: auto !important; border-radius: 0; box-shadow: 0 0 24px rgba(14, 42, 59, .2); }
  .asa { display: none; }
  .vista { padding-top: calc(env(safe-area-inset-top) + 16px); }
  .mapa { left: min(420px, 48vw); }
  .capa-superior { left: calc(min(420px, 48vw) + 12px); }
  .boton-ubicacion { bottom: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  .hoja, .boton-ubicacion, .boton-tactil, .boton-refrescar, .boton-secundario { transition: none; }
  .llegada.inminente .espera { animation: none; }
}
/* En "Tus paradas" el panel ya dice línea y destino: no se repite la lista de sentidos */
.favorita .fila-parada .sellos { display: none; }

/* ===================================================================
   Aspecto de la propuesta de Stitch (5/11/2026): fondo gris claro,
   tarjetas blancas con borde y relieve, azul marino y panel LED.
   =================================================================== */
:root {
  --cal: #F2F4F7; --superficie: #FFFFFF; --tinta: #111827; --marea: #434750; --espuma: #E0E3E6;
  --marino: #0D3268; --marino-borde: #082042; --marino-suave: #D8E2FF;
  --borde-tarjeta: #D1D8E0; --relieve-tarjeta: #C3CBD5;
  --noche: #1F2937; --noche-fila: #2B3644; --noche-caja: #111827;
  --aviso-fondo: #F9F0E3; --aviso: #FFB547; --aviso-texto: #3A2500;
  --rotulo: var(--texto);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cal: #0E1620; --superficie: #17212C; --tinta: #EEF1F5; --marea: #B3BAC5; --espuma: #26323F;
    --marino: #2F5BA8; --marino-borde: #0A1830; --marino-suave: #22375C;
    --borde-tarjeta: #2C3A48; --relieve-tarjeta: #070C12;
    --noche: #0B1118; --noche-fila: #18222E; --noche-caja: #05090E;
    --aviso-fondo: #2A2214;
  }
}
:root[data-theme="dark"] {
  --cal: #0E1620; --superficie: #17212C; --tinta: #EEF1F5; --marea: #B3BAC5; --espuma: #26323F;
  --marino: #2F5BA8; --marino-borde: #0A1830; --marino-suave: #22375C;
  --borde-tarjeta: #2C3A48; --relieve-tarjeta: #070C12;
  --noche: #0B1118; --noche-fila: #18222E; --noche-caja: #05090E;
  --aviso-fondo: #2A2214;
}

/* Hoja: fondo gris para que resalten las tarjetas */
.hoja { background: var(--cal); }
.asa span { background: var(--borde-tarjeta); }

/* Tarjeta común */
.lista-paradas li, .lista-lineas li, .tarjeta-titulo, .parada-linea button {
  background: var(--superficie); border: 1.5px solid var(--borde-tarjeta); border-radius: 12px;
  box-shadow: 0 3px 0 var(--relieve-tarjeta);
}
.lista-paradas, .lista-lineas { display: flex; flex-direction: column; gap: 12px; padding-bottom: 4px; }
.lista-paradas li + li, .lista-lineas li + li { border-top: 1.5px solid var(--borde-tarjeta); }

/* Cabecera con el nombre */
.marca { display: flex; align-items: center; gap: 12px; padding: 4px 0 14px; }
.marca .logo { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--marino); color: #fff; flex: none; }
.marca .logo svg, .icono-parada svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.marca .relleno, .icono-parada .relleno { fill: currentColor; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.2; }
.marca-texto strong { font-size: 22px; color: var(--tinta); }
.marca-texto span { font-size: 16px; color: var(--marea); }

.buscador { background: var(--superficie); border-color: var(--borde-tarjeta); }
.titulo-bloque { display: flex; align-items: center; gap: 10px; font-size: 22px; margin: 0 0 12px; }
.titulo-bloque svg { width: 24px; height: 24px; fill: none; stroke: var(--marino); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
#bloque-favoritas .titulo-bloque svg { stroke: #C98F27; }
.bloque { margin-top: 26px; }

/* Filas de parada (Tus paradas, Cerca de ti, Resultados) */
.fila-parada { padding: 14px 16px; gap: 4px 12px; align-items: start; border-radius: 12px; }
.fila-parada .nombre { font-size: 19px; line-height: 1.25; }
.fila-parada .distancia { grid-row: span 2; font-size: 16px; font-weight: 700; color: var(--marea); line-height: 1.3; }
.fila-parada .numero-fila { font-size: 16px; color: var(--marea); }
.fila-parada .sellos { grid-column: 1 / -1; flex-direction: column; gap: 8px; margin-top: 6px; }
.fila-parada .sentido { font-size: 17px; }
.fila-parada .sello.pequeno { min-width: 34px; height: 34px; font-size: 20px; border-radius: 8px; }

/* Tus paradas: el próximo bus en una caja oscura */
.fila-parada .proximos { background: var(--noche); border-radius: 10px; padding: 6px 10px; margin-top: 10px; }
.proximo { gap: 12px; padding: 8px 0; }
.proximo + .proximo { border-top-color: var(--noche-fila); }
.proximo-destino { font-weight: 700; font-size: 18px; color: #F2F5F7; }
.proximo-espera { background: var(--noche-caja); border-radius: 8px; padding: 6px 10px; font-size: 26px; font-weight: 800; letter-spacing: -.01em; }
.proximo-espera.llega { background: rgba(74, 222, 128, .14); }

/* Líneas */
.fila-linea { padding: 14px 14px 14px 16px; gap: 14px; border-radius: 12px; }
.fila-linea .sello { min-width: 44px; height: 44px; font-size: 24px; border-radius: 10px; }
.texto-linea { flex: 1; }
.texto-linea .nombre { font-size: 19px; }
.fila-linea .flecha { width: 24px; height: 24px; color: var(--marea); flex: none; }

/* Sellos de línea: Atkinson en negrita, cuadrados redondeados */
.sello { font-weight: 700; border-radius: 8px; font-size: 22px; min-width: 38px; height: 38px; }
.sello.pequeno { font-size: 18px; }

/* Pie: aviso de web no oficial en una tarjeta ámbar */
.pie { background: var(--aviso-fondo); border: 1.5px solid #F0C36D; border-radius: 12px; padding: 14px 16px; color: var(--tinta); }

/* Títulos de línea y parada en tarjeta */
.tarjeta-titulo { grid-area: titulo; display: flex; align-items: flex-start; gap: 14px; padding: 14px 16px; min-width: 0; }
.tarjeta-titulo .titulo-parada h1 { margin-top: 0; font-size: 24px; }
.icono-parada { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: var(--marino-suave); color: var(--marino); flex: none; }
:root[data-theme="dark"] .icono-parada { color: #ADC6FF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .icono-parada { color: #ADC6FF; } }
#sello-linea .sello { min-width: 52px; height: 52px; font-size: 30px; border-radius: 10px; }
.cabecera-parada { grid-template-areas: "volver extra" "titulo titulo"; }
.cabecera-parada .tarjeta-titulo .titulo-parada { grid-area: auto; }

/* Pestañas de sentido: la elegida en azul marino */
.sentidos { background: none; padding: 0; gap: 10px; margin: 16px 0 10px; }
.pestana {
  background: var(--superficie); color: var(--tinta); border: 2px solid var(--borde-tarjeta); border-radius: 12px;
  box-shadow: 0 3px 0 var(--relieve-tarjeta); min-height: 56px; font-size: 17px;
}
.pestana[aria-selected="true"] { background: var(--marino); color: #fff; border-color: var(--marino-borde); box-shadow: 0 3px 0 var(--marino-borde); }

/* Lista de paradas de una línea: cada parada en su tarjeta, unidas por la línea de color */
.paradas-linea { display: flex; flex-direction: column; gap: 12px; }
.paradas-linea li { padding-left: 30px; }
.paradas-linea li::before { left: 10px; top: -12px; bottom: 0; width: 5px; }
.paradas-linea li.primera::before { top: 50%; }
.paradas-linea li.ultima::before { bottom: 50%; }
.parada-linea::after { left: 2px; width: 22px; height: 22px; margin-top: -11px; border-width: 5px; }
.parada-linea button { padding: 14px 14px 14px 16px; align-items: flex-start; }
.parada-linea + .parada-linea button { border-top: 1.5px solid var(--borde-tarjeta); }
.parada-linea .nombre { font-size: 19px; line-height: 1.25; }
.parada-linea .tambien {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 0 0; width: fit-content;
  background: var(--cal); border-radius: 8px; padding: 6px 10px; font-weight: 700; color: var(--marea);
}
.parada-linea .espera-linea {
  background: var(--cal); border-radius: 8px; padding: 6px 10px; font-size: 22px; font-weight: 800; color: var(--tinta); white-space: nowrap;
}
.parada-linea .espera-linea:empty { display: none; }
.parada-linea .espera-linea small { font-weight: 400; font-size: 16px; }
.parada-linea .espera-linea.llega { background: var(--noche); color: var(--aviso); font-size: 18px; }
.parada-linea .etiqueta-final {
  align-self: flex-start; background: var(--marino); color: #fff; font-size: 14px; font-weight: 700;
  border-radius: 4px; padding: 2px 8px; margin-bottom: 4px; letter-spacing: .02em;
}
/* Parada con aviso: tarjeta crema y el aviso en una caja ámbar */
.paradas-linea li.parcial button { background: var(--aviso-fondo); }
.paradas-linea li.parcial .aviso-parada {
  background: var(--aviso); color: var(--aviso-texto); border-radius: 8px; padding: 8px 12px; margin-top: 8px;
}
.titulo-parada .aviso-parada { margin-top: 6px; }

/* Panel en vivo, como la pantalla de la marquesina */
.marquesina { background: var(--noche); border-radius: 16px; padding: 12px 10px 0; border: 1.5px solid var(--noche-fila); }
.marquesina-titulo { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 8px 12px; background: var(--noche-fila); border-radius: 10px; color: var(--aviso); font-weight: 700; font-size: 17px; }
.punto-vivo { width: 12px; height: 12px; border-radius: 50%; background: var(--aviso); flex: none; }
.llegadas { display: flex; flex-direction: column; gap: 10px; }
.llegada { background: var(--noche-fila); border-radius: 12px; border-bottom: 0; padding: 12px; }
.llegada .destino { font-weight: 700; }
.llegada .destino small, .llegada .destino small.despues { font-weight: 400; }
.llegada .destino small.despues { color: var(--aviso); }
.llegada .espera { background: var(--noche-caja); border-radius: 8px; padding: 6px 10px; font-size: 40px; line-height: 1; letter-spacing: -.02em; }
.llegada .espera span { font-size: 18px; letter-spacing: 0; }
.llegada.programado .espera, .llegada.mas_de .espera { font-size: 26px; }
.llegada.en_cabecera .espera { background: var(--noche); color: #E5E7EB; font-size: 17px; }
.llegada.llega .espera { background: rgba(74, 222, 128, .16); font-size: 22px; }
.mensaje-panel { background: var(--noche-fila); border-radius: 12px; padding: 14px; color: #E5E7EB; }
.esqueleto { margin: 0; }
.marquesina-pie { flex-direction: column; align-items: stretch; padding: 14px 4px 14px; color: #C7CDD6; }
.boton-refrescar { justify-content: center; width: 100%; min-height: 56px; font-size: 19px; }
.boton-tactil.favorito[aria-pressed="true"] { background: #FFDDB4; border-color: #E8B04B; }
.direcciones + .marquesina, .cabecera-parada ~ .marquesina { margin-top: 16px; }

/* Números de línea encima del mapa, como en Stitch: cuadrados de color con relieve.
   La línea que se está viendo lleva un marco azul marino y queda hundida. */
.capa-lineas { gap: 10px; padding: 4px 4px 8px; }
.chip-linea { padding: 0; border-radius: 12px; background: none; box-shadow: none; }
.chip-linea .sello, .chip-linea[aria-pressed="false"] .sello {
  min-width: 52px; height: 52px; font-size: 26px; border-radius: 12px;
  background: var(--lc); color: var(--lt, #fff); box-shadow: 0 4px 0 rgba(0, 0, 0, .28), 0 2px 8px rgba(14, 42, 59, .25);
  border: 2px solid rgba(255, 255, 255, .9);
}
.chip-linea[aria-pressed="true"] .sello { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .28); outline: 4px solid var(--marino); outline-offset: 1px; }
.chip-linea:active { transform: none; }

/* Número de parada: etiqueta azul, igual en todas las pantallas */
.numeros-parada { display: flex; flex-wrap: wrap; gap: 6px; }
.num-parada {
  display: inline-block; background: var(--marino-suave); color: var(--marino); font-weight: 700; font-size: 16px;
  line-height: 1.2; border-radius: 6px; padding: 3px 8px; font-variant-numeric: tabular-nums;
}
:root[data-theme="dark"] .num-parada { color: #ADC6FF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .num-parada { color: #ADC6FF; } }
.titulo-parada p { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.parada-linea .numero { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
.fila-parada .numero-fila { margin-top: 2px; }

/* Mapa con los mismos colores que el resto: paradas blancas con borde azul marino */
.marcador-parada { border-color: var(--borde-parada, var(--marino)); }
.marcador-parada.activa { background: var(--aviso); border-color: var(--marino); }

/* Modo oscuro: "Guardada" sin deslumbrar */
:root[data-theme="dark"] .boton-tactil.favorito[aria-pressed="true"] { background: #3A2C10; border-color: #C98F27; color: #FFDDB4; box-shadow: 0 4px 0 #1C1406; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .boton-tactil.favorito[aria-pressed="true"] { background: #3A2C10; border-color: #C98F27; color: #FFDDB4; box-shadow: 0 4px 0 #1C1406; }
  :root:not([data-theme="light"]) .marcador-parada { border-color: var(--borde-parada, #ADC6FF); }
}
:root[data-theme="dark"] .marcador-parada { border-color: var(--borde-parada, #ADC6FF); }

/* Pantallas medianas (tablet, ordenador con ventana estrecha): la ventana de abajo no se estira */
/* (de 640 a 899 px también va la lista en columna a la izquierda: ver «Pantalla grande») */
/* En las listas, cada sentido lleva el número de su poste; el bloque de números solo sale en Tus paradas */
.fila-parada .numero-fila { display: none; }
.favorita .fila-parada .numero-fila { display: flex; grid-column: 1 / -1; }
.fila-parada .distancia { grid-row: auto; }
.fila-parada .sentido { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.fila-parada .sentido .numeros-parada { margin-left: 0; }
.fila-parada .sentido .num-parada { font-size: 15px; padding: 2px 7px; }

/* ===================================================================
   Versión más tranquila (5/11/2026): mismos colores,
   menos cajas y menos relieve. Solo "Actualizar tiempos" tiene relieve.
   =================================================================== */

/* Tarjetas: borde fino, sin sombra */
.lista-paradas li, .lista-lineas li, .parada-linea button, .pestana { box-shadow: none; border-width: 1px; }
.lista-paradas, .paradas-linea { gap: 10px; }

/* Volver: solo texto y flecha. Guardar: botón sencillo */
.boton-tactil {
  min-height: 44px; border: 1px solid var(--borde-tarjeta); box-shadow: none; border-radius: 22px;
  padding: 0 16px 0 12px; font-size: 17px;
}
.boton-tactil:active { transform: none; box-shadow: none; background: var(--cal); }
.boton-tactil.volver { border: 0; background: none; padding: 0 8px 0 0; color: var(--marino); }
:root[data-theme="dark"] .boton-tactil.volver { color: #ADC6FF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .boton-tactil.volver { color: #ADC6FF; } }
.boton-tactil.favorito[aria-pressed="true"] { box-shadow: none; }
:root[data-theme="dark"] .boton-tactil.favorito[aria-pressed="true"] { box-shadow: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .boton-tactil.favorito[aria-pressed="true"] { box-shadow: none; } }
.cabecera-parada { gap: 6px 8px; }

/* Título de la parada o línea sin caja */
.tarjeta-titulo { background: none; border: 0; box-shadow: none; padding: 0; align-items: center; }
.tarjeta-titulo .titulo-parada h1 { font-size: 25px; }
#sello-linea .sello { min-width: 46px; height: 46px; font-size: 26px; }

/* Número de parada: texto normal en gris */
.numeros-parada { display: inline; color: var(--marea); font-size: 17px; font-weight: 400; }
.titulo-parada p { display: block; }
.fila-parada .sentido .numeros-parada { font-size: 15px; }
.fila-parada .sentido .numeros-parada::before { content: "· "; }
.parada-linea .numero { display: block; }

/* Líneas debajo del buscador: rejilla de dos columnas, número y adónde va */
.rejilla-lineas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rejilla-lineas .chip-linea {
  display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 10px; text-align: left;
  background: var(--superficie); border: 1px solid var(--borde-tarjeta); border-radius: 12px; box-shadow: none;
}
.rejilla-lineas .chip-linea .sello, .rejilla-lineas .chip-linea[aria-pressed="false"] .sello {
  min-width: 40px; height: 40px; font-size: 22px; border-radius: 9px; border: 0; box-shadow: none; transform: none; outline: 0;
}
.rejilla-lineas .chip-linea[aria-pressed="true"] { border: 2px solid var(--marino); }
.destino-linea { font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--tinta); min-width: 0; }
#bloque-lineas { margin-top: 12px; margin-bottom: 18px; }

/* Panel en vivo más limpio: filas separadas por una raya, sin cajas dentro de cajas */
.marquesina { padding: 4px 14px 0; border: 0; }
.marquesina-titulo { background: none; padding: 10px 0 4px; margin: 0; font-size: 16px; }
.llegadas { gap: 0; }
.llegada { background: none; border-radius: 0; padding: 14px 0; border-bottom: 1px solid var(--noche-fila); }
.llegada .espera, .llegada.llega .espera { background: none; padding: 0; }
.llegada.llega .espera { font-size: 24px; }
.llegada.en_cabecera .espera { background: none; }
.mensaje-panel { background: none; padding: 14px 0; border-radius: 0; }
.marquesina-pie { padding: 14px 0; }

/* Tus paradas: minutos sin caja negra */
.proximo-espera, .proximo-espera.llega { background: none; padding: 0; }

/* Lista de la línea: minutos como texto, sin cajita */
.parada-linea .espera-linea { background: none; padding: 0; }
.parada-linea .espera-linea.llega { background: none; color: var(--verde); }
.parada-linea .tambien { background: none; padding: 0; margin-top: 4px; }
/* La última línea, si queda sola, ocupa todo el ancho (la 7 tiene el nombre más largo) */
.rejilla-lineas .chip-linea:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pestana[aria-selected="true"] { box-shadow: none; }

/* Horario de salidas */
.boton-horario {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin: 0 0 12px;
  background: var(--superficie); border: 1px solid var(--borde-tarjeta); border-radius: 12px; font-weight: 700; color: var(--marino);
}
:root[data-theme="dark"] .boton-horario { color: #ADC6FF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .boton-horario { color: #ADC6FF; } }
.aviso-horario { margin: 4px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--aviso-fondo); border: 1px solid #F0C36D; font-size: 16px; color: var(--tinta); }
.nota-horario { font-size: 18px; font-weight: 700; margin: 14px 0 0; }
.horas { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 8px; }
.hora {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; padding: 6px 4px;
  background: var(--superficie); border: 1px solid var(--borde-tarjeta); border-radius: 10px;
  font-size: 20px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums;
}
.hora small { font-size: 13px; font-weight: 700; color: var(--marea); margin-top: 2px; text-align: center; }
.hora.pasada { opacity: .4; }
.hora.proxima { background: var(--noche); border-color: var(--noche); color: var(--aviso); }
.hora.proxima small { color: #E5E7EB; }
.leyenda-horario { color: var(--marea); font-size: 16px; margin: 14px 0 0; }

/* Inicio: solo los números de línea, en una fila */
.rejilla-lineas { grid-template-columns: repeat(5, 1fr); gap: 10px; }
.rejilla-lineas .chip-linea, .rejilla-lineas .chip-linea:last-child:nth-child(odd) {
  grid-column: auto; justify-content: center; padding: 6px; min-height: 64px; aspect-ratio: 1; max-width: 72px; width: 100%; justify-self: center;
}
.rejilla-lineas .chip-linea .sello, .rejilla-lineas .chip-linea[aria-pressed="false"] .sello { min-width: 100%; height: 100%; font-size: 28px; border-radius: 9px; }
.rejilla-lineas .destino-linea { display: none; }

/* Altura de la ventana de abajo según la pantalla: el mapa ocupa menos donde importa
   el contenido (parada, horario) y más donde ayuda a orientarse (inicio). */
body[data-vista="linea"] { --hoja-media: 62dvh; }
body[data-vista="parada"] { --hoja-media: 80dvh; }
body[data-vista="horario"] { --hoja-media: 88dvh; }
body[data-hoja="baja"] { --hoja-actual: var(--hoja-baja); }
body[data-hoja="media"] { --hoja-actual: var(--hoja-media); }
body[data-hoja="alta"] { --hoja-actual: var(--hoja-alta); }

/* Números de línea del inicio: el botón es el propio cuadrado de color, con medidas fijas
   (en iPhone el cuadrado no llenaba el botón y se veía blanco a los lados) */
.rejilla-lineas .chip-linea, .rejilla-lineas .chip-linea:last-child:nth-child(odd) {
  padding: 0; background: none; border: 0; border-radius: 12px; min-height: 0; aspect-ratio: auto;
  width: 100%; max-width: none; justify-self: stretch;
}
.rejilla-lineas .chip-linea .sello, .rejilla-lineas .chip-linea[aria-pressed="false"] .sello {
  display: grid; width: 100%; min-width: 0; height: 56px; font-size: 28px; border-radius: 12px; padding: 0;
}
.rejilla-lineas .chip-linea[aria-pressed="true"] { border: 0; }
.rejilla-lineas .chip-linea[aria-pressed="true"] .sello { outline: 3px solid var(--marino); outline-offset: 2px; }
.rejilla-lineas .chip-linea:focus-visible { outline: 3px solid var(--foco); outline-offset: 3px; }

/* Parada con dos postes del mismo nombre: el número de cada poste encima de sus autobuses */
.cabecera-poste {
  list-style: none; margin: 12px 0 0; padding: 6px 10px; border-radius: 8px;
  background: var(--noche-fila); color: var(--aviso); font-weight: 700; font-size: 17px;
}
.llegadas > .cabecera-poste:first-child { margin-top: 2px; }
.proximo-poste { display: block; color: var(--aviso); font-weight: 700; font-size: 15px; padding: 8px 0 2px; }
.proximo-poste + .proximo { border-top: 0; }
.proximo-espera.sin-hora { font-family: var(--texto); font-size: 17px; font-weight: 700; color: #E5E7EB; }

/* Un poste de una parada doble: botón para ver también el de enfrente */
.boton-enfrente {
  display: block; width: 100%; min-height: 48px; margin: 12px 0 0; padding: 10px 14px;
  background: var(--superficie); border: 1px solid var(--borde-tarjeta); border-radius: 12px;
  font-weight: 700; color: var(--marino); text-align: center;
}
:root[data-theme="dark"] .boton-enfrente { color: #ADC6FF; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .boton-enfrente { color: #ADC6FF; } }

/* Qué autobuses paran en el poste de enfrente o en otro punto de la plaza */
.otras-paradas { margin-top: 16px; }
.otras-titulo { margin: 0 0 8px; font-size: 18px; font-weight: 700; color: var(--tinta); }
.otra-parada {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 56px; margin-top: 8px; padding: 10px 12px 10px 14px;
  background: var(--superficie); border: 1px solid var(--borde-tarjeta); border-radius: 12px; text-align: left; color: var(--tinta);
}
.otra-sentidos { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.otra-sentido { display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; }
.otra-parada svg { width: 24px; height: 24px; flex: none; color: var(--marea); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Horario: qué día (lunes a viernes, sábados, domingos y festivos) */
.sentidos.dias { margin-bottom: 8px; }
.pestana-dia { display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; font-size: 16px; padding: 8px 4px; }
.pestana-dia small { font-size: 13px; font-weight: 700; margin-top: 3px; opacity: .85; }
.hora.pasada { opacity: 1; color: var(--marea); background: transparent; border-style: dashed; font-weight: 600; }

/* Autobuses en el mapa (GPS de la empresa) */
.bus-gps { display: grid; place-items: center; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); cursor: pointer; }
.bus-gps svg { width: 20px; height: 20px; fill: currentColor; stroke: none; }
.bus-gps.l1 { background: var(--l1); color: var(--l1-t); }
.bus-gps.l2 { background: var(--l2); color: var(--l2-t); }
.bus-gps.l3 { background: var(--l3); color: var(--l3-t); }
.bus-gps.l5 { background: var(--l5); color: var(--l5-t); }
.bus-gps.l7 { background: var(--l7); color: var(--l7-t); }
/* Flecha de marcha: gira alrededor del círculo y apunta hacia donde se mueve.
   Sin position: relative en .bus-gps: Leaflet lo coloca con position: absolute, que ya sirve
   de referencia; con relative cada autobús se desplazaba bajo el anterior (acababan en el mar). */
.bus-gps .rumbo { position: absolute; inset: -12px; pointer-events: none; }
.bus-gps .rumbo::before {
  content: ""; position: absolute; left: 50%; top: 0; margin-left: -7px;
  border-left: 7px solid transparent; border-right: 7px solid transparent; border-bottom: 10px solid var(--tinta);
  filter: drop-shadow(0 0 1.5px var(--superficie)) drop-shadow(0 0 1.5px var(--superficie));
}
.popup-bus .leaflet-popup-content-wrapper, .popup-bus .leaflet-popup-tip { background: var(--superficie); color: var(--tinta); }
.popup-bus .leaflet-popup-content { margin: 12px 14px; }
.ficha-bus { display: grid; gap: 6px; min-width: 190px; }
.ficha-bus p { margin: 0; }
.ficha-bus-cabecera { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.ficha-bus-parada { font-weight: 600; }
.ficha-bus-hora { font-weight: 700; color: var(--marea); }
.ficha-bus-hora.tarde { color: var(--tinta); }
.ficha-bus-dato { font-size: 15px; color: var(--marea); }

/* Autobús que ya está en la parada (GPS): «En la parada» / «Acaba de llegar», en dos líneas */
.llegada.aqui .espera { font-size: 18px; line-height: 1.15; text-align: right; max-width: 6.5em; }
.llegada.aqui.pasado .espera { color: #C9D3DA; }

/* Autobús esperando en el principio de la línea: dato extra bajo los minutos */
.llegada .destino small.en-parada { color: var(--verde-led); font-weight: 600; }
.llegada .destino small.ya-paso { color: #C9D3DA; font-weight: 600; }
.aviso-fin { margin: 12px 0 0; line-height: 1.35; }
/* Línea que ha terminado por hoy: «Finalizada» en rojo y parpadeando, junto al nombre de la línea
   y en la fila de la parada (sin parpadeo si el usuario prefiere menos movimiento) */
.etiqueta-fin { display: inline-block; margin-left: 10px; padding: 2px 8px; border-radius: 6px; border: 2px solid var(--rojo-fin);
  color: var(--rojo-fin); font-size: 15px; font-weight: 800; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .etiqueta-fin { animation: none; } }
.llegada .destino small.fin-hoy { color: var(--rojo-led); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .llegada .destino small.fin-hoy { animation: none; } }

/* Jerarquía del panel (pedida el 7/11: «demasiadas cosas naranja»): el naranja solo para los
   minutos u horas grandes; los títulos («Tiempos en vivo», «Parada 1101») y lo secundario
   («Después…», «Hora del horario…») en gris claro. El panel es oscuro en los dos modos */
.marquesina-titulo { color: #C8D5DE; }
.cabecera-poste { color: #C8D5DE; font-size: 15px; }
.proximo-poste { color: #C8D5DE; }
.llegada .destino small.despues { color: #AFC0CC; }

/* «Bus en la parada» / «Bus llegando · 150 m»: pastilla verde parpadeando, en su propia línea encima
   de toda la fila (a la derecha apretaba el destino y el «Después» en 3-4 líneas en un móvil estrecho) */
.llegada .pastilla { grid-column: 1 / -1; justify-self: start; display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--texto); font-size: 13px; font-weight: 800; color: var(--verde-led); background: rgba(74, 222, 128, .16);
  border-radius: 6px; padding: 2px 7px; animation: parpadeo 1.6s steps(2, jump-none) infinite; }
.llegada .pastilla svg { width: 14px; height: 14px; }
@media (prefers-reduced-motion: reduce) { .llegada .pastilla { animation: none; } }
/* Debajo de la fila, a la derecha, bajo el número (elegido por Manuel el 7/11: encima de la fila
   quedaba pesada y al lado del destino no le convencía). Tamaño 13, pegada a la fila: a 16 resultaba intrusiva y a 14 aún grande */
.llegada .pastillas { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin: -4px 0 0; }
.llegada .pastillas .pastilla { margin-bottom: 0; }
.llegada .pastilla.ya-paso { color: #8CC8FF; background: rgba(140, 200, 255, .16); }
.llegada .pastilla.fin-hoy { color: var(--rojo-led); background: rgba(255, 107, 107, .16); animation: none; } /* sin parpadeo (8/11) */
.llegada.ahora .espera { color: var(--verde-led); animation: none; } /* parpadea solo la píldora (7/11) */

.llegada .destino small.otro-poste { color: var(--led); font-weight: 600; }

/* Móvil: el mapa fijo arriba (una franja de una quinta parte, 7/11) y la lista debajo, que se desplaza normal; nada se
   arrastra (7/11). Mientras se busca, el mapa se recoge; «Ampliar mapa» lo pone a pantalla completa. */
.boton-mapa-grande { display: none; }
@media (max-width: 639px) {
  :root { --alto-mapa: 20dvh; }
  body[data-hoja="alta"] { --alto-mapa: 0px; }
  body[data-mapa="grande"] { --alto-mapa: 100dvh; }
  .mapa { inset: 0 0 auto 0; height: var(--alto-mapa); transition: height .2s ease; }
  .hoja, body[data-hoja] .hoja { top: var(--alto-mapa); bottom: 0; height: auto; border-radius: 16px 16px 0 0; transition: top .2s ease; }
  body[data-mapa="grande"] .hoja { visibility: hidden; }
  .asa { display: none; }
  .vista { padding-top: 14px; }
  body[data-hoja="alta"] .vista { padding-top: calc(env(safe-area-inset-top) + 14px); }
  .boton-ubicacion { bottom: auto; top: calc(var(--alto-mapa) - 62px); right: 12px; width: 44px; height: 44px; transition: top .2s ease; }
  body[data-hoja="alta"] .boton-ubicacion, body[data-hoja="alta"] .boton-mapa-grande { display: none; }
  .boton-mapa-grande {
    display: inline-flex; align-items: center; position: fixed; z-index: 650; left: 12px;
    top: calc(var(--alto-mapa) - 58px); height: 40px; padding: 0 14px; border: 0; border-radius: 20px;
    background: var(--superficie); color: var(--tinta); font: 700 16px var(--texto);
    box-shadow: 0 2px 8px rgba(14, 42, 59, .25); transition: top .2s ease;
  }
  body[data-mapa="grande"] .boton-mapa-grande { top: auto; bottom: calc(env(safe-area-inset-bottom) + 20px); left: 50%; transform: translateX(-50%); height: 48px; padding: 0 22px; background: var(--foco); color: #fff; }
  body[data-mapa="grande"] .boton-ubicacion { top: auto; bottom: calc(env(safe-area-inset-bottom) + 20px); }
}
@media (max-width: 639px) and (prefers-reduced-motion: reduce) { .mapa, .hoja, .boton-mapa-grande, .boton-ubicacion { transition: none; } }

/* «Tus paradas»: bus verde junto al tiempo si está llegando o en la parada (7/11) */
.proximo-espera .proximo-bus { display: inline-flex; width: 16px; height: 16px; margin-right: 4px; vertical-align: -2px; color: var(--verde-led); }
.proximo-espera .proximo-bus svg { width: 16px; height: 16px; }

/* Bus encima de la parada abierta: se dibuja por encima del punto con una patita que lo señala (7/11) */
.bus-gps.junto-parada::after { content: ""; position: absolute; left: 50%; bottom: -15px; transform: translateX(-50%); border: 6px solid transparent; border-top-color: #fff; }