/* N24 Social — Layout completo estilo X/Twitter ======================== */
:root {
  --x-bg:           #000000;
  --x-bg-modal:     rgba(0,0,0,.6);
  --x-surface:      #000000;
  --x-border:       #2f3336;
  --x-text:         #e7e9ea;
  --x-text-sub:     #71767b;
  --x-accent:       #cc0000;      /* rojo N24 */
  --x-accent-h:     #e60000;
  --x-blue:         #1d9bf0;
  --x-gold:         #f4af17;
  --x-red-badge:    #b71c1c;
  --x-hover:        rgba(255,255,255,.03);
  --x-hover-strong: rgba(255,255,255,.07);
  --x-like:         #f91880;
  --x-repost:       #00ba7c;
  --x-nav-w:        275px;
  --x-feed-w:       600px;
  --x-side-w:       350px;
  --x-font:         -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

/* ── Reset scoped ─────────────────────────────────────────────────────── */
.n24x-root *, .n24x-root *::before, .n24x-root *::after { box-sizing: border-box; margin: 0; padding: 0; }
.n24x-root a { color: inherit; text-decoration: none; }
.n24x-root button { font-family: var(--x-font); cursor: pointer; }
.n24x-root img { display: block; }

/* ── Full-page shell ──────────────────────────────────────────────────── */
#n24x-app {
  display: flex;
  justify-content: center;
  min-height: 100vh;
  background: var(--x-bg);
  color: var(--x-text);
  font-family: var(--x-font);
  font-size: 15px;
  line-height: 1.5;
}

/* ── Left nav ─────────────────────────────────────────────────────────── */
#n24x-nav {
  width: var(--x-nav-w);
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 0 12px;
  overflow-y: auto;
  flex-shrink: 0;
}
.n24x-logo {
  padding: 12px;
  margin-bottom: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  transition: background .15s;
}
.n24x-logo:hover { background: var(--x-hover-strong); }
.n24x-logo svg, .n24x-logo img { width: 30px; height: 30px; }
.n24x-nav-item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 12px;
  border-radius: 9999px;
  font-size: 20px;
  font-weight: 400;
  color: var(--x-text);
  transition: background .15s;
  white-space: nowrap;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.n24x-nav-item:hover { background: var(--x-hover-strong); }
.n24x-nav-item.active { font-weight: 700; }
.n24x-nav-item svg { width: 26px; height: 26px; fill: currentColor; flex-shrink: 0; }
.n24x-nav-label { font-size: 20px; }
.n24x-post-btn {
  margin: 16px 0;
  background: var(--x-accent);
  color: #fff;
  border: none;
  border-radius: 9999px;
  padding: 16px 0;
  font-size: 17px;
  font-weight: 700;
  width: 90%;
  max-width: 230px;
  text-align: center;
  display: block;
  transition: background .15s;
  cursor: pointer;
  text-decoration: none;
}
.n24x-post-btn:hover { background: var(--x-accent-h); }
.n24x-nav-user {
  margin-top: auto;
  padding: 12px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: background .15s;
  cursor: pointer;
}
.n24x-nav-user:hover { background: var(--x-hover-strong); }
.n24x-nav-user img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.n24x-nav-user-info { flex: 1; min-width: 0; }
.n24x-nav-user-name { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n24x-nav-user-handle { color: var(--x-text-sub); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n24x-nav-user-dots { color: var(--x-text-sub); font-size: 20px; }

/* ── Center column ────────────────────────────────────────────────────── */
#n24x-main {
  width: var(--x-feed-w);
  min-height: 100vh;
  border-left: 1px solid var(--x-border);
  border-right: 1px solid var(--x-border);
  flex-shrink: 0;
}

/* ── Sticky header ────────────────────────────────────────────────────── */
.n24x-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: rgba(0,0,0,.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--x-border);
}
.n24x-header-inner {
  padding: 16px;
  font-size: 20px;
  font-weight: 700;
}
.n24x-tabs {
  display: flex;
  border-bottom: 1px solid var(--x-border);
}
.n24x-tab {
  flex: 1;
  padding: 16px;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  color: var(--x-text-sub);
  cursor: pointer;
  border: none;
  background: none;
  color: var(--x-text-sub);
  transition: background .15s;
  position: relative;
}
.n24x-tab:hover { background: var(--x-hover); color: var(--x-text); }
.n24x-tab.active { color: var(--x-text); font-weight: 700; }
.n24x-tab.active::after {
  content: '';
  position: absolute;
  bottom: 0; left: 50%;
  transform: translateX(-50%);
  width: 56px; height: 4px;
  border-radius: 9999px;
  background: var(--x-accent);
}

/* ── Composer ─────────────────────────────────────────────────────────── */
.n24x-composer {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--x-border);
}
.n24x-composer-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.n24x-composer-body { flex: 1; }
.n24x-composer-textarea {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--x-text);
  font-size: 20px;
  line-height: 1.5;
  resize: none;
  min-height: 56px;
  font-family: var(--x-font);
  padding: 8px 0;
}
.n24x-composer-textarea::placeholder { color: var(--x-text-sub); }
.n24x-composer-divider { height: 1px; background: var(--x-border); margin: 8px 0; }
.n24x-composer-tools {
  display: flex;
  align-items: center;
  gap: 4px;
}
.n24x-composer-tool {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--x-accent);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
  cursor: pointer;
}
.n24x-composer-tool:hover { background: rgba(204,0,0,.1); }
.n24x-composer-tool svg { fill: currentColor; width: 20px; height: 20px; }
.n24x-composer-tool label { cursor: pointer; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.n24x-composer-counter {
  margin-left: auto;
  font-size: 15px;
  color: var(--x-text-sub);
  margin-right: 12px;
}
.n24x-composer-counter.warn   { color: var(--x-gold); }
.n24x-composer-counter.danger { color: #f44; }
.n24x-submit-btn {
  background: var(--x-accent);
  color: #fff;
  border: none;
  border-radius: 9999px;
  padding: 8px 20px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.n24x-submit-btn:hover { background: var(--x-accent-h); }
.n24x-submit-btn:disabled { opacity: .5; cursor: not-allowed; }
.n24x-media-preview {
  position: relative;
  margin-top: 12px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--x-border);
}
.n24x-media-preview img { width: 100%; max-height: 300px; object-fit: cover; }
.n24x-media-remove {
  position: absolute; top: 8px; left: 8px;
  background: rgba(0,0,0,.75);
  color: #fff; border: none; border-radius: 50%;
  width: 30px; height: 30px; font-size: 14px; cursor: pointer;
}
.n24x-login-prompt {
  padding: 20px 16px;
  border-bottom: 1px solid var(--x-border);
  color: var(--x-text-sub);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.n24x-login-prompt p { margin: 0; font-size: 15px; }
.n24x-btn-login, .n24x-btn-register {
  border-radius: 9999px; padding: 8px 20px; font-size: 15px; font-weight: 700;
  border: none; cursor: pointer; transition: background .15s; text-decoration: none;
  display: inline-flex; align-items: center;
}
.n24x-btn-login    { background: var(--x-accent); color: #fff; }
.n24x-btn-login:hover { background: var(--x-accent-h); }
.n24x-btn-register { background: transparent; color: var(--x-text); border: 1px solid var(--x-border); }
.n24x-btn-register:hover { background: var(--x-hover-strong); }

/* ── Post card ────────────────────────────────────────────────────────── */
.n24x-card {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--x-border);
  cursor: pointer;
  transition: background .15s;
}
.n24x-card:hover { background: var(--x-hover); }
.n24x-card-avatar-col { flex-shrink: 0; }
.n24x-card-avatar {
  width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
}
.n24x-card-avatar:hover { opacity: .85; }
.n24x-card-body { flex: 1; min-width: 0; }
.n24x-card-head {
  display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap;
  margin-bottom: 2px;
}
.n24x-card-name {
  font-weight: 700; font-size: 15px; color: var(--x-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.n24x-card-name:hover { text-decoration: underline; }
.n24x-card-handle {
  color: var(--x-text-sub); font-size: 15px; white-space: nowrap;
}
.n24x-card-dot { color: var(--x-text-sub); font-size: 15px; }
.n24x-card-time { color: var(--x-text-sub); font-size: 15px; white-space: nowrap; }
.n24x-card-menu {
  margin-left: auto; background: none; border: none;
  color: var(--x-text-sub); width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; transition: background .15s, color .15s;
}
.n24x-card-menu:hover { background: rgba(204,0,0,.1); color: var(--x-accent); }
.n24x-card-content { font-size: 15px; color: var(--x-text); line-height: 1.6; word-break: break-word; }
.n24x-card-content p { margin: 0 0 4px; }
/* News article card inside feed */
.n24x-card-news-link {
  display: block;
  margin-top: 12px;
  border: 1px solid var(--x-border);
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .15s;
}
.n24x-card-news-link:hover { border-color: var(--x-text-sub); }
.n24x-card-news-img { width: 100%; height: 200px; object-fit: cover; }
.n24x-card-news-meta { padding: 12px; }
.n24x-card-news-domain { color: var(--x-text-sub); font-size: 13px; margin-bottom: 4px; }
.n24x-card-news-title { font-size: 15px; font-weight: 700; color: var(--x-text); line-height: 1.3; }
.n24x-card-news-excerpt { font-size: 13px; color: var(--x-text-sub); margin-top: 4px; line-height: 1.4; }
/* Media */
.n24x-card-media {
  margin-top: 12px; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--x-border);
}
.n24x-card-media img { width: 100%; max-height: 400px; object-fit: cover; }
/* Actions */
.n24x-card-actions {
  display: flex; align-items: center;
  margin-top: 12px; justify-content: space-between; max-width: 425px;
}
.n24x-action {
  display: flex; align-items: center; gap: 6px;
  color: var(--x-text-sub); font-size: 13px;
  background: none; border: none; cursor: pointer;
  padding: 0; transition: color .15s; text-decoration: none;
}
.n24x-action svg { width: 18px; height: 18px; fill: currentColor; }
.n24x-action-wrap {
  display: flex; align-items: center; gap: 6px;
  border-radius: 9999px; padding: 6px; margin: -6px;
  transition: background .15s;
}
.n24x-action:hover .n24x-action-wrap { background: rgba(29,155,240,.1); }
.n24x-action:hover { color: var(--x-blue); }
.n24x-action--like:hover { color: var(--x-like); }
.n24x-action--like:hover .n24x-action-wrap { background: rgba(249,24,128,.1); }
.n24x-action--liked { color: var(--x-like) !important; }
.n24x-action--liked svg { fill: var(--x-like); }
.n24x-action--repost:hover { color: var(--x-repost); }
.n24x-action--repost:hover .n24x-action-wrap { background: rgba(0,186,124,.1); }
.n24x-action--share:hover { color: var(--x-blue); }

/* ── Badge ────────────────────────────────────────────────────────────── */
.n24x-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 50%;
  font-size: 10px; font-weight: 900; color: #fff;
  margin-left: 2px; vertical-align: middle; flex-shrink: 0;
}
.n24x-badge--blue { background: var(--x-blue); }
.n24x-badge--gold { background: var(--x-gold); color: #000; }
.n24x-badge--red  { background: var(--x-red-badge); }

/* ── Load more ────────────────────────────────────────────────────────── */
.n24x-load-more {
  padding: 20px 16px; text-align: center;
  border-bottom: 1px solid var(--x-border);
}
.n24x-load-more-btn {
  color: var(--x-accent); background: none; border: none;
  font-size: 15px; font-weight: 500; cursor: pointer;
  padding: 12px 24px; border-radius: 9999px;
  transition: background .15s;
}
.n24x-load-more-btn:hover { background: rgba(204,0,0,.1); }
.n24x-empty { padding: 40px 16px; text-align: center; color: var(--x-text-sub); font-size: 17px; }

/* ── Right sidebar ────────────────────────────────────────────────────── */
#n24x-sidebar {
  width: var(--x-side-w);
  padding: 0 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  flex-shrink: 0;
}
.n24x-search-bar {
  position: sticky;
  top: 0;
  background: var(--x-bg);
  padding: 12px 0;
  z-index: 5;
}
.n24x-search-input-wrap {
  background: #202327;
  border-radius: 9999px;
  display: flex; align-items: center;
  padding: 10px 16px; gap: 12px;
}
.n24x-search-input-wrap svg { fill: var(--x-text-sub); width: 20px; height: 20px; flex-shrink: 0; }
.n24x-search-input-wrap input {
  background: none; border: none; outline: none;
  color: var(--x-text); font-size: 15px; font-family: var(--x-font); flex: 1;
}
.n24x-search-input-wrap input::placeholder { color: var(--x-text-sub); }
.n24x-sidebar-box {
  background: #16181c; border-radius: 16px; padding: 16px; margin: 12px 0;
}
.n24x-sidebar-box h2 { font-size: 20px; font-weight: 800; margin-bottom: 12px; }
.n24x-trend {
  padding: 12px 0; border-bottom: 1px solid var(--x-border);
  cursor: pointer; transition: background .15s;
  border-radius: 4px; padding: 8px 4px;
}
.n24x-trend:hover { background: var(--x-hover-strong); }
.n24x-trend:last-child { border-bottom: none; }
.n24x-trend-cat { font-size: 13px; color: var(--x-text-sub); }
.n24x-trend-term { font-size: 15px; font-weight: 700; color: var(--x-text); margin: 2px 0; }
.n24x-trend-posts { font-size: 13px; color: var(--x-text-sub); }
.n24x-show-more {
  color: var(--x-accent); font-size: 15px; margin-top: 8px;
  display: block; cursor: pointer; background: none; border: none;
  text-align: left; padding: 4px 0; transition: color .15s;
}
.n24x-show-more:hover { color: var(--x-accent-h); }
/* Suggested users */
.n24x-suggest-user {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px; transition: background .15s; border-radius: 4px; cursor: pointer;
}
.n24x-suggest-user:hover { background: var(--x-hover-strong); }
.n24x-suggest-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.n24x-suggest-info { flex: 1; min-width: 0; }
.n24x-suggest-name { font-weight: 700; font-size: 15px; color: var(--x-text); display: flex; align-items: center; gap: 4px; }
.n24x-suggest-handle { font-size: 13px; color: var(--x-text-sub); }
.n24x-follow-btn {
  border: 1px solid var(--x-text); background: transparent; color: var(--x-text);
  border-radius: 9999px; padding: 6px 16px; font-weight: 700; cursor: pointer;
  font-family: var(--x-font); font-size: 14px; transition: background .15s; flex-shrink: 0;
}
.n24x-follow-btn:hover { background: var(--x-hover-strong); }
.n24x-follow-btn.following { border-color: var(--x-accent); color: var(--x-accent); }
/* Copyright */
.n24x-sidebar-footer {
  font-size: 13px; color: var(--x-text-sub); padding: 16px 4px; line-height: 1.8;
}
.n24x-sidebar-footer a { color: var(--x-text-sub); }
.n24x-sidebar-footer a:hover { text-decoration: underline; }

/* ── Profile page ─────────────────────────────────────────────────────── */
.n24x-profile-cover {
  width: 100%; height: 200px;
  background: #333 center/cover no-repeat;
}
.n24x-profile-header { padding: 16px; border-bottom: 1px solid var(--x-border); }
.n24x-profile-top { display: flex; justify-content: space-between; align-items: flex-start; }
.n24x-profile-avatar {
  width: 80px; height: 80px; border-radius: 50%; object-fit: cover;
  border: 4px solid var(--x-bg); margin-top: -44px; display: block;
}
.n24x-profile-edit-btn {
  border: 1px solid var(--x-border); background: transparent; color: var(--x-text);
  border-radius: 9999px; padding: 8px 16px; font-weight: 700; cursor: pointer;
  font-family: var(--x-font); font-size: 15px; margin-top: 4px;
}
.n24x-profile-name {
  font-size: 20px; font-weight: 800; color: var(--x-text); margin: 8px 0 2px;
  display: flex; align-items: center; gap: 4px;
}
.n24x-profile-handle { font-size: 15px; color: var(--x-text-sub); }
.n24x-profile-bio { font-size: 15px; color: var(--x-text); margin: 8px 0; line-height: 1.5; }
.n24x-profile-meta { display: flex; gap: 16px; color: var(--x-text-sub); font-size: 15px; margin: 4px 0 12px; flex-wrap: wrap; }
.n24x-profile-meta span { display: flex; align-items: center; gap: 4px; }
.n24x-profile-meta svg { fill: currentColor; width: 18px; height: 18px; }
.n24x-profile-stats { display: flex; gap: 20px; font-size: 14px; }
.n24x-profile-stats a { color: var(--x-text); text-decoration: none; }
.n24x-profile-stats a:hover { text-decoration: underline; }
.n24x-profile-stats strong { color: var(--x-text); }
.n24x-profile-stats span  { color: var(--x-text-sub); }
.n24x-profile-tabs { display: flex; border-bottom: 1px solid var(--x-border); }
.n24x-profile-tab {
  flex: 1; padding: 16px; text-align: center; font-size: 15px; font-weight: 500;
  color: var(--x-text-sub); cursor: pointer; border: none; background: none;
  transition: background .15s; position: relative; text-decoration: none; display: block;
}
.n24x-profile-tab:hover { background: var(--x-hover); color: var(--x-text); }
.n24x-profile-tab.active { color: var(--x-text); font-weight: 700; }
.n24x-profile-tab.active::after {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 56px; height: 4px; border-radius: 9999px; background: var(--x-accent);
}

/* ── Toast ────────────────────────────────────────────────────────────── */
.n24x-toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--x-accent); color: #fff; padding: 12px 24px;
  border-radius: 9999px; font-size: 15px; font-weight: 600;
  z-index: 9999; opacity: 0; transition: opacity .25s; pointer-events: none;
  white-space: nowrap;
}
.n24x-toast.show { opacity: 1; }

/* ── Spinner ──────────────────────────────────────────────────────────── */
.n24x-spinner {
  display: flex; justify-content: center; padding: 24px;
}
.n24x-spinner::after {
  content: ''; width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--x-border); border-top-color: var(--x-accent);
  animation: n24x-spin .7s linear infinite;
}
@keyframes n24x-spin { to { transform: rotate(360deg); } }

/* ── Mobile ───────────────────────────────────────────────────────────── */
@media (max-width: 1280px) {
  #n24x-sidebar { display: none; }
  #n24x-app { justify-content: flex-end; }
  #n24x-nav { width: 88px; }
  .n24x-nav-label { display: none; }
  .n24x-post-btn { width: 50px; height: 50px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 24px; }
  .n24x-nav-user-info, .n24x-nav-user-dots { display: none; }
}
@media (max-width: 700px) {
  #n24x-app { flex-direction: column; }
  #n24x-nav {
    position: fixed; bottom: 0; left: 0; right: 0; top: auto;
    width: 100%; height: 56px; flex-direction: row; padding: 0 8px;
    border-top: 1px solid var(--x-border); border-right: none;
    background: rgba(0,0,0,.95); z-index: 100; overflow: visible;
    align-items: center; justify-content: space-around;
  }
  #n24x-main { width: 100%; padding-bottom: 56px; }
  .n24x-logo, .n24x-nav-user, .n24x-post-btn { display: none; }
  .n24x-nav-item { padding: 8px; width: auto; gap: 0; }
  .n24x-nav-label { display: none; }
  .n24x-card-avatar { width: 40px; height: 40px; }
  .n24x-profile-cover { height: 130px; }
  .n24x-profile-avatar { width: 64px; height: 64px; margin-top: -36px; }
}

/* ── Shortcode fallback (non-full-page) ─────────────────────────────── */
.n24s-wrap #n24x-app {
  max-width: 100%; min-height: unset;
}
.n24s-wrap #n24x-nav, .n24s-wrap #n24x-sidebar { display: none; }
.n24s-wrap #n24x-main { width: 100%; border: none; }