:root{
  --bg:#000000; --panel:#050a07; --panel2:#081109;
  --fg:#c9ffe0; --dim:#6ea589; --accent:#00ff9c; --accent2:#00d0ff;
  --danger:#ff3b3b; --amber:#ffb000; --line:#0c1f16;
  --me-bg:#03170f; --me-bd:#0c3a26; --me-fg:#e7fff2;
  --btn-a:#00301f; --btn-b:#001a12; --tint:#03170f;
  --mono:ui-monospace,"SF Mono","JetBrains Mono","Cascadia Code",Menlo,Consolas,monospace;
  --glow:0 0 6px rgba(0,255,156,.55);
}
/* ===== TEMAS (cambiar colores) ===== */
html[data-theme="ambar"]{
  --panel:#0a0703; --panel2:#140d04; --fg:#ffe7bf; --dim:#a98652; --accent:#ffb000; --accent2:#ff6a3d;
  --line:#2a1c08; --me-bg:#1a1003; --me-bd:#3d2a0c; --me-fg:#fff0d6; --btn-a:#3a2600; --btn-b:#1f1400; --tint:#1a1003;
  --glow:0 0 6px rgba(255,176,0,.5);
}
html[data-theme="hielo"]{
  --panel:#04080a; --panel2:#08121a; --fg:#cdeeff; --dim:#6b93a6; --accent:#25d5ff; --accent2:#6d8bff;
  --line:#0c2531; --me-bg:#03151d; --me-bd:#0c3a4a; --me-fg:#dcf3ff; --btn-a:#003040; --btn-b:#001a24; --tint:#03151d;
  --glow:0 0 6px rgba(37,213,255,.5);
}
html[data-theme="alerta"]{
  --panel:#0a0303; --panel2:#140606; --fg:#ffd6d6; --dim:#ad6a6a; --accent:#ff4d4d; --accent2:#ff9d3d;
  --line:#2a0c0c; --me-bg:#1a0505; --me-bd:#3d0f0f; --me-fg:#ffe0e0; --btn-a:#3a0000; --btn-b:#1f0000; --tint:#1a0505;
  --glow:0 0 6px rgba(255,77,77,.5);
}
html[data-theme="neon"]{
  --panel:#07050a; --panel2:#0e0a16; --fg:#ecdcff; --dim:#9080ad; --accent:#b46cff; --accent2:#ff5cc8;
  --line:#1c0c2a; --me-bg:#120a1d; --me-bd:#2e163d; --me-fg:#f0e0ff; --btn-a:#2a1040; --btn-b:#160820; --tint:#120a1d;
  --glow:0 0 7px rgba(180,108,255,.5);
}
html[data-theme="mono"]{
  --panel:#0a0c0e; --panel2:#12161a; --fg:#e8eef2; --dim:#8b95a1; --accent:#dfe7ee; --accent2:#93a3b2;
  --line:#23282e; --me-bg:#151a1f; --me-bd:#2a3138; --me-fg:#f2f6fa; --btn-a:#2a3138; --btn-b:#181c20; --tint:#151a1f;
  --glow:0 0 6px rgba(230,238,244,.35);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg); font-family:var(--mono);
  overflow:hidden; position:fixed; inset:0;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none;
  letter-spacing:.02em;
}
.mono{font-family:var(--mono)}
.hidden{display:none !important}

/* efectos CRT */
.scanlines{position:fixed; inset:0; pointer-events:none; z-index:80;
  background:repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.22) 2px 3px);
  mix-blend-mode:multiply; opacity:.55}
.vignette{position:fixed; inset:0; pointer-events:none; z-index:79;
  background:radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0,0,0,.85) 100%)}

.screen{position:fixed; inset:0; display:flex; flex-direction:column;
  padding:env(safe-area-inset-top) 0 0; z-index:10}

/* ARRANQUE */
#boot{justify-content:flex-start; align-items:flex-start; padding:24px}
.bootlog{font-size:12.5px; line-height:1.5; color:var(--accent); text-shadow:var(--glow);
  white-space:pre-wrap; margin:0; width:100%}

/* PIN */
.lock-wrap{margin:auto; width:min(420px,88vw); text-align:center}
.brand{margin-bottom:34px}
.brand-mark{font-size:56px; color:var(--accent); text-shadow:0 0 18px rgba(0,255,156,.7); line-height:1}
.brand-name{font-size:34px; letter-spacing:.5em; margin:12px 0 4px; padding-left:.5em;
  color:#eafff4; text-shadow:var(--glow); animation:flick 4s infinite}
.brand-sub{font-size:11px; color:var(--dim); letter-spacing:.35em}
@keyframes flick{0%,96%,100%{opacity:1}97%{opacity:.4}98%{opacity:.9}}
.pin-label{display:block; text-align:left; font-size:12px; color:var(--dim); margin-bottom:8px}
.pin-input{width:100%; background:var(--panel); border:1px solid var(--line); color:var(--accent);
  font-family:var(--mono); font-size:22px; letter-spacing:.4em; text-align:center;
  padding:16px; border-radius:10px; outline:none; text-shadow:var(--glow);
  -webkit-text-security:disc; text-security:disc}
.pin-input:focus{border-color:var(--accent); box-shadow:0 0 0 1px var(--accent),0 0 18px rgba(0,255,156,.18)}
.btn-primary{width:100%; margin-top:16px; background:linear-gradient(180deg,var(--btn-a),var(--btn-b));
  border:1px solid var(--accent); color:var(--accent); font-family:var(--mono); font-size:14px;
  letter-spacing:.2em; padding:15px; border-radius:10px; cursor:pointer; text-shadow:var(--glow)}
.btn-primary:active{background:var(--btn-b)}
.pin-msg{min-height:20px; margin-top:14px; font-size:12px; color:var(--danger); letter-spacing:.1em}
.install-hint{margin-top:30px; padding-top:18px; border-top:1px solid var(--line); font-size:11px; line-height:1.8;
  color:var(--dim); letter-spacing:.04em; text-align:center}
.install-hint b{color:var(--fg); font-weight:400}
/* Face ID: botón deliberadamente casi invisible en la esquina */
.face-btn{position:absolute; right:12px; bottom:calc(14px + env(safe-area-inset-bottom)); z-index:5;
  width:32px; height:32px; border-radius:50%; background:transparent; border:0; padding:0;
  color:var(--dim); opacity:.1; font-size:26px; line-height:1; cursor:pointer}
.face-btn:active{opacity:.5}
.face-btn.busy{opacity:.5; color:var(--accent)}

/* BREACH */
.breach-wrap{margin:auto; text-align:center; width:min(420px,88vw)}
.breach-glyph{font-size:64px; color:var(--danger); text-shadow:0 0 20px rgba(255,59,59,.7);
  animation:pulseRed 1s infinite}
@keyframes pulseRed{50%{opacity:.35}}
.breach-title{font-size:26px; letter-spacing:.35em; color:#ffdede; margin:14px 0 8px}
.breach-sub{font-size:13px; color:var(--dim); line-height:1.7}
.btn-ghost{margin-top:26px; background:transparent; border:1px solid var(--dim); color:var(--fg);
  font-family:var(--mono); font-size:12px; letter-spacing:.15em; padding:13px 18px; border-radius:8px; cursor:pointer}
.btn-ghost:disabled{opacity:.35}

/* APP */
#app{display:flex; flex-direction:column}
.topbar{display:flex; align-items:center; gap:10px; padding:12px 14px; border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#020402,transparent)}
.status{display:flex; align-items:center; gap:8px; flex:1; min-width:0}
.dot{width:9px; height:9px; border-radius:50%; background:var(--danger); box-shadow:0 0 8px currentColor; flex:none}
.dot.on{background:var(--accent)}
#linkTxt{font-size:11px; color:var(--dim); letter-spacing:.15em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.node-id{font-size:11px; color:var(--accent); letter-spacing:.2em}
.icon-btn{background:transparent; border:1px solid var(--line); color:var(--fg); width:40px; height:40px;
  border-radius:9px; font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex:none}
.icon-btn:active{background:var(--panel2)}

.view{flex:1; display:flex; flex-direction:column; min-height:0; position:relative}

/* CHAT */
.load-more{width:100%; background:#03120c; border:0; border-bottom:1px solid var(--line); color:var(--accent);
  font-family:var(--mono); font-size:11px; letter-spacing:.15em; padding:11px; cursor:pointer; text-shadow:var(--glow)}
.load-more:active{background:var(--tint)}
.load-more.loading{color:var(--dim); text-shadow:none}
.msgs{flex:1; overflow-y:auto; padding:14px 12px 6px; display:flex; flex-direction:column; gap:8px}
.msg{max-width:80%; padding:9px 12px; border-radius:12px; font-size:clamp(13.5px,3.8vw,15px); line-height:1.4;
  word-wrap:break-word; overflow-wrap:anywhere; position:relative; border:1px solid var(--line)}
.msg .t{white-space:pre-wrap}
.msg .lnk{color:var(--accent2); text-decoration:underline; text-underline-offset:2px; cursor:pointer;
  word-break:break-all; -webkit-touch-callout:none}
.msg.me{align-self:flex-end; background:var(--me-bg); border-color:var(--me-bd); color:var(--me-fg)}
.msg.them{align-self:flex-start; background:var(--panel); color:var(--fg)}
.msg .meta{display:block; font-size:9.5px; color:var(--dim); margin-top:4px; letter-spacing:.1em; text-align:right}
.msg .meta .tick{margin-left:6px; font-size:10px; letter-spacing:0; font-family:var(--mono)}
.msg .meta .tick.st-pending{opacity:1}
.msg .meta .tick.st-sent,.msg .meta .tick.st-delivered{color:var(--dim)}
.msg .meta .tick.st-seen{color:var(--accent); text-shadow:var(--glow)}
.msg .meta .tick.st-failed{color:var(--danger); text-shadow:none}
.msg.pending{opacity:.78}
.msg.failed{border-color:var(--danger); opacity:1; cursor:pointer}
.msg.failed::after{content:"⚠ tocá para reintentar"; display:block; font-size:9px; color:var(--danger);
  letter-spacing:.1em; margin-top:3px; text-align:right; text-transform:uppercase}
.msg .media{display:block; border-radius:8px; overflow:hidden; max-width:220px; max-height:280px; cursor:zoom-in;
  border:1px solid var(--line); background:#000}
.msg .media img,.msg .media video{display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; transition:opacity .3s ease}
.msg .media.loading{width:180px; height:130px; display:flex; align-items:center; justify-content:center;
  color:var(--dim); font-size:11px}
.sys{align-self:center; font-size:10.5px; color:var(--dim); letter-spacing:.15em; padding:4px 10px; text-transform:uppercase}
/* cita al responder */
.msg-quote{border-left:2px solid var(--accent); padding:3px 8px; margin-bottom:5px; font-size:12px;
  color:var(--dim); background:rgba(255,255,255,.05); border-radius:4px; max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.msg.me .msg-quote{border-left-color:var(--me-bd)}
/* marca "visto" */
.seen{display:block; font-size:9px; color:var(--accent); letter-spacing:.12em; margin-top:3px; text-align:right; text-shadow:var(--glow)}
/* barra de responder (sobre el composer) */
.reply-bar{display:flex; align-items:center; gap:8px; padding:8px 12px; background:var(--tint);
  border-top:1px solid var(--line)}
.reply-body{flex:1; min-width:0; display:flex; flex-direction:column}
.reply-label{font-size:9px; color:var(--accent); letter-spacing:.15em}
.reply-preview{font-size:12.5px; color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-top:2px}
.reply-x{background:transparent; border:0; color:var(--dim); font-size:16px; width:30px; height:30px; cursor:pointer; flex:none}
.typing{padding:2px 16px 6px; font-size:11px; color:var(--accent); letter-spacing:.05em; opacity:.85}
.tdots{animation:flick 1.2s infinite}

.composer{display:flex; align-items:center; gap:8px; padding:8px 10px;
  border-top:1px solid var(--line); background:#020402}
.msg-input{flex:1; min-width:0; background:var(--panel); border:1px solid var(--line); color:var(--fg);
  font-family:var(--mono); font-size:16px; padding:11px 12px; border-radius:10px; outline:none;
  -webkit-user-select:text; user-select:text}
.msg-input:focus{border-color:var(--me-bd)}
.icon-btn.send{border-color:#0c3a26; color:var(--accent)}

/* EMOJI */
.emoji-panel{position:absolute; left:8px; right:8px; bottom:74px; background:var(--panel2);
  border:1px solid var(--line); border-radius:12px; padding:8px; display:grid;
  grid-template-columns:repeat(8,1fr); gap:4px; max-height:210px; overflow-y:auto; z-index:6}
.emoji-panel button{background:transparent; border:0; font-size:22px; padding:6px 0; cursor:pointer; border-radius:8px}
.emoji-panel button:active{background:var(--tint)}

/* MAPA */
.map-wrap{position:relative; flex:1; min-height:0}
#map{position:absolute; inset:0; background:#0a0f0c}
.map-state{position:absolute; right:10px; top:10px; z-index:500; font-size:10px; color:var(--accent);
  background:rgba(0,0,0,.62); border:1px solid var(--line); padding:5px 9px; border-radius:7px;
  letter-spacing:.14em; text-shadow:var(--glow); max-width:60%; text-align:right}
.map-fab{position:absolute; right:12px; bottom:12px; z-index:500; width:46px; height:46px; border-radius:50%;
  background:rgba(0,0,0,.72); border:1px solid var(--accent); color:var(--accent); font-size:22px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; text-shadow:var(--glow)}
.map-fab:active{background:var(--tint)}
.trail-toggle{position:absolute; left:12px; bottom:12px; z-index:500; background:rgba(0,0,0,.7);
  border:1px solid var(--line); color:var(--dim); font-family:var(--mono); font-size:10px; letter-spacing:.15em;
  padding:9px 12px; border-radius:8px; cursor:pointer}
.trail-toggle.on{border-color:var(--accent2); color:var(--accent2); text-shadow:var(--glow)}
.stop{width:13px; height:13px; border:2px solid #000; transform:rotate(45deg); box-shadow:0 0 5px currentColor}
.stop-self{background:var(--accent); color:var(--accent)}
.stop-peer{background:var(--accent2); color:var(--accent2)}
.geo-bar{display:flex; border-top:1px solid var(--line); background:#020402}
.geo-cell{flex:1; text-align:center; padding:8px 4px; border-right:1px solid var(--line)}
.geo-cell:last-child{border-right:0}
.geo-cell span{display:block; font-size:9px; color:var(--dim); letter-spacing:.15em}
.geo-cell b{display:block; font-size:clamp(12px,3.6vw,14px); color:var(--fg); font-weight:400; margin-top:3px}
.loc-toggle{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 16px; background:#020402; border-top:1px solid var(--line)}
.geo-actions{display:flex; gap:10px; padding:10px 14px; background:#020402}
.btn-toggle{flex:1; background:var(--panel); border:1px solid var(--line); color:var(--dim);
  font-family:var(--mono); font-size:clamp(10.5px,3vw,12px); letter-spacing:.1em; padding:13px 8px; border-radius:9px; cursor:pointer}
.btn-toggle.on{border-color:var(--accent); color:var(--accent); text-shadow:var(--glow); background:var(--tint)}
.geo-actions .btn-ghost{flex:1; margin:0; font-size:clamp(10.5px,3vw,12px); padding:13px 8px}

/* marcadores del mapa */
.mk{position:relative; width:22px; height:22px}
.mk-dot{position:absolute; left:50%; top:50%; width:15px; height:15px; margin:-7.5px 0 0 -7.5px; border-radius:50%;
  border:2px solid #000; box-shadow:0 0 8px currentColor}
.mk-ring{position:absolute; left:50%; top:50%; width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%;
  border:2px solid; animation:mkpulse 1.9s infinite}
.mk-self{color:var(--accent)} .mk-self .mk-dot{background:var(--accent); color:var(--accent)} .mk-self .mk-ring{border-color:var(--accent)}
.mk-peer{color:var(--accent2)} .mk-peer .mk-dot{background:var(--accent2); color:var(--accent2)} .mk-peer .mk-ring{border-color:var(--accent2)}
.mk.stale .mk-ring{animation:none; opacity:.25}
.mk.stale .mk-dot{opacity:.6}
@keyframes mkpulse{0%{transform:scale(.55);opacity:.85}100%{transform:scale(2.5);opacity:0}}

/* Leaflet: tema oscuro */
.leaflet-container{background:#0a0f0c; font-family:var(--mono); outline:none}
.leaflet-control-zoom a{background:#0a120d!important; color:var(--accent)!important; border-color:var(--line)!important;
  text-shadow:var(--glow); font-size:18px}
.leaflet-control-zoom a:hover{background:var(--tint)!important}
.leaflet-bar{border:1px solid var(--line); box-shadow:none}
.leaflet-control-attribution{background:rgba(0,0,0,.55)!important; color:#4f7a63!important; font-size:9px}
.leaflet-control-attribution a{color:#6f9a83!important}
.leaflet-popup-content-wrapper,.leaflet-popup-tip{background:#0a120d; color:var(--fg); border:1px solid var(--line); font-family:var(--mono)}
.leaflet-popup-content{font-size:11px; letter-spacing:.05em}

/* TABS */
.tabbar{display:flex; border-top:1px solid var(--line); background:#020402}
.tab{flex:1; background:transparent; border:0; color:var(--dim); font-family:var(--mono); font-size:12px;
  letter-spacing:.25em; padding:13px 0 calc(8px + env(safe-area-inset-bottom)); cursor:pointer; position:relative}
.tab.active{color:var(--accent); text-shadow:var(--glow)}
.tab.active::after{content:""; position:absolute; top:0; left:20%; right:20%; height:2px; background:var(--accent); box-shadow:var(--glow)}
.tab .badge{position:absolute; top:8px; right:calc(50% - 26px); background:var(--accent); color:#000;
  border-radius:10px; font-size:9px; padding:1px 5px; letter-spacing:0}

/* DRAWER */
.drawer{position:fixed; inset:0; z-index:70; background:rgba(0,0,0,.6); display:flex; justify-content:flex-end}
.drawer-panel{width:min(320px,86vw); background:var(--panel); border-left:1px solid var(--line);
  height:100%; padding:calc(18px + env(safe-area-inset-top)) 16px 18px; display:flex; flex-direction:column; gap:10px; overflow-y:auto}
.drawer-title{font-size:11px; color:var(--dim); letter-spacing:.3em; margin-bottom:4px}
.theme-row{display:flex; gap:12px; flex-wrap:wrap; padding:2px 2px 8px}
.theme-sw{width:34px; height:34px; border-radius:50%; border:2px solid #000; cursor:pointer; padding:0;
  box-shadow:0 0 0 1px var(--line); position:relative}
.theme-sw.on{box-shadow:0 0 0 2px #fff, 0 0 10px 1px currentColor}
.drawer-toggle{display:flex; align-items:center; justify-content:space-between; gap:10px;
  background:var(--panel2); border:1px solid var(--line); padding:12px; border-radius:9px}
.dt-label{font-size:13px; color:var(--fg); letter-spacing:.05em}
.dt-switch{width:48px; height:28px; border-radius:14px; background:#191919; border:1px solid var(--line);
  position:relative; flex:none; cursor:pointer; padding:0; transition:background .2s,border-color .2s}
.dt-switch.on{background:var(--accent); border-color:var(--accent); box-shadow:var(--glow)}
.dt-knob{position:absolute; top:2px; left:2px; width:22px; height:22px; border-radius:50%; background:#cfcfcf;
  transition:left .2s,background .2s}
.dt-switch.on .dt-knob{left:24px; background:#001a12}
.drawer-item{text-align:left; background:var(--panel2); border:1px solid var(--line); color:var(--fg);
  font-family:var(--mono); font-size:13px; padding:14px 12px; border-radius:9px; cursor:pointer; letter-spacing:.05em}
.drawer-item.danger{color:var(--danger); border-color:#3a0c0c}
.drawer-item:active{background:var(--tint)}
.drawer-note{font-size:10px; color:var(--dim); line-height:1.6; margin:-4px 2px 4px}
.drawer-foot{margin-top:auto; font-size:10px; color:var(--dim); line-height:1.7; padding-top:14px; border-top:1px solid var(--line)}
.drawer-close{background:transparent; border:1px solid var(--dim); color:var(--fg); font-family:var(--mono);
  padding:12px; border-radius:9px; letter-spacing:.2em; font-size:12px; cursor:pointer}

/* VISOR (sin descarga) */
.viewer{position:fixed; inset:0; z-index:90; background:#000; display:flex; align-items:center; justify-content:center}
.viewer-body{max-width:100vw; max-height:100vh; display:flex; align-items:center; justify-content:center}
.viewer-body img,.viewer-body video{max-width:100vw; max-height:100vh; object-fit:contain;
  -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; pointer-events:none}
.viewer-guard{position:absolute; inset:0; z-index:2} /* captura long-press/click-derecho */
.viewer-close{position:absolute; top:calc(12px + env(safe-area-inset-top)); right:14px; z-index:3;
  background:rgba(0,0,0,.5); border:1px solid var(--line); color:#fff; width:42px; height:42px;
  border-radius:50%; font-size:18px; cursor:pointer}

/* PIZARRÓN (dibujar con el dedo) */
.drawpad{position:fixed; inset:0; z-index:96; background:#000; display:flex; flex-direction:column;
  padding-top:env(safe-area-inset-top)}
.dp-bar{display:flex; align-items:center; gap:8px; padding:10px 12px; background:#050a07; border-bottom:1px solid var(--line)}
.dp-colors{flex:1; display:flex; gap:10px; justify-content:center; flex-wrap:wrap}
.dp-sw{width:28px; height:28px; border-radius:50%; border:2px solid #000; cursor:pointer;
  box-shadow:0 0 0 1px var(--line); padding:0}
.dp-sw.on{box-shadow:0 0 0 2px #fff}
.dp-btn{background:transparent; border:1px solid var(--line); color:var(--fg); width:42px; height:42px;
  border-radius:9px; font-size:19px; cursor:pointer; flex:none}
.dp-btn:active{background:var(--panel2)}
.dp-canvas{flex:1; width:100%; min-height:0; touch-action:none; display:block; background:#0a0f0c; cursor:crosshair}
.dp-send{margin:12px 14px calc(12px + env(safe-area-inset-bottom)); padding:15px; border-radius:10px;
  background:linear-gradient(180deg,var(--btn-a),var(--btn-b)); border:1px solid var(--accent); color:var(--accent);
  font-family:var(--mono); font-size:14px; letter-spacing:.2em; text-shadow:var(--glow); cursor:pointer}
.dp-send:active{background:var(--btn-b)}

::-webkit-scrollbar{width:6px; height:6px}
::-webkit-scrollbar-thumb{background:var(--me-bd); border-radius:3px}

/* adaptativo por tamaño de teléfono */
@media (max-width:360px){
  .brand-name{font-size:28px; letter-spacing:.35em}
  .topbar{padding:10px 10px}
  .icon-btn{width:37px; height:37px; font-size:16px}
  .composer{gap:6px; padding:8px 8px calc(8px + env(safe-area-inset-bottom))}
  .tab{font-size:11px; letter-spacing:.18em}
}
@media (min-height:900px){
  .msgs{padding-top:20px}
}
/* pantallas grandes (tablet/desktop): columna tipo teléfono centrada (sin transform, por Leaflet) */
@media (min-width:680px){
  #boot,#lock,#breach,#app,#decoy,#viewer{left:50%!important; right:auto!important; width:520px; margin-left:-260px;
    border-left:1px solid var(--line); border-right:1px solid var(--line)}
}

/* ===== MODO SEÑUELO (chatbot IA normal) ===== */
body.decoy-active .scanlines, body.decoy-active .vignette{display:none !important}
#decoy{background:#0f1117; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  letter-spacing:normal}
.dc-top{display:flex; align-items:center; gap:12px; padding:calc(12px + env(safe-area-inset-top)) 16px 12px;
  background:#151824; border-bottom:1px solid #23283a}
.dc-ava{width:38px; height:38px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
  font-size:19px; color:#fff; background:linear-gradient(135deg,#6d5efc,#3b82f6)}
.dc-id{flex:1; min-width:0}
.dc-name{font-size:16px; font-weight:600; color:#eef1f8}
.dc-status{font-size:11.5px; color:#7f8aa3; margin-top:1px}
.dc-status::before{content:"●"; color:#33d17a; font-size:9px; margin-right:5px; vertical-align:1px}
.dc-newbtn{background:transparent; border:0; color:#9aa4bd; font-size:20px; width:38px; height:38px; cursor:pointer; border-radius:9px}
.dc-newbtn:active{background:#23283a}
.dc-msgs{flex:1; overflow-y:auto; padding:18px 14px 8px; display:flex; flex-direction:column; gap:12px}
.dc-b{max-width:82%; padding:11px 14px; border-radius:18px; font-size:15px; line-height:1.45; word-wrap:break-word;
  overflow-wrap:anywhere; white-space:pre-wrap; -webkit-user-select:text; user-select:text}
.dc-b.bot{align-self:flex-start; background:#1e2233; color:#e7ebf5; border-bottom-left-radius:5px}
.dc-b.me{align-self:flex-end; background:linear-gradient(135deg,#6d5efc,#3b82f6); color:#fff; border-bottom-right-radius:5px}
.dc-typing{align-self:flex-start; display:flex; gap:5px; padding:12px 16px; margin:0 14px}
.dc-typing span{width:8px; height:8px; border-radius:50%; background:#566079; animation:dcbounce 1.3s infinite}
.dc-typing span:nth-child(2){animation-delay:.18s}
.dc-typing span:nth-child(3){animation-delay:.36s}
@keyframes dcbounce{0%,60%,100%{transform:translateY(0); opacity:.5}30%{transform:translateY(-5px); opacity:1}}
.dc-composer{display:flex; align-items:center; gap:10px; padding:12px 12px calc(12px + env(safe-area-inset-bottom));
  background:#151824; border-top:1px solid #23283a}
.dc-input{flex:1; min-width:0; background:#232838; border:1px solid #2f3550; color:#eef1f8;
  font-family:inherit; font-size:16px; padding:12px 15px; border-radius:22px; outline:none;
  -webkit-user-select:text; user-select:text}
.dc-input:focus{border-color:#4f78ff}
.dc-send{flex:none; width:44px; height:44px; border-radius:50%; border:0; cursor:pointer; color:#fff; font-size:17px;
  background:linear-gradient(135deg,#6d5efc,#3b82f6); display:flex; align-items:center; justify-content:center}
.dc-send:active{opacity:.85}

/* ===== AVISO DE ACTUALIZACIÓN ===== */
.update-bar{position:fixed; top:0; left:0; right:0; z-index:2000; border:0;
  background:var(--accent); color:#000; font-family:var(--mono); font-size:12px; font-weight:700;
  letter-spacing:.06em; padding:calc(env(safe-area-inset-top) + 9px) 12px 9px; text-align:center;
  cursor:pointer; box-shadow:0 3px 16px rgba(0,0,0,.55); animation:updIn .3s ease}
@keyframes updIn{from{transform:translateY(-100%)}to{transform:translateY(0)}}

/* ===== ESTADO VACÍO (canal sin mensajes) ===== */
.empty-hint{margin:auto; display:flex; flex-direction:column; align-items:center; gap:14px;
  color:var(--dim); text-align:center; padding:26px; opacity:.9; pointer-events:none}
.eh-glyph{font-size:42px; color:var(--accent); opacity:.55; text-shadow:var(--glow)}
.eh-text{font-size:12px; line-height:1.85; letter-spacing:.1em}

/* ===== PULSO (zumbido) ===== */
.pulse-fx{position:fixed; inset:0; z-index:1500; pointer-events:none; background:var(--accent); opacity:0}
.pulse-fx.go{animation:pulseFlash .55s ease}
@keyframes pulseFlash{0%{opacity:0}12%{opacity:.30}30%{opacity:.06}46%{opacity:.22}100%{opacity:0}}
.app-shake{animation:appShake .5s}
@keyframes appShake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(3px)}
  30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}

/* ===== REACCIONES + POPOVER DE ACCIONES ===== */
.msg-actions{position:fixed; z-index:1600; display:flex; align-items:center; gap:6px; padding:6px 6px 6px 10px;
  background:var(--panel2); border:1px solid var(--line); border-radius:26px; box-shadow:0 8px 24px rgba(0,0,0,.6)}
.react-row{display:flex; gap:1px}
.react-btn{background:transparent; border:0; font-size:22px; line-height:1; padding:4px 5px; cursor:pointer;
  border-radius:50%; transition:transform .12s}
.react-btn:active{transform:scale(1.3)}
.act-reply{background:transparent; border:0; border-left:1px solid var(--line); color:var(--dim);
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; padding:5px 9px 5px 11px; cursor:pointer; white-space:nowrap}
.reactions{display:flex; gap:4px; margin-top:5px; flex-wrap:wrap}
.msg.me .reactions{justify-content:flex-end}
.react-chip{font-size:12px; background:var(--tint); border:1px solid var(--line); border-radius:12px;
  padding:1px 7px; line-height:1.5}

/* ===== ALERTAS DE LLEGADA (geocercas) ===== */
.geo-toast{position:fixed; top:calc(env(safe-area-inset-top) + 8px); left:12px; right:12px; z-index:1900;
  background:var(--panel2); border:1px solid var(--accent2); color:var(--fg); border-radius:12px;
  padding:12px 14px; font-family:var(--mono); font-size:13px; letter-spacing:.04em; text-align:center;
  box-shadow:0 8px 24px rgba(0,0,0,.6); animation:updIn .3s ease}
.geo-items{display:flex; flex-direction:column; gap:8px; margin:2px 0 8px}
.geo-empty{color:var(--dim); font-size:11px; letter-spacing:.08em; padding:6px 2px; line-height:1.6}
.geo-item{display:flex; align-items:center; gap:10px; padding:9px 11px; background:var(--panel);
  border:1px solid var(--line); border-radius:10px}
.geo-item .gi-body{flex:1; min-width:0}
.geo-item .gi-name{font-size:13px; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.geo-item .gi-sub{font-size:10px; color:var(--dim); letter-spacing:.06em; margin-top:2px}
.geo-item .gi-del{flex:none; background:transparent; border:0; color:var(--dim); font-size:15px; cursor:pointer; width:28px; height:28px}
.geo-item.off{opacity:.5}
.geo-log-title{font-size:10px; color:var(--dim); letter-spacing:.25em; margin:14px 2px 4px; padding-top:12px; border-top:1px solid var(--line)}
.geo-log{display:flex; align-items:center; gap:8px; padding:5px 4px; font-size:12px; color:var(--fg)}
.geo-log .gl-ic{flex:none}
.geo-log .gl-txt{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.geo-log .gl-time{flex:none; font-size:10px; color:var(--dim); letter-spacing:.08em}
/* barra de colocación sobre el mapa */
.geo-place{position:fixed; left:0; right:0; bottom:calc(56px + env(safe-area-inset-bottom)); z-index:1200;
  background:var(--panel2); border-top:1px solid var(--accent2); padding:10px 12px calc(10px + env(safe-area-inset-bottom))}
.gp-row{display:flex; align-items:center; justify-content:space-between; gap:8px}
.gp-hint{font-size:11px; color:var(--dim); letter-spacing:.06em}
.gp-quick{display:flex; gap:6px; flex:none}
.gp-chip{background:var(--tint); border:1px solid var(--line); color:var(--fg); font-family:var(--mono);
  font-size:10px; padding:5px 8px; border-radius:14px; cursor:pointer; white-space:nowrap}
.gp-form{margin-top:10px; display:flex; flex-direction:column; gap:9px}
.gp-name{background:var(--panel); border:1px solid var(--line); color:var(--fg); font-family:var(--mono);
  font-size:16px; padding:10px 12px; border-radius:10px; outline:none}
.gp-name:focus{border-color:var(--accent2)}
.gp-radii{display:flex; gap:6px}
.gp-r{flex:1; background:var(--panel); border:1px solid var(--line); color:var(--dim); font-family:var(--mono);
  font-size:12px; padding:9px 0; border-radius:8px; cursor:pointer}
.gp-r.on{border-color:var(--accent2); color:var(--fg); box-shadow:inset 0 0 0 1px var(--accent2)}
.gp-actions{display:flex; gap:8px}
.gp-actions .btn-ghost,.gp-actions .btn-primary{flex:1; margin-top:0}
/* etiqueta de la geocerca en el mapa */
.fence-label{background:rgba(0,0,0,.6); border:1px solid var(--accent2); color:var(--fg);
  font-family:var(--mono); font-size:10px; letter-spacing:.05em; padding:2px 6px; border-radius:8px; white-space:nowrap}

/* ===== NOTAS DE VOZ ===== */
.rec-bar{position:absolute; left:0; right:0; bottom:0; z-index:40;
  display:flex; align-items:center; gap:12px; padding:8px 10px calc(8px + env(safe-area-inset-bottom));
  background:var(--panel2); border-top:1px solid var(--danger)}
.rec-dot{width:12px; height:12px; border-radius:50%; background:var(--danger); flex:none; animation:pulseRed 1s infinite}
.rec-time{flex:1; font-family:var(--mono); font-size:15px; color:var(--fg); letter-spacing:.08em}
/* reproductor de audio dentro de la burbuja */
.msg .media.audio{width:224px; height:auto; max-height:none; display:block; padding:7px 9px; cursor:default; background:transparent}
.msg .media.audio.loading{width:224px; height:48px}
.aud{display:flex; align-items:center; gap:9px}
.aud audio{display:none}
.aud-btn{width:36px; height:36px; border-radius:50%; border:1px solid var(--me-bd); background:var(--btn-b);
  color:var(--fg); font-size:13px; cursor:pointer; flex:none; display:flex; align-items:center; justify-content:center}
.aud-bar{flex:1; height:4px; border-radius:2px; background:rgba(255,255,255,.16); position:relative; cursor:pointer}
.aud-fill{position:absolute; left:0; top:0; bottom:0; width:0%; background:var(--accent); border-radius:2px}
.aud-time{font-size:10px; color:var(--dim); font-family:var(--mono); flex:none; min-width:30px; text-align:right}

/* ===== GALERÍA DE MEDIOS ===== */
.gal{position:fixed; inset:0; z-index:1300; background:var(--bg); display:flex; flex-direction:column}
.gal-top{display:flex; align-items:center; gap:10px; padding:calc(env(safe-area-inset-top) + 10px) 14px 10px;
  border-bottom:1px solid var(--line); background:var(--panel2)}
.gal-title{font-size:13px; letter-spacing:.25em; color:var(--fg)}
.gal-count{flex:1; font-size:10px; color:var(--dim); letter-spacing:.1em}
.gal-grid{flex:1; overflow-y:auto; display:grid; grid-template-columns:repeat(3,1fr); gap:3px;
  padding:3px 3px calc(env(safe-area-inset-bottom) + 3px); align-content:start}
.gal-cell{position:relative; aspect-ratio:1; background:#000; overflow:hidden; border-radius:4px; cursor:zoom-in;
  display:flex; align-items:center; justify-content:center; color:var(--dim); font-size:11px}
.gal-cell img,.gal-cell video{width:100%; height:100%; object-fit:cover; pointer-events:none; transition:opacity .3s ease}
.gal-cell.video::after{content:"▶"; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  color:#fff; text-shadow:0 0 10px rgba(0,0,0,.9); font-size:20px; pointer-events:none}
.gal-empty{grid-column:1/-1; color:var(--dim); font-size:11px; letter-spacing:.08em; text-align:center; padding:40px 20px; line-height:1.7}

/* ===== ACCESIBILIDAD: respetar movimiento reducido ===== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
  .scanlines,.vignette{display:none !important}
}