/* Social Nebu · cabecera y barra de abajo compartidas (Perfil, Clasificados, Nebulog).
   Es la misma cabecera que el chat: papel con puntitos, borde negro y la línea rosa. */
:root {
  --nn-paper: #f7f4ec; --nn-ink: #17173a; --nn-pink: #ff3d8b; --nn-blue: #2238c9;
  --nn-dot: rgba(34, 56, 201, .13); --nn-card: #ffffff; --nn-muted: #6b7079; --nn-soft: #e5eee9;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --nn-paper: #15132c; --nn-ink: #f7f4ec; --nn-pink: #ff5c9d; --nn-blue: #8c9bff; --nn-dot: rgba(140, 155, 255, .15); --nn-card: #1b1b38; --nn-muted: #a9a9c8; --nn-soft: #24244a; }
}
:root[data-theme="dark"] { --nn-paper: #15132c; --nn-ink: #f7f4ec; --nn-pink: #ff5c9d; --nn-blue: #8c9bff; --nn-dot: rgba(140, 155, 255, .15); --nn-card: #1b1b38; --nn-muted: #a9a9c8; --nn-soft: #24244a; }

.nn-top {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 12px;
  padding: 10px 18px; padding-top: max(10px, env(safe-area-inset-top));
  background: var(--nn-paper) radial-gradient(var(--nn-dot) 1.2px, transparent 1.4px) 0 0 / 14px 14px;
  border-bottom: 2px solid var(--nn-ink); box-shadow: 0 4px 0 var(--nn-pink);
  font-family: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif; margin-bottom: 4px;
  /* Ocupa todo el ancho aunque la página tenga el contenido centrado */
  margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
.nn-brand { display: flex; align-items: center; gap: 12px; min-width: 0; text-decoration: none; color: var(--nn-ink); }
.nn-logo { width: 36px; height: 36px; flex: none; border-radius: 8px; border: 2px solid var(--nn-ink); box-shadow: 3px 3px 0 var(--nn-ink); background: var(--nn-pink); }
.nn-site { font-family: 'Anton', Impact, sans-serif; font-size: 26px; text-transform: uppercase; letter-spacing: .03em; color: var(--nn-pink); line-height: 1; white-space: nowrap; }
.nn-sep { width: 2px; height: 34px; background: var(--nn-pink); }
.nn-tit { font-family: 'Anton', Impact, sans-serif; font-size: 26px; text-transform: uppercase; letter-spacing: .03em; color: var(--nn-ink); line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nn-modos { display: flex; gap: 4px; margin: 0 auto 0 18px; }
.nn-modos a { border: 2px solid transparent; color: var(--nn-ink); font-weight: 800; padding: 7px 14px; border-radius: 999px; font-size: 14px; text-decoration: none; white-space: nowrap; }
.nn-modos a:hover { border-color: var(--nn-ink); }
.nn-modos a[aria-current="page"] { background: var(--nn-ink); color: var(--nn-paper); }
.nn-der { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.nn-pill { font-weight: 700; font-size: 14px; text-decoration: none; padding: 6px 12px; border-radius: 999px; background: var(--nn-paper); color: var(--nn-ink); border: 2px solid var(--nn-ink); box-shadow: 2px 2px 0 var(--nn-ink); white-space: nowrap; }
.nn-pill:hover, .nn-pill[aria-current="page"] { background: var(--nn-pink); color: #fff; }
.nn-me { display: flex; align-items: center; gap: 8px; padding: 4px 14px 4px 4px; border-radius: 999px; background: #fff; color: #17173a; border: 2px solid var(--nn-ink); box-shadow: 3px 3px 0 var(--nn-ink); font-weight: 800; font-size: 14px; text-decoration: none; white-space: nowrap; }
.nn-me[aria-current="page"], .nn-me:hover { background: var(--nn-pink); color: #fff; }
.nn-me-ico { width: 28px; height: 28px; border-radius: 50%; background: var(--nn-blue); color: #fff; display: grid; place-items: center; font-size: 14px; }
.nn-abajo { display: none; }
.nn-cel { display: none; }

@media (max-width: 800px) {
  .nn-top { padding: 6px 8px; padding-top: max(6px, env(safe-area-inset-top)); gap: 8px; }
  .nn-logo { width: 30px; height: 30px; }
  .nn-site, .nn-sep, .nn-modos, .nn-pc { display: none; }
  .nn-cel { display: inline; }
  .nn-tit { font-size: 22px; }
  .nn-pill { padding: 6px 10px; }
  .nn-me { padding: 3px; }
  .nn-me span:not(.nn-me-ico) { display: none; }
  .nn-abajo {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; justify-content: space-around;
    padding: 4px 4px max(4px, env(safe-area-inset-bottom)); background: var(--nn-card); border-top: 2px solid var(--nn-ink);
    font-family: 'Archivo', system-ui, sans-serif;
  }
  .nn-abajo a { flex: 1; display: grid; justify-items: center; gap: 1px; padding: 6px 2px; color: var(--nn-muted); font-size: 11px; font-weight: 800; border-radius: 12px; text-decoration: none; }
  .nn-abajo a span { font-size: 21px; line-height: 1.1; }
  .nn-abajo a[aria-current="page"] { color: var(--nn-ink); background: var(--nn-soft); }
  body.nn-con-abajo { padding-bottom: 76px; }
}
/* Adentro del chat (el Nebulog se abre en una ventana): sin cabecera propia */
.adentro .nn-top, .adentro .nn-abajo { display: none !important; }
.adentro body.nn-con-abajo { padding-bottom: 0; }
html { overflow-x: clip; } /* que el ancho completo de la cabecera no genere scroll de costado */
@media (max-width: 800px) { #nebuInstall { display: none !important; } } /* en el celu el botón de instalar queda en el chat */