/* ══════════════════════════════════════════════
   EXPLORE — CSS completo
══════════════════════════════════════════════ */

/* ── Search bar ── */
.explore-search-bar {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 56px;
  z-index: 40;
  background: rgba(8,8,8,.9);
  backdrop-filter: blur(20px);
}
.explore-input-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface-2);
  border: 1px solid var(--border-2);
  border-radius: var(--radius-full);
  padding: 10px 16px;
  transition: all var(--transition);
}
.explore-input-wrap:focus-within {
  border-color: var(--green);
  box-shadow: 0 0 0 3px var(--green-subtle);
}
.explore-input-wrap > i     { color:var(--text-3); font-size:1rem; flex-shrink:0 }
.explore-input-wrap input   { flex:1; background:none; border:none; color:var(--text); font-size:.95rem; outline:none; font-family:inherit }
.explore-input-wrap input::placeholder { color:var(--text-3) }

.btn-clear-search       { background:none; border:none; color:var(--text-3); cursor:pointer; font-size:1rem; padding:0; display:flex; align-items:center; transition:color var(--transition) }
.btn-clear-search:hover { color:var(--text) }

/* ── Tabs (search tabs y profile tabs) ── */
.search-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: calc(56px + 61px);
  z-index: 39;
  background: rgba(8,8,8,.9);
  backdrop-filter: blur(12px);
}
.profile-tabs {
  display: flex;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 56px;
  z-index: 39;
  background: rgba(8,8,8,.9);
  backdrop-filter: blur(12px);
}
.profile-tabs.hidden { display:none }

.tab-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 8px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-3);
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition);
  font-family: inherit;
  white-space: nowrap;
}
.tab-btn:hover  { color:var(--text); background:var(--surface) }
.tab-btn.active { color:var(--green); border-bottom-color:var(--green); background:none }
.tab-btn i      { font-size:1rem }

/* ── Placeholder ── */
.explore-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 64px 20px;
  gap: 12px;
  color: var(--text-3);
  text-align: center;
}
.explore-placeholder p { font-size:.9rem; line-height:1.6 }

/* ── Section title ── */
.search-section-title {
  padding: 14px 20px 6px;
  font-size: .72rem;
  font-weight: 800;
  color: var(--text-3);
  letter-spacing: .8px;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid var(--border);
}

/* ── User result ── */
.search-user-result {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background var(--transition);
}
.search-user-result:hover { background:var(--surface) }

/* ── Follow button (search) ── */
.btn-follow-search {
  background: var(--text);
  color: var(--bg);
  border: 1px solid transparent;
  padding: 6px 14px;
  border-radius: var(--radius-full);
  font-size: .78rem;
  font-weight: 700;
  cursor: pointer;
  transition: all var(--transition);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: inherit;
  white-space: nowrap;
}
.btn-follow-search:hover { background:#d0d0d0 }
.btn-follow-search.siguiendo { background:transparent; border-color:var(--border-2); color:var(--text) }
.btn-follow-search.siguiendo:hover { border-color:var(--red); color:var(--red); background:var(--red-subtle) }

/* ── Perfil header ── */
.profile-banner {
  width: 100%;
  height: 140px;
  object-fit: cover;
  flex-shrink: 0;
}
.profile-info {
  padding: 0 20px 16px;
  border-bottom: 8px solid var(--surface);
}
.profile-avatar-wrap {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-top: -40px;
  border: 3px solid var(--bg);
  background: var(--surface-3);
  overflow: hidden;
  flex-shrink: 0;
}
.profile-avatar-wrap img,
.profile-avatar-wrap video { width:100%; height:100%; object-fit:cover; border-radius:50% }

.profile-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: -32px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.btn-edit-profile {
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--text);
  border-radius: var(--radius-full);
  padding: 7px 18px;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-edit-profile:hover { border-color:var(--green); color:var(--green) }
.btn-follow {
  background: var(--text);
  color: var(--bg);
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  padding: 7px 18px;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-follow:hover    { background:#d0d0d0 }
.btn-follow.siguiendo { background:transparent; border-color:var(--border-2); color:var(--text) }
.btn-follow.siguiendo:hover { border-color:var(--red); color:var(--red); background:var(--red-subtle) }
.btn-mensaje {
  background: transparent;
  border: 1px solid var(--border-2);
  color: var(--text);
  border-radius: var(--radius-full);
  padding: 7px 18px;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: all var(--transition);
  display: flex;
  align-items: center;
  gap: 6px;
}
.btn-mensaje:hover { border-color:var(--green); color:var(--green) }

.profile-handle { color:var(--text-3); font-size:.88rem; margin-top:2px }
.profile-bio    { font-size:.9rem; color:var(--text-2); margin-top:8px; line-height:1.55 }
.profile-stats  { display:flex; gap:20px; margin-top:12px; flex-wrap:wrap }
.profile-stats span { font-size:.88rem; color:var(--text-2) }
.profile-stats strong { color:var(--text); font-weight:800 }

/* ── Back button ── */
.btn-back {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--text-2);
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 0;
  font-family: inherit;
  transition: color var(--transition);
}
.btn-back:hover { color:var(--green) }

/* ── Spin (fallback si no está en index.css) ── */
.spin { display:inline-block; animation:spin .8s linear infinite }
@keyframes spin { to { transform:rotate(360deg) } }

/* ── Responsive ── */
@media (max-width:768px) {
  .explore-search-bar { padding:12px 16px; top:56px }
  .search-tabs        { top:calc(56px + 57px) }
  .search-user-result { padding:12px 16px }
  .profile-banner     { height:110px }
  .profile-avatar-wrap { width:68px; height:68px; margin-top:-34px }
  .profile-stats      { gap:14px }
}