/* ===============================
   PERFIL – ESTÉTICA PROFESIONAL
   =============================== */

/* ===== VARIABLES BASE ===== */
:root {
  --blue-glow: rgba(30,90,154,.35);
  --border-soft: rgba(255,255,255,.08);
  --bg-dark-top: #05070d;
  --bg-dark-bottom: #020617;
  --ease-smooth: cubic-bezier(.4,0,.2,1);
}

/* ===== SECCIÓN ===== */

.profile-section {
  margin-bottom: 2.5rem;
}

/* ===== HEADER PERFIL ===== */

.profile-header,
.profile-header-box {
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
}

/* ===== AVATAR ===== */

.profile-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  background:#111;
  box-shadow:
    0 0 0 3px var(--blue-glow),
    0 10px 35px rgba(0,0,0,.55);
  transition: box-shadow .25s var(--ease-smooth);
}

.profile-avatar:hover {
  box-shadow:
    0 0 0 3px rgba(30,90,154,.6),
    0 16px 45px rgba(0,0,0,.75);
}

/* ===== USERNAME ===== */

.profile-username,
.profile-name {
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0;
}

/* ===== BADGES ===== */

.profile-badges {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  margin-top: .5rem;
}

.badge-role,
.badge-status,
.badge-points {
  font-size: .68rem;
  letter-spacing: .14em;
  padding: .4rem .7rem;
  border-radius: 999px;
  font-weight: 700;
  line-height: 1;
  transition: opacity .2s var(--ease-smooth);
}

.badge-role:hover,
.badge-status:hover,
.badge-points:hover {
  opacity: .9;
}

/* Roles */
.badge-role.admin { background:#dc2626; }
.badge-role.staff { background:#2563eb; }
.badge-role.user  { background:#374151; }

/* Membresía */
.badge-status.active  { background:#16a34a; }
.badge-status.expired { background:#d97706; }
.badge-status.none    { background:#6b7280; }

/* Puntos */
.badge-points {
  background: linear-gradient(135deg,#facc15,#fde047);
  color:#000;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}

/* ===== CARDS ===== */

.card.custom-grey {
  background:
    radial-gradient(circle at top, rgba(30,90,154,.12), transparent 60%),
    linear-gradient(180deg,var(--bg-dark-top),var(--bg-dark-bottom));
  border:1px solid var(--border-soft);
  border-radius: 18px;
  transition: border-color .25s var(--ease-smooth), box-shadow .25s var(--ease-smooth);
}

.card.custom-grey:hover {
  border-color: rgba(30,90,154,.3);
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* ===== LIST GROUP ===== */

.list-group-item.custom-grey {
  background: transparent;
  border-color: rgba(255,255,255,.05);
}

/* ===== TÍTULOS SECCIÓN ===== */

.card h4 {
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  font-size: .95rem;
}

/* ===== BOTONES ===== */

.btn {
  border-radius: .6rem;
  transition:
    background-color .18s var(--ease-smooth),
    border-color .18s var(--ease-smooth),
    color .18s var(--ease-smooth);
}

.btn:hover {
  opacity: .95;
}

.btn:active {
  opacity: 1;
}

/* ===== ACCIONES PERFIL ===== */

.profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

/* ===== INFO PERFIL ===== */

.profile-info {
  display: grid;
  gap: .75rem;
  font-size: .9rem;
}

/* ===== REDES SOCIALES ===== */

.border.rounded {
  border-color: rgba(255,255,255,.08)!important;
  transition: border-color .25s var(--ease-smooth), box-shadow .25s var(--ease-smooth);
}

.border.rounded:hover {
  border-color: rgba(30,90,154,.3)!important;
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

/* ===== TEAM BADGE ===== */

.team-points-badge {
  font-size:.75rem;
  padding:.4rem .7rem;
  border-radius:.6rem;
  font-weight:700;
}

/* ===== COLLAPSES ===== */

.collapse.show {
  animation: fadeSlide .28s var(--ease-smooth);
}

@keyframes fadeSlide {
  from {
    opacity:0;
    transform: translateY(-8px);
  }
  to {
    opacity:1;
    transform:none;
  }
}

/* ===== MODALES ===== */

.modal-content {
  border-radius:16px;
  border:1px solid var(--border-soft);
  background:
    linear-gradient(180deg,#06080f,#020617);
}

.modal.fade .modal-dialog {
  transition: transform .25s ease-out;
}

.modal.show .modal-dialog {
  transform: none;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 768px) {
  .profile-avatar {
    width:80px;
    height:80px;
  }

  .profile-username,
  .profile-name {
    font-size:1.15rem;
  }
}

/* ===============================
   PERFIL – ACTION BAR BUTTONS
   =============================== */

/* Contenedor (hereda de flex existente) */
.profile-actions,
.d-flex.flex-column.flex-md-row.justify-content-between.align-items-center.gap-3 {
  gap: .75rem;
}

/* Reset visual de botones */
.profile-actions .btn,
.d-flex.flex-column.flex-md-row.justify-content-between.align-items-center.gap-3 .btn {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.15);
  color: #e5e7eb;
  font-weight: 600;
  letter-spacing: .04em;
  padding: .6rem 1.1rem;
  border-radius: 10px;
  box-shadow: none;
  transition:
    background .2s ease,
    border-color .2s ease,
    color .2s ease;
}

/* Hover elegante - SIN TRANSFORM para evitar parpadeo */
.profile-actions .btn:hover,
.d-flex.flex-column.flex-md-row.justify-content-between.align-items-center.gap-3 .btn:hover {
  background: rgba(30,90,154,.12);
  border-color: rgba(30,90,154,.5);
  color: #fff;
}

/* Acción principal (Hazte socio / Ver membresía) */
.profile-actions .btn-success,
.d-flex.flex-column.flex-md-row.justify-content-between.align-items-center.gap-3 .btn-success,
.profile-actions .ctm-btn-login,
.d-flex.flex-column.flex-md-row.justify-content-between.align-items-center.gap-3 .ctm-btn-login {
  background: linear-gradient(135deg,#16a34a,#22c55e);
  border: none;
  color: #022c22;
  font-weight: 800;
}

.profile-actions .btn-success:hover,
.d-flex.flex-column.flex-md-row.justify-content-between.align-items-center.gap-3 .btn-success:hover,
.profile-actions .ctm-btn-login:hover,
.d-flex.flex-column.flex-md-row.justify-content-between.align-items-center.gap-3 .ctm-btn-login:hover {
  background: linear-gradient(135deg,#22c55e,#4ade80);
}

/* Logout: peligro sutil, no rojo chillón */
.profile-actions .btn-outline-danger,
.d-flex.flex-column.flex-md-row.justify-content-between.align-items-center.gap-3 .btn-outline-danger {
  border-color: rgba(239,68,68,.4);
  color: #fecaca;
}

.profile-actions .btn-outline-danger:hover,
.d-flex.flex-column.flex-md-row.justify-content-between.align-items-center.gap-3 .btn-outline-danger:hover {
  background: rgba(239,68,68,.15);
  border-color: rgba(239,68,68,.8);
  color: #fff;
}

/* Iconos un poco más sutiles */
.profile-actions .btn i,
.d-flex.flex-column.flex-md-row.justify-content-between.align-items-center.gap-3 .btn i {
  opacity: .85;
}

/* Mobile: botones más compactos */
@media (max-width: 768px) {
  .profile-actions .btn,
  .d-flex.flex-column.flex-md-row.justify-content-between.align-items-center.gap-3 .btn {
    width: 100%;
    justify-content: center;
  }
}