/* Márgenes de seguridad del iPhone (notch, barra de estado, indicador de inicio).
   El mapa ocupa todo el viewport y se extiende bajo la barra de estado; los controles van en una barra flotante. */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --band: 0px; /* app.js: franja que iOS deja sin dibujar bajo la página (ventana más alta que el viewport) */
}
/* iOS 26 da a la app instalada un viewport más corto (le resta la barra de estado) mientras la página sea más baja
   que la pantalla, y la franja de abajo queda sin dibujar (WebKit 301108). Si el documento mide al menos la pantalla,
   iOS le da el viewport completo. El tope de 100lvh evita que sobre altura donde no hay fallo. Si no funcionara,
   la franja queda del color del mapa para que pase desapercibida. */
html, body { height: 100%; margin: 0; overflow: hidden; background: #f2efe9; touch-action: manipulation; }
@media (display-mode: standalone) {
  html { min-height: min(100lvh, calc(100% + env(safe-area-inset-top))); }
}
body { font-family: -apple-system, system-ui, sans-serif; }
#app { position: fixed; top: 0; left: 0; right: 0; bottom: 0; }
#map { position: absolute; inset: 0; }
/* La barra de estado es translúcida con texto blanco: un degradado oscuro la mantiene legible sobre el mapa */
body::before {
  content: ""; position: fixed; z-index: 900; top: 0; left: 0; right: 0; pointer-events: none;
  height: calc(var(--sat) + 24px); background: linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,0));
}

/* Barra flotante inferior */
#bar {
  position: absolute; z-index: 1000; display: flex; align-items: center; gap: 8px; padding: 6px;
  left: calc(var(--sal) + 12px); right: calc(var(--sar) + 12px);
  /* justo encima del indicador de inicio; si iOS aún deja la franja (--band), 12px sobre ella */
  bottom: max(12px, calc(var(--sab) - var(--band) + 4px));
  border-radius: 26px; background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 2px 12px rgba(0,0,0,.28);
}
#filter { position: relative; flex: none; }
#filter-btn {
  height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: #eef3fb; color: #111;
  font: 600 13px/1 -apple-system, system-ui, sans-serif;
}
#status { flex: 1; text-align: center; font-size: 12px; line-height: 1.2; color: #444; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#status.error { color: #9b1c1c; }
#locate {
  flex: none; width: 34px; height: 34px; border-radius: 50%; border: 0; font-size: 20px; line-height: 1; padding: 0;
  background: #eef3fb; color: #1a73e8;
}
/* Atribución arriba a la derecha, bajo la barra de estado, para que no quede detrás de la barra flotante */
.leaflet-top { padding-top: calc(var(--sat) + 6px); }
.leaflet-right { padding-right: var(--sar); }

/* Filtro de líneas desplegable (se abre hacia arriba, sobre la barra) */
#filter-panel {
  position: absolute; left: 0; bottom: calc(100% + 14px);
  width: min(340px, calc(100vw - var(--sal) - var(--sar) - 24px)); max-height: min(58vh, 440px);
  overflow-y: auto; -webkit-overflow-scrolling: touch; background: #fff; border-radius: 14px;
  box-shadow: 0 4px 18px rgba(0,0,0,.35); padding: 6px;
}
#filter-panel[hidden] { display: none; }
.row {
  display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none;
  padding: 9px 8px; border-radius: 10px; text-align: left; font: inherit; color: #111;
}
.row.on { background: #eef3fb; }
.group { padding: 12px 8px 4px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #888; }
.dot { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.txt { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.txt b { font-size: 15px; }
.txt small { font-size: 12px; color: #666; margin-top: 2px; }
.tick { visibility: hidden; color: #1a73e8; font-weight: 700; }
.row.on .tick { visibility: visible; }

.wrap { position: relative; width: 48px; height: 48px; }
.arrow { position: absolute; left: 0; top: 0; width: 48px; height: 48px; transform-origin: 24px 24px; pointer-events: none; filter: drop-shadow(0 0 1.5px rgba(0,0,0,.9)); }
.train {
  position: absolute; left: 10px; top: 10px; width: 28px; height: 28px; box-sizing: border-box;
  border-radius: 50%; border: 2px solid #fff; color: #fff; font: 700 10px/1 -apple-system, system-ui, sans-serif;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.5);
  text-shadow: 0 0 2px rgba(0,0,0,.6);
}
.train.fgc { border-radius: 8px; } /* FGC con esquinas, Rodalies redondo */
.train.stopped { opacity: .75; }
.me { width: 16px; height: 16px; background: #1a73e8; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px rgba(26,115,232,.35); }