.friends-icon-btn { position: relative; width:38px; height:38px; border:1px solid transparent; background:transparent; color:var(--text-secondary); border-radius:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:16px; transition:.2s; }
.friends-icon-btn:hover { background: var(--primary); color:#fff; box-shadow:0 4px 12px rgba(102,126,234,.3); }
.friends-badge { position:absolute; top:-4px; right:-4px; background:#ef4444; color:#fff; border-radius:999px; font-size:10px; min-width:18px; height:18px; display:none; align-items:center; justify-content:center; padding:0 4px; font-weight:600; box-shadow:0 0 0 2px var(--bg-secondary); }

/* Modal */
#friendsModalOverlay { position:fixed; inset:0; background:rgba(0,0,0,.5); backdrop-filter:blur(8px); display:none; opacity:0; transition:.25s; z-index:99998; }
#friendsModalOverlay.show { opacity:1; }
#friendsModal { position:fixed; top:50%; left:50%; transform:translate(-50%,-50%) scale(.95); background:var(--bg-secondary); border:1px solid var(--border-color); border-radius:22px; padding:0; width: min(1040px,95%); max-height:88vh; min-height:480px; display:none; flex-direction:column; overflow:hidden; box-shadow:var(--shadow-lg); z-index:99999; transition: all .3s cubic-bezier(.175,.885,.32,1.275); }
#friendsModal.show { transform:translate(-50%,-50%) scale(1); }

.friends-modal-header { display:flex; align-items:center; justify-content:space-between; padding:18px 24px; border-bottom:1px solid var(--border-color); background:var(--bg-tertiary); }
.friends-modal-header h3 { margin:0; font-size:1.05rem; display:flex; gap:8px; align-items:center; }
.friends-close { background:transparent; border:none; color:var(--text-secondary); font-size:20px; cursor:pointer; line-height:1; padding:4px 8px; border-radius:8px; }
.friends-close:hover { background:var(--primary); color:#fff; }

.friends-tabs { display:flex; gap:6px; padding:12px 18px; border-bottom:1px solid var(--border-color); background:var(--bg-secondary); }
.friends-tab-btn { flex:1; background:var(--bg-tertiary); border:1px solid var(--border-color); border-radius:12px; padding:10px 12px; font-size:.85rem; font-weight:600; cursor:pointer; color:var(--text-secondary); display:flex; align-items:center; gap:6px; justify-content:center; transition:.2s; }
.friends-tab-btn.active, .friends-tab-btn:hover { background:var(--primary); color:#fff; border-color:var(--primary); }

.friends-content { padding:16px 20px 28px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:24px; }
.friends-tab { display:none; flex-direction:column; gap:14px; }
.friends-tab.active { display:flex; }

#pendingRequestsList,
#friendSearchResults,
#friendsList {
  max-height: 56vh;
  overflow-y: auto;
}

.friend-card { display:flex; gap:14px; align-items:center; padding:12px 14px; border:1px solid var(--border-color); background:var(--bg-secondary); border-radius:14px; transition:.2s; position:relative; }
.friend-card:hover { border-color:var(--primary); box-shadow:0 4px 12px rgba(102,126,234,.15); }
.friend-card .avatar { width:42px; height:42px; border-radius:12px; background:linear-gradient(135deg,#06b6d4,#0891b2); display:flex; align-items:center; justify-content:center; color:#fff; font-size:18px; flex-shrink:0; }
.friend-card .avatar-img { width:100%; height:100%; object-fit:cover; border-radius:12px; display:block; }
.friend-card .info { flex:1; min-width:0; }
.friend-card .name { font-weight:600; font-size:.95rem; }
.friend-card .meta { font-size:.7rem; color:var(--text-secondary); margin-top:2px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
.friend-card .actions { display:flex; gap:8px; align-items:center; justify-content:flex-end; }
.friend-card button { width:34px; height:34px; border:none; border-radius:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:14px; transition:.2s; }
.friend-card button.btn-send { background:var(--primary); color:#fff; }
.friend-card button.btn-accept { background:#10b981; color:#fff; }
.friend-card button.btn-reject { background:#ef4444; color:#fff; }
.friend-card button.btn-remove { background:#6b7280; color:#fff; }
.friend-card button:hover { filter:brightness(1.1); transform:translateY(-2px); }
.friend-card button:disabled { opacity:.6; cursor:not-allowed; transform:none; }

.empty, .error, .loading, .hint { padding:18px; text-align:center; border:1px dashed var(--border-color); border-radius:14px; font-size:.8rem; color:var(--text-secondary); }
.error { color:#ef4444; border-color:#ef4444; }

/* Search form */
#friendSearchForm { display:flex; gap:10px; }
#friendSearchInput { flex:1; padding:12px 14px; border:1px solid var(--border-color); border-radius:12px; background:var(--bg-secondary); color:var(--text-primary); font-size:.85rem; }
#friendSearchInput:focus { outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(99,102,241,.25); }
.btn-search { background:var(--primary); border:1px solid var(--primary); color:#fff; padding:0 18px; border-radius:12px; font-weight:600; cursor:pointer; display:flex; align-items:center; gap:6px; }
.btn-search:hover { filter:brightness(1.1); }

@media (max-width:680px){
  #friendsModal { width:95%; }
  .friends-tabs { flex-wrap:wrap; }
  .friend-card { flex-wrap:wrap; }
  .friend-card .actions { width:100%; justify-content:flex-end; }
}

/* Dark theme tweaks */
[data-theme="dark"] .friend-card { background:var(--bg-tertiary); }
[data-theme="dark"] .friends-tab-btn { background:var(--bg-tertiary); }
[data-theme="dark"] .friends-tab-btn.active { background:var(--primary); }

/* Supervision requests styles */
.requests-section {
  margin-bottom: 24px;
}

.requests-section h4 {
  color: var(--text-primary);
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  gap: 8px;
}

.requests-section h4 i {
  color: var(--primary);
  font-size: 0.85rem;
}

.friend-card.supervision-request {
  border-left: 4px solid #f59e0b;
  background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(245, 158, 11, 0.05) 100%);
}

.friend-card.supervision-detected {
  border-left: 4px solid #3b82f6;
  background: linear-gradient(135deg, var(--bg-secondary) 0%, rgba(59, 130, 246, 0.05) 100%);
}

.status-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 12px;
  margin-top: 4px;
  display: inline-block;
}

.supervision-request .status-badge {
  background: rgba(245, 158, 11, 0.15);
  color: #d97706;
}

.supervision-detected .status-badge {
  background: rgba(59, 130, 246, 0.15);
  color: #2563eb;
}

.friend-card.supervision-request .avatar i,
.friend-card.supervision-detected .avatar i {
  color: var(--primary);
}

/* Enhanced buttons for supervision */
.friend-card .btn-accept {
  background: #10b981;
  color: white;
  border: none;
  padding: 8px 12px;
  min-width: 96px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.friend-card .btn-accept:hover {
  background: #059669;
  transform: translateY(-1px);
}

.friend-card .btn-reject {
  background: #ef4444;
  color: white;
  border: none;
  padding: 8px 12px;
  min-width: 96px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.friend-card .btn-reject:hover {
  background: #dc2626;
  transform: translateY(-1px);
}

/* Incrustado en /perfil (sin overlay ni modal flotante) */
.perfil-friends-embed #friendsModal.friends-modal-perfil-root,
.perfil-friends-embed #friendsModal {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  width: 100%;
  max-width: 100%;
  max-height: none;
  min-height: 400px;
  margin: 0;
  display: flex !important;
  flex-direction: column;
  z-index: 1;
  box-shadow: var(--shadow-md, 0 4px 24px rgba(0, 0, 0, 0.08));
}
.perfil-friends-embed #friendsModal.show {
  transform: none;
}
.perfil-friends-embed .friends-modal-header {
  border-radius: 14px 14px 0 0;
}
.perfil-friends-embed #pendingRequestsList,
.perfil-friends-embed #friendSearchResults,
.perfil-friends-embed #friendsList {
  max-height: min(52vh, 480px);
}
@media (max-width: 680px) {
  .perfil-friends-embed #friendsModal {
    width: 100%;
  }
}