/* Shared top bar of the panel: left (Conversaciones | Salir), brand, right (Comercios | Configuración).
   Uses each page's colour tokens (--panel, --border, --text, --muted, --accent, --accent-ink, --chip). */
.topnav { position: sticky; top: 0; z-index: 4; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 10px 16px; background: var(--panel); border-bottom: 1px solid var(--border); }
.topnav .group { display: flex; gap: 8px; }
.topnav .group.right { justify-content: flex-end; }
.topnav .brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--text); white-space: nowrap; }
.topnav .brand svg { width: 22px; height: 22px; }
.topnav .navbtn { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--border); background: var(--panel); color: var(--text); font: 500 14px/1.2 system-ui, -apple-system, "Segoe UI", sans-serif; text-decoration: none; white-space: nowrap; transition: background .15s, border-color .15s; }
.topnav .navbtn:hover { background: var(--chip); }
.topnav .navbtn.active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 600; }
/* Right group (Comercios, Chats de comercios): inverted colours, so it is always clear whether you are
   on the Together Devs side (left) or on the clients side (right). */
.topnav .group.right .navbtn:not(.logout) { background: var(--text); border-color: var(--text); color: var(--panel); }
.topnav .group.right .navbtn:not(.logout):hover { filter: brightness(1.25); }
.topnav .group.right .navbtn.active:not(.logout) { background: var(--panel); border: 2px solid var(--accent); color: var(--accent); padding: 6px 13px; }

/* Salir: red, so it never reads as navigation. */
.topnav .navbtn.logout { color: #c2322b; border-color: rgb(194 50 43 / .45); }
.topnav .navbtn.logout:hover { background: #c2322b; border-color: #c2322b; color: #fff; }
@media (prefers-color-scheme: dark) { .topnav .navbtn.logout { color: #f06a62; border-color: rgb(240 106 98 / .45); } }
@media (max-width: 640px) {
  .topnav { grid-template-columns: 1fr 1fr; }
  .topnav .brand { display: none; }
  .topnav .navbtn { padding: 6px 10px; font-size: 13px; }
}