/* ═══════════════════════════════════════════════════════════════
   Conexão Cosmópolis — main.css v1.6.0
   Design tokens, layout base, componentes e módulo de usuários.
   ═══════════════════════════════════════════════════════════════ */

/* ── Design Tokens ──────────────────────────────────────────── */
:root {
  /* Paleta principal */
  --nos-accent:       #0284c7;   /* sky-600  */
  --nos-accent-hover: #0369a1;   /* sky-700  */
  --nos-accent-light: #e0f2fe;   /* sky-100  */
  --nos-secondary:    #7c3aed;   /* violet-600 */
  --nos-secondary-lt: #ede9fe;   /* violet-100 */
  --nos-live:         #dc2626;   /* red-600  */

  /* Superfícies */
  --nos-bg:           #f1f5f9;   /* slate-100 */
  --nos-white:        #ffffff;
  --nos-surface:      #ffffff;
  --nos-surface-2:    #f8fafc;   /* slate-50  */

  /* Texto */
  --nos-text:         #0f172a;   /* slate-900 */
  --nos-text-muted:   #475569;   /* slate-600 */
  --nos-text-faint:   #94a3b8;   /* slate-400 */

  /* Bordas */
  --nos-border:       #e2e8f0;   /* slate-200 */
  --nos-border-focus: #0284c7;

  /* Sombras */
  --nos-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.04);
  --nos-shadow-sm: 0 1px 4px rgb(0 0 0 / 0.06), 0 2px 8px rgb(0 0 0 / 0.04);
  --nos-shadow:    0 2px 8px rgb(0 0 0 / 0.08), 0 4px 16px rgb(0 0 0 / 0.04);
  --nos-shadow-lg: 0 4px 16px rgb(0 0 0 / 0.10), 0 8px 32px rgb(0 0 0 / 0.06);

  /* Raios */
  --nos-radius-sm:  0.375rem;
  --nos-radius:     0.75rem;
  --nos-radius-lg:  1.25rem;
  --nos-radius-xl:  1.75rem;
  --nos-radius-full: 9999px;

  /* Layout */
  --nos-navbar-h:         3.75rem;
  --nos-sidebar-left-w:   4.5rem;
  --nos-sidebar-right-w:  17rem;
  --nos-content-max:      42rem;

  /* Transições */
  --nos-transition: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --nos-transition-md: 220ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset base ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { background: var(--nos-bg); color: var(--nos-text); font-family: 'Inter', system-ui, sans-serif; font-size: 1rem; line-height: 1.6; min-height: 100dvh; }
img  { display: block; max-width: 100%; height: auto; }
a    { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
ul, ol { list-style: none; }
svg { flex-shrink: 0; }

/* ── Acessibilidade ─────────────────────────────────────────── */
.screen-reader-text { clip: rect(1px,1px,1px,1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal; }
.nos-skip-link { position: absolute; top: -100%; left: 0; z-index: 9999; padding: .5rem 1rem; background: var(--nos-accent); color: #fff; }
.nos-skip-link:focus { top: 0; }
:focus-visible { outline: 2px solid var(--nos-border-focus); outline-offset: 2px; border-radius: var(--nos-radius-sm); }

/* ── Layout principal ───────────────────────────────────────── */
.nos-layout {
  display: grid;
  grid-template-rows: var(--nos-navbar-h) 1fr;
  grid-template-columns: var(--nos-sidebar-left-w) 1fr var(--nos-sidebar-right-w);
  grid-template-areas:
    "navbar  navbar  navbar"
    "sidebar content right";
  min-height: 100dvh;
}

.nos-content {
  grid-area: content;
  max-width: var(--nos-content-max);
  width: 100%;
  margin: 0 auto;
  padding: 1.25rem 1rem 4rem;
}

/* ── Navbar ─────────────────────────────────────────────────── */
.nos-navbar {
  grid-area: navbar;
  position: sticky;
  top: 0;
  z-index: 200;
  height: var(--nos-navbar-h);
  background: var(--nos-white);
  border-bottom: 1px solid var(--nos-border);
  box-shadow: var(--nos-shadow-xs);
}

.nos-navbar__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 100%;
  padding-right: 1rem;
}

/* A marca ocupa a mesma largura da sidebar esquerda e centraliza o ícone
   nela, para que o logo fique alinhado com o ícone "Início" logo abaixo. */
.nos-navbar__brand {
  display: flex;
  align-items: center;
  gap: .625rem;
  height: 100%;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -.02em;
  color: var(--nos-text);
  white-space: nowrap;
  flex-shrink: 0;
}

.nos-navbar__brand-col {
  width: var(--nos-sidebar-left-w);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.nos-navbar__brand-icon {
  width: 2rem;
  height: 2rem;
  background: linear-gradient(135deg, var(--nos-accent), var(--nos-secondary));
  border-radius: var(--nos-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--nos-white);
  font-size: .75rem;
}

.nos-navbar__brand-text { line-height: 1; }

.nos-navbar__search {
  flex: 1;
  max-width: 26rem;
  position: relative;
}

.nos-navbar__search svg {
  position: absolute;
  left: .75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--nos-text-faint);
  pointer-events: none;
}

.nos-navbar__search input {
  width: 100%;
  padding: .5rem .75rem .5rem 2.25rem;
  border: 1.5px solid var(--nos-border);
  border-radius: var(--nos-radius-full);
  background: var(--nos-surface-2);
  font-size: .875rem;
  color: var(--nos-text);
  transition: border-color var(--nos-transition), box-shadow var(--nos-transition);
}

.nos-navbar__search input:focus {
  outline: none;
  border-color: var(--nos-border-focus);
  box-shadow: 0 0 0 3px var(--nos-accent-light);
  background: var(--nos-white);
}

.nos-navbar__actions {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
}

/* ── Horário local + clima ──────────────────────────────────── */
.nos-navbar__meta {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-shrink: 0;
  padding: 0 .25rem;
  border-left: 1px solid var(--nos-border);
  margin-left: .25rem;
}

.nos-navbar__clock,
.nos-navbar__weather {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .75rem;
  font-weight: 600;
  color: var(--nos-text-muted);
  white-space: nowrap;
}

.nos-navbar__clock svg { color: var(--nos-text-faint); flex-shrink: 0; }

.nos-navbar__weather-icon { font-size: .9rem; line-height: 1; }

@media (max-width: 900px) {
  .nos-navbar__meta { display: none; }
}

/* ── Sidebar Esquerda ───────────────────────────────────────── */
.nos-sidebar-left {
  grid-area: sidebar;
  position: sticky;
  top: var(--nos-navbar-h);
  height: calc(100dvh - var(--nos-navbar-h));
  width: var(--nos-sidebar-left-w);
  background: var(--nos-white);
  border-right: 1px solid var(--nos-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 100;
}

.nos-sidebar-left__nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: .75rem 0;
  gap: .25rem;
  overflow-y: auto;
  flex: 1;
}

.nos-sidebar-left__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .2rem;
  width: 3.25rem;
  min-height: 3.25rem;
  border-radius: var(--nos-radius);
  color: var(--nos-text-muted);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-transform: uppercase;
  transition: background var(--nos-transition), color var(--nos-transition);
  position: relative;
  border: none;
  background: transparent;
  text-align: center;
  padding: .25rem .125rem;
  cursor: pointer;
}

.nos-sidebar-left__item:hover {
  background: var(--nos-bg);
  color: var(--nos-accent);
}

.nos-sidebar-left__item--active {
  background: var(--nos-accent-light);
  color: var(--nos-accent);
}

.nos-sidebar-left__item--active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  height: 60%;
  width: 3px;
  background: var(--nos-accent);
  border-radius: 0 3px 3px 0;
}

.nos-sidebar-left__label {
  line-height: 1;
  max-width: 3rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nos-sidebar-left__divider {
  display: block;
  width: 2rem;
  height: 1px;
  background: var(--nos-border);
  margin: .375rem auto;
}

/* ── Sidebar Direita ────────────────────────────────────────── */
.nos-sidebar-right {
  grid-area: right;
  position: sticky;
  top: var(--nos-navbar-h);
  height: calc(100dvh - var(--nos-navbar-h));
  overflow-y: auto;
  padding: 1.25rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  border-left: 1px solid var(--nos-border);
  background: var(--nos-surface-2);
  scrollbar-width: thin;
  scrollbar-color: var(--nos-border) transparent;
}

/* ── Widgets ────────────────────────────────────────────────── */
.nos-widget {
  background: var(--nos-white);
  border: 1.5px solid var(--nos-border);
  border-radius: var(--nos-radius-lg);
  padding: 1rem;
  box-shadow: var(--nos-shadow-xs);
  transition: box-shadow var(--nos-transition);
}

.nos-widget:hover { box-shadow: var(--nos-shadow-sm); }

.nos-widget__title {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--nos-text-muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .875rem;
  padding-bottom: .625rem;
  border-bottom: 1.5px solid var(--nos-border);
}

/* Widget: Ao Vivo */
.nos-widget--live {
  border-color: #fca5a5;
  background: linear-gradient(135deg, #fff1f2 0%, #fff 100%);
}

.nos-widget--live .nos-widget__title { color: var(--nos-live); border-color: #fca5a5; }

.nos-live-list { display: flex; flex-direction: column; gap: .375rem; }

.nos-live-item {
  display: flex;
  flex-direction: column;
  gap: .125rem;
  padding: .5rem .625rem;
  border-radius: var(--nos-radius-sm);
  border-left: 3px solid transparent;
  transition: background var(--nos-transition), border-color var(--nos-transition), transform var(--nos-transition);
}

.nos-live-item:hover {
  background: #fff1f2;
  border-color: var(--nos-live);
  transform: translateX(3px);
}

.nos-live-item__title { font-size: .8125rem; font-weight: 600; color: var(--nos-text); line-height: 1.35; }
.nos-live-item__updates { font-size: .6875rem; color: var(--nos-live); font-weight: 500; }

/* Widget: Trending */
.nos-trending__list { display: flex; flex-direction: column; gap: .25rem; counter-reset: trending; }

.nos-trending__item {
  display: flex;
  align-items: flex-start;
  gap: .625rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--nos-border);
}

.nos-trending__item:last-child { border-bottom: none; padding-bottom: 0; }

.nos-trending__rank {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .6875rem;
  font-weight: 800;
  background: var(--nos-border);
  color: var(--nos-text-muted);
}

.nos-trending__item:nth-child(1) .nos-trending__rank { background: linear-gradient(135deg,#fbbf24,#f59e0b); color:#fff; }
.nos-trending__item:nth-child(2) .nos-trending__rank { background: linear-gradient(135deg,#94a3b8,#64748b); color:#fff; }
.nos-trending__item:nth-child(3) .nos-trending__rank { background: linear-gradient(135deg,#fb923c,#f97316); color:#fff; }

.nos-trending__data { flex: 1; min-width: 0; }
.nos-trending__topic { font-size: .8125rem; font-weight: 600; color: var(--nos-text); display: block; line-height: 1.35; transition: color var(--nos-transition); }
.nos-trending__topic:hover { color: var(--nos-accent); }
.nos-trending__count { font-size: .6875rem; color: var(--nos-text-faint); display: block; margin-top: .125rem; }

/* Widget: Mais Lidas */
.nos-widget__most-read-list { display: flex; flex-direction: column; gap: 0; }

.nos-widget__most-read-item {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--nos-border);
}

.nos-widget__most-read-item:last-child { border-bottom: none; }

.nos-widget__most-read-rank {
  font-size: .6875rem;
  font-weight: 800;
  color: var(--nos-text-faint);
  min-width: 1.25rem;
  flex-shrink: 0;
}

.nos-widget__most-read-thumb {
  width: 3rem;
  height: 2.25rem;
  border-radius: var(--nos-radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  background: var(--nos-bg);
}

.nos-widget__most-read-thumb img { width: 100%; height: 100%; object-fit: cover; }
.nos-widget__most-read-title { font-size: .8125rem; font-weight: 600; color: var(--nos-text); line-height: 1.35; display: block; transition: color var(--nos-transition); }
.nos-widget__most-read-title:hover { color: var(--nos-accent); }
.nos-widget__most-read-meta { font-size: .6875rem; color: var(--nos-text-faint); }

/* Widget: Tags */
.nos-tag-cloud { display: flex; flex-wrap: wrap; gap: .375rem; }

.nos-tag {
  display: inline-block;
  padding: .25rem .625rem;
  border-radius: var(--nos-radius-full);
  border: 1.5px solid var(--nos-border);
  font-size: .75rem;
  font-weight: 600;
  color: var(--nos-text-muted);
  background: var(--nos-surface-2);
  transition: all var(--nos-transition);
}

.nos-tag:hover { border-color: var(--nos-accent); color: var(--nos-accent); background: var(--nos-accent-light); }

/* Widget: Anúncio */
.nos-ad-banner {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: .875rem 1rem;
  border-radius: var(--nos-radius);
  background: linear-gradient(135deg, var(--nos-accent-light) 0%, var(--nos-secondary-lt) 100%);
  border: 1.5px solid var(--nos-border);
  transition: box-shadow var(--nos-transition);
}

.nos-ad-banner:hover { box-shadow: var(--nos-shadow); }

.nos-ad-banner__label { font-size: .625rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--nos-text-faint); }
.nos-ad-banner__title { font-size: .875rem; font-weight: 700; color: var(--nos-text); line-height: 1.3; }
.nos-ad-banner__sub { font-size: .75rem; color: var(--nos-text-muted); }
.nos-ad-banner__cta { font-size: .75rem; font-weight: 700; color: var(--nos-accent); margin-top: .25rem; }

/* Widget: Sidebar Footer */
.nos-sidebar-footer {
  background: var(--nos-white);
  border: 1.5px solid var(--nos-border);
  border-radius: var(--nos-radius-lg);
  padding: 1rem;
  margin-top: auto;
  font-size: .75rem;
  color: var(--nos-text-faint);
}

.nos-sidebar-footer__brand { font-weight: 700; color: var(--nos-text-muted); margin-bottom: .125rem; }
.nos-sidebar-footer__tagline { color: var(--nos-text-faint); font-size: .6875rem; }

.nos-sidebar-footer__menu {
  display: flex;
  flex-wrap: wrap;
  gap: .375rem .75rem;
}

.nos-sidebar-footer__menu a { font-size: .6875rem; color: var(--nos-text-faint); transition: color var(--nos-transition); }
.nos-sidebar-footer__menu a:hover { color: var(--nos-accent); }
.nos-sidebar-footer__copy { font-size: .6875rem; }

/* ── Botões ─────────────────────────────────────────────────── */
.nos-btn {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  padding: .5rem 1rem;
  border-radius: var(--nos-radius-full);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1;
  border: 1.5px solid transparent;
  transition: all var(--nos-transition);
  cursor: pointer;
  background: transparent;
  color: var(--nos-text-muted);
  white-space: nowrap;
}

.nos-btn--primary { background: var(--nos-accent); color: #fff; border-color: var(--nos-accent); }
.nos-btn--primary:hover { background: var(--nos-accent-hover); border-color: var(--nos-accent-hover); box-shadow: 0 4px 12px rgb(2 132 199 / .25); }

.nos-btn--ghost { border-color: var(--nos-border); color: var(--nos-text-muted); background: transparent; }
.nos-btn--ghost:hover { border-color: var(--nos-accent); color: var(--nos-accent); background: var(--nos-accent-light); }

.nos-btn--sm { padding: .3125rem .75rem; font-size: .75rem; }
.nos-btn--lg { padding: .6875rem 1.5rem; font-size: .9375rem; }

/* ── Cards base ─────────────────────────────────────────────── */
.nos-card {
  background: var(--nos-white);
  border-radius: var(--nos-radius-lg);
  border: 1.5px solid var(--nos-border);
  overflow: hidden;
  box-shadow: var(--nos-shadow-xs);
  transition: box-shadow var(--nos-transition-md), transform var(--nos-transition-md);
  position: relative;
}

.nos-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--nos-accent), var(--nos-secondary));
  opacity: 0;
  transition: opacity var(--nos-transition-md);
  z-index: 1;
}

.nos-card:hover {
  box-shadow: var(--nos-shadow);
  transform: translateY(-2px);
}

.nos-card:hover::before { opacity: 1; }

.nos-card__category-badge {
  display: inline-block;
  padding: .125rem .5rem;
  border-radius: var(--nos-radius-full);
  background: var(--nos-accent-light);
  color: var(--nos-accent);
  font-size: .6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── Grid de Usuários ───────────────────────────────────────── */

/* Hero da página /usuarios/ */
.nos-usuarios {
  container-type: inline-size;
}

.nos-usuarios__hero {
  background: linear-gradient(135deg, var(--nos-accent) 0%, var(--nos-secondary) 100%);
  border-radius: var(--nos-radius-xl);
  padding: 2rem 1.5rem 1.5rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
}

.nos-usuarios__hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  pointer-events: none;
}

.nos-usuarios__title {
  font-size: 1.875rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.03em;
  position: relative;
  z-index: 1;
}

.nos-usuarios__count {
  font-size: .9375rem;
  color: rgb(255 255 255 / .8);
  margin-top: .25rem;
  position: relative;
  z-index: 1;
}

.nos-usuarios__count strong { color: #fff; }

.nos-usuarios__search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  margin-top: 1.25rem;
  position: relative;
  z-index: 1;
}

.nos-usuarios__search-wrap {
  flex: 1;
  min-width: 0;
  position: relative;
}

.nos-usuarios__search-wrap svg {
  position: absolute;
  left: .875rem;
  top: 50%;
  transform: translateY(-50%);
  color: rgb(255 255 255 / .6);
  pointer-events: none;
}

.nos-usuarios__search input {
  width: 100%;
  padding: .625rem .875rem .625rem 2.25rem;
  border: 1.5px solid rgb(255 255 255 / .3);
  border-radius: var(--nos-radius-full);
  background: rgb(255 255 255 / .15);
  backdrop-filter: blur(8px);
  font-size: .9375rem;
  color: #fff;
  transition: border-color var(--nos-transition), background var(--nos-transition);
}

.nos-usuarios__search input::placeholder { color: rgb(255 255 255 / .5); }

.nos-usuarios__search input:focus {
  outline: none;
  border-color: rgb(255 255 255 / .7);
  background: rgb(255 255 255 / .25);
}

.nos-usuarios__body { padding-bottom: 2rem; }

.nos-usuarios__list {
  display: grid;
  grid-template-columns: repeat( auto-fill, minmax( 14rem, 1fr ) );
  gap: 1rem;
}

/* Card de usuário */
.nos-usuario-card {
  background: var(--nos-white);
  border: 1.5px solid var(--nos-border);
  border-radius: var(--nos-radius-lg);
  overflow: hidden;
  box-shadow: var(--nos-shadow-xs);
  transition: box-shadow var(--nos-transition-md), transform var(--nos-transition-md);
  display: flex;
  flex-direction: column;
}

.nos-usuario-card:hover { box-shadow: var(--nos-shadow); transform: translateY(-3px); }

.nos-usuario-card__cover {
  height: 4.5rem;
  position: relative;
  flex-shrink: 0;
}

.nos-usuario-card__avatar-wrap {
  position: absolute;
  bottom: -.875rem;
  left: 1rem;
}

.nos-usuario-card__avatar {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  border: 3px solid var(--nos-white);
  object-fit: cover;
  box-shadow: var(--nos-shadow-sm);
}

.nos-usuario-card__body {
  padding: 1.625rem .875rem .875rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  flex: 1;
}

.nos-usuario-card__name {
  font-size: .9375rem;
  font-weight: 700;
  color: var(--nos-text);
  transition: color var(--nos-transition);
  line-height: 1.2;
}

.nos-usuario-card__name:hover { color: var(--nos-accent); }

.nos-usuario-card__username { font-size: .75rem; color: var(--nos-text-faint); }

.nos-usuario-card__bio {
  font-size: .8125rem;
  color: var(--nos-text-muted);
  line-height: 1.45;
  margin-top: .25rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nos-usuario-card__stats {
  display: flex;
  gap: .75rem;
  margin-top: .5rem;
}

.nos-usuario-card__stat {
  display: flex;
  flex-direction: column;
  gap: .0625rem;
}

.nos-usuario-card__stat strong { font-size: .875rem; font-weight: 700; color: var(--nos-text); }
.nos-usuario-card__stat span   { font-size: .6875rem; color: var(--nos-text-faint); }

.nos-usuario-card__joined { font-size: .6875rem; color: var(--nos-text-faint); margin-top: .375rem; }

.nos-usuario-card__footer {
  display: flex;
  gap: .5rem;
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid var(--nos-border);
}

.nos-usuario-card__footer .nos-btn { flex: 1; justify-content: center; }

/* Paginação */
.nos-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .75rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1.5px solid var(--nos-border);
}

.nos-pagination__info { font-size: .875rem; color: var(--nos-text-muted); }
.nos-pagination__info strong { color: var(--nos-text); }

/* Empty states */
.nos-usuarios__empty,
.nos-salvos__empty,
.nos-salvos__auth-wall {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--nos-text-muted);
}

.nos-usuarios__empty h2,
.nos-salvos__empty h2,
.nos-salvos__auth-wall h2 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--nos-text);
  margin-bottom: .5rem;
}

.nos-usuarios__empty p,
.nos-salvos__empty p,
.nos-salvos__auth-wall p { font-size: .9375rem; color: var(--nos-text-muted); }

/* ── Página de Salvos ───────────────────────────────────────── */
.nos-salvos { container-type: inline-size; }

.nos-salvos__header {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1.5px solid var(--nos-border);
}

.nos-salvos__title {
  display: flex;
  align-items: center;
  gap: .625rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--nos-text);
  letter-spacing: -.02em;
}

.nos-salvos__subtitle { font-size: .875rem; color: var(--nos-text-muted); margin-top: .25rem; }

.nos-salvos__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
  gap: .75rem;
}

.nos-salvos__count { font-size: .875rem; color: var(--nos-text-muted); }
.nos-salvos__count strong { color: var(--nos-text); }

.nos-salvos__grid {
  display: grid;
  grid-template-columns: repeat( auto-fill, minmax( 15rem, 1fr ) );
  gap: 1rem;
}

/* Card individual de salvo */
.nos-saved-card {
  background: var(--nos-white);
  border: 1.5px solid var(--nos-border);
  border-radius: var(--nos-radius-lg);
  overflow: hidden;
  box-shadow: var(--nos-shadow-xs);
  transition: box-shadow var(--nos-transition-md), transform var(--nos-transition-md);
  display: flex;
  flex-direction: column;
  position: relative;
}

.nos-saved-card:hover { box-shadow: var(--nos-shadow); transform: translateY(-2px); }

.nos-saved-card__media-link { display: block; }

.nos-saved-card__media {
  height: 8rem;
  overflow: hidden;
  margin: 0;
  background: var(--nos-bg);
}

.nos-saved-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 350ms ease;
}

.nos-saved-card:hover .nos-saved-card__media img { transform: scale(1.04); }

.nos-saved-card__body {
  padding: .875rem;
  display: flex;
  flex-direction: column;
  gap: .375rem;
  flex: 1;
}

.nos-saved-card__meta { display: flex; flex-wrap: wrap; gap: .375rem; align-items: center; }

.nos-saved-card__title {
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--nos-text);
}

.nos-saved-card__title a { transition: color var(--nos-transition); }
.nos-saved-card__title a:hover { color: var(--nos-accent); }

.nos-saved-card__excerpt {
  font-size: .8125rem;
  color: var(--nos-text-muted);
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.nos-saved-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
  padding-top: .625rem;
  border-top: 1px solid var(--nos-border);
}

.nos-saved-card__time {
  font-size: .6875rem;
  color: var(--nos-text-faint);
}

.nos-unsave-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  border: 1.5px solid var(--nos-border);
  background: transparent;
  color: var(--nos-accent);
  cursor: pointer;
  transition: background var(--nos-transition), color var(--nos-transition), border-color var(--nos-transition);
}

.nos-unsave-btn:hover {
  background: #fee2e2;
  border-color: var(--nos-live);
  color: var(--nos-live);
}

/* ── Status dots ────────────────────────────────────────────── */
.nos-status-dot {
  display: inline-block;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}

.nos-status-dot--pulse {
  animation: nos-pulse 1.5s ease-in-out infinite;
}

@keyframes nos-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.7); }
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1200px) {
  :root { --nos-sidebar-right-w: 14rem; }
}

@media (max-width: 1024px) {
  .nos-layout {
    grid-template-columns: var(--nos-sidebar-left-w) 1fr;
    grid-template-areas:
      "navbar  navbar"
      "sidebar content";
  }

  .nos-sidebar-right { display: none; }
}

@media (max-width: 768px) {
  :root { --nos-sidebar-left-w: 0px; }

  .nos-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "navbar"
      "content";
  }

  .nos-sidebar-left {
    position: fixed;
    left: -100%;
    top: var(--nos-navbar-h);
    width: 16rem;
    z-index: 300;
    transition: left var(--nos-transition-md);
    border-right: none;
    box-shadow: var(--nos-shadow-lg);
  }

  .nos-sidebar-left--open { left: 0; }

  .nos-content { padding: 1rem .875rem 5rem; }

  .nos-usuarios__list { grid-template-columns: repeat( auto-fill, minmax( 10rem, 1fr ) ); }

  .nos-salvos__grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .nos-usuarios__list { grid-template-columns: 1fr 1fr; }
  .nos-usuarios__search { flex-direction: column; align-items: stretch; }
}