/* ════════════════════════════════════════════════════════════
   Fluent Community — SmallTraders Dark Theme  v2.0
   SOLO MÓVIL (≤768px). Sin efecto en laptop/tablet/desktop/TV
   ════════════════════════════════════════════════════════════ */

/* Ocultar en ≥769px (esto solo aplica a los overrides de este archivo) */
@media (min-width: 769px) {
  /* Nada que ocultar — FC usa su propio tema en desktop */
  .fc-st-mobile-only { display: none !important; }
}

@media (max-width: 768px) {

/* ── Variables SmallTraders ──────────────────────────────── */
:root {
  --fc-st-bg:         #060d08;
  --fc-st-surface:    #0a1410;
  --fc-st-surface2:   #0d1f12;
  --fc-st-border:     #1a3820;
  --fc-st-border-h:   #2a5530;
  --fc-st-gold:       #c9a227;
  --fc-st-gold-bg:    rgba(201,162,39,.12);
  --fc-st-green:      #22c55e;
  --fc-st-green-bg:   rgba(34,197,94,.1);
  --fc-st-text:       #ddeedd;
  --fc-st-text-muted: #6a8a6a;
  --fc-st-text-dim:   #3a5a3a;
  --fc-st-radius:     14px;
  --fc-st-radius-sm:  10px;
  --fc-st-shadow:     0 2px 16px rgba(0,0,0,.6);
}

/* ══════════════════════════════════════════════════════════
   BASE — Fondo general
   ══════════════════════════════════════════════════════════ */
body,
html,
#fcom-app,
.fcom-portal-wrap,
.fcom-main-wrap,
.fcom-content-wrap,
.fluent-community,
[class*="fcom-"],
[class*="fluent-com"] {
  background-color: var(--fc-st-bg) !important;
  color: var(--fc-st-text) !important;
}

/* Scrollbar */
* { scrollbar-color: var(--fc-st-border) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 4px; height: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--fc-st-border); border-radius: 2px; }

/* ══════════════════════════════════════════════════════════
   HEADER / NAVBAR SUPERIOR
   ══════════════════════════════════════════════════════════ */
.fcom-top-nav,
.fcom-header,
.fcom-portal-header,
[class*="fcom-nav-top"],
.site-header,
.fluent-community header {
  background: #040a05 !important;
  border-bottom: 1px solid var(--fc-st-border) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.5) !important;
  backdrop-filter: none !important;
}

/* Logo / Brand en header */
.fcom-portal-header .fcom-brand-logo-wrap,
.fcom-portal-header .fcom-brand,
.fcom-header .site-branding {
  color: var(--fc-st-text) !important;
}

/* Nombre del portal → "Comunidad SmallTraders" */
.fcom-portal-title,
.fcom-portal-header .fcom-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: var(--fc-st-green) !important;
}

/* Iconos del header */
.fcom-top-nav svg,
.fcom-header svg,
[class*="fcom-nav"] svg {
  color: var(--fc-st-text-muted) !important;
  stroke: currentColor !important;
}
.fcom-top-nav .active svg,
[class*="fcom-nav"] .router-link-active svg {
  color: var(--fc-st-green) !important;
}

/* Botón de notificaciones */
.fcom-notif-btn,
.fcom-header-icon-btn {
  background: var(--fc-st-surface2) !important;
  border: 1px solid var(--fc-st-border) !important;
  border-radius: 10px !important;
  color: var(--fc-st-text-muted) !important;
}

/* Avatar círculo */
.fcom-user-avatar,
.fcom-avatar {
  border: 2px solid var(--fc-st-green) !important;
  box-shadow: 0 0 8px var(--fc-st-green-bg) !important;
}

/* ══════════════════════════════════════════════════════════
   NAVEGACIÓN INFERIOR (BottomBar de FC)
   ══════════════════════════════════════════════════════════ */
.fcom-bottom-nav,
.fcom-mobile-nav,
[class*="fcom-bottom-bar"],
[class*="fcom-tab-bar"] {
  background: #040a05 !important;
  border-top: 1px solid var(--fc-st-border) !important;
  box-shadow: 0 -2px 16px rgba(0,0,0,.6) !important;
  /* Dejar espacio para el botón PWA */
  padding-bottom: env(safe-area-inset-bottom, 8px) !important;
}
.fcom-bottom-nav a,
.fcom-mobile-nav a,
[class*="fcom-bottom-bar"] a {
  color: var(--fc-st-text-dim) !important;
}
.fcom-bottom-nav a.active,
.fcom-bottom-nav a.router-link-active,
.fcom-mobile-nav .is-active {
  color: var(--fc-st-green) !important;
}
.fcom-bottom-nav svg,
.fcom-mobile-nav svg { stroke: currentColor !important; }

/* ══════════════════════════════════════════════════════════
   SIDEBAR / PANEL LATERAL
   ══════════════════════════════════════════════════════════ */
.fcom-sidebar,
.fcom-left-sidebar,
.fcom-right-sidebar,
[class*="fcom-sidebar"] {
  background: var(--fc-st-surface) !important;
  border-color: var(--fc-st-border) !important;
}

/* ══════════════════════════════════════════════════════════
   CARDS / POSTS / FEED
   ══════════════════════════════════════════════════════════ */
.fcom-post-card,
.fcom-feed-item,
.fcom-activity-item,
[class*="fcom-post"],
[class*="fcom-card"],
[class*="fcom-feed"] {
  background: var(--fc-st-surface2) !important;
  border: 1px solid var(--fc-st-border) !important;
  border-radius: var(--fc-st-radius) !important;
  box-shadow: var(--fc-st-shadow) !important;
  color: var(--fc-st-text) !important;
}
.fcom-post-card:hover,
[class*="fcom-card"]:hover {
  border-color: var(--fc-st-border-h) !important;
}

/* Título del post */
.fcom-post-title,
.fcom-activity-title,
[class*="fcom-post-title"] {
  color: var(--fc-st-text) !important;
  font-weight: 600 !important;
}

/* Meta: fecha, autor */
.fcom-post-meta,
.fcom-activity-meta,
[class*="fcom-meta"] {
  color: var(--fc-st-text-muted) !important;
  font-size: 11px !important;
}

/* Likes / comentarios */
.fcom-reaction-btn,
.fcom-action-btn,
[class*="fcom-like"],
[class*="fcom-comment-btn"] {
  color: var(--fc-st-text-muted) !important;
  background: transparent !important;
  border: none !important;
}
.fcom-reaction-btn.is-active,
[class*="fcom-like"].liked {
  color: #ef4444 !important;
}

/* ══════════════════════════════════════════════════════════
   ESCRIBIR POST / INPUT AREA
   ══════════════════════════════════════════════════════════ */
.fcom-create-post,
.fcom-post-form,
[class*="fcom-editor"],
[class*="fcom-create"] {
  background: var(--fc-st-surface2) !important;
  border: 1px solid var(--fc-st-border) !important;
  border-radius: var(--fc-st-radius) !important;
}
.fcom-create-post input,
.fcom-create-post textarea,
.fcom-post-form input,
.fcom-post-form textarea {
  background: transparent !important;
  color: var(--fc-st-text) !important;
  border: none !important;
}
.fcom-create-post input::placeholder,
.fcom-create-post textarea::placeholder {
  color: var(--fc-st-text-dim) !important;
}

/* ══════════════════════════════════════════════════════════
   ESPACIOS / SPACES
   ══════════════════════════════════════════════════════════ */
.fcom-space-card,
[class*="fcom-space-item"] {
  background: var(--fc-st-surface2) !important;
  border: 1px solid var(--fc-st-border) !important;
  border-radius: var(--fc-st-radius) !important;
  color: var(--fc-st-text) !important;
}
.fcom-space-card .fcom-space-name { color: var(--fc-st-text) !important; }
.fcom-space-card .fcom-space-meta { color: var(--fc-st-text-muted) !important; }

/* ══════════════════════════════════════════════════════════
   MIEMBROS / MEMBERS
   ══════════════════════════════════════════════════════════ */
.fcom-member-card,
[class*="fcom-member-item"],
.fcom-members-list > * {
  background: var(--fc-st-surface2) !important;
  border: 1px solid var(--fc-st-border) !important;
  border-radius: var(--fc-st-radius) !important;
}
.fcom-member-name { color: var(--fc-st-text) !important; font-weight: 600 !important; }
.fcom-member-role,
.fcom-member-meta { color: var(--fc-st-text-muted) !important; }

/* ══════════════════════════════════════════════════════════
   RANKING / LEADERBOARD
   ══════════════════════════════════════════════════════════ */
.fcom-leaderboard-item,
.fcom-rank-item,
[class*="fcom-leader"] {
  background: var(--fc-st-surface2) !important;
  border: 1px solid var(--fc-st-border) !important;
  border-radius: var(--fc-st-radius-sm) !important;
  color: var(--fc-st-text) !important;
}
/* Top 3 highlight */
.fcom-rank-item:nth-child(1),
.fcom-leaderboard-item:first-child {
  border-color: var(--fc-st-gold) !important;
  background: var(--fc-st-gold-bg) !important;
}
.fcom-rank-number,
.fcom-rank-score { color: var(--fc-st-gold) !important; font-weight: 700 !important; }

/* ══════════════════════════════════════════════════════════
   CURSOS / COURSES
   ══════════════════════════════════════════════════════════ */
.fcom-course-card,
[class*="fcom-course-item"] {
  background: var(--fc-st-surface2) !important;
  border: 1px solid var(--fc-st-border) !important;
  border-radius: var(--fc-st-radius) !important;
  overflow: hidden !important;
}
.fcom-course-title { color: var(--fc-st-text) !important; font-weight: 700 !important; }
.fcom-course-meta  { color: var(--fc-st-text-muted) !important; }
/* Progress bar */
.fcom-progress-bar-fill,
[class*="fcom-progress-fill"] {
  background: linear-gradient(90deg, var(--fc-st-green), var(--fc-st-gold)) !important;
}

/* ══════════════════════════════════════════════════════════
   MENSAJES / MESSAGING
   ══════════════════════════════════════════════════════════ */
.fcom-message-bubble.outgoing,
[class*="fcom-msg-out"] {
  background: #0f2e18 !important;
  border: 1px solid var(--fc-st-border-h) !important;
  color: var(--fc-st-text) !important;
  border-radius: 16px 16px 4px 16px !important;
}
.fcom-message-bubble.incoming,
[class*="fcom-msg-in"] {
  background: var(--fc-st-surface2) !important;
  border: 1px solid var(--fc-st-border) !important;
  color: var(--fc-st-text) !important;
  border-radius: 16px 16px 16px 4px !important;
}
.fcom-message-input-wrap,
.fcom-chat-input-area {
  background: var(--fc-st-surface) !important;
  border-top: 1px solid var(--fc-st-border) !important;
}
.fcom-message-input {
  background: var(--fc-st-surface2) !important;
  border: 1px solid var(--fc-st-border) !important;
  color: var(--fc-st-text) !important;
  border-radius: 12px !important;
}

/* ══════════════════════════════════════════════════════════
   ALERTAS / NOTIFICATIONS
   ══════════════════════════════════════════════════════════ */
.fcom-notification-item,
[class*="fcom-notif-item"] {
  background: var(--fc-st-surface2) !important;
  border-bottom: 1px solid var(--fc-st-border) !important;
  color: var(--fc-st-text) !important;
}
.fcom-notification-item.is-unread {
  background: rgba(34,197,94,.06) !important;
  border-left: 3px solid var(--fc-st-green) !important;
}

/* ══════════════════════════════════════════════════════════
   BOTONES / BUTTONS
   ══════════════════════════════════════════════════════════ */
/* Primario */
.fcom-btn-primary,
.fcom-cta-btn,
[class*="fcom-btn--primary"],
.el-button--primary {
  background: linear-gradient(135deg, #16a34a, #0d6b30) !important;
  border-color: var(--fc-st-green) !important;
  color: #fff !important;
  border-radius: 10px !important;
  font-weight: 700 !important;
}
/* Secundario */
.fcom-btn-secondary,
[class*="fcom-btn--secondary"],
.el-button--default {
  background: var(--fc-st-surface2) !important;
  border: 1px solid var(--fc-st-border-h) !important;
  color: var(--fc-st-text) !important;
  border-radius: 10px !important;
}
/* Completar perfil pill */
[class*="fcom-complete-profile"],
.fcom-profile-completion-btn {
  background: linear-gradient(135deg, #b8891e, #c9a227) !important;
  color: #000 !important;
  border: none !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════════════
   INPUTS / FORMULARIOS
   ══════════════════════════════════════════════════════════ */
input, textarea, select,
[class*="fcom-input"],
.el-input__inner {
  background: var(--fc-st-surface2) !important;
  border: 1px solid var(--fc-st-border) !important;
  color: var(--fc-st-text) !important;
  border-radius: var(--fc-st-radius-sm) !important;
}
input::placeholder, textarea::placeholder { color: var(--fc-st-text-dim) !important; }
input:focus, textarea:focus {
  border-color: var(--fc-st-green) !important;
  box-shadow: 0 0 0 3px var(--fc-st-green-bg) !important;
  outline: none !important;
}

/* ══════════════════════════════════════════════════════════
   DROPDOWNS / MODALES
   ══════════════════════════════════════════════════════════ */
.fcom-dropdown,
.el-dropdown-menu,
[class*="fcom-popover"],
[class*="fcom-modal"],
.el-dialog {
  background: var(--fc-st-surface) !important;
  border: 1px solid var(--fc-st-border) !important;
  border-radius: var(--fc-st-radius) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.8) !important;
  color: var(--fc-st-text) !important;
}

/* ══════════════════════════════════════════════════════════
   TABS / FILTROS
   ══════════════════════════════════════════════════════════ */
.fcom-tab-nav,
[class*="fcom-tabs"],
.el-tabs__nav {
  border-bottom: 1px solid var(--fc-st-border) !important;
  background: transparent !important;
}
.fcom-tab-item,
.el-tabs__item {
  color: var(--fc-st-text-muted) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
}
.fcom-tab-item.is-active,
.el-tabs__item.is-active {
  color: var(--fc-st-green) !important;
}
.el-tabs__active-bar {
  background: var(--fc-st-green) !important;
}

/* ══════════════════════════════════════════════════════════
   ORDENAR / SORT DROPDOWN
   ══════════════════════════════════════════════════════════ */
.fcom-sort-wrap,
[class*="fcom-filter"] {
  color: var(--fc-st-text-muted) !important;
}
.fcom-sort-wrap strong,
[class*="fcom-filter"] .active {
  color: var(--fc-st-text) !important;
}

/* ══════════════════════════════════════════════════════════
   SEPARADORES / DIVIDERS
   ══════════════════════════════════════════════════════════ */
hr,
[class*="fcom-divider"],
.el-divider {
  border-color: var(--fc-st-border) !important;
  background: var(--fc-st-border) !important;
}

/* ══════════════════════════════════════════════════════════
   SPINNER / LOADER
   ══════════════════════════════════════════════════════════ */
.el-loading-spinner .path,
[class*="fcom-spinner"] {
  stroke: var(--fc-st-green) !important;
}

/* ══════════════════════════════════════════════════════════
   BADGES / CHIPS
   ══════════════════════════════════════════════════════════ */
.fcom-badge,
[class*="fcom-chip"],
.fcom-tag {
  background: var(--fc-st-green-bg) !important;
  color: var(--fc-st-green) !important;
  border: 1px solid rgba(34,197,94,.3) !important;
  border-radius: 20px !important;
  font-size: 10px !important;
  font-weight: 700 !important;
}

/* ══════════════════════════════════════════════════════════
   PAGE TITLES — Traducción visual de secciones
   ══════════════════════════════════════════════════════════ */
.fcom-page-title,
[class*="fcom-section-title"],
h1, h2, h3 {
  color: var(--fc-st-text) !important;
}

/* "Alimentación" → reemplazar visualmente por "APRENDER" via CSS */
/* (El JS hace el reemplazo real del texto) */

/* ══════════════════════════════════════════════════════════
   SCROLL/PADDING EXTRA para que el botón PWA no tape contenido
   ══════════════════════════════════════════════════════════ */
.fcom-main-content,
.fcom-feed-wrap,
[class*="fcom-content-area"] {
  padding-bottom: 90px !important;
}

/* ══════════════════════════════════════════════════════════
   ASEGURAR que el botón PWA se vea sobre FC
   ══════════════════════════════════════════════════════════ */
#st-pwa-trigger { z-index: 9999999 !important; }
#st-pwa-overlay { z-index: 9999992 !important; }
#st-pwa-backdrop { z-index: 9999991 !important; }

} /* end @media max-width 768px */