:root {
  --night: #050813;
  --night-2: #07111e;
  --panel: rgba(8, 17, 31, 0.88);
  --panel-2: rgba(12, 22, 38, 0.7);
  --paper: #f5f8ff;
  --muted: #8d9aae;
  --cyan: #55dfff;
  --cyan-soft: #9becff;
  --signal: #baff52;
  --amber: #ffbd57;
  --accent: #8f7bff;
  --accent-strong: #6d55f5;
  --accent-soft: #cfc4ff;
  --accent-glow: rgba(143, 123, 255, 0.32);
  --line: rgba(196, 224, 255, 0.14);
  --line-strong: rgba(196, 224, 255, 0.25);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background:
    radial-gradient(1200px 700px at 78% -8%, rgba(143, 123, 255, 0.16), transparent 60%),
    radial-gradient(900px 600px at 8% 4%, rgba(85, 223, 255, 0.10), transparent 55%),
    var(--night);
  color: var(--paper);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button { font: inherit; cursor: pointer; color: inherit; background: none; border: none; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 6px; }

/* Topbar */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 14px clamp(14px, 3vw, 34px);
  background: linear-gradient(to bottom, rgba(5, 8, 19, 0.92), rgba(5, 8, 19, 0.66));
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; }
.signal-mark { width: 30px; height: 30px; color: var(--accent); filter: drop-shadow(0 0 10px var(--accent-glow)); }
.brand b { font-weight: 800; letter-spacing: 0.18em; font-size: 15px; }
.brand b span { color: var(--cyan); }
.brand small { display: block; color: var(--muted); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700; }
.topbar .spacer { flex: 1; }
.live-count {
  display: inline-flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 13px;
  color: var(--paper); background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px;
}
.live-count .pip { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 0 rgba(186, 255, 82, .5); animation: pip 2.2s infinite; }
.live-count b { color: var(--signal); font-variant-numeric: tabular-nums; }
@keyframes pip { 0% { box-shadow: 0 0 0 0 rgba(186,255,82,.5);} 70%{ box-shadow:0 0 0 8px rgba(186,255,82,0);} 100%{ box-shadow:0 0 0 0 rgba(186,255,82,0);} }
@media (prefers-reduced-motion: reduce) { .live-count .pip { animation: none; } }

/* Controls */
.controls {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 16px clamp(14px, 3vw, 34px) 4px;
}
.seg { display: inline-flex; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px; }
.seg button { padding: 8px 15px; border-radius: 999px; font-size: 13px; font-weight: 650; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; }
.seg button[aria-pressed="true"] { background: linear-gradient(180deg, var(--accent), var(--accent-strong)); color: white; box-shadow: 0 4px 16px var(--accent-glow); }
.field { display: inline-flex; align-items: center; gap: 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 0 6px 0 14px; height: 40px; }
.field svg { width: 15px; height: 15px; color: var(--muted); }
.field input, .field select { background: transparent; border: none; outline: none; color: var(--paper); font-size: 13px; height: 100%; min-width: 120px; }
.field select { padding-right: 8px; }
.field select option { color: var(--night); }
.hint { color: var(--muted); font-size: 12.5px; padding: 6px clamp(14px, 3vw, 34px) 0; }
.hint b { color: var(--cyan-soft); }

/* Country chips */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px clamp(14px, 3vw, 34px); scrollbar-width: thin; }
.chip { white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--panel-2); color: var(--paper); font-size: 13px; }
.chip .n { font-family: var(--mono); font-size: 11px; color: var(--muted); background: rgba(255,255,255,.05); border-radius: 999px; padding: 1px 7px; }
.chip[aria-pressed="true"] { border-color: var(--cyan); box-shadow: inset 0 0 0 1px var(--cyan), 0 0 18px rgba(85,223,255,.15); }

/* Library */
main { padding: 8px clamp(14px, 3vw, 34px) 80px; }
.country-block { margin-top: 30px; }
.country-head { display: flex; align-items: baseline; gap: 12px; margin: 0 0 14px; }
.country-head h2 { font-size: 19px; margin: 0; letter-spacing: -0.01em; }
.country-head .flag { font-size: 22px; }
.country-head .count { font-family: var(--mono); font-size: 12px; color: var(--muted); }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 14px; }

.cam {
  position: relative; border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  background: var(--night-2); text-align: left; transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  display: flex; flex-direction: column;
}
.cam:hover { transform: translateY(-3px); border-color: var(--accent); box-shadow: 0 12px 30px rgba(0,0,0,.4), 0 0 0 1px var(--accent-glow); }
.cam .thumb { position: relative; aspect-ratio: 16 / 9; background: #0a1422 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Cg fill='none' stroke='%23223047' stroke-width='2'%3E%3Ccircle cx='20' cy='16' r='7'/%3E%3Cpath d='M8 32c2-6 6-9 12-9s10 3 12 9'/%3E%3C/g%3E%3C/svg%3E") center/40px no-repeat; overflow: hidden; }
.cam .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity .4s ease; }
.cam .thumb img.ok { opacity: 1; }
.cam .badge { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 999px; background: rgba(5,8,19,.72); backdrop-filter: blur(6px); }
.badge.live { color: var(--signal); }
.badge.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 6px var(--signal); }
.badge.video { color: var(--cyan); }
.badge.video::before { content: "▶"; font-size: 8px; }
.badge.photo { color: var(--amber); }
.badge.photo::before { content: "📷"; font-size: 9px; }
.stage video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #050a13; }
.live-section .country-head h2 { color: var(--signal); }
.live-section .country-head .dotlive { width: 10px; height: 10px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 10px #ff4d4d; display: inline-block; animation: pip 1.6s infinite; }

/* Carátula OSINT propia (sobre cualquier fuente) */
.cam { background: #060c16; }
.cam .thumb { aspect-ratio: 16 / 9; }
.cam .thumb img { filter: saturate(1.02) contrast(1.02); }
.cam .scan { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.11) 2px 3px);
  mix-blend-mode: overlay; opacity: .55; }
.cam .thumb::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(85,223,255,.18), inset 0 0 42px rgba(0,0,0,.5); }
.cam .osint-top, .cam .osint-bot, .cam .play { z-index: 3; }
.cam .osint-top { position: absolute; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px;
  background: linear-gradient(to bottom, rgba(3,7,15,.8), rgba(3,7,15,0)); }
.cam .osint-bot { position: absolute; bottom: 0; left: 0; right: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; padding: 16px 10px 9px;
  background: linear-gradient(to top, rgba(3,7,15,.9), rgba(3,7,15,0)); }
.cam .tag { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; padding: 3px 8px; border-radius: 5px; display: inline-flex; align-items: center; gap: 6px; background: rgba(3,7,15,.55); border: 1px solid var(--line); }
.cam .tag.live { color: #ff6b6b; border-color: rgba(255,107,107,.4); }
.cam .tag.live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 7px #ff4d4d; animation: pip 1.5s infinite; }
.cam .tag.clip { color: var(--cyan); border-color: rgba(85,223,255,.4); }
.cam .tag.clip::before { content: "▶"; font-size: 8px; }
.cam .tag.photo { color: var(--amber); border-color: rgba(255,189,87,.35); }
.cam .tag.photo::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--amber); }
.cam .tag.webcam { color: var(--accent-soft); border-color: rgba(143,123,255,.4); }
.cam .tag.webcam::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--accent); }
.cam .cc { font-family: var(--mono); font-size: 11px; color: var(--paper); letter-spacing: .06em; text-shadow: 0 1px 4px rgba(0,0,0,.85); }
.cam .osint-bot .nm { font-size: 12px; line-height: 1.25; color: var(--paper); text-shadow: 0 1px 6px rgba(0,0,0,.95); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cam .osint-bot .co { font-family: var(--mono); font-size: 10px; color: var(--cyan-soft); opacity: .85; white-space: nowrap; text-shadow: 0 1px 4px rgba(0,0,0,.95); }
.cam .play { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; transition: opacity .15s; }
.cam:hover .play { opacity: 1; }
.cam .play span { width: 46px; height: 46px; border-radius: 50%; background: rgba(5,8,19,.6); border: 1px solid var(--cyan); color: var(--cyan); display: grid; place-items: center; font-size: 16px; backdrop-filter: blur(4px); }
.cam .meta { padding: 10px 12px; display: flex; align-items: center; gap: 8px; }
.cam .meta .nm { font-size: 12.5px; line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.cam .meta .fl { margin-left: auto; font-size: 15px; }

.more { margin: 16px 0 0; display: inline-flex; }
.more button { border: 1px solid var(--line); border-radius: 999px; padding: 8px 16px; font-size: 13px; color: var(--cyan-soft); background: var(--panel-2); }
.more button:hover { border-color: var(--cyan); }

.empty { color: var(--muted); text-align: center; padding: 60px 20px; }
.loading { color: var(--muted); text-align: center; padding: 70px 20px; font-family: var(--mono); font-size: 13px; }

/* Globe */
#globe { position: relative; height: calc(100vh - 210px); min-height: 460px; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: #030610; }
#globe .maplibregl-map { position: absolute; inset: 0; }
.globe-hint { position: absolute; left: 14px; bottom: 14px; z-index: 5; font-size: 12px; color: var(--muted); background: rgba(5,8,19,.7); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; backdrop-filter: blur(6px); }

/* Player modal */
.modal { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; padding: clamp(10px, 3vw, 40px); background: rgba(2, 5, 12, 0.82); backdrop-filter: blur(6px); }
.modal.open { display: flex; }
.modal .box { width: min(1040px, 100%); background: var(--night-2); border: 1px solid var(--line-strong); border-radius: 18px; overflow: hidden; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.modal .bar { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--line); }
.modal .bar .fl { font-size: 20px; }
.modal .bar h3 { margin: 0; font-size: 15px; font-weight: 700; }
.modal .bar .sub { color: var(--muted); font-size: 12px; font-family: var(--mono); }
.modal .bar .x { margin-left: auto; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line); color: var(--paper); display: grid; place-items: center; font-size: 18px; }
.modal .bar .x:hover { border-color: var(--accent); background: var(--panel-2); }
.stage { position: relative; aspect-ratio: 16 / 9; background: #050a13; }
.stage img, .stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: contain; }
.stage .status { position: absolute; left: 12px; bottom: 12px; font-family: var(--mono); font-size: 11px; color: var(--signal); background: rgba(5,8,19,.7); border-radius: 8px; padding: 5px 10px; }
.stage .fail { position: absolute; inset: 0; display: none; place-items: center; text-align: center; color: var(--muted); font-size: 14px; padding: 20px; }

footer { color: var(--muted); font-size: 12px; text-align: center; padding: 30px 20px 50px; border-top: 1px solid var(--line); }
footer a { color: var(--cyan-soft); text-decoration: none; }
.hidden { display: none !important; }