/* =========================================================
   AEEB - Área de socios + Login
   Hereda variables y vocabulario visual de aeeb.css
   ========================================================= */

/* ---------- Botón Login + Avatar (Header) ---------- */
.aeeb-nav__auth{
  display:flex; align-items:center; gap:10px;
}
.aeeb-login-toggle{
  display:inline-flex; align-items:center; gap:8px;
  height:42px; padding:0 16px;
  border-radius: var(--aeeb-radius-sm);
  background:transparent;
  border:1px solid var(--aeeb-line);
  color: var(--aeeb-ink);
  font-family: var(--aeeb-font-head);
  font-weight:700; font-size:14px;
  cursor:pointer;
  transition: border-color .2s, background .2s, color .2s;
}
.aeeb-login-toggle:hover{
  border-color: var(--aeeb-purple);
  color: var(--aeeb-purple);
}
.aeeb-login-toggle svg{
  width:16px; height:16px; stroke-width:2;
}

/* Avatar (sesión iniciada) */
.aeeb-user-chip{
  display:inline-flex; align-items:center; gap:10px;
  padding:6px 14px 6px 6px;
  height:42px;
  border-radius: 100px;
  background:#fff;
  border:1px solid var(--aeeb-line);
  font-family: var(--aeeb-font-head);
  font-weight:600; font-size:13px;
  color: var(--aeeb-ink);
  cursor:pointer;
  transition: border-color .2s;
  position:relative;
}
.aeeb-user-chip:hover{ border-color: var(--aeeb-purple); }
.aeeb-user-chip__avatar{
  width:30px; height:30px; border-radius:50%;
  background: var(--aeeb-purple);
  color:#fff; font-weight:700; font-size:13px;
  display:inline-flex; align-items:center; justify-content:center;
  border:2px solid var(--aeeb-orange);
}
.aeeb-user-chip__role{
  display:inline-block;
  font-size:11px; padding:2px 8px;
  border-radius: 100px;
  background: var(--aeeb-lime); color:#1E0035;
  font-weight:700; letter-spacing:.02em;
  text-transform:uppercase;
}
.aeeb-user-chip__role--coach{ background: var(--aeeb-amber); }
.aeeb-user-menu{
  position:absolute; top:calc(100% + 8px); right:0;
  background:#fff; border:1px solid var(--aeeb-line);
  border-radius: var(--aeeb-radius);
  box-shadow: 0 18px 40px -20px rgba(0,0,0,.25);
  min-width: 220px; padding: 8px;
  display:none; z-index:60;
}
.aeeb-user-chip.is-open .aeeb-user-menu{ display:block; }
.aeeb-user-menu a{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px; border-radius: var(--aeeb-radius-sm);
  font-family: var(--aeeb-font-body); font-size:14px;
  color: var(--aeeb-ink);
}
.aeeb-user-menu a:hover{ background: var(--aeeb-bg-soft); color: var(--aeeb-purple); }
.aeeb-user-menu hr{
  border:none; border-top:1px solid var(--aeeb-line);
  margin:6px 0;
}

/* ---------- Login Dropdown (Header) ---------- */
.aeeb-login-dropdown{
  position:absolute;
  top: calc(100% + 8px);
  right: 24px;
  width: 380px;
  background:#fff;
  border:1px solid var(--aeeb-line);
  border-radius: var(--aeeb-radius);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,.3);
  padding: 18px 18px 16px;
  z-index:60;
  display:none;
  font-family: var(--aeeb-font-body);
}
.aeeb-login-dropdown.is-open{ display:block; animation: aeeb-fade-down .18s ease; }
@keyframes aeeb-fade-down{
  from{ opacity:0; transform: translateY(-6px); }
  to  { opacity:1; transform: translateY(0); }
}
.aeeb-login-dropdown::before{
  content:"";
  position:absolute; top:-7px; right:36px;
  width:14px; height:14px;
  background:#fff;
  border-left:1px solid var(--aeeb-line);
  border-top:1px solid var(--aeeb-line);
  transform: rotate(45deg);
}
.aeeb-login-dropdown__head{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:12px;
}
.aeeb-login-dropdown__head h3{
  font-family: var(--aeeb-font-head);
  font-size:16px; font-weight:700; color: var(--aeeb-ink);
}
.aeeb-login-dropdown__close{
  border:none; background:transparent;
  width:28px; height:28px; border-radius:50%;
  cursor:pointer; font-size:18px; color: var(--aeeb-muted);
}
.aeeb-login-dropdown__close:hover{ background: var(--aeeb-bg-soft); color: var(--aeeb-ink); }

/* ---------- Selector de Rol ---------- */
.aeeb-role-selector{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:8px;
  margin-bottom: 12px;
}
.aeeb-role-option{
  position:relative;
  cursor:pointer;
  border:1.5px solid var(--aeeb-line);
  background:#fff;
  border-radius: var(--aeeb-radius);
  padding: 10px 8px 8px;
  text-align:center;
  transition: border-color .18s, background .18s, transform .18s;
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.aeeb-role-option:hover{ border-color: var(--aeeb-purple); transform: translateY(-1px); }
.aeeb-role-option input{
  position:absolute; opacity:0; pointer-events:none;
}
.aeeb-role-option__icon{
  width:32px; height:32px; border-radius:50%;
  background: var(--aeeb-bg-soft);
  display:flex; align-items:center; justify-content:center;
  color: var(--aeeb-ink);
  transition: background .18s, color .18s;
}
.aeeb-role-option__icon svg{ width:16px; height:16px; stroke-width:2; }
.aeeb-role-option__label{
  font-family: var(--aeeb-font-head);
  font-weight:700; font-size:12px;
  color: var(--aeeb-ink);
}
.aeeb-role-option__hint{
  font-size:11px; color: var(--aeeb-muted);
  font-family: var(--aeeb-font-body);
  display:none;
}
.aeeb-role-option__check{
  position:absolute; top:8px; right:8px;
  width:18px; height:18px; border-radius:50%;
  border:1.5px solid var(--aeeb-line);
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  transition: border-color .18s, background .18s;
}
.aeeb-role-option__check::after{
  content:""; width:8px; height:8px; border-radius:50%;
  background: transparent;
  transition: background .18s;
}
/* Estado seleccionado: PLAYER (lima) */
.aeeb-role-option:has(input[value="player"]:checked){
  border-color: var(--aeeb-purple);
  background: #FBFAFF;
}
.aeeb-role-option:has(input[value="player"]:checked) .aeeb-role-option__icon{
  background: var(--aeeb-lime); color:#1E0035;
}
.aeeb-role-option:has(input[value="player"]:checked) .aeeb-role-option__check{
  border-color: var(--aeeb-purple); background: var(--aeeb-purple);
}
.aeeb-role-option:has(input[value="player"]:checked) .aeeb-role-option__check::after{
  background:#fff;
}
/* Estado seleccionado: COACH (ámbar) */
.aeeb-role-option:has(input[value="coach"]:checked){
  border-color: var(--aeeb-orange);
  background: #FFF8F4;
}
.aeeb-role-option:has(input[value="coach"]:checked) .aeeb-role-option__icon{
  background: var(--aeeb-amber); color: var(--aeeb-ink);
}
.aeeb-role-option:has(input[value="coach"]:checked) .aeeb-role-option__check{
  border-color: var(--aeeb-orange); background: var(--aeeb-orange);
}
.aeeb-role-option:has(input[value="coach"]:checked) .aeeb-role-option__check::after{
  background:#fff;
}

/* ---------- Form Login ---------- */
.aeeb-form-field{
  display:flex; flex-direction:column; gap:6px;
  margin-bottom: 8px;
}
.aeeb-form-field label{
  font-family: var(--aeeb-font-head);
  font-size:12px; font-weight:600;
  color: var(--aeeb-ink);
  text-transform: uppercase; letter-spacing:.04em;
}
.aeeb-form-field input{
  height:38px;
  padding: 0 12px;
  border:1px solid var(--aeeb-line);
  border-radius: var(--aeeb-radius-sm);
  font-family: var(--aeeb-font-body);
  font-size:13px;
  color: var(--aeeb-ink);
  background:#fff;
  transition: border-color .15s;
}
.aeeb-form-field input:focus{
  outline:none;
  border-color: var(--aeeb-purple);
  box-shadow: 0 0 0 3px rgba(104,91,199,.15);
}
.aeeb-form-row{
  display:flex; align-items:center; justify-content:space-between;
  margin: 4px 0 16px;
  font-size:13px; font-family: var(--aeeb-font-body);
}
.aeeb-form-row label{
  display:inline-flex; align-items:center; gap:8px;
  color: var(--aeeb-text); cursor:pointer;
}
.aeeb-form-row input[type="checkbox"]{
  width:16px; height:16px; accent-color: var(--aeeb-purple);
}
.aeeb-form-row a{ color: var(--aeeb-purple); font-weight:600; }
.aeeb-form-row a:hover{ text-decoration: underline; }

.aeeb-login-dropdown .aeeb-btn{
  width:100%; height:40px;
}
.aeeb-login-dropdown__sep{
  text-align:center; margin: 10px 0 8px;
  font-size:12px; color: var(--aeeb-muted);
  position:relative;
}
.aeeb-login-dropdown__sep::before,
.aeeb-login-dropdown__sep::after{
  content:""; position:absolute; top:50%;
  width:calc(50% - 18px); height:1px; background: var(--aeeb-line);
}
.aeeb-login-dropdown__sep::before{ left:0; }
.aeeb-login-dropdown__sep::after{ right:0; }
.aeeb-login-dropdown__foot{
  text-align:center; font-size:13px; color: var(--aeeb-text);
}
.aeeb-login-dropdown__foot a{
  color: var(--aeeb-purple); font-weight:700;
}

/* ---------- ÁREA DE SOCIOS ---------- */
.aeeb-socios{
  background: var(--aeeb-bg-soft);
  min-height: calc(100vh - 200px);
  padding: 40px 0 60px;
}
.aeeb-socios__hero{
  background: var(--aeeb-ink-2);
  color:#FBFCF6;
  border-radius: var(--aeeb-radius);
  padding: 40px 44px;
  display:flex; justify-content:space-between; align-items:center;
  gap:32px; flex-wrap:wrap;
  position:relative; overflow:hidden;
  margin-bottom: 32px;
}
.aeeb-socios__hero::before{
  content:""; position:absolute; right:-100px; top:-80px;
  width: 280px; height:280px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, rgba(218,255,2,.4), transparent 60%);
}
.aeeb-socios__hero-text h1{
  font-family: var(--aeeb-font-head);
  font-weight:700; font-size: clamp(28px, 3vw, 38px);
  color: var(--aeeb-lime);
  line-height:1.15;
  margin-bottom:8px;
}
.aeeb-socios__hero-text p{
  color:#B6B8BC; font-size:15px; max-width:520px;
}
.aeeb-socios__role-badge{
  display:inline-flex; align-items:center; gap:10px;
  padding: 10px 18px;
  border-radius: 100px;
  background: rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);
  font-family: var(--aeeb-font-head); font-weight:700;
  font-size:13px; color:#fff;
  text-transform:uppercase; letter-spacing:.04em;
  position:relative; z-index:2;
}
.aeeb-socios__role-badge .dot{
  width:8px; height:8px; border-radius:50%;
  background: var(--aeeb-lime);
}
.aeeb-socios__role-badge--coach .dot{ background: var(--aeeb-amber); }

/* Layout 2 columnas */
.aeeb-socios__layout{
  display:grid;
  grid-template-columns: 260px 1fr;
  gap: 32px;
}
.aeeb-socios__sidebar{
  background:#fff;
  border:1px solid var(--aeeb-line);
  border-radius: var(--aeeb-radius);
  padding: 18px 14px;
  height:fit-content;
  position:sticky; top: 100px;
}
.aeeb-socios__nav{
  display:flex; flex-direction:column; gap:4px;
}
.aeeb-socios__nav a{
  display:flex; align-items:center; gap:12px;
  padding: 11px 14px;
  border-radius: var(--aeeb-radius-sm);
  font-family: var(--aeeb-font-head);
  font-weight:600; font-size:14px;
  color: var(--aeeb-ink);
  transition: background .15s, color .15s;
}
.aeeb-socios__nav a:hover{
  background: var(--aeeb-bg-soft);
  color: var(--aeeb-purple);
}
.aeeb-socios__nav a.is-active{
  background: var(--aeeb-ink);
  color: var(--aeeb-lime);
}
.aeeb-socios__nav svg{ width:18px; height:18px; stroke-width:2; }
.aeeb-socios__nav-section{
  font-family: var(--aeeb-font-head);
  font-weight:700; font-size:11px;
  color: var(--aeeb-muted);
  text-transform: uppercase; letter-spacing:.08em;
  padding: 14px 14px 6px;
}

.aeeb-socios__main{
  display:flex; flex-direction:column; gap:24px;
}
.aeeb-socios__panel{
  background:#fff;
  border:1px solid var(--aeeb-line);
  border-radius: var(--aeeb-radius);
  padding: 28px;
}
.aeeb-socios__panel h2{
  font-family: var(--aeeb-font-head);
  font-weight:700; font-size:22px;
  color: var(--aeeb-ink);
  margin-bottom:6px;
}
.aeeb-socios__panel-sub{
  color: var(--aeeb-muted); font-size:14px;
  margin-bottom:20px;
}

/* Stats grid */
.aeeb-stats{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:16px;
}
.aeeb-stat{
  background:#fff; border:1px solid var(--aeeb-line);
  border-radius: var(--aeeb-radius);
  padding: 20px;
  display:flex; flex-direction:column; gap:6px;
  position:relative; overflow:hidden;
}
.aeeb-stat__label{
  font-family: var(--aeeb-font-head);
  font-size:12px; font-weight:600;
  color: var(--aeeb-muted);
  text-transform: uppercase; letter-spacing:.04em;
}
.aeeb-stat__value{
  font-family: var(--aeeb-font-head);
  font-size:32px; font-weight:800;
  color: var(--aeeb-ink); line-height:1;
}
.aeeb-stat__delta{
  font-size:12px; color: var(--aeeb-purple); font-weight:700;
}
.aeeb-stat--accent{ background: var(--aeeb-purple); color:#fff; border-color: transparent; }
.aeeb-stat--accent .aeeb-stat__label,
.aeeb-stat--accent .aeeb-stat__value{ color:#fff; }
.aeeb-stat--accent .aeeb-stat__delta{ color: var(--aeeb-lime); }

/* Recursos / próximos eventos */
.aeeb-socios__list{
  display:flex; flex-direction:column;
}
.aeeb-socios__list-item{
  display:grid; grid-template-columns: 56px 1fr auto;
  gap:16px; align-items:center;
  padding: 14px 0;
  border-bottom: 1px solid var(--aeeb-line);
}
.aeeb-socios__list-item:last-child{ border-bottom:none; }
.aeeb-socios__list-thumb{
  width:56px; height:56px; border-radius: var(--aeeb-radius-sm);
  background: var(--aeeb-bg-soft);
  display:flex; align-items:center; justify-content:center;
  color: var(--aeeb-purple);
}
.aeeb-socios__list-thumb svg{ width:22px; height:22px; stroke-width:2; }
.aeeb-socios__list-body strong{
  display:block;
  font-family: var(--aeeb-font-head);
  font-weight:700; font-size:15px;
  color: var(--aeeb-ink);
  margin-bottom:2px;
}
.aeeb-socios__list-body span{
  font-size:13px; color: var(--aeeb-muted);
}
.aeeb-socios__list-cta{
  font-family: var(--aeeb-font-head);
  font-weight:700; font-size:13px;
  color: var(--aeeb-purple);
  padding: 8px 14px;
  border-radius: var(--aeeb-radius-sm);
  border:1px solid var(--aeeb-line);
  background:#fff;
  transition: background .15s, color .15s;
}
.aeeb-socios__list-cta:hover{
  background: var(--aeeb-purple); color:#fff;
  border-color: var(--aeeb-purple);
}

/* Responsive */
@media (max-width: 1100px){
  .aeeb-socios__layout{ grid-template-columns: 1fr; }
  .aeeb-socios__sidebar{ position:static; }
  .aeeb-socios__nav{ flex-direction: row; flex-wrap: wrap; }
  .aeeb-stats{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px){
  .aeeb-login-dropdown{
    position:fixed; top:auto; right:12px; left:12px; bottom:12px;
    width:auto;
  }
  .aeeb-login-dropdown::before{ display:none; }
  .aeeb-stats{ grid-template-columns: 1fr; }
  .aeeb-socios__hero{ padding: 28px 22px; }
}

/* =============================================================
   SELECTOR DE ROLES — VARIANTE 3 OPCIONES (Jugador / Entrenador / Socio)
   Añadir al final de aeeb-members.css
   ============================================================= */

/* Layout 3 columnas cuando hay 3 opciones */
.aeeb-role-selector--three{
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}

/* En móvil pasamos a 1 columna apilada */
@media (max-width: 480px){
  .aeeb-role-selector--three{
    grid-template-columns: 1fr;
  }
}

/* Ajustes a las cards cuando son 3 (más compactas) */
.aeeb-role-selector--three .aeeb-role-option{
  padding: 12px 8px 10px;
}
.aeeb-role-selector--three .aeeb-role-option__icon{
  width: 36px; height: 36px;
}
.aeeb-role-selector--three .aeeb-role-option__icon svg{
  width: 18px; height: 18px;
}
.aeeb-role-selector--three .aeeb-role-option__label{
  font-size: 13px;
}
.aeeb-role-selector--three .aeeb-role-option__hint{
  font-size: 10px;
}

/* Estado seleccionado: MEMBER (Socio) — púrpura sólido */
.aeeb-role-option:has(input[value="member"]:checked){
  border-color: var(--aeeb-purple);
  background: var(--aeeb-purple);
}
.aeeb-role-option:has(input[value="member"]:checked) .aeeb-role-option__icon{
  background: var(--aeeb-lime);
  color: var(--aeeb-purple);
}
.aeeb-role-option:has(input[value="member"]:checked) .aeeb-role-option__label{
  color: #fff;
}
.aeeb-role-option:has(input[value="member"]:checked) .aeeb-role-option__hint{
  color: rgba(255,255,255,.85);
}
.aeeb-role-option:has(input[value="member"]:checked) .aeeb-role-option__check{
  border-color: var(--aeeb-lime);
  background: var(--aeeb-lime);
}
.aeeb-role-option:has(input[value="member"]:checked) .aeeb-role-option__check::after{
  background: var(--aeeb-purple);
}

/* Variante del avatar/chip cuando el rol es member */
.aeeb-user-chip__role--member{
  background: var(--aeeb-purple);
  color: #fff;
}


/* ── .is-selected: fallback JS para navegadores sin soporte :has() ── */
.aeeb-role-option.is-selected{ border-color: var(--aeeb-purple); background: #FBFAFF; }
.aeeb-role-option.is-selected .aeeb-role-option__icon{ background: var(--aeeb-lime); color:#1E0035; }
.aeeb-role-option.is-selected .aeeb-role-option__check{ border-color: var(--aeeb-purple); background: var(--aeeb-purple); }
.aeeb-role-option.is-selected .aeeb-role-option__check::after{ background:#fff; }

/* Por rol: entrenador */
.aeeb-login-dropdown .aeeb-role-option.is-selected[data-role="entrenador"],
.aeeb-role-option:has(input[value="entrenador"]:checked){ border-color:var(--aeeb-orange); background:#FFF8F4; }
.aeeb-login-dropdown .aeeb-role-option.is-selected[data-role="entrenador"] .aeeb-role-option__icon,
.aeeb-role-option:has(input[value="entrenador"]:checked) .aeeb-role-option__icon{ background:var(--aeeb-amber); color:var(--aeeb-ink); }
.aeeb-login-dropdown .aeeb-role-option.is-selected[data-role="entrenador"] .aeeb-role-option__check,
.aeeb-role-option:has(input[value="entrenador"]:checked) .aeeb-role-option__check{ border-color:var(--aeeb-orange); background:var(--aeeb-orange); }
.aeeb-login-dropdown .aeeb-role-option.is-selected[data-role="entrenador"] .aeeb-role-option__check::after,
.aeeb-role-option:has(input[value="entrenador"]:checked) .aeeb-role-option__check::after{ background:#fff; }

/* jugador */
.aeeb-login-dropdown .aeeb-role-option.is-selected[data-role="jugador"],
.aeeb-role-option:has(input[value="jugador"]:checked){ border-color:var(--aeeb-purple); background:#FBFAFF; }
.aeeb-login-dropdown .aeeb-role-option.is-selected[data-role="jugador"] .aeeb-role-option__icon,
.aeeb-role-option:has(input[value="jugador"]:checked) .aeeb-role-option__icon{ background:var(--aeeb-lime); color:#1E0035; }
.aeeb-login-dropdown .aeeb-role-option.is-selected[data-role="jugador"] .aeeb-role-option__check,
.aeeb-role-option:has(input[value="jugador"]:checked) .aeeb-role-option__check{ border-color:var(--aeeb-purple); background:var(--aeeb-purple); }
.aeeb-login-dropdown .aeeb-role-option.is-selected[data-role="jugador"] .aeeb-role-option__check::after,
.aeeb-role-option:has(input[value="jugador"]:checked) .aeeb-role-option__check::after{ background:#fff; }

/* familia */
.aeeb-login-dropdown .aeeb-role-option.is-selected[data-role="familia"],
.aeeb-role-option:has(input[value="familia"]:checked){ border-color:#0D9488; background:#F0FDFA; }
.aeeb-login-dropdown .aeeb-role-option.is-selected[data-role="familia"] .aeeb-role-option__icon,
.aeeb-role-option:has(input[value="familia"]:checked) .aeeb-role-option__icon{ background:#CCFBF1; color:#0D9488; }
.aeeb-login-dropdown .aeeb-role-option.is-selected[data-role="familia"] .aeeb-role-option__check,
.aeeb-role-option:has(input[value="familia"]:checked) .aeeb-role-option__check{ border-color:#0D9488; background:#0D9488; }
.aeeb-login-dropdown .aeeb-role-option.is-selected[data-role="familia"] .aeeb-role-option__check::after,
.aeeb-role-option:has(input[value="familia"]:checked) .aeeb-role-option__check::after{ background:#fff; }

/* otros */
.aeeb-login-dropdown .aeeb-role-option.is-selected[data-role="otros"],
.aeeb-role-option:has(input[value="otros"]:checked){ border-color:#6B7280; background:#F9FAFB; }
.aeeb-login-dropdown .aeeb-role-option.is-selected[data-role="otros"] .aeeb-role-option__icon,
.aeeb-role-option:has(input[value="otros"]:checked) .aeeb-role-option__icon{ background:#E5E7EB; color:#374151; }
.aeeb-login-dropdown .aeeb-role-option.is-selected[data-role="otros"] .aeeb-role-option__check,
.aeeb-role-option:has(input[value="otros"]:checked) .aeeb-role-option__check{ border-color:#6B7280; background:#6B7280; }
.aeeb-login-dropdown .aeeb-role-option.is-selected[data-role="otros"] .aeeb-role-option__check::after,
.aeeb-role-option:has(input[value="otros"]:checked) .aeeb-role-option__check::after{ background:#fff; }

/* Chips del usuario logueado — nuevos roles */
.aeeb-user-chip__role--entrenador{ background: var(--aeeb-amber); color: var(--aeeb-ink); }
.aeeb-user-chip__role--jugador{ background: var(--aeeb-lime); color: #1E0035; }
.aeeb-user-chip__role--familia{ background: #CCFBF1; color: #0D9488; }
.aeeb-user-chip__role--otros{ background: #E5E7EB; color: #374151; }