:root {
  --navy:#0e1b4d; --navy-2:#122363; --bg:#eff0f5; --card:#ffffff; --blue:#4770db;
  --line:#d5d8e6; --muted:#5a6486; --live:#2e9e4a;
  --head:"Archivo",system-ui,sans-serif; --body:"Questrial",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
}
* { box-sizing: border-box; }
html, body { margin:0; background:var(--bg); color:var(--navy); font:16px/1.65 var(--body); }
a { color:var(--navy); text-decoration:underline; text-decoration-color:var(--blue); text-underline-offset:3px; }
a:hover { color:var(--blue); }

.bar { background:var(--navy); color:#fff; }
.bar-in { max-width:980px; margin:0 auto; padding:14px 16px; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.brand { font:700 19px/1 var(--head); color:#fff; text-decoration:none; letter-spacing:.2px; }
.brand:hover { color:#fff; opacity:.85; }
.bar nav { display:flex; gap:6px; flex-wrap:wrap; }
.bar nav a { color:#fff; text-decoration:none; font:700 13px/1 var(--head); letter-spacing:.5px; padding:7px 10px; border-radius:6px; }
.bar nav a:hover { background:rgba(255,255,255,.12); color:#fff; }
.bar nav a.on { background:var(--blue); }

.wrap { max-width:980px; margin:0 auto; padding:24px 16px 48px; }
.crumb { font-size:14px; margin:0 0 10px; }
h1 { font:700 clamp(28px,5vw,40px)/1.12 var(--head); margin:0 0 6px; }
.code { color:var(--blue); }
.sub { color:var(--muted); margin:0 0 18px; }
.lead { font-size:18px; margin:0 0 26px; max-width:70ch; }

.grid { display:grid; grid-template-columns:1.2fr 1fr; gap:16px; margin-bottom:30px; }
.card { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px; box-shadow:0 1px 2px rgba(14,27,77,.06); }
.card h2 { font:700 12px/1 var(--head); text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin:0 0 12px; }
#map { height:340px; border-radius:8px; background:var(--bg); }
.status { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--muted); margin-bottom:12px; }
.dot { width:9px; height:9px; border-radius:50%; background:#a1a6c4; }
.dot.live { background:var(--live); box-shadow:0 0 6px var(--live); }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:14px; }
.stat { background:var(--bg); border-radius:8px; padding:10px 8px; text-align:center; }
.stat b { display:block; font:700 28px/1.1 var(--head); }
.stat span { font-size:12px; color:var(--muted); }
table { width:100%; border-collapse:collapse; font-size:14px; }
th, td { text-align:left; padding:7px 4px; border-bottom:1px solid var(--line); }
th { color:var(--muted); font:700 11px/1 var(--head); text-transform:uppercase; letter-spacing:.06em; }
td.num, th.num { text-align:right; font-variant-numeric:tabular-nums; }
.empty { color:var(--muted); font-size:14px; padding:6px 0; }

section.text { margin-bottom:30px; }
section.text h2 { font:700 23px/1.2 var(--head); margin:0 0 10px; }
section.text p { max-width:70ch; margin:0 0 14px; }
dl { display:grid; grid-template-columns:max-content 1fr; gap:6px 22px; margin:0; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; }
dt { color:var(--muted); }
dd { margin:0; }
.others { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.others a { background:var(--navy); color:#fff; text-decoration:none; border-radius:999px; padding:7px 14px; font:700 13px/1 var(--head); letter-spacing:.3px; }
.others a:hover { background:var(--blue); color:#fff; }
.src { font-size:13px; color:var(--muted); margin-top:10px; }
footer { border-top:1px solid var(--line); margin-top:36px; padding-top:16px; font-size:13px; color:var(--muted); }

.plane { color:var(--navy); filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 1px #fff); }
.plane svg { display:block; }
.plane.ga { color:var(--blue); }
.plane.heli { color:#108474; }
.plane-legend { display:flex; gap:12px; align-items:center; flex-wrap:wrap; background:rgba(255,255,255,.94); border-radius:8px; padding:6px 10px; margin:10px 10px 0 0 !important;
  font:12px/1 var(--body); color:var(--navy); box-shadow:0 1px 4px rgba(14,27,77,.25); }
.plane-legend .plane { display:inline-flex; margin-right:5px; filter:none; vertical-align:middle; }
.ap-dot { width:100%; height:100%; background:var(--navy); border:2px solid #fff; border-radius:50%;
  box-shadow:0 0 0 2px var(--blue), 0 2px 5px rgba(14,27,77,.4); }
.leaflet-marker-icon.ap-wrap { background:none; border:0; }

@media (max-width:760px) {
  .grid { grid-template-columns:1fr; }
  #map { height:280px; }
  dl { grid-template-columns:1fr; gap:0; }
  dt { margin-top:8px; }
}