/* Focus hero background images: vertically centered, anchored right */
.editorial-slide {
  min-height: 430px !important;
}

.editorial-slide-bg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: 85% 35% !important;
}

.editorial-slide-1 .editorial-slide-bg { object-position: 85% 45% !important; }
.editorial-slide-2 .editorial-slide-bg { object-position: 85% 35% !important; }
.editorial-slide-3 .editorial-slide-bg { object-position: 85% 30% !important; }
.editorial-slide-4 .editorial-slide-bg { object-position: 85% 28% !important; }
.editorial-slide-5 .editorial-slide-bg { object-position: 85% 32% !important; }

/* Enhanced PC/Desktop Photo Visibility (+10% more image exposure) */
.editorial-slide-1 .editorial-overlay {
  background: linear-gradient(90deg, #f8f6f0 0%, rgba(248,246,240,0.95) 28%, rgba(248,246,240,0.48) 52%, rgba(248,246,240,0.05) 75%, transparent 100%) !important;
}
.editorial-slide-2 .editorial-overlay {
  background: linear-gradient(90deg, #f5f7fa 0%, rgba(245,247,250,0.95) 28%, rgba(245,247,250,0.48) 52%, rgba(245,247,250,0.05) 75%, transparent 100%) !important;
}
.editorial-slide-3 .editorial-overlay {
  background: linear-gradient(90deg, #f2f7f4 0%, rgba(242,247,244,0.95) 28%, rgba(242,247,244,0.48) 52%, rgba(242,247,244,0.05) 75%, transparent 100%) !important;
}
.editorial-slide-4 .editorial-overlay {
  background: linear-gradient(90deg, #f6f4fa 0%, rgba(246,244,250,0.95) 28%, rgba(246,244,250,0.48) 52%, rgba(246,244,250,0.05) 75%, transparent 100%) !important;
}
.editorial-slide-5 .editorial-overlay {
  background: linear-gradient(90deg, #faf5f2 0%, rgba(250,245,242,0.95) 28%, rgba(250,245,242,0.48) 52%, rgba(250,245,242,0.05) 75%, transparent 100%) !important;
}

html[data-theme="dark"] .editorial-slide-1 .editorial-overlay {
  background: linear-gradient(90deg, #0d1512 0%, rgba(13,21,18,0.95) 28%, rgba(13,21,18,0.48) 52%, rgba(13,21,18,0.05) 75%, transparent 100%) !important;
}
html[data-theme="dark"] .editorial-slide-2 .editorial-overlay {
  background: linear-gradient(90deg, #101419 0%, rgba(16,20,25,0.95) 28%, rgba(16,20,25,0.48) 52%, rgba(16,20,25,0.05) 75%, transparent 100%) !important;
}
html[data-theme="dark"] .editorial-slide-3 .editorial-overlay {
  background: linear-gradient(90deg, #091712 0%, rgba(9,23,18,0.95) 28%, rgba(9,23,18,0.48) 52%, rgba(9,23,18,0.05) 75%, transparent 100%) !important;
}
html[data-theme="dark"] .editorial-slide-4 .editorial-overlay {
  background: linear-gradient(90deg, #10111e 0%, rgba(16,17,30,0.95) 28%, rgba(16,17,30,0.48) 52%, rgba(16,17,30,0.05) 75%, transparent 100%) !important;
}
html[data-theme="dark"] .editorial-slide-5 .editorial-overlay {
  background: linear-gradient(90deg, #18110e 0%, rgba(24,17,14,0.95) 28%, rgba(24,17,14,0.48) 52%, rgba(24,17,14,0.05) 75%, transparent 100%) !important;
}

@media (max-width: 960px) {
  .editorial-slide-bg { object-position: 75% 35% !important; }
  .editorial-slide-1 .editorial-slide-bg { object-position: 75% 45% !important; }
  .editorial-slide-2 .editorial-slide-bg { object-position: 75% 35% !important; }
  .editorial-slide-3 .editorial-slide-bg { object-position: 75% 30% !important; }
  .editorial-slide-4 .editorial-slide-bg { object-position: 75% 28% !important; }
  .editorial-slide-5 .editorial-slide-bg { object-position: 75% 32% !important; }
}

@media (max-width: 768px) {
  .editorial-slide {
    min-height: 430px !important;
    align-items: flex-end !important;
  }
  .editorial-slide-bg { object-position: center top !important; }
  .editorial-slide-1 .editorial-slide-bg { object-position: center top !important; }
  .editorial-slide-2 .editorial-slide-bg { object-position: center top !important; }
  .editorial-slide-3 .editorial-slide-bg { object-position: center top !important; }
  .editorial-slide-4 .editorial-slide-bg { object-position: center top !important; }
  .editorial-slide-5 .editorial-slide-bg { object-position: center top !important; }

  /* Hide badge pills completely on mobile per user request */
  .editorial-badges-row,
  .editorial-pill {
    display: none !important;
  }

  /* Compact content block at bottom with reserved bottom space for pagination dots */
  .editorial-content {
    padding: 14px 16px 46px 16px !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .editorial-tag {
    margin-bottom: 5px !important;
  }

  .editorial-title {
    font-size: 22px !important;
    line-height: 1.15 !important;
    margin-bottom: 5px !important;
  }

  .editorial-desc {
    font-size: 12.5px !important;
    line-height: 1.35 !important;
    margin-bottom: 10px !important;
  }

  .editorial-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    width: 100% !important;
    margin-bottom: 0 !important;
  }

  .editorial-btn {
    flex: 1 !important;
    min-height: 38px !important;
    padding: 8px 10px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    text-align: center !important;
    justify-content: center !important;
  }

  /* Pagination dots floating cleanly below buttons */
  .editorial-dots {
    bottom: 8px !important;
    padding: 3px 8px !important;
    gap: 5px !important;
    z-index: 25 !important;
    background: rgba(255, 255, 255, 0.75) !important;
    backdrop-filter: blur(8px) !important;
  }
  .editorial-dot {
    width: 6px !important;
    height: 6px !important;
  }
  .editorial-dot.active {
    width: 18px !important;
  }

  /* Transparent top 45% gradient overlays for crisp photo visibility on mobile */
  .editorial-slide-1 .editorial-overlay {
    background: linear-gradient(180deg, rgba(248,246,240,0) 0%, rgba(248,246,240,0) 42%, rgba(248,246,240,0.82) 65%, #f8f6f0 86%, #f8f6f0 100%) !important;
  }
  .editorial-slide-2 .editorial-overlay {
    background: linear-gradient(180deg, rgba(245,247,250,0) 0%, rgba(245,247,250,0) 42%, rgba(245,247,250,0.82) 65%, #f5f7fa 86%, #f5f7fa 100%) !important;
  }
  .editorial-slide-3 .editorial-overlay {
    background: linear-gradient(180deg, rgba(242,247,244,0) 0%, rgba(242,247,244,0) 42%, rgba(242,247,244,0.82) 65%, #f2f7f4 86%, #f2f7f4 100%) !important;
  }
  .editorial-slide-4 .editorial-overlay {
    background: linear-gradient(180deg, rgba(246,244,250,0) 0%, rgba(246,244,250,0) 42%, rgba(246,244,250,0.82) 65%, #f6f4fa 86%, #f6f4fa 100%) !important;
  }
  .editorial-slide-5 .editorial-overlay {
    background: linear-gradient(180deg, rgba(250,245,242,0) 0%, rgba(250,245,242,0) 42%, rgba(250,245,242,0.82) 65%, #faf5f2 86%, #faf5f2 100%) !important;
  }

  html[data-theme="dark"] .editorial-slide-1 .editorial-overlay {
    background: linear-gradient(180deg, rgba(13,21,18,0) 0%, rgba(13,21,18,0) 42%, rgba(13,21,18,0.85) 65%, #0d1512 86%, #0d1512 100%) !important;
  }
  html[data-theme="dark"] .editorial-slide-2 .editorial-overlay {
    background: linear-gradient(180deg, rgba(16,20,25,0) 0%, rgba(16,20,25,0) 42%, rgba(16,20,25,0.85) 65%, #101419 86%, #101419 100%) !important;
  }
  html[data-theme="dark"] .editorial-slide-3 .editorial-overlay {
    background: linear-gradient(180deg, rgba(9,23,18,0) 0%, rgba(9,23,18,0) 42%, rgba(9,23,18,0.85) 65%, #091712 86%, #091712 100%) !important;
  }
  html[data-theme="dark"] .editorial-slide-4 .editorial-overlay {
    background: linear-gradient(180deg, rgba(16,17,30,0) 0%, rgba(16,17,30,0) 42%, rgba(16,17,30,0.85) 65%, #10111e 86%, #10111e 100%) !important;
  }
  html[data-theme="dark"] .editorial-slide-5 .editorial-overlay {
    background: linear-gradient(180deg, rgba(24,17,14,0) 0%, rgba(24,17,14,0) 42%, rgba(24,17,14,0.85) 65%, #18110e 86%, #18110e 100%) !important;
  }
}

/* Pure Arrow Navigation (no background box, only the clean arrow) */
.editorial-arrow {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 44px !important;
  height: 64px !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: none !important;
  border-radius: 0 !important;
  color: rgba(20, 31, 26, 0.75) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  z-index: 30 !important;
  pointer-events: auto !important;
  padding: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 2px 4px rgba(255, 255, 255, 0.8)) !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease !important;
}

.editorial-arrow svg {
  pointer-events: none !important;
  width: 34px !important;
  height: 34px !important;
  stroke: currentColor !important;
  stroke-width: 2.8 !important;
}

.editorial-arrow:hover {
  background: transparent !important;
  color: var(--coral, #e0684b) !important;
  transform: translateY(-50%) scale(1.2) !important;
  filter: drop-shadow(0 2px 8px rgba(224, 104, 75, 0.45)) !important;
}

.editorial-arrow:active {
  transform: translateY(-50%) scale(0.95) !important;
}

.editorial-arrow.prev {
  left: 12px !important;
}

.editorial-arrow.next {
  right: 12px !important;
}

html[data-theme="dark"] .editorial-arrow {
  color: rgba(255, 255, 255, 0.8) !important;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.8)) !important;
}

html[data-theme="dark"] .editorial-arrow:hover {
  color: var(--coral, #f0896f) !important;
  filter: drop-shadow(0 2px 10px rgba(240, 137, 111, 0.6)) !important;
}

@media (max-width: 768px) {
  .editorial-arrow {
    display: none !important;
  }
}
/* Give the opening message a little more presence without altering other slides. */
#inicio .editorial-slide-1 .editorial-title { font-size: 36px; }
@media (max-width: 960px) {
  #inicio .editorial-slide-1 .editorial-title { font-size: 30px; }
}
@media (max-width: 440px) {
  #inicio .editorial-slide-1 .editorial-title { font-size: 21px !important; }
  .editorial-content {
    padding: 12px 12px 42px 12px !important;
  }
  .editorial-actions {
    display: flex !important;
    flex-direction: row !important;
    gap: 6px !important;
    width: 100% !important;
    margin-bottom: 0 !important;
  }
  .editorial-btn {
    flex: 1 !important;
    width: auto !important;
    min-height: 36px !important;
    padding: 7px 8px !important;
    font-size: 11.5px !important;
  }
  .editorial-dots {
    bottom: 6px !important;
  }
}

/* ==========================================================================
   QEUBO CRAFTSMANSHIP: MOBILE UX/UI ELEVATION (Max-Width: 768px & 440px)
   ========================================================================== */

@media (max-width: 768px) {
  /* 1. App Shell & Safe View Spacing */
  body {
    -webkit-tap-highlight-color: transparent;
    text-rendering: optimizeLegibility;
  }

  .view,
  #inicio,
  #explorar,
  #favoritos,
  #cuenta,
  #misavisos,
  #borradores,
  #reportes,
  #publicar {
    padding-bottom: calc(86px + env(safe-area-inset-bottom, 16px)) !important;
  }

  .wrap {
    width: min(calc(100% - 24px), 720px) !important;
  }

  /* 2. Topbar & Header Ergonomics */
  header.qeubo-header {
    background: rgba(247, 245, 238, 0.96) !important;
    backdrop-filter: blur(20px) saturate(190%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
    border-bottom: 1px solid rgba(223, 219, 207, 0.85) !important;
  }

  html[data-theme="dark"] header.qeubo-header {
    background: rgba(18, 26, 22, 0.96) !important;
    border-bottom-color: rgba(39, 56, 48, 0.85) !important;
  }

  .topbar {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 6px 10px !important;
    min-height: 52px !important;
    padding: 6px 0 4px !important;
  }

  .topbar .brand {
    order: 1 !important;
  }

  .topbar .brand .qeubo-brand-icon {
    width: 32px !important;
    height: 32px !important;
  }

  .topbar .brand .qeubo-wordmark-dark,
  .topbar .brand .qeubo-wordmark-light {
    width: 104px !important;
  }

  .head-actions {
    order: 2 !important;
    display: flex !important;
    align-items: center !important;
    gap: 7px !important;
  }

  .qeubo-theme-toggle {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    border-radius: 11px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    touch-action: manipulation !important;
  }

  .qeubo-theme-toggle:active {
    transform: scale(0.92) !important;
  }

  .toplinks {
    display: none !important;
  }

  /* 3. Global Search Bar on Mobile */
  .global-search {
    order: 3 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 3px 0 6px !important;
    background: var(--surface, #ffffff) !important;
    border-radius: 12px !important;
    border: 1.5px solid var(--border, #dfdbcf) !important;
    padding: 0 4px 0 11px !important;
    min-height: 38px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease !important;
  }

  html[data-theme="dark"] .global-search {
    background: #141f19 !important;
    border-color: #273a30 !important;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2) !important;
  }

  .global-search:focus-within {
    border-color: var(--coral, #e0684b) !important;
    box-shadow: 0 0 0 3px rgba(224, 104, 75, 0.18) !important;
  }

  .global-search input {
    font-size: 13.5px !important;
    min-height: 36px !important;
    color: var(--ink, #141f1a) !important;
  }

  .search-kbd-hint {
    display: none !important;
  }

  .search-suggestions {
    left: 0 !important;
    right: 0 !important;
  }

  /* 4. Category Scroll Strip (.mobilecats) */
  .mobilecats {
    display: flex !important;
    gap: 8px !important;
    overflow-x: auto !important;
    padding: 4px 2px 8px 2px !important;
    margin: 2px 0 6px 0 !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    scroll-snap-type: x proximity !important;
  }

  .mobilecats::-webkit-scrollbar {
    display: none !important;
  }

  .mobilecats .navbtn {
    flex: none !important;
    scroll-snap-align: start !important;
    font-size: 12.5px !important;
    font-weight: 750 !important;
    padding: 7px 14px !important;
    border-radius: 999px !important;
    background: var(--surface, #ffffff) !important;
    color: var(--ink-secondary, #43554b) !important;
    border: 1px solid var(--border, #dfdbcf) !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.03) !important;
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
    touch-action: manipulation !important;
    white-space: nowrap !important;
  }

  html[data-theme="dark"] .mobilecats .navbtn {
    background: #192720 !important;
    border-color: #2b3e34 !important;
    color: #b3c7ba !important;
  }

  .mobilecats .navbtn:active {
    transform: scale(0.94) !important;
    background: var(--surface-hover, #f0ede4) !important;
  }

  .mobilecats .navbtn.active {
    background: var(--coral, #e0684b) !important;
    color: #ffffff !important;
    border-color: var(--coral, #e0684b) !important;
    box-shadow: 0 2px 8px rgba(224, 104, 75, 0.3) !important;
  }

  /* 5. Mobile Listing Grid & Card Precision */
  .listing-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 10px !important;
    margin-top: 10px !important;
  }

  .card {
    border-radius: 14px !important;
    overflow: hidden !important;
    background: var(--surface, #ffffff) !important;
    border: 1px solid var(--border, #dfdbcf) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
    transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease !important;
    display: flex !important;
    flex-direction: column !important;
  }

  html[data-theme="dark"] .card {
    background: #16241d !important;
    border-color: #273b30 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
  }

/* ==========================================================================
   DEFINITIVE CHAT HEADER MOBILE & DESKTOP STYLING
   ========================================================================== */

#thread-area .chat-header,
.chat-header,
.inbox-whatsapp-chat .chat-header {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px 14px !important;
  min-height: 58px !important;
  background: var(--surface-secondary, #f0f4f1) !important;
  border-bottom: 1.5px solid var(--border, #dfdbcf) !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
  z-index: 10 !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

html[data-theme="dark"] #thread-area .chat-header,
html[data-theme="dark"] .chat-header,
html[data-theme="dark"] .inbox-whatsapp-chat .chat-header {
  background: #18251e !important;
  border-bottom-color: #26382e !important;
}

#thread-area .chat-header-info,
.chat-header-info {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  overflow: hidden !important;
}

#thread-area .chat-back-mobile-btn,
.chat-back-mobile-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid var(--border, #dfdbcf) !important;
  background: var(--surface, #ffffff) !important;
  color: var(--ink, #11261e) !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin: 0 !important;
  flex: 0 0 36px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
  touch-action: manipulation !important;
}

#thread-area .inbox-sender-avatar,
.chat-header .inbox-sender-avatar {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  max-width: 40px !important;
  max-height: 40px !important;
  border-radius: 50% !important;
  background: #284a40 !important;
  color: #ffffff !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  flex: 0 0 40px !important;
  overflow: hidden !important;
  position: relative !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}

#thread-area .inbox-sender-avatar img,
.chat-header .inbox-sender-avatar img,
.user-avatar-img {
  width: 100% !important;
  height: 100% !important;
  min-width: 100% !important;
  min-height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 50% !important;
}

#thread-area .chat-header-titles,
.chat-header .chat-header-titles {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  gap: 1px !important;
  overflow: hidden !important;
}

#thread-area .chat-header-titles h3,
.chat-header .chat-header-titles h3 {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  color: var(--ink, #11261e) !important;
  letter-spacing: -0.01em !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  line-height: 1.25 !important;
  max-width: 100% !important;
}

html[data-theme="dark"] #thread-area .chat-header-titles h3,
html[data-theme="dark"] .chat-header .chat-header-titles h3 {
  color: #eaf1ed !important;
}

#thread-area .chat-header-status,
.chat-header .chat-header-status {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 11.5px !important;
  font-weight: 700 !important;
  color: #1a8751 !important;
  line-height: 1.2 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 100% !important;
}

html[data-theme="dark"] #thread-area .chat-header-status,
html[data-theme="dark"] .chat-header .chat-header-status {
  color: #00a884 !important;
}

#thread-area .chat-header-role-dot,
.chat-header .chat-header-role-dot {
  display: inline-block !important;
  color: var(--muted, #8a9c92) !important;
}

#thread-area .chat-header-role-text,
.chat-header .chat-header-role-text {
  display: inline-block !important;
  font-weight: 600 !important;
  color: var(--muted, #667970) !important;
}

html[data-theme="dark"] #thread-area .chat-header-role-text,
html[data-theme="dark"] .chat-header .chat-header-role-text {
  color: #9cb2a6 !important;
}

#thread-area .chat-header-actions,
.chat-header .chat-header-actions {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
  margin-left: auto !important;
  width: auto !important;
  justify-content: flex-end !important;
}

#thread-area .chat-header-close-btn,
.chat-header .chat-header-close-btn {
  display: inline-grid !important;
  place-items: center !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid var(--border, #dfdbcf) !important;
  background: var(--surface, #ffffff) !important;
  color: var(--muted, #495e53) !important;
  cursor: pointer !important;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
  padding: 0 !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
  touch-action: manipulation !important;
  flex: 0 0 36px !important;
}

#thread-area .chat-header-close-btn:hover,
.chat-header .chat-header-close-btn:hover {
  background: #fdeee9 !important;
  color: #d94829 !important;
  border-color: #f6c8bd !important;
  transform: scale(1.06) !important;
}

#thread-area .chat-header-close-btn:active,
.chat-header .chat-header-close-btn:active {
  transform: scale(0.92) !important;
}

html[data-theme="dark"] #thread-area .chat-header-close-btn,
html[data-theme="dark"] .chat-header .chat-header-close-btn {
  background: #1c2b22 !important;
  border-color: #2a3e33 !important;
  color: #a3b9ad !important;
  box-shadow: none !important;
}

}

@media (max-width: 820px) {
  #thread-area .chat-header-close-btn,
  .chat-header .chat-header-close-btn,
  .chat-header-close-btn {
    display: none !important;
  }
}

@media (min-width: 821px) {
  #thread-area .chat-back-mobile-btn,
  .chat-header .chat-back-mobile-btn,
  .chat-back-mobile-btn {
    display: none !important;
  }
}

/* ==========================================================================
   SKELETON SCREENS - High-Fidelity Animated Placeholders
   ========================================================================== */
@keyframes qeubo-skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.qeubo-skeleton-card {
  display: flex !important;
  flex-direction: column !important;
  background: var(--surface, #ffffff) !important;
  border: 1px solid var(--border, #dfdbcf) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  position: relative !important;
  min-width: 0 !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03) !important;
  pointer-events: none !important;
  user-select: none !important;
  box-sizing: border-box !important;
}

html[data-theme="dark"] .qeubo-skeleton-card {
  background: #15221b !important;
  border-color: #24362b !important;
  box-shadow: none !important;
}

.qeubo-skeleton-photo {
  width: 100% !important;
  aspect-ratio: 16 / 10 !important;
  min-height: 180px !important;
  background: linear-gradient(90deg, #ece9df 0%, #f7f5ed 35%, #ece9df 70%) !important;
  background-size: 200% 100% !important;
  animation: qeubo-skeleton-shimmer 1.6s ease-in-out infinite !important;
}

html[data-theme="dark"] .qeubo-skeleton-photo {
  background: linear-gradient(90deg, #1b2c23 0%, #293e32 35%, #1b2c23 70%) !important;
  background-size: 200% 100% !important;
}

.qeubo-skeleton-body {
  padding: 14px 14px 16px 14px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  flex: 1 !important;
  box-sizing: border-box !important;
}

.qeubo-skeleton-line {
  border-radius: 6px !important;
  background: linear-gradient(90deg, #ece9df 0%, #f7f5ed 35%, #ece9df 70%) !important;
  background-size: 200% 100% !important;
  animation: qeubo-skeleton-shimmer 1.6s ease-in-out infinite !important;
  height: 12px !important;
}

html[data-theme="dark"] .qeubo-skeleton-line {
  background: linear-gradient(90deg, #1b2c23 0%, #293e32 35%, #1b2c23 70%) !important;
  background-size: 200% 100% !important;
}

.qeubo-skeleton-line.short { width: 35% !important; height: 10px !important; }
.qeubo-skeleton-line.tiny { width: 22% !important; height: 9px !important; }
.qeubo-skeleton-line.medium { width: 65% !important; }
.qeubo-skeleton-line.title { width: 85% !important; height: 16px !important; border-radius: 8px !important; margin: 2px 0 !important; }
.qeubo-skeleton-line.price { width: 45% !important; height: 20px !important; border-radius: 8px !important; margin-bottom: 2px !important; }
.qeubo-skeleton-line.button { width: 100% !important; height: 34px !important; border-radius: 10px !important; margin-top: auto !important; }

.qeubo-skeleton-chips {
  display: flex !important;
  gap: 6px !important;
}

.qeubo-skeleton-chip {
  width: 54px !important;
  height: 20px !important;
  border-radius: 6px !important;
  background: linear-gradient(90deg, #ece9df 0%, #f7f5ed 35%, #ece9df 70%) !important;
  background-size: 200% 100% !important;
  animation: qeubo-skeleton-shimmer 1.6s ease-in-out infinite !important;
}

html[data-theme="dark"] .qeubo-skeleton-chip {
  background: linear-gradient(90deg, #1b2c23 0%, #293e32 35%, #1b2c23 70%) !important;
  background-size: 200% 100% !important;
}

.qeubo-skeleton-meta {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-top: 4px !important;
}

/* Skeleton for VIP Track and Featured Horizontal Carousel */
#top-featured-listings .qeubo-skeleton-card,
#featured-listings .qeubo-skeleton-card {
  flex: 0 0 280px !important;
  min-width: 280px !important;
  max-width: 280px !important;
}

@media (max-width: 768px) {
  #top-featured-listings .qeubo-skeleton-card,
  #featured-listings .qeubo-skeleton-card {
    flex: 0 0 230px !important;
    min-width: 230px !important;
    max-width: 230px !important;
  }
  .qeubo-skeleton-photo {
    min-height: 150px !important;
  }
}

/* Skeleton for Inbox Threads */
.qeubo-skeleton-thread {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
  margin-bottom: 8px !important;
  background: var(--surface, #ffffff) !important;
  border: 1px solid var(--border, #dfdbcf) !important;
  pointer-events: none !important;
  user-select: none !important;
  box-sizing: border-box !important;
}

html[data-theme="dark"] .qeubo-skeleton-thread {
  background: #16221c !important;
  border-color: #24362b !important;
}

.qeubo-skeleton-avatar {
  width: 44px !important;
  height: 44px !important;
  min-width: 44px !important;
  border-radius: 50% !important;
  background: linear-gradient(90deg, #ece9df 0%, #f7f5ed 35%, #ece9df 70%) !important;
  background-size: 200% 100% !important;
  animation: qeubo-skeleton-shimmer 1.6s ease-in-out infinite !important;
}

html[data-theme="dark"] .qeubo-skeleton-avatar {
  background: linear-gradient(90deg, #1b2c23 0%, #293e32 35%, #1b2c23 70%) !important;
  background-size: 200% 100% !important;
}

.qeubo-skeleton-thread-body {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}

/* Skeleton for Chat View */
.qeubo-skeleton-chat {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  padding: 20px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

.qeubo-skeleton-chat-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding-bottom: 14px !important;
  border-bottom: 1px solid var(--border, #dfdbcf) !important;
  margin-bottom: 8px !important;
}

html[data-theme="dark"] .qeubo-skeleton-chat-header {
  border-bottom-color: #24362b !important;
}

.qeubo-skeleton-bubble {
  max-width: 70% !important;
  height: 46px !important;
  border-radius: 16px !important;
  background: linear-gradient(90deg, #ece9df 0%, #f7f5ed 35%, #ece9df 70%) !important;
  background-size: 200% 100% !important;
  animation: qeubo-skeleton-shimmer 1.6s ease-in-out infinite !important;
}

html[data-theme="dark"] .qeubo-skeleton-bubble {
  background: linear-gradient(90deg, #1b2c23 0%, #293e32 35%, #1b2c23 70%) !important;
  background-size: 200% 100% !important;
}

.qeubo-skeleton-bubble.incoming {
  align-self: flex-start !important;
  border-bottom-left-radius: 4px !important;
}

.qeubo-skeleton-bubble.outgoing {
  align-self: flex-end !important;
  border-bottom-right-radius: 4px !important;
  width: 55% !important;
}

@media (prefers-reduced-motion: reduce) {
  .qeubo-skeleton-photo,
  .qeubo-skeleton-line,
  .qeubo-skeleton-chip,
  .qeubo-skeleton-avatar,
  .qeubo-skeleton-bubble {
    animation: none !important;
    background: #ece9df !important;
  }
  html[data-theme="dark"] .qeubo-skeleton-photo,
  html[data-theme="dark"] .qeubo-skeleton-line,
  html[data-theme="dark"] .qeubo-skeleton-chip,
  html[data-theme="dark"] .qeubo-skeleton-avatar,
  html[data-theme="dark"] .qeubo-skeleton-bubble {
    background: #1b2c23 !important;
  }
}

/* ==========================================================================
   ZERO-FLICKER ROUTING (Evita parpadeo de página principal al cargar sección)
   ========================================================================== */
html:not(.app-ready)[data-initial-route="inicio"] #inicio,
html:not(.app-ready):not([data-initial-route]) #inicio,
html:not(.app-ready)[data-initial-route="explorar"] #explorar,
html:not(.app-ready)[data-initial-route="favoritos"] #favoritos,
html:not(.app-ready)[data-initial-route="publicar"] #publicar,
html:not(.app-ready)[data-initial-route="misavisos"] #misavisos,
html:not(.app-ready)[data-initial-route="borradores"] #borradores,
html:not(.app-ready)[data-initial-route="cuenta"] #cuenta,
html:not(.app-ready)[data-initial-route="reportes"] #reportes,
html:not(.app-ready)[data-initial-route="detalle"] #detalle,
html:not(.app-ready)[data-initial-route="perfil"] #perfil {
  display: block !important;
}

html:not(.app-ready)[data-initial-route]:not([data-initial-route="inicio"]) #inicio {
  display: none !important;
}

/* ==========================================================================
   IMPECCABLE FOOTER - High-Craft UI/UX Design System
   ========================================================================== */
.footer.qeubo-footer {
  background: var(--surface-subtle, #f2efe7) !important;
  border-top: 1px solid var(--border, #ded9cb) !important;
  padding: 56px 0 110px 0 !important;
  color: var(--muted, #495e53) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: background 0.25s ease, border-color 0.25s ease !important;
}

html[data-theme="dark"] .footer.qeubo-footer {
  background: #0f1813 !important;
  border-top-color: #1c2b22 !important;
  color: #8fa598 !important;
}

.footer.qeubo-footer::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 10% !important;
  right: 10% !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(224, 104, 75, 0.45), rgba(27, 83, 68, 0.45), transparent) !important;
  pointer-events: none !important;
}

.footer-grid {
  display: grid !important;
  grid-template-columns: 1.35fr 1fr 1fr 1.25fr !important;
  gap: 36px !important;
  padding-bottom: 40px !important;
  border-bottom: 1px solid var(--border-light, #e4dfd3) !important;
}

html[data-theme="dark"] .footer-grid {
  border-bottom-color: #1a2820 !important;
}

.footer-brand-col {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.footer-brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  text-decoration: none !important;
  width: fit-content !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.footer-brand:hover {
  transform: translateY(-1px) !important;
}

.footer-tagline {
  font-size: 13.5px !important;
  line-height: 1.55 !important;
  color: var(--muted, #52675c) !important;
  margin: 0 !important;
  max-width: 320px !important;
}

html[data-theme="dark"] .footer-tagline {
  color: #9cb2a6 !important;
}

.footer-trust-badges {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 4px !important;
}

.trust-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 11.5px !important;
  font-weight: 650 !important;
  color: var(--forest, #1b5344) !important;
  background: rgba(27, 83, 68, 0.06) !important;
  border: 1px solid rgba(27, 83, 68, 0.12) !important;
  padding: 5px 10px !important;
  border-radius: 100px !important;
  transition: all 0.2s ease !important;
}

.trust-badge:hover {
  background: rgba(27, 83, 68, 0.1) !important;
  border-color: rgba(27, 83, 68, 0.22) !important;
}

html[data-theme="dark"] .trust-badge {
  color: #7dd3a7 !important;
  background: rgba(125, 211, 167, 0.08) !important;
  border-color: rgba(125, 211, 167, 0.16) !important;
}

html[data-theme="dark"] .trust-badge:hover {
  background: rgba(125, 211, 167, 0.14) !important;
  border-color: rgba(125, 211, 167, 0.3) !important;
}

.footer-nav-col h4 {
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--ink, #14211a) !important;
  margin: 0 0 16px 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

html[data-theme="dark"] .footer-nav-col h4 {
  color: #e5ede8 !important;
}

.footer-nav-col ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.footer-link {
  border: 0 !important;
  background: transparent !important;
  padding: 4px 0 !important;
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: var(--muted, #4e6358) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  text-align: left !important;
  transition: color 0.16s ease, transform 0.16s ease !important;
  width: fit-content !important;
  position: relative !important;
  text-decoration: none !important;
}

.footer-link:hover {
  color: var(--coral, #e0684b) !important;
  transform: translateX(4px) !important;
}

html[data-theme="dark"] .footer-link {
  color: #9cb3a7 !important;
}

html[data-theme="dark"] .footer-link:hover {
  color: #f78b72 !important;
}

.footer-link.highlight {
  color: var(--forest, #1b5344) !important;
  font-weight: 700 !important;
}

html[data-theme="dark"] .footer-link.highlight {
  color: #7dd3a7 !important;
}

.footer-info-text {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 12.5px !important;
  font-weight: 550 !important;
  color: var(--muted, #566c60) !important;
  line-height: 1.45 !important;
}

html[data-theme="dark"] .footer-info-text {
  color: #8fa598 !important;
}

.footer-info-text svg {
  flex-shrink: 0 !important;
  color: var(--forest, #1b5344) !important;
}

html[data-theme="dark"] .footer-info-text svg {
  color: #7dd3a7 !important;
}

/* Rate Card - Live BCV Module */
.footer-rate-box {
  margin-top: 18px !important;
  padding: 14px 16px !important;
  background: var(--surface, #ffffff) !important;
  border: 1px solid var(--border, #dfdacd) !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
  transition: all 0.2s ease !important;
}

.footer-rate-box:hover {
  border-color: rgba(27, 83, 68, 0.28) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="dark"] .footer-rate-box {
  background: #142019 !important;
  border-color: #24352b !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .footer-rate-box:hover {
  border-color: #354d3e !important;
}

.footer-rate-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 8px !important;
  margin-bottom: 6px !important;
}

.footer-rate-header small {
  font-size: 11px !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  color: var(--muted, #647b6f) !important;
}

.rate-live-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: 10.5px !important;
  font-weight: 750 !important;
  color: #107044 !important;
  background: #e7f7ee !important;
  padding: 2px 7px !important;
  border-radius: 20px !important;
  border: 1px solid #bce8ce !important;
}

html[data-theme="dark"] .rate-live-pill {
  color: #7dd3a7 !important;
  background: #153324 !important;
  border-color: #244d36 !important;
}

.rate-live-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7) !important;
  animation: ratePulse 2s infinite !important;
}

@keyframes ratePulse {
  0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7); }
  70% { transform: scale(1); box-shadow: 0 0 0 5px rgba(34, 197, 94, 0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.footer-rate-box p {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  color: var(--ink, #14211a) !important;
  letter-spacing: -0.01em !important;
}

html[data-theme="dark"] .footer-rate-box p {
  color: #9eecc4 !important;
}

/* Footer Bottom Strip */
.footer-bottom {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding-top: 24px !important;
  font-size: 12.5px !important;
  color: var(--muted, #6a7f74) !important;
  flex-wrap: wrap !important;
  gap: 16px !important;
}

.footer-copyright {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

.footer-bottom-actions {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.footer-scroll-top {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--surface, #ffffff) !important;
  border: 1px solid var(--border, #ded8ca) !important;
  border-radius: 100px !important;
  padding: 8px 16px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: var(--ink, #16241e) !important;
  cursor: pointer !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
  touch-action: manipulation !important;
}

.footer-scroll-top:hover {
  background: var(--forest, #1b5344) !important;
  color: #ffffff !important;
  border-color: var(--forest, #1b5344) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 16px rgba(27, 83, 68, 0.22) !important;
}

.footer-scroll-top:active {
  transform: translateY(0) scale(0.96) !important;
}

html[data-theme="dark"] .footer-scroll-top {
  background: #18261e !important;
  border-color: #293d31 !important;
  color: #e2ede7 !important;
  box-shadow: none !important;
}

html[data-theme="dark"] .footer-scroll-top:hover {
  background: #7dd3a7 !important;
  color: #101c16 !important;
  border-color: #7dd3a7 !important;
  box-shadow: 0 6px 16px rgba(125, 211, 167, 0.25) !important;
}

/* Responsive Breakpoints */
@media (max-width: 960px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 32px !important;
  }
}

@media (max-width: 640px) {
  .footer.qeubo-footer {
    padding: 38px 0 115px 0 !important;
  }
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .footer-bottom {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    padding-top: 20px !important;
  }
  .footer-bottom-actions {
    width: 100% !important;
    justify-content: space-between !important;
  }
  .footer-scroll-top {
    width: 100% !important;
    justify-content: center !important;
    padding: 10px 16px !important;
  }
}

/* ==========================================================================
   CONTACT CTA WITH ACTIVE THREAD ("Mensaje enviado")
   ========================================================================== */
.qeubo-contact-cta.has-thread {
  background: #eaf3ed !important;
  color: #123d30 !important;
  border-color: #284a40 !important;
  font-weight: 750 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.qeubo-contact-cta.has-thread:hover {
  background: #d8ecdf !important;
  border-color: #1b5344 !important;
  color: #0c2b22 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(27, 83, 68, 0.12) !important;
}

.qeubo-contact-cta.has-thread:active {
  transform: translateY(0) scale(0.98) !important;
}

html[data-theme="dark"] .qeubo-contact-cta.has-thread {
  background: #182e22 !important;
  color: #a4e5c2 !important;
  border-color: #2c543f !important;
}

html[data-theme="dark"] .qeubo-contact-cta.has-thread:hover {
  background: #203b2c !important;
  border-color: #7dd3a7 !important;
  color: #c0f3d6 !important;
  box-shadow: 0 4px 12px rgba(125, 211, 167, 0.15) !important;
}

#detalle .qeubo-contact-phone.qeubo-phone-action::before {
  content: '' !important;
  display: inline-block !important;
  width: 17px !important;
  height: 17px !important;
  margin-right: 9px !important;
  background-color: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E") no-repeat center / contain !important;
}

/* ==========================================================================
   DETAIL VIEW SELLER CARD POLISH (Light theme Location & Safe Contact)
   ========================================================================== */
#detalle .seller-card .eyebrow,
#detalle .qeubo-seller-card .eyebrow {
  color: #174d32 !important;
  font-weight: 850 !important;
  letter-spacing: 0.14em !important;
}

#detalle .qeubo-seller-card .qeubo-seller-location,
#detalle .qeubo-seller-location {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-size: 13px !important;
  font-weight: 650 !important;
  color: #143e27 !important;
  background: #edf5ee !important;
  border: 1px solid #c8dfcd !important;
  border-radius: 999px !important;
  padding: 5px 13px !important;
  margin: 6px 0 14px !important;
  width: fit-content !important;
}

#detalle .qeubo-seller-card .qeubo-seller-location::before,
#detalle .qeubo-seller-location::before {
  content: '' !important;
  display: inline-block !important;
  width: 14px !important;
  height: 14px !important;
  background-color: currentColor !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") no-repeat center / contain !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E") no-repeat center / contain !important;
  flex-shrink: 0 !important;
}

#detalle .qeubo-approximate-location {
  margin: 18px 0 0 !important;
  padding: 14px 16px !important;
  border-radius: 16px !important;
  background: #f1f7f2 !important;
  border: 1px solid #d4e7d9 !important;
}

#detalle .qeubo-approximate-location strong {
  font-size: 13.5px !important;
  font-weight: 750 !important;
  color: #122c1d !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

#detalle .qeubo-approximate-location p {
  font-size: 12px !important;
  color: #2b4b37 !important;
  margin: 6px 0 10px !important;
  line-height: 1.45 !important;
}

#detalle .qeubo-approximate-location a {
  font-size: 12.5px !important;
  font-weight: 750 !important;
  color: #185a37 !important;
  text-decoration: none !important;
}

#detalle .qeubo-approximate-location a:hover {
  text-decoration: underline !important;
}

/* Contacto seguro notice in seller card */
#detalle .seller-card p.small,
#detalle .qeubo-seller-card p.small,
#detalle .seller-card .qeubo-phone-disclosure {
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: #1a3e29 !important;
  background: #f3f8f4 !important;
  border: 1px solid #d2e4d6 !important;
  border-radius: 12px !important;
  padding: 10px 13px !important;
  margin: 12px 0 14px !important;
  display: flex !important;
  align-items: flex-start !important;
  gap: 8px !important;
}

#detalle .seller-card p.small::before,
#detalle .qeubo-seller-card p.small::before {
  content: '' !important;
  display: inline-block !important;
  width: 15px !important;
  height: 15px !important;
  margin-top: 1px !important;
  background-color: #2e7d50 !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") no-repeat center / contain !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/%3E%3C/svg%3E") no-repeat center / contain !important;
  flex-shrink: 0 !important;
}

/* Dark mode overrides */
html[data-theme="dark"] #detalle .seller-card .eyebrow,
html[data-theme="dark"] #detalle .qeubo-seller-card .eyebrow {
  color: #55d496 !important;
}

html[data-theme="dark"] #detalle .qeubo-seller-card .qeubo-seller-location,
html[data-theme="dark"] #detalle .qeubo-seller-location {
  background: rgba(46, 125, 80, 0.18) !important;
  border-color: rgba(46, 125, 80, 0.35) !important;
  color: #a4ecc4 !important;
}

html[data-theme="dark"] #detalle .qeubo-approximate-location {
  background: rgba(255, 255, 255, 0.04) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] #detalle .qeubo-approximate-location strong {
  color: #e2ede5 !important;
}

html[data-theme="dark"] #detalle .qeubo-approximate-location p {
  color: #9cb2a3 !important;
}

html[data-theme="dark"] #detalle .qeubo-approximate-location a {
  color: #72db9e !important;
}

html[data-theme="dark"] #detalle .seller-card p.small,
html[data-theme="dark"] #detalle .qeubo-seller-card p.small,
html[data-theme="dark"] #detalle .seller-card .qeubo-phone-disclosure {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #b9cfc0 !important;
}

html[data-theme="dark"] #detalle .seller-card p.small::before,
html[data-theme="dark"] #detalle .qeubo-seller-card p.small::before {
  background-color: #55d496 !important;
}

/* ==========================================================================
   DETAIL VIEW MAIN INFO CARD (.detail-info)
   ========================================================================== */
.detail-info,
#detalle .detail-info,
.detail-main .detail-info {
  background: #ffffff !important;
  border: 1.5px solid #d8e4dc !important;
  border-radius: 22px !important;
  padding: 28px 30px !important;
  margin-top: 18px !important;
  box-shadow: 0 4px 20px rgba(18, 38, 28, 0.05) !important;
  transition: all 0.2s ease !important;
}

.detail-info .pill.demo,
.detail-info .pill,
#detalle .detail-info .pill.demo,
#detalle .detail-info .pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  background: #edf7f0 !important;
  border: 1px solid #b7dfc3 !important;
  color: #144b2a !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.05em !important;
  padding: 6px 13px !important;
  border-radius: 999px !important;
  margin-bottom: 12px !important;
}

.detail-info .pill.demo::before,
.detail-info .pill::before,
#detalle .detail-info .pill.demo::before,
#detalle .detail-info .pill::before {
  content: '' !important;
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  background-color: #22c55e !important;
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.6) !important;
}

.detail-info .eyebrow,
#detalle .detail-info .eyebrow {
  color: #174d32 !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  margin-top: 6px !important;
  margin-bottom: 8px !important;
}

.detail-info h1,
#detalle .detail-info h1 {
  font-size: clamp(26px, 3.2vw, 38px) !important;
  line-height: 1.15 !important;
  font-weight: 850 !important;
  color: #141f1a !important;
  margin: 6px 0 16px !important;
  letter-spacing: -0.02em !important;
}

.detail-info h3,
#detalle .detail-info h3 {
  font-size: 18px !important;
  font-weight: 800 !important;
  color: #141f1a !important;
  margin: 24px 0 10px !important;
  padding-top: 18px !important;
  border-top: 1px dashed #e2ede5 !important;
}

.detail-info .detail-facts,
#detalle .detail-info .detail-facts {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
  margin: 14px 0 18px !important;
}

.detail-info .detail-facts span,
#detalle .detail-info .detail-facts span {
  background: #f4f8f5 !important;
  border: 1px solid #d2e4d6 !important;
  border-radius: 10px !important;
  padding: 7px 13px !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  color: #143e27 !important;
}

.detail-info .detail-description,
#detalle .detail-info .detail-description {
  font-size: 14.5px !important;
  line-height: 1.75 !important;
  color: #334a3e !important;
  margin: 10px 0 18px !important;
}

.detail-info p.small,
#detalle .detail-info p.small {
  font-size: 12px !important;
  line-height: 1.5 !important;
  color: #1a3e29 !important;
  background: #f3f8f4 !important;
  border: 1px solid #d2e4d6 !important;
  border-radius: 12px !important;
  padding: 11px 15px !important;
  margin-top: 20px !important;
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
}

.detail-info p.small::before,
#detalle .detail-info p.small::before {
  content: '' !important;
  display: inline-block !important;
  width: 15px !important;
  height: 15px !important;
  background-color: #2e7d50 !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") no-repeat center / contain !important;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") no-repeat center / contain !important;
  flex-shrink: 0 !important;
}

/* Dark mode for .detail-info card */
html[data-theme="dark"] .detail-info,
html[data-theme="dark"] #detalle .detail-info,
html[data-theme="dark"] .detail-main .detail-info {
  background: #15221b !important;
  border-color: #273a30 !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

html[data-theme="dark"] .detail-info .pill.demo,
html[data-theme="dark"] .detail-info .pill,
html[data-theme="dark"] #detalle .detail-info .pill.demo,
html[data-theme="dark"] #detalle .detail-info .pill {
  background: rgba(34, 197, 94, 0.15) !important;
  border-color: rgba(34, 197, 94, 0.35) !important;
  color: #86efac !important;
}

html[data-theme="dark"] .detail-info .eyebrow,
html[data-theme="dark"] #detalle .detail-info .eyebrow {
  color: #55d496 !important;
}

html[data-theme="dark"] .detail-info h1,
html[data-theme="dark"] #detalle .detail-info h1 {
  color: #ffffff !important;
}

html[data-theme="dark"] .detail-info h3,
html[data-theme="dark"] #detalle .detail-info h3 {
  color: #e2ede5 !important;
  border-top-color: #273a30 !important;
}

html[data-theme="dark"] .detail-info .detail-facts span,
html[data-theme="dark"] #detalle .detail-info .detail-facts span {
  background: #1c2c23 !important;
  border-color: #2d4536 !important;
  color: #d1e8d8 !important;
}

html[data-theme="dark"] .detail-info .detail-description,
html[data-theme="dark"] #detalle .detail-info .detail-description {
  color: #c0d3c6 !important;
}

html[data-theme="dark"] .detail-info p.small,
html[data-theme="dark"] #detalle .detail-info p.small {
  background: rgba(255, 255, 255, 0.05) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  color: #b9cfc0 !important;
}

html[data-theme="dark"] .detail-info p.small::before,
html[data-theme="dark"] #detalle .detail-info p.small::before {
  background-color: #55d496 !important;
}

@media (max-width: 750px) {
  .detail-info,
  #detalle .detail-info,
  .detail-main .detail-info {
    padding: 20px 18px !important;
    border-radius: 18px !important;
  }
}

/* Password Visibility Toggle */
.password-toggle-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.password-toggle-wrapper input {
  padding-right: 44px !important;
  width: 100%;
}
.password-toggle-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--muted, #60756a);
  border-radius: 8px;
  transition: color 0.15s ease, background 0.15s ease;
  line-height: 1;
  z-index: 2;
}
.password-toggle-btn:hover {
  color: var(--ink, #11221e);
  background: rgba(0, 0, 0, 0.05);
}
.password-toggle-btn:focus-visible {
  outline: 2px solid var(--coral, #e0684b);
  outline-offset: 1px;
}
html[data-theme="dark"] .password-toggle-btn {
  color: var(--muted, #8a9d94);
}
/* Avatar Badge & Dropdown Icon Alignment */
.user-avatar-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.user-avatar-badge svg {
  width: 15px !important;
  height: 15px !important;
  display: block !important;
}
.dropdown-user-avatar {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.dropdown-user-avatar svg {
  width: 22px !important;
  height: 22px !important;
  display: block !important;
}

/* ==========================================================================
   Header Layout: Topbar (Brand + Categories + Actions) & Clean Search Bar
   ========================================================================== */

/* 1. Base Header & Wrap */
header.qeubo-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247, 245, 238, 0.95) !important;
  backdrop-filter: blur(20px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(190%) !important;
  border-bottom: 1px solid rgba(223, 219, 207, 0.85) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}

header.qeubo-header .wrap {
  width: min(1280px, calc(100% - 32px)) !important;
  max-width: 1280px !important;
  padding: 0 !important;
}

html[data-theme="dark"] header.qeubo-header {
  background: rgba(18, 26, 22, 0.95) !important;
  border-bottom-color: rgba(39, 56, 48, 0.85) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25) !important;
}

/* 2. Topbar (Row 1: STRICTLY ONE SINGLE LINE: Brand | Inline Categories | Actions) */
.topbar {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 52px !important;
  padding: 6px 0 2px !important;
}

.topbar .brand {
  order: 1 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.topbar .brand:hover {
  transform: translateY(-1px) !important;
}
.topbar .brand:active {
  transform: scale(0.98) !important;
}

/* 3. Inline Desktop Categories (.toplinks) */
@media (min-width: 860px) {
  .toplinks {
    order: 2 !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    width: auto !important;
    flex: 0 1 auto !important;
    box-shadow: none !important;
  }

  .toplinks .navbtn {
    font-size: 13.5px !important;
    font-weight: 650 !important;
    padding: 6px 12px !important;
    border-radius: 999px !important;
    color: var(--ink-secondary, #3a4e44) !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
    white-space: nowrap !important;
    cursor: pointer !important;
    line-height: 1.2 !important;
  }

  .toplinks .navbtn:hover {
    background: rgba(40, 74, 64, 0.07) !important;
    color: var(--forest, #11362b) !important;
    transform: translateY(-1px) !important;
  }

  .toplinks .navbtn:active {
    transform: scale(0.96) !important;
  }

  .toplinks .navbtn.active {
    background: var(--forest, #284a40) !important;
    color: #ffffff !important;
    box-shadow: 0 2px 6px rgba(40, 74, 64, 0.22) !important;
  }

  html[data-theme="dark"] .toplinks .navbtn {
    color: #b0c7bc !important;
  }

  html[data-theme="dark"] .toplinks .navbtn:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    color: #ffffff !important;
  }

  html[data-theme="dark"] .toplinks .navbtn.active {
    background: #7dd3a7 !important;
    color: #101c16 !important;
    box-shadow: 0 2px 8px rgba(125, 211, 167, 0.25) !important;
  }

  .mobilecats {
    display: none !important;
  }
}

/* 4. Head Actions (Row 1 Right: Favs, +, User, Theme) */
.head-actions {
  order: 3 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 8px !important;
  flex: 0 0 auto !important;
}

/* Plus-only Publish Button (.header-publish-btn) */
.header-publish-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 11px !important;
  background: #de6355 !important;
  background-color: #de6355 !important;
  background-image: none !important;
  color: #ffffff !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(222, 99, 85, 0.28) !important;
  padding: 0 !important;
  flex: none !important;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.18s ease, box-shadow 0.18s ease !important;
  touch-action: manipulation !important;
}

.header-publish-btn svg {
  width: 20px !important;
  height: 20px !important;
  stroke: #ffffff !important;
  stroke-width: 2.3 !important;
  display: block !important;
}

.header-publish-btn:hover {
  background: #cb5446 !important;
  background-color: #cb5446 !important;
  background-image: none !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px rgba(222, 99, 85, 0.42) !important;
}

.header-publish-btn:active {
  background: #ba473a !important;
  background-color: #ba473a !important;
  background-image: none !important;
  transform: scale(0.92) !important;
  box-shadow: 0 1px 3px rgba(222, 99, 85, 0.25) !important;
}

html[data-theme="dark"] .header-publish-btn {
  background: #de6355 !important;
  background-color: #de6355 !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(222, 99, 85, 0.32) !important;
}

html[data-theme="dark"] .header-publish-btn svg {
  stroke: #ffffff !important;
}

html[data-theme="dark"] .header-publish-btn:hover {
  background: #ea6e60 !important;
  background-color: #ea6e60 !important;
  background-image: none !important;
  box-shadow: 0 4px 16px rgba(222, 99, 85, 0.46) !important;
}

/* 5. Modern Minimalist Search Bar (Row 2: Centered under Topbar) */
.global-search {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: 650px !important;
  margin: 5px auto 12px !important;
  background: var(--surface, #ffffff) !important;
  border: 1px solid rgba(27, 83, 68, 0.16) !important;
  border-radius: 999px !important;
  padding: 3px 4px 3px 18px !important;
  min-height: 44px !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
  transition: border-color 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.18s ease !important;
}

.global-search:hover {
  border-color: rgba(27, 83, 68, 0.32) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05) !important;
}

.global-search:focus-within {
  border-color: var(--forest, #1b5344) !important;
  box-shadow: 0 0 0 3px rgba(27, 83, 68, 0.12), 0 4px 14px rgba(0, 0, 0, 0.05) !important;
  background: #ffffff !important;
}

html[data-theme="dark"] .global-search {
  background: #141f19 !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] .global-search:hover {
  border-color: rgba(255, 255, 255, 0.22) !important;
}

html[data-theme="dark"] .global-search:focus-within {
  background: #0f1813 !important;
  border-color: #7dd3a7 !important;
  box-shadow: 0 0 0 3px rgba(125, 211, 167, 0.18), 0 4px 16px rgba(0, 0, 0, 0.35) !important;
}

.global-search .search-icon {
  width: 17px !important;
  height: 17px !important;
  flex: none !important;
  stroke: var(--forest, #1b5344) !important;
  opacity: 0.7 !important;
  margin-right: 10px !important;
  transition: opacity 0.15s ease, stroke 0.15s ease !important;
}

.global-search:focus-within .search-icon {
  opacity: 1 !important;
  stroke: var(--forest, #1b5344) !important;
}

html[data-theme="dark"] .global-search .search-icon {
  stroke: #a3c4b5 !important;
  opacity: 0.8 !important;
  stroke-linecap: round !important;
}

html[data-theme="dark"] .global-search:focus-within .search-icon {
  stroke: #7dd3a7 !important;
  opacity: 1 !important;
}

.global-search-box {
  position: relative !important;
  flex: 1 !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

.global-search input {
  width: 100% !important;
  border: none !important;
  background: transparent !important;
  padding: 6px 0 !important;
  font-size: 13.5px !important;
  font-weight: 500 !important;
  color: var(--ink, #141f1a) !important;
  outline: none !important;
  box-shadow: none !important;
  min-height: unset !important;
}

.global-search input::placeholder {
  color: #73887d !important;
  font-weight: 450 !important;
}

html[data-theme="dark"] .global-search input::placeholder {
  color: #82988d !important;
}

.search-submit-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 7px 18px !important;
  border-radius: 999px !important;
  background: #de6355 !important;
  background-color: #de6355 !important;
  background-image: none !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 12.5px !important;
  font-weight: 750 !important;
  cursor: pointer !important;
  flex: none !important;
  transition: all 0.16s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 2px 6px rgba(222, 99, 85, 0.28) !important;
  line-height: 1.2 !important;
}

.search-submit-btn:hover {
  background: #cb5446 !important;
  background-color: #cb5446 !important;
  background-image: none !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 12px rgba(222, 99, 85, 0.42) !important;
}

.search-submit-btn:active {
  background: #ba473a !important;
  background-color: #ba473a !important;
  background-image: none !important;
  transform: scale(0.96) !important;
}

html[data-theme="dark"] .search-submit-btn {
  background: #de6355 !important;
  background-color: #de6355 !important;
  background-image: none !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(222, 99, 85, 0.32) !important;
}

html[data-theme="dark"] .search-submit-btn:hover {
  background: #ea6e60 !important;
  background-color: #ea6e60 !important;
  background-image: none !important;
  box-shadow: 0 4px 14px rgba(222, 99, 85, 0.46) !important;
}

/* Floating Search Suggestions */
.search-suggestions {
  position: absolute !important;
  top: calc(100% + 8px) !important;
  left: 6px !important;
  right: 6px !important;
  background: var(--surface, #ffffff) !important;
  border: 1px solid var(--border, #dfdbcf) !important;
  border-radius: 16px !important;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.03) !important;
  padding: 6px !important;
  z-index: 110 !important;
  max-height: 280px !important;
  overflow-y: auto !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

html[data-theme="dark"] .search-suggestions {
  background: #192720 !important;
  border-color: #2b3e34 !important;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.45) !important;
}

.search-suggestions button {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 14px !important;
  border: none !important;
  background: transparent !important;
  color: var(--ink, #141f1a) !important;
  font-size: 13.5px !important;
  font-weight: 550 !important;
  border-radius: 10px !important;
  text-align: left !important;
  cursor: pointer !important;
  transition: background 0.12s ease, color 0.12s ease !important;
}

.search-suggestions button:hover,
.search-suggestions button:focus {
  background: var(--surface-secondary, #f0f6f2) !important;
  color: var(--forest, #1b5344) !important;
}

html[data-theme="dark"] .search-suggestions button {
  color: #e2f0e6 !important;
}

html[data-theme="dark"] .search-suggestions button:hover,
html[data-theme="dark"] .search-suggestions button:focus {
  background: #24342d !important;
  color: #7dd3a7 !important;
}

/* 6. Mobile Layout (< 860px) */
@media (max-width: 859px) {
  .topbar {
    min-height: 52px !important;
    padding: 6px 0 4px !important;
  }

  .topbar .brand .qeubo-brand-icon {
    width: 32px !important;
    height: 32px !important;
  }

  .topbar .brand .qeubo-wordmark-dark,
  .topbar .brand .qeubo-wordmark-light {
    width: 104px !important;
  }

  .toplinks {
    display: none !important;
  }

  .global-search {
    max-width: 100% !important;
    margin: 4px 0 8px !important;
    border-radius: 12px !important;
    padding: 0 4px 0 12px !important;
    min-height: 38px !important;
  }

  .global-search input {
    font-size: 13.5px !important;
  }

  .search-kbd-hint {
    display: none !important;
  }

  .header-publish-btn {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 10px !important;
  }
}

/* 7. Qeubo Cookie & Legal Terms Consent Banner (Anti-Slop Craft Design) */
.qeubo-consent-backdrop {
  position: fixed !important;
  bottom: 24px !important;
  right: 24px !important;
  left: auto !important;
  top: auto !important;
  z-index: 9999 !important;
  pointer-events: none !important;
  transition: opacity 0.28s cubic-bezier(0.16, 1, 0.3, 1), transform 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
  opacity: 0 !important;
  transform: translateY(20px) scale(0.97) !important;
}

.qeubo-consent-backdrop.visible {
  opacity: 1 !important;
  transform: translateY(0) scale(1) !important;
  pointer-events: auto !important;
}

.qeubo-consent-backdrop.leaving {
  opacity: 0 !important;
  transform: translateY(16px) scale(0.98) !important;
  pointer-events: none !important;
}

.qeubo-consent-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 420px !important;
  padding: 18px 20px !important;
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(27, 83, 68, 0.16) !important;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(27, 83, 68, 0.05) !important;
  box-sizing: border-box !important;
  text-align: left !important;
}

html[data-theme="dark"] .qeubo-consent-card {
  background: rgba(18, 28, 22, 0.96) !important;
  border-color: rgba(255, 255, 255, 0.14) !important;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.55), 0 4px 16px rgba(0, 0, 0, 0.3) !important;
}

.consent-header-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.consent-icon-badge {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  border-radius: 10px !important;
  background: rgba(27, 83, 68, 0.08) !important;
  color: var(--forest, #1b5344) !important;
  flex: none !important;
}

html[data-theme="dark"] .consent-icon-badge {
  background: rgba(125, 211, 167, 0.14) !important;
  color: #7dd3a7 !important;
}

.consent-title {
  font-size: 14.5px !important;
  font-weight: 750 !important;
  color: var(--ink, #141f1a) !important;
  margin: 0 !important;
  line-height: 1.25 !important;
}

html[data-theme="dark"] .consent-title {
  color: #ffffff !important;
}

.consent-desc {
  font-size: 12.5px !important;
  line-height: 1.45 !important;
  color: #4a5c53 !important;
  margin: 0 !important;
}

html[data-theme="dark"] .consent-desc {
  color: #a3b8ad !important;
}

.consent-desc a {
  color: var(--forest, #1b5344) !important;
  font-weight: 650 !important;
  text-decoration: underline !important;
  text-underline-offset: 2px !important;
  transition: color 0.15s ease !important;
}

.consent-desc a:hover {
  color: #de6355 !important;
}

html[data-theme="dark"] .consent-desc a {
  color: #7dd3a7 !important;
}

html[data-theme="dark"] .consent-desc a:hover {
  color: #f0896f !important;
}

.consent-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  margin-top: 2px !important;
  flex-wrap: wrap !important;
}

.consent-accept-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 16px !important;
  border-radius: 999px !important;
  background: #de6355 !important;
  color: #ffffff !important;
  font-size: 12.5px !important;
  font-weight: 750 !important;
  border: none !important;
  cursor: pointer !important;
  box-shadow: 0 2px 8px rgba(222, 99, 85, 0.3) !important;
  transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.16s ease, box-shadow 0.16s ease !important;
}

.consent-accept-btn:hover {
  background: #cb5446 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(222, 99, 85, 0.45) !important;
}

.consent-accept-btn:active {
  transform: scale(0.96) !important;
}

.consent-essential-btn {
  font-size: 12px !important;
  font-weight: 650 !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  color: #384b42 !important;
  border: 1px solid rgba(27, 83, 68, 0.22) !important;
  background: rgba(27, 83, 68, 0.04) !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

.consent-essential-btn:hover {
  background: rgba(27, 83, 68, 0.09) !important;
  border-color: rgba(27, 83, 68, 0.35) !important;
  color: #141f1a !important;
  transform: translateY(-1px) !important;
}

.consent-essential-btn:active {
  transform: scale(0.96) !important;
}

html[data-theme="dark"] .consent-essential-btn {
  color: #a3c4b5 !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

html[data-theme="dark"] .consent-essential-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}

.consent-decline-btn {
  font-size: 12px !important;
  font-weight: 600 !important;
  padding: 8px 13px !important;
  border-radius: 999px !important;
  color: #63756d !important;
  border: 1px solid rgba(0, 0, 0, 0.14) !important;
  background: transparent !important;
  text-decoration: none !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: transform 0.16s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease !important;
}

.consent-decline-btn:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.28) !important;
  color: #141f1a !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
}

.consent-decline-btn:active {
  transform: scale(0.96) !important;
}

html[data-theme="dark"] .consent-decline-btn {
  color: #8fa199 !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
  background: transparent !important;
}

html[data-theme="dark"] .consent-decline-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
  color: #ffffff !important;
}

@media (max-width: 859px) {
  .qeubo-consent-backdrop {
    bottom: 74px !important;
    left: 12px !important;
    right: 12px !important;
    max-width: calc(100% - 24px) !important;
    margin: 0 auto !important;
  }

  .qeubo-consent-card {
    padding: 14px 16px !important;
    border-radius: 16px !important;
  }

  .consent-actions {
    justify-content: stretch !important;
    gap: 6px !important;
  }

  .consent-decline-btn,
  .consent-essential-btn,
  .consent-accept-btn {
    flex: 1 1 0 !important;
    text-align: center !important;
    font-size: 11.5px !important;
    padding: 8px 6px !important;
    min-width: 0 !important;
    white-space: nowrap !important;
  }
}

/* ==========================================================================
   Categorías - Directorio General y Botón de Navegación Verde
   ========================================================================== */

/* Botón Explorar / Categorías en Topbar */
.navbtn-categories {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: #e8f5ec !important;
  color: #164e3f !important;
  border: 1.5px solid rgba(22, 78, 63, 0.25) !important;
  border-radius: 999px !important;
  padding: 6px 14px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
  box-shadow: 0 1px 3px rgba(22, 78, 63, 0.08) !important;
  cursor: pointer !important;
}

.navbtn-categories .inline-icon {
  width: 15px !important;
  height: 15px !important;
  stroke-width: 2.2 !important;
  flex-shrink: 0 !important;
}

.navbtn-categories:hover {
  background: #d4ebd9 !important;
  color: #0b3328 !important;
  border-color: rgba(22, 78, 63, 0.45) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 3px 8px rgba(22, 78, 63, 0.15) !important;
}

.navbtn-categories.active {
  background: #164e3f !important;
  color: #ffffff !important;
  border-color: #164e3f !important;
  box-shadow: 0 3px 10px rgba(22, 78, 63, 0.35) !important;
}

html[data-theme="dark"] .navbtn-categories {
  background: rgba(22, 78, 63, 0.38) !important;
  color: #7dd3a7 !important;
  border-color: rgba(125, 211, 167, 0.35) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

html[data-theme="dark"] .navbtn-categories:hover {
  background: rgba(35, 105, 78, 0.55) !important;
  color: #ffffff !important;
  border-color: rgba(125, 211, 167, 0.55) !important;
}

html[data-theme="dark"] .navbtn-categories.active {
  background: #284a40 !important;
  color: #ffffff !important;
  border-color: #7dd3a7 !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.5) !important;
}

/* Vista #categorias - Directorio General */
#categorias {
  padding-bottom: 70px;
}

.categories-wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 16px;
}

.categories-directory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}

@media (max-width: 860px) {
  .categories-directory-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.cat-directory-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 18px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  position: relative;
  overflow: hidden;
}

.cat-directory-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
  border-color: rgba(0, 0, 0, 0.14);
}

html[data-theme="dark"] .cat-directory-card {
  background: #1c2822;
  border-color: rgba(255, 255, 255, 0.09);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
}

html[data-theme="dark"] .cat-directory-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

/* Acentos visuales superiores por categoría */
.cat-theme-inmuebles {
  border-top: 4px solid #164e3f;
}
.cat-theme-vehiculos {
  border-top: 4px solid #d97706;
}
.cat-theme-marketplace {
  border-top: 4px solid #4f46e5;
}
.cat-theme-empleos {
  border-top: 4px solid #9333ea;
}
.cat-theme-servicios {
  border-top: 4px solid #0d9488;
}
.cat-theme-viajes {
  border-top: 4px solid #0284c7;
}

/* Encabezado de tarjeta */
.cat-dir-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

html[data-theme="dark"] .cat-dir-header {
  border-bottom-color: rgba(255, 255, 255, 0.07);
}

.cat-dir-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cat-dir-icon-badge {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cat-theme-inmuebles .cat-dir-icon-badge {
  background: #e8f5ec;
  color: #164e3f;
}
.cat-theme-vehiculos .cat-dir-icon-badge {
  background: #fef3c7;
  color: #b45309;
}
.cat-theme-marketplace .cat-dir-icon-badge {
  background: #ede9fe;
  color: #4f46e5;
}
.cat-theme-empleos .cat-dir-icon-badge {
  background: #f5f3ff;
  color: #9333ea;
}
.cat-theme-servicios .cat-dir-icon-badge {
  background: #ccfbf1;
  color: #0f766e;
}
.cat-theme-viajes .cat-dir-icon-badge {
  background: #e0f2fe;
  color: #0284c7;
}

html[data-theme="dark"] .cat-theme-inmuebles .cat-dir-icon-badge {
  background: rgba(22, 78, 63, 0.4);
  color: #7dd3a7;
}
html[data-theme="dark"] .cat-theme-vehiculos .cat-dir-icon-badge {
  background: rgba(180, 83, 9, 0.35);
  color: #fbbf24;
}
html[data-theme="dark"] .cat-theme-marketplace .cat-dir-icon-badge {
  background: rgba(79, 70, 229, 0.35);
  color: #a5b4fc;
}
html[data-theme="dark"] .cat-theme-empleos .cat-dir-icon-badge {
  background: rgba(147, 51, 234, 0.35);
  color: #d8b4fe;
}
html[data-theme="dark"] .cat-theme-servicios .cat-dir-icon-badge {
  background: rgba(13, 148, 136, 0.35);
  color: #5eead4;
}
html[data-theme="dark"] .cat-theme-viajes .cat-dir-icon-badge {
  background: rgba(2, 132, 199, 0.35);
  color: #38bdf8;
}

.cat-dir-icon-badge .inline-icon {
  width: 22px;
  height: 22px;
}

.cat-dir-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  color: var(--ink, #101c16);
  line-height: 1.25;
}

html[data-theme="dark"] .cat-dir-title {
  color: #f7f5ee;
}

.cat-dir-subtitle {
  margin: 2px 0 0;
  font-size: 12.5px;
  color: var(--muted, #666);
  line-height: 1.35;
}

.cat-dir-count-pill {
  font-size: 11.5px;
  font-weight: 750;
  padding: 4px 10px;
  border-radius: 999px;
  background: #f0f0ea;
  color: #44554b;
  white-space: nowrap;
  flex-shrink: 0;
}

html[data-theme="dark"] .cat-dir-count-pill {
  background: rgba(255, 255, 255, 0.08);
  color: #c2d4cb;
}

/* Grupos y Chips */
.cat-dir-groups {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

.cat-dir-group-label {
  display: block;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted, #73847b);
  margin-bottom: 6px;
}

.cat-dir-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.cat-dir-chip {
  background: #f7f5ee;
  border: 1px solid rgba(0, 0, 0, 0.07);
  border-radius: 8px;
  padding: 6px 11px;
  font-size: 12.5px;
  font-weight: 700;
  color: #2b3d33;
  cursor: pointer;
  transition: all 0.16s ease;
  line-height: 1.2;
}

.cat-dir-chip:hover {
  background: #e8f3ec;
  color: #11362b;
  border-color: rgba(22, 78, 63, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}

html[data-theme="dark"] .cat-dir-chip {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.08);
  color: #d8e5de;
}

html[data-theme="dark"] .cat-dir-chip:hover {
  background: rgba(125, 211, 167, 0.18);
  border-color: rgba(125, 211, 167, 0.4);
  color: #ffffff;
}

/* Footer botón principal */
.cat-dir-footer {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
}

html[data-theme="dark"] .cat-dir-footer {
  border-top-color: rgba(255, 255, 255, 0.07);
}

.cat-dir-btn-main {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 10px;
  background: #f3ede2;
  border: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 13px;
  font-weight: 750;
  color: var(--forest, #164e3f);
  cursor: pointer;
  transition: all 0.2s ease;
}

.cat-dir-btn-main:hover {
  background: var(--forest, #164e3f);
  color: #ffffff;
  border-color: var(--forest, #164e3f);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(22, 78, 63, 0.25);
}

.cat-dir-btn-main .inline-icon {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.cat-dir-btn-main:hover .inline-icon {
  transform: translateX(3px);
}

html[data-theme="dark"] .cat-dir-btn-main {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.08);
  color: #9fe2be;
}

html[data-theme="dark"] .cat-dir-btn-main:hover {
  background: #284a40;
  color: #ffffff;
  border-color: #7dd3a7;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   TIENDA DE TOKENS Y PLANES: SEPARADOR Y EXPLICACIÓN AL DAR CLICK
   ========================================================================== */
.store-section-label {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted, #556b62);
  display: flex;
  align-items: center;
  margin: 4px 0 2px 2px;
}

.store-section-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 6px;
}

.store-divider-line {
  flex: 1;
  height: 1px;
  background: var(--line, #e2dfd5);
}

.store-divider-badge {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--forest, #1b5344);
  background: #eef7f2;
  border: 1px solid #cce8dc;
  padding: 4px 12px;
  border-radius: 20px;
  letter-spacing: 0.02em;
  display: flex;
  align-items: center;
}

.sim-pkg-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 12px 16px !important;
  border: 1.5px solid var(--line, #e2dfd5);
  border-radius: 14px;
  cursor: pointer;
  background: #ffffff;
  transition: all 0.18s ease;
  position: relative;
  gap: 0 !important;
}

.sim-pkg-card:hover {
  border-color: var(--coral, #e0684b);
  background: #fdfbf7;
  transform: translateY(-1px);
}

.sim-pkg-card.is-selected {
  border-color: var(--coral, #e0684b) !important;
  background: #fffdfb !important;
}

.sim-pkg-card.premium-featured-card.is-selected {
  border-color: var(--forest, #1b5344) !important;
  background: #f2f9f5 !important;
}

.sim-pkg-card.verified-card.is-selected {
  border-color: #059669 !important;
  background: #f6fbf9 !important;
}

.pkg-card-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
}

.pkg-card-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.04);
  font-size: 11px;
  color: var(--muted, #556b62);
  transition: transform 0.22s ease, background 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.sim-pkg-card.is-selected .pkg-card-toggle-icon,
.sim-pkg-card:has(input[type="radio"]:checked) .pkg-card-toggle-icon {
  transform: rotate(180deg);
  background: rgba(224, 104, 75, 0.12);
  color: var(--coral, #e0684b);
}

.sim-pkg-card.premium-featured-card.is-selected .pkg-card-toggle-icon,
.sim-pkg-card.premium-featured-card:has(input[type="radio"]:checked) .pkg-card-toggle-icon {
  background: rgba(27, 83, 68, 0.12);
  color: var(--forest, #1b5344);
}

.sim-pkg-card.verified-card.is-selected .pkg-card-toggle-icon,
.sim-pkg-card.verified-card:has(input[type="radio"]:checked) .pkg-card-toggle-icon {
  background: rgba(5, 150, 105, 0.12);
  color: #059669;
}

.pkg-card-explanation {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.28s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease, margin-top 0.2s ease, padding-top 0.2s ease;
  margin-top: 0;
  padding-top: 0;
  border-top: 1px dashed transparent;
  width: 100%;
  text-align: left;
}

.sim-pkg-card.is-selected .pkg-card-explanation,
.sim-pkg-card:has(input[type="radio"]:checked) .pkg-card-explanation {
  max-height: 240px;
  opacity: 1;
  margin-top: 10px;
  padding-top: 10px;
  border-top-color: var(--line, #e2dfd5);
}

.pkg-expl-inner {
  font-size: 12.5px;
  line-height: 1.45;
}

.pkg-expl-tag {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  color: var(--muted, #556b62);
  margin-bottom: 6px;
  letter-spacing: 0.03em;
}

.pkg-expl-list {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.pkg-expl-list li {
  color: var(--muted, #445950);
}

.pkg-expl-list li strong {
  color: var(--ink, #11221e);
}

html[data-theme="dark"] .store-section-label {
  color: #9cb3a8;
}

html[data-theme="dark"] .store-divider-line {
  background: #273e36;
}

html[data-theme="dark"] .store-divider-badge {
  background: #193127;
  color: #79dcb6;
  border-color: #2b5545;
}

html[data-theme="dark"] .pkg-card-toggle-icon {
  background: rgba(255, 255, 255, 0.08);
  color: #9cb3a8;
}

html[data-theme="dark"] .sim-pkg-card.is-selected {
  border-color: var(--coral, #e0684b) !important;
  background: #20332d !important;
}

html[data-theme="dark"] .sim-pkg-card.premium-featured-card.is-selected {
  border-color: #79dcb6 !important;
  background: #193127 !important;
}

html[data-theme="dark"] .sim-pkg-card.verified-card.is-selected {
  border-color: #34d399 !important;
  background: #192e27 !important;
}

html[data-theme="dark"] .sim-pkg-card.is-selected .pkg-card-explanation,
html[data-theme="dark"] .sim-pkg-card:has(input[type="radio"]:checked) .pkg-card-explanation {
  border-top-color: #273e36;
}

html[data-theme="dark"] .pkg-expl-tag {
  color: #9cb3a8;
}

html[data-theme="dark"] .pkg-expl-list li {
  color: #b7c7be;
}

html[data-theme="dark"] .pkg-expl-list li strong {
  color: #ecf0ed;
}

/* Botón central + en menú inferior: sobresale un 25% */
.bottom-nav button.publish-shortcut {
  margin: -13.5px auto 0 !important;
}

/* ==========================================================================
   Ajustes de visualización perfecta para el avatar en "Mi Cuenta"
   ========================================================================== */
.account-user-info {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
}

#account-avatar.account-avatar-ring,
.account-avatar-ring {
  position: relative !important;
  width: 64px !important;
  height: 64px !important;
  min-width: 64px !important;
  min-height: 64px !important;
  max-width: 64px !important;
  max-height: 64px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  overflow: visible !important; /* Permite ver la insignia en la esquina */
  background: var(--brand-dark, #1b5344) !important;
  border: 4px solid var(--white, #ffffff) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15) !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

#account-avatar.account-avatar-ring.premium,
.account-avatar-ring.premium {
  border: 4px solid var(--coral, #e0684b) !important;
  box-shadow: 0 0 0 4px rgba(224, 104, 75, 0.28), 0 8px 24px rgba(224, 104, 75, 0.22) !important;
}

#account-avatar.account-avatar-ring.verified,
.account-avatar-ring.verified {
  border: 4px solid var(--white, #ffffff) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15) !important;
}

html[data-theme="dark"] #account-avatar.account-avatar-ring,
html[data-theme="dark"] .account-avatar-ring {
  background: #11221e !important;
  border-color: var(--white, #1c2b23) !important;
}

html[data-theme="dark"] #account-avatar.account-avatar-ring.premium,
html[data-theme="dark"] .account-avatar-ring.premium {
  border-color: var(--coral, #e0684b) !important;
  box-shadow: 0 0 0 4px rgba(224, 104, 75, 0.35), 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

html[data-theme="dark"] #account-avatar.account-avatar-ring.verified,
html[data-theme="dark"] .account-avatar-ring.verified {
  border-color: var(--white, #1c2b23) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.3) !important;
}

#account-avatar.account-avatar-ring .avatar-img,
#account-avatar.account-avatar-ring img,
.account-avatar-ring .avatar-img,
.account-avatar-ring img {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 1 !important;
}

#account-avatar.account-avatar-ring .avatar-badge-corner,
.account-avatar-ring .avatar-badge-corner,
.avatar-badge-corner {
  position: absolute !important;
  right: -2px !important;
  bottom: -2px !important;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 6 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28) !important;
  border: 2px solid var(--white, #ffffff) !important;
  cursor: help !important;
  pointer-events: auto !important;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease !important;
}

#account-avatar.account-avatar-ring .avatar-badge-corner:hover,
.account-avatar-ring .avatar-badge-corner:hover,
.avatar-badge-corner:hover {
  transform: scale(1.15) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

#account-avatar.account-avatar-ring .avatar-badge-corner.premium,
.account-avatar-ring .avatar-badge-corner.premium {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 60%, #fbbf24 100%) !important;
  color: #ffffff !important;
}

#account-avatar.account-avatar-ring .avatar-badge-corner.verified,
.account-avatar-ring .avatar-badge-corner.verified,
.avatar-badge-corner.verified {
  background: linear-gradient(135deg, #047857 0%, #10b981 100%) !important;
  color: #ffffff !important;
}

#account-avatar.account-avatar-ring .avatar-badge-corner svg,
.account-avatar-ring .avatar-badge-corner svg,
.avatar-badge-corner svg {
  width: 10px !important;
  height: 10px !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)) !important;
}

html[data-theme="dark"] #account-avatar.account-avatar-ring .avatar-badge-corner,
html[data-theme="dark"] .account-avatar-ring .avatar-badge-corner,
html[data-theme="dark"] .avatar-badge-corner {
  border-color: #1c2b23 !important;
}

/* Detalle de Anuncio - Avatar del vendedor */
.side-person .avatar {
  position: relative !important;
  width: 58px !important;
  height: 58px !important;
  min-width: 58px !important;
  min-height: 58px !important;
  max-width: 58px !important;
  max-height: 58px !important;
  font-size: 24px !important;
  font-weight: 850 !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  box-sizing: border-box !important;
  background: var(--brand-dark, #1b5344) !important;
  color: #ffffff !important;
  border: 4px solid var(--white, #ffffff) !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15) !important;
  transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.22s ease !important;
}

.side-person .avatar.premium {
  border: 4px solid var(--coral, #e0684b) !important;
  box-shadow: 0 0 0 4px rgba(224, 104, 75, 0.28), 0 8px 24px rgba(224, 104, 75, 0.22) !important;
}

.side-person .avatar:hover {
  transform: scale(1.05);
}
.side-person .avatar.premium:hover {
  transform: scale(1.06);
  box-shadow: 0 0 0 4.5px rgba(224, 104, 75, 0.38), 0 10px 24px rgba(224, 104, 75, 0.35) !important;
}

html[data-theme="dark"] .side-person .avatar {
  background: #11221e !important;
  border-color: var(--white, #1c2b23) !important;
}

html[data-theme="dark"] .side-person .avatar.premium {
  border-color: var(--coral, #e0684b) !important;
  box-shadow: 0 0 0 4px rgba(224, 104, 75, 0.35), 0 8px 24px rgba(0, 0, 0, 0.5) !important;
}

.side-person .avatar img,
.side-person .avatar .user-avatar-img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

.side-person .avatar .avatar-badge-corner {
  position: absolute !important;
  right: -2px !important;
  bottom: -2px !important;
  width: 19px !important;
  height: 19px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 6 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28) !important;
  border: 2px solid var(--white, #ffffff) !important;
  background: linear-gradient(135deg, #047857 0%, #10b981 100%) !important;
  color: #ffffff !important;
  cursor: help !important;
  pointer-events: auto !important;
  transition: transform 0.18s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.18s ease !important;
}

.side-person .avatar .avatar-badge-corner:hover {
  transform: scale(1.15) !important;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.35) !important;
}

.side-person .avatar .avatar-badge-corner svg {
  width: 10px !important;
  height: 10px !important;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)) !important;
}

html[data-theme="dark"] .side-person .avatar .avatar-badge-corner {
  border-color: #1c2b23 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45) !important;
}

/* Header & Dropdown - Idéntico estilo y tonalidad que perfil público */
.user-avatar-badge {
  border: 1.5px solid var(--white, #ffffff) !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15) !important;
}
.user-avatar-badge.premium {
  border: 2px solid var(--coral, #e0684b) !important;
  box-shadow: 0 0 0 2px rgba(224, 104, 75, 0.28) !important;
}

.dropdown-user-avatar {
  border: 2px solid var(--white, #ffffff) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}
.dropdown-user-avatar.premium {
  border: 2.5px solid var(--coral, #e0684b) !important;
  box-shadow: 0 0 0 2.5px rgba(224, 104, 75, 0.28) !important;
}

html[data-theme="dark"] .user-avatar-badge {
  border-color: #1c2b23 !important;
}
html[data-theme="dark"] .user-avatar-badge.premium {
  border-color: var(--coral, #e0684b) !important;
  box-shadow: 0 0 0 2px rgba(224, 104, 75, 0.35) !important;
}
html[data-theme="dark"] .dropdown-user-avatar {
  border-color: #1c2b23 !important;
}
html[data-theme="dark"] .dropdown-user-avatar.premium {
  border-color: var(--coral, #e0684b) !important;
  box-shadow: 0 0 0 2.5px rgba(224, 104, 75, 0.35) !important;
}

/* ==========================================================================
   Anuncios Destacados (Borde Naranja) y Usuarios Premium (Estrella)
   ========================================================================== */
.listing.listing-is-featured,
article.listing-is-featured {
  position: relative !important;
  border: 2px solid var(--coral, #e0684b) !important;
  box-shadow: 0 8px 24px rgba(224, 104, 75, 0.16) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.listing.listing-is-featured:hover,
article.listing-is-featured:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 14px 32px rgba(224, 104, 75, 0.24) !important;
  border-color: var(--coral, #e0684b) !important;
}

html[data-theme="dark"] .listing.listing-is-featured,
html[data-theme="dark"] article.listing-is-featured {
  border-color: #e0684b !important;
  box-shadow: 0 8px 24px rgba(224, 104, 75, 0.22) !important;
}

/* Check de verificado retirado de los nombres (solo va en foto de perfil) */
.seller-verified-check:not(.premium) {
  display: none !important;
}

/* Estrella de vendedor Premium junto al nombre en la tarjeta */
.seller-verified-check.premium {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 6px rgba(245, 158, 11, 0.45) !important;
  border-radius: 50% !important;
}

.seller-verified-check.premium svg {
  fill: #ffffff !important;
  stroke: none !important;
}

.seller-verified-check.premium:hover {
  transform: scale(1.18) !important;
  box-shadow: 0 3px 10px rgba(245, 158, 11, 0.6) !important;
}


/* WhatsApp Country & Number selector */
.account-whatsapp-input-group {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 6px;
}
#pref-whatsapp-country {
  flex: 0 0 auto;
  max-width: 180px;
  padding: 10px 10px;
  font-size: 13.5px;
  border-radius: 10px;
  border: 1px solid var(--line, #e2dfd5);
  background: var(--surface, #ffffff);
  color: var(--ink, #11221e);
  cursor: pointer;
  font-weight: 550;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#pref-whatsapp-country:focus {
  border-color: var(--coral, #e0684b);
  box-shadow: 0 0 0 3px rgba(224, 104, 75, 0.15);
}
.account-whatsapp-input-group #pref-whatsapp-number {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important;
}
@media (max-width: 480px) {
  .account-whatsapp-input-group {
    flex-direction: column;
    gap: 8px;
  }
  #pref-whatsapp-country {
    max-width: 100%;
    width: 100%;
  }
}
html[data-theme="dark"] #pref-whatsapp-country {
  background: #14201b !important;
  border-color: #2b3d34 !important;
  color: #f1f5f3 !important;
}