/* ── BIG BRO · STYLES ── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --red: #cc1a1a;
  --red-dim: #dd4444;
  --red-dark: #3a0a0a;
  --green: #cc1a1a;
  --green-dim: #dd4444;
  --green-dark: #1a2a3a;
  --bg: #060d14;
  --surface: #0a1520;
  --surface2: #0d1a27;
  --text: #e8eef4;
  --text-dim: #8aa0b4;
  --border: #1a3050;
  --accent: #cc1a1a;
}
:root.light {
  --green: #aa0000;
  --green-dim: #cc2222;
  --green-dark: #d0dde8;
  --bg: #e8f0f8;
  --surface: #ffffff;
  --surface2: #f0f5fa;
  --text: #1a2a3a;
  --text-dim: #4a6080;
  --border: #b0c8e0;
  --accent: #aa0000;
}

body {
  background: var(--bg);
  background-image: radial-gradient(ellipse at 20% 0%, #0a1e35 0%, transparent 60%),
                    radial-gradient(ellipse at 80% 100%, #0d1a2a 0%, transparent 60%);
  font-family: 'Rajdhani', sans-serif;
  font-weight: 500;
  color: var(--text);
  height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* SCANLINES */
body::before {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,20,40,0.06) 2px, rgba(0,20,40,0.06) 4px);
  pointer-events: none;
  z-index: 9000;
}
:root.light body::before { opacity: 0.03; }

/* TOP BAR */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.4rem 1rem;
  background: var(--surface);
  border-bottom: 1px solid var(--accent);
  flex-shrink: 0; z-index: 100; position: relative;
}

.logo-wrap {
  display: flex; align-items: center; gap: 0.7rem; position: relative;
}
.logo-wrap .btn-theme { opacity: 0; pointer-events: none; transition: opacity .2s; }
.logo-wrap:hover .btn-theme { opacity: 1; pointer-events: auto; }

.rec-dot {
  width: 16px; height: 16px; background: #ff2200; border-radius: 50%;
  animation: recblink 4s ease-in-out infinite;
  box-shadow: 0 0 8px 3px rgba(255,34,0,0.7), 0 0 20px 6px rgba(255,34,0,0.35);
}
@keyframes recblink {
  0%, 92%, 100% { transform: scaleY(1); }
  96% { transform: scaleY(0.08); }
}

.site-title {
  font-size: 1.4rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--green); line-height: 1;
}

.btn-theme {
  font-family: 'Rajdhani', sans-serif; font-size: 0.9rem;
  background: none; border: 1px solid var(--green-dark);
  color: var(--text-dim); width: 28px; height: 28px;
  cursor: pointer; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: all .2s;
}
.btn-theme:hover { border-color: var(--green); color: var(--green); }

.cam-id { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); text-align: right; }
.timecode { font-size: 0.95rem; letter-spacing: 0.1em; color: var(--text-dim); text-align: right; /***/ font-size: 0.95rem; letter-spacing: 0.08em; color: var(--text-dim); opacity: 0.7; text-align: right; }

.btn-add {
  font-family: 'Rajdhani', sans-serif; font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: transparent !important; color: var(--green) !important;
  border: 1px solid var(--green); padding: 0.55rem 1.4rem;
  cursor: pointer; transition: all .15s;
  -webkit-appearance: none; appearance: none;
}
.btn-add:hover, .btn-add.active { background: var(--green-dark) !important; box-shadow: 0 0 8px rgba(204,26,26,0.3); }

.btn-login {
  font-family: 'Rajdhani', sans-serif; font-size: 0.7rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: none; border: 1px solid var(--green-dark);
  color: var(--text-dim); padding: 0.3rem 0.7rem; cursor: pointer;
  transition: all .15s;
}
.btn-login:hover { border-color: var(--green); color: var(--green); }

.user-badge { display: none; align-items: center; gap: 0.6rem; font-size: 0.7rem; letter-spacing: 0.08em; }
.user-badge.visible { display: flex; }
.user-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  border: 1.5px solid var(--green); background: var(--green-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.65rem; font-weight: bold; color: var(--green);
}
.user-points { color: var(--green); font-size: 0.72rem; letter-spacing: 0.06em; }


/* ════════════════════════════════════════════════
   SIDEBAR DESKTOP — solo > 768px
════════════════════════════════════════════════ */
@media (min-width: 769px) {
  #topbarMobile   { display: none !important; }
  .topbar-desktop { display: flex !important; }
}
@media (max-width: 768px) {
  .topbar-desktop { display: none !important; }
  .db-sidebar     { display: none !important; }
  .db-subpanel    { display: none !important; }
}

/* ── MOBILE BOTTOM SHEET ── */
.mob-sheet {
  display: none;
  position: fixed;
  bottom: calc(var(--nav-h) + 36px);
  left: 0; right: 0;
  max-height: 0;
  background: #060e18;
  border-top: 2px solid #cc1a1a;
  z-index: 500;
  flex-direction: column;
  overflow: hidden;
  transition: max-height .32s cubic-bezier(.4,0,.2,1);
}
.mob-sheet.open {
  max-height: 75vh;
  overflow-y: auto;
}
.mob-sheet-handle {
  width: 36px; height: 4px; background: #1a3050; border-radius: 2px;
  margin: .55rem auto .2rem; flex-shrink: 0; cursor: pointer;
}
.mob-sheet-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .45rem .9rem .4rem;
  border-bottom: 1px solid #0d1a27;
  flex-shrink: 0;
}
.mob-sheet-title {
  font-family: 'Rajdhani', sans-serif;
  font-size: .82rem; font-weight: 900;
  letter-spacing: .18em; color: #cc1a1a;
}
.mob-sheet-close {
  background: none; border: none; color: #3a6a8a;
  font-size: 1.2rem; cursor: pointer; line-height: 1; padding: .1rem .25rem;
}
.mob-sheet-body {
  overflow-y: auto; overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.mob-sheet-body::-webkit-scrollbar { width: 2px; }
.mob-sheet-body::-webkit-scrollbar-thumb { background: #1a3050; }

.topbar-desktop {
  display: none;
  position: fixed; top: 0; left: 0; right: 0; height: 64px; z-index: 200;
  background: var(--surface); border-bottom: 1px solid var(--border);
  align-items: center; justify-content: space-between;
  padding: 0 1.2rem 0 16px; gap: 1rem; flex-shrink: 0;
}

.topbar-bigbro {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 0 .5rem; height: 100%; user-select: none;
}
.topbar-bigbro:hover span { color: #e8eef4; }
.topbar-bigbro span {
  font-family: 'Rajdhani', sans-serif; font-size: 1.5rem; font-weight: 700;
  letter-spacing: .14em; color: var(--green); transition: color .15s;
}
.topbar-recdot {
  width: 16px; height: 16px; background: #ff2200; border-radius: 50%; flex-shrink: 0;
  animation: recblink 4s ease-in-out infinite;
  box-shadow: 0 0 8px 3px rgba(255,34,0,.7), 0 0 20px 6px rgba(255,34,0,.3);
}


/* ── Sidebar ── */
.db-sidebar {
  position: fixed; top: 0; left: 0; bottom: 40px; width: 56px; z-index: 150;
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; align-items: flex-start;
  overflow: hidden; transition: width .2s ease;
}
.db-sidebar:hover { width: 200px; }
/* Cuando el sidebar está expandido, mover el subpanel y topbar */
.db-sidebar:hover ~ .db-subpanel:not(.open) { opacity: 0; pointer-events: none; }

.db-logo {
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  width: 56px; height: 64px; flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer; overflow: hidden; flex-shrink: 0;
}
.db-logo:hover { background: rgba(204,26,26,.05); }
.db-rec-dot {
  width: 20px; height: 20px; background: #ff2200; border-radius: 50%;
  animation: recblink 4s ease-in-out infinite;
  box-shadow: 0 0 10px 4px rgba(255,34,0,.7), 0 0 24px 8px rgba(255,34,0,.3);
  flex-shrink: 0;
}
.db-logo-text { display: none; }
.db-sidebar:hover .db-logo-text { display: none; }

.db-nav {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start;
  padding: 6px 0; gap: 0; overflow-y: auto; width: 100%;
}
.db-nav-item {
  position: relative; width: 100%;
  display: flex; flex-direction: row; align-items: center;
  padding: 13px 0 13px 16px; gap: 14px; cursor: pointer;
  transition: background .15s; border-left: 2px solid transparent;
  white-space: nowrap; overflow: hidden;
}
.db-nav-item:hover  { background: rgba(204,26,26,.05); }
.db-nav-item.active { background: rgba(204,26,26,.1); border-left-color: #cc1a1a; }
.db-nav-item.active .db-nav-icon svg { stroke: #cc1a1a; }
.db-nav-item.active .db-nav-label    { color: #cc1a1a; }
.db-nav-icon {
  position: relative; display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; width: 24px;
}
.db-nav-icon svg { stroke: #3a5a74; transition: stroke .15s; }
.db-nav-item:hover .db-nav-icon svg { stroke: #8aa0b4; }
.db-nav-label {
  font-family: 'Rajdhani', sans-serif; font-size: .88rem; font-weight: 600;
  letter-spacing: .1em; color: #7a9ab8; text-transform: uppercase;
  white-space: nowrap; opacity: 0; transition: opacity .1s; pointer-events: none;
}
.db-sidebar:hover .db-nav-label { opacity: 1; }
.db-nav-item:hover .db-nav-label { color: #ddeeff; }
.db-nav-item.active .db-nav-label { color: #cc1a1a !important; opacity: 1; }
/* Sin tooltip: el label se muestra inline al expandir el sidebar */
.db-nav-item::after { display: none; }
.db-nav-badge {
  position: absolute; top: -3px; right: -3px;
  background: #cc1a1a; color: #fff;
  font-family: 'Rajdhani', sans-serif; font-size: .4rem; font-weight: 700;
  width: 13px; height: 13px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
/* Usuario abajo */
.db-user {
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  padding: 10px 14px; border-top: 1px solid var(--border); width: 100%;
  flex-shrink: 0; overflow: hidden;
}
.db-user-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid var(--green); background: var(--green-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem; font-weight: bold; color: var(--green);
}
.db-user-info { opacity:0; transition: opacity .1s; }
.db-sidebar:hover .db-user-info { opacity:1; }
.db-user-pts  { font-family:'Rajdhani',sans-serif;font-size:.55rem;color:var(--green);letter-spacing:.06em; }
.db-user-name { font-family:'Rajdhani',sans-serif;font-size:.5rem;color:#4a6a8a;letter-spacing:.05em; white-space:nowrap; }
.db-login-btn {
  font-family:'Rajdhani',sans-serif;font-size:.5rem;letter-spacing:.08em;text-transform:uppercase;
  background:none;border:1px solid #cc1a1a;color:#cc1a1a;
  padding:.3rem .5rem;cursor:pointer;margin:0 10px 10px;text-align:center;
  flex-shrink: 0; white-space:nowrap; opacity:0; transition: opacity .1s;
}
.db-sidebar:hover .db-login-btn { opacity:1; }
.db-login-btn:hover { background: rgba(204,26,26,.1); }

/* ── Subpanel ── */
.db-subpanel {
  position: fixed; top: 64px; left: 56px; bottom: 48px; z-index: 160;
  width: 500px; background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateX(-500px); transition: transform .22s ease, left .2s ease;
  pointer-events: none; opacity: 0;
}
.db-subpanel.open {
  transform: translateX(0); pointer-events: auto; opacity: 1;
}
/* Sidebar expandido: subpanel se desplaza con él */
.db-sidebar:hover ~ .db-subpanel {
  left: 200px;
}
.db-subpanel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 1rem; border-bottom: 1px solid var(--border);
  font-family: 'Rajdhani', sans-serif; font-size: .85rem; font-weight: 700;
  letter-spacing: .16em; color: #cc1a1a; flex-shrink: 0;
}
.db-subpanel-body { flex: 1; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column; min-height: 0; scroll-behavior: smooth; }

/* mainWrap y topbar se desplazan */
#mainWrap { margin-left: 56px; margin-top: 64px; transition: margin-left .22s ease; margin-bottom: 0; }
#mainWrap.sub-open { margin-left: calc(56px + var(--sp-w, 280px)); }

/* ── Ítems subpanel ── */
.db-sub-btn {
  display: flex; align-items: center; gap: 12px;
  width: 100%; background: none; border: none; border-bottom: 1px solid #0d1a27;
  color: #a8c4d8; font-family: 'Rajdhani', sans-serif; font-size: .88rem;
  font-weight: 600; letter-spacing: .08em; padding: .75rem 1rem;
  cursor: pointer; text-align: left; transition: all .15s; white-space: nowrap;
}
.db-sub-btn:hover  { background: rgba(255,255,255,.04); color: #ffffff; border-left: 2px solid #cc1a1a; }
.db-sub-btn.active { background: rgba(204,26,26,.08) !important; color: #ff4444 !important; border-left: 2px solid #cc1a1a; }
.db-sub-btn svg { stroke: #5a7a94; flex-shrink: 0; transition: stroke .15s; width: 18px; height: 18px; }
.db-sub-btn:hover svg, .db-sub-btn.active svg { stroke: currentColor; }
.db-sub-section {
  font-family:'Rajdhani',sans-serif; font-size:.65rem; letter-spacing:.2em;
  color:#cc1a1a; padding:.7rem 1rem .3rem; text-transform:uppercase;
}
/* Sub-sub panel desplegable dentro del subpanel */
.db-sub-sub { display:none; background: rgba(0,0,0,.25); border-bottom: 1px solid #0a1520; }
.db-sub-sub.open { display:block; }

/* MAIN */
.main { flex: 1; display: flex; overflow: hidden; position: relative; }

.map-wrap {
  flex: 1; position: relative; overflow: hidden;
  border: 1px solid var(--green-dark);
 position:relative;}
#leafletMap { width: 100%; height: 100%; }

.corner {
  position: absolute; width: 16px; height: 16px; z-index: 10; pointer-events: none;
  border-color: var(--green); border-style: solid; opacity: 0.6;
}
.c-tl { top: 8px; left: 8px; border-width: 1px 0 0 1px; }
.c-tr { top: 8px; right: 8px; border-width: 1px 1px 0 0; }
.c-bl { bottom: 8px; left: 8px; border-width: 0 0 1px 1px; }
.c-br { bottom: 8px; right: 8px; border-width: 0 1px 1px 0; }

.crosshair {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 20px; height: 20px; pointer-events: none; z-index: 10; opacity: 0.4;
}
.crosshair::before, .crosshair::after {
  content: ''; position: absolute; background: var(--green);
}
.crosshair::before { width: 1px; height: 100%; left: 50%; top: 0; }
.crosshair::after { width: 100%; height: 1px; top: 50%; left: 0; }

.map-hint {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  background: rgba(6,13,20,0.92); border: 1px solid var(--green);
  padding: 0.8rem 1.4rem; font-size: 0.72rem; color: var(--green);
  letter-spacing: 0.08em; text-align: center; pointer-events: none;
  z-index: 60; display: none; line-height: 1.8;
  text-shadow: 0 0 6px var(--green);
}
.map-hint.visible { display: block; }
.map-hint strong { display: block; margin-bottom: 0.3rem; font-size: 0.8rem; }

/* PANEL */
.panel {
  width: 300px; background: var(--surface);
  border-left: 1px solid var(--green-dark);
  display: flex; flex-direction: column; flex-shrink: 0;
  transform: translateX(100%); transition: transform .3s ease;
  position: absolute; right: 0; top: 0; bottom: 0; z-index: 200;
}
.panel.open { transform: translateX(0); }

.panel-header {
  padding: 0.8rem 1rem; border-bottom: 1px solid var(--green-dark);
  display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
}
.panel-title { font-size: 0.88rem; letter-spacing: 0.14em; text-transform: uppercase; text-shadow: 0 0 6px var(--green); }
.btn-close {
  background: #1a0808; border: 1px solid #cc1a1a; color: #ff6666;
  width: 32px; height: 32px; cursor: pointer; font-size: 1rem; font-weight: 700;
  font-family: 'Rajdhani', sans-serif; transition: all .15s;
}
.btn-close:hover { background: #cc1a1a; color: #fff; }

.panel-body { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: 0.8rem; }
.panel-body::-webkit-scrollbar { width: 3px; }
.panel-body::-webkit-scrollbar-thumb { background: var(--green-dark); }

.coords-display {
  background: var(--green-dark); border: 1px solid var(--green-dim);
  padding: 0.6rem 0.8rem; font-size: 0.68rem; color: var(--text-dim);
  cursor: pointer; transition: border-color .15s; line-height: 1.7;
}
.coords-display:hover { border-color: var(--green); }
.coords-display .coords-label { font-size: 0.58rem; color: #661010; letter-spacing: 0.1em; text-transform: uppercase; }
.coords-display .coords-val { font-size: 0.78rem; color: var(--green); }
.coords-display.has-coords .coords-val { text-shadow: 0 0 6px var(--green); }

.field { display: flex; flex-direction: column; gap: 0.3rem; }
.field label { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: #661010; }
.field label .req { color: #ff2200; }
.field input, .field select, .field textarea {
  font-family: 'Rajdhani', sans-serif; font-size: 0.82rem;
  background: var(--surface2); border: 1px solid var(--green-dark);
  color: var(--green); padding: 0.45rem 0.6rem; outline: none;
  transition: border-color .15s; width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--green); }
.field select option { background: var(--surface2); }
.field textarea { resize: vertical; min-height: 56px; }
.fields-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }

.panel-footer { padding: 0.8rem 1rem; border-top: 1px solid var(--green-dark); flex-shrink: 0; }
.btn-submit {
  width: 100%; font-family: 'Rajdhani', sans-serif; font-size: 0.78rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: var(--green-dark); color: var(--green);
  border: 1px solid var(--green); padding: 0.65rem; cursor: pointer; transition: all .15s;
}
.btn-submit:hover:not(:disabled) { background: #661010; box-shadow: 0 0 12px rgba(204,26,26,0.3); }
.btn-submit:disabled { opacity: 0.35; cursor: not-allowed; }

/* BOTTOM BAR */
.bottombar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.3rem 1rem; background: var(--surface);
  border-top: 1px solid var(--green-dark);
  flex-shrink: 0; position: relative; z-index: 100;
}
.bottombar-info { font-size: 0.72rem; letter-spacing: 0.06em; color: var(--text-dim); }
.bottombar-link { color: var(--text-dim); text-decoration: none; transition: color .15s; }
.bottombar-link:hover { color: var(--green); }

/* BOTÓN DESPIERTA (solo móvil) */
.nodo-btn-fixed {
  display: none; /* oculto por defecto, solo visible en móvil */
}
.nodo-btn-gob { font-size: .55em; opacity: .85; }

/* BARRA INFERIOR DESKTOP */
.desktop-bottom-bar {
  display: none; /* oculta en móvil */
}
@media (min-width: 769px) {
  .desktop-bottom-bar {
    display: flex; align-items: stretch;
    position: fixed; bottom: 0; left: 56px; z-index: 350;
    height: 40px;
    border-top: 2px solid #8b0000;
  }
  .dbb-btn {
    display: flex; align-items: center; gap: .5rem;
    border: none; cursor: pointer;
    font-family: 'Rajdhani', sans-serif; font-size: .72rem;
    font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    padding: 0 1.4rem; transition: background .15s, box-shadow .15s;
    line-height: 1;
  }
  .dbb-despierta {
    background: linear-gradient(135deg, #8b0000, #cc1a1a);
    color: #fff;
    text-shadow: 0 0 8px rgba(255,100,100,.4);
    box-shadow: inset 0 0 12px rgba(255,34,0,.15);
    border-right: 1px solid #8b0000;
  }
  .dbb-despierta:hover { background: linear-gradient(135deg, #a01010, #e02020); }
  .dbb-manifiesto {
    background: #060e18;
    color: #c8dce8;
    border-right: 1px solid #1a3050;
  }
  .dbb-manifiesto:hover { background: #0d1a27; color: #fff; }
}

@media (max-width: 768px) {
  .nodo-btn-fixed {
    display: block;
    position: fixed; bottom: calc(var(--nav-h) + 28px); left: 0; z-index: 350;
    background: linear-gradient(135deg, #8b0000, #cc1a1a);
    border: none; border-top: 3px solid #8b0000;
    color: #fff; font-family: 'Rajdhani', sans-serif; font-size: 0.75rem;
    font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
    padding: 0.5rem 1.1rem; cursor: pointer;
    transition: background .15s; line-height: 1;
  }
}
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    .nodo-btn-fixed {
      bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 28px);
    }
  }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* TOAST */
.toast {
  position: fixed; bottom: 3rem; left: 50%; transform: translateX(-50%) translateY(60px);
  background: #08141f; border: 1.5px solid var(--green); color: #aae8cc;
  font-family: 'Rajdhani', sans-serif; font-size: 0.92rem; font-weight: 700;
  padding: 0.55rem 1.3rem; letter-spacing: 0.1em;
  z-index: 9999; opacity: 0; transition: all .3s ease; pointer-events: none;
  box-shadow: 0 2px 16px rgba(0,200,120,0.2);
}
.toast.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.toast.error { border-color: #ff2200; color: #ff8888; background: #1a0808; box-shadow: 0 2px 16px rgba(255,34,0,0.25); }


/* ── Override popup Leaflet para objetivos ───────────────────────────────── */
.leaflet-popup-content-wrapper {
  background: #060e18 !important;
  border: 1.5px solid #1a3050 !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.7) !important;
  padding: 0 !important;
}
.leaflet-popup-content {
  margin: 0 !important;
  font-family: 'Rajdhani', sans-serif !important;
}
.leaflet-popup-tip-container { display: none !important; }
.leaflet-popup-close-button {
  color: #cc1a1a !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  top: 6px !important;
  right: 8px !important;
  z-index: 10 !important;
}
.leaflet-popup-close-button:hover { color: #ff4444 !important; }

/* POINTS POP */
.points-pop {
  position: fixed; bottom: 3.5rem; right: 1.5rem;
  background: var(--surface); border: 1.5px solid var(--green);
  color: var(--green); font-family: 'Rajdhani', sans-serif;
  font-size: 0.78rem; padding: 0.5rem 1rem; letter-spacing: 0.08em;
  z-index: 9999; transform: translateY(60px); opacity: 0;
  transition: all .4s ease; pointer-events: none;
  box-shadow: 0 0 16px rgba(204,26,26,0.3);
}
.points-pop.show { transform: translateY(0); opacity: 1; }

/* AUTH MODAL */
.auth-modal {
  display: none; position: fixed; inset: 0; z-index: 8000;
  background: rgba(6,13,20,0.95); align-items: center; justify-content: center;
}
.auth-modal.visible { display: flex; }
.auth-box {
  width: min(380px, 92vw); border: 1.5px solid var(--green);
  background: var(--surface); box-shadow: 0 0 40px rgba(204,26,26,0.2);
}
.auth-header {
  padding: 1rem 1.2rem; border-bottom: 1px solid var(--green-dark);
  display: flex; align-items: center; justify-content: space-between;
}
.auth-title { font-size: 0.8rem; letter-spacing: 0.14em; text-transform: uppercase; }
.auth-tabs { display: flex; border-bottom: 1px solid var(--green-dark); }
.auth-tab {
  flex: 1; padding: 0.6rem; font-family: 'Rajdhani', sans-serif;
  font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: none; border: none; color: var(--text-dim); cursor: pointer;
  border-bottom: 2px solid transparent; transition: all .15s;
}
.auth-tab.active { color: var(--green); border-bottom-color: var(--green); }
.auth-body { padding: 1.2rem; display: flex; flex-direction: column; gap: 0.8rem; }
.auth-field { display: flex; flex-direction: column; gap: 0.3rem; }
.auth-field label { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: #661010; }
.auth-field input {
  font-family: 'Rajdhani', sans-serif; font-size: 0.78rem;
  background: var(--surface2); border: 1px solid var(--green-dark);
  color: var(--green); padding: 0.5rem 0.7rem; outline: none; transition: border-color .15s;
}
.auth-field input:focus { border-color: var(--green); }
.auth-error { font-size: 0.65rem; color: #ff2200; letter-spacing: 0.06em; display: none; }
.auth-error.visible { display: block; }
.auth-btn {
  font-family: 'Rajdhani', sans-serif; font-size: 0.95rem; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: #1a0808; color: #ff6666;
  border: 1px solid #cc1a1a; padding: 0.65rem 1.4rem; cursor: pointer; transition: all .15s;
}
.auth-btn:hover { background: #cc1a1a; color: #fff; }


.lb-row {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.5rem 0.8rem; border: 1px solid var(--green-dark); font-size: 0.72rem;
}
.lb-rank { color: var(--text-dim); width: 1.5rem; text-align: center; }
.lb-name { flex: 1; }
.lb-pts { color: var(--green); }


/* NEWS MODAL */
.news-modal {
  display: none; position: fixed; inset: 0; z-index: 7500;
  background: rgba(6,13,20,0.95); align-items: flex-start;
  justify-content: center; padding-top: 3rem; overflow-y: auto;
}
.news-modal.visible { display: flex; }
.news-box {
  width: min(720px, 95vw); border: 1.5px solid var(--green);
  background: var(--surface); box-shadow: 0 0 40px rgba(204,26,26,0.2); margin-bottom: 3rem;
}
.news-header {
  padding: 1rem 1.2rem; border-bottom: 1px solid var(--green-dark);
  display: flex; align-items: center; justify-content: space-between;
}
.news-title { font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; }
.news-filters { display: flex; gap: 0.4rem; padding: 0.7rem 1.2rem; border-bottom: 1px solid var(--green-dark); flex-wrap: wrap; }
.news-filter {
  font-family: 'Rajdhani', sans-serif; font-size: 0.62rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: none; border: 1px solid var(--green-dark);
  color: var(--text-dim); padding: 0.25rem 0.6rem; cursor: pointer; transition: all .15s;
}
.news-filter.active { border-color: var(--green); color: var(--green); background: var(--green-dark); }
.news-body { padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: 0.6rem; min-height: 200px; }
.news-item {
  border: 1px solid var(--green-dark); padding: 0.8rem 1rem;
  display: flex; flex-direction: column; gap: 0.4rem; cursor: pointer; transition: border-color .15s; text-decoration: none;
}
.news-item:hover { border-color: var(--text-dim); }
.news-item-title { font-size: 0.82rem; letter-spacing: 0.06em; color: var(--text); line-height: 1.4; }
.news-item-meta { font-size: 0.68rem; color: var(--text-dim); letter-spacing: 0.06em; display: flex; gap: 1rem; }
.news-tag {
  font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--green-dark); color: var(--text-dim);
  padding: 0.15rem 0.4rem; border: 1px solid var(--green-dark); align-self: flex-start;
}
.news-loading { font-size: 0.7rem; color: var(--text-dim); letter-spacing: 0.1em; text-align: center; padding: 2rem; animation: pulse2 1.2s infinite; }
@keyframes pulse2 { 0%,100%{opacity:1} 50%{opacity:0.3} }
.news-footer { padding: 0.8rem 1.2rem; border-top: 1px solid var(--green-dark); display: flex; justify-content: flex-end; }

/* CAMERAS MODAL */
.cams-modal {
  display: none; position: fixed; inset: 0; z-index: 7600;
  background: rgba(6,13,20,0.95); align-items: flex-start;
  justify-content: center; padding-top: 3rem; overflow-y: auto;
}
.cams-modal.visible { display: flex; }
.cams-box {
  width: min(780px, 95vw); border: 1.5px solid var(--green);
  background: var(--surface); box-shadow: 0 0 40px rgba(204,26,26,0.2); margin-bottom: 3rem;
}
.cams-header {
  padding: 1rem 1.2rem; border-bottom: 1px solid var(--green-dark);
  display: flex; align-items: center; justify-content: space-between;
}
.cams-title { font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; }
.cams-filters { display: flex; gap: 0.4rem; padding: 0.7rem 1.2rem; border-bottom: 1px solid var(--green-dark); flex-wrap: wrap; }
.cams-filter {
  font-family: 'Rajdhani', sans-serif; font-size: 0.62rem;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: none; border: 1px solid var(--green-dark);
  color: var(--text-dim); padding: 0.25rem 0.6rem; cursor: pointer; transition: all .15s;
}
.cams-filter.active { border-color: var(--green); color: var(--green); background: var(--green-dark); }
.cams-body { padding: 1rem 1.2rem; }
.cams-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.8rem; }
.cam-card { border: 1px solid var(--green-dark); display: flex; flex-direction: column; transition: border-color .15s; overflow: hidden; text-decoration: none; }
.cam-card:hover { border-color: var(--green); }
.cam-card-thumb { width: 100%; aspect-ratio: 16/9; background: #0d1a27; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.cam-card-thumb img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; }
.cam-card-thumb .cam-live-badge { position: absolute; top: 6px; left: 6px; background: #cc1a1a; color: #fff; font-size: 0.65rem; letter-spacing: 0.1em; padding: 0.15rem 0.4rem; }
.cam-card-info { padding: 0.6rem 0.8rem; display: flex; flex-direction: column; gap: 0.3rem; }
.cam-card-name { font-size: 0.72rem; letter-spacing: 0.06em; color: var(--text); line-height: 1.3; }
.cam-card-meta { font-size: 0.6rem; color: var(--text-dim); letter-spacing: 0.06em; }
.cam-card-tag { font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; background: var(--green-dark); color: var(--text-dim); padding: 0.15rem 0.4rem; align-self: flex-start; }
.cams-footer { padding: 0.8rem 1.2rem; border-top: 1px solid var(--green-dark); display: flex; justify-content: space-between; align-items: center; }
.cams-note { font-size: 0.62rem; color: var(--text-dim); letter-spacing: 0.06em; }

/* LOCATION PICKER MODAL */
.loc-modal {
  display: none; position: fixed; inset: 0; z-index: 5000;
  background: rgba(6,13,20,0.90); align-items: center; justify-content: center; flex-direction: column; gap: 0.8rem;
}
.loc-modal.visible { display: flex; }
.loc-modal-box { width: min(680px, 94vw); height: min(480px, 70vh); border: 1.5px solid var(--green); box-shadow: 0 0 30px rgba(204,26,26,0.3); position: relative; overflow: hidden; }
#locMap { width: 100%; height: 100%; }
.loc-modal-hint { font-size: 0.72rem; letter-spacing: 0.1em; color: var(--text-dim); text-align: center; }
.loc-modal-hint strong { color: var(--green); }
.loc-modal-actions { display: flex; gap: 0.8rem; }
.loc-btn {
  font-family: 'Rajdhani', sans-serif; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid var(--green); background: var(--green-dark); color: var(--green); padding: 0.4rem 1rem; cursor: pointer; transition: background .15s;
}
.loc-btn:hover { background: #661010; }
.loc-btn.cancel { border-color: var(--green-dark); color: var(--text-dim); }
.loc-btn.cancel:hover { border-color: var(--text-dim); }
.red-marker { width: 14px; height: 14px; background: #cc1a1a; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 6px rgba(204,26,26,0.8); }
.loc-mode-tabs { display: flex; gap: 0.5rem; }
.loc-tab {
  font-family: 'Rajdhani', sans-serif; font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase;
  background: transparent; border: 1px solid var(--green-dark); color: var(--text-dim); padding: 0.35rem 0.9rem; cursor: pointer; transition: all .15s;
}
.loc-tab:hover { border-color: var(--text-dim); color: var(--green); }
.loc-tab.active { border-color: var(--green); color: var(--green); background: var(--green-dark); }
.loc-manual-box { width: min(680px, 94vw); background: var(--surface2); border: 1.5px solid var(--green); padding: 2rem; display: flex; gap: 1.5rem; align-items: flex-end; }
.loc-manual-field { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; }
.loc-manual-field label { font-size: 0.6rem; letter-spacing: 0.12em; color: #661010; }
.loc-manual-field input {
  font-family: 'Rajdhani', sans-serif; font-size: 0.85rem;
  background: var(--surface); border: 1px solid var(--green-dark);
  color: var(--green); padding: 0.5rem 0.7rem; outline: none; transition: border-color .15s;
}
.loc-manual-field input:focus { border-color: var(--green); }

/* LIGHT MODE */
:root.light .topbar { border-bottom-color: #ddd; }
:root.light .bottombar { border-top-color: #ddd; }
:root.light .ticker-wrap { border-top-color: #ddd; }
:root.light .panel { border-left-color: #ddd; }
:root.light .field input, :root.light .field select, :root.light .field textarea { background: #f8f8f8; border-color: #ddd; color: #1a1a1a; }
:root.light .auth-field input, :root.light .loc-manual-field input { background: #f8f8f8; border-color: #ddd; color: #1a1a1a; }
:root.light .news-item { border-color: #ddd; }
:root.light .cam-card { border-color: #ddd; }

@keyframes dotRipple {
  0%  {transform:scale(1);   box-shadow:0 0 0 0 rgba(255,34,0,0.8),0 0 8px 3px rgba(255,34,0,0.7);}
  25% {transform:scale(1.6); box-shadow:0 0 0 12px rgba(255,34,0,0.4),0 0 20px 8px rgba(255,34,0,0.5);}
  50% {transform:scale(1.1); box-shadow:0 0 0 28px rgba(255,34,0,0.15),0 0 30px 12px rgba(255,34,0,0.3);}
  75% {transform:scale(1.8); box-shadow:0 0 0 50px rgba(255,34,0,0.05),0 0 50px 20px rgba(255,34,0,0.15);}
  100%{transform:scale(1);   box-shadow:0 0 8px 3px rgba(255,34,0,0.7),0 0 20px 6px rgba(255,34,0,0.35);}
}
@keyframes dotHover {
  0%  {transform:scale(1) rotate(0deg);}
  20% {transform:scale(1.4) rotate(15deg); box-shadow:0 0 12px 5px rgba(255,34,0,0.9);}
  40% {transform:scale(0.8) rotate(-10deg);}
  60% {transform:scale(1.3) rotate(8deg);}
  80% {transform:scale(0.95) rotate(-4deg);}
  100%{transform:scale(1) rotate(0deg);}
}
.rec-dot.burst { animation:dotRipple 0.7s cubic-bezier(0.4,0,0.2,1) forwards !important; position:relative; z-index:99999; }
.logo-wrap:hover .rec-dot:not(.burst) { animation:dotHover 0.6s ease infinite !important; }
.menu-modal { display:none; position:fixed; inset:0; z-index:8500; background:rgba(6,13,20,0.88); align-items:center; justify-content:center; }
.menu-modal.visible { display:flex; }
.menu-box { width:min(740px,95vw); max-height:85vh; border:1.5px solid var(--green); background:var(--surface); box-shadow:0 0 60px rgba(204,26,26,0.3); display:flex; flex-direction:column; animation:menuIn .25s ease; }
@keyframes menuIn { from{opacity:0;transform:scale(0.96)} to{opacity:1;transform:scale(1)} }
.menu-header { padding:1rem 1.2rem; border-bottom:1px solid var(--green-dark); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.menu-header-title { font-size:0.85rem; letter-spacing:0.14em; text-transform:uppercase; }
.menu-info { padding:1.2rem 1.4rem; border-bottom:1px solid var(--green-dark); display:flex; flex-direction:column; gap:1rem; background:linear-gradient(180deg,rgba(58,5,5,0.3) 0%,transparent 100%); flex-shrink:0; }
.menu-info-logo { display:flex; align-items:center; gap:0.6rem; font-size:1.1rem; font-weight:700; letter-spacing:0.16em; color:var(--green); }
.menu-info-dot { width:12px; height:12px; background:#ff2200; border-radius:50%; box-shadow:0 0 8px 3px rgba(255,34,0,0.6); animation:recblink 4s ease-in-out infinite; }
.menu-info-text { font-size:0.72rem; color:var(--text); line-height:1.9; }
.menu-info-stats { display:flex; border:1px solid var(--green-dark); }
.menu-stat { flex:1; padding:0.6rem 0.5rem; text-align:center; border-right:1px solid var(--green-dark); }
.menu-stat:last-child { border-right:none; }
.menu-stat-val { font-size:1.1rem; color:var(--green); font-weight:700; }
.menu-stat-label { font-size:0.65rem; color:var(--text-dim); letter-spacing:0.12em; margin-top:0.2rem; }
.menu-tabs { display:flex; border-bottom:1px solid var(--green-dark); flex-shrink:0; }
.menu-tab { flex:1; padding:0.7rem 0.3rem; font-family:'Share Tech Mono',monospace; font-size:0.68rem; letter-spacing:0.08em; text-transform:uppercase; background:none; border:none; color:var(--text-dim); cursor:pointer; border-bottom:2px solid transparent; transition:all .15s; text-align:center; }
.menu-tab.active,.menu-tab:hover { color:var(--green); border-bottom-color:var(--green); }
.menu-body { flex:1; overflow-y:auto; min-height:0; }
.menu-body::-webkit-scrollbar { width:3px; }
.menu-body::-webkit-scrollbar-thumb { background:var(--green-dark); }
.menu-section { display:none; }
.menu-section.active { display:block; }
.menu-cam-filters { display:flex; gap:0.35rem; padding:0.7rem 1rem; flex-wrap:wrap; border-bottom:1px solid var(--green-dark); }
.menu-cam-filter { font-family:'Share Tech Mono',monospace; font-size:0.6rem; letter-spacing:0.08em; text-transform:uppercase; background:none; border:1px solid var(--green-dark); color:var(--text-dim); padding:0.22rem 0.55rem; cursor:pointer; transition:all .15s; }
.menu-cam-filter.active { border-color:var(--green); color:var(--green); background:var(--green-dark); }
.menu-cam-grid { display:grid; grid-template-columns:1fr 1fr; }
.menu-cam-item { display:flex; align-items:center; gap:0.8rem; padding:0.65rem 1rem; border-bottom:1px solid var(--green-dark); border-right:1px solid var(--green-dark); text-decoration:none; transition:background .15s; }
.menu-cam-item:nth-child(even) { border-right:none; }
.menu-cam-item:hover { background:var(--green-dark); }
.menu-cam-img { width:72px; height:48px; object-fit:cover; flex-shrink:0; border:1px solid var(--green-dark); }
.menu-cam-info { display:flex; flex-direction:column; gap:0.2rem; }
.menu-cam-name { font-size:0.7rem; color:var(--text); line-height:1.3; }
.menu-cam-meta { font-size:0.58rem; color:var(--text-dim); }
.menu-pts-banner { background:var(--green-dark); border-bottom:1px solid var(--green); padding:0.7rem 1rem; text-align:center; font-size:0.72rem; }
.menu-pts-banner span { color:var(--green); font-size:1rem; font-weight:700; }
.menu-pts-note { font-size:0.6rem; color:var(--text-dim); margin-top:0.25rem; }
.menu-rewards-grid { display:grid; grid-template-columns:1fr 1fr; gap:0.7rem; padding:1rem; }
.menu-reward-card { border:1px solid var(--green-dark); padding:0.8rem; display:flex; flex-direction:column; gap:0.4rem; }
.menu-reward-card:hover { border-color:var(--text-dim); }
.menu-reward-icon { font-size:1.5rem; }
.menu-reward-name { font-size:0.72rem; color:var(--text); }
.menu-reward-desc { font-size:0.62rem; color:var(--text-dim); line-height:1.4; }
.menu-reward-footer { display:flex; align-items:center; justify-content:space-between; margin-top:0.2rem; }
.menu-reward-price { font-size:0.68rem; color:var(--green); }
.menu-reward-btn { font-family:'Share Tech Mono',monospace; font-size:0.6rem; letter-spacing:0.08em; text-transform:uppercase; background:var(--green-dark); color:var(--green); border:1px solid var(--green-dim); padding:0.25rem 0.55rem; cursor:pointer; }
.menu-reward-btn:hover:not(:disabled) { background:#661010; }
.menu-reward-btn:disabled { opacity:0.35; cursor:not-allowed; }
.menu-donate { padding:1.5rem; display:flex; flex-direction:column; gap:1.2rem; }
.menu-donate-intro { font-size:0.74rem; color:var(--text); line-height:1.9; }
.menu-donate-label { font-size:0.62rem; letter-spacing:0.12em; color:var(--text-dim); text-transform:uppercase; }
.menu-donate-amounts { display:grid; grid-template-columns:repeat(3,1fr); gap:0.6rem; }
.menu-donate-btn { font-family:'Share Tech Mono',monospace; font-size:0.78rem; background:var(--green-dark); color:var(--green); border:1px solid var(--green); padding:0.75rem 0.3rem; cursor:pointer; text-align:center; }
.menu-donate-btn:hover { background:#661010; }
.menu-donate-custom { display:flex; gap:0.6rem; }
.menu-donate-input { flex:1; font-family:'Share Tech Mono',monospace; font-size:0.82rem; background:var(--surface2); border:1px solid var(--green-dark); color:var(--green); padding:0.55rem 0.8rem; outline:none; }
.menu-donate-input:focus { border-color:var(--green); }
.menu-donate-note { font-size:0.64rem; color:var(--text-dim); line-height:1.7; border-top:1px solid var(--green-dark); padding-top:1rem; }
.menu-footer { padding:0.8rem 1.2rem; border-top:1px solid var(--green-dark); display:flex; justify-content:flex-end; flex-shrink:0; }
.profile-overlay { display:none; position:fixed; inset:0; z-index:8600; background:rgba(6,13,20,0.80); }
.profile-overlay.visible { display:block; }
.profile-panel { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(0.95); width:min(480px,94vw); background:var(--surface); border:1.5px solid var(--green); box-shadow:0 0 50px rgba(204,26,26,0.3); z-index:8700; opacity:0; pointer-events:none; transition:transform .25s ease,opacity .25s ease; display:flex; flex-direction:column; }
.profile-panel.open { transform:translate(-50%,-50%) scale(1); opacity:1; pointer-events:auto; }
.profile-panel-header { padding:0.9rem 1.2rem; border-bottom:1px solid var(--green-dark); display:flex; align-items:center; justify-content:space-between; }
.profile-panel-title { font-size:0.8rem; letter-spacing:0.14em; text-transform:uppercase; }
.profile-body { padding:1.2rem; display:flex; flex-direction:column; gap:1.2rem; max-height:72vh; overflow-y:auto; }
.profile-body::-webkit-scrollbar { width:3px; }
.profile-body::-webkit-scrollbar-thumb { background:var(--green-dark); }
.profile-current { display:flex; align-items:center; gap:1rem; padding:.8rem; background:#040c18; border:1px solid #1a3050; }
.profile-avatar-large { width:72px; height:72px; border-radius:4px; border:2px solid #cc1a1a; display:flex; align-items:center; justify-content:center; font-size:2.5rem; background:#1a2a3a; flex-shrink:0; transition:all .2s; }
.profile-username { font-size:0.9rem; letter-spacing:0.1em; color:var(--green); }
.profile-userstats { font-size:0.65rem; color:var(--text-dim); line-height:1.8; margin-top:0.3rem; }
.profile-section-label { font-family:'Rajdhani',sans-serif; font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#cc1a1a; border-bottom:1px solid #1a3050; padding-bottom:.4rem; margin-bottom:.1rem; }
.avatar-emoji-grid { display:grid; grid-template-columns:repeat(8,1fr); gap:.35rem; }
.avatar-emoji-btn { font-size:1.5rem; padding:.35rem; text-align:center; border:1.5px solid #0d1a27; background:#040c18; cursor:pointer; border-radius:3px; transition:all .15s; line-height:1; }
.avatar-emoji-btn:hover { border-color:#4a7a9a; background:#0a1825; }
.avatar-emoji-btn.selected { border-color:#cc1a1a; background:#1a0808; box-shadow:0 0 8px rgba(204,26,26,0.4); }
.avatar-color-row { display:flex; gap:.45rem; flex-wrap:wrap; }
.avatar-color-btn { width:34px; height:34px; border-radius:3px; border:2px solid transparent; cursor:pointer; transition:all .15s; }
.avatar-color-btn:hover { transform:scale(1.1); }
.avatar-color-btn.selected { border-color:#fff; box-shadow:0 0 8px rgba(255,255,255,0.4); }
.profile-pin-row { display:flex; align-items:center; justify-content:space-between; border:1px solid #1a3050; padding:.7rem .9rem; background:#040c18; }
.profile-pin-label { font-family:'Rajdhani',sans-serif; font-size:.85rem; font-weight:700; color:#c8dce8; letter-spacing:.05em; }
.profile-pin-desc { font-family:'Rajdhani',sans-serif; font-size:.72rem; color:#4a7a9a; margin-top:.2rem; }
.toggle-switch { position:relative; width:40px; height:22px; flex-shrink:0; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; background:var(--green-dark); border:1px solid var(--green-dim); cursor:pointer; border-radius:22px; transition:background .2s; }
.toggle-slider::before { content:''; position:absolute; width:16px; height:16px; left:2px; top:2px; background:var(--green-dim); border-radius:50%; transition:transform .2s,background .2s; }
.toggle-switch input:checked + .toggle-slider { background:#1a2a3a; border-color:var(--green); }
.toggle-switch input:checked + .toggle-slider::before { transform:translateX(18px); background:var(--green); }
.profile-footer { padding:0.8rem 1.2rem; border-top:1px solid var(--green-dark); display:flex; gap:0.6rem; justify-content:flex-end; }

/* ── MESSAGES ── */

.msg-btn-ticker {
  display: flex; align-items: center; gap: 6px;
  align-self: flex-end;
  background: rgba(10,21,32,0.95); color: #8aa0b4;
  border: 1px solid #1a3050; border-bottom: none;
  font-family: 'Rajdhani', sans-serif; font-size: .65rem; font-weight: 600;
  letter-spacing: .1em; padding: .35rem 1rem; cursor: pointer;
  transition: all .15s; text-transform: uppercase; backdrop-filter: blur(4px);
  margin-right: 1rem;
}
.msg-btn-ticker:hover { color: #e8eef4; border-color: #4a6a8a; }
@media (max-width: 768px) { .msg-btn-ticker { display: none; } }

/* Botón mensajes original — oculto, sustituido por msg-btn-ticker */
.msg-btn {
  position: fixed; bottom: 3.5rem; right: 1.2rem; z-index: 300;
  font-family: 'Rajdhani', sans-serif; font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--surface); color: var(--text);
  border: 1.5px solid var(--green); padding: 0.5rem 0.9rem;
  cursor: pointer; transition: all .2s;
  box-shadow: 0 0 12px rgba(204,26,26,0.3);
}
.msg-btn:hover { background: var(--green-dark); box-shadow: 0 0 20px rgba(204,26,26,0.5); }
.msg-count {
  display: inline-block; background: var(--green); color: #000;
  font-size: 0.6rem; border-radius: 50%; width: 16px; height: 16px;
  text-align: center; line-height: 16px; margin-left: 0.3rem; font-weight: 700;
}
.msg-modal { display:none; position:fixed; inset:0; z-index:7800; background:rgba(6,13,20,0.90); align-items:flex-end; justify-content:flex-end; padding:1rem; }
.msg-modal.visible { display:flex; }
.msg-panel {
  width: min(420px, 95vw); height: min(560px, 85vh);
  background: var(--surface); border: 1.5px solid var(--green);
  box-shadow: 0 0 40px rgba(204,26,26,0.25);
  display: flex; flex-direction: column;
  animation: menuIn .2s ease;
}
.msg-header { padding: 0.8rem 1rem; border-bottom: 1px solid var(--green-dark); display:flex; align-items:center; justify-content:space-between; flex-shrink:0; }
.msg-header-title { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; }
.msg-header-cost { font-size: 0.6rem; color: var(--text-dim); letter-spacing: 0.06em; }
.msg-feed { flex:1; overflow-y:auto; padding: 0.8rem; display:flex; flex-direction:column; gap:0.6rem; }
.msg-feed::-webkit-scrollbar { width:3px; }
.msg-feed::-webkit-scrollbar-thumb { background:var(--green-dark); }
.msg-empty { font-size:0.7rem; color:var(--text-dim); text-align:center; padding:2rem; letter-spacing:0.08em; animation:pulse2 1.5s infinite; }
.msg-bubble {
  border: 1px solid var(--green-dark); padding: 0.65rem 0.8rem;
  display: flex; flex-direction: column; gap: 0.3rem;
  transition: border-color .15s;
}
.msg-bubble:hover { border-color: var(--text-dim); }
.msg-bubble-header { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; }
.msg-bubble-user { display:flex; align-items:center; gap:0.4rem; }
.msg-bubble-avatar { width:20px; height:20px; border-radius:50%; border:1px solid var(--green-dark); display:flex; align-items:center; justify-content:center; font-size:0.7rem; flex-shrink:0; }
.msg-bubble-name { font-size:0.68rem; color:var(--text); font-weight:600; letter-spacing:0.06em; }
.msg-bubble-time { font-size:0.65rem; color:var(--text-dim); letter-spacing:0.04em; }
.msg-bubble-text { font-size:0.74rem; color:var(--text); line-height:1.6; letter-spacing:0.02em; }
.msg-bubble-loc { font-size:0.58rem; color:var(--text-dim); letter-spacing:0.06em; }
.msg-compose { padding:0.8rem; border-top:1px solid var(--green-dark); display:flex; flex-direction:column; gap:0.5rem; flex-shrink:0; }
.msg-compose-top { display:flex; gap:0.5rem; align-items:flex-start; }
.msg-textarea {
  flex:1; font-family:'Share Tech Mono',monospace; font-size:0.74rem;
  background: var(--surface2); border: 1px solid var(--green-dark);
  color: var(--green); padding: 0.5rem 0.6rem; outline:none; resize:none;
  height: 58px; transition: border-color .15s; line-height:1.5;
}
.msg-textarea:focus { border-color:var(--green); }
.msg-textarea::placeholder { color:var(--green-dark); }
.msg-send-btn {
  font-family:'Share Tech Mono',monospace; font-size:0.68rem; letter-spacing:0.08em;
  text-transform:uppercase; background:var(--green-dark); color:var(--green);
  border:1px solid var(--green); padding:0.4rem 0.7rem; cursor:pointer;
  transition:background .15s; white-space:nowrap; align-self:stretch;
  display:flex; align-items:center; justify-content:center;
}
.msg-send-btn:hover:not(:disabled) { background:#661010; }
.msg-send-btn:disabled { opacity:0.35; cursor:not-allowed; }
.msg-compose-info { font-size:0.58rem; color:var(--text-dim); letter-spacing:0.06em; display:flex; justify-content:space-between; }
.msg-pts-warning { color:#ff4400; }

/* ── EASTER EGG MARKERS ── */
.egg-overlay {
  position: absolute; inset: 0; pointer-events: none; z-index: 50; overflow: hidden;
}
.egg-marker {
  position: absolute; pointer-events: all; cursor: pointer;
  display: flex; flex-direction: column; align-items: center;
  animation: eggFloat 6s ease-in-out infinite;
  transform-origin: center bottom;
}
.egg-marker.fading { animation: eggFade 0.4s ease forwards; }
@keyframes eggFloat {
  0%,100% { transform: translateY(0px) scale(1); }
  50%      { transform: translateY(-6px) scale(1.05); }
}
@keyframes eggFade {
  0%   { transform: scale(1); opacity: 1; }
  50%  { transform: scale(1.4); opacity: 0.8; }
  100% { transform: scale(0); opacity: 0; }
}
@keyframes eggAppear {
  0%   { transform: scale(0) translateY(20px); opacity: 0; }
  70%  { transform: scale(1.15) translateY(-3px); opacity: 1; }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
.egg-pin {
  width: 36px; height: 36px; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg); border: 2px solid rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(6,13,20,0.5), 0 0 0 0 rgba(204,26,26,0.6);
  animation: eggFloat 6s ease-in-out infinite, eggPulse 2.5s ease infinite;
  position: relative;
}
@keyframes eggPulse {
  0%  { box-shadow: 0 4px 12px rgba(6,13,20,0.5), 0 0 0 0 rgba(204,26,26,0.7); }
  70% { box-shadow: 0 4px 12px rgba(6,13,20,0.5), 0 0 0 14px rgba(204,26,26,0); }
  100%{ box-shadow: 0 4px 12px rgba(6,13,20,0.5), 0 0 0 0 rgba(204,26,26,0); }
}
.egg-pin-inner {
  transform: rotate(45deg); font-size: 1rem; line-height: 1;
}
.egg-pin-tail {
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid currentColor;
  margin-top: -2px;
  transform: rotate(45deg) translateX(5px) translateY(-5px);
  position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%);
  filter: drop-shadow(0 2px 2px rgba(6,13,20,0.4));
}
.egg-ripple {
  position: absolute; width: 36px; height: 36px; border-radius: 50%;
  border: 1.5px solid rgba(204,26,26,0.5);
  animation: eggRippleOut 2.5s ease infinite;
  top: 0; left: 0;
}
.egg-ripple:nth-child(2) { animation-delay: 0.8s; }
@keyframes eggRippleOut {
  0%  { transform: scale(1); opacity: 0.8; }
  100%{ transform: scale(2.5); opacity: 0; }
}
.egg-popup {
  position: absolute; bottom: 54px; left: 50%; transform: translateX(-50%);
  background: rgba(8,0,0,0.97); border: 1.5px solid var(--green);
  padding: 0.6rem 0.8rem; min-width: 160px; max-width: 220px;
  box-shadow: 0 0 20px rgba(204,26,26,0.3);
  pointer-events: none; display: none;
  white-space: normal; z-index: 10;
}
.egg-marker:hover .egg-popup { display: block; }
.egg-popup::after {
  content: ''; position: absolute; bottom: -7px; left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 7px solid var(--green);
}
.egg-popup-user { font-size: 0.58rem; color: var(--text-dim); letter-spacing: 0.1em; margin-bottom: 0.3rem; display:flex; align-items:center; gap:0.3rem; }
.egg-popup-text { font-size: 0.7rem; color: var(--text); line-height: 1.5; letter-spacing: 0.02em; }
.egg-popup-hint { font-size: 0.65rem; color: #661010; letter-spacing: 0.08em; margin-top: 0.4rem; }

/* ── MOBILE & PWA ── */
:root { --nav-h: 68px; }
.mobile-nav { display:none; position:fixed; bottom:0; left:0; right:0; height:var(--nav-h); z-index:400; background:var(--surface); border-top:1.5px solid var(--green-dark); grid-template-columns:repeat(5,1fr); align-items:stretch; }
.mobile-nav-btn { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; background:none; border:none; color:rgba(255,255,255,0.4); font-family:'Rajdhani',sans-serif; font-size:.62rem; font-weight:700; letter-spacing:.07em; text-transform:uppercase; cursor:pointer; transition:color .15s,background .15s; padding:0; position:relative; }
.mobile-nav-btn:active { background:var(--green-dark); }
.mobile-nav-btn.active { color:#cc1a1a; } .mobile-nav-btn.active svg { stroke:#cc1a1a; }
.mobile-nav-btn .nav-icon { width:22px; height:22px; flex-shrink:0; }
.mobile-nav-badge { position:absolute; top:6px; right:calc(50% - 16px); background:var(--green); color:#000; font-size:.5rem; border-radius:50%; width:14px; height:14px; display:flex; align-items:center; justify-content:center; font-weight:700; pointer-events:none; }
.fab { display:none; position:fixed; bottom:calc(var(--nav-h) + 34px); right:16px; width:56px; height:56px; border-radius:50%; background:#cc1a1a; border:none; color:#fff; font-size:1.6rem; cursor:pointer; z-index:350; box-shadow:0 4px 16px rgba(204,26,26,.5); align-items:center; justify-content:center; transition:transform .15s; }
.fab:active { transform:scale(.93); }
@media (max-width:768px) {
  .mobile-nav { grid-template-columns: repeat(5, 1fr); display:grid; }
  .fab { display:flex; }
  .msg-btn { display:none; }
  .msg-btn-ticker { display:flex; }
  body { padding-bottom:0; }
  .topbar { padding:0 .5rem; gap:.3rem; height:44px; flex-wrap:nowrap; overflow:hidden; }
  .logo-wrap { gap:.25rem; flex-shrink:0; }
  .site-title { font-size:.8rem; letter-spacing:.12em; white-space:nowrap; }
  .rec-dot { width:7px; height:7px; }
  .timecode-wrap { display:none; }
  #btnAdd { display:none; }
  #btnAddMobile { display:none; }
  #btnDatos { display:none; }
  #btnClanes { display:none; }
  #btnFriends { display:none; }
  #btnLogin { display:none; }

  .user-badge { gap:.2rem; padding:.15rem .3rem; }
  #userNameDisplay { display:none; }
  #userPointsDisplay { font-size:.58rem; letter-spacing:.04em; white-space:nowrap; }
  .user-avatar { width:22px; height:22px; font-size:.7rem; flex-shrink:0; }
  .map-wrap { border:none; }
  #mobLogoOverlay { display: flex !important; }
  #mapanal-trigger { display: none !important; }
  #mobTutorialBar { display: block !important; }
  #mainWrap { margin-left: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; height: calc(100vh - var(--nav-h) - 36px); }
  .nodo-btn-fixed { display: none !important; }
  .mob-sheet { bottom: calc(var(--nav-h) + 36px) !important; }
  #mainWrap.sub-open { margin-left: 0 !important; }
  .topbar { display: none !important; }
  .cam-id { font-size:.55rem; letter-spacing:.1em; line-height:1.3; }
  .timecode { font-size:.5rem; letter-spacing:.06em; line-height:1.3; }
  .datecode { font-size:.48rem; letter-spacing:.05em; line-height:1.3; }
  .panel { width:100% !important; top:44px !important; bottom:var(--nav-h) !important; height:auto !important; border-left:none !important; border-top:1.5px solid var(--green-dark); }
  .auth-box { width:100vw; border-left:none; border-right:none; }
  .auth-modal { align-items:flex-end; }
  .menu-box { width:100vw; border-left:none; border-right:none; }
  .menu-modal { align-items:flex-end; }
  .msg-panel { width:100vw; height:85vh; border-left:none; border-right:none; }
  .msg-modal { padding:0; align-items:flex-end; }
  .profile-panel { width:100vw; top:44px; bottom:var(--nav-h); left:0; right:0; transform:translateY(110%) !important; border-left:none; border-right:none; max-height:calc(100vh - 44px - var(--nav-h)); overflow-y:auto; }
  .profile-panel.open { transform:translateY(0) !important; }
  .news-box { width:100vw; border-left:none; border-right:none; }
  .news-modal { align-items:flex-end; }
  .menu-rewards-grid { grid-template-columns:1fr; }
  .menu-cam-grid { grid-template-columns:1fr; }
  .menu-cam-item { border-right:none !important; }
  #userNameDisplay { display:none; }
}
@media (max-width:380px) { .site-title{font-size:.75rem} .mobile-nav-btn{font-size:.45rem} .mobile-nav-btn .nav-icon{font-size:1.1rem} }
@supports (padding-bottom:env(safe-area-inset-bottom)) {
  body { padding-bottom:0; }
  .mobile-nav { grid-template-columns: repeat(5, 1fr); padding-bottom:env(safe-area-inset-bottom); height:calc(var(--nav-h) + env(safe-area-inset-bottom)); }
  #mainWrap { height: calc(100vh - var(--nav-h) - env(safe-area-inset-bottom) - 36px) !important; }
  #mobTutorialBar { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }
  .mob-sheet { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 36px) !important; }
}

/* ── LEGEND ── */
.map-legend-btn {
  position: absolute; bottom: 36px; left: 10px; z-index: 60;
  font-family: 'Rajdhani', sans-serif; font-size: 0.6rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--green-dark); padding: 0.3rem 0.6rem;
  cursor: pointer; transition: all .15s;
}
.map-legend-btn:hover { border-color: var(--green); }
/* map-legend ya no es flotante, vive en mcp-sub-leyenda */
.map-legend-title {
  font-size: 0.65rem; letter-spacing: 0.14em; color: var(--green);
  text-transform: uppercase; border-bottom: 1px solid var(--border);
  padding-bottom: 0.35rem; margin-bottom: 0.1rem; font-weight: 700;
}
.map-legend-item {
  display: flex; align-items: center; gap: 0.55rem;
  font-size: 0.68rem; color: var(--text); letter-spacing: 0.06em;
}
.map-legend-dot {
  width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid rgba(255,255,255,0.15);
}
.map-legend-pin {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  background: #fff; border: 2px solid #ccc;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
@media (max-width: 768px) {
  .map-legend { bottom: calc(var(--nav-h) + 108px); right: 10px; }
}

/* ── FAB MENU ── */
.fab-menu { display:none; position:fixed; bottom:calc(var(--nav-h) + 100px); right:16px; z-index:349; flex-direction:column; gap:0.5rem; align-items:flex-end; }
.fab-menu.open { display:flex; }
.fab-menu-item {
  display:flex; align-items:center; gap:0.6rem;
  font-family:'Share Tech Mono',monospace; font-size:0.62rem; letter-spacing:0.08em; text-transform:uppercase;
  background:var(--surface); color:rgba(255,255,255,0.45); border:1px solid var(--green-dark);
  padding:0.45rem 0.8rem; cursor:pointer; white-space:nowrap;
  box-shadow:0 2px 12px rgba(6,13,20,0.5); transition:border-color .15s;
}
.fab-menu-item:active { border-color:var(--green); background:var(--green-dark); }
.fab-menu-item .fab-menu-icon { width:18px; height:18px; flex-shrink:0; color:rgba(255,255,255,0.45); }
.fab.active { transform:rotate(45deg); }
@supports (padding-bottom:env(safe-area-inset-bottom)) {
  .fab-menu { bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) + 100px); }
}

/* ── MODO PATRULLA ── */
.patrol-btn {
  font-family: 'Rajdhani', sans-serif; font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  background: transparent; color: var(--text-dim);
  border: 1px solid var(--green-dark); padding: 0.4rem 0.9rem;
  cursor: pointer; transition: all .2s; display: flex; align-items: center; gap: .5rem;
}
.patrol-btn:hover { border-color: var(--green); color: var(--green); }
.patrol-btn.active { background: #1a3050; border-color: var(--green); color: var(--green); animation: patrolPulse 1.5s ease infinite; }
@keyframes patrolPulse { 0%,100%{box-shadow:0 0 0 0 rgba(204,26,26,0.4)} 50%{box-shadow:0 0 0 6px rgba(204,26,26,0)} }

.patrol-dot { width:8px; height:8px; border-radius:50%; background:var(--green-dim); flex-shrink:0; transition:background .2s; }
.patrol-btn.active .patrol-dot { background:var(--green); animation: dotBlink 1s step-end infinite; }
@keyframes dotBlink { 0%,100%{opacity:1} 50%{opacity:0} }

.patrol-alert {
  position: fixed; top: 60px; left: 50%; transform: translateX(-50%);
  z-index: 9000; background: #0d1a27; border: 1px solid var(--green);
  padding: 0; min-width: 280px; max-width: 360px;
  box-shadow: 0 0 30px rgba(204,26,26,0.4); animation: alertSlide .3s ease;
  overflow: hidden;
}
@keyframes alertSlide { from{opacity:0;transform:translateX(-50%) translateY(-12px)} to{opacity:1;transform:translateX(-50%) translateY(0)} }
.patrol-alert-bar { height: 3px; background: var(--green); animation: alertBar 5s linear forwards; }
@keyframes alertBar { from{width:100%} to{width:0%} }
.patrol-alert-body { padding: .9rem 1.1rem; }
.patrol-alert-title { font-size: .65rem; letter-spacing: .18em; color: var(--green); margin-bottom: .5rem; }
.patrol-alert-cam { font-size: .78rem; letter-spacing: .08em; color: var(--text); margin-bottom: .3rem; }
.patrol-alert-dist { font-size: .6rem; color: var(--text-dim); letter-spacing: .08em; }
.patrol-alert-close { position:absolute; top:.5rem; right:.7rem; background:none; border:none; color:var(--text-dim); cursor:pointer; font-size:.8rem; font-family:'Share Tech Mono',monospace; }

.patrol-status {
  position: fixed; bottom: 70px; left: 50%; transform: translateX(-50%);
  z-index: 300; background: rgba(8,0,0,0.9); border: 1px solid var(--green-dark);
  padding: .35rem .8rem; font-size: .58rem; letter-spacing: .1em; color: var(--text-dim);
  pointer-events: none; white-space: nowrap;
}
@media (max-width:768px) {
  .patrol-status { bottom: calc(var(--nav-h) + 8px); }
  .patrol-btn { font-size: .62rem; padding: .35rem .7rem; }
}

/* ── PATROL TRAIL ── */
#patrolCanvas {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 55;
}
.patrol-stats-bar {
  position: fixed; top: 50px; right: 10px; z-index: 300;
  background: rgba(8,0,0,0.92); border: 1px solid var(--green-dark);
  padding: .4rem .7rem; font-size: .58rem; letter-spacing: .1em;
  color: var(--text-dim); display: none; flex-direction: column; gap: .2rem;
  min-width: 130px;
}
.patrol-stats-bar.active { display: flex; }
.patrol-stats-bar .psb-title { color: var(--green); letter-spacing: .14em; font-size: .55rem; margin-bottom: .1rem; }
.patrol-stats-bar .psb-val { color: var(--text); }
@media (max-width: 768px) {
  .patrol-stats-bar {
    top: 46px; left: 0; right: 0;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: unset;
    padding: 0;
    background: rgba(4,10,20,.92);
    border: none;
    border-bottom: 1px solid #1a3050;
    backdrop-filter: blur(6px);
    font-size: .68rem;
  }
  .patrol-stats-bar .psb-title { display: none; }
  .patrol-stats-bar > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: .32rem .2rem;
    border-right: 1px solid #1a3050;
    gap: .05rem;
    font-size: .58rem;
    letter-spacing: .06em;
    color: #6a9ab8;
  }
  .patrol-stats-bar > div:last-child { border-right: none; }
  .patrol-stats-bar .psb-val {
    font-size: .78rem;
    font-weight: 900;
    color: #fff;
    letter-spacing: .04em;
  }
  .patrol-stats-bar .psb-stop-btn {
    flex: 0 0 auto;
    background: none;
    border: none;
    border-left: 1px solid #cc1a1a44;
    color: #cc1a1a;
    font-family: 'Rajdhani', sans-serif;
    font-size: .62rem;
    font-weight: 800;
    letter-spacing: .1em;
    padding: .32rem .7rem;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: .3rem;
  }
}

/* ── BONUS POINTS ── */
.bonus-pin {
  position: absolute; transform: translate(-50%, -50%);
  z-index: 57; pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  animation: bonusFloat 2.5s ease-in-out infinite;
}
@keyframes bonusFloat { 0%,100%{transform:translate(-50%,-50%) translateY(0)} 50%{transform:translate(-50%,-50%) translateY(-6px)} }
.bonus-pin-icon {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(8,0,0,0.9); border: 2px solid gold;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; box-shadow: 0 0 12px rgba(255,215,0,0.5);
}
.bonus-pin-icon.collected { border-color: #333; opacity: 0.35; animation: none; filter: grayscale(1); }
.bonus-pin-label {
  font-family: 'Rajdhani', sans-serif; font-size: .5rem;
  letter-spacing: .08em; color: gold; white-space: nowrap;
  text-shadow: 0 0 6px rgba(255,215,0,0.8);
}
.bonus-pin-pts {
  font-family: 'Rajdhani', sans-serif; font-size: .55rem;
  color: #fff; background: gold; padding: 1px 5px; border-radius: 2px;
  color: #000; font-weight: bold;
}

.bonus-alert {
  position: fixed; top: 60px; left: 50%; transform: translateX(-50%);
  z-index: 9001; background: #0a0800; border: 1px solid gold;
  padding: 0; min-width: 260px; box-shadow: 0 0 30px rgba(255,215,0,0.3);
  animation: alertSlide .3s ease;
}
.bonus-alert-bar { height: 3px; background: gold; animation: alertBar 4s linear forwards; }
.bonus-alert-body { padding: .8rem 1rem; }
.bonus-alert-title { font-size: .65rem; letter-spacing: .18em; color: gold; margin-bottom: .4rem; }
.bonus-alert-name { font-size: .82rem; letter-spacing: .08em; color: #fff; margin-bottom: .2rem; }
.bonus-alert-pts { font-size: .68rem; color: gold; letter-spacing: .1em; }
.bonus-alert-close { position:absolute; top:.5rem; right:.7rem; background:none; border:none; color:gold; cursor:pointer; font-size:.8rem; font-family:'Share Tech Mono',monospace; }

/* ── CAMERA INFO MODAL ── */
.caminfo-modal {
  position: fixed; inset: 0; z-index: 8000; background: rgba(0,0,0,0.7);
  display: none; align-items: center; justify-content: center;
}
.caminfo-modal.visible { display: flex; }
.caminfo-box {
  background: var(--surface); border: 1px solid var(--green-dark);
  width: min(420px, 94vw); max-height: 80vh; overflow-y: auto;
  box-shadow: 0 0 40px rgba(0,0,0,0.8); animation: slideUp .25s ease;
}
.caminfo-header {
  padding: .9rem 1.1rem; border-bottom: 1px solid var(--green-dark);
  display: flex; align-items: center; justify-content: space-between;
}
.caminfo-title { font-size: .82rem; letter-spacing: .12em; color: var(--green); }
.caminfo-body { padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: .8rem; }
.caminfo-row { display: flex; flex-direction: column; gap: .2rem; }
.caminfo-label { font-size: .55rem; letter-spacing: .14em; color: var(--text-dim); text-transform: uppercase; }
.caminfo-val { font-size: .75rem; letter-spacing: .06em; color: var(--text); }
.caminfo-author { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; background: var(--surface2); border: 1px solid var(--green-dark); }
.caminfo-author-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; border: 1px solid var(--green-dark); flex-shrink: 0; }
.caminfo-verify { display: flex; gap: .6rem; padding-top: .4rem; }
.caminfo-verify-btn {
  flex: 1; font-family: 'Rajdhani', sans-serif; font-size: .65rem;
  letter-spacing: .1em; padding: .5rem; cursor: pointer;
  border: 1px solid; transition: all .15s; text-align: center;
}
.caminfo-verify-btn.yes { color: #44ff44; border-color: #1a4a1a; background: none; }
.caminfo-verify-btn.yes:hover { background: #0a2a0a; }
.caminfo-verify-btn.no { color: #ff4444; border-color: #4a1a1a; background: none; }
.caminfo-verify-btn.no:hover { background: #2a0a0a; }
.caminfo-verify-btn:disabled { opacity: .4; cursor: default; }
.caminfo-verify-counts { display: flex; gap: .4rem; font-size: .6rem; justify-content: center; padding-top: .2rem; }
.findcam-btn.active { color: var(--green); border-color: var(--green); background: var(--green-dark); }
.findcam-btn:hover { border-color: var(--green); color: var(--green); }
@media (max-width: 768px) {
  .findcam-btn { bottom: calc(var(--nav-h) + 62px); font-size: .52rem; padding: .25rem .5rem; }
}

/* ── CAMERA SEARCH MODAL ── */
.camsearch-modal {
  position: fixed; inset: 0; z-index: 7800; background: rgba(6,13,20,0.80);
  display: none; align-items: flex-end; justify-content: center;
}
.camsearch-modal.visible { display: flex; }
.camsearch-box {
  background: var(--surface); border: 1px solid var(--green-dark);
  border-bottom: none; width: min(480px, 100vw);
  max-height: 80vh; display: flex; flex-direction: column;
  animation: slideUp .25s ease;
}
.camsearch-header {
  padding: .8rem 1rem; border-bottom: 1px solid var(--green-dark);
  display: flex; align-items: center; gap: .6rem; flex-shrink: 0;
}
.camsearch-input {
  flex: 1; font-family: 'Rajdhani', sans-serif; font-size: .75rem;
  background: var(--surface2); border: 1px solid var(--green-dark);
  color: var(--text); padding: .4rem .7rem; letter-spacing: .06em;
  outline: none;
}
.camsearch-input:focus { border-color: var(--green); }
.camsearch-list { overflow-y: auto; flex: 1; }
.camsearch-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .65rem 1rem; border-bottom: 1px solid #0d1a27;
  cursor: pointer; transition: background .1s;
}
.camsearch-item:hover { background: var(--surface2); }
.camsearch-icon { font-size: 1.1rem; flex-shrink: 0; }
.camsearch-item-name { font-size: .7rem; letter-spacing: .06em; color: var(--text); }
.camsearch-item-meta { font-size: .58rem; color: var(--text-dim); margin-top: .1rem; letter-spacing: .04em; }
.camsearch-empty { padding: 1.5rem; text-align: center; font-size: .65rem; color: var(--text-dim); letter-spacing: .1em; }

/* ── FRIENDS SYSTEM ── */
.friends-modal {
  position: fixed; inset: 0; z-index: 8200; background: rgba(6,13,20,0.80);
  display: none; align-items: flex-end; justify-content: center;
}
.friends-modal.visible { display: flex; }
.friends-box {
  background: var(--surface); border: 1px solid var(--green-dark);
  border-bottom: none; width: min(480px, 100vw);
  max-height: 85vh; display: flex; flex-direction: column;
  animation: slideUp .25s ease;
}
.friends-tabs {
  display: flex; border-bottom: 1px solid var(--green-dark); flex-shrink: 0;
}
.friends-tab {
  flex: 1; font-family: 'Rajdhani', sans-serif; font-size: .6rem;
  letter-spacing: .1em; padding: .6rem; background: none; border: none;
  color: var(--text-dim); cursor: pointer; border-bottom: 2px solid transparent;
  transition: all .15s; position: relative;
}
.friends-tab.active { color: var(--green); border-bottom-color: var(--green); }
.friends-tab .badge {
  position: absolute; top: 4px; right: 8px;
  background: #cc1a1a; color: #fff; font-size: .45rem;
  width: 14px; height: 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.friends-content { flex: 1; overflow-y: auto; }
.friends-search-wrap { padding: .7rem 1rem; border-bottom: 1px solid var(--green-dark); flex-shrink: 0; display: flex; gap: .5rem; }
.friends-search {
  flex: 1; font-family: 'Rajdhani', sans-serif; font-size: .72rem;
  background: var(--surface2); border: 1px solid var(--green-dark);
  color: var(--text); padding: .4rem .7rem; letter-spacing: .06em; outline: none;
}
.friends-search:focus { border-color: var(--green); }
.friend-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .7rem 1rem; border-bottom: 1px solid #0d1a27;
}
.friend-avatar {
  width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; border: 1px solid var(--green-dark);
}
.friend-name { font-size: .72rem; letter-spacing: .06em; color: var(--text); }
.friend-meta { font-size: .56rem; color: var(--text-dim); margin-top: .1rem; }
.friend-actions { margin-left: auto; display: flex; gap: .4rem; flex-shrink: 0; }
.friend-btn {
  font-family: 'Rajdhani', sans-serif; font-size: .56rem;
  letter-spacing: .08em; padding: .3rem .55rem; cursor: pointer;
  border: 1px solid; transition: all .15s; white-space: nowrap;
}
.friend-btn.add { color: var(--green); border-color: var(--green-dark); background: none; }
.friend-btn.add:hover { background: var(--green-dark); }
.friend-btn.accept { color: #44ff44; border-color: #1a4a1a; background: none; }
.friend-btn.accept:hover { background: #0a2a0a; }
.friend-btn.reject { color: #ff4444; border-color: #4a1a1a; background: none; }
.friend-btn.reject:hover { background: #2a0a0a; }
.friend-btn.remove { color: var(--text-dim); border-color: #333; background: none; }
.friend-btn.remove:hover { color: #ff4444; border-color: #4a1a1a; }
.friend-btn:disabled { opacity: .4; cursor: default; }
.friend-pending-label { font-size: .56rem; color: var(--text-dim); letter-spacing: .08em; }
.friends-empty { padding: 2rem; text-align: center; font-size: .62rem; color: var(--text-dim); letter-spacing: .1em; }
.friends-notif-dot {
  position: absolute; top: -2px; right: -2px; width: 8px; height: 8px;
  background: #cc1a1a; border-radius: 50%; display: none;
}

/* ══════════════════════════════════════
   CLANES
══════════════════════════════════════ */
.clanes-modal {
  position:fixed;inset:0;z-index:8300;background:rgba(0,0,0,.78);
  display:none;align-items:flex-end;justify-content:center;
}
.clanes-modal.visible{display:flex;}
.clanes-box {
  background:var(--surface);border:1px solid var(--green-dark);border-bottom:none;
  width:min(520px,100vw);max-height:88vh;display:flex;flex-direction:column;
  animation:slideUp .25s ease;
}
.clanes-tabs{display:flex;border-bottom:1px solid var(--green-dark);flex-shrink:0;}
.clanes-tab{
  flex:1;font-family:'Share Tech Mono',monospace;font-size:.58rem;
  letter-spacing:.1em;padding:.55rem .3rem;background:none;border:none;
  color:var(--text-dim);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;
}
.clanes-tab.active{color:var(--green);border-bottom-color:var(--green);}
.clanes-content{flex:1;overflow-y:auto;display:flex;flex-direction:column;}

/* clan header card */
.clan-hero{
  padding:1rem 1.2rem;border-bottom:1px solid var(--green-dark);
  display:flex;align-items:center;gap:.8rem;background:var(--surface2);flex-shrink:0;
}
.clan-tag-badge{
  font-size:1rem;font-family:'Share Tech Mono',monospace;letter-spacing:.06em;
  padding:.3rem .6rem;border:1px solid var(--green);color:var(--green);
  background:var(--surface);min-width:54px;text-align:center;
}
.clan-hero-name{font-size:.85rem;letter-spacing:.08em;color:var(--text);}
.clan-hero-meta{font-size:.58rem;color:var(--text-dim);margin-top:.15rem;}

/* clan list */
.clan-list-item{
  display:flex;align-items:center;gap:.7rem;
  padding:.7rem 1rem;border-bottom:1px solid #0d1a27;cursor:pointer;transition:background .1s;
}
.clan-list-item:hover{background:var(--surface2);}
.clan-item-tag{
  font-family:'Share Tech Mono',monospace;font-size:.7rem;
  padding:.2rem .45rem;border:1px solid var(--green-dark);color:var(--green);
  min-width:48px;text-align:center;flex-shrink:0;
}
.clan-item-name{font-size:.72rem;letter-spacing:.06em;color:var(--text);}
.clan-item-meta{font-size:.55rem;color:var(--text-dim);margin-top:.1rem;}

/* chat */
.clan-chat{display:flex;flex-direction:column;flex:1;min-height:0;}
.clan-chat-msgs{flex:1;overflow-y:auto;padding:.6rem .8rem;display:flex;flex-direction:column;gap:.5rem;}
.clan-chat-msg{display:flex;gap:.5rem;align-items:flex-start;}
.clan-chat-avatar{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;border:1px solid var(--green-dark);flex-shrink:0;margin-top:.1rem;}
.clan-chat-bubble{background:var(--surface2);padding:.35rem .6rem;border-left:2px solid var(--green-dark);max-width:85%;}
.clan-chat-name{font-size:.52rem;color:var(--text-dim);letter-spacing:.06em;margin-bottom:.15rem;}
.clan-chat-text{font-size:.68rem;color:var(--text);letter-spacing:.03em;word-break:break-word;}
.clan-chat-input-wrap{display:flex;gap:.4rem;padding:.5rem .8rem;border-top:1px solid var(--green-dark);flex-shrink:0;}
.clan-chat-input{
  flex:1;font-family:'Share Tech Mono',monospace;font-size:.68rem;
  background:var(--surface2);border:1px solid var(--green-dark);
  color:var(--text);padding:.35rem .6rem;outline:none;
}
.clan-chat-input:focus{border-color:var(--green);}

/* ranking */
.clan-rank-row{display:flex;align-items:center;gap:.6rem;padding:.55rem 1rem;border-bottom:1px solid #0d1a27;}
.clan-rank-pos{font-size:.65rem;color:var(--text-dim);width:18px;text-align:center;flex-shrink:0;}
.clan-rank-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.85rem;border:1px solid var(--green-dark);flex-shrink:0;}
.clan-rank-name{flex:1;font-size:.68rem;letter-spacing:.06em;}
.clan-rank-pts{font-size:.6rem;color:var(--green);}

/* misiones */
.mision-item{padding:.75rem 1rem;border-bottom:1px solid #0d1a27;}
.mision-title{font-size:.7rem;letter-spacing:.08em;color:var(--text);margin-bottom:.3rem;}
.mision-desc{font-size:.58rem;color:var(--text-dim);margin-bottom:.5rem;}
.mision-bar-wrap{background:#0d1a27;height:6px;border:1px solid var(--green-dark);}
.mision-bar{height:100%;background:var(--green);transition:width .3s;}
.mision-progress{font-size:.55rem;color:var(--text-dim);margin-top:.2rem;text-align:right;}
.mision-done{font-size:.6rem;color:gold;letter-spacing:.1em;}

/* create form */
.clan-create-form{padding:1rem 1.2rem;display:flex;flex-direction:column;gap:.7rem;}
.clan-input{
  font-family:'Share Tech Mono',monospace;font-size:.72rem;
  background:var(--surface2);border:1px solid var(--green-dark);
  color:var(--text);padding:.45rem .7rem;outline:none;width:100%;box-sizing:border-box;
}
.clan-input:focus{border-color:var(--green);}
.clan-input-label{font-size:.55rem;letter-spacing:.12em;color:var(--text-dim);margin-bottom:.2rem;}
.clan-submit-btn{
  font-family:'Share Tech Mono',monospace;font-size:.65rem;letter-spacing:.12em;
  padding:.5rem;background:none;border:1px solid var(--green);color:var(--green);
  cursor:pointer;transition:all .15s;
}
.clan-submit-btn:hover{background:var(--green-dark);}
.clan-submit-btn:disabled{opacity:.4;cursor:default;}
.clan-empty{padding:1.5rem;text-align:center;font-size:.62rem;color:var(--text-dim);letter-spacing:.1em;}

/* ── CARNÉ DE CIUDADANO ── */
.carne-wrap {
  padding: 1.2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem;
}
.carne {
  width: 100%; max-width: 360px;
  background: linear-gradient(135deg, #0d1a27 0%, #1a3050 40%, #0d0808 100%);
  border: 1px solid #cc1a1a; border-radius: 4px;
  box-shadow: 0 0 30px rgba(204,26,26,0.25), inset 0 0 40px rgba(6,13,20,0.4);
  overflow: hidden; position: relative; font-family: 'Rajdhani', sans-serif;
}
.carne::before {
  content: 'BIG BRO · REGISTRO CIUDADANO';
  position: absolute; top: 0; left: 0; right: 0;
  font-size: .55rem; letter-spacing: .22em; color: rgba(255,255,255,0.25);
  padding: .3rem .6rem; border-bottom: 1px solid rgba(204,26,26,0.15);
  background: rgba(6,13,20,0.4);
}
.carne-header {
  padding: 1.4rem 1rem .6rem;
  display: flex; align-items: center; gap: .8rem;
  border-bottom: 1px solid rgba(204,26,26,0.2);
}
.carne-avatar {
  width: 56px; height: 56px; border-radius: 2px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem; border: 1px solid rgba(204,26,26,0.5);
  flex-shrink: 0; position: relative;
}
.carne-avatar::after {
  content: ''; position: absolute; inset: 2px;
  border: 1px solid rgba(255,255,255,0.05);
}
.carne-title-block { flex: 1; }
.carne-issuer {
  font-size: .6rem; letter-spacing: .2em; color: #cc1a1a;
  text-transform: uppercase; margin-bottom: .2rem;
}
.carne-username {
  font-size: 1rem; letter-spacing: .08em; color: #fff;
  text-shadow: 0 0 10px rgba(204,26,26,0.5);
}
.carne-status {
  font-size: .6rem; letter-spacing: .15em; color: #44aa44; margin-top: .2rem;
}
.carne-body { padding: .7rem 1rem; display: flex; flex-direction: column; gap: .5rem; }
.carne-row { display: flex; align-items: baseline; gap: .5rem; }
.carne-field { font-size: .6rem; letter-spacing: .12em; color: #8aa0b4; width: 80px; flex-shrink: 0; font-weight: 600; }
.carne-value { font-size: .72rem; letter-spacing: .06em; color: #e8eef4; font-weight: 500; }
.carne-code-row {
  margin-top: .3rem; padding: .5rem .7rem;
  background: rgba(204,26,26,0.08); border: 1px solid rgba(204,26,26,0.2);
  display: flex; align-items: center; justify-content: space-between;
}
.carne-code-label { font-size: .58rem; letter-spacing: .16em; color: #8aa0b4; font-weight: 600; }
.carne-code-val { font-size: .72rem; letter-spacing: .12em; color: #ff4444; font-weight: 700; }
.carne-footer {
  padding: .5rem 1rem; border-top: 1px solid rgba(204,26,26,0.15);
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(0,0,0,0.3);
}
.carne-pts { font-size: .85rem; letter-spacing: .06em; color: #fff; }
.carne-pts span { font-size: .6rem; color: #8aa0b4; letter-spacing: .14em; display: block; font-weight: 600; }
.carne-barcode {
  display: flex; gap: 2px; align-items: flex-end; height: 22px;
}
.carne-bar { background: rgba(204,26,26,0.4); width: 2px; }
.carne-share-btn {
  font-family: 'Rajdhani', sans-serif; font-size: .65rem;
  letter-spacing: .1em; padding: .4rem .8rem; background: none;
  border: 1px solid rgba(204,26,26,0.4); color: #8aa0b4;
  cursor: pointer; transition: all .15s; width: 100%; max-width: 360px;
}
.carne-share-btn:hover { border-color: #cc1a1a; color: #fff; }

/* profile tabs */
.profile-tabs {
  display: flex; border-bottom: 1px solid var(--green-dark); flex-shrink: 0;
}
.profile-tab {
  flex: 1; font-family: 'Rajdhani', sans-serif; font-size: .58rem;
  letter-spacing: .1em; padding: .5rem; background: none; border: none;
  color: var(--text-dim); cursor: pointer; border-bottom: 2px solid transparent; transition: all .15s;
}
.profile-tab.active { color: var(--green); border-bottom-color: var(--green); }

/* ── LEVEL GATES ── */
.level-lock {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 2rem 1.5rem; text-align: center; gap: .6rem;
}
.level-lock-icon { font-size: 2rem; opacity: .4; }
.level-lock-title { font-size: .7rem; letter-spacing: .14em; color: var(--text-dim); }
.level-lock-req { font-size: .6rem; letter-spacing: .1em; color: #cc1a1a; }
.level-lock-bar { width: 100%; max-width: 200px; height: 4px; background: #0d1a27; border: 1px solid #1a1a1a; margin-top: .4rem; }
.level-lock-fill { height: 100%; background: #cc1a1a; transition: width .4s; }

/* ── STATS PANELS ── */
.stats-panel { padding: .8rem 1rem; display: flex; flex-direction: column; gap: .6rem; }
.stat-card {
  background: var(--surface2); border: 1px solid var(--green-dark);
  padding: .6rem .9rem; display: flex; align-items: center; gap: .7rem;
}
.stat-card-icon { font-size: 1.3rem; flex-shrink: 0; }
.stat-card-val { font-size: 1.1rem; letter-spacing: .04em; color: var(--text); }
.stat-card-label { font-size: .52rem; letter-spacing: .1em; color: var(--text-dim); margin-top: .1rem; }
.stat-section-label { font-size: .55rem; letter-spacing: .16em; color: var(--text-dim); padding: .3rem 0 .1rem; border-bottom: 1px solid var(--green-dark); margin-bottom: .2rem; }
.stat-bar-row { display: flex; align-items: center; gap: .6rem; }
.stat-bar-label { font-size: .58rem; letter-spacing: .06em; color: var(--text); width: 90px; flex-shrink: 0; }
.stat-bar-wrap { flex: 1; height: 6px; background: #0d1a27; border: 1px solid #1a1a1a; }
.stat-bar-fill { height: 100%; transition: width .5s; }
.stat-bar-count { font-size: .55rem; color: var(--text-dim); width: 28px; text-align: right; flex-shrink: 0; }

/* heat zones */
.heat-zone { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; border-bottom: 1px solid #0d1a27; }
.heat-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.heat-name { flex: 1; font-size: .65rem; letter-spacing: .04em; }
.heat-count { font-size: .6rem; color: var(--text-dim); }

/* intel panel */
.intel-card {
  background: var(--surface2); border-left: 2px solid #cc1a1a;
  padding: .6rem .9rem; margin-bottom: .5rem;
}
.intel-card-title { font-size: .62rem; letter-spacing: .1em; color: #cc1a1a; margin-bottom: .2rem; }
.intel-card-body { font-size: .64rem; color: var(--text); line-height: 1.5; }

/* privileges badge on carné */
.privilege-badge {
  display: inline-block; font-size: .48rem; letter-spacing: .1em;
  padding: .15rem .4rem; border: 1px solid; margin: .1rem .1rem 0 0;
  opacity: .85;
}

/* ── LEAFLET OVERRIDES ── */
.leaflet-container { background: #0d1a27; font-family: 'Rajdhani', sans-serif; }
.leaflet-control-zoom a { background: #0d1a27 !important; color: var(--green) !important; border-color: var(--green-dark) !important; font-family: 'Rajdhani', sans-serif; }
.leaflet-control-zoom a:hover { background: var(--green-dark) !important; }
.leaflet-tile { filter: grayscale(0.3) brightness(0.85); }
.leaflet-control-attribution { display: none !important; }
.cam-marker { cursor: pointer; transition: transform .15s; }
.cam-marker:hover { transform: scale(1.3); }
.cam-popup { font-family: 'Rajdhani', sans-serif; min-width: 220px; }
.leaflet-popup-content-wrapper { background: #0d0d0d; border: 1px solid var(--border); border-radius: 4px; color: #ccc; box-shadow: 0 4px 20px rgba(6,13,20,0.4); }
.leaflet-popup-tip { background: #0d0d0d; }
.leaflet-popup-content { margin: .8rem 1rem; font-size: .65rem; line-height: 1.6; min-width: 200px; }
.cam-popup-codigo { font-size: .52rem; color: var(--text-dim); letter-spacing: .12em; margin-bottom: .1rem; }
.cam-popup-dir { font-size: .75rem; color: #fff; font-weight: 700; letter-spacing: .04em; line-height: 1.3; margin-bottom: .6rem; padding-bottom: .5rem; border-bottom: 1px solid #222; }
.cam-popup-row { display: flex; gap: .5rem; font-size: .6rem; margin-bottom: .2rem; align-items: baseline; }
.cam-popup-label { color: var(--text-dim); width: 90px; flex-shrink: 0; text-transform: uppercase; letter-spacing: .06em; }
.cam-popup-val { color: #ccc; flex: 1; }
.cam-popup-estado { display: inline-block; padding: .1rem .4rem; border-radius: 2px; font-size: .55rem; letter-spacing: .06em; }
.cam-popup-snapshot-wrap { margin: .5rem 0; border: 1px solid var(--border); border-radius: 2px; overflow: hidden; background: #111; min-height: 70px; display: flex; align-items: center; justify-content: center; color: var(--text-dim); font-size: .52rem; letter-spacing: .08em; }
.cam-popup-snapshot-wrap img { width: 100%; max-height: 140px; object-fit: cover; display: block; }
.cam-popup-btn { margin-top: .6rem; font-family: 'Rajdhani', sans-serif; font-size: .55rem; letter-spacing: .1em; padding: .35rem .6rem; background: none; border: 1px solid #444; color: #aaa; cursor: pointer; width: 100%; transition: all .15s; }
.cam-popup-btn:hover { border-color: #cc1a1a; color: #cc1a1a; background: rgba(204,26,26,0.05); }
.markercluster-small, .markercluster-medium, .markercluster-large { background: rgba(255,255,255,0.7) !important; border: 2px solid #1a3a6b !important; border-radius: 50% !important; }
.markercluster-small div, .markercluster-medium div, .markercluster-large div { background: rgba(26,58,107,0.15) !important; color: #1a3a6b !important; font-family: 'Rajdhani', sans-serif !important; font-size: .65rem !important; font-weight: 700 !important; }
/* Heatmap toggle btn */
/* Panel de controles del mapa — columna derecha del mapa */
#mapControlsPanel {
  display: none !important; position: absolute; top: 12px; right: 12px; z-index: 999;
  display: flex; flex-direction: column; gap: 0; align-items: stretch;
  min-width: 220px; max-width: 240px;
}
.mcp-btn {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: 'Rajdhani', sans-serif; font-size: .65rem; font-weight: 600;
  letter-spacing: .1em;
  background: rgba(10,21,32,0.92); color: #8aa0b4;
  border: 1px solid #1a3050; border-bottom: none;
  padding: .38rem .8rem; cursor: pointer;
  transition: all .15s; white-space: nowrap; width: 100%;
  justify-content: flex-start; backdrop-filter: blur(4px);
  position: relative;
}
#mapControlsPanel .mcp-btn:last-of-type,
#mapControlsPanel .mcp-sub:last-child { border-bottom: 1px solid #1a3050; }
.mcp-btn:hover { border-color: #e8eef4; color: #e8eef4; background: rgba(10,21,32,0.98); }
.mcp-btn.active { background: #000 !important; color: #fff !important; border-color: #4a6a8a; }
.mcp-btn.active svg { stroke: #fff; }
.mcp-btn.active .mcp-arrow { transform: rotate(180deg); }
.mcp-arrow { margin-left: auto; font-size: .55rem; transition: transform .2s; line-height: 1; }
/* Subpanel desplegable */
.mcp-sub {
  display: none; flex-direction: column;
  background: rgba(5,12,20,0.97); border: 1px solid #1a3050; border-top: none;
  font-family: 'Rajdhani', sans-serif; font-size: .7rem; color: #8aa0b4;
  max-height: 320px; overflow-y: auto;
}
.mcp-sub.open { display: flex; }
/* Leyenda dentro del subpanel */
.mcp-legend-inner { padding: .5rem .7rem; display: flex; flex-direction: column; gap: .4rem; }
/* Ajustar map-legend-item dentro del sub */
.mcp-legend-inner .map-legend-item { font-size: .65rem; }
/* Resultados búsqueda */
#geoSearchResults { max-height: 200px; overflow-y: auto; }

/* Modales dentro del subpanel sidebar */
#sb-datos-wrap .clanes-modal,
#sb-msg-wrap .msg-modal {
  position: relative !important; inset: auto !important;
  width: 100% !important; flex: 1;
  background: none !important; padding: 0 !important;
  z-index: auto !important; display: flex !important;
  flex-direction: column; overflow: hidden;
}
#sb-datos-wrap .clanes-box,
#sb-msg-wrap .msg-panel {
  flex: 1; max-height: none; width: 100%;
  border: none; box-shadow: none;
}
@media (max-width: 768px) {
  #mapControlsPanel { display: none !important; }
}

/* ── USER POSITION POPUP ── */
.upos-item {
  padding: .55rem .8rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: #e8eef4;
  cursor: pointer;
  border-bottom: 1px solid #1a3050;
  transition: background .15s, color .15s;
}
.upos-item:last-of-type { border-bottom: none; }
.upos-item:hover { background: #1a3050; color: #fff; }

/* Tooltip nombre usuario */
.bb-user-tooltip {
  background: #0a1520 !important;
  border: 1px solid #cc1a1a !important;
  color: #e8eef4 !important;
  font-family: 'Rajdhani', sans-serif !important;
  font-size: .72rem !important;
  font-weight: 600 !important;
  letter-spacing: .1em !important;
  padding: .2rem .5rem !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.bb-user-tooltip::before { display: none !important; }

/* Popup de marcadores de usuario */
.bb-marker-popup .leaflet-popup-content-wrapper {
  background: #0a1520 !important;
  border: 1px solid #cc1a1a !important;
  border-radius: 0 !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.5) !important;
  padding: 0 !important;
}
.bb-marker-popup .leaflet-popup-content { margin: .6rem .8rem !important; }
.bb-marker-popup .leaflet-popup-tip { background: #cc1a1a !important; }
.bb-marker-popup .leaflet-popup-close-button { color: #8aa0b4 !important; }

/* ── BUSCADOR GEOGRÁFICO ── */
.geo-result-item {
  padding: .5rem .8rem;
  cursor: pointer;
  border-bottom: 1px solid #1a3050;
  transition: background .15s;
}
.geo-result-item:last-child { border-bottom: none; }
.geo-result-item:hover { background: #1a3050; }

/* ── PATROL NEAR CIRCLES ── */
.patrol-near-circle {
  animation: patrolCirclePulse 2s ease-in-out infinite;
}
@keyframes patrolCirclePulse {
  0%, 100% { opacity: 0.7; }
  50%       { opacity: 0.2; }
}

/* ── PATROL ACTION PANEL ── */
.patrol-action-panel {
  position: fixed; bottom: 0; left: 0; right: 0;
  z-index: 2000;
  background: #0a1520;
  border-top: 2px solid #cc1a1a;
  padding: .8rem 1rem;
  display: none;
  flex-direction: column;
  gap: .6rem;
  transform: translateY(100%);
  transition: transform .3s ease;
  box-shadow: 0 -4px 24px rgba(0,0,0,.5);
}
.patrol-action-panel.visible {
  display: flex;
  transform: translateY(0);
}
.pap-cam-info { display: flex; flex-direction: column; gap: .15rem; }
.pap-cam-tipo { font-size: .62rem; color: #cc1a1a; letter-spacing: .14em; font-weight: 700; }
.pap-cam-dir  { font-size: .78rem; color: #e8eef4; font-weight: 600; }
.pap-cam-dist { font-size: .62rem; color: #8aa0b4; letter-spacing: .08em; }
.pap-actions  { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: .4rem; }
.pap-btn {
  font-family: 'Rajdhani', sans-serif; font-size: .62rem; font-weight: 700;
  letter-spacing: .08em; padding: .45rem .3rem; border: 1px solid;
  cursor: pointer; transition: all .15s; text-align: center;
}
.pap-btn-verify-yes { background: rgba(68,170,68,.12); border-color: #44aa44; color: #44aa44; }
.pap-btn-verify-yes:hover { background: rgba(68,170,68,.25); }
.pap-btn-verify-no  { background: rgba(204,26,26,.12); border-color: #cc1a1a; color: #cc1a1a; }
.pap-btn-verify-no:hover  { background: rgba(204,26,26,.25); }
.pap-btn-add  { background: rgba(74,144,196,.12); border-color: #4a90c4; color: #4a90c4; }
.pap-btn-add:hover  { background: rgba(74,144,196,.25); }
.pap-btn-info { background: rgba(138,160,180,.1); border-color: #1a3050; color: #8aa0b4; }
.pap-btn-info:hover { border-color: #8aa0b4; color: #e8eef4; }
.pap-close {
  position: absolute; top: .6rem; right: .8rem;
  background: none; border: none; color: #8aa0b4; cursor: pointer; font-size: 1rem;
}

/* ── PATROL SUMMARY MODAL ── */
.patrol-summary-modal {
  display: none; position: fixed; inset: 0; z-index: 9000;
  background: rgba(6,13,20,.88); align-items: center; justify-content: center;
}
.patrol-summary-modal.visible { display: flex; }
.patrol-summary-box {
  background: #0a1520; border: 1.5px solid #cc1a1a;
  width: min(340px, 92vw); padding: 0;
  box-shadow: 0 0 40px rgba(204,26,26,.2);
  animation: menuIn .25s ease;
}
.psm-header {
  padding: .8rem 1rem; border-bottom: 1px solid #1a3050;
}
.psm-title {
  font-size: .8rem; font-weight: 700; letter-spacing: .16em; color: #cc1a1a;
}
.psm-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 1px; background: #1a3050; margin: 1px;
}
.psm-stat {
  background: #0a1520; padding: .9rem .6rem; text-align: center;
}
.psm-val {
  font-size: .95rem; font-weight: 700; color: #e8eef4;
  letter-spacing: .04em; margin-bottom: .2rem;
}
.psm-pts { color: #44aa44; }
.psm-label { font-size: .52rem; color: #8aa0b4; letter-spacing: .12em; }
.psm-close-btn {
  display: block; width: 100%; padding: .7rem;
  background: none; border: none; border-top: 1px solid #1a3050;
  color: #8aa0b4; font-family: 'Rajdhani', sans-serif;
  font-size: .72rem; font-weight: 600; letter-spacing: .1em;
  cursor: pointer; transition: color .15s;
}
.psm-close-btn:hover { color: #e8eef4; }

/* ── ZBE TOGGLE ── */
#zbeToggleBtn.active {
  background: rgba(204,26,26,.25);
  border-color: #cc1a1a;
  color: #ff4444;
}

.zbe-tooltip {
  background: #0a1520;
  border: 1px solid #cc1a1a;
  color: #e8eef4;
  font-family: 'Rajdhani', sans-serif;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .1em;
  padding: .3rem .6rem;
  box-shadow: none;
}
.zbe-tooltip::before { display: none; }

/* ── ZBE PANEL ── */
.zbe-panel {
  position: fixed;
  right: 8px;
  bottom: 116px;
  z-index: 1500;
  background: #0a1520;
  border: 1px solid #1a3050;
  width: 200px;
  display: none;
  flex-direction: column;
  box-shadow: 0 4px 24px rgba(0,0,0,.5);
}
.zbe-panel.open { display: flex; }
.zbe-panel-title {
  font-size: .58rem;
  letter-spacing: .12em;
  color: #cc1a1a;
  font-weight: 700;
  padding: .6rem .8rem .4rem;
  border-bottom: 1px solid #1a3050;
}
.zbe-city-list {
  display: flex;
  flex-direction: column;
  max-height: 320px;
  overflow-y: auto;
}
.zbe-city-row { border-bottom: 1px solid #0d1a27; }
.zbe-city-row:last-child { border-bottom: none; }

.zbe-city-btn {
  background: none;
  border: none;
  border-bottom: 1px solid #0d1a27;
  color: #8aa0b4;
  font-family: 'Rajdhani', sans-serif;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .07em;
  padding: .5rem .8rem;
  text-align: left;
  cursor: pointer;
  transition: all .15s;
}
.zbe-city-btn:hover { background: #0d1a27; color: #e8eef4; }
.zbe-city-btn.active { color: #cc1a1a; background: rgba(204,26,26,.08); }
.zbe-city-btn.active::before { content: '⬡ '; }

/* ── TITULARES ADMIN PANEL ── */
.titulares-admin-panel {
  position: fixed; inset: 0; z-index: 8000;
  background: rgba(6,13,20,.95);
  display: none; flex-direction: column;
  font-family: 'Rajdhani', sans-serif;
}
.titulares-admin-panel.open { display: flex; }
.tit-admin-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 1rem; border-bottom: 1px solid #cc1a1a;
  background: #0a1520;
}
.tit-admin-title { font-size: .8rem; font-weight: 700; letter-spacing: .15em; color: #cc1a1a; }
.tit-close-btn { background: none; border: none; color: #8aa0b4; font-size: 1.1rem; cursor: pointer; }
.tit-nuevo {
  padding: .8rem 1rem; border-bottom: 1px solid #1a3050;
  display: flex; flex-direction: column; gap: .4rem; background: #0a1520;
}
.tit-textarea {
  background: #060d14; border: 1px solid #1a3050; color: #e8eef4;
  font-family: 'Rajdhani', sans-serif; font-size: .75rem;
  padding: .5rem; resize: vertical; min-height: 52px;
  letter-spacing: .04em;
}
.tit-textarea:focus { outline: none; border-color: #cc1a1a; }
.tit-orden-input {
  background: #060d14; border: 1px solid #1a3050; color: #e8eef4;
  font-family: 'Rajdhani', sans-serif; font-size: .75rem;
  padding: .4rem .5rem;
}
.titulares-list { flex: 1; overflow-y: auto; padding: .4rem 0; }
.tit-row {
  padding: .6rem 1rem; border-bottom: 1px solid #0d1a27;
  display: flex; flex-direction: column; gap: .3rem;
}
.tit-row:hover { background: #0a1520; }
.tit-row-meta { display: flex; gap: .5rem; align-items: center; }
.tit-orden { font-size: .58rem; color: #8aa0b4; letter-spacing: .1em; }
.tit-estado { font-size: .55rem; font-weight: 700; letter-spacing: .1em; padding: .1rem .3rem; }
.tit-estado.activo  { color: #44aa44; border: 1px solid #44aa4444; background: #44aa4411; }
.tit-estado.inactivo{ color: #666; border: 1px solid #33333344; background: #11111111; }
.tit-texto { font-size: .72rem; color: #e8eef4; line-height: 1.4; }
.tit-actions { display: flex; gap: .3rem; }
.tit-btn {
  font-family: 'Rajdhani', sans-serif; font-size: .58rem; font-weight: 700;
  letter-spacing: .08em; padding: .25rem .5rem; border: 1px solid;
  cursor: pointer; background: none;
}
.tit-edit   { color: #4a90c4; border-color: #4a90c444; }
.tit-edit:hover { background: rgba(74,144,196,.15); }
.tit-toggle { color: #8aa0b4; border-color: #1a3050; }
.tit-toggle:hover { color: #e8eef4; }
.tit-del    { color: #cc1a1a; border-color: #cc1a1a44; }
.tit-del:hover { background: rgba(204,26,26,.15); }

/* ── NODO.gob LABEL ── */
.nodo-label {
  cursor: pointer !important;
  user-select: none;
  transition: background .2s;
  letter-spacing: .1em !important;
}
.nodo-label:hover { background: #8b0000 !important; }

/* ── NODO.gob PANEL ── */
.nodo-panel {
  position: fixed;
  bottom: 28px;
  left: 0;
  width: min(380px, 100vw);
  max-height: 70vh;
  z-index: 3000;
  background: #060d14;
  border: 1px solid #cc1a1a44;
  border-left: none;
  border-bottom: none;
  display: none;
  flex-direction: column;
  box-shadow: 4px -4px 32px rgba(204,26,26,.15);
  font-family: 'Rajdhani', sans-serif;
}
.nodo-panel.open { display: flex; }

.nodo-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 1rem;
  border-bottom: 1px solid #cc1a1a55;
  background: #0a0f18;
  flex-shrink: 0;
}
.nodo-title {
  font-size: 1rem; font-weight: 900; letter-spacing: .25em; color: #fff;
  text-shadow: 0 0 12px rgba(204,26,26,.5);
}
.nodo-title-gob { color: #cc1a1a; font-size: .75em; }
.nodo-close {
  background: #1a0808; border: 1px solid #cc1a1a44; color: #ff8888; cursor: pointer;
  font-size: 1.1rem; font-weight: 700; line-height: 1; padding: .3rem .6rem; border-radius: 2px;
}
.nodo-close:hover { background: #cc1a1a; color: #fff; border-color: #cc1a1a; }

.nodo-tabs {
  display: flex; border-bottom: 1px solid #1a3050; flex-shrink: 0;
}
.nodo-tab {
  flex: 1; background: none; border: none; border-right: 1px solid #1a3050;
  color: #8aa0b4; font-family: 'Rajdhani', sans-serif;
  font-size: .88rem; font-weight: 700; letter-spacing: .1em;
  padding: .65rem .3rem; cursor: pointer; transition: all .15s;
}
.nodo-tab:last-child { border-right: none; }
.nodo-tab:hover { color: #e8eef4; background: #0a1520; }
.nodo-tab.active { color: #cc1a1a; border-bottom: 2px solid #cc1a1a; background: #0d0f18; }

.nodo-body {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column;
  padding: .8rem 1rem; gap: .6rem;
}
.nodo-loading {
  font-size: .88rem; color: #8aa0b4; letter-spacing: .1em;
  text-align: center; padding: 1.5rem 0;
}

/* LA VOZ */
.nodo-voz-player {
  background: #0a1520; border: 1px solid #1a3050;
  padding: .7rem .8rem; display: flex; flex-direction: column; gap: .6rem;
}
.nodo-voz-signal {
  display: flex; align-items: flex-end; gap: 3px; height: 18px;
}
.nodo-signal-bar {
  width: 4px; background: #cc1a1a; border-radius: 1px;
  animation: signalPulse 1.2s ease-in-out infinite;
}
.nodo-signal-bar:nth-child(1) { height: 6px;  animation-delay: 0s; }
.nodo-signal-bar:nth-child(2) { height: 10px; animation-delay: .15s; }
.nodo-signal-bar:nth-child(3) { height: 16px; animation-delay: .3s; }
.nodo-signal-bar:nth-child(4) { height: 10px; animation-delay: .45s; }
.nodo-signal-bar:nth-child(5) { height: 6px;  animation-delay: .6s; }
@keyframes signalPulse {
  0%,100% { opacity: .3; } 50% { opacity: 1; }
}
.nodo-voz-controls { display: flex; align-items: center; gap: .6rem; }
.nodo-play-btn {
  width: 32px; height: 32px; border-radius: 50%;
  background: #cc1a1a; border: none; color: #fff;
  font-size: .8rem; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.nodo-play-btn:hover { background: #8b0000; }
.nodo-progress-wrap { flex: 1; display: flex; flex-direction: column; gap: .25rem; }
.nodo-progress-bar {
  height: 4px; background: #1a3050; cursor: pointer; border-radius: 2px;
}
.nodo-progress-fill {
  height: 100%; background: #cc1a1a; border-radius: 2px;
  transition: width .5s linear; width: 0%;
}
.nodo-time { font-size: .82rem; color: #a0c0d8; letter-spacing: .06em; font-weight: 600; }
.nodo-voz-empty {
  display: none; align-items: center; justify-content: center;
  font-size: .88rem; color: #8aa0b4; letter-spacing: .1em;
  border: 1px dashed #1a3050; padding: 1.2rem; text-align: center;
}
.nodo-discurso { display: flex; flex-direction: column; gap: .5rem; }
.nodo-discurso-p {
  font-size: .92rem; color: #ddeeff; line-height: 1.7;
  border-left: 2px solid #cc1a1a55; padding-left: .8rem;
}

/* EL TABLOIDE */
.nodo-tabloide-header {
  text-align: center; border-bottom: 1px solid #cc1a1a33;
  padding-bottom: .6rem; flex-shrink: 0;
}
.nodo-tabloide-title {
  font-size: 1.1rem; font-weight: 900; letter-spacing: .25em; color: #fff;
}
.nodo-tabloide-sub {
  font-size: .78rem; color: #cc1a1a; letter-spacing: .14em; margin-top: .2rem;
}
.nodo-titulares-list { display: flex; flex-direction: column; gap: 0; }
.nodo-titular-item {
  display: flex; gap: .6rem; align-items: flex-start;
  padding: .55rem 0; border-bottom: 1px solid #0d1a27;
}
.nodo-titular-item:last-child { border-bottom: none; }
.nodo-titular-num {
  font-size: .82rem; color: #cc1a1a; font-weight: 700;
  letter-spacing: .06em; flex-shrink: 0; padding-top: .1rem;
}
.nodo-titular-texto {
  font-size: .92rem; color: #ddeeff; line-height: 1.55; letter-spacing: .03em;
}

/* LA RED */
.nodo-red-header {
  font-size: .84rem; color: #cc1a1a; letter-spacing: .16em;
  font-weight: 700; padding-bottom: .4rem;
  border-bottom: 1px solid #cc1a1a33; flex-shrink: 0;
}
.nodo-red-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: .4rem;
}
.nodo-red-card {
  background: #0a1520; border: 1px solid #1a3050;
  padding: .6rem .7rem; display: flex; flex-direction: column; gap: .15rem;
}
.nodo-red-card.red { border-color: #cc1a1a44; }
.nodo-red-val {
  font-size: 1.1rem; font-weight: 900; color: #fff; letter-spacing: .04em;
}
.nodo-red-card.red .nodo-red-val { color: #cc1a1a; }
.nodo-red-label { font-size: .78rem; color: #a0c0d8; letter-spacing: .07em; font-weight: 600; }
.nodo-red-section {
  font-size: .82rem; color: #a0c0d8; letter-spacing: .12em;
  font-weight: 700; margin-bottom: -.2rem;
}
.nodo-red-bar-row {
  display: flex; align-items: center; gap: .5rem;
}
.nodo-red-bar-label {
  font-size: .82rem; color: #ddeeff; letter-spacing: .04em;
  width: 110px; flex-shrink: 0; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis;
}
.nodo-red-bar-wrap {
  flex: 1; height: 4px; background: #1a3050; border-radius: 2px;
}
.nodo-red-bar-fill {
  height: 100%; background: #cc1a1a; border-radius: 2px;
  transition: width .6s ease;
}
.nodo-red-bar-count {
  font-size: .82rem; color: #a0c0d8; width: 44px; text-align: right; font-weight: 600;
}
.nodo-red-pts {
  font-size: 1.4rem; font-weight: 900; color: #cc1a1a;
  text-align: center; padding: .4rem 0; letter-spacing: .08em;
}
.nodo-red-pts span { font-size: .82rem; color: #a0c0d8; vertical-align: middle; margin-left: .3rem; }

/* ── NODO.gob subtítulo ── */
.nodo-subtitulo-wrap {
  display: flex; flex-direction: column; gap: .2rem;
}
.nodo-subtitulo-tachado {
  font-size: .72rem; font-weight: 700; color: #c8d8e8; letter-spacing: .08em;
  text-decoration: line-through; text-decoration-color: #cc1a1a;
  text-decoration-thickness: 2px;
}
.nodo-sello {
  display: inline-block;
  font-size: .52rem; font-weight: 900; letter-spacing: .1em;
  color: #cc1a1a; border: 1.5px solid #cc1a1a;
  padding: .15rem .4rem;
  transform: rotate(-1.5deg);
  background: rgba(204,26,26,.06);
  line-height: 1.3;
}

/* ── CONTROLES MAPA MÓVIL ── */
.map-actions-wrap { display: none; }

/* map-ctrl-left: solo visible en móvil */
.map-ctrl-left { display: none; }
/* Botón locate flotante: oculto en desktop, visible en móvil */
#mobLocateBtn { display: none; }

@media (max-width: 768px) {
  /* Ocultar botones de escritorio en móvil */
  #locateBtn, #legendToggleBtn, 
  /* Ocultar FAB viejo */
  .fab, .fab-menu { display: none !important; }

  /* Botón MI POSICIÓN flotante: visible en móvil */
  #mobLocateBtn { display: flex !important; }

  /* IZQUIERDA — oculto en móvil, integrado en panel MAPA */
  .map-ctrl-left { display: none !important; }

  /* DERECHA — desplegable acciones */
  /* ── FAB flotante ── */
  .map-actions-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
    position: fixed;
    right: 14px;
    bottom: calc(var(--nav-h) + 28px + 48px + 14px);
    z-index: 500;
    pointer-events: none;
  }
  .map-actions-toggle,
  .map-actions-menu.open .map-action-item {
    pointer-events: auto;
  }

  /* Botón + circular */
  .map-actions-toggle {
    width: 52px; height: 52px;
    background: #ff2200;
    border: none;
    border-radius: 50%;
    color: #fff;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 0 10px 3px rgba(255,34,0,.65), 0 0 22px 6px rgba(255,34,0,.28);
    animation: recblink 4s ease-in-out infinite;
    flex-shrink: 0;
    position: relative; z-index: 1;
  }
  .fab-plus {
    width: 22px; height: 22px;
    transition: transform .28s cubic-bezier(.4,0,.2,1);
  }
  .map-actions-toggle.open .fab-plus { transform: rotate(45deg); }
  .map-actions-toggle.open {
    background: #cc1a1a;
    animation: none;
    box-shadow: 0 0 6px 2px rgba(204,26,26,.5);
  }

  /* Menú de items — columna de abajo a arriba */
  .map-actions-menu {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity .22s ease, transform .22s ease;
  }
  .map-actions-menu.open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  /* Cada item: icono circular + etiqueta a su izquierda */
  .map-action-item {
    display: flex; align-items: center; gap: 10px;
    background: none; border: none;
    cursor: pointer; padding: 0;
    flex-direction: row-reverse;
  }
  /* Icono sin fondo — solo SVG con sombra */
  .mai-icon {
    width: 36px; height: 36px;
    background: none; border: none;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
  }
  .mai-icon svg {
    width: 22px; height: 22px;
    stroke: #fff;
    filter: drop-shadow(0 1px 4px rgba(0,0,0,1)) drop-shadow(0 0 8px rgba(0,0,0,.9));
  }
  /* Etiqueta blanca con sombra de texto */
  .mai-label {
    font-family: 'Rajdhani', sans-serif;
    font-size: .82rem; font-weight: 800;
    letter-spacing: .12em;
    color: #fff;
    text-shadow: 0 1px 5px rgba(0,0,0,1), 0 0 10px rgba(0,0,0,.9);
    white-space: nowrap;
  }
  .map-action-item:active .mai-icon svg { stroke: #cc1a1a; }
}

@supports (padding-bottom: env(safe-area-inset-bottom)) {
  @media (max-width: 768px) {
    .map-ctrl-left { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 36px); }
    .map-actions-wrap { bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 28px + 48px + 14px); }
  }
}

/* Ocultar botones del banner superior en móvil */
@media (max-width: 768px) {
  #btnPatrol, #btnAdd, #btnAddAviso { display: none !important; }
}

/* Eliminar outline de selección en polígonos Leaflet */
.leaflet-interactive:focus { outline: none !important; }
path.leaflet-interactive:focus { outline: none !important; }

#zonasControlBtnMobile { display: none; }
@media (max-width: 768px) { #zonasControlBtnMobile { display: flex; } #zonasControlBtn { display: none !important; } }


/* ── Modales embebidos en subpanel ── */
#sb-social-panel .friends-modal,
#sb-social-panel .clanes-modal,
#sb-perfil-panel .profile-panel,
#sb-nodo-wrap .nodo-panel {
  position: relative !important;
  inset: auto !important;
  top: auto !important; right: auto !important;
  width: 100% !important; height: 100% !important;
  background: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  z-index: auto !important;
  border: none !important;
  box-shadow: none !important;
  pointer-events: auto !important;
}
#sb-social-panel .friends-box,
#sb-social-panel .clanes-box,
#sb-perfil-panel .profile-box,
#sb-nodo-wrap .nodo-box {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
/* Ocultar headers redundantes dentro del subpanel */
#sb-social-panel .caminfo-header .btn-close,
#sb-perfil-panel .profile-close-btn,
#sb-nodo-wrap .nodo-close-btn { display: none !important; }
/* profileOverlay no debe oscurecer cuando está en subpanel */
#sb-perfil-panel ~ #profileOverlay { display: none !important; }

/* Cuando patrulla activa en móvil, bajar banners debajo de la barra de stats */
@media (max-width: 768px) {
  body.patrol-active-mob #addModeBanner,
  body.patrol-active-mob #avisoModeBanner,
  body.patrol-active-mob #mapanal-hud,
  body.patrol-active-mob #objLoadingBanner,
  body.patrol-active-mob #zonasLoadingBanner {
    top: calc(46px + 38px) !important;
  }
}
/* ── NAVEGADOR TÁCTICO · PANEL STYLES ── */

/* Secciones del panel */
.nav-section {
  padding: .7rem 1rem .5rem;
  border-bottom: 1px solid #0d1a27;
  display: flex; flex-direction: column; gap: .4rem;
}
.nav-section-label {
  font-size: .62rem; font-weight: 700; letter-spacing: .16em;
  color: #cc1a1a; text-transform: uppercase;
}

/* Toggle modo */
.nav-mode-toggle {
  display: grid; grid-template-columns: 1fr 1fr; gap: .4rem;
}
.nav-mode-btn {
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  background: #0a1520; border: 1px solid #1a3050;
  color: #4a6a8a; font-family: 'Rajdhani', sans-serif;
  font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  padding: .5rem; cursor: pointer; transition: all .15s;
}
.nav-mode-btn.active {
  background: #1a0808; border-color: #cc1a1a; color: #fff;
}
.nav-mode-btn:hover:not(.active) { border-color: #2a4060; color: #8aa0b4; }

/* Inputs */
.nav-input {
  width: 100%; background: #060e18; border: 1px solid #1a3050;
  color: #e8eef4; font-family: 'Rajdhani', sans-serif;
  font-size: .82rem; font-weight: 500; padding: .5rem .7rem;
  outline: none; transition: border-color .15s; box-sizing: border-box;
}
.nav-input:focus { border-color: #cc1a1a; }
.nav-input::placeholder { color: #2a4060; }

/* Botón mi ubicación */
.nav-location-btn {
  display: flex; align-items: center; gap: .4rem;
  background: none; border: 1px solid #1a3050; color: #4a9aff;
  font-family: 'Rajdhani', sans-serif; font-size: .67rem;
  font-weight: 700; letter-spacing: .1em; padding: .35rem .7rem;
  cursor: pointer; transition: all .15s; align-self: flex-start;
}
.nav-location-btn:hover { border-color: #4a9aff; background: rgba(74,154,255,.06); }

/* Sugerencias */
.nav-suggestions {
  display: none; position: absolute; top: 100%; left: 0; right: 0;
  background: #0a1520; border: 1px solid #1a3050; border-top: none;
  z-index: 500; max-height: 180px; overflow-y: auto;
}
.nav-sugg-item {
  padding: .45rem .7rem; font-size: .72rem; color: #c8dce8;
  cursor: pointer; border-bottom: 1px solid #0d1a27;
  font-family: 'Rajdhani', sans-serif; line-height: 1.4;
}
.nav-sugg-item:hover { background: #1a2a3a; color: #fff; }

/* Filtros cámaras */
.nav-filtros-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: .3rem;
}
.nav-filtro-item {
  display: flex; align-items: center; gap: .4rem;
  padding: .3rem .4rem; cursor: pointer;
  border: 1px solid #0d1a27; border-radius: 2px;
  transition: all .15s; background: #060e18;
}
.nav-filtro-item:hover { border-color: #1a3050; }
.nav-filtro-item.inactivo { opacity: .35; }
.nav-filtro-check { display: none; }
.nav-filtro-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.nav-filtro-label { font-family: 'Rajdhani', sans-serif; font-size: .67rem; font-weight: 700; letter-spacing: .08em; color: #c8dce8; }

/* Mini botones */
.nav-mini-btn {
  background: none; border: 1px solid #1a3050; color: #4a6a8a;
  font-family: 'Rajdhani', sans-serif; font-size: .62rem;
  font-weight: 700; letter-spacing: .1em; padding: .2rem .6rem;
  cursor: pointer; transition: all .15s;
}
.nav-mini-btn:hover { border-color: #cc1a1a; color: #cc1a1a; }

/* Botón calcular */
.nav-calc-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: .5rem;
  background: #cc1a1a; border: none; color: #fff;
  font-family: 'Rajdhani', sans-serif; font-size: .82rem;
  font-weight: 900; letter-spacing: .16em; padding: .7rem;
  cursor: pointer; transition: background .15s;
}
.nav-calc-btn:hover { background: #e02020; }
.nav-calc-btn:disabled { background: #3a0a0a; color: #661010; cursor: not-allowed; }

/* Spinner */
.nav-spinner {
  width: 12px; height: 12px; border: 2px solid rgba(255,255,255,.3);
  border-top-color: #fff; border-radius: 50%;
  animation: spin .7s linear infinite; flex-shrink: 0;
}

/* Resultados */
.nav-resultados-header {
  padding: .4rem 1rem; font-size: .62rem; font-weight: 700;
  letter-spacing: .12em; color: #4a6a8a;
  border-top: 1px solid #0d1a27; border-bottom: 1px solid #0d1a27;
  background: #060e18;
}
.nav-loading {
  padding: 1.2rem 1rem; font-size: .75rem; color: #4a6a8a;
  font-family: 'Rajdhani', sans-serif; letter-spacing: .1em; text-align: center;
}
.nav-error {
  padding: .8rem 1rem; font-size: .75rem; color: #cc4444;
  font-family: 'Rajdhani', sans-serif; letter-spacing: .08em;
  background: rgba(204,26,26,.06); border-left: 3px solid #cc1a1a;
  margin: .5rem 1rem;
}

/* Tarjetas de ruta */
.nav-ruta-card {
  padding: .7rem 1rem; border-bottom: 1px solid #0d1a27;
  cursor: pointer; transition: background .15s;
  display: flex; flex-direction: column; gap: .35rem;
}
.nav-ruta-card:hover { background: #0a1520; }
.nav-ruta-mejor { background: rgba(204,26,26,.05); border-left: 3px solid #cc1a1a; }
.nav-ruta-seleccionada { background: #0d1a27 !important; outline: 1px solid #cc1a1a; }

.nav-ruta-header {
  display: flex; align-items: center; justify-content: space-between;
}
.nav-ruta-etiqueta {
  font-family: 'Rajdhani', sans-serif; font-size: .72rem;
  font-weight: 900; letter-spacing: .14em;
}
.nav-ruta-badge {
  font-size: .55rem; font-weight: 900; letter-spacing: .1em;
  color: #cc1a1a; border: 1px solid #cc1a1a44;
  padding: .1rem .35rem; background: rgba(204,26,26,.08);
}

.nav-ruta-stats {
  display: flex; gap: 1.2rem; align-items: center;
}
.nav-stat {
  display: flex; align-items: center; gap: .3rem;
  font-family: 'Rajdhani', sans-serif; font-size: .78rem;
  font-weight: 700; color: #c8dce8; letter-spacing: .04em;
}

.nav-ruta-camaras {
  display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .1rem;
}
.nav-cam-tag {
  font-size: .58rem; font-weight: 700; letter-spacing: .08em;
  border: 1px solid; padding: .1rem .35rem; border-radius: 2px;
  font-family: 'Rajdhani', sans-serif;
}
.nav-ruta-libre {
  font-size: .68rem; color: #00cc66; font-family: 'Rajdhani', sans-serif;
  font-weight: 700; letter-spacing: .06em;
}

/* Botón nav en barra desktop */
.dbb-nav {
  background: #060e18; color: #8aa0b4;
  border-right: 1px solid #1a3050;
}
.dbb-nav:hover { background: #0d1a27; color: #c8dce8; }

/* Botón móvil NAVEGACIÓN en barra inferior */
@media (max-width: 768px) {
  #mobTutorialBar .nav-mob-btn {
    background: none; border: none; border-right: 1px solid #0d1a27;
    color: #6a9ab8; font-family: 'Rajdhani', sans-serif;
    font-size: .68rem; font-weight: 700; letter-spacing: .1em;
    padding: 0 .4rem; cursor: pointer;
    display: flex; align-items: center; justify-content: center; gap: .35rem;
  }
}

/* Panel navegación en móvil: ocupa toda la pantalla desde arriba */
@media (max-width: 768px) {
  #sb-stealth-router {
    position: fixed !important;
    top: 44px !important; left: 0 !important; right: 0 !important;
    bottom: calc(var(--nav-h) + 36px) !important;
    width: 100% !important;
    transform: translateY(100%) !important;
    transition: transform .3s ease !important;
    z-index: 600 !important;
    border-right: none !important;
  }
  #sb-stealth-router.open {
    transform: translateY(0) !important;
  }
}