/* ============================================================
   MIEMBROS · directorio por nivel (3.1.1)
   Tarjeta profesional: foto o iniciales sobre azul marino, nombre, empresa,
   puesto/giro, ciudad, insignia de nivel y número de cliente. Prefijo .mc-
   ============================================================ */
#app .mc-leyenda{display:grid;gap:14px;align-items:center;margin:14px 0 18px;padding:18px 20px;border-radius:18px;background:linear-gradient(135deg,#0d1b2e,#1e4d8f);color:#fff;box-shadow:0 14px 40px rgba(13,27,46,.14)}
#app .mc-leyenda p{margin:0;color:#e8f0fb;font-size:14px;line-height:1.6}
#app .mc-leyenda .btn{justify-self:start}
#app .mc-leyenda-ico{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff}
#app .mc-leyenda-ico svg{width:20px;height:20px}
#app .mc-leyenda.is-admin{background:#fff;color:var(--marino);box-shadow:inset 0 0 0 1px var(--hairline)}
#app .mc-leyenda.is-admin p{color:#42536b}
#app .mc-leyenda.is-admin .mc-leyenda-ico{background:#eaf1fb;color:var(--azul)}
@media(min-width:760px){#app .mc-leyenda{grid-template-columns:auto minmax(0,1fr) auto}}

#app .mc-card{display:flex;flex-direction:column;min-height:0;padding:18px 18px 14px;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px var(--hairline),0 14px 40px rgba(13,27,46,.05);transition:transform .45s,box-shadow .45s}
#app .mc-card:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px var(--goldline),0 22px 50px rgba(13,27,46,.10)}
#app .mc-card.is-me{box-shadow:inset 0 0 0 2px var(--azul)}
#app .mc-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:12px}
#app .mc-foto{position:relative;display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:linear-gradient(135deg,#0d1b2e,#1e4d8f);color:#fff;overflow:visible;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--goldline)}
#app .mc-foto img{width:72px;height:72px;border-radius:50%;object-fit:cover;display:block}
#app .mc-foto b{font-family:var(--serif);font-size:28px;font-weight:500;letter-spacing:.02em;color:#fff}
#app .mc-dot{position:absolute;right:2px;bottom:2px;width:14px;height:14px;border-radius:50%;background:#1c8a5a;box-shadow:0 0 0 3px #fff}
#app .mc-nivel{padding:6px 11px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;background:#eef1f5;color:#42536b}
#app .mc-nivel-invitado{background:#eef1f5;color:#42536b}
#app .mc-nivel-ejecutivo{background:#eaf1fb;color:var(--azul)}
#app .mc-nivel-elite{background:var(--marino);color:#fff}
#app .mc-nivel-acompanamiento{background:#e3f4ea;color:#1c8a5a}
#app .mc-body{flex:1}
#app .mc-body h3{margin:0 0 2px;font-family:var(--serif);font-size:22px;font-weight:500;letter-spacing:-.015em;line-height:1.1;color:var(--marino)}
#app .mc-empresa{margin:0 0 4px;color:var(--azul);font-size:13.5px;font-weight:700}
#app .mc-empresa.mc-vacio{color:var(--muted);font-weight:500}
#app .mc-puesto{margin:0 0 8px;color:#42536b;font-size:13px}
#app .mc-meta{display:flex;flex-wrap:wrap;gap:6px 12px;margin:0 0 10px;color:var(--muted);font-size:11.5px}
#app .mc-meta span{display:inline-flex;align-items:center;gap:5px}
#app .mc-ico{width:13px;height:13px}
#app .mc-brb{padding:2px 8px;border-radius:999px;background:#e3f4ea;color:#1c8a5a;font-weight:700}
#app .mc-desc{margin:0 0 12px;color:#42536b;font-size:13px;line-height:1.6}
#app .mc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid var(--hairline)}
#app .mc-estado{color:var(--muted);font-size:11.5px}
#app .mc-card.is-online .mc-estado{color:#1c8a5a;font-weight:700}
#app .mc-foot .text-link{color:var(--azul)}

/* foto en el editor de perfil */
#app .foto-box{border-radius:50%;background:linear-gradient(135deg,#0d1b2e,#1e4d8f);display:grid;place-items:center;overflow:hidden}
#app .foto-box img{width:100%;height:100%;object-fit:cover}
#app .foto-box .foto-ini{font-family:var(--serif);font-size:30px;color:#fff}
#railAvatar img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block}

@media(max-width:820px){
  #app .mc-leyenda{padding:16px}
  #app .mc-leyenda .btn{width:100%}
  #app .mc-card{padding:16px}
  #app .mc-foto,#app .mc-foto img{width:64px;height:64px}
}