/* =============================================================================
   ECONEXO — forum home & discussion page on top of BuddyBoss
   Visual reference: econexo_foros_maquette_* / econexo_chat_maquette_* (Sept 2026)
   Loaded after every parent stylesheet. Scoped to .econexo-* and body classes.
   ========================================================================== */

:root {
  --ex-bg: #f4f7fb;
  --ex-surface: #ffffff;
  --ex-surface-2: #f8fbff;
  --ex-text: #0f172a;
  --ex-muted: #64748b;
  --ex-line: #e2e8f0;
  --ex-line-soft: #e7eaf2;
  --ex-violet: #8b5cf6;      /* EcoFarma purple */
  --ex-violet-deep: #6d28d9;
  --ex-violet-ink: #4c1d95;
  --ex-violet-tint: #f3e8ff;
  --ex-violet-line: #ddd6fe;
  --ex-yellow: #fecd36;      /* EcoFarma yellow */
  --ex-yellow-bg: #fff36d;
  --ex-yellow-line: #facc15;
  --ex-green: #16a34a;
  --ex-blue: #2563eb;
  --ex-danger: #dc2626;
  --ex-bubble-in: #ffffff;
  --ex-bubble-out: #f3e8ff;
  --ex-shadow: 0 18px 40px rgba(15, 23, 42, .08);
  --ex-shadow-soft: 0 8px 18px rgba(15, 23, 42, .06);
  --ex-r-xl: 28px;
  --ex-r-lg: 22px;
  --ex-r-md: 16px;
  --ex-r-sm: 12px;
  --ex-drawer: 360px;
}

/* -----------------------------------------------------------------------------
   Shared building blocks
   -------------------------------------------------------------------------- */

.econexo-section { margin: 0 0 26px; }
.econexo-section-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 0 14px; }
.econexo-section-head h2 { margin: 0; font-size: 1.3rem; letter-spacing: -.03em; color: var(--ex-text); font-weight: 700; }

.econexo-banner-wrap { overflow: hidden; border-radius: var(--ex-r-xl); background: var(--ex-violet-deep); box-shadow: 0 20px 46px rgba(55, 35, 105, .16); }
.econexo-banner { display: block; width: 100%; height: auto; }
.econexo-topic-banner .econexo-banner { aspect-ratio: 3 / 1; object-fit: cover; }

.econexo-legal {
  margin-top: 14px; padding: 14px 16px; display: flex; gap: 12px; align-items: flex-start;
  background: var(--ex-yellow-bg); border: 2px solid var(--ex-yellow-line); border-radius: 18px;
  color: #3f2d00; font-size: .9rem; line-height: 1.5; box-shadow: 0 8px 20px rgba(202, 138, 4, .16);
}
.econexo-legal b { color: #b91c1c; }
.econexo-legal-alert {
  width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ex-danger); color: #fff; font-weight: 800; font-size: 1rem; line-height: 1;
  box-shadow: 0 4px 10px rgba(220, 38, 38, .22);
}

.econexo-pill { display: inline-flex; align-items: center; padding: 5px 10px; border-radius: 999px; font-size: .72rem; font-weight: 700; line-height: 1; }
.econexo-pill--sticky { background: #fff8db; color: #92400e; border: 1px solid #fde68a; }
.econexo-pill--closed { background: #fdf2f8; color: #9d174d; border: 1px solid #fbcfe8; }

/* Visible keyboard focus everywhere we add interactive elements. */
.econexo-quick-card:focus-visible,
.econexo-resource-item:focus-visible,
.econexo-rel-card:focus-visible,
.econexo-product-card:focus-visible,
.econexo-intro-toggle:focus-visible,
.econexo-carousel-btn:focus-visible { outline: 3px solid var(--ex-violet); outline-offset: 3px; }

/* -----------------------------------------------------------------------------
   Forum home (bbp_is_forum_archive)
   -------------------------------------------------------------------------- */

.econexo-forum-home #primary { max-width: 1240px; }
.econexo-forum-home .econexo-hero { margin-bottom: 26px; }

/* Quick links */
.econexo-quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.econexo-quick-card {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px;
  background: var(--ex-surface); border: 1px solid var(--ex-line-soft); border-radius: var(--ex-r-lg);
  box-shadow: 0 8px 18px rgba(15, 23, 42, .05); color: var(--ex-text); text-decoration: none;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.econexo-quick-card:hover { transform: translateY(-2px); border-color: #ddd3ff; box-shadow: 0 14px 28px rgba(76, 29, 149, .09); color: var(--ex-text); }
.econexo-quick-icon {
  width: 58px; height: 58px; flex: 0 0 58px; padding: 6px; border-radius: 15px; display: grid; place-items: center;
  background: linear-gradient(180deg, #f6f2ff, #ece6ff); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
.econexo-quick-card:nth-child(3) .econexo-quick-icon { background: linear-gradient(180deg, #fff8db, #fff0a8); }
.econexo-quick-icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.econexo-quick-card strong { display: block; margin-bottom: 4px; font-size: .95rem; font-weight: 700; }
.econexo-quick-card span span { display: block; color: var(--ex-muted); font-size: .81rem; line-height: 1.48; }

/* "Foros" head + search (native BuddyBoss search form, restyled) */
.econexo-forums-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin: 0 0 22px; }
.econexo-forums-head h2 { margin: 0; font-size: 2rem; line-height: 1; letter-spacing: -.035em; color: var(--ex-text); font-weight: 700; }
.econexo-forum-search { width: min(290px, 100%); margin: 0; }
.econexo-forum-search .bs-search-form { position: relative; }
.econexo-forum-search input[type="search"],
.econexo-forum-search input[type="text"] {
  width: 100%; height: 44px; padding: 0 40px 0 14px; border: 1px solid #d9dee8; border-radius: 10px; background: #fff;
  font-size: .86rem; color: #334155; box-shadow: none;
}
.econexo-forum-search input:focus { border-color: #b89cff; box-shadow: 0 0 0 4px rgba(133, 90, 250, .12); outline: none; }
.econexo-forum-search .search-form_reset { right: 10px; }

/* Native forum cards → mockup card */
.econexo-forum-index .bb-forums-list.grid-view { gap: 20px; }
.econexo-forum-index .bb-cover-list-item {
  background: var(--ex-surface); border: 1px solid #d7dce5; border-radius: 12px; overflow: hidden;
  box-shadow: 0 6px 18px rgba(15, 23, 42, .035);
}
.econexo-forum-index .bb-cover-list-item .bb-cover-wrap { padding-top: 47.8%; } /* 2.09:1 like the mockup */
.econexo-forum-index .bb-cover-list-item .bb-forum-content-wrap,
.econexo-forum-index .bb-cover-list-item .bs-card-forum-details { padding: 21px 24px 19px; min-height: 176px; }
.econexo-forum-index .bb-cover-list-item .bbp-forum-title { font-size: 1.12rem; line-height: 1.25; letter-spacing: -.015em; font-weight: 700; }
.econexo-forum-index .bb-cover-list-item .bb-forum-content { color: #475569; font-size: .82rem; line-height: 1.55; }
.econexo-forum-index .bb-cover-list-item .forums-meta { color: #9aa2af; font-size: .8rem; }

/* Native topic list → discussion rows */
.econexo-discussions .bs-forums-items { border: 1px solid #d7dce5; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 6px 18px rgba(15, 23, 42, .035); }
.econexo-discussions .bs-forums-items .bs-header-item { background: #fff; }
.econexo-discussions .bs-forums-items .bs-section-title { font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }
.econexo-discussions .bs-forums-items .bs-item-wrap { border-top: 1px solid #eef1f6; padding: 14px 18px; transition: background .15s ease; }
.econexo-discussions .bs-forums-items .bs-item-wrap:not(.bs-header-item):hover { background: #faf8ff; }
.econexo-discussions .bs-forums-items .item-title .bbp-topic-permalink { font-weight: 700; color: var(--ex-text); }
.econexo-discussions .bs-forums-items .forum-label a { background: var(--ex-violet-tint); color: var(--ex-violet-ink); border-radius: 999px; padding: 4px 10px; font-size: .72rem; font-weight: 700; }
.econexo-discussions .bs-forums-items .item-meta { color: var(--ex-muted); font-size: .8rem; }

/* Pagination (native links, mockup look) */
.econexo-forum-index .bbp-pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0 0; }
.econexo-forum-index .bbp-pagination-count { color: #64748b; font-size: .82rem; }
.econexo-forum-index .bbp-pagination-links { display: flex; gap: 6px; }
.econexo-forum-index .bbp-pagination-links a,
.econexo-forum-index .bbp-pagination-links span {
  min-width: 38px; height: 38px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #d9dee8; border-radius: 10px; background: #fff; color: #334155; font-size: .84rem; font-weight: 600; text-decoration: none;
}
.econexo-forum-index .bbp-pagination-links a:hover { border-color: #b89cff; color: var(--ex-violet-ink); }
.econexo-forum-index .bbp-pagination-links span.current { background: var(--ex-violet); border-color: var(--ex-violet); color: #fff; }
.econexo-forum-index .bbp-pagination-links span.dots { border: 0; background: transparent; }

/* -----------------------------------------------------------------------------
   Discussion / topic page (bbp_is_single_topic)
   -------------------------------------------------------------------------- */

.econexo-topic #primary { max-width: 1240px; }
.econexo-topic-hero { margin-bottom: 18px; }

.econexo-topic-layout.bb-grid { display: grid !important; grid-template-columns: minmax(0, 1fr) var(--ex-drawer); gap: 16px; align-items: start; margin: 0; }
.econexo-topic-layout > .replies-content,
.econexo-topic-layout > .econexo-drawer { width: auto !important; max-width: none !important; flex: none !important; padding: 0 !important; margin: 0 !important; min-width: 0; }

/* Chat shell */
.econexo-chat-shell {
  background: var(--ex-surface); border: 1px solid var(--ex-line); border-radius: var(--ex-r-xl);
  box-shadow: var(--ex-shadow-soft); overflow: hidden; display: flex; flex-direction: column;
}
.econexo-chat-shell .bbp-breadcrumb { padding: 12px 16px 0; font-size: .78rem; color: var(--ex-muted); }
.econexo-chat-shell .bbp-breadcrumb a { color: var(--ex-violet-deep); }

/* Lead card (chat header) */
.econexo-lead { margin: 0 !important; border: 0 !important; box-shadow: none !important; background: transparent !important; border-radius: 0 !important; }
.econexo-lead-card {
  display: block !important; padding: 16px !important; border: 0 !important;
  border-bottom: 1px solid var(--ex-line) !important; border-radius: 0 !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%) !important;
}
.econexo-lead-top { display: flex; align-items: flex-start; gap: 12px; }
.econexo-lead-avatar { flex: 0 0 48px; }
.econexo-lead-avatar img { width: 48px; height: 48px; border-radius: 18px; object-fit: cover; background: var(--ex-violet-tint); }
.econexo-lead-main { flex: 1 1 auto; min-width: 0; }
.econexo-lead-forum .forum-label a { display: inline-block; margin-bottom: 6px; padding: 4px 10px; border-radius: 999px; background: var(--ex-violet-tint); color: var(--ex-violet-ink); font-size: .72rem; font-weight: 700; }
.econexo-lead-title.bb-reply-topic-title { margin: 0; font-size: 1.15rem; line-height: 1.3; letter-spacing: -.02em; font-weight: 700; color: var(--ex-text); }
.econexo-lead-meta { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: .78rem; color: #94a3b8; }
.econexo-lead-meta a { color: var(--ex-violet-deep); font-weight: 600; }
.econexo-lead-states { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }

.econexo-lead-intro { margin-top: 12px; color: #475569; font-size: .92rem; line-height: 1.65; }
/* The body is only clamped once JS has confirmed it actually overflows (adds
   .is-collapsible). Short intros like "hola grupo" are never clamped, so the
   "Ver más" toggle never appears for them. */
.econexo-lead-intro-body { transition: max-height .25s ease; }
.econexo-lead-intro.is-collapsible .econexo-lead-intro-body { max-height: 108px; overflow: hidden; }
.econexo-lead-intro.is-collapsible.is-open .econexo-lead-intro-body { max-height: none; }
.econexo-lead-intro-body p { margin: 0 0 9px; }
.econexo-lead-intro-body p:last-child { margin-bottom: 0; }
.econexo-intro-toggle { margin-top: 10px; padding: 0; border: 0; background: transparent; color: var(--ex-violet-deep); font-weight: 700; cursor: pointer; font-size: .85rem; }
.econexo-intro-toggle:hover { color: #8b5cf6; }
.econexo-intro-toggle[hidden] { display: none; }

/* Messages area. A comfortable min-height only when there are replies; when the
   thread is empty the block sizes to its "no replies yet" message instead of
   reserving a big blank gap. */
.econexo-messages {
  flex: 1 1 auto; min-height: 120px; padding: 14px 16px 10px;
  background: radial-gradient(circle at top right, rgba(168, 85, 247, .08), transparent 26%), linear-gradient(180deg, #f9fbff 0%, #f2f6fb 100%);
}
.econexo-messages.has-replies { min-height: 280px; }
.econexo-messages .bs-forums-items,
.econexo-messages .bb-single-reply-list { margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.econexo-messages .bb-single-reply-list > li { list-style: none; margin: 0 0 10px; padding: 0; border: 0; }
.econexo-messages .bbp-threaded-replies { margin: 8px 0 0 44px; padding: 0; }
.econexo-messages .bbp-threaded-replies > li { list-style: none; margin: 0 0 8px; }

.econexo-msg { display: flex; gap: 10px; max-width: 82%; align-items: flex-start; }
.econexo-msg--out { margin-left: auto; flex-direction: row-reverse; }
.econexo-msg-avatar { flex: 0 0 36px; margin-top: 2px; }
.econexo-msg-avatar img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: linear-gradient(135deg, #c4b5fd, #ddd6fe); }
.econexo-bubble-wrap { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.econexo-msg--out .econexo-bubble-wrap { align-items: flex-end; }
.econexo-msg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 8px; font-size: .75rem; color: #94a3b8; }
.econexo-msg-author { margin: 0; font-size: .8rem; font-weight: 700; color: var(--ex-text); }
.econexo-msg-author a { color: inherit; }
.econexo-role { padding: 2px 7px; border-radius: 999px; background: #eef2ff; color: #3730a3; font-size: .68rem; font-weight: 700; }
.econexo-bubble {
  padding: 11px 13px; border-radius: 18px; border: 1px solid var(--ex-line); background: var(--ex-bubble-in);
  box-shadow: var(--ex-shadow-soft); font-size: .9rem; line-height: 1.5; color: var(--ex-text); word-wrap: break-word; overflow-wrap: anywhere;
}
.econexo-bubble p:last-child { margin-bottom: 0; }
.econexo-msg--in .econexo-bubble { border-bottom-left-radius: 6px; }
.econexo-msg--out .econexo-bubble { background: var(--ex-bubble-out); border-color: var(--ex-violet-line); border-bottom-right-radius: 6px; }
.econexo-msg-actions { display: flex; align-items: center; gap: 10px; font-size: .75rem; }
.econexo-msg-actions .bbp-reply-to-link,
.econexo-msg-actions .bbp-topic-reply-link { color: var(--ex-violet-deep); font-weight: 700; }
.econexo-msg-actions .bbp-meta { margin: 0; }

.econexo-empty-replies { padding: 18px 12px 6px; text-align: center; color: var(--ex-muted); font-size: .88rem; display: grid; gap: 4px; }
.econexo-empty-replies strong { color: var(--ex-text); }

.econexo-topic .bbp-pagination.replies { margin: 10px 0 0; }

/* Composer (native reply flow) */
.econexo-composer {
  display: flex; align-items: center; gap: 12px; padding: 14px 16px 16px;
  border-top: 1px solid var(--ex-line); background: #fff;
}
.econexo-composer-avatar { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 44px; object-fit: cover; }
.econexo-composer-avatar--guest { display: block; background: linear-gradient(135deg, #c4b5fd, #ddd6fe); }
.econexo-composer-actions { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.econexo-composer .bbp-topic-reply-link,
.econexo-composer .bbp-topic-login-link {
  display: inline-flex; align-items: center; justify-content: center; height: 42px; padding: 0 20px; border-radius: 999px;
  background: linear-gradient(90deg, #6d28d9, #8b5cf6); color: #fff !important; font-weight: 700; font-size: .88rem;
  box-shadow: 0 8px 16px rgba(109, 40, 217, .18); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease;
}
.econexo-composer .bbp-topic-reply-link:hover,
.econexo-composer .bbp-topic-login-link:hover { transform: translateY(-1px); box-shadow: 0 12px 22px rgba(109, 40, 217, .26); }
.econexo-composer-secondary { display: flex; gap: 12px; font-size: .8rem; }
.econexo-composer-secondary a { color: var(--ex-violet-deep); font-weight: 600; }
.econexo-closed-note { font-size: .82rem; color: var(--ex-muted); }

/* Native bbPress reply form, restyled to match the mockup composer.
   The spec requires reusing the native form; these rules only skin it. */
.econexo-topic .bbp-reply-form,
.econexo-topic #new-reply,
.econexo-topic .bbp-topic-form {
  border: 1px solid var(--ex-line); border-radius: var(--ex-r-lg); background: #fff;
  padding: 12px 16px 16px; box-shadow: var(--ex-shadow-soft);
}
.econexo-topic .bbp-reply-form .bbp-the-content,
.econexo-topic .bbp-reply-form textarea,
.econexo-topic .bbp-topic-form textarea,
.econexo-topic .bbp-the-content-wrapper textarea {
  width: 100%; min-height: 52px; max-height: 160px; resize: vertical;
  border: 1px solid var(--ex-line); border-radius: 20px; padding: 12px 14px;
  outline: none; background: #fbfdff; font: inherit; line-height: 1.5;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.econexo-topic .bbp-reply-form textarea:focus,
.econexo-topic .bbp-topic-form textarea:focus {
  border-color: var(--ex-violet-line); box-shadow: 0 0 0 3px rgba(133, 90, 250, .12);
}
/* The MglMenu / medium-editor toolbar bbPress shows above the field */
.econexo-topic .bbp-reply-form .bb-rl-editor-toolbar,
.econexo-topic .bbp-reply-form .medium-editor-toolbar,
.econexo-topic .bbp-reply-form .bp-suggestions-mention { border-radius: 12px; }
/* Submit + attach buttons → mockup pill / tool-button look */
.econexo-topic .bbp-reply-form #bbp_reply_submit,
.econexo-topic .bbp-topic-form #bbp_topic_submit,
.econexo-topic .bbp-reply-form button[type="submit"],
.econexo-topic .bbp-reply-form .submit-button {
  display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 22px;
  border: 0; border-radius: 999px; background: linear-gradient(90deg, #6d28d9, #8b5cf6);
  color: #fff; font-weight: 800; font-size: .88rem; cursor: pointer;
  box-shadow: 0 8px 16px rgba(109, 40, 217, .18); transition: transform .18s ease, box-shadow .18s ease;
}
.econexo-topic .bbp-reply-form #bbp_reply_submit:hover,
.econexo-topic .bbp-topic-form #bbp_topic_submit:hover,
.econexo-topic .bbp-reply-form button[type="submit"]:hover {
  transform: translateY(-1px); box-shadow: 0 12px 22px rgba(109, 40, 217, .26);
}
.econexo-topic .bbp-reply-form .bb-rl-media-button,
.econexo-topic .bbp-reply-form .toolbar-button,
.econexo-topic .bbp-reply-form .bbp-the-content-buttons a {
  width: 42px; height: 42px; border-radius: 14px; border: 1px solid var(--ex-violet-line);
  background: #fff; color: var(--ex-violet-deep); display: inline-grid; place-items: center;
  box-shadow: var(--ex-shadow-soft); transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.econexo-topic .bbp-reply-form .bb-rl-media-button:hover,
.econexo-topic .bbp-reply-form .toolbar-button:hover {
  transform: translateY(-2px); background: #faf7ff; border-color: #c4b5fd;
}
.econexo-topic .bbp-reply-form .bbp-submit-wrapper { display: flex; justify-content: flex-end; gap: 10px; margin-top: 10px; }

/* Native reply modal — soften to match */
.econexo-topic .bbp-reply-form.bb-modal { border-radius: var(--ex-r-lg); }

/* Drawer */
.econexo-drawer .bs-topic-sidebar-inner {
  position: sticky; top: 88px; padding: 16px; background: var(--ex-surface); border: 1px solid var(--ex-line);
  border-radius: var(--ex-r-xl); box-shadow: var(--ex-shadow-soft);
}
.econexo-drawer-heading { margin: 0 0 10px; font-size: 1rem; font-weight: 700; }
.econexo-drawer-section + .econexo-drawer-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid #edf2f7; }
.econexo-drawer-title { margin: 0 0 10px; font-size: .78rem; font-weight: 700; color: var(--ex-muted); }
.econexo-resource-list { display: grid; gap: 8px; }
.econexo-resource-item {
  display: block; padding: 11px 12px; border-radius: var(--ex-r-md); background: var(--ex-surface-2); border: 1px solid var(--ex-line);
  box-shadow: var(--ex-shadow-soft); color: var(--ex-text); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.econexo-resource-item:hover { transform: translateY(-2px); border-color: #c4b5fd; box-shadow: 0 10px 22px rgba(109, 40, 217, .10); color: var(--ex-text); }
.econexo-resource-item strong { display: block; font-size: .84rem; margin-bottom: 3px; letter-spacing: -.01em; }
.econexo-resource-item span { display: block; font-size: .76rem; color: var(--ex-muted); line-height: 1.45; }

/* Related-resource cards (rendered by the bridge plugin) */
.econexo-rel-carousel { overflow: hidden; }
.econexo-rel-track { display: flex; transition: transform .28s ease; }
.econexo-rel-card {
  min-width: 100%; display: block; background: #fff; border: 1px solid #ede9fe; border-radius: var(--ex-r-md); overflow: hidden;
  box-shadow: var(--ex-shadow-soft); color: var(--ex-text); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.econexo-rel-card:hover { transform: translateY(-3px); border-color: #c4b5fd; box-shadow: 0 12px 26px rgba(109, 40, 217, .13); color: var(--ex-text); }
.econexo-rel-card img { display: block; width: 100%; height: 128px; object-fit: cover; background: #ede9fe; }
.econexo-rel-card .econexo-rel-placeholder { height: 128px; background: linear-gradient(135deg, #ede9fe, #f3e8ff); display: grid; place-items: center; color: var(--ex-violet-deep); font-weight: 700; font-size: 1.4rem; }
.econexo-rel-body { padding: 10px; }
.econexo-rel-pill { display: inline-flex; padding: 4px 8px; border-radius: 999px; background: var(--ex-violet-tint); color: var(--ex-violet-deep); font-size: .7rem; font-weight: 700; }
.econexo-rel-title { margin-top: 6px; font-size: .86rem; font-weight: 700; line-height: 1.35; }
.econexo-rel-meta { margin-top: 4px; font-size: .74rem; color: var(--ex-muted); }
.econexo-carousel-controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 10px; }
.econexo-carousel-btn {
  width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--ex-line); background: #fff; color: var(--ex-violet-deep);
  font-size: 1.1rem; line-height: 1; cursor: pointer; display: grid; place-items: center;
}
.econexo-carousel-btn:disabled { opacity: .35; cursor: default; }
.econexo-carousel-count { font-size: .76rem; color: var(--ex-muted); min-width: 40px; text-align: center; }

/* Product carousel (rendered by the bridge plugin) */
.econexo-products { margin: 22px 0 0; }
.econexo-products-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; }
.econexo-products-head h3 { margin: 0; font-size: 1.15rem; letter-spacing: -.02em; font-weight: 700; }
.econexo-products-link { font-size: .84rem; font-weight: 700; color: var(--ex-violet-deep); }
.econexo-product-carousel { position: relative; padding: 0 6px; }
.econexo-product-viewport { overflow: hidden; }
.econexo-product-track { display: flex; gap: 14px; transition: transform .3s ease; }
.econexo-product-card {
  position: relative; flex: 0 0 calc((100% - 42px) / 4); min-width: 0; display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 20px; overflow: hidden; box-shadow: 0 9px 22px rgba(15, 23, 42, .07);
  color: var(--ex-text); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.econexo-product-card:hover { transform: translateY(-4px); border-color: var(--ex-violet-line); box-shadow: 0 16px 32px rgba(76, 29, 149, .12); }
.econexo-product-visual { position: relative; height: 215px; display: flex; align-items: center; justify-content: center; padding: 4px 8px 2px; background: #fff; }
.econexo-product-visual img { display: block; width: 100%; height: 100%; object-fit: contain; }
.econexo-product-stock { position: absolute; top: 13px; right: 13px; padding: 5px 9px; border-radius: 999px; background: #ecfdf5; border: 1px solid #bbf7d0; color: #15803d; font-size: .68rem; font-weight: 800; }
.econexo-product-stock--last { background: #fff7ed; border-color: #fed7aa; color: #ea580c; }
.econexo-product-body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1 1 auto; }
.econexo-product-brand { font-size: .7rem; font-weight: 800; color: var(--ex-muted); letter-spacing: .05em; text-transform: uppercase; }
.econexo-product-title { margin-top: 3px; font-size: .88rem; font-weight: 700; line-height: 1.35; color: var(--ex-text); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.econexo-product-title:hover { color: var(--ex-violet-deep); }
.econexo-product-rating { display: flex; align-items: center; gap: 5px; margin: 7px 0 2px; font-size: .72rem; color: #64748b; }
.econexo-stars { letter-spacing: -1px; font-size: .82rem; line-height: 1; }
.econexo-star--full { color: #f59e0b; }
.econexo-star--half { position: relative; color: #e2e8f0; }
.econexo-star--half::before { content: "★"; position: absolute; left: 0; top: 0; width: 50%; overflow: hidden; color: #f59e0b; }
.econexo-star--empty { color: #e2e8f0; }
.econexo-rating-count { color: #64748b; }
.econexo-product-price { margin-top: 6px; font-size: 1.08rem; font-weight: 900; color: #0646d8; letter-spacing: -.02em; }
.econexo-product-old { font-size: .76rem; color: #64748b; text-decoration: line-through; margin-top: 2px; }
.econexo-product-save { font-size: .72rem; color: #dc2626; font-weight: 800; margin-top: 2px; }
.econexo-product-cart {
  margin-top: 12px; display: flex; justify-content: center; align-items: center; gap: 8px; width: 100%; padding: 10px 12px;
  border-radius: 999px; background: #073be8; color: #fff; font-size: .8rem; font-weight: 800; text-decoration: none;
  box-shadow: 0 8px 16px rgba(7, 59, 232, .18); transition: background .18s ease, transform .18s ease;
}
.econexo-product-cart:hover { background: #0530c0; color: #fff; transform: translateY(-1px); }
.econexo-cart-ico { display: inline-flex; align-items: center; line-height: 1; }
.econexo-cart-ico img { width: 22px; height: 22px; object-fit: contain; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,.15)); }
.econexo-product-arrow {
  position: absolute; top: 45%; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--ex-line);
  background: #fff; color: var(--ex-violet-deep); font-size: 1.3rem; cursor: pointer; display: grid; place-items: center; box-shadow: var(--ex-shadow-soft);
}
.econexo-product-arrow--prev { left: -12px; }
.econexo-product-arrow--next { right: -12px; }
.econexo-product-arrow:disabled { opacity: .3; cursor: default; }
.econexo-product-dots { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.econexo-product-dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; background: #d9dee8; padding: 0; cursor: pointer; }
.econexo-product-dots button[aria-current="true"] { background: var(--ex-violet); width: 20px; border-radius: 999px; }
.econexo-products-note { margin-top: 10px; font-size: .74rem; color: var(--ex-muted); }

/* -----------------------------------------------------------------------------
   BuddyPanel: EcoFarma shortcuts at the bottom + 3D icons
   -------------------------------------------------------------------------- */

/* "Ir a EcoFarma" and "Ver mis pedidos" are plain, normal menu items now — no
   special bottom card, no reorder (order:3), no arrow. This keeps them in the
   natural menu flow and no longer interferes with the panel scroll. */
.side-panel-menu .econexo-panel-arrow { display: none !important; }

/* 3D icon: shown instead of the vector icon on items we recognise; others keep their native icon. */
.econexo-3d-icon { width: 38px; height: 38px; flex: 0 0 38px; object-fit: contain; margin-right: 12px; }
/* Hide the native vector icon whenever our 3D image is present. Covers every
   BuddyBoss variant: the Platform walker (_mi), any bb-icon-* glyph, and a bare
   [class^="bb-icon"] custom menu item — matched only as a direct child so nested
   content icons are untouched. */
a.has-econexo-3d > i._mi,
a.has-econexo-3d > i.bb-icon-file,
a.has-econexo-3d > i[class*="bb-icon-"],
a.has-econexo-3d > i._before { display: none !important; }
.site-header .econexo-3d-icon { width: 38px; height: 38px; margin-right: 8px; }
body.bb-buddypanel:not(.buddypanel-open) .side-panel-menu a.has-econexo-3d .econexo-3d-icon { margin-right: 0; }

/* Header action icons (search / messages / notifications) → 3D library */
.site-header .header-search-link i,
.site-header #header-messages-dropdown-elem > .notification-link i,
.site-header #header-notifications-dropdown-elem > .notification-link i {
  width: 24px; height: 24px; display: inline-block; background-size: contain; background-repeat: no-repeat; background-position: center;
}
.site-header .header-search-link i::before,
.site-header #header-messages-dropdown-elem > .notification-link i::before,
.site-header #header-notifications-dropdown-elem > .notification-link i::before { content: none; }
.site-header .header-search-link i { background-image: url("../img/icons/06_buscar.png"); }
.site-header #header-messages-dropdown-elem > .notification-link i { background-image: url("../img/icons/07_mensajes.png"); }
.site-header #header-notifications-dropdown-elem > .notification-link i { background-image: url("../img/icons/08_notificaciones.png"); }

/* -----------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1100px) {
  .econexo-topic-layout.bb-grid { grid-template-columns: 1fr; }
  .econexo-drawer .bs-topic-sidebar-inner { position: static; }
  .econexo-product-card { flex-basis: calc((100% - 28px) / 3); }
}
@media (max-width: 980px) {
  .econexo-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .econexo-product-card { flex-basis: calc((100% - 14px) / 2); }
}
@media (max-width: 760px) {
  .econexo-banner-wrap { border-radius: 20px; }
  .econexo-forums-head { flex-direction: column; align-items: stretch; }
  .econexo-forums-head h2 { font-size: 1.6rem; }
  .econexo-forum-search { width: 100%; }
  .econexo-msg { max-width: 100%; }
  .econexo-messages .bbp-threaded-replies { margin-left: 20px; }
  .econexo-composer { flex-direction: column; align-items: stretch; }
  .econexo-composer-avatar { display: none; }
  .econexo-composer .bbp-topic-reply-link,
  .econexo-composer .bbp-topic-login-link { width: 100%; }
  /* Mobile carousel: show TWO full product cards per row (2-col grid, not swipe). */
  .econexo-product-track { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; transform: none !important; }
  .econexo-product-viewport { overflow: visible; }
  .econexo-product-card { width: auto; max-width: none; min-width: 0; }
  .econexo-product-arrow { display: none; }
  .econexo-product-dots { display: none; }
  .econexo-lead-top { flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .econexo-quick-grid { grid-template-columns: 1fr; }
  .econexo-legal { font-size: .84rem; }
}

@media (prefers-reduced-motion: reduce) {
  .econexo-quick-card, .econexo-resource-item, .econexo-rel-card, .econexo-product-card,
  .econexo-rel-track, .econexo-product-track, .econexo-lead-intro-body,
  .econexo-composer .bbp-topic-reply-link { transition: none; }
  .econexo-quick-card:hover, .econexo-resource-item:hover, .econexo-rel-card:hover, .econexo-product-card:hover { transform: none; }
}

/* -----------------------------------------------------------------------------
   ECONEXO community footer (mockup: ecosystem + Información / Navegación / Legal)
   -------------------------------------------------------------------------- */
.econexo-footer { margin-top: 40px; padding: 34px 0 30px; border-top: 1px solid #e5e7eb; background: linear-gradient(180deg, #fbfaff, #f6f6fb); color: #64748b; font-size: .82rem; }
.econexo-footer-inner { max-width: var(--ex-max, 1200px); margin: 0 auto; padding: 0 20px; }
.econexo-footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; }
.econexo-footer-brand { max-width: 340px; }
.econexo-footer-logo { display: inline-flex; align-items: center; padding: 0; border-radius: 0; background: transparent; line-height: 1; }
.econexo-foot-eco { color: #ffd022; }
.econexo-foot-nexo { color: #fff; }
.econexo-footer-tagline { margin: 12px 0 14px; line-height: 1.55; font-size: .8rem; color: #6b7280; }
.econexo-footer-socials { display: flex; gap: 10px; margin-bottom: 18px; }
.econexo-footer-social { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: #fff; border: 1px solid #e5e7eb; color: #33208e; font-weight: 900; font-size: .72rem; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.econexo-footer-social:hover { transform: translateY(-2px); border-color: #c4b5fd; box-shadow: 0 8px 18px rgba(76, 29, 149, .12); color: #33208e; }
.econexo-footer-eco-label { display: block; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #94a3b8; margin-bottom: 7px; }
.econexo-footer-ecosystem { display: flex; gap: 13px; flex-wrap: wrap; }
.econexo-footer-ecosystem a { color: #6d28d9; font-weight: 700; text-decoration: none; }
.econexo-footer-ecosystem a:hover { text-decoration: underline; }
.econexo-footer-column h4 { margin: 0 0 12px; font-size: .82rem; font-weight: 800; color: var(--ex-text); text-transform: none; letter-spacing: 0; }
.econexo-footer-column ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.econexo-footer-column a { color: #64748b; text-decoration: none; }
.econexo-footer-column a:hover { color: #6d28d9; }
.econexo-footer-highlight { color: #dc2626 !important; font-weight: 700; }
.econexo-footer-highlight:hover { color: #b91c1c !important; }
.econexo-footer-divider { border-top: 1px solid #e5e7eb; margin: 26px 0 16px; }
.econexo-footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.econexo-footer-copy { font-size: .76rem; color: #94a3b8; }
.econexo-footer-bottom-links { display: flex; gap: 18px; flex-wrap: wrap; }
.econexo-footer-bottom-links a { color: #94a3b8; text-decoration: none; font-size: .76rem; }
.econexo-footer-bottom-links a:hover { color: #6d28d9; }
@media (max-width: 980px) {
  .econexo-footer-top { grid-template-columns: 1fr 1fr; gap: 24px; }
  .econexo-footer-brand { grid-column: 1 / -1; max-width: none; }
}
@media (max-width: 560px) {
  .econexo-footer-top { grid-template-columns: 1fr; }
  .econexo-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* Day separator chips in the message stream (mockup: "Hoy") */
.econexo-day-chip { display: flex; justify-content: center; margin: 14px 0 6px; }
.econexo-day-chip span { padding: 4px 12px; border-radius: 999px; background: #eef2f7; color: #64748b; font-size: .72rem; font-weight: 700; text-transform: capitalize; }

/* -----------------------------------------------------------------------------
   Forum category grid + discussions list — faithful to the forum mockup
   (.native-forum-grid / .forum-native-card / .native-discussion-row)
   -------------------------------------------------------------------------- */
.econexo-forum-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.econexo-forum-card { min-width: 0; background: #fff; border: 1px solid #d7dce5; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 18px rgba(15, 23, 42, .035); color: inherit; text-decoration: none; display: flex; flex-direction: column; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.econexo-forum-card:hover { transform: translateY(-3px); border-color: var(--ex-violet-line); box-shadow: 0 16px 30px rgba(76, 29, 149, .1); color: inherit; }
.econexo-forum-cover { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 2.09 / 1; background-size: cover; background-position: center; background-color: #e5e7eb; }
.econexo-forum-cover-ico { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 6px 12px rgba(15, 23, 42, .25)); }
.econexo-forum-body { padding: 21px 24px 19px; min-height: 176px; display: flex; flex-direction: column; }
.econexo-forum-body h3 { margin: 0 0 10px; color: #0f172a; font-size: 1.12rem; line-height: 1.25; letter-spacing: -.015em; }
.econexo-forum-body p { margin: 0; color: #475569; font-size: .82rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.econexo-forum-status { margin-top: auto; padding-top: 20px; color: #9aa2af; font-size: .8rem; display: flex; align-items: center; gap: 8px; }
.econexo-forum-status strong { color: #475569; font-weight: 800; }
.econexo-forum-dot { color: #cbd2dc; }

.econexo-discussions-card { background: #fff; border: 1px solid #d7dce5; border-radius: 12px; overflow: hidden; }
.econexo-discussions-title { padding: 19px 20px; border-bottom: 1px solid #dfe3ea; color: #0f172a; font-size: 1rem; font-weight: 800; }
.econexo-discussion-row { min-height: 86px; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 14px 20px; color: inherit; text-decoration: none; border-bottom: 1px solid #eef1f5; transition: background .15s ease; }
.econexo-discussion-row:last-child { border-bottom: 0; }
.econexo-discussion-row:hover { background: #faf9ff; color: inherit; }
.econexo-discussion-avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1.05rem; }
.econexo-discussion-main { min-width: 0; }
.econexo-discussion-main strong { display: block; color: #0f172a; font-size: .9rem; margin-bottom: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.econexo-discussion-meta { display: block; color: #98a1af; font-size: .79rem; }
.econexo-discussion-side { display: flex; align-items: center; gap: 14px; white-space: nowrap; }
.econexo-group-pill { display: inline-flex; align-items: center; justify-content: center; padding: 8px 12px; border-radius: 8px; background: #6d4be5; color: #fff; font-size: .72rem; font-weight: 700; max-width: 180px; overflow: hidden; text-overflow: ellipsis; }
.econexo-discussion-stats { color: #9aa2af; font-size: .8rem; }
.econexo-discussion-stats strong { color: #475569; font-weight: 800; }

@media (max-width: 1100px) { .econexo-forum-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .econexo-forum-grid { grid-template-columns: 1fr; }
  .econexo-discussion-row { grid-template-columns: 40px minmax(0, 1fr); }
  .econexo-discussion-side { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; gap: 8px; }
  .econexo-discussion-avatar { width: 40px; height: 40px; }
}

/* Single-forum (per-category) page */
.econexo-single-forum .econexo-crumb { margin: 4px 0 14px; font-size: .82rem; color: var(--ex-muted); }
.econexo-single-forum .econexo-crumb a { color: var(--ex-violet-deep); text-decoration: none; }
.econexo-single-forum .econexo-crumb a:hover { text-decoration: underline; }
.econexo-single-forum-head { margin: 14px 0 6px; }
.econexo-single-forum-head h1 { margin: 0 0 6px; font-size: 1.6rem; letter-spacing: -.02em; color: var(--ex-text); }
.econexo-single-forum-desc { margin: 0; color: var(--ex-muted); font-size: .92rem; line-height: 1.6; max-width: 70ch; }
.econexo-new-topic { margin-top: 22px; }

/* ============================================================================
   BUDDYPANEL + MENUS — restyled to match the ECONEXO mockup
   (native BuddyBoss BuddyPanel .buddypanel/.side-panel-menu and the header menu;
   no parallel nav is built — these rules skin the real elements.)
   Mockup tokens: sidebar 292px / collapsed 86px, white bg, rounded 14px links,
   violet hover #f7f5ff/#5b21b6, section titles uppercase #94a3b8.
   ========================================================================== */

/* ---- BuddyPanel container ---- */
body.econexo-forum-home .buddypanel,
body.econexo-forum .buddypanel,
body.econexo-topic .buddypanel {
  --ex-panel-w: 292px;
  background: #fff;
  border-right: 1px solid #e7eaf2;
}
.buddypanel .side-panel-inner { padding: 14px 14px 18px; }
.buddypanel .side-panel-menu-container { padding: 0; }

/* ---- Menu list + items ---- */
.buddypanel .side-panel-menu { display: grid; gap: 4px; list-style: none; margin: 0; padding: 0; }
.buddypanel .side-panel-menu li.menu-item { margin: 0; }
.buddypanel .side-panel-menu li.menu-item > a {
  display: flex; align-items: center; gap: 12px; padding: 9px 11px; border-radius: 14px;
  color: #334155; font-size: .94rem; font-weight: 650; line-height: 1.2; text-decoration: none;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.buddypanel .side-panel-menu li.menu-item > a:hover {
  background: #f7f5ff; color: #5b21b6; transform: translateX(2px);
}
.buddypanel .side-panel-menu li.current-menu-item > a,
.buddypanel .side-panel-menu li.current_page_item > a,
.buddypanel .side-panel-menu li.selected > a {
  background: linear-gradient(180deg, #f3efff, #ece4ff); color: #5b21b6; font-weight: 800;
}
.buddypanel .side-panel-menu li.menu-item > a .link-text {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* native vector icon sizing (when no 3D icon replaces it) */
.buddypanel .side-panel-menu li.menu-item > a > i {
  width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; font-size: 1.25rem; color: #6d4be5;
}
/* our injected 3D icon */
.buddypanel .side-panel-menu a.has-econexo-3d .econexo-3d-icon { width: 42px; height: 42px; flex: 0 0 42px; margin-right: 0; }

/* ---- Section headings (bb-menu-section) → mockup sidebar-title ---- */
.buddypanel .side-panel-menu li.bb-menu-section {
  margin: 12px 0 2px; padding: 12px 6px 0; border-top: 1px solid #eef2f7;
}
.buddypanel .side-panel-menu li.bb-menu-section:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.buddypanel .side-panel-menu li.bb-menu-section > a,
.buddypanel .side-panel-menu li.bb-menu-section > span {
  padding: 0; color: #94a3b8; font-size: .78rem; font-weight: 900; letter-spacing: .07em;
  text-transform: uppercase; pointer-events: none; background: none;
}
.buddypanel .side-panel-menu li.bb-menu-section > a:hover { background: none; transform: none; color: #94a3b8; }

/* ---- "Ir a EcoFarma" / "Ver mis pedidos" ----
   Single source of truth: render EXACTLY like a normal BuddyPanel menu item.
   (These carry an old econexo-panel-link class; we neutralise it here so it
   inherits the theme's default menu styling — no card, no overlap.) */
.buddypanel .side-panel-menu li.econexo-panel-link,
.buddypanel .side-panel-menu li.bp-menu-item-at-bottom {
  position: static !important; order: initial !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important; min-height: 0 !important;
}
.buddypanel .side-panel-menu li.econexo-panel-link > a,
.buddypanel .side-panel-menu li.bp-menu-item-at-bottom > a {
  display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important;
  margin: 0 !important; padding: 12px 16px !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important;
  color: var(--bb-sidenav-text-regular, #1e2132) !important; font-weight: 500 !important; position: static !important;
}
.buddypanel .side-panel-menu li.econexo-panel-link > a:hover,
.buddypanel .side-panel-menu li.bp-menu-item-at-bottom > a:hover {
  background: var(--bb-sidenav-menu-background-color-hover, #f2f4f5) !important;
}
.buddypanel .side-panel-menu li.econexo-panel-heading,
.buddypanel .side-panel-menu .econexo-panel-arrow { display: none !important; }
/* Safety net: if one of these items falls back to its native <i> icon (no 3D PNG),
   keep it small and icon-sized — never the oversized purple box. */
.buddypanel .side-panel-menu li.econexo-panel-link > a > i,
.buddypanel .side-panel-menu li.bp-menu-item-at-bottom > a > i {
  width: 24px !important; height: 24px !important; flex: 0 0 24px !important; font-size: 20px !important;
  line-height: 1 !important; background: none !important; border-radius: 0 !important; box-shadow: none !important;
  padding: 0 !important; color: var(--ex-violet-deep, #6d28d9) !important; display: inline-flex !important;
  align-items: center; justify-content: center;
}
/* Collapsed panel: these two items behave like every other collapsed item. */
body.bb-buddypanel:not(.buddypanel-open) .buddypanel .side-panel-menu li.econexo-panel-link > a,
body.bb-buddypanel:not(.buddypanel-open) .buddypanel .side-panel-menu li.bp-menu-item-at-bottom > a {
  justify-content: center !important; padding: 10px !important; border-radius: 0 !important; background: none !important;
}
body.bb-buddypanel:not(.buddypanel-open) .buddypanel .side-panel-menu li.econexo-panel-link .link-text,
body.bb-buddypanel:not(.buddypanel-open) .buddypanel .side-panel-menu li.bp-menu-item-at-bottom .link-text { display: none !important; }


/* ---- Collapsed BuddyPanel (icons only) ---- */
body.bb-buddypanel:not(.buddypanel-open) .buddypanel .side-panel-menu li.menu-item > a { justify-content: center; padding: 10px; }
body.bb-buddypanel:not(.buddypanel-open) .buddypanel .side-panel-menu li.menu-item > a .link-text,
body.bb-buddypanel:not(.buddypanel-open) .buddypanel .side-panel-menu li.bb-menu-section,
body.bb-buddypanel:not(.buddypanel-open) .buddypanel .side-panel-menu li.bp-menu-item-at-bottom .link-text { display: none; }
body.bb-buddypanel:not(.buddypanel-open) .buddypanel .side-panel-menu li.bp-menu-item-at-bottom > a { justify-content: center; padding: 10px; border-radius: 16px; }

/* ---- Header (main) menu — mockup nav: pill hover, yellow-underline active ---- */
.site-header .header-aside .bb-menu-item > a,
.header-search-wrap ~ nav .menu-item > a,
#header-menu-wrap .buddyboss-menu > li > a,
.bb-nouveau .header-nav > li > a {
  font-weight: 650; color: #334155; border-radius: 12px; transition: color .16s ease, background .16s ease;
}
#header-menu-wrap .buddyboss-menu > li > a:hover,
.bb-nouveau .header-nav > li > a:hover { color: #5b21b6; background: #f7f5ff; }
#header-menu-wrap .buddyboss-menu > li.current-menu-item > a,
.bb-nouveau .header-nav > li.current-menu-item > a {
  color: #5b21b6; position: relative;
}
#header-menu-wrap .buddyboss-menu > li.current-menu-item > a::after,
.bb-nouveau .header-nav > li.current-menu-item > a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -6px; height: 3px;
  border-radius: 999px; background: var(--ex-yellow);
}
/* header 3D icons in the main menu */
.site-header a.has-econexo-3d .econexo-3d-icon { width: 38px; height: 38px; margin-right: 8px; }

/* ============================================================================
   SPECIFICITY GUARD — the parent BuddyBoss bbPress stylesheet (6k+ lines) scopes
   heavily under #bbpress-forums. These rules re-assert the ECONEXO layout at an
   equal-or-higher specificity so the forum, discussion and card styles always win,
   even if load order changes. (Selectors mirror the base rules above.)
   ========================================================================== */
#bbpress-forums.econexo-forum-index,
#bbpress-forums.econexo-single-forum { max-width: var(--ex-max, 1240px); margin: 0 auto; background: transparent; border: 0; padding: 0; }
#bbpress-forums.econexo-forum-index .econexo-section,
#bbpress-forums.econexo-single-forum .econexo-section { margin: 0 0 26px; }
#bbpress-forums .econexo-forum-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 0; padding: 0; }
#bbpress-forums .econexo-forum-grid .econexo-forum-card { float: none; width: auto; margin: 0; }
#bbpress-forums .econexo-quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
#bbpress-forums .econexo-discussions-card { display: block; background: #fff; border: 1px solid #d7dce5; border-radius: 12px; }
#bbpress-forums .econexo-discussion-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; }
#bbpress-forums ul.econexo-forum-grid,
#bbpress-forums ul.econexo-quick-grid { padding-left: 0; }
/* neutralize parent list bullets / borders that could bleed into our cards */
#bbpress-forums .econexo-forum-grid li,
#bbpress-forums .econexo-quick-grid li { list-style: none; border: 0; background: none; }
@media (max-width: 1100px) { #bbpress-forums .econexo-forum-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  #bbpress-forums .econexo-forum-grid { grid-template-columns: 1fr; }
  #bbpress-forums .econexo-quick-grid { grid-template-columns: 1fr; }
  #bbpress-forums .econexo-discussion-row { grid-template-columns: 40px minmax(0, 1fr); }
}
@media (max-width: 980px) { #bbpress-forums .econexo-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ============================================================================
   FORUM CARD — hard override. The parent bbPress stylesheet colors every
   #bbpress-forums a link blue and lays the loop out as a list; these ID-scoped
   rules force the ECONEXO card grid + colors to win on the live site.
   ========================================================================== */
#bbpress-forums .econexo-forum-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; }
#bbpress-forums a.econexo-forum-card {
  display: flex !important; flex-direction: column !important; min-width: 0; width: auto !important; float: none !important;
  background: #fff !important; border: 1px solid #d7dce5 !important; border-radius: 12px !important; overflow: hidden !important;
  box-shadow: 0 6px 18px rgba(15,23,42,.035) !important; color: #0f172a !important; text-decoration: none !important; margin: 0 !important;
}
#bbpress-forums a.econexo-forum-card:hover { border-color: #ddd6fe !important; box-shadow: 0 16px 30px rgba(76,29,149,.1) !important; transform: translateY(-3px); }
#bbpress-forums a.econexo-forum-card .econexo-forum-cover { display: flex !important; align-items: center; justify-content: center; width: 100% !important; aspect-ratio: 2.09/1; min-height: 128px; background-size: cover; background-position: center; }
#bbpress-forums a.econexo-forum-card .econexo-forum-body { padding: 21px 24px 19px !important; display: flex !important; flex-direction: column !important; }
#bbpress-forums a.econexo-forum-card .econexo-forum-body h3 { margin: 0 0 10px !important; color: #0f172a !important; font-size: 1.12rem !important; line-height: 1.25 !important; }
#bbpress-forums a.econexo-forum-card .econexo-forum-body p { margin: 0 !important; color: #475569 !important; font-size: .82rem !important; line-height: 1.55 !important; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#bbpress-forums a.econexo-forum-card .econexo-forum-status { margin-top: auto !important; padding-top: 20px !important; color: #9aa2af !important; font-size: .8rem !important; display: flex; align-items: center; gap: 8px; }
#bbpress-forums a.econexo-forum-card .econexo-forum-status strong { color: #475569 !important; font-weight: 800; }
#bbpress-forums a.econexo-forum-card .econexo-forum-dot { color: #cbd2dc !important; }
@media (max-width:1100px){ #bbpress-forums .econexo-forum-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; } }
@media (max-width:760px){ #bbpress-forums .econexo-forum-grid { grid-template-columns: 1fr !important; } }

/* discussions list hard override */
#bbpress-forums a.econexo-discussion-row { display: grid !important; grid-template-columns: 48px minmax(0,1fr) auto !important; color: #0f172a !important; text-decoration: none !important; }
#bbpress-forums a.econexo-discussion-row .econexo-discussion-main strong { color: #0f172a !important; }
#bbpress-forums a.econexo-discussion-row .econexo-group-pill { color: #fff !important; }

/* ============================================================================
   INLINE REPLY FORM — the mockup shows the composer inline at the bottom of the
   thread, not as a popup. BuddyBoss renders the native reply form as a hidden
   .bb-modal that its reply-link opens. We render the same native form inline and
   neutralise the modal styling so it's always visible in place.
   ========================================================================== */
.econexo-composer-tools { display: flex; justify-content: flex-end; margin: 6px 2px 8px; }
.econexo-composer-tools .econexo-composer-secondary { display: flex; gap: 14px; font-size: .82rem; }
.econexo-composer-tools .econexo-composer-secondary a { color: var(--ex-violet-deep); font-weight: 700; text-decoration: none; }

.econexo-composer--inline { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px 14px; border-top: 1px solid var(--ex-line); background: #fff; }
.econexo-composer--inline .econexo-composer-avatar { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; }
.econexo-composer-field { flex: 1 1 auto; min-width: 0; }

/* Un-modal the inline reply form: strip the fixed/overlay positioning BuddyBoss
   applies to .bbp-reply-form.bb-modal and force it visible in the flow. */
.econexo-composer--inline .bbp-reply-form,
.econexo-composer--inline .bbp-reply-form.bb-modal,
.econexo-composer--inline #new-reply {
  display: block !important; position: static !important; inset: auto !important;
  transform: none !important; width: 100% !important; max-width: none !important; height: auto !important;
  max-height: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important;
  box-shadow: none !important; border: 0 !important; z-index: auto !important; opacity: 1 !important; visibility: visible !important;
  overflow: visible !important;
}
/* Hide the modal chrome (close button, header, overlay) that only makes sense in a popup. */
.econexo-composer--inline .bb-model-header,
.econexo-composer--inline .bb-modal-header,
.econexo-composer--inline .bbp-reply-form .bb-model-close-button,
.econexo-composer--inline .bbp-reply-form .modal-close,
.econexo-composer--inline #bbp-reply-to-user,
.econexo-composer--inline .bb-quick-reply-form-wrap > .bb-model-header { display: none !important; }
/* The field + submit, styled like the mockup (rules also exist in the reply-form block above). */
.econexo-composer--inline .bbp-reply-form fieldset.bbp-form { border: 0; margin: 0; padding: 0; }
.econexo-composer--inline .bbp-reply-form .bbp-the-content-wrapper { border: 1px solid var(--ex-line); border-radius: 20px; background: #fbfdff; overflow: hidden; }
.econexo-composer--inline .bbp-reply-form .bbp-submit-wrapper { display: flex; justify-content: flex-end; margin-top: 10px; }

/* Guest / closed composer states */
.econexo-composer--guest, .econexo-composer--closed { display: flex; gap: 12px; align-items: center; padding: 14px 16px; border-top: 1px solid var(--ex-line); background: #fff; }
.econexo-composer-login { display: inline-flex; align-items: center; height: 42px; padding: 0 20px; border-radius: 999px; background: linear-gradient(90deg, #6d28d9, #8b5cf6); color: #fff; font-weight: 700; text-decoration: none; }

/* ============================================================================
   CHAT MESSAGE BUBBLES — hard override. BuddyBoss's native reply-list styles
   (.bs-reply-list-item / .scrubberpost / .bbp-reply-author with floats and
   absolute positioning) fight the chat layout; these ID-scoped rules force the
   ECONEXO in/out bubble layout to win on the live site.
   ========================================================================== */
#bbpress-forums .econexo-messages .bb-single-reply-list,
#bbpress-forums .econexo-messages ul.bbp-replies { list-style: none !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; }
#bbpress-forums .econexo-messages .econexo-msg {
  display: flex !important; gap: 10px !important; max-width: 82% !important; align-items: flex-start !important;
  width: auto !important; float: none !important; margin: 0 0 14px !important; padding: 0 !important; border: 0 !important;
  background: transparent !important; box-shadow: none !important; position: static !important; list-style: none !important;
}
#bbpress-forums .econexo-messages .econexo-msg--in  { margin-right: auto !important; flex-direction: row !important; }
#bbpress-forums .econexo-messages .econexo-msg--out { margin-left: auto !important; flex-direction: row-reverse !important; }
#bbpress-forums .econexo-messages .econexo-msg-avatar {
  flex: 0 0 36px !important; width: 36px !important; height: 36px !important; margin: 2px 0 0 !important; padding: 0 !important;
  position: static !important; float: none !important;
}
#bbpress-forums .econexo-messages .econexo-msg-avatar img,
#bbpress-forums .econexo-messages .econexo-msg-avatar .avatar {
  width: 36px !important; height: 36px !important; border-radius: 50% !important; margin: 0 !important; position: static !important; max-width: 36px !important;
}
#bbpress-forums .econexo-messages .econexo-bubble-wrap {
  display: flex !important; flex-direction: column !important; gap: 4px !important; min-width: 0 !important; max-width: 100%;
  width: auto !important; float: none !important; margin: 0 !important; padding: 0 !important;
}
#bbpress-forums .econexo-messages .econexo-msg--out .econexo-bubble-wrap { align-items: flex-end !important; }
#bbpress-forums .econexo-messages .econexo-msg-head {
  display: flex !important; flex-wrap: wrap !important; align-items: baseline !important; gap: 6px 8px !important;
  margin: 0 !important; padding: 0 !important; font-size: .75rem !important; color: #94a3b8 !important; float: none !important;
}
#bbpress-forums .econexo-messages .econexo-msg-author { margin: 0 !important; font-size: .82rem !important; font-weight: 700 !important; color: var(--ex-text) !important; display: inline !important; }
#bbpress-forums .econexo-messages .econexo-bubble {
  display: block !important; padding: 11px 13px !important; border-radius: 18px !important; border: 1px solid var(--ex-line) !important;
  background: var(--ex-bubble-in) !important; box-shadow: var(--ex-shadow-soft) !important; font-size: .9rem !important; line-height: 1.5 !important;
  color: var(--ex-text) !important; max-width: 100% !important; width: auto !important; float: none !important; margin: 0 !important; text-align: left !important;
  overflow-wrap: anywhere !important;
}
#bbpress-forums .econexo-messages .econexo-msg--out .econexo-bubble { background: var(--ex-bubble-out) !important; border-color: var(--ex-violet-line) !important; }
#bbpress-forums .econexo-messages .econexo-msg-actions {
  display: flex !important; align-items: center !important; gap: 12px !important; margin: 2px 0 0 !important; padding: 0 !important;
  font-size: .75rem !important; position: static !important; float: none !important; background: transparent !important;
}
#bbpress-forums .econexo-messages .econexo-msg-actions .bbp-reply-to-link,
#bbpress-forums .econexo-messages .econexo-msg-actions .bbp-topic-reply-link { color: var(--ex-violet-deep) !important; font-weight: 700 !important; }
/* the more-actions dropdown button back to inline */
#bbpress-forums .econexo-messages .econexo-msg-actions .bbp-meta { margin: 0 !important; }

/* ---- "Responder" trigger + collapsible inline reply box ---- */
.econexo-composer-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 8px 2px; }
.econexo-reply-trigger {
  display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 22px; border: 0; border-radius: 999px;
  background: linear-gradient(90deg, #6d28d9, #8b5cf6); color: #fff; font-weight: 800; font-size: .9rem; cursor: pointer;
  box-shadow: 0 8px 16px rgba(109, 40, 217, .2); transition: transform .18s ease, box-shadow .18s ease;
}
.econexo-reply-trigger:hover { transform: translateY(-1px); box-shadow: 0 12px 22px rgba(109, 40, 217, .28); }
.econexo-reply-trigger-ico { font-size: 1rem; }
.econexo-composer-tools .econexo-composer-secondary { display: flex; gap: 14px; font-size: .82rem; }
.econexo-composer-tools .econexo-composer-secondary a { color: var(--ex-violet-deep); font-weight: 700; text-decoration: none; }

/* Collapsed: hide the reply box until "Responder" is clicked. */
.econexo-composer--inline.is-collapsed { display: none !important; }
.econexo-composer--inline { animation: econexo-reveal .2s ease; }
@keyframes econexo-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* "En respuesta a …" chip above the field */
.econexo-reply-to { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 8px; padding: 5px 10px; border-radius: 999px; background: #f3e8ff; color: #5b21b6; font-size: .8rem; }
.econexo-reply-to-clear { border: 0; background: transparent; color: #5b21b6; cursor: pointer; font-weight: 700; line-height: 1; }
@media (prefers-reduced-motion: reduce) { .econexo-composer--inline { animation: none; } }

/* ============================================================================
   GROUP DISCUSSION → clean ECONEXO layout. Forums stay under their groups, but a
   single discussion should look like the standalone mockup: the ECONEXO header +
   BuddyPanel remain, and the ENTIRE BuddyBoss group header block — the cover
   image, group name, "Public / Active", Organizer, Join Group button, and the
   Miembros / Feed / Photos / Videos / Albums / Documents / Send Invites /
   Discusiones / Manage tabs — is hidden on this view only. Structure is untouched.
   ========================================================================== */
body.econexo-group-discussion #item-header,
body.econexo-group-discussion #cover-image-container,
body.econexo-group-discussion .groups-header,
body.econexo-group-discussion .single-headers,
body.econexo-group-discussion .bb-group-single-widget-cover,
body.econexo-group-discussion .bb-cover-wrap,
body.econexo-group-discussion .header-cover-img,
body.econexo-group-discussion .bb-single-group-header,
body.econexo-group-discussion .group-single .item-header-wrap,
/* group navigation (all the tabs) */
body.econexo-group-discussion #group-subnav,
body.econexo-group-discussion #object-nav,
body.econexo-group-discussion #subnav,
body.econexo-group-discussion .bb-nouveau-single-nav,
body.econexo-group-discussion .bb-groups-single-nav,
body.econexo-group-discussion .bs-group-single-tabs,
body.econexo-group-discussion .group-single > .bp-navs,
body.econexo-group-discussion .group-single .bp-navs.bp-subnavs,
body.econexo-group-discussion .item-body > .bp-navs,
body.econexo-group-discussion nav.bb-groups-nav,
body.econexo-group-discussion .flex.bb-single-nav {
  display: none !important;
}

/* Let the discussion body fill the width cleanly (no leftover header spacing). */
body.econexo-group-discussion #item-body,
body.econexo-group-discussion .group-single,
body.econexo-group-discussion .bb-groups-single { margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
body.econexo-group-discussion .bb-single-group-content,
body.econexo-group-discussion .bp-group-single-forums { padding: 0 !important; margin: 0 !important; }
/* Trim the top gap the removed header used to occupy. */
body.econexo-group-discussion .bb-grid.site-content-grid,
body.econexo-group-discussion #primary,
body.econexo-group-discussion .site-content-contain { padding-top: 0 !important; margin-top: 0 !important; }

/* ============================================================================
   MOBILE RESPONSIVE — consolidated rules for the discussion page and all newer
   ECONEXO components (chat, composer, drawer, product carousel, footer, panel).
   ========================================================================== */

/* --- Tablet / small laptop (≤1100px): drawer drops below the discussion --- */
@media (max-width: 1100px) {
  #bbpress-forums .econexo-topic-layout.bb-grid { grid-template-columns: 1fr !important; }
  .econexo-topic-layout > .econexo-drawer { margin-top: 16px !important; }
  .econexo-drawer .bs-topic-sidebar-inner { position: static !important; }
}

/* --- Phones (≤760px) --- */
@media (max-width: 760px) {
  .econexo-topic-hero .econexo-banner { border-radius: 14px; }
  /* Lead card */
  .econexo-lead-card { padding: 14px !important; }
  .econexo-lead-top { gap: 10px; }
  .econexo-lead-avatar img, .econexo-lead-avatar .avatar { width: 40px !important; height: 40px !important; }
  .econexo-lead-title { font-size: 1.15rem !important; line-height: 1.3; }
  .econexo-lead-meta { font-size: .72rem; gap: 4px 6px; flex-wrap: wrap; }

  /* Chat bubbles take more width on a narrow screen */
  #bbpress-forums .econexo-messages { padding: 10px 8px 8px !important; }
  #bbpress-forums .econexo-messages .econexo-msg { max-width: 92% !important; gap: 8px !important; margin-bottom: 10px !important; }
  #bbpress-forums .econexo-messages .econexo-msg-avatar,
  #bbpress-forums .econexo-messages .econexo-msg-avatar img,
  #bbpress-forums .econexo-messages .econexo-msg-avatar .avatar { flex-basis: 30px !important; width: 30px !important; height: 30px !important; max-width: 30px !important; }
  #bbpress-forums .econexo-messages .econexo-bubble { font-size: .88rem !important; padding: 10px 12px !important; }

  /* Composer / reply box */
  .econexo-composer-tools { flex-direction: column; align-items: stretch; gap: 10px; }
  .econexo-reply-trigger { width: 100%; justify-content: center; }
  .econexo-composer-tools .econexo-composer-secondary { justify-content: center; }
  .econexo-composer--inline { flex-direction: column; gap: 8px; padding: 12px !important; }
  .econexo-composer--inline .econexo-composer-avatar { display: none !important; }
  .econexo-composer-field { width: 100%; }
  .econexo-composer--inline .bbp-reply-form .bbp-submit-wrapper { justify-content: stretch; }
  .econexo-composer--inline .bbp-reply-form #bbp_reply_submit,
  .econexo-composer--inline .bbp-reply-form button[type="submit"] { width: 100%; }

  /* Product carousel: one full card + a clear peek of the next; swipe (no arrows) */
  /* Product carousel on mobile: 2 full cards per row via a real grid. */
  .econexo-product-viewport { overflow: visible !important; }
  .econexo-product-track { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 12px !important; transform: none !important; }
  .econexo-product-card { flex: initial !important; width: auto !important; max-width: none !important; min-width: 0 !important; }
  .econexo-product-arrow, .econexo-product-dots { display: none !important; }
  /* Compact internals so the narrower cards stay well-proportioned (not tall/stretched). */
  .econexo-product-visual { height: 120px !important; padding: 6px !important; }
  .econexo-product-body { padding: 10px 10px 12px !important; }
  .econexo-product-brand { font-size: .62rem !important; letter-spacing: .02em; }
  .econexo-product-title { font-size: .78rem !important; line-height: 1.25 !important; -webkit-line-clamp: 2; }
  .econexo-product-price { font-size: .95rem !important; margin-top: 4px !important; }
  .econexo-product-old { font-size: .68rem !important; }
  .econexo-product-save { font-size: .64rem !important; line-height: 1.2; }
  .econexo-product-cart {
    margin-top: 10px !important; padding: 10px 4px !important; border-radius: 10px !important;
    font-size: 0 !important; line-height: 1.1 !important; white-space: nowrap; text-align: center; min-height: 0 !important;
    display: flex !important; align-items: center; justify-content: center; gap: 5px;
  }
  /* Shorten the label to just "Agregar" on the narrow 2-up cards. */
  .econexo-product-cart::after { content: "Agregar"; font-size: .78rem; font-weight: 800; }
  .econexo-product-cart { text-indent: 0; }
  .econexo-product-cart .econexo-cart-ico { font-size: 0; }
  .econexo-product-cart .econexo-cart-ico img { width: 16px !important; height: 16px !important; }
  .econexo-products-head { flex-direction: column; align-items: flex-start; gap: 6px; }

  /* Related-resources drawer cards full width */
  .econexo-rel-card { min-width: 100% !important; }

  /* Drawer heading + ecosystem links */
  .econexo-drawer-heading { font-size: .95rem; }
  .econexo-sidebar-eco-link { padding: 12px 14px; }
}

/* --- Small phones (≤480px) --- */
@media (max-width: 480px) {
  .econexo-lead-title { font-size: 1.05rem !important; }
  #bbpress-forums .econexo-messages .econexo-msg { max-width: 96% !important; }
  .econexo-reply-trigger { height: 46px; font-size: .92rem; }
  .econexo-product-card { flex: 0 0 calc(50% - 5px) !important; max-width: calc(50% - 5px) !important; }
  /* Legal / health notice */
  .econexo-legal { flex-direction: row; align-items: flex-start; font-size: .82rem; padding: 12px 14px; }
}

/* The mobile banner is the 4:3 horizontal version — show it at its natural ratio
   (no forced crop) so nothing important is cut. */
@media (max-width: 600px) {
  .econexo-banner-wrap .econexo-banner,
  .econexo-topic-hero .econexo-banner { aspect-ratio: 4 / 3; height: auto !important; width: 100%; object-fit: cover; border-radius: 14px; }
}

/* --- Bigger 3D icons on mobile (BuddyPanel is a slide-in menu on phones) --- */
@media (max-width: 800px) {
  .buddypanel .side-panel-menu a.has-econexo-3d .econexo-3d-icon,
  .econexo-3d-icon { width: 46px !important; height: 46px !important; flex: 0 0 46px !important; }
  .buddypanel .side-panel-menu li.bp-menu-item-at-bottom > a .econexo-3d-icon { width: 50px !important; height: 50px !important; flex: 0 0 50px !important; }
  .site-header .econexo-3d-icon,
  .site-header a.has-econexo-3d .econexo-3d-icon { width: 38px !important; height: 38px !important; }
}

/* Prevent any horizontal overflow on the whole discussion surface */
@media (max-width: 760px) {
  #bbpress-forums.econexo-topic-page { overflow-x: hidden; }
  #bbpress-forums.econexo-topic-page * { max-width: 100%; }
}

/* Forum home / index mobile guards */
@media (max-width: 760px) {
  #bbpress-forums.econexo-forum-index,
  #bbpress-forums.econexo-single-forum { overflow-x: hidden; }
  #bbpress-forums .econexo-forums-head { flex-direction: column; align-items: stretch; gap: 10px; }
  #bbpress-forums .econexo-forum-search { width: 100% !important; }
}
@media (max-width: 560px) {
  #bbpress-forums .econexo-quick-grid { grid-template-columns: 1fr !important; }
  #bbpress-forums .econexo-forum-card .econexo-forum-body { padding: 16px 16px 14px !important; min-height: 0 !important; }
}

/* ============================================================================
   FINAL OVERRIDE — mobile product carousel: ONE single row, 2 cards visible at
   a time, horizontal swipe for the rest (NOT a wrapping 2-row grid). Placed last
   so no earlier @media block overrides it.
   ========================================================================== */
@media (max-width: 760px) {
  /* Horizontal scroll strip: cards stay in one line, ~2 per view, swipe sideways. */
  #bbpress-forums .econexo-product-viewport,
  .econexo-products .econexo-product-viewport {
    overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  #bbpress-forums .econexo-product-viewport::-webkit-scrollbar { display: none; }
  #bbpress-forums .econexo-product-track,
  .econexo-products .econexo-product-track {
    display: flex !important; flex-wrap: nowrap !important; grid-template-columns: none !important;
    gap: 12px !important; transform: none !important; width: max-content !important;
  }
  /* Each card = ~half the viewport, so exactly 2 fit on screen at once. */
  #bbpress-forums .econexo-product-card,
  .econexo-products .econexo-product-card {
    flex: 0 0 calc(50vw - 24px) !important; width: calc(50vw - 24px) !important;
    max-width: calc(50vw - 24px) !important; min-width: 0 !important; margin: 0 !important;
    scroll-snap-align: start;
  }
  /* Compact internals so each card is well-proportioned. */
  #bbpress-forums .econexo-product-visual { height: 118px !important; padding: 6px !important; }
  #bbpress-forums .econexo-product-body { padding: 10px !important; }
  #bbpress-forums .econexo-product-brand { font-size: .62rem !important; line-height: 1.2 !important; }
  #bbpress-forums .econexo-product-title { font-size: .78rem !important; line-height: 1.25 !important; }
  #bbpress-forums .econexo-product-price { font-size: .95rem !important; margin-top: 4px !important; }
  #bbpress-forums .econexo-product-old { font-size: .68rem !important; }
  #bbpress-forums .econexo-product-save { font-size: .64rem !important; line-height: 1.2 !important; }
  #bbpress-forums .econexo-product-cart {
    margin-top: 10px !important; padding: 10px 4px !important; border-radius: 10px !important;
    display: flex !important; align-items: center; justify-content: center; gap: 5px;
    font-size: 0 !important; min-height: 0 !important; white-space: nowrap !important;
  }
  #bbpress-forums .econexo-product-cart::after { content: "Agregar"; font-size: .78rem !important; font-weight: 800; }
  #bbpress-forums .econexo-product-cart .econexo-cart-ico { font-size: 0 !important; }
  #bbpress-forums .econexo-product-cart .econexo-cart-ico img { width: 16px !important; height: 16px !important; }
  #bbpress-forums .econexo-product-dots { display: flex !important; }
  #bbpress-forums .econexo-product-arrow { display: none !important; }
}

/* Reply box: when opened, force the native bbPress reply form + editor visible
   (BuddyBoss otherwise keeps it as a hidden modal, which left the box empty). */
#econexo-reply-box:not(.is-collapsed) { display: flex !important; }
#econexo-reply-box:not(.is-collapsed) .bbp-reply-form,
#econexo-reply-box:not(.is-collapsed) #new-reply,
#econexo-reply-box:not(.is-collapsed) form {
  display: block !important; position: static !important; opacity: 1 !important; visibility: visible !important;
  height: auto !important; max-height: none !important; inset: auto !important; transform: none !important;
}
#econexo-reply-box:not(.is-collapsed) .bbp-the-content-wrapper,
#econexo-reply-box:not(.is-collapsed) .bbp-the-content,
#econexo-reply-box:not(.is-collapsed) textarea,
#econexo-reply-box:not(.is-collapsed) .bb-editor {
  display: block !important; visibility: visible !important; opacity: 1 !important; min-height: 90px;
}
#econexo-reply-box .bb-model-header,
#econexo-reply-box .bb-modal-header,
#econexo-reply-box .modal-close { display: none !important; }

/* Kill BuddyBoss's reply MODAL overlay on ECONEXO discussions — we use the inline
   composer, so no dim/blur backdrop and no modal panel should ever appear. */
body.econexo-topic .bb-modal-overlay,
body.econexo-topic .bb-modal-overlay-open,
body.econexo-topic .bs-model-overlay,
body.econexo-group-discussion .bb-modal-overlay,
body.econexo-group-discussion .bb-modal-overlay-open { display: none !important; opacity: 0 !important; visibility: hidden !important; }
/* Undo the body dim/scroll-lock the modal adds. */
body.econexo-topic.bs-model-open,
body.econexo-topic.bb-modal-open,
body.econexo-group-discussion.bs-model-open,
body.econexo-group-discussion.bb-modal-open { overflow: auto !important; }
body.econexo-topic.bs-model-open::before,
body.econexo-topic.bb-modal-open::before { display: none !important; content: none !important; }
/* The reply form should never be a floating modal here — only the inline one. */
body.econexo-topic .bbp-reply-form.bb-modal:not(#econexo-reply-box .bbp-reply-form),
body.econexo-group-discussion .bbp-reply-form.bb-modal:not(#econexo-reply-box .bbp-reply-form) {
  position: static !important; inset: auto !important; transform: none !important; box-shadow: none !important;
}

/* ============================================================================
   INLINE COMPOSER SKIN — style BuddyBoss's native reply form to match the chat
   mockup: rounded card, title + content fields, a slim tool row, tags input,
   and a footer with the type select, notify checkbox and a purple "Publicación".
   Scoped to #econexo-reply-box so it only affects our inline composer.
   ========================================================================== */
#econexo-reply-box.econexo-composer--inline {
  display: flex; gap: 14px; align-items: flex-start; padding: 18px 20px 20px;
  background: #fff; border: 1px solid var(--ex-line); border-radius: var(--ex-r-lg);
  box-shadow: var(--ex-shadow-soft); margin-top: 8px;
}
#econexo-reply-box .econexo-composer-avatar,
#econexo-reply-box .econexo-composer-avatar img,
#econexo-reply-box .bbp-reply-form .avatar { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 44px; }
#econexo-reply-box .econexo-composer-field { flex: 1 1 auto; min-width: 0; }

/* Reply-to chip */
#econexo-reply-box .econexo-reply-to {
  display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; padding: 6px 10px;
  background: var(--ex-violet-tint); color: var(--ex-violet-ink); border-radius: 999px; font-size: .82rem; font-weight: 600;
}
#econexo-reply-box .econexo-reply-to-clear { border: 0; background: rgba(109,40,217,.12); color: var(--ex-violet-deep); width: 22px; height: 22px; border-radius: 50%; cursor: pointer; line-height: 1; }

/* The native content editor → the mockup's rounded input */
#econexo-reply-box .bbp-reply-form fieldset.bbp-form { border: 0; margin: 0; padding: 0; }
#econexo-reply-box .bbp-reply-form legend { display: none; }
#econexo-reply-box .bbp-the-content-wrapper,
#econexo-reply-box .bb-editor-wrapper,
#econexo-reply-box .bbp-the-content {
  border: 1px solid var(--ex-line) !important; border-radius: var(--ex-r-md) !important; background: #fbfdff !important;
  padding: 4px 6px !important; box-shadow: none !important;
}
#econexo-reply-box textarea.bbp-the-content,
#econexo-reply-box .bbp-the-content textarea,
#econexo-reply-box .bb-editor {
  min-height: 120px !important; border: 0 !important; background: transparent !important; font-size: .95rem; color: var(--ex-text);
  padding: 10px 12px !important; resize: vertical; width: 100%;
}
#econexo-reply-box textarea::placeholder { color: #94a3b8; }

/* Tool row (Aa, camera, video, attach, emoji) — the media buttons BuddyBoss adds */
#econexo-reply-box #whats-new-toolbar,
#econexo-reply-box .bb-editor-toolbar,
#econexo-reply-box .medium-editor-toolbar-actions {
  display: flex; align-items: center; gap: 6px; padding: 6px 6px 2px; border-top: 1px solid var(--ex-line-soft); margin-top: 2px;
}
#econexo-reply-box #whats-new-toolbar .toolbar-button,
#econexo-reply-box .bb-editor-toolbar button {
  width: 34px; height: 34px; border-radius: 10px; border: 0; background: transparent; color: #64748b; display: grid; place-items: center; cursor: pointer;
}
#econexo-reply-box #whats-new-toolbar .toolbar-button:hover,
#econexo-reply-box .bb-editor-toolbar button:hover { background: var(--ex-violet-tint); color: var(--ex-violet-deep); }

/* Tags input */
#econexo-reply-box #bbp_topic_tags,
#econexo-reply-box input.bbp-tag {
  width: 100%; margin-top: 12px; border: 1px solid var(--ex-line); border-radius: var(--ex-r-md); padding: 12px 14px; font-size: .9rem; background: #fbfdff; color: var(--ex-text);
}

/* Footer: type select + notify + Publicación */
#econexo-reply-box .bbp-submit-wrapper {
  display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 14px;
}
#econexo-reply-box .bbp-form-attributes,
#econexo-reply-box .bbp-topic-form select,
#econexo-reply-box select#bbp_stick_topic_select,
#econexo-reply-box select#bbp_topic_status_select { border: 1px solid var(--ex-line); border-radius: 10px; padding: 8px 12px; background: #fff; color: var(--ex-text); font-size: .85rem; }
#econexo-reply-box .bbp-topic-subscribe-checkbox,
#econexo-reply-box #bbp_topic_subscription,
#econexo-reply-box label[for="bbp_topic_subscription"] { font-size: .85rem; color: var(--ex-muted); }

/* The Post/Publicación button → purple pill */
#econexo-reply-box button#bbp_reply_submit,
#econexo-reply-box #bbp_reply_submit,
#econexo-reply-box button[type="submit"],
#econexo-reply-box input#bbp_reply_submit {
  margin-left: auto !important; border: 0 !important; border-radius: 999px !important;
  background: linear-gradient(90deg, #6d28d9, #8b5cf6) !important; color: #fff !important;
  padding: 12px 28px !important; font-weight: 800 !important; font-size: .92rem !important; cursor: pointer;
  box-shadow: 0 8px 18px rgba(109,40,217,.22) !important; transition: transform .15s ease, box-shadow .15s ease; width: auto !important; min-height: 0 !important;
}
#econexo-reply-box button#bbp_reply_submit:hover,
#econexo-reply-box #bbp_reply_submit:hover { transform: translateY(-1px); box-shadow: 0 12px 24px rgba(109,40,217,.3) !important; }

/* Hide bbPress rows that aren't in the mockup composer (revisions log, etc.) */
#econexo-reply-box .bbp-form-revisions,
#econexo-reply-box .bbp_reply_revision_log { display: none !important; }

@media (max-width: 600px) {
  #econexo-reply-box.econexo-composer--inline { flex-direction: column; padding: 14px; }
  #econexo-reply-box .econexo-composer-avatar { display: none; }
  #econexo-reply-box .bbp-submit-wrapper { flex-direction: column; align-items: stretch; }
  #econexo-reply-box button#bbp_reply_submit { width: 100% !important; margin-left: 0 !important; }
}

/* Composer cleanup to match the mockup: hide the native "Reply to:" heading +
   its quoted-intro preview (our purple "En respuesta a" chip already covers it). */
#econexo-reply-box .bbp-reply-to-title,
#econexo-reply-box .bbp-the-reply-to,
#econexo-reply-box #bbp-reply-title,
#econexo-reply-box .bbp-reply-form > h3,
#econexo-reply-box .bbp-reply-form > .bbp-reply-to { display: none !important; }

/* Hide broken inline attachment/emoji placeholders inside message bubbles. */
.econexo-messages .econexo-bubble img[src=""],
.econexo-messages .econexo-bubble img:not([src]),
.econexo-messages .econexo-bubble img[alt^="3"][width="20"],
.econexo-messages .econexo-bubble .mce-object-iframe { display: none; }

/* The native lead-topic block (ul.bbp-lead-topic) carries the discussion TITLE +
   INTRO — we KEEP it. We only remove the redundant bits that duplicate/clutter:
   the "updated… · Miembros · Responder" meta row and the Stick/Cerrar admin
   controls. (Earlier this whole block was hidden, which wrongly removed the title
   and intro — corrected here.) Chat bubbles use .econexo-msg and are untouched. */
body.econexo-topic ul.bbp-lead-topic .bb-topic-states,
body.econexo-topic ul.bbp-lead-topic .bs-forums-meta,
body.econexo-topic ul.bbp-lead-topic .bbp-meta,
body.econexo-topic ul.bbp-lead-topic .bbp-reply-post-date,
body.econexo-topic ul.bbp-lead-topic .more-actions,
body.econexo-group-discussion ul.bbp-lead-topic .bb-topic-states,
body.econexo-group-discussion ul.bbp-lead-topic .bs-forums-meta,
body.econexo-group-discussion ul.bbp-lead-topic .bbp-meta,
body.econexo-group-discussion ul.bbp-lead-topic .bbp-reply-post-date,
body.econexo-group-discussion ul.bbp-lead-topic .more-actions {
  display: none !important;
}

/* Footer uses the real ECONEXO logo image (replaces the CSS text badge). */
.econexo-footer-logo img { height: 46px; width: auto; display: block; }

/* Footer social icons hold the brand SVGs. */
.econexo-footer-social svg { display: block; width: 18px; height: 18px; }

/* ============================================================================
   BUDDYPANEL SCROLL — REDESIGN. Previous attempts fought BuddyBoss's nested
   flex/height containers (which produced a mis-placed / double scrollbar). New
   approach: make the PANEL ITSELF the one and only scroll container. Every inner
   wrapper flows naturally (no height, no overflow), so there is a single scrollbar
   at the panel's right edge and the whole menu — down to Configuración / Ver mis
   pedidos — is always reachable.
   ========================================================================== */
@media (min-width: 1101px) {
body .buddypanel {
  height: 100vh !important;
  max-height: 100vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
  overscroll-behavior: contain !important;
  display: block !important;
}
}

/* On mobile/tablet the BuddyPanel is a native slide-in menu (opened by the
   hamburger), NOT a fixed sidebar. The desktop scroll rules above are scoped to
   ≥1101px so they don't apply here. We also RESET any forced height/overflow/
   display so BuddyBoss's own mobile CSS controls the panel — this removes the
   leftover left-side sliver that my desktop scroll fix was creating on mobile. */
@media (max-width: 1100px) {
  body .buddypanel,
  body .buddypanel .side-panel-inner,
  body .buddypanel .side-panel-menu-container {
    height: auto !important; max-height: none !important; overflow: visible !important;
    overflow-y: visible !important; overscroll-behavior: auto !important;
  }
}
/* Every inner wrapper just flows — no own height, no own scroll. */
body .buddypanel .side-panel-inner,
body .buddypanel .side-panel-menu-container,
body .buddypanel .side-panel-menu,
body .buddypanel .buddypanel-menu,
body .buddypanel .has-section-menu {
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow: visible !important;
  overflow-y: visible !important;
  flex: none !important;
  display: block !important;
  position: static !important;
}
/* Breathing room so the last item isn't flush against the bottom. */
body .buddypanel .side-panel-menu-container { padding-bottom: 40px !important; }
/* One clean scrollbar on the panel. */
body .buddypanel::-webkit-scrollbar { width: 8px; }
body .buddypanel::-webkit-scrollbar-thumb { background: #d7d2ea; border-radius: 8px; }
body .buddypanel::-webkit-scrollbar-track { background: transparent; }
/* Keep the panel header (toggle + logo) pinned while the rest scrolls. */
body .buddypanel .panel-head,
body .buddypanel > .site-branding {
  position: sticky !important; top: 0 !important; z-index: 5 !important;
  background: var(--bb-sidenav-background, #fff) !important;
}