/* Global overflow prevention */
html, body { overflow-x: hidden; }

/* Global toast safety */
.toast { max-width: calc(100vw - 32px) !important; word-break: break-word; }

/* Indicador "online" — inline, discreto, sin caja */
.user-card-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-size: 10px;
  color: rgba(5,150,105,0.8);
  letter-spacing: 0.03em;
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
}
.badge-dot {
  width: 7px;
  height: 7px;
  background: #22c55e;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 6px rgba(34,197,94,0.6);
  animation: dotGlow 2s ease-in-out infinite;
}
@keyframes dotGlow {
  0%, 100% { box-shadow: 0 0 4px rgba(34,197,94,0.4); opacity: 1; }
  50% { box-shadow: 0 0 10px rgba(34,197,94,0.8); opacity: 0.85; }
}
@keyframes pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: 0.4; } }

:root {
  --background: #FFFFFF;
  --foreground: #1A1A1A;
  --card: #F9FAFB;
  --card-hover: #F3F4F6;
  --border: #E5E7EB;
  --border-strong: #D1D5DB;
  --muted: #6B7280;
  --accent: #ff6b1a;
  --accent-hover: #E85D10;
  --accent-soft: rgba(255,107,26,0.08);
  --green: #22c55e;
  --red: #d62828;
  --red-deep: #8b0000;
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-pixel: 'Press Start 2P', monospace;
}

/* === SHARE WIDGET (global) === */
.sw-buttons { display: flex; gap: 8px; flex-wrap: wrap; }
.sw-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 600;
  font-family: var(--font-sans); border: 1px solid var(--border-strong);
  background: var(--card); color: var(--foreground);
  text-decoration: none; cursor: pointer; transition: all 0.2s;
}
.sw-btn:hover { border-color: var(--foreground); }
.sw-btn.sw-compact { padding: 8px 12px; }
.sw-wa:hover { background: #25D366; border-color: #25D366; color: #fff; }
.sw-li:hover { background: #0A66C2; border-color: #0A66C2; color: #fff; }
.sw-x:hover { background: #1A1A1A; border-color: #1A1A1A; color: #fff; }
.sw-copy:hover { background: var(--accent); border-color: var(--accent); color: #000; }
.sw-copied { background: #059669 !important; border-color: #059669 !important; color: #fff !important; }

/* === SIDEBAR (shared across all pages) === */
.dash-sidebar { width: 220px; flex-shrink: 0; border-right: 1px solid var(--border); padding: 20px 24px 12px 0; position: sticky; top: 64px; height: calc(100vh - 64px); display: flex; flex-direction: column; }
.sidebar-nav-wrap { flex: 1; min-height: 0; overflow-y: auto; }
.sidebar-bottom { flex-shrink: 0; margin-top: auto; padding-top: 4px; }
.sidebar-label { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted); margin-bottom: 10px; }
.sidebar-nav { list-style: none; display: flex; flex-direction: column; gap: 2px; }
.sidebar-nav a { display: flex; align-items: center; gap: 10px; padding: 8px 14px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.05em; color: var(--muted); border: 1px solid transparent; transition: all 0.15s; }
.sidebar-nav a:hover { color: var(--foreground); background: var(--card); }
.sidebar-nav a.active { color: var(--accent); background: var(--accent-soft); border-color: rgba(255,107,26,0.2); }
.sidebar-nav svg { flex-shrink: 0; }
.sidebar-nav a.locked-item { color: var(--muted); opacity: 0.6; flex-wrap: wrap; overflow: hidden; }
.sidebar-nav a.locked-item .lock-progress { width: 100%; padding-left: 26px; margin-top: 2px; }
.sidebar-nav a.unlocked-item { color: var(--accent); }
.mobile-tabs a.locked-item { color: var(--muted); opacity: 0.5; }
.mobile-tabs a.unlocked-item { color: var(--accent); }
.sidebar-section-label { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 4px; }
.sidebar-invite-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: calc(100% - 32px); margin: 8px 16px; padding: 8px 14px; background: var(--accent); color: #000; border: none; border-radius: 6px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 600; cursor: pointer; transition: background 0.2s, transform 0.1s; }
.sidebar-invite-btn:hover { background: #e55a13; }
.sidebar-invite-btn:active { transform: scale(0.98); }
.sidebar-invite-btn.copied { background: #059669; color: black; }
.sidebar-profile-battery { padding: 0 16px; position: relative; }
.sidebar-profile-battery.clickable { cursor: pointer; }
.sidebar-profile-battery .sidebar-tooltip { position: absolute; top: calc(100% + 4px); left: 16px; background: var(--card); border: 1px solid var(--border); padding: 6px 10px; border-radius: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--muted); white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.2s, visibility 0.2s; z-index: 60; }
.sidebar-profile-battery:hover .sidebar-tooltip { opacity: 1; visibility: visible; }
.sidebar-divider { height: 1px; background: var(--border); margin: 8px 12px; opacity: 0.5; }
.sidebar-progress { padding: 0 16px; }
.sidebar-progress-label { font-family: var(--font-mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 4px; }
.mini-battery { display: inline-flex; align-items: center; gap: 0; margin-bottom: 3px; }
.mini-battery-body { display: flex; gap: 1px; padding: 2px; border: 1px solid var(--border); border-radius: 3px; background: var(--card); }
.mini-battery-segment { width: 11px; height: 11px; background: rgba(255,107,26,0.1); border-radius: 1px; transition: background 0.3s; }
.mini-battery-segment.filled { background: var(--accent); }
.mini-battery-segment.filled.gold { background: #ffd700; box-shadow: 0 0 4px rgba(255,215,0,0.5); }
.mini-battery-body.glow-gold { border-color: #ffd700; box-shadow: 0 0 8px rgba(255,215,0,0.25); }
.mini-battery-pin { width: 4px; height: 8px; background: var(--border); border-radius: 0 2px 2px 0; }
.sidebar-progress-text { font-family: var(--font-mono); font-size: 10px; color: var(--muted); }
.sidebar-progress-text.complete { color: #059669; }
.sidebar-user-card { padding: 8px 16px 0; display: flex; flex-direction: column; gap: 6px; }
.user-card-row { display: flex; align-items: center; gap: 10px; }
.sidebar-user-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 1px solid var(--border); }
.user-card-info { flex: 1; min-width: 0; }
.user-card-name { font-weight: 700; font-size: 13px; color: var(--foreground); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.sidebar-logout-btn { background: transparent; color: var(--muted); border: 1px solid var(--border); padding: 6px 12px; font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; border-radius: 4px; cursor: pointer; width: 100%; transition: all 0.2s; }
.sidebar-logout-btn:hover { border-color: var(--accent); color: var(--accent); }

/* === MOBILE RESPONSIVE: Header & Nav === */
@media (max-width: 480px) {
  /* Header bar - reduce padding, prevent cramping */
  .nav-inner {
    padding: 10px 16px !important;
    min-height: 52px !important;
    gap: 8px;
  }
  /* Logo - shrink mark and hide subtitle */
  .logo { gap: 8px !important; }
  .logo-mark { width: 30px !important; height: 30px !important; font-size: 8px !important; border-radius: 6px !important; }
  .logo-sub { display: none !important; }
  .logo-name { font-size: 12px !important; }
  /* Streak chip - compact */
  .streak-chip { padding: 4px 8px !important; font-size: 10px !important; gap: 4px !important; }
  .streak-chip .streak-fire { font-size: 12px !important; }
  .streak-chip .streak-label { display: none !important; }
  /* Invite button - icon only on very small screens */
  .invite-btn { padding: 6px 10px !important; font-size: 12px !important; gap: 4px !important; }
  .invite-btn svg { width: 12px !important; height: 12px !important; }
  /* User area */
  .user-area { gap: 8px !important; }
}

/* Mobile tabs - polished scrollable strip */
@media (max-width: 480px) {
  .mobile-tabs {
    padding: 0 12px !important;
    gap: 0 !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .mobile-tabs::-webkit-scrollbar { display: none; }
  .mobile-tabs a {
    font-family: var(--font-mono) !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    padding: 10px 12px !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    flex-direction: row !important;
    gap: 6px !important;
    border-bottom: 2px solid transparent;
  }
  .mobile-tabs a svg { width: 12px !important; height: 12px !important; }
  .mobile-tabs a.active {
    color: var(--accent) !important;
    border-bottom-color: var(--accent) !important;
  }
}