:root {
  color-scheme: dark;
  --bg: #02050d;
  --panel: rgba(5, 13, 31, 0.84);
  --panel-strong: rgba(7, 17, 42, 0.96);
  --stroke: rgba(119, 222, 255, 0.18);
  --stroke-strong: rgba(119, 222, 255, 0.42);
  --text: #f3f8ff;
  --muted: #8d9bb4;
  --dim: #546076;
  --cyan: #66ecff;
  --yellow: #ffd36e;
  --red: #ff5f77;
  --green: #65ffa5;
  --violet: #a78bff;
  --shadow: 0 22px 75px rgba(0, 0, 0, 0.46);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html, body, #app { min-height: 100%; height: 100%; margin: 0; }
body {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% -10%, rgba(51, 142, 255, .18), transparent 30%),
    radial-gradient(circle at 100% 10%, rgba(255, 190, 80, .12), transparent 22%),
    radial-gradient(circle at 0 85%, rgba(188, 120, 255, .10), transparent 25%),
    #01030a;
  color: var(--text);
}
button, input, select { font: inherit; }
button { cursor: pointer; }

.shell {
  position: relative;
  height: 100%;
  padding: 24px clamp(16px, 2.5vw, 40px) 18px;
  display: grid;
  grid-template-rows: 44px minmax(0, 1fr) auto;
  gap: 16px;
  isolation: isolate;
}

.aurora {
  position: fixed;
  inset: -20%;
  background:
    radial-gradient(circle at 0% 24%, rgba(72, 159, 255, .20), transparent 24%),
    radial-gradient(circle at 100% 5%, rgba(255, 193, 84, .16), transparent 19%),
    radial-gradient(circle at 96% 62%, rgba(255, 58, 116, .12), transparent 23%);
  filter: blur(24px);
  pointer-events: none;
  z-index: -3;
}

.shell::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(110, 229, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(110, 229, 255, .045) 1px, transparent 1px),
    radial-gradient(rgba(122, 233, 255, .28) .7px, transparent .7px);
  background-size: 78px 78px, 78px 78px, 122px 122px;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 82%, transparent);
  pointer-events: none;
  z-index: -2;
}

.shell::after {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at center, transparent 45%, rgba(0, 0, 0, .48) 100%);
  pointer-events: none;
  z-index: 10;
  mix-blend-mode: multiply;
}

.topbar,
.panel,
.panel-card,
.controls {
  border: 1px solid rgba(126, 223, 255, .15);
  background: linear-gradient(180deg, rgba(10, 22, 48, .86), rgba(5, 12, 28, .86));
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.topbar {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  align-items: center;
  border-radius: 14px 14px 6px 6px;
  padding: 0 14px;
  gap: 14px;
  letter-spacing: .16em;
  color: #8b96ad;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 800;
}

.traffic-dots { display: flex; gap: 9px; }
.traffic-dots i { width: 12px; height: 12px; border-radius: 50%; display: block; }
.traffic-dots i:nth-child(1) { background: #ff5f57; }
.traffic-dots i:nth-child(2) { background: #ffbd2e; }
.traffic-dots i:nth-child(3) { background: #28c840; }
.title { text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.source-pill {
  border: 1px solid rgba(102, 236, 255, .25);
  color: var(--cyan);
  background: rgba(8, 30, 52, .85);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 10px;
  letter-spacing: .12em;
  font-weight: 900;
}
.source-pill:hover { border-color: rgba(102, 236, 255, .65); box-shadow: 0 0 24px rgba(102, 236, 255, .15); }
.source-pill:disabled { opacity: .55; cursor: wait; }

.layout {
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(280px, 320px) minmax(460px, 1fr) minmax(290px, 330px);
  gap: 14px;
}

.panel {
  border-radius: 16px;
  overflow: hidden;
}
.left-panel,
.right-panel {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0;
}
.panel-card {
  border-radius: 14px;
  padding: 14px;
  background: linear-gradient(180deg, rgba(10, 23, 52, .82), rgba(5, 12, 31, .88));
}
.panel-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  color: #61708d;
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 900;
}
.panel-head b { color: var(--cyan); }
.label {
  color: #60708c;
  font-size: 10px;
  letter-spacing: .14em;
  font-weight: 900;
  text-transform: uppercase;
}
.digital {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-weight: 950;
  font-size: clamp(27px, 3.2vw, 36px);
  line-height: 1.08;
  margin: 6px 0 4px;
}
.date-line { color: #a9b6cb; font-size: 13px; margin-bottom: 12px; }
.metric {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 9px;
  margin-top: 9px;
  color: var(--muted);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.metric b { color: var(--text); font-size: 14px; }
.metric .cyan, .cyan { color: var(--cyan); }

.selected-card h1 {
  margin: 0 0 10px;
  font-size: clamp(18px, 2.2vw, 25px);
  letter-spacing: -.03em;
  line-height: 1.08;
}
.selected-card p,
.note-card p {
  color: #a7b5ca;
  line-height: 1.55;
  margin: 0 0 12px;
  font-size: 13px;
}
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.chip {
  border: 1px solid rgba(255, 255, 255, .09);
  background: rgba(255,255,255,.045);
  border-radius: 999px;
  color: #c7d5ea;
  padding: 6px 9px;
  font-size: 11px;
  font-weight: 800;
}
.read-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(102,236,255,.35);
  color: #04101b;
  background: linear-gradient(90deg, var(--cyan), #d3f9ff);
  border-radius: 10px;
  padding: 10px 12px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 950;
  width: 100%;
}
.read-link:hover { filter: brightness(1.05); box-shadow: 0 0 34px rgba(102,236,255,.18); }

.category-bars { display: grid; gap: 9px; }
.cat-row {
  display: grid;
  grid-template-columns: 1fr 28px;
  gap: 8px;
  align-items: center;
  color: #b7c4d9;
  font-size: 12px;
}
.cat-row span { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cat-row span i { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 18px currentColor; }
.cat-row b { text-align: right; color: #eff7ff; }
.cat-row em {
  grid-column: 1 / -1;
  height: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  overflow: hidden;
}
.cat-row em u { display: block; height: 100%; border-radius: inherit; box-shadow: 0 0 18px currentColor; }

.map-frame {
  position: relative;
  min-height: 0;
  border: 1px solid rgba(126,223,255,.15);
  background: #02040a;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 30px 90px rgba(0,0,0,.55), inset 0 0 75px rgba(102,236,255,.06);
}
.real-map { position: absolute; inset: 0; }
.maplibregl-canvas { filter: contrast(1.28) saturate(.9) brightness(.54); }
.map-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(circle at center, transparent 42%, rgba(0,0,0,.82) 100%),
    radial-gradient(circle at 65% 48%, rgba(255,47,88,.10), transparent 16%),
    radial-gradient(circle at 35% 55%, rgba(47,123,255,.10), transparent 18%),
    linear-gradient(0deg, rgba(102,236,255,.035) 1px, transparent 1px);
  background-size: auto, auto, auto, 100% 4px;
  mix-blend-mode: screen;
}
.scan {
  position: absolute;
  inset: -20% 0 auto 0;
  height: 32%;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, rgba(102,236,255,.07), transparent);
  animation: scan 7.5s linear infinite;
}
@keyframes scan { from { transform: translateY(-40%); } to { transform: translateY(430%); } }
.reticle {
  position: absolute;
  left: 50%; top: 50%;
  width: 90px; height: 90px;
  margin: -45px 0 0 -45px;
  border: 1px solid rgba(102,236,255,.16);
  border-radius: 50%;
  z-index: 5;
  pointer-events: none;
}
.reticle::before, .reticle::after { content: ""; position: absolute; background: rgba(102,236,255,.24); }
.reticle::before { width: 1px; height: 130px; left: 50%; top: -20px; }
.reticle::after { height: 1px; width: 130px; top: 50%; left: -20px; }

.map-overlay {
  position: absolute;
  z-index: 7;
  border: 1px solid rgba(102,236,255,.16);
  background: rgba(2, 8, 20, .82);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  padding: 10px 12px;
  display: grid;
  gap: 3px;
  min-width: 180px;
  box-shadow: 0 14px 38px rgba(0,0,0,.28);
}
.map-overlay b { font-size: 11px; letter-spacing: .12em; color: var(--cyan); }
.map-overlay span { color: #a7b6ce; font-size: 12px; }
.top-left { top: 14px; left: 14px; }
.bottom-left { bottom: 26px; left: 14px; }
.bottom-right { right: 14px; bottom: 26px; }
.map-loader {
  position: absolute;
  inset: 0;
  z-index: 12;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at center, rgba(10,23,52,.92), rgba(1,4,12,.98));
  color: var(--cyan);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: center;
  padding: 20px;
}
.map-loader.hidden { display: none; }
.map-loader.error { color: var(--red); }

.gb-popup .maplibregl-popup-content {
  background: rgba(5, 13, 31, .94);
  color: var(--text);
  border: 1px solid rgba(102,236,255,.28);
  border-radius: 12px;
  padding: 10px 12px;
  box-shadow: 0 18px 55px rgba(0,0,0,.48);
}
.gb-popup .maplibregl-popup-tip { border-top-color: rgba(5, 13, 31, .94); }
.popup-title { max-width: 260px; font-weight: 900; font-size: 12px; line-height: 1.25; }
.popup-meta { margin-top: 5px; color: var(--cyan); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.maplibregl-ctrl-attrib { background: rgba(0, 0, 0, .36) !important; color: #9aa !important; }
.maplibregl-ctrl-attrib a { color: #cfefff !important; }

.overview-card { min-height: 138px; }
.mini-radar {
  position: relative;
  height: 120px;
  border-radius: 12px;
  overflow: hidden;
  background:
    radial-gradient(circle at center, rgba(102,236,255,.15), transparent 46%),
    linear-gradient(135deg, rgba(102,236,255,.06), rgba(167,139,255,.05));
  border: 1px solid rgba(102,236,255,.14);
}
.mini-radar::before {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(102,236,255,.16);
  border-radius: 46% 54% 51% 49%;
  transform: rotate(-13deg);
}
.mini-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 20px 20px;
}
.mini-city {
  position: absolute;
  right: 10px;
  top: 8px;
  color: rgba(255,255,255,.36);
  font-size: 9px;
  letter-spacing: .14em;
  font-weight: 900;
}
.mini-radar button {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.9);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 18px currentColor;
  padding: 0;
}
.mini-radar button.urgent {
  animation: miniPolicePulse 1.05s infinite alternate;
}
@keyframes miniPolicePulse {
  from { box-shadow: -7px 0 18px rgba(255,47,88,.95), 7px 0 18px rgba(47,123,255,.22); }
  to { box-shadow: -7px 0 18px rgba(255,47,88,.20), 7px 0 18px rgba(47,123,255,.95); }
}

.filters { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; }
.filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(255,255,255,.09);
  background: rgba(255,255,255,.035);
  color: #b7c4da;
  border-radius: 999px;
  padding: 7px 9px;
  font-size: 11px;
  font-weight: 800;
}
.filter span { width: 8px; height: 8px; border-radius: 50%; }
.filter.active { border-color: rgba(102,236,255,.48); color: #fff; background: rgba(102,236,255,.10); }
.search {
  width: 100%;
  border: 1px solid rgba(102,236,255,.18);
  border-radius: 12px;
  background: rgba(3, 9, 22, .76);
  color: #fff;
  padding: 11px 12px;
  outline: none;
}
.search:focus { border-color: rgba(102,236,255,.55); box-shadow: 0 0 24px rgba(102,236,255,.12); }

.queue-card { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.news-list { overflow: auto; display: grid; gap: 9px; padding-right: 2px; min-height: 0; }
.news-list::-webkit-scrollbar { width: 6px; }
.news-list::-webkit-scrollbar-thumb { background: rgba(102,236,255,.22); border-radius: 99px; }
.news-item {
  text-align: left;
  color: var(--text);
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(12, 20, 44, .78);
  border-radius: 12px;
  padding: 11px;
  display: grid;
  gap: 4px;
}
.news-item:hover, .news-item.active {
  border-color: rgba(102,236,255,.45);
  background: linear-gradient(180deg, rgba(28, 49, 90, .9), rgba(9, 20, 44, .92));
  box-shadow: 0 0 30px rgba(102,236,255,.08);
}
.news-item.urgent {
  border-color: rgba(255, 95, 119, .25);
  background:
    linear-gradient(90deg, rgba(255,47,88,.12), transparent 28%, rgba(47,123,255,.10)),
    rgba(12, 20, 44, .78);
}
.news-item.urgent.active,
.news-item.urgent:hover {
  border-color: rgba(255,255,255,.36);
  box-shadow: -18px 0 34px rgba(255,47,88,.08), 18px 0 34px rgba(47,123,255,.08);
}
.news-kicker { font-size: 10px; letter-spacing: .09em; text-transform: uppercase; font-weight: 950; }
.news-item strong { font-size: 13px; line-height: 1.22; }
.news-item small { color: #8999b5; }
.empty { color: var(--muted); font-size: 13px; }

.controls {
  border-radius: 16px;
  padding: 12px 16px;
}
.playback-head {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
}
.playback-head span {
  color: #687894;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 900;
}
.playback-head b { display: block; color: #fff; margin-top: 3px; }
.button-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.btn, .select {
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(18, 29, 61, .9);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 12px;
  font-weight: 850;
}
.btn:hover, .select:hover { border-color: rgba(102,236,255,.38); }
.select { min-width: 190px; }
.timeline {
  width: 100%;
  margin: 10px 0 8px;
  accent-color: var(--cyan);
}
.toggle-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.toggle-row label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 10px;
  padding: 8px 10px;
  color: #9aa8bf;
  font-size: 12px;
  font-weight: 750;
}
.toggle-row input[type="checkbox"] { accent-color: var(--cyan); }
.toggle-row input[type="range"] { width: 90px; accent-color: var(--cyan); }

@media (max-width: 1180px) {
  body { overflow: auto; }
  html, body, #app { height: auto; min-height: 100%; }
  .shell { height: auto; min-height: 100vh; grid-template-rows: 44px auto auto; }
  .layout { grid-template-columns: 1fr; }
  .map-frame { min-height: 66vh; order: -1; }
  .left-panel, .right-panel { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); }
  .queue-card { grid-column: 1 / -1; max-height: 420px; }
  .topbar { grid-template-columns: 80px 1fr; }
  .source-pill { grid-column: 1 / -1; justify-self: center; }
}

@media (max-width: 720px) {
  .shell { padding: 10px; gap: 10px; }
  .title { font-size: 9px; }
  .topbar { height: auto; padding: 10px; }
  .left-panel, .right-panel { grid-template-columns: 1fr; }
  .map-frame { min-height: 58vh; }
  .playback-head { align-items: stretch; flex-direction: column; }
  .button-row { justify-content: flex-start; }
  .map-overlay { display: none; }
}


/* v6 · beacons e iluminación editorial */
.maplibregl-marker { z-index: 8; }
.city-marker {
  --marker-color: #66ecff;
  --marker-size: 42px;
  position: relative;
  width: var(--marker-size);
  height: var(--marker-size);
  border: 0;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  transform: translateZ(0);
  pointer-events: auto;
}
.city-marker .marker-aura,
.city-marker .marker-tick,
.city-marker .marker-icon {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
}
.city-marker .marker-aura {
  background: radial-gradient(circle, color-mix(in srgb, var(--marker-color) 35%, transparent), transparent 64%);
  box-shadow: 0 0 30px color-mix(in srgb, var(--marker-color) 42%, transparent);
  animation: markerBreath 2.4s ease-in-out infinite;
}
.city-marker .marker-icon {
  width: calc(var(--marker-size) * .55);
  height: calc(var(--marker-size) * .55);
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #ffffff;
  background: rgba(3, 10, 24, .88);
  border: 1px solid color-mix(in srgb, var(--marker-color) 66%, white 8%);
  box-shadow:
    inset 0 0 14px rgba(255,255,255,.08),
    0 0 22px color-mix(in srgb, var(--marker-color) 40%, transparent);
  font-size: calc(var(--marker-size) * .25);
  line-height: 1;
  font-weight: 950;
  text-shadow: 0 0 10px #fff;
}
.city-marker .marker-tick {
  border: 1px solid color-mix(in srgb, var(--marker-color) 40%, transparent);
  transform: scale(.72);
  animation: markerPing 2.4s ease-out infinite;
}
.city-marker.active .marker-icon {
  background: #eaffff;
  color: #06101d;
  box-shadow: 0 0 44px color-mix(in srgb, var(--marker-color) 72%, transparent), 0 0 9px #fff;
}
.city-marker.active .marker-tick { animation-duration: 1.05s; }
.police-marker::before,
.police-marker::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(var(--marker-size) * .92);
  height: calc(var(--marker-size) * .92);
  border-radius: 999px;
  transform: translateY(-50%);
  filter: blur(6px);
  opacity: .8;
  pointer-events: none;
  mix-blend-mode: screen;
}
.police-marker::before {
  right: 48%;
  background: radial-gradient(circle, rgba(255,47,88,.9), rgba(255,47,88,.18) 42%, transparent 70%);
  animation: policeRed 1.06s steps(2, end) infinite;
}
.police-marker::after {
  left: 48%;
  background: radial-gradient(circle, rgba(47,123,255,.92), rgba(47,123,255,.18) 42%, transparent 70%);
  animation: policeBlue 1.06s steps(2, end) infinite;
}
.police-marker .marker-icon {
  border-color: rgba(255,255,255,.76);
  animation: policeCore 1.06s steps(2, end) infinite;
}
.alerts-off .police-marker::before,
.alerts-off .police-marker::after,
.alerts-off .city-marker .marker-tick,
.alerts-off .city-marker .marker-aura {
  animation: none !important;
  opacity: .16 !important;
}
@keyframes markerBreath {
  0%, 100% { transform: scale(.72); opacity: .44; }
  50% { transform: scale(1.08); opacity: .78; }
}
@keyframes markerPing {
  0% { transform: scale(.55); opacity: .9; }
  70%, 100% { transform: scale(1.42); opacity: 0; }
}
@keyframes policeRed {
  0%, 49% { opacity: .95; transform: translateY(-50%) scale(1.08); }
  50%, 100% { opacity: .10; transform: translateY(-50%) scale(.72); }
}
@keyframes policeBlue {
  0%, 49% { opacity: .10; transform: translateY(-50%) scale(.72); }
  50%, 100% { opacity: .95; transform: translateY(-50%) scale(1.08); }
}
@keyframes policeCore {
  0%, 49% { box-shadow: -8px 0 25px rgba(255,47,88,.92), 8px 0 18px rgba(47,123,255,.18), inset 0 0 16px rgba(255,255,255,.15); }
  50%, 100% { box-shadow: -8px 0 18px rgba(255,47,88,.18), 8px 0 25px rgba(47,123,255,.92), inset 0 0 16px rgba(255,255,255,.15); }
}