/* map_overlay: the map, its switches and the overlay's two colour scales. Everything else is
   css/cached.css, unchanged. The colours repeat cached.css on purpose and must stay equal: a marker's
   fill is the left column's border (age of the fix), its ring is the table row's bar (origin).
   One exception: the no-fix grey, which is darker here because the column's grey vanishes on tiles. */
.mapwrap { margin-bottom: 10px; }
/* «Cómo funciona», closed by default: the explanation is there for whoever opens it */
details.how { margin: 0 0 8px; max-width: 70em; }
details.how > summary { cursor: pointer; color: #1f4e9c; }
details.how p { margin: 4px 0 4px 14px; color: var(--muted); }
.lmap { height: 440px; border: 1px solid var(--line); border-radius: 4px; }
/* map switched off: no tiles were asked for; the overlay sits on a plain, still projected canvas */
.lmap.nobase { background: #fbfbfd; }
.mapstate { font-size: 12px; color: var(--muted); padding: 3px 2px 0; }

.layers { display: inline-flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.layers label.main { font-weight: 600; }
.layers .sub { display: inline-flex; gap: 8px; padding-left: 8px; border-left: 1px solid var(--line); }
.layers .sub.off { color: var(--muted); }

/* device markers. CSS beats the presentation attributes Leaflet writes, so these win over its blue. */
.leaflet-container path.dv { stroke-width: 2; fill-opacity: .9; }
.leaflet-container path.dv.age-ok   { fill: #1a7f37; }
.leaflet-container path.dv.age-warn { fill: #d29922; }
.leaflet-container path.dv.age-old  { fill: #b42318; }
.leaflet-container path.dv.age-no   { fill: #8c959f; }   /* darker than the column's #d7dbe0: that grey vanishes on tiles */
.leaflet-container path.dv.src-cache { stroke: #6d4fc2; }
.leaflet-container path.dv.src-net   { stroke: #1a7f37; }
.leaflet-container path.dv.src-live  { stroke: #1f6feb; }
.leaflet-container path.dv.sel { stroke: #111; stroke-width: 3; }

/* today's route of the selected device */
.leaflet-container path.route { stroke: #d63384; stroke-opacity: .85; fill: none; }
.leaflet-container path.route-start { stroke: #fff; fill: #1a7f37; fill-opacity: 1; }
.leaflet-container path.route-end   { stroke: #fff; fill: #d63384; fill-opacity: 1; }

/* legend (a Leaflet control, bottom right) */
.legend { background: rgba(255,255,255,.92); border: 1px solid var(--line); border-radius: 4px; padding: 5px 8px; font-size: 11px; line-height: 1.5; }
.legend .lh { font-weight: 600; margin-top: 2px; }
.legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: -1px; box-sizing: border-box; }
.legend .sw.age-ok   { background: #1a7f37; }
.legend .sw.age-warn { background: #d29922; }
.legend .sw.age-old  { background: #b42318; }
.legend .sw.age-no   { background: #8c959f; }
.legend .sw.src-cache { border: 2px solid #6d4fc2; }
.legend .sw.src-net   { border: 2px solid #1a7f37; }
.legend .sw.src-live  { border: 2px solid #1f6feb; }