/* interfaz.css — Barra superior, capas del mapa, buscador y burbujas de chat */

/* ---------- Barra superior ---------- */
.topbar {
  position: absolute; top: 12px; left: 12px; right: 12px; z-index: 10;
  display: flex; gap: 8px; align-items: center; pointer-events: none;
}
.topbar > * { pointer-events: auto; }
.pill {
  background: var(--vidrio); border: 1px solid var(--line); border-radius: var(--r-pill);
  color: var(--txt); display: flex; align-items: center; gap: 8px; padding: 8px 14px; min-height: 44px;
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: var(--sh-md);
}
.brand-mini { font-family: var(--f-titulo); font-weight: 800; letter-spacing: -0.04em; font-size: 18px; padding-left: 8px; }
.brand-mini .marca { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--azul); flex: 0 0 auto; }
.brand-mini .dot { color: #84b94b; }
.searchwrap { flex: 1; position: relative; max-width: 460px; min-width: 0; }
.searchwrap .ico-buscar { position: absolute; z-index: 1; left: 15px; top: 50%; transform: translateY(-50%); color: var(--mut); pointer-events: none; width: 18px; height: 18px; }
.searchwrap input {
  appearance: none; -webkit-appearance: none;
  width: 100%; height: 44px; padding: 0 16px 0 42px; border-radius: var(--r-pill); border: 1px solid var(--line);
  background: var(--vidrio); color: var(--txt); font-size: 14px; outline: none;
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: var(--sh-md); transition: border-color .15s, box-shadow .15s;
}
.searchwrap input::placeholder { color: var(--mut); }
.searchwrap input:focus { border-color: var(--azul); box-shadow: var(--sh-md), 0 0 0 3px color-mix(in srgb, var(--azul) 16%, transparent); }
.searchwrap input::-webkit-search-cancel-button { display: none; }
.me { cursor: pointer; transition: transform .12s var(--ease); padding: 5px 14px 5px 5px; font-weight: 600; }
.me:hover { transform: translateY(-1px); }
.avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  font-weight: 700; font-size: 13px; color: var(--lima-txt); background: var(--lima);
  border: 2px solid var(--panel);
}
@media (max-width: 560px) {
  .brand-mini .txt, #meName { display: none; }
  .brand-mini { padding: 8px; }
  .me { padding: 5px; }
}

/* ---------- Capas del mapa (chips) ---------- */
.layers {
  position: absolute; left: 12px; right: 12px; bottom: 16px; z-index: 10; display: flex; gap: 6px;
  overflow-x: auto; scrollbar-width: none; pointer-events: none; padding: 2px;
}
.layers::-webkit-scrollbar { display: none; }
.layers button {
  pointer-events: auto; flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px;
  background: var(--vidrio); border: 1px solid var(--line); color: var(--mut); border-radius: var(--r-pill);
  padding: 7px 13px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: var(--sh-sm); transition: all .15s var(--ease);
}
.layers button i { width: 9px; height: 9px; border-radius: 50%; background: var(--c, var(--azul)); opacity: .35; transition: opacity .15s; }
.layers button:hover { color: var(--txt); }
.layers button.on { background: var(--panel); color: var(--txt); border-color: color-mix(in srgb, var(--c, var(--azul)) 45%, transparent); box-shadow: var(--sh-md); }
.layers button.on i { opacity: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, var(--azul)) 22%, transparent); }

/* ---------- Resultados del buscador ---------- */
.search-results {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 30;
  display: none; flex-direction: column; max-height: 60vh; overflow-y: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg);
  box-shadow: var(--sh-lg); padding: 6px;
}
.search-results.open { display: flex; animation: sheetIn .18s ease; }
.sr-item { display: flex; align-items: center; gap: 12px; padding: 9px 10px; cursor: pointer; border-radius: 12px; color: var(--txt); transition: background .12s; }
.sr-item:hover { background: var(--tinte); }
.sr-ico { width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--campo); font-size: 17px; color: var(--azul); flex: 0 0 auto; }
.sr-ico .ico { width: 18px; height: 18px; }
.sr-txt { flex: 1; min-width: 0; }
.sr-txt b { display: block; font-size: 13.5px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-txt small { color: var(--mut); font-size: 12px; }
.sr-lugar { margin-top: 4px; border-top: 1px solid var(--line); border-radius: 0 0 12px 12px; }
.sr-lugar .sr-ico { background: var(--marca-suave); }

/* ---------- Burbujas de chat ---------- */
.msg { display: flex; flex-direction: column; max-width: 80%; animation: bubIn .2s ease; }
.msg.mine { align-self: flex-end; align-items: flex-end; }
.msg.their { align-self: flex-start; align-items: flex-start; }
.msg .bub { padding: 9px 14px; border-radius: 18px; font-size: 14px; line-height: 1.45; word-break: break-word; white-space: pre-wrap; }
.msg.mine .bub { background: var(--azul); color: #fff; border-bottom-right-radius: 6px; }
.msg.their .bub { background: var(--panel-2); color: var(--txt); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.msg .t { font-size: 10.5px; color: var(--mut); margin: 3px 6px 0; }
@keyframes bubIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sheetIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
#chatInput { background: var(--campo) !important; border-color: var(--line-2) !important; }